Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Sliding DIV & Repeated Region

Posted on 2007-08-10
14
Medium Priority
?
2,198 Views
Last Modified: 2013-11-19
Dear Experts,

I am having trouble with my web application. I have a list of sample numbers that are dynamically generated in a table. When clicked, each sample number should have a div layer slide open underneath it to reaveal an iframe with an additional form for the user to fill out. I have the JS for the sliding div layer and the iframe stuff is all working fine.

However, when more than one sample numbers are listed. Only the top div will actually slide. I understand why, the div is only declared once in the JS. Is there a way of making the div layer into some sort of array that would allow the slide function to replicate for all dynamically generated sample numbers. The JS script is from dynamic drive, all credit to original coder. Code Below. Many Thanks - M.

-----------------------------------------------------------------------------------------

// deatil.php - The page with the Sample Nos.

<?php do { ?>
  <tr>
    <td><div align="center"><a href="javascript:collapse2.slideit()">SL<?php echo $row_result_check['sample_ID']; ?></a></div>
      <div id="testing">
        <div style="padding: 0 5px">
          <iframe frameborder="0" width="500" height="300" src="inc_add_testing.php?job_ID=<?php echo $_GET['job_ID']; ?>&amp;sample_ID=<?php echo $row_result_check['sample_ID']; ?>&amp;sampleType_ID=<?php echo $row_result_check['sampleType_ID']; ?>"> </iframe>
        </div>
      </div></td>
  </tr>
<?php } while ($row_result_check = mysql_fetch_assoc($result_check)); ?>

<script type="text/javascript">
//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse2=new animatedcollapse("testing", 800, true)
</script>

-----------------------------------------------------------------------------------------

// animatedcollapse.js

//Animated Collapsible DIV- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Last updated June 27th, 07'. Added ability for a DIV to be initially expanded.

var uniquepageid=window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, "") //get current page path and name, used to uniquely identify this page for persistence feature

function animatedcollapse(divId, animatetime, persistexpand, initstate){
      this.divId=divId
      this.divObj=document.getElementById(divId)
      this.divObj.style.overflow="hidden"
      this.timelength=animatetime
      this.initstate=(typeof initstate!="undefined" && initstate=="block")? "block" : "contract"
      this.isExpanded=animatedcollapse.getCookie(uniquepageid+"-"+divId) //"yes" or "no", based on cookie value
      this.contentheight=parseInt(this.divObj.style.height)
      var thisobj=this
      if (isNaN(this.contentheight)){ //if no CSS "height" attribute explicitly defined, get DIV's height on window.load
            animatedcollapse.dotask(window, function(){thisobj._getheight(persistexpand)}, "load")
            if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes") //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
                  this.divObj.style.visibility="hidden" //hide content (versus collapse) until we can get its height
      }
      else if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes") //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
            this.divObj.style.height=0 //just collapse content if CSS "height" attribute available
      if (persistexpand)
            animatedcollapse.dotask(window, function(){animatedcollapse.setCookie(uniquepageid+"-"+thisobj.divId, thisobj.isExpanded)}, "unload")
}

animatedcollapse.prototype._getheight=function(persistexpand){
      this.contentheight=this.divObj.offsetHeight
      if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes"){ //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
            this.divObj.style.height=0 //collapse content
            this.divObj.style.visibility="visible"
      }
      else //else if persistence is enabled AND this content should be expanded, define its CSS height value so slideup() has something to work with
            this.divObj.style.height=this.contentheight+"px"
}


animatedcollapse.prototype._slideengine=function(direction){
      var elapsed=new Date().getTime()-this.startTime //get time animation has run
      var thisobj=this
      if (elapsed<this.timelength){ //if time run is less than specified length
            var distancepercent=(direction=="down")? animatedcollapse.curveincrement(elapsed/this.timelength) : 1-animatedcollapse.curveincrement(elapsed/this.timelength)
      this.divObj.style.height=distancepercent * this.contentheight +"px"
      this.runtimer=setTimeout(function(){thisobj._slideengine(direction)}, 10)
      }
      else{ //if animation finished
            this.divObj.style.height=(direction=="down")? this.contentheight+"px" : 0
            this.isExpanded=(direction=="down")? "yes" : "no" //remember whether content is expanded or not
            this.runtimer=null
      }
}


