0

with reference to the topic here

I'm using this template here to build my site //link

on the right there is a javascript which shows the different list items

I'm trying to create two lists. The user can click on a link at the top and choose the list he wants to see.

The code is something like this

<div id="right-column">

<a href="#" onclick="toggleVisibility('x');">X</a>

<a href="#" onclick="toggleVisibility('Y');">Y</a>

<div id="x" class="section">
<ul id="portfolio">
<li>...</li>
<li>...</li>
</ul>
</div>

<div id="y" class="section" style="display:hide">
<ul id="portfolio">
<li>...</li>
<li>...</li>
</ul>
</div>

</div>

the jquery

$(document).ready(
                function(){
                    $('#news').innerfade({
                        animationtype: 'slide',
                        speed: 750,
                        timeout: 2000,
                        type: 'random',
                        containerheight: '1em'
                    });
                    
                    $('ul#portfolio').innerfade({
                        speed: 1000,
                        timeout: 5000,
                        type: 'sequence',
                        containerheight: '220px'
                    });
                    
                    $('.fade').innerfade({
                        speed: 1000,
                        timeout: 6000,
                        type: 'random_start',
                        containerheight: '1.5em'
                    });
                    
                    $('.adi').innerfade({
                        speed: 'slow',
                        timeout: 5000,
                        type: 'random',
                        containerheight: '150px'
                    });
            }); 

function toggleVisibility(newSection) {
    $(".section").not("#" + newSection).hide();
    $("#" + newSection).show();
}

the visibility code works fine..

my problems are:

1 the slider doesnt work for the second list

2 when I click on 'Y' to display the second list the text in the divs below get pushed down

please help..

Community
  • 1
  • 1
Jay
  • 3
  • 2
  • 1
    Your Title is not at all correct if you aren't having toggling visibility problems – DrCord Jan 17 '13 at 16:38
  • 1
    Show us your css. visibility removes items from page flow so that might be the reason for the css. Second, don't use js inline with your html, you can pull it out by using a the data attribute or class/id. – im_benton Jan 17 '13 at 16:46
  • 1
    Can you post a jsFiddle of the problem and explain what it should be doing? – Steve Greatrex Jan 17 '13 at 16:47
  • dr cord : I'm sry about the title.. couldn't put the problem I'm having in simple words – Jay Jan 17 '13 at 16:55
  • @im_benton css of the jq? – Jay Jan 17 '13 at 16:59
  • Hey Jay, I wanted to see the css of the page to see what was happening when you added visibility. Did you try changing the portfolio id? maybe id="portfolio1" and the other would be id="portfolio2". THen changing the jquery to be $('ul#portfolio1, ul#portfolio2 ').innerfade({ – im_benton Jan 17 '13 at 19:33

1 Answers1

1

The duplicate Id's on your lists will break js behavior:

<ul id="portfolio">

on each list will not work right, Id's need to be unique per page

DrCord
  • 3,917
  • 3
  • 34
  • 47
  • so what do you suggest that I do? (newbie here) – Jay Jan 17 '13 at 16:56
  • Change the Id's to be unique and any code that references them as well, if you need to use a non-unique identifier use a class instead – DrCord Jan 17 '13 at 16:57