Expanding DIV using XML XSL JAVASCRIPT CSS

@stevanicusMar 27.2008

Hi There,

im having problems getting the height of a div that is created in a XSL page.

I have an xml document that creates a list of things.

[code=html] <TODO> <TASK> <STIME>12:00 -</STIME> <ETIME>13:00</ETIME> <TITLE>Task 1</TITLE> <DESCRIPTION>do whatever task 1 is</DESCRIPTION> </TASK> <TODO> [/code]

this using an xsl file with a css link file – i display the data how i wont.
Then using a little javascript – i can place the data(that i can change the size of in the xml file) in my html. It will show me my whole todo list. I can change the presentation etc not a prob with the css file.

in the html file
Now I thought I’d like to have a link that expands and hides the div (incrementing and decrementing the height in intervals). Now that works… as long as I give the the javascript handling the expanding etc a height number. it cant do the following

var height = document.getElementById(“todolist”).style.height;
height = height.replace(“px”, “”);

height is nothing or undefined.

this doesnt work.. coz if i add more tasks to my xml than my html expanding div doesnt auto size.

hope this makes sense.

Thanks to everyone

Stevanicus

to post a comment

JavaScript

5 Comments(s) _↴

@bogoclesMar 27.2008 — #Not sure if this is what you're looking for, cuz I was kinda confused, but it sounds like you want something like this:

[b]test.xml[/b]

&lt;?xml version="1.0" encoding="UTF-8"?&gt;
 &lt;?xml-stylesheet type="text/xsl" href="test.xsl"?&gt;
 
 &lt;todo_list&gt;
 &lt;todo list_id="1"&gt;
 &lt;stime&gt;12:00&lt;/stime&gt;
 &lt;etime&gt;13:00&lt;/etime&gt;
 &lt;desc&gt;Do something.&lt;/desc&gt;
 &lt;/todo&gt;
 &lt;todo list_id="1900245"&gt;
 &lt;stime&gt;02:00&lt;/stime&gt;
 &lt;etime&gt;02:00:01&lt;/etime&gt;
 &lt;desc&gt;Do something ... really freaking fast! ... and early ...&lt;/desc&gt;
 &lt;/todo&gt;
 &lt;/todo_list&gt;

[b]test.xsl[/b]

&lt;?xml version="1.0" encoding="UTF-8"?&gt;
 
 &lt;xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml"&gt;
 &lt;xsl:output method="html" /&gt;
 
 &lt;xsl:template match="/"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 &lt;head&gt;
 &lt;script type="text/javascript"&gt;
 &lt;![CDATA[
 
 <i>    </i>      function alternate_visibility ( elem ) {
 
 <i>    </i>        elem = document.getElementById ( elem );
 
 <i>    </i>        if ( elem.style.display != 'none' ) {
 
 <i>    </i>          elem.style.display = 'none';
 
 <i>    </i>        } else {
 
 <i>    </i>          elem.style.display = 'block';
 
 <i>    </i>        }
 
 <i>    </i>      }
 
 <i>    </i>    ]]&gt;
 <i>    </i>  &lt;/script&gt;
 <i>    </i>&lt;/head&gt;
 <i>    </i>&lt;body&gt;
 <i>    </i>  &lt;xsl:apply-templates /&gt;
 <i>    </i>&lt;/body&gt;
 &lt;/html&gt;
 &lt;/xsl:template&gt;
 
 &lt;xsl:template match="todo"&gt;
 &lt;a href="#" onclick="alternate_visibility ( '{@list_id}' ); return false;"&gt;Todo List&lt;/a&gt;
 &lt;ul id="{@list_id}"&gt;
 &lt;li&gt;Start Time : &lt;b&gt;&lt;xsl:value-of select="stime" /&gt;&lt;/b&gt;&lt;/li&gt;
 &lt;li&gt;End Time : &lt;b&gt;&lt;xsl:value-of select="etime" /&gt;&lt;/b&gt;&lt;/li&gt;
 &lt;li&gt;Description : &lt;em&gt;&lt;xsl:value-of select="desc" /&gt;&lt;/em&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/xsl:template&gt;
 
 &lt;/xsl:stylesheet&gt;

Incidentally, this will create expanding and collapsing unordered lists with the link above as the trigger. Copy and paste these into two files and mess around with it.

It works in FireFox and IE7 on my box. Hope this helps!

And while I'm here, I might as well ask:

