SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery not working in FireFox, GoogleChrome

    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);
        });
    });
    HTML 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
    HTML 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 -

    #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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by vishalonne View Post
    My code is working in IE 8 but not working properly in FireFox and Google Chrome.
    If you're testing it as a local page, you are most likely coming across a security protection.

    Here's what I get when trying to click on the question papers when the page is loaded as a local web page in google chrome:
    XMLHttpRequest cannot load file:///C:/Users/Paul/Documents/sitepoint/testpage1.htm. Origin null is not allowed by Access-Control-Allow-Origin.

    When the page is accessed from a web server though, things seem to work properly.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •