Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
|
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old September 9th, 2009, 09:48 AM
Registered User
 
Join Date: Jul 2008
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Unhappy Pass PHP variable to JavaScript function

I have some code that worked not bad, until I've added PHP to it. The problem may be with right around line 12 where I am trying to get the variable in the first place:

Code:
function expander(RecordID){

The other possibility is where the element ID is assigned:


Code:
echo "<img id='".$row['IDNumber']."' src=".$row['ImagePath']." width='5%' onMouseOver='expander(".$row['IDNumber'].");' onMouseOut='shrinker(".$row['IDNumber'].");'>";}

Using some cleverly placed alert boxes the only thing that is getting passed forward is "[object HTMLImageElement]" but not the element ID.

Shouldn't need AJAX because I am NOT trying to pass JavaScript variable to PHP. Rather, it is the other way around, which should be kosher.

Here is the code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="class.css" />
<script type = "text/javascript" language="javascript">
//<![CDATA[
var maxheight = 150;
 
var countShrink = 1;
function expander(RecordID){    
    alert(RecordID);
    var countGrow = 1;
        var pic = document.getElementById(RecordID);
        if(pic){
            var imageh = pic.height;
            var imagew = pic.width;
 
    if(imageh<100){
    countGrow++;
    imageh = imageh*1.2;
    imagew = imagew*1.2;
    pic.style.height = imageh + "px";
    pic.style.width = imagew + "px";
    var timer = window.setTimeout(function(){expander(RecordID);},2);}
    }
        else
            {alert("error on");}
 
 
}
 
function shrinker(RecordID){
            var pic = document.getElementById(RecordID);
        if(pic){var counter = 1
            var imageh = pic.height;
            var imagew = pic.width;
 
    if(imageh>20){
    imageh = imageh/1.2;
    imagew = imagew/1.2;
    pic.style.height = imageh + "px";
    pic.style.width = imagew + "px";
    var timer = window.setTimeout(function(){shrinker(RecordID);},3);}
    }
        else
            {alert("error off");}
 
    }
 
//]]>
</script>
</head>
<body>
<?php
include('menuSub.html');
require_once('connect.php');
$idnum = 'phmdv06tbu';
//$q="SELECT * FROM art WHERE IDNumber = '".$idnum."'";
$q="SELECT * FROM art ORDER BY IDNumber LIMIT 4";
$r = @mysqli_query ($dbc, $q);
 
echo "<div class='bodyContent'><div class='imageContent'>";
if($r){
    while ($row = mysqli_fetch_array($r,MYSQLI_ASSOC)){
echo "<img id='".$row['IDNumber']."' src=".$row['ImagePath']." width='5%' onMouseOver='expander(".$row['IDNumber'].");' onMouseOut='shrinker(".$row['IDNumber'].");'>";}
}
else{
echo '<div class="bodyContent"> Error<div>';
}
echo "</div></div>";
mysqli_close($dbc); ?>
</body>
</html>
 
Old September 9th, 2009, 11:02 AM
Registered User
 
Join Date: Jul 2008
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Also, here is the cut-and-paste as to what it looks like when viewed in the latest version of IE:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="class.css" />
<script type = "text/javascript" language="javascript"> 
//<![CDATA[
var maxheight = 150;
 
var countShrink = 1;
function expander(RecordID){ 
 alert(RecordID);
 var countGrow = 1;
  var pic = document.getElementById(RecordID);
  if(pic){
   var imageh = pic.height;
   var imagew = pic.width;
 
 if(imageh<100){
 countGrow++;
 imageh = imageh*1.2;
 imagew = imagew*1.2;
 pic.style.height = imageh + "px";
 pic.style.width = imagew + "px";
 var timer = window.setTimeout(function(){expander(RecordID);},2);}
 }
  else
   {alert("error on");}
 
 
}
 
function shrinker(RecordID){
   var pic = document.getElementById(RecordID);
  if(pic){var counter = 1
   var imageh = pic.height;
   var imagew = pic.width;
 
 if(imageh>20){
 imageh = imageh/1.2;
 imagew = imagew/1.2;
 pic.style.height = imageh + "px";
 pic.style.width = imagew + "px";
 var timer = window.setTimeout(function(){shrinker(RecordID);},3);}
 }
  else
   {alert("error off");}
 
 }
 
//]]>
</script>
</head>
<body>
 
<script type="text/javascript"> 
//<![CDATA[
window.onload=starter;
function starter(){
 collapseMenu();
// SetUpAnimation();
  }
 
function SetUpAnimation(){
 
 if (document.querySelectorAll)
  {
  labels = document.querySelectorAll('div.label');
   }
  else if (document.getElementsByClassName)
   {
  labels = document.getElementsByClassName('label');
  }
//loops through the labels
 if (labels){
    for (var i=1; i <= labels.length; i++)
     { 
      SlideIn(i);
     }
    }
}
 var endPos = 100;
 var currentPos = -150;
 var delayT = 1
 
function SlideIn(label_id_no){
 var label_id_fixed = label_id_no;
 
 var label_id_name = "label" + label_id_fixed;
 if (currentPos<endPos){
 currentPos +=1
 if (currentPos > 0) {delayT +=1;}
// Math.round(delayT)
  document.getElementById(label_id_name).style.left = currentPos + "px";
  var timer = window.setTimeout(function(){SlideIn(label_id_no);}, delayT);
  
  
}
 
//need this otherwise the little blocks are off each other by 1 pixel
if (currentPos==endPos){
  document.getElementById(label_id_name).style.left = currentPos + "px";
  
  }
}
 
