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 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2007
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Page renders on JSFiddle but appears incorrect on my own site

    Hello,

    I have the following JSFiddle Edit fiddle - JSFiddle

    This is how it appears rendered full screen

    - jsFiddle demo

    I have went into the source of this page and just copy and pasted the code onto my local site. It does not render like the example on JSfiddle despite it being the exact same code.

    I'm perplexed as to why?

    Thanks

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,445
    Thanks
    23
    Thanked 630 Times in 629 Posts
    If it's working on fiddle, why give us the link to fiddle?
    If it's not working on your site, why not give us that link?
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Mar 2007
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Its a local site, on my local machine so I cannot give you a link. I posted the JSFiddle so you could see the code I was using.

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    You can still post the code from the local page.
    Then we can help you.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,445
    Thanks
    23
    Thanked 630 Times in 629 Posts
    This works for me. Your problem maybe in how you call jquery or where it is. Test this in your setup. It should work.
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    <style type="text/css">
    .container {
        width: 550px;
        height: 150px;
        background : #bbb;
    }
    .inner {
        float:left;
        height:100%;
        min-width:30px;
    }
    </style>
    </head>
    
    <body>
    <div class='container'>
        <div class='inner' style='background : #FF0000;'></div>
        <div class='inner' style='background : #00FF00;'></div>
        <div class='inner' style='background : #0000FF;'></div>
        <div class='inner' style='background : orange;'></div>
    </div>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
    var containerW = $('.container').width();
    var innerCount = $('.container .inner').length;
    
    $('.inner').css({
        width: containerW / innerCount
    })
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Tags for this Thread

    Posting Permissions

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