00:18 

На этот раз точно JavaScript =)

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
Есть написаный мною по примеру слайдер (наверное так называется)
Javasсript


CSS


html


Он работает, но есть большое НО :small: При первом наведении на ссылку блок прыгает вниз :( Но при повторном и последующих наведениях на ссылки он стоит как нужно и никуда не собирается...
скрины

Думаю накосячила где-то в стилях... Но выловить не могу :( Помогите пожалуйста разобраться в чем я не права?

Спасибо за помощь!

@темы: JavaScript

Комментарии
2011-08-18 в 00:30 

Kakou ECTb
After silence that which comes nearest to expressing the inexpressible is music.
Для начала попробуйте переменную нормально объявить. Не sid = ''; а var sid = ''; Возможно джаваскрипт кладётся, хотя наврятли. Дело скорее всего действительно в стилях.

Можете кинуть на ifolder , гляну

2011-08-18 в 08:14 

alhames
alhames.ru
У вас при наведении на ссылку 1й блок не скрывается, но появляется второй - потому прыгает.
Самый простой выход:
вместо

поставьте

или лучше даже


P.S. И почему люди не хотят использовать JQuery...

2011-08-18 в 10:12 

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
alhames Спасибо!

И почему люди не хотят использовать JQuery...
К моему сожалению и стыду, я еще не научилась хорошо его использовать... И не нашла на тот момент именно такого вида слайдер (он хоть так называется-то?) Поэтому использовала то, в чем поняла принцип и что попроще :)

Но я учусь ^_^

2011-08-18 в 11:40 

alhames
alhames.ru
Имхо, JQuery - по-моему самый простой и щадящий способ использования JS, ибо в задачах чуть посложнее обычно черт ногу сломит от избыточности кода оригинального JS.
К примеру ваш слайдер реализовывался бы примерно так:

$('.slide_block_link a').mouseover(function(){
$('.slide div.slide_img').hide();
$('.slide div.slide_img').eq( $(this).index() ).show();
return false;
});

И не надо никакие id прописывать и дописывать onmouseover для ссылок :)

2011-08-18 в 11:45 

Kakou ECTb
After silence that which comes nearest to expressing the inexpressible is music.
+1 к alhames , но я считаю, то jquery нужно дойти покопавшись в js.

2011-08-18 в 15:23 

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
alhames В вашем примере я не смогла разобраться :( Что значат $? и как его вообще использовать?
Если не нужно ID, то привязывается по стилям? Но стили у меня меняются в зависимости от страницы (т.е. на одной ховер красным, на другой - оранжевым...)... Не понимаю :( Можете пояснить попроще?

Kakou ECTb Да, поэтому и копаюсь... Методом нужно сделать - нашла, скопировала, подстроила под ситуацию... При подстройке разбираюсь как работает и стараюсь запомнить... :small:

2011-08-18 в 15:47 

Kakou ECTb
After silence that which comes nearest to expressing the inexpressible is music.
Makha $ это зарезервированный псевдоним? для jquery. можно его заменить просто jquery().

Если не нужно ID, то привязывается по стилям?
чтобы взять элемент по id нужно написать $('#тут_id'); т.е. решёткой.

Да, можно привязать к стилям, но alhames в селекторе указал, что например

$('.slide_block_link a').mouseover(function(){ привяжется ко всем тегам a в тегах со стилем .slide_block_link.
А тут :
$('.slide div.slide_img').hide(); - к тегу
с классом slide_img внутри тега со стилем .slide

Т.е. идёт вначале базовый элемент, а после - уточнения если требуются. В общем, в интернете очень много статей для начинающих с подробным описанием. Но я считаю, что вам не нужно пока заморачиваться, пишите на js, а когда уже начнете разбираться в нем более ли менее - то можно и на Jquery по тиху пересаживаться. Удачи

2011-08-18 в 15:47 

alhames
alhames.ru
C $ начинается объект JQuery.


означает что мы выбирает все 'a' внутри блока с классом 'slide_block_link';


означает что мы назначаем на onmouseover безымянную функцию, которую тут же и описываем.


означает что мы прячем все элементы 'div' с классом 'slide_img' внутри элемента с классом 'slide'


означает что мы включаем блок '.slide div.slide_img' с тем же индексом что и ссылка - для этого делаем выборку индекса ссылки, на которую навели курсор с помощью


Вроде все просто - не? о_О

2011-08-18 в 15:49 

Kakou ECTb
After silence that which comes nearest to expressing the inexpressible is music.
Вроде все просто - не? о_О Просто - тому, кто уже знаком с программированием нормально. Это же очевидно )

2011-08-18 в 16:04 

alhames
alhames.ru
Kakou ECTb я о том, что JQuery - дружелюбный фреймворк
говоришь ему "покажи!" (show) - он показывает, говоришь ему "дай индекс!" (index) - он дает :)
Впрочем со стороны мб иначе кажется..

2011-08-18 в 16:15 

Kakou ECTb
After silence that which comes nearest to expressing the inexpressible is music.
alhames Высокоуровневость и инкапсуляцию конечно хорошо, но мне кажется важно знать механизмы, которые внутри действуют хотя бы немного.

2011-08-18 в 16:41 

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
alhames Не поняла одно, как скрипт понимает какую картинку показывать по какой ссылке... И что будет показываться сразу при загрузке?
И где все это писать? Мне необходимо чтобы все JS были отдельно от кода... Т.е. нужно обзывать функцию и вызывать уже непосредственно на странице... И тут я висну... Потому что не понимаю теперь куда девать первую строку...

А так я интуитивно понимаю как оно работает, но не понимаю как его поменять и применить... :small:

2011-08-18 в 17:18 

alhames
alhames.ru
Kakou ECTb без них никуда не денешься)

Makha
как скрипт понимает какую картинку показывать по какой ссылке...
$(this).index() возвращает индекс той ссылки, на которую наведен курсор. Т.е. для первой ссылки это будет 0, для второй - 1 и т.д.
Если блоков ровно столько же сколько и ссылок, то наводя на ссылку с нулевым индексом мы должны включить блок с нулевым индексом - для этого служит функция .eq()

И что будет показываться сразу при загрузке?
Ну это уже от вас зависит.. Код только на маусоверах отрабатывать будет.

И где все это писать?
В JS-файле, конечно :)

Т.е. нужно обзывать функцию и вызывать уже непосредственно на странице... И тут я висну... Потому что не понимаю теперь куда девать первую строку...
Вы должны понять одну главную вещь - любой dom-элемент (читай "тег") является объектом, у которого есть ряд событий (events) которые наступают при определенных условиях.
Прописывая onmouseover="show('bl1') внтури тега вы назначаете на событие onmouseover этого тега функцию show
В JQuery эту же функцию можно назначить как $('a').mouseover(show);
Чтобы избавиться от указания параметра, мы должны брать его непосредственно из ссылки - это может быть дополнительный класс, атрибут, data, еще что-то.. Я использовал индекс.
Но зачем нам создавать функцию и потом ее к чему-то привязывать, если мы можем ее сразу описать: $('a').mouseover(function(){});
Такая форма использования JS фактически полностью избавляет страницу от лишнего кода - он переходит в JS-файл.

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

2011-08-20 в 17:26 

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
alhames Более менее поняла...
Теперь у меня другой вопрос, и тоже по скриптам Т_Т

Есть у меня выпадающие списки... Такой


и такой

На одной странице... Но они разного вида (ширины).

Т.к. нужен был для них особый стиль - сделала скриптом... А так как я нуб, и не знаю как их менять под разные стили, то двумя скриптами! :small:

Получается что стиль первого задается css:

и скриптом



А стиль второго CSSом


и скриптом


с использованием jQuery, ага...

А вопрос такой... Первый селект не виден в ИЕ... а второй виден... Ну и криво это, использовать 2 скрипта для одних целей.. Подскажите как поменять второй скрипт, чтобы он реагировал на еще 1 стиль...