Does it matter if I capitalize UTF-8 in the processing instructions? I've always wondered that ...

@stevanicusauthorMar 27.2008 — #Hi there,

thanks for you quick reply... sorry mine took a little longer ?

I tried what someone else on a different forum with instead of style.height - var todo = document.getElementById(objname);

var height = todo.offsetHeight;

I tried what i mentioned.. and its works, however it only display the first say 10px. and then stops.

i have the following code in my html

[CODE]
  <div onclick="toggleSlide('TODO');">Click ME</div>
 <div id="TODO" class="todoBox" style="display:none;"></div> //this uses another js file to call the data from my xsl file[/CODE]

and my js file contains the following, i took this from a tutorial, because mine version didnt work as well, plus i thought with the height thing - that i did something wrong. but have the same prob.

[CODE]
 var timerlen = 5;
 var slideAniLen = 250;
 
 var timerID = new Array();
 var startTime = new Array();
 var obj = new Array();
 var endHeight = new Array();
 var moving = new Array();
 var dir = new Array();
 
 function slidedown(objname){
 
   if(moving[objname])
   return;
 
   if(document.getElementById(objname).style.display != "none")
   return; // cannot slide down something that is already visible
 
   moving[objname] = true;
   dir[objname] = "down";
   startslide(objname);
 }
 
 function slideup(objname){
 if(moving[objname])
 return;
 
   if(document.getElementById(objname).style.display == "none")
   return; // cannot slide up something that is already hidden
 
   moving[objname] = true;
   dir[objname] = "up";
   startslide(objname);
 }
 
 function startslide(objname){
 obj[objname] = document.getElementById(objname);
 
   endHeight[objname] = obj[objname].offsetHeight;
   startTime[objname] = (new Date()).getTime();
 
   if(dir[objname] == "down"){
   obj[objname].style.height = "1px";
   }
 
   obj[objname].style.display = "block";
 
   timerID[objname] = setInterval('slidetick('' + objname + '');',timerlen);
 }
 
 function slidetick(objname){
 var elapsed = (new Date()).getTime() - startTime[objname];
 
   if (elapsed > slideAniLen)
   endSlide(objname)
   else {
   var d = Math.round(elapsed / slideAniLen * endHeight[objname]);
   if(dir[objname] == "up")
   d = endHeight[objname] - d;
 
   obj[objname].style.height = d + "px";
   }
 
   return;
 }
 
 function endSlide(objname){
 clearInterval(timerID[objname]);
 
   if(dir[objname] == "up")
   obj[objname].style.display = "none";
 
   obj[objname].style.height = endHeight[objname] + "px";
 
   delete(moving[objname]);
   delete(timerID[objname]);
   delete(startTime[objname]);
   delete(endHeight[objname]);
   delete(obj[objname]);
   delete(dir[objname]);
 
   return;
 }
 
 function toggleSlide(objname){
 if(document.getElementById(objname).style.display == "none"){
 // div is hidden, so let's slide down
 slidedown(objname);
 }else{
 // div is not hidden, so slide up
 slideup(objname);
 }
 }[/CODE]

bascially i press Click ME - it strolls down maybe 5-10px and the stops - i can see the top half of the title.

Thanks again

Steve

@bogoclesMar 28.2008 — #Hmmm ... after going back over your original and last posts, I realize that you wanted it so [i]slide[/i] ... lol.

Okay, this is a bit tougher, but I think I can work something out. I've always been interested in using DHTML to achieve visual effects like this. Sometimes I like to pretend that I can do eveything a flash programmer can do simply with JS and CSS. Problem is, I never tried, and flash programmers will swear up and down that its impossible.

So give me a bit, and I'll see what can be done.

@bogoclesMar 28.2008 — #Well, I wasn't able to figure it out tonight, but I did find this site which does what you want ... they even have a demonstration on the page.

http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm

@stevanicusauthorMar 28.2008 — #hi, thanks for looking into it

i havent had any time myself today... but will take a look at what you posted later.

thanks again - p.s. if you got anything working.. let me know (much appreciated)

steve

Also in #JavaScript _↴

Newbie lacking confidence Script For Image a Day What's wrong with this?!

Success!

Help @stevanicus spread the word by sharing this article on Twitter...

Tweet This

Expanding DIV using XML XSL JAVASCRIPT CSS

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Expanding DIV using XML XSL JAVASCRIPT CSS

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