SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Collapsable Banner = getStyleClass/display:none

    Hi,
    Working with a collapsable banner. I'm no programmer, html/css is about it. Well, I googled for the script and somehow managed to configure it to work in IE, but barely with Firefox. The error is probably on the buttons. Firefox obeys the first command in the string, and then quits. Can someone please take a peek, for some obvious error?
    I also need a cookie for this thing, if anyone is interested.

    The link: http://ezportal.org/test/index.html

    Thanks in advance,
    Myst

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    It's little hard to follow.. so I gave up and I'll offer another solution..
    Don't include such large inline javascript statement in your markup..
    <pre>
    <div id="banner_wrapper">
    <div id="collapsable">
    ... content
    </div>
    <div id="bottom-bar">
    <a onclick="toggle('collapsable');">Arrow button/image goes here</a>
    </div>
    </div>

    [javascript]

    function toggle(divID) {
    var oDiv = document.getElementById(divID);
    if (oDiv.style.display == "none")
    expand(divID);
    else
    collapse(divID);
    }

    function expand(divID) {

    var oDiv = document.getElementById(divID);
    oDiv.style.display = "block";
    }

    function collapse(divID) {

    var oDiv = document.getElementById(divID);
    oDiv.style.display = "none";
    }

    </pre>

    This seems to me the easiest way to create collapsable / expandable sections..

    Also create and opposing arrow image and change the src attribute of the image when you call toggle() to change the arrows direction..

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mark,
    Thank you so much. Maybe I should have removed the content before posting. Your example works fine in both browswers, but can you or anyone else please help me with the toggle, for the images?
    Here's a working link of Marks Version:

    http://ezportal.org/test2/index.html

    Many thanks in advance,
    myst

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I'll give you a hand but there's a huge benefit in making these things work for yourself with a guiding hand..

    When you use getElementBy..whatever it returns an object with variables that are the same names as the element attributes.. for e.g.

    If we were to get a reference to an image element somehow.. using a getElementBy.. method then we can change the attributes like this.

    imgElement.src = "new_src_image.jpg";
    So we can assign any HTML/XHTML attribute to an element by using:
    element.attribute = 'new attribute';

    You can also change any of the CSS attributes by using:
    element.style.attribute = 'new attribute';

    The naming of the style attributes are a little different though
    You replace the '-' word seperators with an uppercase first letter.
    e.g. font-size would become 'fontSize'
    border-bottom-color would become borderBottomColor etc.

    so one thing you could do is set an id attribute on the img tag and use getElementById() to get a reference, then change the src attribute. or you could use more tricky DOM walking techniques which would be an advantage if there were many of these sections used throughout your pages.

    Let me know how you go

    may the force be with you.

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Oh,

    And if you are not using it.. then download this moment Firefox and the extension FireBug for javascript debugging.. It will display errors and warnings as they happen in the browser and let you know where the problems rise.


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
  •