Простым копипастом с заменой имен не выходит :(

И второй вопрос, .niceCheck в ИЕ тоже не работает :(
Стиль скриптом выще задается, в html

в CSS

2011-08-20 в 17:28 

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
и в догонку еще один глупый вопрос... Встроила очередную фишку jQuery... Но она работает если прописано в самой странице:


А можно как-либо перенести этот код в уже существующие файлы JS? Пробовала просто скопировать без html тега скрипта - не работает... :(

2011-08-20 в 17:38 

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
Ие говорит:
Message: Object doesn't support this property or method
Line: 39
Char: 7
Code: 0

Но там же просто цикл задается =(
for(a = 0; a < inputs.length; a++) {
не понимаю чем ему не нравится (

2011-08-20 в 18:12 

alhames
alhames.ru
Я не совсем понял что вы с slelect делаете. Это системный элемент, который практически не стилизуется, поэтому если хотите его красиво оформить - придется делать эмуляцию..

Касательно checkbox, тут два варианта:




При клике на ссылку мы переключаем класс "checked" (если он есть - он удалится, нету - добавится)
Потом находим input с уникальным классом, прописанном в rel ссылки и меняем его значение: если ссылка содержит класс "checked" - то 1, иначе - 0.
И возвращаем return false; чтобы ссылка ни в коем случае не сработала.

Другой вариант без rel и уникального класса:


CSS тот же. Второй пример покороче. Здесь мы используем наследование и с помощью find находим нужный нам input.

2011-08-20 в 18:16 

alhames
alhames.ru
jQuery(document).ready();
или
$(document).ready();
срабатывает когда загрузилось dom-дерево и свободно можно им манипулировать.
Это необходимо для того чтобы не пытаться менять элемент до того как он загрузился на страницу.

и в догонку еще один глупый вопрос... Встроила очередную фишку jQuery... Но она работает если прописано в самой странице:
Засуньте его вместе с остальным кодом в $(document).ready();
Точнее только эту часть:

По идеи поможет..

И еще, используйте синоним jQuery - $ (доллар). Если вы не пишете многопользовательские плагины, то это намного удобнее - и код короче и нагляднее :)

2011-08-20 в 18:26 

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
Сейчас попробую объяснить что я имела ввиду..

Есть у меня селекты вот такого вида:


Делаются они скрипт + css... Вот только работают они в ИЕ очень странно... Т.е. первый скрипт не работает, а второй работает...

Вот я и хочу второй скрипт, который меняет внешний вид селекта сделать универсальным... Т.е. чтобы не только на 1 стиль селектов вешать... Сейчас в ИЕ работает только с использованием JQuery...
И мне хочется как-то этот скрип заставить менять 2 селекта поразному (на разный фон и ширину)...

Вот тут взяла второй скрипт: makexhtml.ru/2010/svoj-stil-select-vypadayushhe...

Пойду попробую чекбоксы изменить

2011-08-20 в 18:34 

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
Касательно checkbox, тут два варианта: у меня не получилось заставить работать их :(

2011-08-20 в 18:40 

alhames
alhames.ru
Посмотрите как тут select сэмулирован - zenit-realty.ru
Правда я под ie6 по-моему этот сайт не затачивал..

Если кратенько:


При клике на "#search .select a" проверяем раскрыт ли у нас ul и соответственно реагируем. Причем тут можно было toggle использовать, вроде..
Прик клике на "#search .select li" сворачиваем сэмулированный select и назначаем скрытому input его значение.
Вроде все просто, только в данном примере много излишнего кода ) Сейчас я сделал бы несколько иначе..

2011-08-20 в 18:46 

alhames
alhames.ru
у меня не получилось заставить работать их
Почему?
Я вам вовсе не предлагал скопировать приведенный мной пример, а просто пояснил возможную логику..
Если вы хотите не label-checkbox а именно отдельностоящий чекбокс, то задавайте ему inline-block и фиксированные высоту / ширину..

2011-08-20 в 19:03 

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
Ийе-хо! Нашла вот такой скриптик: html-css.info/2010/07/select-css-js/ и релизовала его)
Правда на странице все еще 2 скрипта отвечают за внешний вид селектов :(

2011-08-20 в 19:37 

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
alhames Я пыталась ваш пример повторить в отдельном документе:


и у меня он не заработал(

2011-08-20 в 19:45 

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
По идеи поможет..
Если ставлю вот так:


то срабатывает только последнее, и селекты все пропадают :(

2011-08-20 в 19:50 

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
Правда я под ie6 по-моему этот сайт не затачивал..
Если кратенько:


Мне под ИЕ6 нужно будет адаптировать, угу :(

И совсем не понятен механизм работы... Что это псевдо селект понятно, но что и как там менять, перестраивая на мой стиль я не могу понять... :(

Зато ваш вариант решил бы проблему двух скриптов на странице... Разобратться бы мне в нем :duma:

2011-08-20 в 19:56 

alhames
alhames.ru
и у меня он не заработал(
Я ж написал про $(document).ready();
Весь код в JS файле должен быть заключен в эту функцию. Если конечно это не описание функции..

2011-08-20 в 19:58 

alhames
alhames.ru
P.S. с дайри код не копируйте - он не дружит со словом sсript :)

2011-08-20 в 20:09 

alhames
alhames.ru
Ийе-хо! Нашла вот такой скриптик: html-css.info/2010/07/select-css-js/ и релизовала его)
Я не люблю эти адаптации под браузеры с отключенным JS, т.к. из-за них браузеры с JS (а их 99,9%) нервно дергают страничку после загрузки.
Вам нужен именно select? Я думаю что нет.. Просто элемент навигации по характеристикам его напоминающий.

Зато ваш вариант решил бы проблему двух скриптов на странице...
Мой случай можно довести до ума и все манипуляции через JS делать через независимые классы (т.е. те классы, которые используются в JS не содержатся в CSS-файле и не описывают стиль).

но что и как там менять

Честно говоря не знаю как еще помочь..

2011-08-20 в 20:10 

Makha
Все в порядке... Во всяком случае, в конечном итоге все будет в полном порядке!
Осталось придумать как заставить работать их все вместе...

Вот так работает:


А вот так - нет:


И думаю если я туда еще с чеками поставлю, то тоже чуда не случится... :(

     

@web-программирование

главная