javascript inside php echo

@TroubledandGreyJan 13.2009

I have hit a brick wall.

I have a simple javascript code for an image thumb with mouseover events and a js call on the link etc. which works fine.

document.write (‘<a href=”images/page_images/work/Barn4.jpg” onMouseOut=”MM_swapImage(‘mainimage’,”,’images/page_images/newbuilds-3images.jpg’, 1)” onMouseOver=”MM_swapImage(‘mainimage’,”,’images/page_images/work/Barn4_rollover.jpg’,1)” rel=”lytebox” rev=”scrolling: no;”‘><img src=”images/page_images/work/Barn4_thumb.jpg” width=”60px” height=” 60px” border=”0″></a>’);

The next stage is that these image thumbs are taken from a database so that they can be altered dynamically. I placed the javascript code in the php loop within an echo function which works perfectly fine.

echo “<script language=”javascript”>”;

echo “<a href=”images/page_images/work/” . $image . “” onMouseOut=”MM_swapImage(‘mainimage’,”,’images/page_images/newbuilds-3images.jpg’, 1)” onMouseOver=”MM_swapImage(‘mainimage’,”,’images/page_images/work/”. $image_rollover .”‘,1)” rel=”lytebox” rev=”scrolling: no;” info='<table width=”415″ border=”0″ cellpadding=”0″><tr><td width=”115″ align=”left” valign=”top”><img src=”images/page_images/work/” . $image_thumb . “”></td><td valign=”top”><p class=”worktitles”>” . $title . “<br></p><br><p class=”descriptiontext”>” . $description . “</p></td></tr></table>’><img src=”images/page_images/work/” . $image_thumb . “” width=”60″ height=”60″ border=”0″></a>”;

echo “</script>”;

The problem occurs when I try and set the width and height of the image thumb as a javascript variable. The reason it is a js variable is because it is based on a screen resolution capture.

The JS should in my mind be –

document.write (‘<a href=”images/page_images/work/Barn4.jpg” onMouseOut=”MM_swapImage(‘mainimage’,”,’images/page_images/newbuilds-3images.jpg’, 1)” onMouseOver=”MM_swapImage(‘mainimage’,”,’images/page_images/work/Barn4_rollover.jpg’,1)” rel=”lytebox” rev=”scrolling: no;”‘><img src=”images/page_images/work/Barn4_thumb.jpg” width=”‘+thumbImageWidth+’px” height=” ‘+thumbImageWidth+’px” border=”0″></a>’);

(this works btw)
and hence the final code within the php (I have split it into 3 echos to make life easier) should be –

echo “<script language=”javascript”>”;

echo “document.write (‘”;
echo “<a href=”images/page_images/work/” . $image . “” onMouseOut=”MM_swapImage(‘mainimage’,”,’images/page_images/newbuilds-3images.jpg’, 1)” onMouseOver=”MM_swapImage(‘mainimage’,”,’images/page_images/work/”. $image_rollover .”‘,1)” rel=”lytebox” rev=”scrolling: no;” info='<table width=”415″ border=”0″ cellpadding=”0″><tr><td width=”115″ align=”left” valign=”top”><img src=”images/page_images/work/” . $image_thumb . “”></td><td valign=”top”><p class=”worktitles”>” . $title . “<br></p><br><p class=”descriptiontext”>” . $description . “</p></td></tr></table>’><img src=”images/page_images/work/” . $image_thumb . “” width=””.$thumbImageWidthphp.”px” height=” “.$thumbImageWidthphp.”px” border=”0″></a>”;
echo “‘);”;

echo “</script>”;

This doesn’t work. What I get are the actual words

document.write (‘

printed on the screen, followed by the thumbnail that doesn’t have the width and height values of the javascript variable folowed by the characters

);

printed on the screen.

Thank you so much – I feel like my computer is beating me up at the moment!

And I’m a novice so please be gentle!

Best
Rob

to post a comment

PHP

8 Comments(s) _↴

@SyCoJan 14.2009 — #Can you repost using the [noparse][code=php][/code][/noparse] tags.

When debugging something like this, strip it down to the very smallest code to see if it work, then build it up again to find out what is breaking it.

@xjessie007Jan 14.2009 — #Does it make any difference when you put everything into just one echo?

Attach a print screen showing what gets displayed in your browser and also what you find in the code when you look at the html page source code.

Just a guess, the fact that

document.write ('

printed on the screen, followed by the thumbnail that doesn't have the width and height values of the javascript variable folowed by the characters

);

is on 3 lines could be the problem.

__________________
JavaScript document.write(): How to view the HTML?

