Running javascript to amend css

Question

I have the following code which works fine on the jsfiddle environment. However I can't get it to run outside of it. Im relatively new to javascript so not sure. Do I need to declare the javascript as a function and have it run on page load? The CSS and JS files will ideally be external files if that makes any difference once they've been referenced in the head part of my html.

<html>  
   <head>
    <style>
    .container {
        width: 100%;
        height: 150px;
        background : #bbb;


    }
    .inner {
        float:left;
        height:100%;
        margin-left:20px;
    }
    </style>
    <script>    

    var containerW = $('.container').width();
    var innerCount = $('.container .inner').length;
    var containerM = parseInt($('.container .inner').css("margin-left"));

    $('.inner').css({
        width:  (containerW  / innerCount) - containerM  
    })   

    </script>

</head>
 <body>
    <div class='container'>
        <div class='inner' style='background : #FF0000;'></div>
        <div class='inner' style='background : #00FF00;'></div>
        <div class='inner' style='background : #FF0000;'></div>
        <div class='inner' style='background : #00FF00;'></div>
    </div>
  </body>    
</html>

DEMO

(My code is slightly different to the fiddle but the princple is the same I cant get it to work.

Thanks

score 3 · Answer 1 · edited May 23 '17 at 10:33

You need to encapsulate your jQuery within document ready:

$( document ).ready(function() {
  var containerW = $('.container').width();
  var innerCount = $('.container .inner').length;
  var containerM = parseInt($('.container .inner').css("margin-left"));

  $('.inner').css({
      width:  (containerW  / innerCount) - containerM  
  })
});

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

You can also use the window onload function, see here for more info

The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.

^{Source: this answer, coursesy of Guffa}

Thanks. Should that just run in its current format if I place it either my external JS file or the head of the page? Or do I need to call it or something? — Sean, Aug 08 '14 at 09:59
Hmmmm, it doesnt seem to be working. I've just replaced the script in my originally posted code with the amended version but not having any luck. — Sean, Aug 08 '14 at 10:02

score 0 · Answer 2 · answered Aug 08 '14 at 10:19

0

you can always use 'show' feature of jsfiddle.com to see your code, example:

jsfiddle show

to see the code generated by jsfiddle just right click and see the source code, in your case it's as follows:

view-source:http://jsfiddle.net/yaLMk/4/show/

$(window).load(function(){
var containerW = $('.container').width();
var innerCount = $('.container .inner').length;

$('.inner').css({
    width: containerW / innerCount
})
});

answered Aug 08 '14 at 10:19

learner420

190
1
6
21

Thanks thats a useful tip. However strangely even when I copy and paste the entire source code from jsfiddle mine renders differently in the same browser as to what it does on jsfiddle. – Sean Aug 08 '14 at 10:30
@Sean you are right, "show" feature is to see the html code with the jsscript you have written. If you just copy that html and paste it in a file and will run it as html, from where it will fetch it's dependencies? One thing you can do is, save the whole page by using 'ctrl+s' and all the files on which your html depends will be downloaded automatically, now run that html. Your html will run fine. – learner420 Aug 12 '14 at 05:58

Running javascript to amend css

DEMO

2 Answers2