animatedcollapse.prototype.slidedown=function(){
      if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped running
            if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
                  alert("Please wait until document has fully loaded then click again")
            else if (parseInt(this.divObj.style.height)==0){ //if content is collapsed
                  this.startTime=new Date().getTime() //Set animation start time
                  this._slideengine("down")
            }
      }
}

animatedcollapse.prototype.slideup=function(){
      if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped running
            if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
                  alert("Please wait until document has fully loaded then click again")
            else if (parseInt(this.divObj.style.height)==this.contentheight){ //if content is expanded
                  this.startTime=new Date().getTime()
                  this._slideengine("up")
            }
      }
}

animatedcollapse.prototype.slideit=function(){
      if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
            alert("Please wait until document has fully loaded then click again")
      else if (parseInt(this.divObj.style.height)==0)
            this.slidedown()
      else if (parseInt(this.divObj.style.height)==this.contentheight)
            this.slideup()
}

// -------------------------------------------------------------------
// A few utility functions below:
// -------------------------------------------------------------------

animatedcollapse.curveincrement=function(percent){
      return (1-Math.cos(percent*Math.PI)) / 2 //return cos curve based value from a percentage input
}


animatedcollapse.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
      var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
      if (target.addEventListener)
            target.addEventListener(tasktype, functionref, false)
      else if (target.attachEvent)
            target.attachEvent(tasktype, functionref)
}

animatedcollapse.getCookie=function(Name){
      var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
      if (document.cookie.match(re)) //if cookie found
            return document.cookie.match(re)[0].split("=")[1] //return its value
      return ""
}

animatedcollapse.setCookie=function(name, value, days){
      if (typeof days!="undefined"){ //if set persistent cookie
            var expireDate = new Date()
            var expstring=expireDate.setDate(expireDate.getDate()+days)
            document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()
      }
      else //else if this is a session only cookie
            document.cookie = name+"="+value
}
0
Comment
Question by:MariusGM
  • 7
  • 6
14 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19668889
Like this?

<table>
  <tr>
    <td><div align="center"><a href="javascript:collapse1.slideit()">SL1</a></div>
      <div id="testing1">
        <div style="padding: 0 5px">
          <iframe frameborder="0" width="500" height="300" src="http://www.google.com/"> </iframe>
        </div>
      </div>
      <div align="center"><a href="javascript:collapse2.slideit()">SL2</a></div>
     
      <div id="testing2">
        <div style="padding: 0 5px">
          <iframe frameborder="0" width="500" height="300" src="http://www.msn.com/"> </iframe>
        </div>
      </div></td>
  </tr>
</table>
<script type="text/javascript">
//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse1=new animatedcollapse("testing1", 800, true)
var collapse2=new animatedcollapse("testing2", 800, true)
</script>
0
 

Author Comment

by:MariusGM
ID: 19668918
Thanks, but thats static. The table row is repeated and div#testing along with it. Hence my problem.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19668937
<script>
collapse = new Array()
</script>
<table>
  <tr>
    <td><div align="center"><a href="#" onClick="collapse[0].slideit(); return false">SL0</a></div>
      <div id="testing0">
        <div style="padding: 0 5px">
          <iframe frameborder="0" width="500" height="300" src="http://www.google.com/"> </iframe>
        </div>
      </div>
      <div align="center"><a href="#" onClick="collapse[1].slideit(); return false">SL1</a></div>
     
      <div id="testing1">
        <div style="padding: 0 5px">
          <iframe frameborder="0" width="500" height="300" src="http://www.msn.com/"> </iframe>
        </div>
      </div></td>
  </tr>
</table>

and use

collapse[collapse.length-1]=new animatedcollapse("testing"+(collapse.length-1), 800, true)

for each new item
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:MariusGM
ID: 19668982
Tried to implement this, couldn't get it to work.

I must reiterate that the list of samples is dynamically generated by a DB and therfore the original PHP source code only has one instance of the sample number and sliding div layer.

