The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> toggle images between + and - ?
vin_akleh
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
vin_akleh
post Aug 14 2010, 06:56 PM
Post #3


Novice
**

Group: Members
Posts: 20
Joined: 10-February 09
Member No.: 7,769
QUOTE(pandy @ Aug 15 2010, 02:52 AM) *

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.

that part of the code works fine the problem is in the toggleImage function
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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... wink.gif

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. unsure.gif
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
vin_akleh
post Aug 15 2010, 07:26 AM
Post #5


Novice
**

Group: Members
Posts: 20
Joined: 10-February 09
Member No.: 7,769
anyone can help??
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 15 2010, 10:13 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
QUOTE(vin_akleh @ Aug 15 2010, 01:56 AM) *

that part of the code works fine the problem is in the toggleImage function


You are right. I was confused as usual. Sorry. blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 15 2010, 12:48 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,650
Joined: 10-August 06
Member No.: 7
QUOTE(vin_akleh @ Aug 15 2010, 02:26 PM) *

anyone can help??

Don't my suggestions help? They worked on my test page... mellow.gif
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
vin_akleh
post Aug 15 2010, 05:51 PM
Post #9


Novice
**

Group: Members
Posts: 20
Joined: 10-February 09
Member No.: 7,769
QUOTE(Christian J @ Aug 15 2010, 02:59 PM) *

It's easier to follow the JS if there's no PHP mixed in... wink.gif

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. unsure.gif

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 15 2010, 07:22 PM
Post #10


.
********

Group: WDG Moderators
Posts: 9,650
Joined: 10-August 06
Member No.: 7
QUOTE(vin_akleh @ Aug 16 2010, 12:51 AM) *

i managed to make the code work only for 1 but not 3 records from the database
that is my problem

That's probably since every image uses the same ID. You need to create the ID value with PHP too, like

CODE
id="changeImage<?php echo $count; ?>"

User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
vin_akleh
post 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???
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
vin_akleh
post Aug 16 2010, 07:49 PM
Post #13


Novice
**

Group: Members
Posts: 20
Joined: 10-February 09
Member No.: 7,769
QUOTE(Darin McGrew @ Aug 16 2010, 09:52 PM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
vin_akleh
post Aug 17 2010, 05:48 PM
Post #14


Novice
**

Group: Members
Posts: 20
Joined: 10-February 09
Member No.: 7,769
anyone???? excl.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 18th April 2024 - 03:56 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC