Question

I am using a JavaScript function and some jQuery to perform two actions on a page. The first is a simple JS function to hide/show divs and change the active state of a tab:

This is the JS that show/hides divs and changes the active state on some tabs:

var ids=new Array('section1','section2','section3');

function switchid(id, el){  
    hideallids();
    showdiv(id);

    var li = el.parentNode.parentNode.childNodes[0];
    while (li) {
        if (!li.tagName || li.tagName.toLowerCase() != "li")
            li = li.nextSibling; // skip the text node
        if (li) {
          li.className = "";
          li = li.nextSibling;
        }
    }
    el.parentNode.className = "active";
}

function hideallids(){
    //loop through the array and hide each element by id
    for (var i=0;i<ids.length;i++){
        hidediv(ids[i]);
    }         
}

function hidediv(id) {
    //safe function to hide an element with a specified id
        document.getElementById(id).style.display = 'none';
}

function showdiv(id) {
    //safe function to show an element with a specified id        
        document.getElementById(id).style.display = 'block';
}

The html:

<ul>
<li class="active"><a onclick="switchid('section1', this);return false;">ONE</a></li>
<li><a onclick="switchid('section2', this);return false;">TWO</a></li>
<li><a onclick="switchid('section3', this);return false;">THREE</a></li>
</ul>

<div id="section1" style="display:block;">TEST</div>
<div id="section2" style="display:none;">TEST 2</div>
<div id="section3" style="display:none;">TEST 3</div>

Now the problem….

I’ve added the jQuery image gallery called galleria to one of the tabs. The gallery works great when it resides in the div that is intially set to display:block. However, when it is in one of the divs that is set to display: none; part of the gallery doesn’t work when the div is toggled to be visible. Specifically, the following css ceases to be written (this is created by galleria jQuery):

element.style  {
display:block;
height:50px;
margin-left:-17px;
width:auto;
}

For the life of me, I can’t figure out why the gallery fails when it’s div is set to display: none. Since this declaration is overwritten when a tab is clicked (via the Javascript functions above), why would this cause a problem? As I mentioned, it works perfectly when it lives the in display: block; div.

Any ideas? I don’t expect anybody to be familiar with the jQuery galleria image gallery… but perhaps an idea of how one might repair this problem?

Thanks!

Answer 1

If you are including jQuery then you can shorten your javascript to this:

$(function() {

var sections = $('#section1, #section2, #section3');
function switchid(id, el){  
    sections.hide();
    $('#'+id).show();
    $(this).addClass('active').closest('ul').find('li').removeClass('active');
}

});

I would also remove the inline styles that set display:none. Then you can in your javascript you can initialize galleria then hide your sections.

Something like:

$(function() {

$('#section2, #section3').hide();
$('#section2 .images').galleria();

var sections = $('#section1, #section2, #section3');
function switchid(id, el){  
    sections.hide();
    $('#'+id).show();
    $(this).addClass('active').closest('ul').find('li').removeClass('active');
}

});

I would even go further and change your html to be something like this:

<ul class="sectionlinks">
<li class="active"><a href="#section1">ONE</a></li>
<li><a href="#section2">TWO</a></li>
<li><a href="#section3">THREE</a></li>
</ul>

<div id="section1" class="section">TEST</div>
<div id="section2" class="section">TEST 2</div>
<div id="section3" class="section">TEST 3</div>

Then you javascript could just be:

$(function() {

$('#section2 .images').galleria();
$('#section2, #section3').hide();

var sections = $('.section');
$('.sectionlinks a').click(function(e){
    e.preventDefault();
    sections.hide();
    $($(this).attr('href')).show();
    $(this).closest('ul').find('li').removeClass('active');
    $(this).closest('li').addClass('active');
});

});

Working example: http://jsfiddle.net/cdaRu/2/