0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 19669017
<?php
$cnt=0;
$script = "";
do { ?>
  <tr>
    <td><div align="center"><a href="#" onClick="collapse[<? echo $cnt; ?>].slideit(); return false">SL<?php echo $row_result_check['sample_ID']; ?></a></div>
      <div id="testing<? echo $cnt; ?>">
        <div style="padding: 0 5px">
          <iframe frameborder="0" width="500" height="300" src="inc_add_testing.php?job_ID=<?php echo $_GET['job_ID']; ?>&amp;sample_ID=<?php echo $row_result_check['sample_ID']; ?>&amp;sampleType_ID=<?php echo $row_result_check['sampleType_ID']; ?>"> </iframe>
        </div>
      </div></td>
  </tr>
<?php
$script.= "\ncollapse[".$cnt."]=new animatedcollapse('testing".$cnt."', 800, true);
$cnt++;
} while ($row_result_check = mysql_fetch_assoc($result_check));
echo "<script>\n".$script."</script>";
?>
0
 

Author Comment

by:MariusGM
ID: 19669142
That looks perfect. Although I'm getting an error:

Parse error: syntax error, unexpected '>' in X:\siteroot\job_detail.php on line 167

echo "<script>\n".$script."</script>";          <----------------
?>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19669164
Strange...

I am not a php programmer so perhaps try renaming the variable  from script to myScript or just


} while ($row_result_check = mysql_fetch_assoc($result_check));
?>
.
.
</table>

<script>
<? echo $script; ?>
</script>;

0
 

Author Comment

by:MariusGM
ID: 19669755
I've got the code to generate the page as desired. But a little problem has come up.

The script that needs to be generated by the PHP is:
var collaps[]=new animatedcollapse("testing[]", 800, true)

and this is the PHP code (amended)

<?php
    $script.= "\nvar collapse[".$cnt."]=new animatedcollapse(testing".$cnt.", 800, true)";
    $cnt++;
    } while ($row_result_check = mysql_fetch_assoc($result_check));
    echo "<script>".$script."</script>";
?>

How can I get the DIV ID in the script within the PHP to print with double qoutes ("). I'm sure the solution is simple, but its all a bit new to me. Thanks
0
 
LVL 4

Expert Comment

by:DrBrainiac
ID: 19669799
I dont know if I understand your question but if you need to use double-quotes in the $script string, you need to backslash them like \"

$script.= "\nvar collapse[".$cnt."]=new animatedcollapse(\"testing".$cnt."\", 800, true)";
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19669939
I missed a quote

I changed the double quotes to single quotes and lost a double quote at the end

$script.= "\ncollapse[".$cnt."]=new animatedcollapse('testing".$cnt."', 800, true);";
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19669955
i.e.,  the string
('testing".$cnt."',

is

('testing"
.$cnt.
"
',

single, double, double, single

and the script should be


collapse[4]=new animatedcollapse('testing4', 800, true)

for the 5th iteration without the var
0
 

Author Comment

by:MariusGM
ID: 19669977
Beauty!! After some playing around (Ihad to remove the square brackets - the JS didn't like it either). I got it. Thank you very much for your help and patience with me. Points well deserved. For everyone else here is the final code:

<?php
    $cnt=0;
    $script = "";
    do { ?>
<tr>
<td><div align="center"><a href="javascript:collapse<? echo $cnt; ?>.slideit()">SL<?php echo $row_result_check['sample_ID']; ?></a></div>
<div id="testing<? echo $cnt; ?>" style="width:400px; height:300px; margin-left:auto; margin-right:auto;" >
<div style="padding: 0 5px">
<iframe frameborder="0" width="400" height="300" src="inc_add_testing.php?job_ID=<?php echo $_GET['job_ID']; ?>&amp;sample_ID=<?php echo $row_result_check['sample_ID']; ?>&amp;sampleType_ID=<?php echo $row_result_check['sampleType_ID']; ?>"> </iframe>
</div>
 </div></td>
</tr>

<?php
$script.= "\nvar collapse".$cnt."=new animatedcollapse(\"testing".$cnt."\", 800, false)";
$cnt++;
} while ($row_result_check = mysql_fetch_assoc($result_check));
echo '<script type="text/javascript">'.$script.'</script>';
?>

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 19670012
oh Ok...

I wanted an array
<script>
var collapse = new Array();
.
.
<?


$script.= "\ncollapse[".$cnt."]=new animatedcollapse('testing".$cnt."', 800, false);";

and

<a href="#" onClick="collapse[<? echo $cnt; ?>].slideit(); return false">
0
 

Author Comment

by:MariusGM
ID: 19670195
Well we seem to have cracked it either which way. Many thanks indeed for all your help mplungjan.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to count occurrences of each item in an array.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question