Results 1 to 4 of 4

Thread: Switch Content Script Question

  1. #1
    Join Date
    Sep 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Switch Content Script Question

    Does anyone know a way to change this script to have seperate functions for expanding and contracting content? I'm very new to JS so I don't know how to change this on my own.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    To what end? Please explain what you are trying to do more thoroughly.

    Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.
    PLEASE: Include the URL to your problematic webpage that you want help with.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I *hope* this bumps the thread, haven't checked it in a few weeks...

    What I'm looking for is a simple (hopefully) modification--or new script--that could create seperate functions to hide and unhide a <div>.

    Presently, the script has one function, expandcontent, that either hides or shows the content. This is fine for simple use, however, when trying to make a form that's cross-browser compatable, it's not adequate.

    How I have it set up now is a user has a choice of two radio buttons. The first is "email" the second is "address". The default selected choice is "email". If a user clicks on "address", it hides the email form, and shows the address form. The problem is that to support all browsers, I have to use the onClick= function in javascript. This is obviously the worst choice, because if a user clicks, for example, "address" twice, it shows the email form with the address radio box selected.

    I have to use radio boxes or a drop down select form for this, because that determines where in my database items are written. It also is used for error checking.

    So what I'd like is to be able to have one radio box be onClick="javascript:expand('<div id>'); collapse('<other div id>')", and the other be onClick="javascript:expand('<other div id>'); collapse('<div id>'). This way if a user clicks on the same radio box twice, the correct form is still being shown.

    I would also be able to use this for the "Reset Form" button, because as it is, resetting a form does not correctly switch to the appropriate form field, though it does change radio box selection.

    I hope this makes sense.

    EDIT:

    http://www.dynamicdrive.com/dynamici...tchcontent.htm is a link to the script.

    I can't show the page i'm having problems on because it's on my laptops webserver--not connected to the net, just networked to my pc.
    Last edited by Nanopy; 02-26-2006 at 07:33 AM.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    After looking at your page, I finally see what you are talking about. There is a slight problem with your markup. Even though it seems to create no problems, using an id of '1' and another of '2' for the two content divisions is not according to spec. Element id's should begin with letters, not numbers. So, I changed the 'Hard Copy' division's id to 'hc' and the 'Email's to 'em'. You will need to do the same, for the below modifications to work with your markup. Now, to get the effect you are after, first change this configuration in the script to yes, as shown below (it is near the top of the script):

    Code:
    var collapseprevious="yes" //Collapse previously open content when opening present? (yes/no)
    Next, use these for your onclick events of the radio buttons:

    HTML Code:
    <input tabindex="11" type="radio" name="hs" value="hard" onclick="if (document.getElementById('hc').style.display=='none')expandcontent('hc');"> Hard Copy <input checked tabindex="3" type="radio" name="hs" value="email" onclick="if (document.getElementById('em').style.display=='none')expandcontent('em');"> Email
    Remember to change the corresponding id's in the divisions below that ('1' becomes 'em' and '2' becomes 'hc') and you will be all set.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •