Ajax Scroller - Change the navigation buttons with css
14 years 1 month ago - 14 years 1 month ago #5346
by heyvern
I was a tad frustrated last night trying to move the navigation arrow buttons (left.png, right.png) and signed up for this forum to find out if there was any possible way to do it with CSS only.
So, long story short... there is a way! I figured it out.
This isn't a "perfect" solution as it uses the "first-child" css pseudo class which isn't supported by IE 6 on Windows. But my company doesn't support IE 6 for web development anymore so a big fat raspberry to MS.
The trick is using the first-child AND the img style already in the CSS. This allows you to define the width and height, position etc of the navigation buttons. Maybe it could also change the image itself using the background attribute but I haven't tried that yet.
I wanted the navigation arrows to be on either side of the Ajax Scroller and centered vertically. I was wracking my brain and searching the code to try to do this and this is what I came up with:
Luckily the div for the navigation only contains the two images and nothing else. So the first-child is the left arrow which uses the original same unchanged style, and the right arrow I changed the padding-left to push the left image all the way over to the left side of the scroller.
I suppose I should use margin-left for the left image so it makes more sense, which I may do, but this works so what the heck. You can do it however you like.
Then the trick is to use"!important" on the first-child (left image) so it doesn't get the padding.
To move the buttons down I just shifted the container div for the navigation down and also added z-index so it floats over the content in order to be clicked:
BINGO! WOohoo! Custom styling for each navigation button! This puts the navigation on either side of the scroller. I can now make them a bit bigger and have a nice looking scroller gizmo.
Anyway, I really like this module. Yes it is tricky to set up due to the css needed but it does the job.
I spent several hours installing every single content slider/scroller for joomla I could find and none of them moved "chunks" or "groups" of articles the way I wanted to without spending 3 times as much money.
A couple of suggestions for improvements in the future:
Add a class for the left and right navigation styling so it can use background images instead of actual inline images.
Also needed is a way to have "seamless" scrolling when the total number of articles doesn't match the number scrolled. For example I am displaying and scrolling 3 articles at once but there are only 4 articles total. When it scrolls I get that one extra article displayed all by itself. It would be nice if it could scroll just enough to display that last one and keep going around like a continuous loop.
Add an option for "hover" to scroll instead of "clicking". This would be REALLY COOL. Then you just rollover the left or right side and it will scroll.
So, long story short... there is a way! I figured it out.
This isn't a "perfect" solution as it uses the "first-child" css pseudo class which isn't supported by IE 6 on Windows. But my company doesn't support IE 6 for web development anymore so a big fat raspberry to MS.
The trick is using the first-child AND the img style already in the CSS. This allows you to define the width and height, position etc of the navigation buttons. Maybe it could also change the image itself using the background attribute but I haven't tried that yet.
I wanted the navigation arrows to be on either side of the Ajax Scroller and centered vertically. I was wracking my brain and searching the code to try to do this and this is what I came up with:
div.mNav img {
cursor: hand;
cursor: pointer;
display: inline;
padding-left: 881px;
}
div.mNav img:first-child {
cursor: hand;
cursor: pointer;
display: inline;
padding-left: 2px !important;
}
Luckily the div for the navigation only contains the two images and nothing else. So the first-child is the left arrow which uses the original same unchanged style, and the right arrow I changed the padding-left to push the left image all the way over to the left side of the scroller.
I suppose I should use margin-left for the left image so it makes more sense, which I may do, but this works so what the heck. You can do it however you like.
Then the trick is to use"!important" on the first-child (left image) so it doesn't get the padding.
To move the buttons down I just shifted the container div for the navigation down and also added z-index so it floats over the content in order to be clicked:
div.mNav {
position: relative;
height: 0;
right: 2px;
top: 129px; /* edit this value for navigation buttons position */
text-align: right;
z-index:2;
}BINGO! WOohoo! Custom styling for each navigation button! This puts the navigation on either side of the scroller. I can now make them a bit bigger and have a nice looking scroller gizmo.
Anyway, I really like this module. Yes it is tricky to set up due to the css needed but it does the job.
I spent several hours installing every single content slider/scroller for joomla I could find and none of them moved "chunks" or "groups" of articles the way I wanted to without spending 3 times as much money.
A couple of suggestions for improvements in the future:
Add a class for the left and right navigation styling so it can use background images instead of actual inline images.
Also needed is a way to have "seamless" scrolling when the total number of articles doesn't match the number scrolled. For example I am displaying and scrolling 3 articles at once but there are only 4 articles total. When it scrolls I get that one extra article displayed all by itself. It would be nice if it could scroll just enough to display that last one and keep going around like a continuous loop.
Add an option for "hover" to scroll instead of "clicking". This would be REALLY COOL. Then you just rollover the left or right side and it will scroll.
Please Log in or Create an account to join the conversation.
14 years 1 month ago #5347
by heyvern
Yeehaa!
Using this technique you can use background images in the css instead of the images hard coded into the scroller.
Replace the right.png and left.png images with completely transparent png files. Then use the styles above with background image styles pointing to different images.
There is no way to replace an image in the image tag with css, but if the image in the img tag is totally transparent then background images in a style will show through. Works like charm.
You can also add hover tags:
(click to view large image) The right navigation arrow image is hovered. Uses the same image as the "right_p.png".
Using this technique you can use background images in the css instead of the images hard coded into the scroller.
Replace the right.png and left.png images with completely transparent png files. Then use the styles above with background image styles pointing to different images.
There is no way to replace an image in the image tag with css, but if the image in the img tag is totally transparent then background images in a style will show through. Works like charm.
You can also add hover tags:
div.mNav img:hover {
background:transparent url(right_p.png) no-repeat 0 0;
}
div.mNav img:first-child:hover {
background:transparent url(left_p.png) no-repeat 0 0 !important;
}(click to view large image) The right navigation arrow image is hovered. Uses the same image as the "right_p.png".
Please Log in or Create an account to join the conversation.
14 years 1 month ago - 14 years 1 month ago #5348
by Saka
Emir Sakic
www.sakic.net
Really cool, thanks for your tips. I think I "hardcoded" the nav images so they can be pre-loaded in JS to avoid delay when hovered. I will have a look how you did it, make some tests and maybe implement it by default so Nav images can be styled individually in a simple way. Will definitely add example to my demo. As you noticed I am more programmer than a CSS expert. 
Seamless scrolling: this is how it works. If you have total of 4 articles and 3 shown at a time first 3 will show in the first slide, then 1 with 2 empty places in the next, then it will roll to the 3 first again. I think it's good to mark you are at the end with the empty spots. If you want it to be continuous you just limit the number of articles to be a divisible by the number of items displayed at once.
Hover to scroll is a cool idea. I will look into implementing it. One problem might be the delay when module fetches the articles but once they are all fetched it will run smoothly. But if you only have few articles there will be no delay.
Thanks for the feedback!
Seamless scrolling: this is how it works. If you have total of 4 articles and 3 shown at a time first 3 will show in the first slide, then 1 with 2 empty places in the next, then it will roll to the 3 first again. I think it's good to mark you are at the end with the empty spots. If you want it to be continuous you just limit the number of articles to be a divisible by the number of items displayed at once.
Hover to scroll is a cool idea. I will look into implementing it. One problem might be the delay when module fetches the articles but once they are all fetched it will run smoothly. But if you only have few articles there will be no delay.
Thanks for the feedback!
Emir Sakic
www.sakic.net
Please Log in or Create an account to join the conversation.
14 years 1 month ago #5349
by heyvern
I am not a CSS "expert". It took a bit of fiddling to get this working in IE and FF.
One thing to keep in mind is that images like those buttons are considered "presentation" and should be part of the css rather than placed using the img tag with html. I could be wrong but all of the templates I have used always have repeated images for buttons like that styled with css so they aren't part of the 'content". There could be arguments for and against this of course.
Here is the final css that I modified to work the category in my template and a zip file of the images I used in the styles:
(I replaced the "left.png" and "right.png" with transparent pngs)
http://www.hubumedia.com/images/ajax-scroller-heyvern-images.zip
I have a single pixel of solid white on the side of each button to "hide" a border on my div so the button appears to "cut in".
Another option would be to "stop" the scrolling when there are no more articles to display. Or only scroll as far as needed to display the LAST article if it is not the same number as the total in view.
Or it could ALWAYS scroll ONE article even with 3 or more displayed. The div blocks have an "exact" value so it could always scroll just the one block over. I don't need to scroll all 3. What I really want is a way to scroll all the articles in one place.
In my case, with 3 articles displayed and 4 total I would like it to only scroll enough to always have 3 displayed. I am more concerned with the "presentation" of the site layout. I don't like having a gap. If scrolling STOPPED at the end that would be perfect.
(if the script weren't "encrypted" I might have been able to adjust this myself. Can't say for sure.)
Glad to help out if I can. I was in a jam and this module was the only one I could find that would actually scroll blocks of articles and worked with my template... and didn't cost a fortune.
Really cool, thanks for your tips. I think I "hardcoded" the nav images so they can be pre-loaded in JS to avoid delay when hovered. I will have a look how you did it, make some tests and maybe implement it by default so Nav images can be styled individually in a simple way. Will definitely add example to my demo. As you noticed I am more programmer than a CSS expert.
I am not a CSS "expert". It took a bit of fiddling to get this working in IE and FF.
One thing to keep in mind is that images like those buttons are considered "presentation" and should be part of the css rather than placed using the img tag with html. I could be wrong but all of the templates I have used always have repeated images for buttons like that styled with css so they aren't part of the 'content". There could be arguments for and against this of course.
Here is the final css that I modified to work the category in my template and a zip file of the images I used in the styles:
(I replaced the "left.png" and "right.png" with transparent pngs)
http://www.hubumedia.com/images/ajax-scroller-heyvern-images.zip
I have a single pixel of solid white on the side of each button to "hide" a border on my div so the button appears to "cut in".
/*
IMPORTANT: Do not use percentage for module width and height, enter actual fast width in pixels
*/
div.mContainer {
width: 918px; /* edit this value for your own module width */
height: 281px; /* edit this value for your own module height */
display: block;
overflow: hidden;
position: relative;
/*background: url(bg.gif) no-repeat 0 0;*/ /* uncomment for module background */
}
div.mScroller {
display: block;
margin: 0;
padding: 0;
}
div.mScroller div {
display: block;
text-align: left;
margin: 0;
float: left;
width: 918px; /* edit this value for your own module width */
min-height: 281px; /* edit this value for your own module height */
}
div.mScroller div span { /* if more than 1 item displayed use this for individual item size */
display: block;
margin-left:25px;
margin-right:18px;
float: left;
width: 256px;
}
div.mScroller div a {
}
div.mScroller div p {
margin: 0;
text-align: right;
}
div.mNav {
position: absolute;
height: 0;
right: 100%;
top: 129px; /* edit this value for navigation buttons position */
text-align: right;
z-index:2;
}
div.mNav img:first-child {
cursor:pointer;
display:block;
float:right;
height:50px;
margin-left:0 !important;
margin-right:0 !important;
padding-left:0 !important;
right:-25px !important;
width:25px;
z-index:3 !important;
background:transparent url(left_b.png) no-repeat 0 0 !important;
}
div.mNav img {
cursor:pointer;
display:block;
float:left !important;
height:50px;
position:absolute;
right:-940px;
width:25px;
background:transparent url(right_b.png) no-repeat 0 0;
}
div.mNav img:hover {
background:transparent url(right_p.png) no-repeat 0 0;
}
div.mNav img:first-child:hover {
background:transparent url(left_p.png) no-repeat 0 0 !important;
}
/* Joomla 1.5 fix */
#whitebox div.mNav {
text-align: right;
}Seamless scrolling: this is how it works. If you have total of 4 articles and 3 shown at a time first 3 will show in the first slide, then 1 with 2 empty places in the next, then it will roll to the 3 first again. I think it's good to mark you are at the end with the empty spots. If you want it to be continuous you just limit the number of articles to be a divisible by the number of items displayed at once.
Another option would be to "stop" the scrolling when there are no more articles to display. Or only scroll as far as needed to display the LAST article if it is not the same number as the total in view.
Or it could ALWAYS scroll ONE article even with 3 or more displayed. The div blocks have an "exact" value so it could always scroll just the one block over. I don't need to scroll all 3. What I really want is a way to scroll all the articles in one place.
In my case, with 3 articles displayed and 4 total I would like it to only scroll enough to always have 3 displayed. I am more concerned with the "presentation" of the site layout. I don't like having a gap. If scrolling STOPPED at the end that would be perfect.
(if the script weren't "encrypted" I might have been able to adjust this myself. Can't say for sure.)
Thanks for the feedback!
Glad to help out if I can. I was in a jam and this module was the only one I could find that would actually scroll blocks of articles and worked with my template... and didn't cost a fortune.
Please Log in or Create an account to join the conversation.