JQuery working properly in IE but not in FireFox and Google Chrome

vishalonne · 08-23-2012, 08:11 PM

My code is working in IE 8 but not working properly in FireFox and Google Chrome.
Actually by JQuery I am loading html page in div in same page this working properly in IE but in FF and in GC page opens but not in div it open like target_self type. Means my link page is overridden by the new page
Hi
I am try to load a html page using jquery, I am able to load html page successfully by a click on link, but problem is loaded page is not using style sheet.
Code jscript-

Code:

$(function(){
    $('#ul1 li a').on('click', function(e){
        e.preventDefault();
        var page_url=$(this).prop('href');
        $('#content').load(page_url);
    });
});

Code:

<div id="nav" class="image002-03">
        <span id="smalltext" 
            style="bottom: 0px; margin-bottom: 0px; padding-bottom: 0px; font-family: Calibri; font-size: large; text-align: center;">Service Menu</span>
        <ul id="ul1" class="serviceul">
            <li class="serviceli"><a href="testpage1.htm">Question Papers (unsolved)</a></li>
            <li class="serviceli"><a href="#">Question Papers (solved)</a></li>
            <li class="serviceli"><a href="#">Sample Papers</a></li>
            <li class="serviceli"><a href="testpage2.htm">Notes</a></li>
            <li class="serviceli"><a href="#">Solved Assignments</a></li>
            <li class="serviceli"><a href="#">Projects</a></li>
            <li class="serviceli"><a href="#">Presentations</a></li>
            <li class="serviceli"><a href="#">Uploads</a></li>
            <li class="serviceli"><a href="#">Forum</a></li>
        </ul>
</div>

Above code load a testpage1.htm my testpage.htm code is

Code:

<head>
    <title>cbse cs n ip</title>
    <link href="css/innerPage.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mainbody">
    <div id="bodytext">
        Question Papers (unsolved)
        </div>
        </div>
</body>

and innerPage.css contain following style -

Code:

#mainbody
{
    background-color: #FF3300;
    height: 434px;
    margin-top: 137px;
}
#bodytext
{
    font-size: large;
    font-weight: bold;
    width: 214px;
    color: #CC0099;
}

Above css is not working. Totally confused

AndrewGSW · 08-23-2012, 09:41 PM

I can't see your div with id of 'content', but presumably it is there somewhere.

From jQuery 1.6 prop() is intended to specifically return a property, so you should use attr() to return an attribute.

Code:

$(function () {
    $('#ul1 li a').on('click', function(e){
        e.preventDefault();
        var page_url=$(this).attr('href');
        $('#content').load(page_url);
        return false;
    });
});

on() was added in jQuery 1.7 so check the version that you are using.

preventDefault() should work, to prevent the default link being followed, but there is no harm in including 'return false' as well.

AndrewGSW · 08-23-2012, 09:42 PM

Also width and height apply to positioned elements.