SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict aniltc's Avatar
    Join Date
    Nov 2006
    Location
    INDIA
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy problem with toggle

    hi all

    I am having 5 links in my page when i click on each link a toggle will appaer and data will be displayed into it .it happens dynamically.I am using prototype and scriptaculous,php and mysql for that.My toggle works perfectly.The problem i am
    facing here when i first click on a link i am getting a toggle that is fine.when i click on another link another toggle will appear but the first links toggle still available there.Same these things happens for other links too.

    I want to do it like when i click on each link i need only one toggle at a time.

    How can i solve this
    plz help me

  2. #2
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can have a function that'll run through all toggles to hide them when a link is clicked, and show the toggle you want to show on that link...

  3. #3
    SitePoint Addict aniltc's Avatar
    Join Date
    Nov 2006
    Location
    INDIA
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can you explain more. i am sorry to say that i am not that much good in js

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    I don't know what your existing toggle code looks like, but there are a number of ways that it can be done.

    You can always chain the toggles together.

    Code HTML4Strict:
    <a onclick="
      toggleOn(this);
      toggleOff(document.getElementById('link2');
      toggleOff(document.getElementById('link3');
      toggleOff(document.getElementById('link4');
      toggleOff(document.getElementById('link5');">Link1</a>


    If the toggleOff() function can accept either an element or an id name, that makes things easier.

    Code HTML4Strict:
    <a onclick="
      toggleOn(this);
      toggleOff('link2');
      toggleOff('link3');
      toggleOff('link4');
      toggleOff('link5');">Link1</a>

    If the toggleOff() function can accept multiple parameters, you can do this:

    Code HTML4Strict:
    <a onclick="
      toggleOn(this);
      toggleOff(['link2', 'link3', 'link4', 'link5']);">Link1</a>

    And if you have a single toggle function that accepts an optional true or false to say whether to toggle on or off, you can do this:

    Code HTML4Strict:
    <a onclick="
      toggle(this);
      toggle(['link2', 'link3', 'link4', 'link5'], false);">Link1</a>

    Or even

    Code HTML4Strict:
    <a onclick="toggle(
      this,
      ['link2', 'link3', 'link4', 'link5'], false);">Link1</a>

    It all depends on how your toggle function has been built.

  5. #5
    SitePoint Addict aniltc's Avatar
    Join Date
    Nov 2006
    Location
    INDIA
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    my code is like this

    echo "<a href='#Max$i' onClick=\"ajax_request($i);ajax_hide($i);\" return false;>";

    above one is php part

    ajax part
    function ajax_request(data)
    {
    var URL='id.php?id='+data;
    var ajax = new Ajax.Request(URL,
    { method: 'get',onSuccess: function(display)
    {

    $('d'+ data).innerHTML=display.responseText;

    // Effect.BlindDown('ttt'+ data);
    Effect.toggle('ttt'+ data,'appear')

    } ,
    onFailure: function(error)
    {
    alert('errors in js');
    }


    });





    }


    I am using prototype

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by aniltc View Post
    I want to do it like when i click on each link i need only one toggle at a time.
    To clarify, when you click on a link, you want to hide the content of the other links, before the content for the clicked-on link appears.

    read(prototype, {type: sponge, method: absorb});

    Ok, that shouldn't be too hard.

    Separate the link id's into two groups, those you want to hide, and the one you want to appear.
    You will then have a toggle array that if you clicked on the second link, will look like [[1, 3, 4, 5], [2]]

    You want to hide the first set of array entries, and make the second entry appear.

    Code JavaScript:
    var toggle = $R(1, 5).partition(function(n) {
      // create [[hide], [appear]] arrays
      return (n != data);
    }).each(function(items, index) {
      if (index == 0) {
        items.each(function(n) {
          Effect.Fade('ttt' + n);
        });
      } else {
        items.each(function(n) {
          $('d'+ data).innerHTML=display.responseText;
          Effect.Appear('ttt' + data);
        });
      }
    });

    Is that sorta, kinda, something like what you're after?

  7. #7
    SitePoint Addict aniltc's Avatar
    Join Date
    Nov 2006
    Location
    INDIA
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks
    I have solved with other function like

    function ajax_hide()
    {
    var hiddval=$('v').value;

    $('ttt'+hiddval).hide();
    return false;
    }

    But i am facing another problem.Innerhtml is not working in IE 6 .What should i do

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Err, you could use Prototype to update the content?

    Code JavaScript:
    $('d'+ data).update(display.responseText);

  9. #9
    SitePoint Addict aniltc's Avatar
    Join Date
    Nov 2006
    Location
    INDIA
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no still its showing problem in IE

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    I was having trouble with it working on IE6 before, but the following appears to work with no trouble.

    Code JavaScript:
    function ajax_request(data) {
      var URL='id.php?id='+data;
      var ajax = new Ajax.Request(URL, {
        method: 'get',
        onSuccess: function(display) {
          $R(1, 5).partition(function(n) {
            return (n != data);
          }).each(function(items, index) {
            items.each(function(n) {
              if (index == 0) {
                Effect.Fade('ttt' + n);
              } else {
                $('d'+ data).update(display.responseText);
                Effect.Appear('ttt' + n);
              }
            });
          });
        },
        onFailure: function(error) {
          alert('errors in js');
        }
      });
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •