Kirill M

В jQuery есть обработчик события - прокручивания страницы в браузере .scroll()

Есть функция .scrollTop() - возвращающая или изменяющая величину скроллинга элемента.

Например:

$(window).on("scroll", function() {
	var scroll_from_top = $(document).scrollTop();
	$("#my_element").toggleClass("fixed", (scroll_from_top > 1200));
});

А если объединить оба варианта: поместить их в отдельную страницу, а во вклудку - ссылку?

Или даже наоборот - сами задачки во вкладке урока, а на отдельной странице вывести  список всех этих задач.

Здравствуйте, товарищи.

Оцените пожалуйста верстку одностраничного сайта. http://malahov-web.ru/demo/eco_stochnie_vodi/

Основные вопросы:

1. Общее по коду html - семантика, структура

2. В раздел "Прайс-лист"  изображение человека сейчас сделано отдельной картинкой .png -  это плохой вариант она весит очень много. Но соединить его с общим серым фоном в один jpeg в данном случае затруднительно потому фон раздела -  повторяющийся узор. Как Вы решаете такую задачу?

3. Классы обычно делаю по логике Блок-элемент ( и иногда модификатор). Хотя в верстке небольших сайтов чаще применяют "чистый код"  на наследовании.

Если заглянете в  css-код могу сказать только что запись в несколько строк видится удобнее чем каждое правило с новой.

Действительно, решил проблему генерацией уникального проверочного кода.

Да, есть проверка if ( is_user_logged_in() )

Но она только проверяет тому ли юзеру принадлежит вставляемая запись. А Если он например случайно обновит страницу - то запись вставится еще раз. Не могу найти по какому условию делать вставку. ID записи увеличивается автоматом, по всем остальным параметром может чтобы не было совпадений?

Или сгенерировать для записи уникальный номер ?

Ощущение что не в ту сторону вобще смотрю..

Здравствуйте.

Возникла такая задача: необходимо на странице шаблона вставить запись в БД.

Проблема: если пользователь обновит страницу - запись вставится еще раз.

Вопрос: как сделать чтобы запись добавлялась однократно? (проверку? - не могу понять по какому признаку, или есть ф-и или специальный механизм, который я упустил?)

Код выглядит так:

// Вариант 1. Вставляем через wp_insert_post()
$this_post_id = wp_insert_post( 
	array( 'post_title' => $post_item['post_title'], 'post_type' => $post_item['post_type'] )
);

Через $wp_insert_post() или $wpdb->insert добиться нужного результата пока не получилось

Столкнулся с похожим вопросом:

нужно было получить записи из БД WordPress из таблицы postmeta

Суть в том что разные дополнительные поля в WP хранятся в одних столбцах, т.е.

в столбце meta_key есть значения например product_number и product_price ( пары их значений хранятся соответственно в другом столбце  meta_value )

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

Ниже код, может пригодится

SELECT post_idFROM postmetaWHEREpost_id IN (    SELECT post_id    FROM postmeta    WHERE    meta_key = 'product_number'  AND  meta_value LIKE '%$keywords%'    )                ANDmeta_key = 'product_price' AND meta_value > 1000

Такой - в пределах дня.

А можно спросить зачем лэндинг по бэму, - так было в тз (возможно в случае если это будет часть большого сайта) ?

Качество верстки и скорость загрузки:

Скорость неплохо проверять инструментом гугла - вот что он вам показал https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fportfolio-for-web.esy.es%2F&tab=desktop

От себя бы посоветовал соблюдать такие вещи:

Картинки делать спрайтом, в одном файле (для лэндингов, они часто на хтмл, где не так много запросов, актуально), изображения сжимать;

В CSS иногда удобно писать элементы с отступами чтобы было структуру(вложенность) (только не в одну строку - в несколько), и всегда соблюдать порядок с котором идут стили ( например сначала позиционирование, потом оформление, последними текст и префиксные)

ALEEX SWN

