Получение простого Javascript/jQuery для работы (ScrollTo by Ariel Flesler)

ОБНОВЛЕНИЕ: Выдающийся мистер. tpaksu решить мои проблемы, и вы можете увидеть горизонтальный ScrollTo в действии @www.visioville.fi/en/Получение простого Javascript/jQuery для работы (ScrollTo by Ariel Flesler)

Я имел мое время возиться с CSS, но я пришел к выводу, что это в значительной степени единственное, что я не могу сделать без Javascript/JQuery ,

Я пытался реализовать предложенный Горо jQuery.ScrollTo by Ariel Flesler, но я не могу заставить его работать каким-либо образом. Добавьте к тому, что я новичок с Javascript, и вы получите мое мнение. Я скачал самую новую JQuery и назвал его '' jquery.js

Вот некоторый источник:

<head> 
<script type='text/javascript' src='../js/jquery.scrollTo-1.4.2-min.js'></script> 
<script type='text/javascript' src='../js/jquery.js'></script> 
</head> 
... 
<div> 
    <p id="gallerytext">...</p> 
    <a title="$(div.smallpics).scrollTo('0%', 800, {axis:'x'});" id="previmg" href="#image1"></a> 
     <div id="smallwindow"> 
      <div class="smallpics"> 
       <ul> 
       <li><a href="#image1"><img alt="Jerseys" src="../images/peliasuja.jpg" /></a></li> 
       ... 
       <li><a href="#image14"><img alt="Drawing" src="../images/kynailya.jpg" /></a></li> 
       </ul> 
      </div> 
     </div> 
    <a title="$(div.smallpics).scrollTo('50%', 800, {axis:'x'});" id="nextimg" href="#image8"></a> 
</div>

А потом CSS:

#smallwindow { float:left; overflow/*-y*/: hidden; width:890px; } /* overflow-y whips out the vertical scrollbar */ 

div.smallpics { float:left; position:relative; width:1595px; } 

#previmg, #nextimg { float: left; width: 17px; height: 54px; background: white; overflow: hidden; background: url("images/galleryarrows_17x54.jpg"); } 
#previmg  { background-position: left top; margin-right: 1px; left top; } 
#nextimg  { background-position: right top; position: absolute; float: right; left: 935px; margin-left: 1px; margin-right: 1px; } 
#previmg:hover { background-position: left bottom; } 
#nextimg:hover { background-position: right bottom; } 

.smallpics ul { list-style: none; padding: 0; margin: 0; } 

.smallpics li { float: left; text-align: center; margin-right: 1px; margin-bottom: 1px; white-space: nowrap; }

Горо упоминается связывание щелчка() событие моей стрелки но я не знаю, какую «функцию» я должен набирать или куда помещать код. Я предполагаю перед событием .scrollTo, предполагая, что щелчок() даже необходим.

Спасибо заранее! Вы, ребята, абсолютно лучшие, когда дело доходит до программирования и кодирования.

источник

2012-05-17 Riviner

Несколько вопросов, насколько я могу видеть. Вы поместили код события .scrollTo в заголовок вашего якоря. Вероятно, это должно быть в атрибуте onclick. Но когда это делается, страница жалуется на то, что JQuery не инициализируется. – Falle1234

Спасибо, и, как я понимаю, вы имели в виду те же вещи, о которых упоминал и tpaksu. Неправильная последовательность в файлах .js и некоторые дополнительные функции onclick были необходимы. – Riviner

Во-первых, вам нужно включить свой скрипт scrollto ПОСЛЕ сценария jquery.

<script type="text/javascript" src="../js/jquery.js"></script> 
<script type="text/javascript" src="../js/jquery.scrollTo-1.4.2-min.js"></script>

, а затем, вам нужно что-то вроде этого:

$("#nextimg").on("click",function(){ 
    $("#smallwindow").scrollTo('50%', 800, {axis:'x'}); 
});

Функция внутри события щелчка следует изменить. Но как только вы получите это на работу, остальное будет легко понять.

источник

2012-05-17 12:44:15

Спасибо за хорошую информацию. Мне не приходило в голову, что имеет место последовательность .js-файлов (ну, я полагаю, jquery, а затем и все остальное), но теперь, когда я думаю об этом, это делает весь смысл в мире. Я обновил якорь так, как вы предлагали, так: '' Но он, похоже, не функционирует. Я долго смотрел на эту часть текста, я начинаю понимать, как работает язык Javascript, но даже в этом случае я не могу заметить, что мне не хватает :) – Riviner

Вы сделали это работает? сценарий не должен находиться в атрибуте «title», он должен быть внутри кода '' после тега привязки ''. –

Еще раз спасибо tpaksu, ты такой отзывчивый человек вне веры! Я думал, что я все испробовал, и это не сработало, но, как я писал это, это происходило со мной как последняя солома: «Должен ли я поставить еще один из этих сценариев внутри ? Что я должен потерять?». И ВОЛШЕБНОЕ ПОСЛЕДНЕЕ СЛУЧИЛОСЬ !!! Я так счастлив, что чуть не плакал! ;) Хотя я бы предположил, что мы определяем это внутри , а оттуда я просто «вызываю» любые классы или идентификаторы, которые я разбросал внутри . Он работает, но он должен работать так? Как-то я чувствую, что могу поместить их во внешний файл, что очень похоже на css? – Riviner

Получение простого Javascript/jQuery для работы (ScrollTo by Ariel Flesler)

ответ

Смежные вопросы