Jump to content

JS Div hiding and DHTML scroller combo woes


Gizmo

Recommended Posts

Hi all,

I was wondering if anyone might have any thoughts on this. I am trying to implement two things on one one my pages.

The first is this:
A DHTML scroller [a href=\"http://meddle.dzygn.com/eng/weblog/scroller.mod/\" target=\"_blank\"]http://meddle.dzygn.com/eng/weblog/scroller.mod/[/a]

The second is this:
Javascript/CSS method for hiding divs one on top of the other (can be with a tabbed interface) and when a user clicks a link the relevant div is made visible. Code:
[code]/*
This code is based on a code example from the article "Javascript navigation - cleaner, not meaner" by Christian Heilmann
URL: http://www.evolt.org/article/Javascript_navigation_cleaner_not_meaner/17/60273/index.html
*/

// If there is enough W3C DOM support for all our show/hide behavior:
// 1. Call the stylesheet that by default hides all toggleable sections
// 2. Apply the show/hide behavior by calling the initialization function
if (document.getElementById && document.getElementsByTagName && document.createTextNode) {
    document.write('<link rel="stylesheet" type="text/css" href="css/hide.css" />');
    window.onload = initShowHide;
}

function initShowHide() {
    // Hide all toggleable sections with JavaScript for the highly improbable case that CSS is disabled
    // Note that in this case the 'flash of visible content' still will occur
    // For testing purposes you can add the following code to disable CSS: document.getElementsByTagName('link')[0].disabled = true;
    hide();
    var toggle = document.getElementById('toggle');
    var as = toggle.getElementsByTagName('a');
    for (var i = 0; i < as.length; i++) {
        as[i].onclick = function() {
            show(this);
            return false;
        }
    }
}

function show(s) {
    hide();
    var id = s.href.match(/#(\w.+)/)[1];
    document.getElementById(id).style.display = 'block';
}

function hide() {
    var toggling = document.getElementById('toggling').getElementsByTagName('div');
    for (var i = 0; i < toggling.length; i++) {
        toggling[i].style.display = 'none';
    }
}[/code]

The problem is, I can get these two things to work seperately. I have the divs flicking on and off on one page, and the scroller working on a similar page (testing them both seperately). The problem is when the the two are combined. At the moment the toggable divs javascript file is included in the header. Then the scroller is initialised (also in the header). All the DIV content dissappears which is good. However, when i then click a link to make a div visible, it becomes visible but the scroller won't scroll the div. The div is a fixed height but I cannot access the content that would require the scroller to scroll down to reach it.

I'm thinking that somehow I need to call the scroller again once the div is made visible? But no idea how.

Does any of this make sense to anyone? I need to scroll the divs that are originally hidden once I have made them visible. Any thoughts?

cheers
;)
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.