swirlingDervish

I'm still amazed how it's always a misplaced semi-colon or a wayward comma or, as in this case, the single quote mark instead of the double(!!) on the argument pass from the function call. So it all works (or rather I'm ready for more coding), but I'll standardize passing the div properties pass to variable. Thanks for your help. Quick question before sign-off: document.back vs. document.getElementById("back")...am I understanding correctly, that using doc.get to get the properties of a div is only calling the properties, not the div.properties, right?...hence, the need for the variable container so that properties can be acted on...? "Document.back" wouldn't accomplish the same thing I guess...

@dsonesuk, 1) my shoddy attempt at absolute DOM referencing. How would I code that the div element "back" sits on the document level in dot notation? I know I've got to re-read some sections..what to do when I guess is my issue. 2) I was wondering if my x was really getting passed in the function call on the button click; I'm sorry but I"m drawing a blank as quote marks around the input on each aren't working either. 3) Add null check, got it. Thanks again.

I heard someone say there's a programmer's Pareto Principle: 10% of your code will produce 90% of your debug time...? :'( Wish I could learn to debug without brain fry.... I'm trying to show and hide layers by switching the display attributes through arrays on mouse click, but my attribs aren't changing and I'm still too noob to fully work fiddle or chrome debug breakpoints: js: inside=["what", "tees", "posters", "apparel"]; /* array of div elements names to show or hide*/ /* function checks if array entry has value of arg x and if not, changes div element display attrib to 'none'. Attrib. for the entry with value of x is changed to 'block'. */ function heiChange (x) { if (document.back != "undefined"){ for (var i=0 && inside!=x; i<inside.length; i++){ document.getElementById(inside).style.display = "none"; /* accrdg to fiddle, <<<<<<<<this line is the problem...? */ } n=document.getElementById(x); n.style.display = "block"; document.getElementById("back").style.height = n.style.height; } } html: <div id="back" style="left:179px; top:79px; width:1024px; height:auto;"> <div id="what" class="catBack" style="position:absolute; top:189px; left:237px; width:760px; height:400px; display:none;"></div> <div id="tees" class="catBack" style="position:absolute; top:189px; left:237px; width:760px; height:600px; display:none;"></div> ..... </div> <div class="upnav" style="width: 525px; height: 27px"> <table><tr> <td width="70"><a href="javascript:heiChange(what);" >uh, what...?</a></td> <td width="42"><a href="javascript:heiChange(tees);">t-shirts</a></td> ..... </tr></table></div> css: .catBack { background-color: #5e8758; opacity:0.5; filter:alpha(opacity=50); outline:#5e8758 groove thick; } So there you have it.....help! Thanks....

O..M..G!..and ugh! Why is it almost always something simple?! (especially after 2 wks! ) The dupes turned up in a secondary navbar of buttons and I'd just missed them, focusing on the elements. Thanx 4 the help...and my weekly dose of debugger shame!

Hi, thanks for responding. Unfortunately, it's not modifying either book button. A little history: about a two weeks ago, these buttons worked; I moved the elements around for a different placement (didn't change any CSS or code referencing) and tested, only to find it not working. I moved the elements back to their previous places, still didn't work. Switch function and CSS code for book buttons is exactly the same prior to and after the move, and the book CSS class "CDs" style is exactly the same as all the other button styles, before and after the move. Note: when using Chrome debugger, I noticed that for all buttons, the element's style class is visibly changed as per switch function when any button is clicked, except the book buttons. "CDs" class style is pulled from external sheet. I've included some of the code: /* debugger results' impact on elements after received button mouse click */ <<<div id="Inits" class="CDs" style="display: none;">...</div> <div id="Guidd" class="CDs" style="display: none;">...</div> <div id="LovRel" class="CDs" style="display: block;">...</div> <div id="Book" class="CDs";">...</div> <- NOTE <div id="Inits" class="CDs" style="display: none;">...</div> <div id="Inits" class="CDs" style="display: none;">...</div> >> /* the multiple choice for object visibility */ << switch(chc){ case 1: document.getElementById("Inits").style.display = "block"; document.getElementById("LovRel").style.display = document.getElementById("Guidd").style.display = document.getElementById("Book").style.display = "none"; document.getElementById("Malas").style.display = document.getElementById("Ship").style.display = "none"; break; case 2: document.getElementById("Guidd").style.display = "block"; document.getElementById("Inits").style.display = document.getElementById("LovRel").style.display = document.getElementById("Book").style.display = "none"; document.getElementById("Malas").style.display = document.getElementById("Ship").style.display = "none"; break; case 3: document.getElementById("LovRel").style.display = "block"; document.getElementById("Guidd").style.display = document.getElementById("Inits").style.display = document.getElementById("Book").style.display = "none"; document.getElementById("Malas").style.display = document.getElementById("Ship").style.display = "none"; break; case 4: document.getElementById("Book").style.display = "block"; document.getElementById("Malas").style.display = document.getElementById("Ship").style.display = "none"; document.getElementById("Inits").style.display = document.getElementById("LovRel").style.display = document.getElementById("Guidd").style.display = "none"; break; case 5: document.getElementById("Malas").style.display = "block"; document.getElementById("Ship").style.display = document.getElementById("Book").style.display = "none"; document.getElementById("Inits").style.display = document.getElementById("LovRel").style.display = document.getElementById("Guidd").style.display = "none"; break; case 6: document.getElementById("Ship").style.display = "block"; document.getElementById("Malas").style.display = document.getElementById("Book").style.display = "none"; document.getElementById("Inits").style.display = document.getElementById("LovRel").style.display = document.getElementById("Guidd").style.display = "none"; break; } >> /* ...and external CSS class */ .CDs { position: absolute; left:197px; top:187px; width:755px; height:511px; color:green; font:12px Verdana; text-shadow:1px 1px #0b0b0b; z-index:5; display:none; } Any thoughts...? Thanx 4 any help....

