| Nov 21, 2009 |
Will there be a minimum of the three Images as per your Sample up there? Or are those div's of text?
Looks to me like a javascript solution to supply the left and right arrow scroll markers. Because IE will not recognize the min-width element is CSS, that will require an IE conditional comment to supply certain CSS to it. Google javascript scrollers and see what you come up with. *edit* Found this one http://jqueryfordesigners.com/demo/slider-gallery.html It uses a slider instead of the Arrow head images you have shown.
Thanks for the link jlhaslip. Unfortunately that is not exactly what I'm after. I need the outer most containing Div to be dynamic in width. The items inside them will be thumb nails and maybe also text including descriptions.
 And by the way, this script uses JQuery, so you'll need to download that and edit the code to include that version of JQuery. HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Slider test</title> <script type="text/javascript" src="/ajax/jquery-1.2.6.pack.js"></script> <style type="text/css"> #sliderContainer { padding: 3px; border: 1px solid black; height: 250px; } #sliderContainer button { height: 250px; } #sliderArea { overflow: hidden; height: 250px; margin-left: 3px; margin-right: 3px; } #sliderArea ul { list-style: none; white-space: nowrap; margin: 0; padding: 0; } #sliderArea ul li { display: inline; } #sliderArea ul li > div { padding: 3px; border: 1px solid black; width: 600px; height: 242px; float: left; } .hidden { display: none; } </style> <script type="text/javascript"> //<![CDATA[ var index = 0; var children; var parentWidth; var childWidth; var visChildren; $(document).ready( function(){ children = $("div#sliderArea ul li").children("div"); parentWidth = $("div#sliderArea").width(); childWidth = $(children[0]).width(); visChildren = Math.floor(parentWidth/childWidth); } ); function prev() { index = index - 1; if (index < 0){ index = 0; } $(children[index]).removeClass("hidden"); } function next() { //if (index < (children.length-1)) if (index < (children.length-visChildren)) { $(children[index]).addClass("hidden"); index = index + 1; } } //]]> </script> </head> <body> <div id="sliderContainer"> <button style="float: left;" onclick="prev();">«</button> <button style="float: right;" onclick="next();">»</button> <div id="sliderArea"> <ul> <li><div>1</div></li> <li><div>2</div></li> <li><div>3</div></li> <li><div>4</div></li> <li><div>5</div></li> <li><div>6</div></li> </ul> </div> </div> </body> </html>
Thanks again for the excellent code truefusion. This seems to work perfectly on its own but as I try and integrate it into my existing site it reports function undefined errors under firebug. This could be of course my own fault but I've tried including the jquery file in the header and also just in the body before the acutual slide show begins.
I am beginning to suspect it may have something to do with my other included .js files in the header conflicting? I have an idea I will try remove them and see how it goes. example of problem and one working fine at this stage. http://sonesayi.com/si/ http://sonesayi.com/si/slideshow.html update 9.19pm NZL Time 24/01/2009 I have checked and taken some screen shoots to confirm that does appear to be conflicts with the 3 scripts CODE <script type=\"text/javascript\" src=\"js/prototype.js\"></script> <script type=\"text/javascript\" src=\"js/scriptaculous.js?load=effects,builder\"></script> <script type=\"text/javascript\" src=\"js/lightbox.js\"></script> When I comment these out there is no error and the page functions fine. Now I'm at a loss at to what to do right at this time. Any ideas welcome ^^ update 11.10pm NZL Time 24/01/2009 fixed js conflicted. change functions prev, next to prevItem, nextItem (conflict with next function somewhere). jQuery.noConflict();
Just a question concerning how its structured. You've used an unordered list for the containers of Div's. Does this help in keeping them displayed inline? I am having trouble trying to find a way to center them. I have tried to apply text-align: center for the container div "slideArea" but still no effect. I can live with not being able to center them nicely but it would be nicer looking centered
 you can see it at http://sonesayi.com/si QUOTE (sonesay @ Jan 24 2009, 06:59 PM)  You've used an unordered list for the containers of Div's. Does this help in keeping them displayed inline? I am having trouble trying to find a way to center them. Yeah, the inline list items is what made it possible to actually work with the block-level divisions. I had and have an idea on how to center or distribute the list items evenly, which includes margins and another math equation. CODE <script type="text/javascript"> //<![CDATA[ var index = 0; var children; var parentWidth; var parentPadding; var childWidth; var visChildren; $(document).ready( function(){ children = $("div#sliderArea ul li").children("div"); parentWidth = $("div#sliderArea").width(); parentPadding = $("div#sliderArea").css("margin-left"); childWidth = $(children[0]).width(); visChildren = Math.floor(parentWidth/childWidth); distribute(); } ); function prevItem() { index = index - 1; if (index < 0){ index = 0; } $(children[index]).removeClass("hidden"); distribute(); } function nextItem() { if (index < (children.length-visChildren)) { $(children[index]).addClass("hidden"); index = index + 1; } distribute(); } function distribute() { var margin = parentWidth - (childWidth * visChildren); margin = margin/(2*visChildren); margin -= parseInt(parentPadding)*2; for (var i = 0; i < children.length; i++){ $(children[i]).css("margin", "0"); } for (var i = index; i < (index+visChildren+1); i++){ $(children[i]).css({"margin-left" : margin, "margin-right" : margin}); } } //]]> </script> This code evenly and dynamically (as best as it can) distributes the items. I have a horizontal navigation,I need that it should dynamically adjust its width according to the number of links.As if it would have 10 links it will be taking the complete area of its div ,and also if one link is added or deleted from it ,it will take the same area[spread out throughout its parent div]How is this possible.Please reply..Its urgent.
Similar Topics
Keywords :
A Content Management System (3) It is a pain trying to have to write new code everytime you want to change something on my website. is there a formula? (6) I am making a table in a website that's as big as the display area of the browser for instance: (1) In my application I have a custom tag that generates all the action buttons that the page needs. My Table expands past screen at 100% (5) Hey everyone. I have been designing websites for a long time but i have recently decided to tryout (0) I've got 3 drop down lists. The first one changes what appears in the second two. For some (3) his may be a CSS question, but it's the XHTML not validating that's giving me a problem. (13) Well, I have a table that I don't want to be over 350 pixels in width - even on the largest table width="100%" goes off screen (2) Hey everyone. My problem is that current i have a left menu and a right menu which are created using (10) I will try to explain: When clicking on the link, a pop-up window will be opened. I also want to (8) how do you add width and height to your page? without adding it to your link you previously (0) My problem is the following: I work disconnected (no asp nor php etc...), with formsplayer What I Looking for Expandable, Div, Width, With, Dynamic, Items
|
 Expandable Div Width With Dynamic Items |
Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com
