JavaScript - Ie Hack For Scrollable Divs
so my site ... www.brianapurserphotography.com/kitchen1/ (click portfolio to see the div im referring too) loads fine in firefox and safari on my mac but.... refuses to scroll in IE so to find out tonight. The scroll bar comes up just fine but the actual scroll bar itself that one uses to drag does not. All that shows is an inactive scroll bar with inactive arrows.
Why? Similar TutorialsHey all.. I just finished a semester at the local junior college in javascript programming. Didnt teach us very well, but I learned several basics. I have skills in several different aspects of programming now, but none as an expert by any means. Now, I am working on a project for my wife's non-profit that she is involved in, and an wanting to create a thumbnail sized picture 'band' at the top of my website, with images of things that she wants the user to be able to click on to pop up a bigger picture into a new window, a popup window, mind you. This 'image gallery', needs to be able to be clicked on to move the images to the left or to the right, and display, maybe 5 to seven images at a time in about a 100px height band. I have seen this on other websites before, and I have the software to do my own programming, and I 'should have' developed the skills by now, lol, but, I just need some help getting started in the right direction in knowing how to start out. Like, what do I need to accomplish to do this? I already have a div set up for the container for it. The website is using a combination of html, css, php, mysql and javascript. Thank you; Ice Hi Everyone, I hope it was the right decision to post here and not in the Javascript framework forum, as I think my problem is not necessarily related to the use of jQuery, but my lack of Javascript knowledge and how I can make both scripts work together. I am using a jQuery tab plugin that shows a different content div on click of each tab. It also has a fade in (http://www.stilbuero.de/jquery/tabs/...n73#fragment-7) In addition, I am using the scroller scripts from Blueshoes (I also tried another, similar scroller script, but run into the same problem: http://www.dyn-web.com/code/scroll/vert.php). What I want to achieve: Have a simple tab function with up to 6 tabs. Each tab content will have a scrollable div with a custom scrollbar that also scrolls on mouseover. The problem: The tab and scrollbar on initial page load work fine. Once I click on the second or third tab, the tab content loads fine, but the scroller function does not load. I have to click on the tab number again for the scrollbar to appear (I added an onClick event that loads the scrollbar, but this only seems to be activated on the second click, not the first click) I thought I could just reload the page again with an onClick event on the tabs, but this only reloads the page with the first tab active, and the tab content fade in effect doesn't quite show anymore. In addition, I do not know how to change the script so the tab that was been clicked on (e.g. tab2 or tab3) is active on page reload. Please take a look at site, where you can see everything it all in action: http://www.webjungle.com/TESTDEV/ind...s_reduced.html I'd prefer a solution that loads the scroller script immediately onClick of each tab without reloading the page. I tried all kinds of possibilities, and I have been working on this for the past 2 days! My Javascript knowledge is just to limited to grasp what needs to happen. Here is my code, as simplified as possible, with comments in italics: CSS, JAVASCRIPT and LINKS to JS libraries and plugins: Code: <style type="text/css"> <!--Begin scroller css --> .scrollingtext { position:absolute; width: 480px; font-size:13px; font-family:Verdana, Arial, Helvetica, sans-serif; line-height: 19px; } </style> <!--End scroller css --> <!--Begin Tab scripts --> <script src="scripts/jquery-1.1.3.1.pack.js" type="text/javascript"></script> <script src="scripts/jquery.history_remote.pack.js" type="text/javascript"></script> <script src="scripts/jquery.tabs.pack.js" type="text/javascript"></script> <!--tab content fade in --> <script type="text/javascript"> $(function() { $('#tabcontainer').tabs({ fxFade: true, fxSpeed: 'fast' }); }); </script> <link rel="stylesheet" href="css/jquery.tabs.css" type="text/css" media="print, projection, screen"> <!--End Tab scripts --> <!--Begin blueshoes scroller scripts --> <script type="text/javascript" src="scripts/LibCrossBrowser.js"></script> <script type="text/javascript" src="scripts/EventHandler.js"></script> <script type="text/javascript" src="scripts/Bs_FormUtil.lib.js"></script> <script type="text/javascript" src="scripts/Bs_Slider.class.js"></script> <script type="text/javascript" src="scripts/Bs_ScrollableDiv.class.js"></script> <script type="text/javascript" src="scripts/scrollFunction2.js"></script> <!--End blueshoes scroller scripts --> HTML: Code: <body onLoad="init();"> <!--init() calls the scroller script --> <div class="scroller"> <div id="tabcontainer"> <!--TABS --> <ul> <li><a href="#tab1" onClick="init();"><span>1</span></a></li> <!--i was hoping to be able to initialize the scroller script with a click, but doesn't work when first clicking on it. Only after a second click the scrollbar shows up --> <li><a href="#tab2" onClick="init();"><span>2</span></a></li> <li><a href="#tab3" onClick="init();"><span>3</span></a></li> </ul> <!--TAB 1 CONTENT --> <div id="tab1"> <table width="510" height="400" border="1" cellpadding="0" cellspacing="0" id="scroll1" onLoad="init();"> <tr> <td width="499px" valign="top"><div id="divcontainer_1" style="position:relative; width:499px; height:380; overflow:hidden;"> <div id="divContent_1" class="scrollingtext"> While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. </div> </div></td> <td width="11" height="100%" align="left" valign="top" bgcolor=""><div id="sliderDiv1"></div></td> </tr> </table> </div> <!--TAB 2 CONTENT --> <div id="tab2"> <table width="510" height="400" border="1" cellpadding="0" cellspacing="0" id="scroll1"> <tr> <td width="499px" valign="top"><div id="divcontainer_2" style="position:relative; width:499px; height:380; overflow:hidden;"> <div id="divContent_2" class="scrollingtext"> While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. </div> </div></td> <td width="11" height="100%" align="left" valign="top" bgcolor=""><div id="sliderDiv2"></div></td> </tr> </table> </div> <!--TAB 3 CONTENT --> <div id="tab3"> <table width="510" height="400" border="1" cellpadding="0" cellspacing="0" id="scroll1"> <tr> <td width="499px" valign="top"><div id="divcontainer_3" class="slidertext" style="position:relative; width:499px; height:380; overflow:hidden;"> <div id="divContent_3" class="scrollingtext"> While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. While global demand for energy is rising at an unprecendented pace, renewable energy technologies are maturing to the point to supply commercially-viable energy and electricity to meet these needs. Two issues are inherent to this increase in both supply and demand: developing reliable transmission to guarantee that clean and renewable energy is efficiently delivered to those who need it in all locations, and ensuring that policy development is collaborative in nature and meets the needs of all parties involved, including technology newcomers. </div> </div></td> <td width="11" height="100%" align="left" valign="top" bgcolor=""><div id="sliderDiv3"></div></td> </tr> </table> </div> </div> <!-- END tabcontainer *****************--> </div> <!-- END scroller *****************--> </body> P.S. I am using a transitional doctype, which seems to be correct and working with each script on its own... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> I would appreciate some hints or tips sooo much!!!! Thank you for reading my essay. A little difficult to explain, but here goes: I've combined a couple different jquery scrollable functions to a webpage that I'm creating. This: http://flowplayer.org/tools/demos/sc...one-sized.html for my horizontal scrolling. And this: http://flowplayer.org/tools/demos/sc.../vertical.html for my vertical. The problem with the vertical scrolling function is that it relies on the mousewheel and mouse clicks for scrolling and I don't feel it's immediately apparent that the text scrolls. But I really like the effect, so I've added arrows and tried to get the functionality from the vertical scrolling example, but it's not working, except for the down arrow in the content in the very last tab. When you click on an arrow, it currently takes you to the previous or next horizontal section. I know the answer is in there somewhere, but I'm not sure where to look for it. Here's the javascript file that controls the functionality: http://www.chevalia.net/js/jquery.tools.min.js And the link to the page: http://www.chevalia.net/chevalia/index2.html The CSS for the scrollable: Code: #flowtabs { /* dimensions */ width:425px; height:31px !important; margin:0 !important; padding:0; /* IE6 specific branch (prefixed with "_") */ _margin-bottom:-2px; } /* single tab */ #flowtabs li { float:left; margin-left:7px; padding:0; text-indent:0; list-style-type:none; } /* a- tag inside single tab */ #flowtabs li a { display:block; height: 31px; padding:30px 12px 10px 0; margin:0px; /* font decoration */ text-align:center; text-decoration:none; } /* style for horizontal flow */ #flowpanes {height:468px; width:924px; position:relative; overflow:hidden; clear:both;} #flowpanes ul.items {width:20000em; position:relative; clear:both; margin:0; padding:0;} #flowpanes ul li {float:left; display:block; width:924px;} /* style for vertical flow */ /* root element for scrollable */ .vertical { /* required settings */ position:relative; overflow:hidden; /* vertical scrollers have typically larger height than width */ height: 450px; width: 611px; } /* root element for scrollable items */ .vert_items { position:relative; width: 600px; float:left; /* this time we have very large space for height */ height:5000em; margin: 0px; } .actions { width:15px; height:auto; float: right; margin:auto; } .actions a { cursor:pointer; } .nextPage { float:right; margin-top:38px; } .prevPage { float:right; margin-top:200px; } Anyone care to take a stab at this puzzle? Many thanks in advance. I needed to know if a remote Page was completely loaded in an iframe. If I try to use framename.contentDocument.readyState=='complete' I get an permissions error. However if a create a local Page such as: ----------------------------------------------- <html> <body> <iframe src="http//:somewhere.com" > </iframe> </body> </html> --------------------------------------- I can check whether the local Page, hence the remote Page I was interested in is loaded. Will this hack go away or does it conform to the standard? Hey, hoping someone can help. As this is my first post and I have a very very very small understanding of Javascript you have permission to mock me! Anyway, here goes... I am using a third party shopping cart system. One of the dropdown menus uses an array as the 'name'. <select name="product[]"> I'm pretty sure it has to stay this way or the cart won't work. I have a function which runs to make sure it can't be left on the first option when submitted, however it won't work with the 'name' containing square brackets! function validate_form_acflgotmt ( ) { valid = true; if ( document.acftshirt.product[].selectedIndex == 0 ) { alert ( "Neigh! Whoa boy, don't forget to choose a t-shirt size!" ); valid = false; } return valid; } If anyone can help please do and I will shed a single tear of joy. Thanks! Jake Here is the code I'm using: Code: <style type="text/css" rel="stylesheet" href=""> li#button { cursor:pointer; } </style> <script type="text/javascript"> var num = 6; // this is # of divs you have function swap(what) { for(var i = 0; i < num; i++) { document.getElementById('swap'+i).style.display = 'none'; } document.getElementById('swap'+what).style.display = 'block'; } var createStyle = document.createElement('style'); var createStyleProp = document.createTextNode('.hidden { display:none; }'); createStyle.appendChild(createStyleProp); document.getElementsByTagName('head')[0].appendChild(createStyle); </script> <body> <div id="content"> <ul id="a-menu"> <li id="button" onClick="swap(0)"><b>button1</b></li> <li id="button" onClick="swap(1)"><b>button2</b></li> <li id="button" onClick="swap(2)"><b>button3</b></li> </ul> <div id="swap0" class="block">content 1</div> <div id="swap1" class="hidden"> <ul id="submenu"> <li id="button" onClick="swap(3)">button1</li> <li id="button" onClick="swap(4)">button2</li> <li id="button" onClick="swap(5)">button3</li> <li id="button" onClick="swap(6)">button4</li> </ul> <div id="swap3" class="block">content 2</div> <div id="swap4" class="hidden">content 3</div> <div id="swap5" class="hidden">content 4</div> <div id="swap6" class="hidden">content 5</div> </div> <div id="swap2" class="hidden">content 6</div> </div> </body> </html> Is working fine for the first three buttons but the subdivs from swap1(div) are not working. Can anyone help me with this?? Hey there. I want to move a div around a page, and I do this by getting the original top and left values of a div, and then change them. But the problem is getting the original values; I checked online and thought that this would work: Code: var chart = document.getElementById(charDiv).style.top; var charl = document.getElementById(charDiv).style.left; alert('char_t:' + chart + ' char_l:' + charl + 'charDiv:' + charDiv); charDiv is passed into the function (its the id of the div I want to move). I know that charDiv has a value by looking at the values of the alert() statement, but the values of chart and charl are empty. The alert simply outputs char_t: char_l: charDiv: charOne any help would be appreciated I have this simple checkbox menu http://myresearchfinder.com/dev/checktest.html If you check the cancer box a div will appear. If you check lung, another menu pops up. If you check colon nothing appears because it's behind the lung div. I am aware of z-index. But because a person may go back and forth between menus I need a way to make sure the appropriate div is always on top. Any ideas? So I have a few divs that I'm hiding and showing whenever a you click on a link. So I'm a newbie at JavaScript and this is the best way I know how to do this. var divElement = ''; function show(divElement) { if(divElement == 'add') { document.getElementById('uploadImages').style.display='none'; document.getElementById('addTutorial').style.display='block'; document.getElementById('editTutorial').style.display='none'; document.getElementById('tutorialsImages').style.display='none'; document.getElementById('pendingTutorial').style.display='none'; document.getElementById('deletedTutorial').style.display='none'; } else if(divElement == 'edit') { document.getElementById('uploadImages').style.display='none'; document.getElementById('addTutorial').style.display='none'; document.getElementById('editTutorial').style.display='block'; document.getElementById('pendingTutorial').style.display='none'; document.getElementById('tutorialsImages').style.display='none'; document.getElementById('deletedTutorial').style.display='none'; } else if (divElement == 'images') { document.getElementById('uploadImages').style.display='none'; document.getElementById('addTutorial').style.display='none'; document.getElementById('editTutorial').style.display='none'; document.getElementById('pendingTutorial').style.display='none'; document.getElementById('tutorialsImages').style.display='block'; document.getElementById('deletedTutorial').style.display='none'; } else if(divElement == 'pending') { document.getElementById('uploadImages').style.display='none'; document.getElementById('addTutorial').style.display='none'; document.getElementById('editTutorial').style.display='none'; document.getElementById('tutorialsImages').style.display='none'; document.getElementById('pendingTutorial').style.display='block'; document.getElementById('deletedTutorial').style.display='none'; } else if(divElement == 'upload') { document.getElementById('uploadImages').style.display='block'; document.getElementById('addTutorial').style.display='none'; document.getElementById('editTutorial').style.display='none'; document.getElementById('tutorialsImages').style.display='none'; document.getElementById('pendingTutorial').style.display='none'; document.getElementById('deletedTutorial').style.display='none'; } else if(divElement == 'delete') { document.getElementById('uploadImages').style.display='none'; document.getElementById('addTutorial').style.display='none'; document.getElementById('editTutorial').style.display='none'; document.getElementById('tutorialsImages').style.display='none'; document.getElementById('pendingTutorial').style.display='none'; document.getElementById('deletedTutorial').style.display='block'; } } That is a awful lot of code to do just a few simple things. But don't get me wrong it works... I just wondered if there is a cleaner way of doing this. Thanks, Jon W Hi, I wondering if anyone can help: I've got rows of divs in this manner <div class="row">This is row 1 <a href="click">click here to show more</a></div> <div class="hidden row"><p> hidden text for row 1</p></div> <div class="row">This is row 2 <a href="click">click here to show more</a></div> <div class="hidden row"><p> hidden text for row 2</p></div> <div class="row">This is row 3 <a href="click">click here to show more</a></div> <div class="hidden row"><p> hidden text for row 3</p></div> <div class="row">This is row 4 <a href="click">click here to show more</a></div> <div class="hidden row"><p> hidden text for row 4</p></div> I wish to have some javascript to toggle the hidden row for its corresponding link. Please can someone help point me to an example if available. Any help will be greatly appreciated I was wondering how I could redirect from one div to another div after " x " seconds on the same page.. Is this possible? So like basically: Index page: > Shows div1, after x seconds shows div2 etc.. Hi, I have a good toggle script that does what I want for the most part. I have a set of links. When you click one the content in that div replaces the previous content. When you load the page, the content of link one shows. However, I would like to have different content show, not related to any of the links, when the page first loads. Once you click on any of the links that copy will get replaced with the corresponding copy. I am attaching the code and a link to the page. Code: <!-- Hide/Show --> <script type="text/javascript"> window.onload=function() { var aObj=document.getElementsByTagName('a'); var i=aObj.length; while(i--) { aObj[i].count = i; aObj[i].onclick=function() {return showHide(this);}; showHide(aObj[i]); } }; function showHide(obj) { var aDiv=document.getElementById('wrapper').getElementsByTagName('div'); if (typeof showHide.counter == 'undefined' ) { showHide.counter = 0; } aDiv[showHide.counter].style.display = 'none'; aDiv[obj.count].style.display = 'block'; showHide.counter = obj.count; return false; } </script> http://www.michelleswann.com/test/index.html Thanks so much for any help! I just got this problem when I try to add the expandable divs in my webpage. However when I click the divs on the page, I can't see the rest of my content. This is my page, does anybody know what happened with my code??!! http://www.calibredesign.com/clients..._news_new.html the divs are on the button of the page. Thanks!! I have five DIV tags that contain a photo and brief bio for partners of an accounting firm. I need to randomize these DIV tags (id="d1" - "d5") to display only one of the tags on each page load. Normally, I would do this with ColdFusion but the client isn't willing to purchase the language support for their hosting system. A sample of one of the DIVs is below. Code: <div id='d1'> <div class="subhead1">Shareholder Spotlight</div> <img style="float:left;margin:12px 10px 0px 0px" src="images/leonard_summer_photo.jpg"> <div class="subhead2">Leonard M. Sommer, CPA</div> <div class="subhead3">Managing Shareholder</div> <div class="body">Leonard has more than 30 years experience in providing tax, business and succession planning advice for family-owned and closely-held businesses. <a href="leonardsommer.html" style="color:#3d3d3d; text-decoration:underline">Learn more</a>.</div> </div> If someone could let me know how to do this in javascript I would appreciate it. You'll have to be very clear in your instructions as I don't know javascript very well. Thank you in advance for your response! Hey friends, I cannot seem to figure this out. I am attempting to utilize one horizontal scroll bar at the bottom of the second div that will control the scrolling of both the first and second div. The second div also already has another scroll bar on the left. If this can be done without a scroll bar even appearing on the first, it would be great. This is the CSS of the two divs I am working with: Code: #con3 { width: 740pt; height: 100pt; margin: 0; } #con4 { position: absolute; width: 740pt; height: 120pt; margin: 0; } #con3 is located directly above #con4 within another div. I love quick replyers. Joshie I have the below html. In the below code, I have an onmouseover and onmouseout on the parent DIV of three nested DIVs. Whenever I mouse INTO the nested DIVs, the onmouseout event fires for the outermost DIV. Is there a way to prevent this? <html> <head> <script language="JavaScript"> function mouseOnDiv() { alert("mouseon outerDiv"); event.cancelBubble = true; } function mouseOffDiv() { alert("mouseoff outerDiv"); event.cancelBubble = true; } </script> </head> <body> <div style="border:1px solid red; position:absolute" onmouseover="mouseOnDiv()" onmouseout="mouseOffDiv()"> This is some text <div style="border:1px solid blue; position:relative"> This is some text in the middle div <div style="border:1px solid green; position:relative"> <ul> <li>Item 1</li> </ul> </div> </div> </div> </body> </html> Hi all, im trying to select certain elements from on screen and set the style of a div to over lap it. Code: $("body *").each(function(){ if($(this).attr("rel")!="nbta"){ alert("#div" + z + " style: " + "display:block; width:" + $(this).width() + "px; height:" + $(this).height() + "px; position:absolute; top:" + $(this).position().top + "px; left:" + $(this).position().left + "px; border: 1px solid red; z-index:" + $(this).parentNumber() + ";"); $("#div" + z).attr("style", "display:block; width:" + $(this).width() + "; height:" + $(this).height() + "; position:absolute; top:" + $(this).position().top + "; left:" + $(this).position().left + "; border: 1px solid red; z-index:" + $(this).parentNumber() + ";"); z++; } }); Code: <p id="fooBar">dfgdsfdsfdsf1111</p> <p id="fooBar2">dfgdsfdssdsdfdsf222</p> <p id="fooBar3">dfgdsfdsfdsf333</p> <p id="fooBar4">dfgdsfdsfdsf444</p> <div id="div1" style="display:none" rel="nbta"> </div> <div id="div2" style="display:none" rel="nbta"> </div> <div id="div3" style="display:none" rel="nbta"> </div> <div id="div4" style="display:none" rel="nbta"> </div> seems easy enough and the results are showing corrent i just cant seem to get it to display! I have seveal flash quizzes set up for my history class. On the main page right now is just a link to quiz #1. After finishing quiz #1, I want a cookie set that is proof of a finished test. I will then redirect back to the main page that will now show a link to quiz #2. And so on after each quiz.... Any help would be greatly, greatly appreciated. I want 10 divs that have their visibility set to none. Then based on a cookie I would like to have 1 at at time become visible. I have 2 DIVs on a page, Div1 and Div2. I want to copy the contents from Div1 into Div2, then suppress the contents of Div1. I want to do this when the page loads. This is what I did: Code: <div id="Div1" style="color:red;">This is the text to be moved</div> <div id="Div2" style="color:green;"></div> <script type="text/javascript"> function swapIt() { document.getElementById('Div2').innerHTML = document.getElementById('Div1').innerHTML; document.getElementByID('Div1').style.display = "none"; } onload = swapIt(); </script> This, of course, does not work, but I don't know javascript well enough to figure out why. Could someone give me an example of what would work in this case? |