Javascript returning element with different styling?

Question

I have a script that hides an element and its content and loads another element and its content on click. The strange thing is, it seems to pile up the 1px border and returns the second element with a 2px border, while showing it still has 1.

This is the link code:

<li ><a href="plumbing.php">Plumbing</a></li>

This is the element in question:

     <div id="box1">
        <ul class="tabs">
            <li><a href="#" class="defaulttab" rel="tabs1">Tab #1</a></li>
            <li><a href="#" rel="tabs2">Tab #2</a></li>
            <li><a href="#" rel="tabs3">Tab #3</a></li>
        </ul>

        <div class="tab-content" id="tabs1">Tab #1 content</div>
        <div class="tab-content" id="tabs2">Tab #2 content</div>
        <div class="tab-content" id="tabs3">Tab #3 content</div>
    </div>

Element that on the page that gets loaded is identical with the exception of having only 1 tab and 1 tab content (for the purpose of testing).

Style:

#box1{width:700px;height:100%;float:left;background:url(../images/box1bg_03.gif);background-repeat:repeat-x;border: 1px solid #d0ccc9;}

Javascript:

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('.navcontent li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #box1';
            $('#box1').load(toLoad)
        }                                           
    });

    $('.navcontent li a').click(function(){

        var toLoad = $(this).attr('href')+' #box1';
        $('#box1').hide('fast',loadContent);
        $('#load').remove();
        $('#box1').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#box1').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#box1').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });

});

In theory, everything works perfectly except the border - https://i.sstatic.net/qz7yk.jpg. Very annoying.

Tracy Fu · Accepted Answer · 2012-06-26 22:31:06Z

1

jQuery load inserts content into the specified container. So my guess is even though you're replacing the content in #box1 with the same 'element', you're just filling the inside of #box1 with the new content. You're not actually replacing the border on #box1 which is causing it to double-up.

Idk if my explanation makes sense. Basically you're putting #box1 in #box1 but both box borders are still visible. I would try moving the border to a wrapper element. I hope this helps.

answered Jun 26, 2012 at 22:31

Tracy Fu

1,66212 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

styke Over a year ago

Made perfect sense, thanks. I just wrapped the contents of #box1 into another div, called #box1content, and while that didn't create a fancy animation for the whole element the content acted as required. It seems alot of positioning and JQuery problems can be solved with wrapping up in extra divs.

Tracy Fu Over a year ago

Lol. Agreed. Good luck with your project.

styke · Accepted Answer · 2012-06-26 23:08:33Z

Fixed by making a few alterations:

    <div id="box1">
        <div id="box1content"> //wrap up in extra div
            <ul class="tabs">
                <li><a href="#" class="defaulttab" rel="tabs1">Tab #1</a></li>
                <li><a href="#" rel="tabs2">Tab #2</a></li>
                <li><a href="#" rel="tabs3">Tab #3</a></li>
            </ul>

            <div class="tab-content" id="tabs1">Tab #1 content</div>
            <div class="tab-content" id="tabs2">Tab #2 content</div>
            <div class="tab-content" id="tabs3">Tab #3 content</div>
        </div>
    </div>

Make corresponding fixes to code:

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('.navcontent li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #box1content';//change to fixed div
            $('#box1content').load(toLoad)//change to fixed div
        }                                           
    });

    $('.navcontent li a').click(function(){

        var toLoad = $(this).attr('href')+' #box1content';//change to fixed div
        $('#box1content').hide('fast',loadContent);//change to fixed div
        $('#load').remove();
        $('#box1content').append('<span id="load">LOADING...</span>');//change to fixed div
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#box1content').load(toLoad,'',showNewContent())//change to fixed div
        }
        function showNewContent() {
            $('#box1content').show('normal',hideLoader());//change to fixed div
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });

});

The end result is that the animation is a little different, with only the text being fading in and out, but it does the job.

Collectives™ on Stack Overflow

Javascript returning element with different styling?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related