function collapseMenu(){
 var elems = null;
 var labels = null;
 if (document.querySelectorAll)
  {
  elems = document.querySelectorAll('div.elements');
  labels = document.querySelectorAll('div.label');
}
  else if (document.getElementsByClassName)
   {   
  elems = document.getElementsByClassName('elements');
  labels = document.getElementsByClassName('label');
   }
if (elems){
    for (var i=0; i < elems.length; i++)
    {
    elems[i].style.display="none";
    }
   for (var i=0; i < labels.length; i++)
    {
   labels[i].onclick=showBlock;
    }
  }
}
 
function showBlock(evnt){
 var theEvent = evnt ? evnt : window.event;
 var theSrc = theEvent.target ? theEvent.target: theEvent.srcElement;
 var itemId = "elements" + theSrc.id.substr(5,1);
 var item = document.getElementById(itemId);
 if (item.style.display=='none'){
  item.style.display='block';
 }else{
  item.style.display='none';
 }
}
//]]>
</script>
</head>
<body><div class="label" id="label1">home</div>
<div class="label" id="label2">portfolios</div>
<div class="elements" id="elements2">
<p>metallic c-prints</p><br />
<p>product photography</p><br />
<p>faces<br />
</div>
<div class="label" id="label3">about me</div>
<div class="elements" id="elements3">
<p>biography</p><br />
<p>c.v.</p><br />
<p>contact</p><br />
</div>
</body>
<div class='bodyContent'><div class='imageContent'><img id='paaex05tad' src=images/ArcticDream.jpg width='5%' onMouseOver='expander(paaex05tad);' onMouseOut='shrinker(paaex05tad);'><img id='paanu02tpp' src=images/PortraitOfP.jpg width='5%' onMouseOver='expander(paanu02tpp);' onMouseOut='shrinker(paanu02tpp);'><img id='paapo00trb' src=images/RedBanting.jpg width='5%' onMouseOver='expander(paapo00trb);' onMouseOut='shrinker(paapo00trb);'><img id='paapo02tbb' src=images/BlueBanting.jpg width='5%' onMouseOver='expander(paapo02tbb);' onMouseOut='shrinker(paapo02tbb);'></div></div></body>
</html>
 
Old September 9th, 2009, 11:41 AM
Registered User
 
Join Date: Jul 2008
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Ok I got it fixed. The problem was it didn't like what I was doing with the brackets for the onMouseOver and onMouseOut events.
I added single quotation marks in the function brackets and voila all ok. I have to tweak what the JavaScript actually does, but at least this part is squared away.
Here is the code
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="class.css" />
<script type = "text/javascript" language="javascript">
//<![CDATA[
var maxheight = 150;
var countShrink = 1;
function expander(RecordID){ 
 var countGrow = 1;
  var pic = document.getElementById(RecordID);
  if(pic){
   var imageh = pic.height;
   var imagew = pic.width;
 if(imageh<100){
 countGrow++;
 imageh = imageh*1.2;
 imagew = imagew*1.2;
 pic.style.height = imageh + "px";
 pic.style.width = imagew + "px";
 var timer = window.setTimeout(function(){expander(RecordID);},2);}
 }
  else
   {alert("error on");}
 
}
function shrinker(RecordID){
   var pic = document.getElementById(RecordID);
  if(pic){var counter = 1
   var imageh = pic.height;
   var imagew = pic.width;
 if(imageh>20){
 imageh = imageh/1.2;
 imagew = imagew/1.2;
 pic.style.height = imageh + "px";
 pic.style.width = imagew + "px";
 var timer = window.setTimeout(function(){shrinker(RecordID);},3);}
 }
  else
   {alert("error off");}
 }
 
//]]>
</script>
</head>
<body>
<?php
include('menuSub.html');
require_once('connect.php');
$idnum = 'phmdv06tbu';
//$q="SELECT * FROM art WHERE IDNumber = '".$idnum."'";
$q="SELECT * FROM art ORDER BY IDNumber LIMIT 4";
$r = @mysqli_query ($dbc, $q);
echo "<div class='bodyContent'><div class='imageContent'>";
if($r){
 while ($row = mysqli_fetch_array($r,MYSQLI_ASSOC)){
?>
<img id= "<?=$row['IDNumber']?>" src="<?=$row['ImagePath']?>" width="5%" onMouseOver="expander('<?=$row['IDNumber']?>');" onMouseOut="shrinker('<?=$row['IDNumber']?>');">
<?php
 }
}
else{
echo '<div class="bodyContent"> Error<div>';
}
echo "</div></div>";
mysqli_close($dbc); ?>
</body>
</html>





Similar Threads
Thread Thread Starter Forum Replies Last Post
how to pass javascript variable to xsl eruditionist XSLT 4 September 8th, 2008 08:37 AM
How can I pass a variable from php to Javascrip aneesh_sunu@yahoo.co.in PHP How-To 2 May 17th, 2007 06:50 AM
How to pass javascript variable to server side Andraw Classic ASP Basics 17 January 22nd, 2007 01:05 PM
How To Pass Javascript variable to vbscript pbcatan Classic ASP Databases 1 December 18th, 2006 08:42 AM
pass variable into function and retaining value mikeuk Beginning PHP 3 August 4th, 2004 06:47 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.