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

vishalonne · Aug 23, 2012

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 jscript, 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

Geates · Sep 4, 2012

a couple of things:

[blue]1) Your function needs to be executed when the document has completely loaded so the click event is "hooked" for the specific elements.[/blue]
[red]2) Your function needs to include [tt]return false;[/tt] to prevent the browser from executing the event after the hook has been executed. [/red]

Code:

[blue]$(document).ready(function(){[/blue]
    $('#ul1 li a').on('click', function(e){
        e.preventDefault();
        var page_url=$(this).prop('href');
        $('#content').load(page_url);
        [red]return false;[/red]
    });
[blue]});[/blue] 

-Geates

"I hope I can chill and see the change - stop the bleed inside and feel again.  Cut the chain of lies you've been feeding my veins; I've got nothing to say to you!"
-Infected Mushroom

"I do not offer answers, only considerations."
- Geates's Disclaimer

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

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

vishalonne

Technical User

Geates

Programmer

Similar threads

Part and Inventory Search

Sponsor