#SMALL NEWSBAR CSS CODE#

The duration is a little more complex it’s the total distance to travel minus the distance already traveled, divided by a baseline speed that I’ve arbitrarily set at 0.025. The distance part is easy it’s just the height of the current container element.

The first thing we do within this function is work out the distance that the selected element has to travel and the duration of the animation. This is a regular JavaScript function which accepts a single parameter when we call this function we’ll pass in the first container element within the ticker. Next we define our animator function, which is where we’ll set the animation which causes the ticker to begin scrolling and then keep scrolling indefinitely. This is part of the accessibility strategy and ensures that only visitors with JavaScript enabled get to see the enhanced ticker. Once all of the and pairs have been wrapped in elements we then change the ticker’s overflow CSS property to hidden so that the scrollbar is removed. We therefore need to use the prepend method on the once the has been appended. We have to add the that follows the current first, because once the has been appended to the container it won’t have a after it. Then for each remaining we create a new container and append both the and the to the new container. To do this we select all of the children from our cached selector and use the jQuery filter method to discard all of the elements. It also means that we can use whatever margins and padding on the *lt dt> andĮlements without needing to take these into consideration in our animation calculations. To make things a little easier in our script we next wrap each and pair in a containing element this allows us to group the different elements logically and smooth out the animations. The underlying definition list contains both definition term and definition description elements, all of which could potentially be of varying sizes. The first thing we do is to cache our main selector, which is the outer element this will save us from having to repeatedly select the element from the DOM whenever we want to work with it and improves the performance of the page.

#ticker dd.last ) which will execute the anonymous function as soon as the page has loaded. Margin-left:0 font:normal 11px Verdana padding:0 10px 10px 10px īorder-bottom:1px solid #aaaaaa background-color:#e5e5e5 Width:180px height:300px overflow:auto border:1px solid #aaaaaa įont:normal 14px Georgia padding:0 10px 5px 10px īackground-color:#e5e5e5 padding-top:10px border:1px solid #ffffff In a new file in your text editor add the following code: Let’s add some basic styling even with JavaScript switched off, no one wants to see the list as it is at the moment.

With no styling however, it does look pretty shocking:

#SMALL NEWSBAR CSS CODE#

The code is minimal and highly accessible browsers, mobile devices and screen-readers should all have no difficulty interpreting and rendering it. Although only inline content can be placed in each element, block-level content can be put in the elements. On the page is the content that we’ll progressively enhance into the news ticker it’s made up of a simple definition-list element, which feels appropriate for our purposes. As well as the usual page furniture - the DOCTYPE, META content-type, title, etc - we have a custom style sheet that we’ll create in just a moment and we link to jQuery at the end of the body (for performance reasons). Save this as simpleTicker.html in a directory containing jQuery 1.3.2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This item is long!Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. News Heading 4Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. News Heading 3Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. News Heading 2Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. It could be the whole news item or it could link to another page containing. This is a news title!This is a snippet of the news. In a new page in your text editor add the following code:

Small newsbar css