April 28, 2008 at 16:17jQuery News Slider - moving news
News Slider is a small but interesting jQuery JavaScript library plugin that allows you to control the display of a large number of news on a site with limited space for their demonstration.
Example: Reindel
We need to include only two files in the HEAD section of the page: the jQuery jquery-1.2.3.js library and the jquery.accessible-news-slider.js plug -in file. The
JavaScript code of this plug-in makes certain requirements for organizing the HTML news code and their styling, so we’ll analyze these points in some detail and start with the HTML code. Each individual news item is a div element.
with the class names item and fl. Inside this element may contain pictures, links, text. You can change the style of these elements, but do not change the class names, because the plugin uses them.
All DIV elements containing news are in turn enclosed in a DIV with the class names container and fl.
All this is again enclosed in a DIV with the class name news_items. Used to organize the hiding and display of the entire contents of the news block. Elements A contain pictures controlling the movement of news forward and backward. And finally, all this together is again enclosed in the DIV with the name of the class news_slider, because there can be several such news blocks on the page. Such a rather complicated hierarchy, but such is the will of the author.
I will not give the entire style sheet, I will only mention those points that need to be paid attention to. The fl class selector includes the block in the floating model, shifting it to the left using the float property and changing the representation of the block element using the display property to get the ability to display DIV elements in a horizontal line. An important point, because if you do not determine the width of the news block, the JavaScript code simply cannot calculate the distance to move.
Why so? Just because the author of the plugin found it necessary. The width is determined so that two news are visible at the same time. In principle, you can fix it by 3 or, for example, by 1, but then you will have to make corrections to the JavaScript code, since the author stopped on the two-news option, having rigidly defined this in the code.
It remains to disassemble only the last stage - the inclusion in the page of code that actually calls News Slider.
Here is such a small set of options. It is clear that newsHeadline is the headline of the news block, and newsSpeed is the speed with which the news “glides”. It can be fast and slow, or just an integer.
Example: Reindel
We need to include only two files in the HEAD section of the page: the jQuery jquery-1.2.3.js library and the jquery.accessible-news-slider.js plug -in file. The
JavaScript code of this plug-in makes certain requirements for organizing the HTML news code and their styling, so we’ll analyze these points in some detail and start with the HTML code. Each individual news item is a div element.
Заголовок в ссылке
Здесь написан текст новости...
with the class names item and fl. Inside this element may contain pictures, links, text. You can change the style of these elements, but do not change the class names, because the plugin uses them.
All DIV elements containing news are in turn enclosed in a DIV with the class names container and fl.
All this is again enclosed in a DIV with the class name news_items. Used to organize the hiding and display of the entire contents of the news block. Elements A contain pictures controlling the movement of news forward and backward. And finally, all this together is again enclosed in the DIV with the name of the class news_slider, because there can be several such news blocks on the page. Such a rather complicated hierarchy, but such is the will of the author.
I will not give the entire style sheet, I will only mention those points that need to be paid attention to. The fl class selector includes the block in the floating model, shifting it to the left using the float property and changing the representation of the block element using the display property to get the ability to display DIV elements in a horizontal line. An important point, because if you do not determine the width of the news block, the JavaScript code simply cannot calculate the distance to move.
.fl {
float:left;
display:inline;
}.news_slider .item {
/* Важно!
Обязательно определяем
свойства width и
margin-right. */
width: 170px;
margin-right: 10px;
}.news_slider .news_items {
/* Важно!
Ширина должна быть
равна .item ((width +
margin-right) * 2) */
position: relative;
width: 360px;
top: 0;
left: 20px;
overflow: hidden;
}Why so? Just because the author of the plugin found it necessary. The width is determined so that two news are visible at the same time. In principle, you can fix it by 3 or, for example, by 1, but then you will have to make corrections to the JavaScript code, since the author stopped on the two-news option, having rigidly defined this in the code.
It remains to disassemble only the last stage - the inclusion in the page of code that actually calls News Slider.
Here is such a small set of options. It is clear that newsHeadline is the headline of the news block, and newsSpeed is the speed with which the news “glides”. It can be fast and slow, or just an integer.
| Isst. # 1 | Isst. # 2 |