toggle images between + and - ? |
toggle images between + and - ? |
vin_akleh |
Aug 14 2010, 06:24 PM
Post
#1
|
Novice Group: Members Posts: 20 Joined: 10-February 09 Member No.: 7,769 |
i am having some problem
the image is stuck with expand.gif, not changing to collapse.gif anyone can help??! CODE <?php include"connection.php"; ?> <HTML DIR=RTL xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <script type="text/javascript"> function toggleMe(a){ var e=document.getElementById(a); if(!e)return true; if(e.style.display=="none"){ e.style.display="block" } else{ e.style.display="none" } return true; } function toggleImage(e) { obj = document.getElementById(e.id); //Gets the passed ID from 'toggleImage(this)' var filePathString = obj.src; //Puts the SRC of the input into string if(filePathString.indexOf("image/expand.gif")==true) //Checks to see if the file name is in the src { // var obj.src = new Image(); obj.src="images/collapse.gif"; //Sets picture to 'images/collapse.gif' return; } else { //var obj.src = new Image(); obj.src="images/expand.gif"; //Sets picture to 'images/expand.gif' return; } } </script> <?php $maxurl=mysql_query("select * from maktoba order by id desc limit 3"); $count=0; while($res=mysql_fetch_array($maxurl)) { ?> <img type="image" src="images/expand.gif" id="changeImage" onclick="return toggleMe('para<?php echo $count; ?>'), toggleImage(this)"><?php echo $res["maktoba_title"]; ?> <div id="para<?php echo $count; ?>"> <?php echo $res["maktoba"]; ?> </div> <br> <?php $count++; } ?> </html> |
pandy |
Aug 14 2010, 06:52 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Didn't read all. Stopped when I saw this.
CODE if(e.style.display=="none" Should be a single equal sign there. See if that helps to start with. |
vin_akleh |
Aug 14 2010, 06:56 PM
Post
#3
|
Novice Group: Members Posts: 20 Joined: 10-February 09 Member No.: 7,769 |
|
Christian J |
Aug 15 2010, 06:59 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
It's easier to follow the JS if there's no PHP mixed in...
CODE if(filePathString.indexOf("image/expand.gif")==true) //Checks to see if the file name is in the src That should be "images/expand.gif". Also indexOf returns an index number, not true/false (see http://www.quirksmode.org/js/strings.html#indexof ). Try this instead: CODE if(filePathString.indexOf("images/expand.gif")!=-1) (I also tried the following: CODE if(filePathString.indexOf("images/expand.gif")) but then the script only worked with the very first click. Maybe it simply tests if the method indexOf() exists, regardless of its value?) .................... Side-notes: There's no TYPE attribute for images, but you should provide ALT text if images can't be displayed. Can you separate function calls with a comma instead of semi-colon? I've never seen that before but it seems to work in my browsers. |
vin_akleh |
Aug 15 2010, 07:26 AM
Post
#5
|
Novice Group: Members Posts: 20 Joined: 10-February 09 Member No.: 7,769 |
anyone can help??
|
Darin McGrew |
Aug 15 2010, 09:38 AM
Post
#6
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Can you provide the URL (address) of a document that demonstrates the problem?
|
pandy |
Aug 15 2010, 10:13 AM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
|
Christian J |
Aug 15 2010, 12:48 PM
Post
#8
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
|
vin_akleh |
Aug 15 2010, 05:51 PM
Post
#9
|
Novice Group: Members Posts: 20 Joined: 10-February 09 Member No.: 7,769 |
It's easier to follow the JS if there's no PHP mixed in... CODE if(filePathString.indexOf("image/expand.gif")==true) //Checks to see if the file name is in the src That should be "images/expand.gif". Also indexOf returns an index number, not true/false (see http://www.quirksmode.org/js/strings.html#indexof ). Try this instead: CODE if(filePathString.indexOf("images/expand.gif")!=-1) (I also tried the following: CODE if(filePathString.indexOf("images/expand.gif")) but then the script only worked with the very first click. Maybe it simply tests if the method indexOf() exists, regardless of its value?) .................... Side-notes: There's no TYPE attribute for images, but you should provide ALT text if images can't be displayed. Can you separate function calls with a comma instead of semi-colon? I've never seen that before but it seems to work in my browsers. i tried both ==true and >1 before and the path is right and the images do exist i managed to make the code work only for 1 but not 3 records from the database that is my problem |
Christian J |
Aug 15 2010, 07:22 PM
Post
#10
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
|
vin_akleh |
Aug 16 2010, 11:21 AM
Post
#11
|
Novice Group: Members Posts: 20 Joined: 10-February 09 Member No.: 7,769 |
thanks guys for your help i did mange to make the code work fin using your help tips, any way i now need it start as collapsed not expanded
CODE <?php include"connection.php"; ?> <HTML DIR=RTL xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <script type="text/javascript"> function toggleMe(a){ var e=document.getElementById(a); if(!e)return true; if(e.style.display=="none"){ e.style.display="block" } else{ e.style.display="none" } return true; } function toggleImage(e) { obj = document.getElementById(e.id); //Gets the passed ID from 'toggleImage(this)' var filePathString = obj.src; //Puts the SRC of the input into string if(filePathString.indexOf("images/expand.gif")>1) //Checks to see if the file name is in the src { // var obj.src = new Image(); obj.src="images/collapse.gif"; //Sets picture to 'images/collapse.gif' return; } else { //var obj.src = new Image(); obj.src="images/expand.gif"; //Sets picture to 'images/expand.gif' return; } } </script> <?php $maxurl=mysql_query("select * from maktoba order by id desc limit 3"); $count=0; while($res=mysql_fetch_array($maxurl)) { ?> <img type="image" src="images/expand.gif" id="changeImage <?php echo $count; ?>" onclick="return toggleMe('para<?php echo $count; ?>'), toggleImage(this)"><?php echo $res["maktoba_title"]; ?> <div id="para<?php echo $count; ?>"> <?php echo $res["maktoba"]; ?> </div> <br> <?php $count++; } ?> </html> the images are ok and in place but the contents start as expanded i need it to start collapsed, i tried fiddling with the toggleme function code but didn't succeed, and suggestions??? |
Darin McGrew |
Aug 16 2010, 01:52 PM
Post
#12
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Since you use JavaScript to expand/collapse sections, you should use JavaScript to collapse the sections in the beginning. Can you show us your best effort at calling toggleMe() when the page loads?
|
vin_akleh |
Aug 16 2010, 07:49 PM
Post
#13
|
Novice Group: Members Posts: 20 Joined: 10-February 09 Member No.: 7,769 |
Since you use JavaScript to expand/collapse sections, you should use JavaScript to collapse the sections in the beginning. Can you show us your best effort at calling toggleMe() when the page loads? this is it CODE <img type="image" src="images/expand.gif" id="changeImage <?php echo $count; ?>" onclick="return toggleMe('para<?php echo $count; ?>'), toggleImage(this)" onload="toggleMe('para<?php echo $count; ?>') ><?php echo $res["maktoba_title"]; ?> did not work any idea why? This post has been edited by vin_akleh: Aug 16 2010, 07:52 PM |
vin_akleh |
Aug 17 2010, 05:48 PM
Post
#14
|
Novice Group: Members Posts: 20 Joined: 10-February 09 Member No.: 7,769 |
anyone????
|
Lo-Fi Version | Time is now: 18th April 2024 - 03:56 AM |