Ответы пользователя Александр Ружевич по тегу «JavaScript»

Как повторять ajax запрос в случае неудачи?

Александр Ружевич @ruzhevich

if (false) {
setTimeout
}

Комментировать

Как правильно указать путь к файлу action.php при передаче данных формы через Ajax?

Александр Ружевич @ruzhevich

url: 'http://ваш сайт.com/wp-content/themes/ваша тема/action.php',

Ответ написан более трёх лет назад

1 комментарий

Подскажuте JS-плагин фотогалереи как на сайте Rozetka?

Александр Ружевич @ruzhevich

на бутстрапе можно, спозиционировать просто как вам нужно bootsnipp.com/snippets/featured/carousel-with-gall...

Ответ написан более трёх лет назад

Комментировать

Как сделать скроллинг страницы по секциям?

Александр Ружевич @ruzhevich

fullpage.js и будет вам счастье, на ютубе даже уроки на русском языке есть, пол часа смотрите и потом нарадоваться не можете

Ответ написан более трёх лет назад

Комментировать

С помощью какого плагина проще всего реализовать такую галерею?

Александр Ружевич @ruzhevich

можно и на бутстрапе bootsnipp.com/snippets/featured/carousel-with-gall...

Ответ написан более трёх лет назад

Комментировать

Из SELECT в COOKIES предыдущее значение?

Александр Ружевич @ruzhevich Автор вопроса

по клику на selecte страница перезагружается идет проверка POST и в зависимости от этого идет запрос в БД и все выводится в разном порядке

if (isset( $_POST['sort'])) {
		
	if ($_POST['sort'] == "popularity") {
	
		 $categories = get_the_category();
    $cat = $categories[0]->term_id;
	
		$args = array(
		
             
            'meta_key'    => 'post_views_count',
            'orderby'     => 'meta_value_num',
            'order'       => 'DESC'
        );
		
		$args['cat'] = $cat;
		
		
		
        query_posts( $args );
		
	}
	
	elseif ($_POST['sort'] == "average") {

		global $query_string;
 query_posts( $query_string . '&orderby=rand' );
 }
elseif ($_POST['sort'] == "newness") {
		

		global $query_string;
 query_posts( $query_string . '&order=ASC' );
 
}	

}

дальше форма

<form method="post" action=""  id="id_town">

	<select id="sel_sort" class="sort_select" name="sort" onchange="this.form.submit()">
			<option value="default">Default sorting</option>
			<option <?php if ($_POST['sort'] == 'newness') {echo "selected='selected'";} ?> value="newness">Sort by newness</option>
			<option <?php if ($_POST['sort'] == 'popularity') {echo "selected='selected'";} ?> value="popularity">Sort by popularity</option>
			<option <?php if ($_POST['sort'] == 'average') {echo "selected='selected'";} ?> value="average">Sort by average rating</option>
			

	</select>

<script>$.cookie('sort', $('#sel_sort').val());</script>

<?php echo $_COOKIE["sort"]; ?>

</form>

ну в принципе и все, как и писал проблема с тем что куки не записываются как нужно а с запозданием, для наглядности вот страничка где все это происходит, она пока без js, пытаюсь локально все сделать а потом уже перенести готовое решение mytandoors.com/category/tandoors

Ответ написан более трёх лет назад

Комментировать

Как сделать fade in/ fade out подложку на owl carousel?

Александр Ружевич @ruzhevich

вы подложку каким образом реализовали? можно что бы карусель не трогать кроме как автовоспроизведение по наведении текст и подложку положить на выполнение родителем, блок в него сверху карусели положить абсолютом и при наведении что бы плавно исчезал через none а когда уберете через not:hover что бы плавно появлялся. пример появления и исчезания подложки гляньте тут duvinrouge.com (наведите на картинки wines)

Ответ написан более трёх лет назад

1 комментарий

Как перенести данный скрипт из html в основной js файл?

Александр Ружевич @ruzhevich

Вы код силой мысли решили передать? если да - то на линии потери)

Ответ написан более трёх лет назад

Комментировать

Как сделать таблицу со скользящей прокруткой?

Александр Ружевич @ruzhevich

я так понимаю что для читаемости таблицы синий столбец должен всегда быть на месте? как таблица будет заполняться? динамически или нет? а что если взять слайдер? один столбец как один слайд тогда все должно красиво заработать в принципе например тот же kenwheeler.github.io/slick и выставить slidesToShow: 6, тогда он постоянно будет показывать 6 слайдов и перематывать по одному по клику на стрелки + он адаптивен и можно будет поставить разное количество видимых частей для разных дисплеев, так же этот слайдер позволит сдвигать таблицу не только стрелками а и перетаскиваниями мышкой что в принципе будет удобно

Ответ написан более трёх лет назад

Комментировать

Как сделать закрытие после отправки в форме заказа звонка?