@TroubledandGreyauthorFeb 01.2009 — #Can you repost using the [noparse][code=php][/code][/noparse] tags.

When debugging something like this, strip it down to the very smallest code to see if it work, then build it up again to find out what is breaking it.[/QUOTE]
SyCo - thanks for your response and apologies for the delay - I've been away and then got caught up on something else.

I have copied the code below (nb. this isn't the entire page as that would be too unwieldy, hence you will come across some seemingly unassigned javascript variables in some divs.)

You will see that this isn't the best written code in the world as I am new to all of this.

There is a repetition of the same bit of code 4 times. The reason for this is that I wanted to read the database and if there were 10 entries then it would display the 10 images in a right aligned pyramid. So one image <br> two images <br> three images <br> four images. What I haven't included in the code below is the four other duplications of all of this for when there is between 8 and 9 entries (this would generate 3 rows in a 2,3,4 format); between 5 and 7 entries (generating 2 rows in a 3,4 format) and finally 5 or less entries (generating 1 row of up to 5 images)

I am sure there is a better way of doing this - and I would gratefully accept a suggestion on how to write these conditional loops.

However this is a side note for me at the moment -as it isn't my immediate problem that I'd rather solve first before cleaning up my code.

The javascript variable for the problematic thumbImageWidth variable is -

thumbImageWidth = screen.width * 0.05;

The code is ----

______________________________

<?php

include 'config.php';

include 'opendb.php';

$query="SELECT * FROM $table WHERE newbuild='true'";

$result=mysql_query($query);

$num=mysql_numrows($result);

mysql_close();

$holdingimage = "newbuilds-3images";

$i = 0;

if ($num > 10) {

$num = 10;

}

if ($num > 9 && $num < 11) {

echo "<script language="javascript">";

echo "document.write ('<div id="imagethumbs" style="top: '+imagethumbsV4Position+'px;>');";

echo "//--></script>";

$loop = 1;

while ($i < $loop) {

$id=mysql_result($result,$i,"id");

$title=mysql_result($result,$i,"title");

$description= mysql_result($result,$i,"description");

$image=mysql_result($result,$i,"image") . ".jpg";

$image_thumb=mysql_result($result,$i,"image") . "_thumb.jpg";

$image_rollover=mysql_result($result,$i,"image") . "_rollover.jpg";

$link=mysql_result($result,$i,"link");

$architect_check= mysql_result($result,$i,"architect");

if (!empty ($architect_check)) {$architect="Architect: " . mysql_result($result,$i,"architect"); } else $architect =mysql_result($result,$i,"architect");

$imagelink = "images/page_images/work/" . $image;

list($width, $height, $type, $attr) = getimagesize($imagelink);

$height = $height + 35;

if ($width < 300) {

$width = 300;

}

$width = $width + 120;

echo "<script language="javascript">document.write ('<a href="images/page_images/work/" . $image . "" onMouseOut="MM_swapImage('mainimage','','images/page_images/".$holdingimage.".jpg', 1)" onMouseOver="MM_swapImage('mainimage','','images/page_images/work/". $image_rollover ."',1)" rel="lyteframe" rev="width: ".$width."px; height: ".$height."px; scrolling: no;" info='<table width="340" border="0" cellpadding="0"><tr><td width="80" align="left" valign="top"><img src="images/page_images/work/" . $image_thumb . ""></td><td valign="top"><p class="worktitles">" . $title . "<br></p><br><p class="descriptiontext">" . $description . "</p><p class="architecttext">". $architect . "</p><p class="linkfont"><a href="http://" . $link . "" target="_blank" class="linkfont">" . $link . "</a></p></td></tr></table>'><img src="images/page_images/work/" . $image_thumb . "" width="'+thumbImageWidth+'px" height="'+thumbImageWidth+'px" border="0"></a>'); </script>";

echo " ";

$i++;

}

echo "<br>";

$loop = 3;

while ($i < $loop) {

$id=mysql_result($result,$i,"id");

$title=mysql_result($result,$i,"title");

$description= mysql_result($result,$i,"description");

$image=mysql_result($result,$i,"image") . ".jpg";

$image_thumb=mysql_result($result,$i,"image") . "_thumb.jpg";

$image_rollover=mysql_result($result,$i,"image") . "_rollover.jpg";

$link=mysql_result($result,$i,"link");

$architect_check= mysql_result($result,$i,"architect");

if (!empty ($architect_check)) {$architect="Architect: " . mysql_result($result,$i,"architect"); } else $architect =mysql_result($result,$i,"architect");

$imagelink = "images/page_images/work/" . $image;

list($width, $height, $type, $attr) = getimagesize($imagelink);

$height = $height + 35;

if ($width < 300) {

$width = 300;

}

$width = $width + 120;

echo "<script language="javascript">document.write ('<a href="images/page_images/work/" . $image . "" onMouseOut="MM_swapImage('mainimage','','images/page_images/".$holdingimage.".jpg', 1)" onMouseOver="MM_swapImage('mainimage','','images/page_images/work/". $image_rollover ."',1)" rel="lyteframe" rev="width: ".$width."px; height: ".$height."px; scrolling: no;" info='<table width="340" border="0" cellpadding="0"><tr><td width="80" align="left" valign="top"><img src="images/page_images/work/" . $image_thumb . ""></td><td valign="top"><p class="worktitles">" . $title . "<br></p><br><p class="descriptiontext">" . $description . "</p><p class="architecttext">". $architect . "</p><p class="linkfont"><a href="http://" . $link . "" target="_blank" class="linkfont">" . $link . "</a></p></td></tr></table>'><img src="images/page_images/work/" . $image_thumb . "" width="'+thumbImageWidth+'px" height="'+thumbImageWidth+'px" border="0"></a>'); </script>";

echo " ";

$i++;

}

echo "<br>";

$loop = 6;

while ($i < $loop) {

$id=mysql_result($result,$i,"id");

$title=mysql_result($result,$i,"title");

$description= mysql_result($result,$i,"description");

$image=mysql_result($result,$i,"image") . ".jpg";

$image_thumb=mysql_result($result,$i,"image") . "_thumb.jpg";

$image_rollover=mysql_result($result,$i,"image") . "_rollover.jpg";

$link=mysql_result($result,$i,"link");

$architect_check= mysql_result($result,$i,"architect");

if (!empty ($architect_check)) {$architect="Architect: " . mysql_result($result,$i,"architect"); } else $architect =mysql_result($result,$i,"architect");

$imagelink = "images/page_images/work/" . $image;

list($width, $height, $type, $attr) = getimagesize($imagelink);

$height = $height + 35;

if ($width < 300) {

$width = 300;

}

$width = $width + 120;

echo "<script language="javascript">document.write ('<a href="images/page_images/work/" . $image . "" onMouseOut="MM_swapImage('mainimage','','images/page_images/".$holdingimage.".jpg', 1)" onMouseOver="MM_swapImage('mainimage','','images/page_images/work/". $image_rollover ."',1)" rel="lyteframe" rev="width: ".$width."px; height: ".$height."px; scrolling: no;" info='<table width="340" border="0" cellpadding="0"><tr><td width="80" align="left" valign="top"><img src="images/page_images/work/" . $image_thumb . ""></td><td valign="top"><p class="worktitles">" . $title . "<br></p><br><p class="descriptiontext">" . $description . "</p><p class="architecttext">". $architect . "</p><p class="linkfont"><a href="http://" . $link . "" target="_blank" class="linkfont">" . $link . "</a></p></td></tr></table>'><img src="images/page_images/work/" . $image_thumb . "" width="'+thumbImageWidth+'px" height="'+thumbImageWidth+'px" border="0"></a>'); </script>";

echo " ";

$i++;

}

echo "<br>";

$loop = 10;

while ($i < $loop) {

$id=mysql_result($result,$i,"id");

$title=mysql_result($result,$i,"title");

$description= mysql_result($result,$i,"description");

$image=mysql_result($result,$i,"image") . ".jpg";

$image_thumb=mysql_result($result,$i,"image") . "_thumb.jpg";

$image_rollover=mysql_result($result,$i,"image") . "_rollover.jpg";

$link=mysql_result($result,$i,"link");

$architect_check= mysql_result($result,$i,"architect");

if (!empty ($architect_check)) {$architect="Architect: " . mysql_result($result,$i,"architect"); } else $architect =mysql_result($result,$i,"architect");

$imagelink = "images/page_images/work/" . $image;

list($width, $height, $type, $attr) = getimagesize($imagelink);

$height = $height + 35;

if ($width < 300) {

$width = 300;

}

$width = $width + 120;

echo "<script language="javascript">document.write ('<a href="images/page_images/work/" . $image . "" onMouseOut="MM_swapImage('mainimage','','images/page_images/".$holdingimage.".jpg', 1)" onMouseOver="MM_swapImage('mainimage','','images/page_images/work/". $image_rollover ."',1)" rel="lyteframe" rev="width: ".$width."px; height: ".$height."px; scrolling: no;" info='<table width="340" border="0" cellpadding="0"><tr><td width="80" align="left" valign="top"><img src="images/page_images/work/" . $image_thumb . ""></td><td valign="top"><p class="worktitles">" . $title . "<br></p><br><p class="descriptiontext">" . $description . "</p><p class="architecttext">". $architect . "</p><p class="linkfont"><a href="http://" . $link . "" target="_blank" class="linkfont">" . $link . "</a></p></td></tr></table>'><img src="images/page_images/work/" . $image_thumb . "" width="'+thumbImageWidth+'px" height="'+thumbImageWidth+'px" border="0"></a>'); </script>";

echo " ";

$i++;

}

}

?>

@TroubledandGreyauthorFeb 01.2009 — #Does it make any difference when you put everything into just one echo?

Attach a print screen showing what gets displayed in your browser and also what you find in the code when you look at the html page source code.

Just a guess, the fact that

document.write ('

printed on the screen, followed by the thumbnail that doesn't have the width and height values of the javascript variable folowed by the characters

);

is on 3 lines could be the problem.

__________________
JavaScript document.write(): How to view the HTML?[/QUOTE]

XJessie007 - thanks for your response and apologies for the delay - I've been away and then got caught up on something else.

1. The code - document.write ('

printed on the screen, followed by the thumbnail that doesn't have the width and height values of the javascript variable folowed by the characters

);

does not go over three lines - my apologies, I split it into 3 lines to make my posting text less dense. It is all on one line as you will see from the attached screengrab.

I have attached a screengrab and you will see the problematic code in my other posting. There is a difference between my posted code and the online code from which I took this screengrab. For the purposes of this problem, just look at the top most thumbnail image.

I have also attached the source code for the screengrab. This contains a great deal of terrible coding and irrelevant sections of the site and is also the result of php includes etc. you would do better looking at the copied code in my above posting but i have included it below for completeness...

Thank you very much

@BigDoggy59Feb 01.2009 — #Quick answer: End the PHP block before the <script> block, re-open it afterward. Eliminate all of the echo and back-slashed quote marks. Because you are still within the curly braces, PHP will still treat the code as being within the if statement.

@TroubledandGreyauthorFeb 07.2009 — #Quick answer: End the PHP block before the <script> block, re-open it afterward. Eliminate all of the echo and back-slashed quote marks. Because you are still within the curly braces, PHP will still treat the code as being within the if statement.[/QUOTE]
BigDoggy59 - thank you very much for your help. I have tried as you said, but I think that I have made a mistake somewhere along the line - I have copied below my changes to one of the repetitious loops as per your suggestion - what am I getting wrong?

Thanks again!

Rob

while ($i < $loop) {

$id=mysql_result($result,$i,"id");

$title=mysql_result($result,$i,"title");

$description= mysql_result($result,$i,"description");

$image=mysql_result($result,$i,"image") . ".jpg";

$image_thumb=mysql_result($result,$i,"image") . "_thumb.jpg";

$image_rollover=mysql_result($result,$i,"image") . "_rollover.jpg";

$link=mysql_result($result,$i,"link");

$architect_check= mysql_result($result,$i,"architect");

if (!empty ($architect_check)) {$architect="Architect: " . mysql_result($result,$i,"architect"); } else $architect =mysql_result($result,$i,"architect");

$imagelink = "images/page_images/work/" . $image;

list($width, $height, $type, $attr) = getimagesize($imagelink);

$height = $height + 35;

if ($width < 300) {

$width = 300;

}

$width = $width + 120;

?>

<script language="JavaScript">

<?php

echo " ";

$i++;

}

echo "<br>";

$loop = 3;

@chestertbFeb 09.2009 — #Now that your document.write function is outside the php, you need to handle the php variables differently.

Instead of ...something".$variable."something...

you need ...something<?php echo $variable ?>something...

Your quotes might also be out of sequence, with some escaped and others not. I had difficulty following the statement so I'd try putting it into a variable like this...

var xx = "<a href="images...etc

document.write(xx);

It just removes one layer of complexity.

Hope that helps.

CTB

@NogDogFeb 09.2009 — #On a side note, may I introduce some of you to this forum's handy-dandy [url=http://www.webdeveloper.com/forum/misc.php?do=bbcode#php]PHP[/url] and [url=http://www.webdeveloper.com/forum/misc.php?do=bbcode#code]CODE[/url] bbcode tags?

Also in #PHP _↴

calling function within html echo UTF8 & Non breaking spaces I need some help...

Success!

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

Tweet This

javascript inside php echo

8 Comments(s) _↴

Also in #PHP _↴

Success!

Social

Version

javascript inside php echo

8 Comments(s) ↴

Also in #PHP ↴

Success!

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

Social

Version

8 Comments(s) _↴

Also in #PHP _↴