CODEWITHSUNDEEP
javascriptjqueryhtmliframefade
NoThisIsPatrick
NoThisIsPatrick

Reputation: 153

Iframe FadeOut/FadeIn

I am trying to make an iframe fade out then fade in but I can't seem to get the code right. I think I am pretty close but for some reason the code acts as if my jquery isn't there. Can someone identify where I went wrong?

HTML

    <body>
<center>
    <div class="headbackground">
        <h1 class="headfont1"> Kellen's Homepage</h1>

    <div id="menubar">
        <a id="menulink" href="homepage.html" target="iframe1"> Homepage </a>
        <a id="menulink" href="about.html" target="iframe1"> About Me </a>
        <a id="menulink" href="projects.html" target="iframe1"> Projects </a>
        <a id="menulink" href="resume.html" target="iframe1"> Resume </a>
    </div>
    </div>
</center>

<div id="iframediv">
    <iframe id="iframe1" name="iframe1" src="" frameborder="0"></iframe>
</div>

</body>

CSS

.headbackground {
    background-color:RGBa(0,0,0,.75);
    z-index:2;
    margin-top:0;
}

div#menubar {
    padding: 24px;
}

div#menubar > a {
    font:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:17px;
    background:#333;
    padding: 12px 24px;
    color: #999;
    margin-right: 10px;
    text-decoration:none;
    border-radius:3px;
    transition: background 0.3s linear 0s, color 0.3s linear 0s;
}

div#menubar > a:hover {
    background:#36F;
    color:#FFF;
    z-index:2;
}

#iframe1 {
    position: absolute;
    left: 0px;
    top: 215px;
    width: 100%;
    height: 100%;
    z-index:1;
}

body {
    background-image:url(images/ronaldo-elche-real-madrid-live-bale-isco-best-team-celebrating-goal.jpg);
    background-repeat:repeat-y;
    background-position:top center;
    background-attachment:fixed;
    background-size:cover;
    margin:0;
    overflow:scroll;
}

jQuery

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

$(document).ready(function () {
    $('div#menubar > a').click(function(){
        var iframeSrc = $(this).attr('href');
        $('#iframediv').fadeOut(1000,function(){
            $('#iframediv iframe').attr('src',iframeSrc);
            $('#iframediv').fadeIn(1000);
        });
        return false;
    });
});

</script>

Upvotes: 1

Views: 1422

Answers (1)

Kevin B
Kevin B

Reputation: 95022

that's because to the browser, your code isn't there. Your code needs to be in a separate script tag.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>

$(document).ready(function () {
    $('div#menubar > a').click(function(){
        var iframeSrc = $(this).attr('href');
        $('#iframediv').fadeOut(1000,function(){
            $('#iframediv iframe').attr('src',iframeSrc);
            $('#iframediv').fadeIn(1000);
        });
        return false;
    });
});

</script>

Upvotes: 1

Related Questions