Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    29
    Thanks
    5
    Thanked 0 Times in 0 Posts

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

    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

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    Last edited by AndrewGSW; 08-23-2012 at 10:43 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Also width and height apply to positioned elements.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

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