Спасибо за наводку, решил проблему.

Может кому-то пригодиться:

ссылки на картинки-постеры http://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api

Немного коряво написано, но работает.

Ф-я которая вытаскивает ID видео с ютуба из тела поста и записывает его в произвольное поле. И возвращает ID видео.

function setYoutubeVideoIdMalahov($post_id){    $post_id;                               // id поста получаем при вызове    $content = get_the_content();           // содержимое поста    $needle_1  = 'www.youtube.com/embed/';  // подстрока на случай <iframe>    $needle_2  = 'youtu.be/';               // подстрока на случай просто ссылки    $id_length = 11;                        // длина ID видео если вдруг изменится    // Если вставлено через <iframe >    if ( strpos($content, $needle_1) !== false )      $needle = $needle_1;    // Если вставлена просто ссылка вида http://youtu.be/    else  	$needle = $needle_2; 	    // Вырезаем подстроку - id Видео	    $id_pos   = strlen($needle);    $str_part = strstr($content, $needle);    $video_id = substr($str_part, $id_pos, $id_length );	 	     update_post_meta($post_id, "youtube_video_id", $video_id);    return $video_id;}

Здравствуйте.

Вопрос такой:

На wp-сайте в статье лежит ролик с ютуба. Нужно на странице категории показать картинку-постер от этого видео.

(ну как обычно делается на всех сайтах http://мышцы.рф/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE).

Где эта картинка вообще хранится, аттрибута poster как у тега <video> я не нашел.

Есть извратский вариант парсить картинку с вот этого сервиса http://imgyoutube.com/index.php?watch=watch&v=66GggaF714g , но что-то подсказывает что можно сделать проще?

Если я правильно понял, то у вас просто выводится 8 новостей,  и у 1-й и 8-й другие стили.

Поставьте просто счетчик и добавляйте 

	      <?php		  $i = 0;		  global $post;  		  $args = array( /* параметры */ );  		  $myposts = get_posts( $args );  		  foreach( $myposts as $post ) :  setup_postdata($post); 		  		     $i++;		     ?>  		     <div class="news" id="news_<?php echo $i; ?>">				 	         </div>				 		  <?php endforeach; ?>

и соответственно в CSS отдельные стили для  #news_1 и #news_8

Не очень понял вопрос, чем мешает файл css? форма появляется , что у вас должно быть по-другому, .. ?

[element].ondragstart = function() { return false; };

наводка помогла, только у меня заработало с .mousedown

Если кому-то нужно вот код jQuery

/* Ф-я запрещающая перетаскивание изображений */jQuery(document).ready(function(){ jQuery('img').mousedown(function(){return false;});});

Спасибо!

Люди добрые, помогите с такой проблемой:

Нужно чтобы при зажатии мышкой на изображении (IMG) его нелзья было сдвинуть (драг-н-дроп)

прикладываю картинку для наглядности

-webkit-user-select: none;
-moz-user-select: none;

Не помогло

Вот так лучше не делать (верхний регистр):

 

 

Для этого есть text-transform: uppercase.

А почему, очень интересно? СЕО?

 

Для красоты еще уберите стандартную стрелочку из селектов и сделайте вкладки рабочими.

Что-то я не понимаю, какую именно стрелку?

 

Кнопку которая раскрывает селект

Для красоты еще уберите стандартную стрелочку из селектов и сделайте вкладки рабочими.

Подредактировал забыл залить. Заливаю. Не уверен что рег шрифт в заголовках новостных блоков и ключ в другую сторону сделали вид лучше. В футере чуть опустил нижний.

Шрифт в Наши новости сделать как в первых двух или оставить, было желание этот блок как-то выделить.

И шрифты в заголовках "Машины с пробегом" и "Предложения от дилеров" меня немного смущают..

В смысле резиновым? под ширину экрана чтоб подстраивался(проценты), или в зависимости от размера блока hint с текстом(тогда просто ширина авто, и зафлоатить)?

Спасибо за критику.

binomer

1)пробовал логин-поиск над меню, мне показалось хуже, хотя так согласен немного снижает концентрацию на меню (плюс если под меню сразу начнется контент будет не оч смотреться, нужно будет чем нибудь забить)

2) а какой?

