Explanation of "Select Code/Expand" for CSS Library?

[Wildwood]

Hello, this is my first post here. All throughout the Dynamic Drive site, the examples have a gray box with 2 tabs to "Select Code" and "Expand". As best I can tell by looking at the HTML (view source) and CSS (web developer FF toolbar) its done with CSS, not Javascript.

Aside from trying to figure out the CSS the long way, is there any better explanation of how it works anywhere here? Thanks in advance.

("expanding textbox" would be a good example in itself, but I can't seem to find anything here like it)

[Jas]

The only way I can think of to do that is with javascript, changing overflow=auto to overflow=visible. Something like:


<script type="text/javascript">
function expand(){
document.getElementById("theDIV").style.overflow = "visible";
}
</script>

<div id="theDIV" style="overflow:auto;height:100px;width:100px;">
This is an example div that has overflow set to auto. This is some text to make the div show a scroll bar. . . . La la la la. . .
</div>
<a href="javascript:expand()">Click Me to Expand</a>

[Wildwood]

I don't think it's javascript. One clue is when I hover over the Select Code tab, I can see in the status bar at the bottom of Firefox that it goes to #selectcode

For instance, heres the first Horizontal menu example given:

http://www.dynamicdrive.com/style/csslibrary/item/glossy_horizontal_menu/



The use of internal-anchor/ID seems to me that it might be CSS. Anyone know?

[Medyman]

It actually is javascript that changes the CSS.

Bascially, the internal anchor is only so when you expand the area, it moves the page up so you can see as much of the code as possible. The CSS switching is happening with an onClick event (javascript).

The initial style dictates that the div be a certain height and with an overflow:auto. The expanded version is overflow:visible (or no specific height stated).


This is a quick explanation of how to do it: http://help-developer.com/index.php/2007/08/12/edit-css-properties-with-javascript/
You can probably google for better guides

[Wildwood]

Thanks, that makes sense.. but does anyone know specifically where the js code with the onclick actually is? I did a view|source of that page (see link above) and I find nothing related to that (except for 2 onclicks for Digg & delicious) I can't find any local scripting in the HTML that seems to be for that.

Likewise, I followed about 5 .js files linked with the HTML and searched through those... no onClick or overflow related to those 2 tabs. Anyone know where they're putting the javascripting for that? I'd like to see how they're doing it.

[thetestingsite]

function enhancetextarea(classname){
var alltextareas=document.getElementsByTagName("textarea")
for (var i=0; i<alltextareas.length; i++){
if (alltextareas[i].className=="codecontainer"){
var curtextarea=alltextareas[i]

var helperbar=document.createElement("div")
helperbar.innerHTML='<div class="selectcode"><a href="#selectcode" class="tabs">Select Code</a> <a href="#expandcode" class="tabs">Expand</a></div>'
var helperbarlinks=helperbar.getElementsByTagName("a")
if (curtextarea.offsetHeight>=curtextarea.scrollHeight){
helperbarlinks[1].style.display="none"
curtextarea.style.overflowY="hidden"
}

helperbarlinks[0].setAttribute("rel", i)

helperbarlinks[0].onclick=function(){
var targettextarea=document.getElementsByTagName("textarea")[parseInt(this.rel)]
targettextarea.select()
return false
}

helperbarlinks[1].setAttribute("rel", i)
helperbarlinks[1].setAttribute("rev", curtextarea.offsetHeight+" defaultHeight")

helperbarlinks[1].onclick=function(){
var targettextarea=document.getElementsByTagName("textarea")[parseInt(this.rel)]
if (this.getAttribute("rev").indexOf("defaultHeight")!=-1){// if textarea is default height
targettextarea.style.height=targettextarea.scrollHeight+"px"
this.innerHTML="Contract"
targettextarea.style.overflowY="hidden"
targettextarea.style.borderStyle="solid"
this.setAttribute("rev", this.getAttribute("rev").replace("defaultHeight", "scrollHeight"))
if (this.scrollIntoView)
this.scrollIntoView()
return false
}
else{
targettextarea.style.height=parseInt(this.getAttribute("rev"))+"px"
this.innerHTML="Expand"
targettextarea.style.overflowY="scroll"
targettextarea.style.borderStyle="dashed"
this.setAttribute("rev", this.getAttribute("rev").replace("scrollHeight", "defaultHeight"))
}

return false
}
curtextarea.style.marginTop=0
curtextarea.parentNode.insertBefore(helperbar, alltextareas[i])
}
}
}

window.onload=function(){
enhancetextarea()
}


The highlighted part is what you are looking for as far as the link is concerned.
Hope this helps.

[Wildwood]

Yes, thank you! I had looked in the scripts.js file referred in the head section of the HTML but didn't make the connection to "helperbar" Thats it.

http://www.dynamicdrive.com/eeincludes/scripts.js