Александр Ружевич @ruzhevich

попробуйте повесить функцию на нажатие клавиши "Отправить"

<input type="button" onclick="название_функции()" value="Отправить"/>

которая будет эмулировать нажатие на крестик-закрытие модального окна

Ответ написан более трёх лет назад

Комментировать

Какой таймер для Wordpress выбрать?

Александр Ружевич @ruzhevich

а если когда пользователь нажмет записать точное время в куки файл (к примеру unix время)? и при повторном посещении берите куку, отнимайте от текущего времени а по разнице стартуйте таймер

Ответ написан более трёх лет назад

Комментировать

Переключатель внешнего вида?

Александр Ружевич @ruzhevich Автор вопроса

как и обещал выкладываю код, решение найдено в интернете с небольшими доработками, работает на бутстрап.
взято отсюда codepen.io/ajaypatelaj/pen/zIBjJ

разметка:

<div class="container">
    <div class="well well-sm">
        <strong>Display</strong>
        <div class="btn-group">
            <a href="#" id="list" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-th-list">
            </span>List</a> <a href="#" id="grid" class="btn btn-default btn-sm"><span
                class="glyphicon glyphicon-th"></span>Grid</a>
        </div>
    </div>
    <div id="products" class="row list-group">
        <div class="item  col-xs-6 col-sm-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item  col-xs-6 col-sm-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item  col-xs-6 col-sm-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item  col-xs-6 col-sm-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item  col-xs-6 col-sm-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item  col-xs-6 col-sm-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

далее скрип который меняет классы и переключает с сетки на список и обратно. от себя добавил запись в куки при выборе пользователем отображения и проверку на php при последующих посещениях.

<script>
$(document).ready(function() {
	
	<?php 

	if (@$_COOKIE['cookie_list'] == 'list' ) {
		echo "$('#products .item').addClass('list-group-item');";
	
	}
	
	elseif (@$_COOKIE['cookie_list'] == 'grid') {
	echo "$('#products .item').addClass('grid-group-item');
		$('#products .item .thumbnail .caption').addClass('caption_none');";
	}
		else {
	echo "$('#products .item .thumbnail .caption').addClass('caption_none');";
}
	?>

    $('#list').click(function(event){event.preventDefault();$('#products .item').addClass('list-group-item');
	$('#products .item .thumbnail .caption').removeClass('caption_none');
		$.cookie('cookie_list', 'list', {
		expires: 5,
		path: '/',
		});
	});
	
	
	
	
	
    $('#grid').click(function(event){
		event.preventDefault();
		$('#products .item').removeClass('list-group-item');
		$('#products .item').addClass('grid-group-item');
		$('#products .item .thumbnail .caption').addClass('caption_none');
			$.cookie('cookie_list', 'grid', {
		expires: 5,
		path: '/',
		});
		});
	
	
});

</script>

все протестировано и работает, будут вопросы - пишите

Ответ написан более трёх лет назад

Комментировать

Почему не удается заадаптивить?

Александр Ружевич @ruzhevich

settings: {
        unslick: true
      }

Ответ написан более трёх лет назад

5 комментариев

Как подгружать в форму значения при вводе?

Александр Ружевич @ruzhevich

Когда то создавал такое на основе БД и при вводе выводил ajaxом, если БД устраивают то поищу код

Ответ написан более трёх лет назад

4 комментария

Как сделать адаптивным лэдинг с parallax background?

Александр Ружевич @ruzhevich

задайте через медиа запросы блоку отвечающему за паралакс на мобильных устройствах display:none; а вместо него на тоже место с такими же параметрами через теже медиа запросы display:block; для мобильных блок с простым background

Ответ написан более трёх лет назад

Комментировать

Как ускорить адаптацию сайта?

Александр Ружевич @ruzhevich

правильно пишут что бутстрап упрощает жизнь) но дописывать ручками медиа запросы все же придется как ни крути. админка того же вордпресса + бутстрап творит чудеса для адаптивного дизайна, но как пишут в некоторых местах "бутстрапа стало очень" много хотя в этом есть свои плюсы, информации и готовых решений на все случаи жизни хоть отбавляй. я думаю вряд ли есть хоть один фреймворк в котором дописывать ничего не придется ибо фантазия дизайнера и заказчика творит чудеса которые разработчики фреймворков не предусмотрят еще долгое время, но значительный плюс в их использовании есть. как вариант адаптировать под себя тот же бутстрап как писали выше.

Ответ написан более трёх лет назад

Комментировать

Как убрать лишний код при просмотре сайта на мобильных устройствах?

Александр Ружевич @ruzhevich

получите разрешение экрана как здесь www.php.net/manual/ru/faq.html.php#faq.html.javasc...
затем через if else выводите нужный контент и не нужен новый домен

Ответ написан более трёх лет назад

Комментировать

Войдите на сайт