3) ну там не беспорядочно, верхний блок, три нижних : левый и правый прижаты к краях и средний по центру. Меню в одну колонку никак не влезет, может только если отступ сократить

Struggle

я думал фон здесь это лучшее)

Согласен, заменяю на PT.

Мелочи вроде инпутов самое важное, старался сделать чтоб диз выглядел завершенным.

Николя223

А чем ключ не угодил, я думал он от альфы)  может его просто перевернуть?

Здравствуйте.

Решил поупражняться в дизайне, оцените мою скромную попытку . Вот что получилось.

Пожалуйста делитесь впечатлениями и замечаниями, готов выслушать всю критику.

Общее впечатление, расположение блоков - есть ощущение что контент слишком сжат, шрифты -   не слишком много разнообразия? использование эффектов, насколько уместно и гармонично, не слишком ли много альф на странице, или может вообще этот макет лучше сжечь? Вобщем слушаю вас.

ИЕ6 почил в прошлом году, ИЕ7 сейчас по запросу ( не учи, пока выучишь он тоже отомрёт).

ИЕ8 да, слава богу основное отличие в том что он не поддерживает CSS3, (уголки, прозрачность).

ИЕ10+ современные браузеры, такие же как и Firefox и Chrome.

Старым Операм тоже нет смысла уделять внимание, опер вообще немного, старых совсем немного, а 11+ уже современные, поддерживают все стандарты.

Яндекс-бр. это движок Хрома(может отдельно в нем проверять, если требуется).

И на маках желательно проверять, т.к. хоть и Сафари этот тот же хромоский движок Webkit, но некоторые моменты могут отличаться.

Zverushka, а зачем эмулятор Хп, в 7 его можно и так запустить.

Благодарю) не заметил бревно

Здравствуйте.

Столкнулся с такой проблемой. В сверстаном шаблоне некорректно отображаются стили при наведении в Хроме.

Блок "Наши Новости" работает правильно - при наведении на блок меняется цвет фона, при наведении на новость меняется цвет её фона, текста и рамки у img. При наведении на блоки "Новости Alfa" и "Новости дилеров" у меня стили :hover срабатвают ТОЛЬКО при наведении на нижнюю (3-ю) новость.

В других браузерах соответственно всё нормально. Первый раз с таким сталкиваюсь, предположил что дело в новой версии хрома?

Ссылка

Кусок кода