...or it should be simple. Newbie here, trying to apply a style to a <div> element by js. I have js buttons that change visibility on several <div>s which all seem to work fine using the exact switch function to choose the right element to reveal except for two book buttons. The syntax seems correct but neither the display nor class style is applying. Help! Here is the page link: http://siddhicenter.org/Inner/Space/Store.htm I know it has to be something crazy simple, right? Thanks....

...maybe it's my use of the event listener...? Outside of JSFiddle, "ended" function doesn't seem to work...Help!

Hi, I'm hoping someone can help me with my playlist problem: I've coded for the first clip to run once, and the second to loop to infinity, but can't get the second clip to follow after first in Chrome or Safari, and in Opera or Firefox, music doesn't play at all! Any ideas...?

Set up code for an audio playlist of two mp3's and tested in JSFiddle...seemed to be working, but on upload, only plays the first clip in Chrome and Safari, and plays nothing at all in Opera and Firefox. Help!, anyone...? JS: var chant = document.getElementById("music");chant.addEventListener("ended", function() {chant2 = document.getElementById("music2"); chant2.play();}); HTML: <audio id="music" autoplay="autoplay"><br><source src="http://www.siddhicenter.org/media/GANAPATIVEDCSTUTI.ogg" type="audio/ogg" /><br><source src="http://www.siddhicenter.org/media/GANAPATIVEDCSTUTI.mp3" type="audio/mpeg" /><br>Your browser does not support the audio element.<br></audio><audio id="music2" loop="loop" ><br><source src="http://www.siddhicenter.org/media/OmNamahShivaya.ogg" type="audio/ogg" /><br><source src="http://www.siddhicenter.org/media/OmNamahShivaya.mp3" type="audio/mpeg" /><br>Your browser does not support the audio element.<br></audio> Thanks in advance...

Wrote some audio playlist code for two music clips to follow one after the other and tested it in JSFiddle. It seems to work there, but not in the browser, or rather, the first clip played in Chrome and even Safari but not the second, and nothing's working in Opera or Firefox. Help!, anyone...? HTML: <audio id="music" autoplay="autoplay"><br><source src="http://www.siddhicenter.org/media/GANAPATIVEDCSTUTI.ogg" type="audio/ogg" /><br><source src="http://www.siddhicenter.org/media/GANAPATIVEDCSTUTI.mp3" type="audio/mpeg" /><br>Your browser does not support the audio element.<br></audio><audio id="music2" loop="loop" ><br><source src="http://www.siddhicenter.org/media/OmNamahShivaya.ogg" type="audio/ogg" /><br><source src="http://www.siddhicenter.org/media/OmNamahShivaya.mp3" type="audio/mpeg" /><br>Your browser does not support the audio element.<br></audio> JS: var chant = document.getElementById("music");chant.addEventListener("ended", function() {chant2 = document.getElementById("music2"); chant2.play();}); Thanks, all...