Hello, what I'm trying to do on the website above, is when the above titles are clicked each one loads a different paragraph of text in the box below. Also I want the box text to fade in and out. I know I could just create multiple pages with the box text changed on each. But is there a better way??? Any help would be greatly appreciated
You can use following codes: <html> <head> <style> .details { width: 500px; height: 200px; border: solid 1px silver; background-color: green; } .hidden { display: none; } .cursor { cursor: pointer; cursor: hand; } </style> <script> var selDiv = ''; var selItem = null; var TimeToFade = 1000.0; function showDiv(src, id) { if (id == selDiv) return; var tag; if (selDiv != '') { tag = document.getElementById(selDiv); tag.style.display = 'none'; } if (selItem != null) { selItem.style.color = 'black'; } selDiv = id; tag = document.getElementById(selDiv); selItem = src; selItem.style.color = 'red'; tag.FadeState = -2; tag.style.opacity = 0; tag.style.display = 'block'; fade(selDiv); } function fade(eid) { var element = document.getElementById(eid); if(element == null) return; if(element.FadeState == null) { if(element.style.opacity == null || element.style.opacity == '' || element.style.opacity == '1') { element.FadeState = 2; } else { element.FadeState = -2; } } if(element.FadeState == 1 || element.FadeState == -1) { element.FadeState = element.FadeState == 1 ? -1 : 1; element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft; } else { element.FadeState = element.FadeState == 2 ? -1 : 1; element.FadeTimeLeft = TimeToFade; setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33); } } function animateFade(lastTick, eid) { var curTick = new Date().getTime(); var elapsedTicks = curTick - lastTick; var element = document.getElementById(eid); if(element.FadeTimeLeft <= elapsedTicks) { element.style.opacity = element.FadeState == 1 ? '1' : '0'; element.style.filter = 'alpha(opacity = ' + (element.FadeState == 1 ? '100' : '0') + ')'; element.FadeState = element.FadeState == 1 ? 2 : -2; return; } element.FadeTimeLeft -= elapsedTicks; var newOpVal = element.FadeTimeLeft/TimeToFade; if(element.FadeState == 1) newOpVal = 1 - newOpVal; element.style.opacity = newOpVal; element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')'; setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33); } </script> </head> <body> <p class="cursor" onclick="showDiv(this, 'p1')">Paragraph 1</p> <p class="cursor" onclick="showDiv(this, 'p2')">Paragraph 2</p> <p class="cursor" onclick="showDiv(this, 'p3')">Paragraph 3</p> <div id='p1' class="details hidden"> This is paragraph 1 </div> <div id='p2' class="details hidden"> This is paragraph 2 </div> <div id='p3' class="details hidden"> This is paragraph 3 </div> </body> </html> Code (markup):
Hy That effect can be made with jQuery UI tabs(), for examples and documentation see here http://jqueryui.com/demos/tabs/
Visit "http://www.dynamicdrive.com" They have scripts for just about every kind of dynamic content. I did some quick searching and found this to be a quick solution "http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm" With a little bit of tweaking, it can be used for what you want done.