I've been working on a photography portfolio page and want to use different jQuery slideshows for each photo group. I realize having lots of different scripts can cause conflicts, but I've made sure that each script is wrapped with (function($) { })(jQuery); to avoid conflicts with the $.
All the scripts played nice together until I added one particular script (jquery.RotateImageMenu.js). It is definitely this script that breaks everything because when I comment it out, everything works fine. Even the other scripts required for that plugin are fine. As soon as I uncomment that script tag, all the jQuery on the page breaks. There are no console errors.
Because there are so many files, I threw it all up on Plunker so the all code is in one place.
I'm aware that none of the images work on Plunker because it was enough of a pain to copy and paste all the script files, let alone go through over 100 image tags and put in direct links.
I am also aware that there may be an easier way to load all these scripts, but at the moment the goal is to get them all to work before figuring out ways to condense. Well, unless combining would eliminate the problem. To be honest, I have no idea if that would work or not or if there's an easier way to go about this. Any suggestions for an easier approach are welcome, even if they aren't necessarily a solution for how I have things set up at the moment.
Related
What is the best practice:
putting semantic ui cdnjs links in header under semantic ui css,
or put it in scripts tags below the footer of the page
I found a lot of guys just put it in the header with JQuery too, but as i know scripts must put under the page to be sure every element just created to give it anything with javascript.
Is it correct what i know or there is something i don't know about it? I'd be grateful for any help.
It is correct that generally scripts should be added at the end of the page, as they are loaded last there. This, however, doesn't guarantee that the DOM has been completely loaded at that time (like images etc.), therefore js that depends on that should always listen to the $('document').ready()-event and for that code it doesn't really matter where it is in the html. (A lot of people wrap everything in that listener even if it isn't necessary, just in case)
Bottom line, it is considered best-practice to put any scripts at the bottom of the html, but it isn't always necessary. I would probably do it anyways.
This will also make the js be loaded last and usually that is the least important part of your website (when loading).
I am working on a simple Cordova app with about 4 page types and I am trying to think through which is the better way to handle the inner HTML templates.
Hidden HTML hard coded into the HTML files that is hidden and populated/revealed by my JS.
Using a JS template system and appending and removing from the DOM.
I feel that appending all that to the DOM for a page is inefficient when I could just update the sections that change. But perhaps an append is lightweight enough where I shouldn't worry about it.
There are a number of ways you can do it. In terms of load on the browser. That is hard to say. From your question it is hard to know what is in these pages, what are you displaying, is it live data, static html etc.
When you first plot out an app, if you are from the old class of building multiple page websites, it can be a little concerning as to how well your app/page will run with all those pages crammed in to one, and all that data plus code.
The answer is, amazingly well. If done properly in modern browsers, and for example Ipads the app will run to near native performance.
The options you have are
Map all the pages into one HTML document. Hide each page content using css display:none, flip them into view using css animation, fading or just display:block.
Use a javascript routing library to map urls to blocks of code that deal with each page, this makes mapping out your app much easier, and means that buttons can just link to your pages, like a real website. see http://projects.jga.me/routie/
Building all the page templates into one page can make it hard to code, as the page becomes enormous, consider breaking the inner content of each page into separate files, you can then give each page holder a url and use a small xhr request to load the page on-the fly, once loaded you can cache it into memory or even local-storage, depending on whether you remove it when it is closed or keep it hidden.
In my experience you can put an enormous number or nodes into one page and have very little speed drop, bear in mind if you use something like jquery and do a lot of $(".page > .page1 > .items li") your going to have a slow app.
Tips
Use element ID's everywhere document.getElementById(..) is 100's of times faster in a loop that $(...)
cache elements when you find them, if you need them later store them in a memory cache.
keep for loop inner code to a minimum.
use a decent click touch libary like http://hammerjs.github.io/ and delegate all the events of the body tag or at least on each page.
If you need to touch the server, load data, think dom first, device second server later. A good app is a responsive app, that responds to the user instantly.
I know this has been posted a while ago, but for the sake of the users I am going to add my answer.
I completely agree with MartinWebb but my answer will shed some light on the results of his options. I am currently working on a similar project. Please note that this answer pertains to cordova (previously called phonegap) specifically. My app has about 5 pages with +-20 different components (input's, div's, h1's, p's, etc.). This is what i tried and the result of each:
jQuery was my first option, mainly because it is easy to use and reduces the amount of code required to accomplish a said goal. Result: First time I tried this approach I though I would spice it up with animations and transformations. The result of this was a very unresponsive app. I removed the animation and transformation, however due to the nature of my application I required multiple dynamically added components and jQuery just wasn't up for the task.
Css display:none and visible:hidden was my next option. I used javascript's dom to display certain div's. Result: This works if your not planning on switching many div shortly after one another eg. a simple menu. It quickly became apparent that this wasn't going to work. Also this does not eliminate my need for the dom. Remember document.getElementById('menu').style.display = "none"; is still part of the dom. This as a solution, for me, is poor. There is a reason that var menu= document.createElement('div'); is part of the language. Which brings me to my last option.
Building a page 90% on javascript's dom was my last option. Logically I could not see how 600 lines of code cold trump one .innerHTML or .style.display = "block"; but it did. Result: It was by far the most responsive of all the solutions.
I'm not saying that all webpages should be coded with dom appending, but as I stated previously, for a cordova app of a few pages (<6), with a few components a javascript dom appending approach would be best. It takes longer to code, but you will be rewarded with control and efficiency. I would suggest coding the backbone of your app in html and populating and controlling with javascript's dom.
Best of luck.
The first option, <div>s with display:none; would be more efficient by a small margin, but you can get the best of both worlds by compiling your JavaScript and templates together into a single file using something like browserify or require.js.
I have alot of javascript on a page, It can't be combined.
It's bugging me with the amount of "document.wait" and so forth functions on each of them, is there a better way of doing this, or am I stuck with it?
Goog'ling has revealed nothing.
As said by others move all your scripts to the bottom of the page, right before </body>. It will solve many of your issues. But it will not tackle all the subtleties of browser-inconsistencies specially for old IE.
If you want to get a glimpse of how tricky is to provide such cross-browser implementation, take a look at the following popular question:
$(document).ready equivalent without jQuery
For instance do not lean against document.addEventListener as IE proposes its own proprietary document.attachEvent. And this is only the very first step.
The best practice is to always put script tags just before you close the body:
<script src="path/to/my/script"></script>
<!-- more scripts, etc -->
</body>
This way, everything else is definitely already loaded and no need to "wait".
See this recommendation from google.
Otherwise, you can use:
window.addEventListener('load', function() {
//your js here
});
well I'm new to JavaScript so I know that my work will look nasty but I have been looking for a solution for a week now, I tried to put some JavaScript in the Head tag and so but it didn't get any faster so I said if there is one I'll get it here :D here are the link to the project please have a look at it and if there is something to do about it I'll appreciate it thank you all!
http://www.ayman.benhamida.com/metalexfinal/
First of all, your site looks pretty nice! ;) However, I saw the following problems:
you have two javascript versions included. Kick one out!
Very important: You have several .js which are uncompressed. Use an online-compressor to minify them: this one or this one or just pick one, you like.
You have a lot of jquery-plugins. You can merge them together into one file.
Fix your 404-errors (css/bullets.png, css/loading.gif)
Place your scripts as far to the bottom of your page as possible. (best position would be before </body>). This speeds up the initial page-construction.
minify your css.
compress your images.
Use minfied Javascript.
Use minfied CSS.
Combine Javascript files.
Combine CSS files.
Compress your images more.
You use 2 versions of jQuery ( http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js and http://code.jquery.com/jquery-latest.js ).
Split your page up into seprate pages, so you don't need to load things like http://www.ayman.benhamida.com/metalexfinal/images/map.png (which is 181.1kb in size) on the home page. Only load resources when they are needed, i.e. when someone wants to see the map!
http://www.ayman.benhamida.com/metalexfinal/images/para_green.png is 235.2kb in size. Compress this more!!
I'm trying to create a simple portfolio site for a friend of mine based around his drawings and paintings. The layout is relatively simple but is proving to be very difficult to implement. I have three jquery scripts on the page that each perform a specific function.
1) bgStretcher - Stretches a series of background images to fill a user's window.
2) collapse - Simple collapsable menu system
3) galleryview - Basic no frills slideshow gallery
Currently, bgstretcher and collapse are on one page called nav.shtml (http://yungchoi.com/nav.shtml) and the gallery on gallery.shtml(http://yungchoi.com/gallery.shtml). Seperatley they work fine, but when I call the nav page via SSI (test.shtml), The code seems to run into problems and becomes disabled.
The solutions I've found all lead to utilizing the noConflict function in jquery (http://stackoverflow.com/questions/2656360/use-multiple-jquery-and-jquery-ui-libraries), (http://hubpages.com/hub/How-to-use-jQuery_noConflict), but everytime I've tried inserting it and changing my code, everything gets messed up again. I've also organized each script's files into separate folders and directories but that hasn't helped either.
My experience is in graphic and web design, so my coding skills are not the greatest. I do know the basics, but rewriting jquery code was not something I ever learned so I might not be understanding how to correctly fix this problem. If someone could clearly and easily explain what I would need to do to make these all work together, I'd appreciate it greatly.
Thanks!
You still have multiple versions of jQuery being loaded in your page.
Remove:
<script type="text/javascript" src="support/bgstrecher/jquery-1.3.2.min.js"></script>
and
<script src="support/collapse/jquery-1.2.1.min.js" type="text/javascript"></script>
you should also remove:
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
& - (because you only need either the packed or unpacked version, not both)
<script type="text/javascript" src="galleryview/jquery.galleryview-2.1.1.js"></script>
See if that helps.
You only need noConflict if you're going to also use other libraries that are similar to jQuery like MooTools, Dojo or Prototype. It's unlikely you will need to & if you do, you will need to recode to use the jQuery function instead of the $.
The issue it appears you're having is that all these jQuery includes are overwriting the previous version of jQuery which the plugin attached to and thus the function no longer exists when you call it.
Why are you loading Jquery twice ?
First the 1.4.2 min file and then the full blown straight after ?
You still have multiple calls to jQuery (even if files are not in same directories).
In the same way, you call "galleryview/jquery.galleryview-2.1.1.js" twice (the second file is just packed).
By the way, my error console tell me that:
"Error: jQuery.timer is undefined
Source File: http://yungchoi.com/galleryview/jquery.timers-1.2.js
Line: 135"
Are you sure you need this timer plugin? For now, it seems you have too many script included. Try to remove all unneeded files (you should keep only one version of jquery. But if some plugins you used is not compatible with, you'll have more and more compatibility problems).