JQuery woking in IE not FireFox and Google chrome

Discussion in 'jQuery' started by vishalonne, Aug 23, 2012.

0
  1. #1
    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-
    $(function(){
    $('#ul1 li a').on('click', function(e){
        e.preventDefault();
        var page_url=$(this).prop('href');
        $('#content').load(page_url);
    });
});
    Code (markup):
    <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>
    HTML:
    Above code load a testpage1.htm my testpage.htm code is 
    <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>
    HTML:
    and innerPage.css contain following style -

    #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
     
    vishalonne, Aug 23, 2012 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    I'd have to see what/where #content is, but I suspect that you're loading a HTML doc inside a HTML doc, which is not just invalid markup, it's likely confusing the bejebus out of the 'better' browsers.

    This REEKS of using "javascript for nothing" out of some sort of noodle-doodle paranoia about page loads... why not just load those as actual pages using *SHOCK* normal links. If you have minimalist markup with separation of presentation from content and actually leverage caching models, loading a sub-page should be a non-issue... especially since this would pretty much break normal forward/back navigation.

    Though... given the endless pointless classes and half assed markup for #nav, I suspect that's not being done either. Little tip -- do NOT bloat out your markup inlining static style, do NOT bloat out your markup with ID's on things that probably don't need ID's, and if every single element inside a parent that already has a ID or class on it is getting the exact same class (like say... .serviceli), NONE OF THEM need classes.

    In a lot of ways, EVERYTHING I've come to expect from throwing jquery at a problem.
     
    deathshadow, Aug 24, 2012 IP