deldalton Posted December 4, 2014 Share Posted December 4, 2014 (edited) Hello, Once again, I seem to be having an issue with my Javascript. I'd be most grateful if I could have some pointers. Here's my Code Pen ... http://codepen.io/anon/pen/LEpvmL I'm trying to create an image scroller. The example lacks polish but it displays the concept: an initial image is loaded (which will be, in fact, a much wider image than it's container, which has it's overflow: hidden) and will scroll to the left to reveal the next part of the image after a given time frame. In the Code Pen, it works. When I try to put the same code into my html, css, and js files the js doesn't seem to work. The Dev tools in Chrome suggests that it cannot read property style of parseInt(slideEle.style.left); and I don't know why. All input is appreciated. Edited December 4, 2014 by deldalton Link to comment Share on other sites More sharing options...
Ingolme Posted December 4, 2014 Share Posted December 4, 2014 Is the Javascript at the bottom of your page? Scripts need to be run after the element you're targeting has been loaded. Link to comment Share on other sites More sharing options...
deldalton Posted December 4, 2014 Author Share Posted December 4, 2014 Is the Javascript at the bottom of your page? Scripts need to be run after the element you're targeting has been loaded. Hi Ingolme, Thanks for the post. This is what my opening body tag looks like ... <body onload='slideIt();'> ... which I have always thought meant that after everything in between the opening and closing body tags would load before launching the script, which should allow the script to target the specified/necessary element IDs. Is this not true? Link to comment Share on other sites More sharing options...
deldalton Posted December 4, 2014 Author Share Posted December 4, 2014 (edited) Oh. Wait. That means that the variables I've defined at the beginning of the ext. .js file, which is located in the <head> tags, aren't going to work because the elements I'm targeting don't exist yet. If I define the variables within the function then it works! Thank you for your help! Is it best practice to place the <script> tags at the end of the HTML document then, instead of within the <head> tags? Edited December 4, 2014 by deldalton Link to comment Share on other sites More sharing options...
Ingolme Posted December 4, 2014 Share Posted December 4, 2014 Many sites put scripts at the end of the body. There's a good reason for that. The onload event will not only wait for the content of the page to load, but all the images and videos, too. Your scripts might take a long time to begin running if you used the onload event. While a script file is loading everything else is halted. If you include scripts in the head then the page will be invisible until the script has finished loading and running. There's a better event than onload, the DOMContentLoaded event, but it cannot be used as an attribute, it must be passed as a parameter to addEventListener(). It also does not work in all browsers, you need to implement workarounds for older versions of Safari and Internet Explorer. jQuery's ready() method uses "DOMContentLoaded" internally, as well as workarounds for older browsers. But again, loading jQuery in the head of your document will slow down your page. Link to comment Share on other sites More sharing options...
deldalton Posted December 5, 2014 Author Share Posted December 5, 2014 Thanks, Ingolme. I'll take a closer look at my files, to determine what is the best solution. Link to comment Share on other sites More sharing options...
davej Posted December 6, 2014 Share Posted December 6, 2014 I've never had enough code to worry about the time it takes to load it, but it is interesting to experiment with timing the various execution points that are available. For example print out the time when the head script block executes, and the time when the footer script block executes, and the time when the body onload (window.onload) event executes, and the load event of each image.... etc... https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load Also -- on the topic of the subject line -- I have seemed to note that in addition to making sure the element has indeed loaded, it is not a good idea to try to read a style setting that was not previously set by Javascript. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now