External html page is not loading inside div on firefox

Question

I have a jquery script to load external html page inside a div. here is the demo http://mizan.im/testdrive/portfolio2/portfolio/ its working fine on chrome. But it's not working on firefox.

Can anyone tell me why it's not working on firefox??

Code:

<div class="container">
    <h1>Portoflio</h1>

    <img id="loader" src="images/loader.gif">

    <div id="portofolio-list" class="row">
        <div class="col-md-3">
            <a class="more" href="project1.html">
                <img src="images/image1.jpg" alt="">
            </a>
        </div>
        <div class="col-md-3">
             <a class="more" href="project2.html">
                <img src="images/image2.jpg" alt="">
            </a>
        </div>
        <div class="col-md-3">
             <a class="more" href="project3.html">
                <img src="images/image3.jpg" alt="">
            </a>
        </div>
        <div class="col-md-3">
             <a class="more" href="project1.html">
                <img src="images/image4.jpg" alt="">
            </a>
        </div>
        <div class="col-md-3">
            <a class="more" href="project2.html">
                <img src="images/image1.jpg" alt="">
            </a>
        </div>
        <div class="col-md-3">
             <a class="more" href="project3.html">
                <img src="images/image2.jpg" alt="">
            </a>
        </div>
        <div class="col-md-3">
             <a class="more" href="project1.html">
                <img src="images/image3.jpg" alt="">
            </a>
        </div>
        <div class="col-md-3">
             <a class="more" href="project2.html">
                <img src="images/image4.jpg" alt="">
            </a>
        </div>
    </div>

    <div id="ajax"></div>

    <a id="back-button" href="#">Back</a>
</div>

JS

jQuery(document).ready(function($) {
$('.more').on('click', function() {
    event.preventDefault();

    var href = $(this).attr('href') + ' .container',
        portofolioList = $('#portofolio-list'),
        content = $('#ajax');

    portofolioList.animate({'marginLeft':'-120%'},{duration:400,queue:false});
    portofolioList.fadeOut(400);
    setTimeout(function(){ $('#loader').show(); },400);
    setTimeout(function(){
        content.load(href, function() {
            $('#ajax meta').remove();
            $('#loader').hide();
            content.fadeIn(600);
            $('#back-button').fadeIn(600);
        });
    },800);

});

$('#back-button').on('click', function() {
    event.preventDefault();

    var portofolioList = $('#portofolio-list')
        content = $('#ajax');

    content.fadeOut(400);
    $('#back-button').fadeOut(400);
    setTimeout(function(){
        portofolioList.animate({'marginLeft':'0'},{duration:400,queue:false});
        portofolioList.fadeIn(600);
    },800);
});

});

I'm also trying from firefox 26.0. But its going the project page http://mizan.im/testdrive/portfolio2/portfolio/project1.html directly rather then loading it inside div on index.html — Mizanur Rahman, Feb 01 '14 at 11:00

Pranav C Balan · Accepted Answer · 2014-02-01T11:14:12.357

1

You are missing to add event object

$('.more').on('click', function(event) {
//................................^......
    event.preventDefault();

edited Feb 01 '14 at 11:14

answered Feb 01 '14 at 11:07

Pranav C Balan

113,687
23
165
188

yeah, i have noticed this too. The event was being bubbled up. – KarelG Feb 01 '14 at 11:09

score 1 · Answer 2 · answered Feb 01 '14 at 11:11

1

$('#back-button').on('click', function(event) {
    event.preventDefault();

just add event

answered Feb 01 '14 at 11:11

Lupus

1,519
3
21
38

Thanks for your answer! Pranav mentioned the issue in first reply reply. :) – Mizanur Rahman Feb 01 '14 at 11:20
nop. Here it can become like wild wild west when it comes to answering a question. :) – Lupus Feb 01 '14 at 11:25

External html page is not loading inside div on firefox

2 Answers2