<div class="secondlane"> 		   <div class="news_alfa">	    <div class="news_bg">		  		  <div class="news_title">НОВОСТИ ALFA		  </div>	 		  <div class="news_wrap">		     <a href="#" class="news_item">			    <div class="news_item_image"><img src="images/news_1.jpg" alt="">		        </div>				<div class="news_item_title">Кроссовер от Alfa Romeo нарекут Giulietta Cross				</div>			 </a>			     <a href="#" class="news_item">			    <div class="news_item_image"><img src="images/news_4.jpg" alt="">		        </div>				<div class="news_item_title">Маркионне пообещал перемены дочерним брендам концерна FIAT		        </div>		     </a>		     <a href="#" class="news_item">			    <div class="news_item_image"><img src="images/news_2.jpg" alt="">		        </div>				<div class="news_item_title">Alfa Romeo Giulietta и MiTo Quadrifoglio лишились «механики»		        </div>		     </a>	             <a class="link_to_all_news" href="#">ВСЕ НОВОСТИ</a> 			 		  </div>		  		  	    </div><!-- news_bg END --> 	 	   </div><!-- news_alfa END -->	   	   <div class="margin_20">	   </div>	   	   <div class="news_dilers">	   	    <div class="news_bg">		  		  <div class="news_title">НОВОСТИ ДИЛЕРОВ		  </div>	 		  <div class="news_wrap">		     <a href="#" class="news_item">			    <div class="news_item_image"><img src="images/news_3.jpg" alt="">		        </div>				<div class="news_item_title">Новый дилер Alfa Romeo в России не смог порадовать ценами				</div>			 </a>			     <a class="news_item">			    <div class="news_item_image"><img src="images/news_2.jpg" alt="">		        </div>				<div class="news_item_title">Alfa Romeo Giulietta и MiTo Quadrifoglio лишились «механики»		        </div>		     </a>			     <a href="#" class="news_item">			    <div class="news_item_image"><img src="images/news_1.jpg" alt="">		        </div>				<div class="news_item_title">Маркионне пообещал перемены дочерним брендам концерна FIAT		        </div>		     </a>		     <a class="link_to_all_news" href="#">ВСЕ НОВОСТИ</a>		  </div>		  	    </div><!-- news_bg END --> 	  	   </div><!-- news_dilers END -->	   	   <div class="margin_20">	   </div>	   <div class="news_our">	    <div class="news_bg">		  		  <div class="news_title">НАШИ НОВОСТИ		  </div>	 		  <div class="news_wrap">		     <a href="#" class="news_item">			    <div class="news_item_image"><img src="images/news_3.jpg" alt="">		        </div>				<div class="news_item_title">Новый дилер Alfa Romeo в России не смог порадовать ценами				</div>			 </a>			     <a class="news_item">			    <div class="news_item_image"><img src="images/news_1.jpg" alt="">		        </div>				<div class="news_item_title">Alfa Romeo Giulietta и MiTo Quadrifoglio лишились «механики»		        </div>		     </a>			     <!--a href="#" class="news_item">			    <div class="news_item_image"><img src="images/news_2.jpg" alt="">		        </div>				<div class="news_item_title">Маркионне пообещал перемены дочерним брендам концерна FIAT		        </div>		     </a-->		 		  </div>		  	    </div><!-- news_bg END --> 	 	   	   </div><!-- news_our END -->	       </div> <!-- secondlane-->	 

CSS:

/* ***  secondlane  *** */.news_alfa, .news_dilers, .news_our{ float : left;  width : 320px;  height : 400px;  height : 380px;    background-repeat : no-repeat;}.news_alfa { background-image : url(images/back_bg_1.jpg); }.news_dilers{ background-image : url(images/back_bg_2.jpg); }.news_our{ background-image : url(images/back_bg_3.jpg); background-position : 0 -140px; }.news_bg /* фон для блока */{ display : absolute;  float : left;  width : 320px;  height : 400px;  height : 380px;  background : #555;  background : rgba(16,16,16,0.85);  transition : background 0.6s;}.news_title /* заголовок блока */{ float : left;  clear : both;  width  : 310px;   margin : 0 5px;  height : 50px;     color : #fff;	      font  : bold italic  18px/54px "PT Sans";        text-align : center;	   border-bottom : 2px solid #fff;	 }.news_wrap    /* белый фон */{ float : left;  clear : both;  width  : 310px;  margin : 10px 5px 1px 5px;   height : 310px;   background : #fff;}.news_item /* обертка новости */{ float : left;  width : 100%;  background : #fff;   margin : 20px 0 0 0;  transition : background 0.6s;  }.news_item_image{ float : left;   clear : both;  width : 120px;}.news_item_image IMG{ float : left;  border : 1px solid #ccc;  transition : border 0.6s;}.news_item_title{ float : left;   max-width : 180px;  padding : 5px;     color : #333;     font  : 18px/19px "Open Sans Condensed";    transition : color : 0.6s;}.news_bg:hover{ background : rgba(16,16,16,1); background : #333;  }.news_item:hover{ background : #555; }.news_item:hover .news_item_title{ color : #fff;}.news_item:hover .news_item_image IMG{ border : 1px solid #555;}