We Keep Coding

html <link> and <script> tags not working with jquery .on('load') event listener

In my project, I am designing a page load progress bar like Youtube. For that, I am capturing all the rich element tags like img, iframe, video, audio etc, and controlling the width of the progress bar as and when each of the tags are getting loaded. You can have a look at the code below.
var media_nos = $("body img").length + $("body iframe").length + $("body video").length + $("link").length + $("body script").length;
console.log(media_nos);
doProgress();
// function for the progress bar
function doProgress() {
$("body img, body iframe").on('load', function() {
loading.loaded++;
console.log(loading.loaded);
var newWidthPercentage = (loading.loaded / media_nos) * 100;
animateLoader(newWidthPercentage + '%');
}).each(function(){
if(this.complete) {
$(this).trigger('load');
}
});
$('body video').on('canplaythrough', function() {
loading.loaded++;
var newWidthPercentage = (loaded / media_nos) * 100;
animateLoader(newWidthPercentage + '%');
}).each(function(){
if(this.complete) {
$(this).trigger('load');
}
});
}
//Animate the loader
function animateLoader(newWidth) {
$("#progressBar").width(newWidth);
if(loading.loaded==media_nos){
setTimeout(function(){
$("#progressBar").animate({opacity:0});
},500);
}
}
But, the problem here is I am not able to track the loading of the link and script tags using the jquery .on('load') method as I did for img, iframe tags etc. It works if I write an inline onload attribute to link tags as shown below.
<link rel="stylesheet" href="css/bootstrap.min.css" onload="load();">
<link rel="stylesheet" href="css/bootstrap-theme.min.css" onload="load();">
<link rel="stylesheet" href="css/style.css" onload="load();">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" onload="load();">
main.js
var loading = {"loaded" : 0};
function load() {
console.log("hello");
loading.loaded++;
console.log(loading.loaded);
}
As you will know, its very hectic to write an inline onload for every such link and script tags, is there any way I can track the loading of the link and script tags in a better way like the .on('load') method? Thanks in advance.

IE8 issue - jQuery adjusting navigation html when page resizes

Using the below code, I don't want IE8 to pick up the responsive navigation. When a window is resized, IE8 is removing navigation. My has a class of "lt-ie9" for IE8. Can you tell me how to adjust the code so if the browser size is below 767, it will use the desktop version.
function resizeNav() {
if (!nav) {
nav = {};
nav.root = jQuery('#navigation');
nav.primary = nav.root.find('.menu');
nav.secondary = jQuery('.secondary-links');
nav.moveable = nav.secondary.children('li');
nav.icon = jQuery('<div id="menu-icon" class="btn">Navigation</div>');
nav.icon.click(function () {
nav.primary.slideToggle('slow');
nav.icon.toggleClass('active');
});
}
// Position everything
if (getWidth() <= 767) {
nav.moveable.appendTo(nav.primary);
nav.root.prepend(nav.icon);
nav.primary.hide();
} else {
nav.moveable.appendTo(nav.secondary);
nav.icon.detach();
nav.primary.show();
}
nav.icon.removeClass('active');
}

Assuming your lt-ie9 class is added the html element, the easiest way to do this is just check for it along with the width:
if (!html.lt-ie9 && getWidth() <= 767) {
You could also store the lt-ie9 as a boolean to be more efficient:
var isLtIe9 = $('html.lt-ie9').length;
And then modify the above to:
if (!isLtIe9 && getWidth() <= 767) {

Why use JS if you only want to effect IE8? Wouldn't it be better to just use an IE8 only CSS file. This would keep your code clean and hack free.
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Conflict between Lightbox and JavaScript

I have researched thoroughly for solutions for this issues but could not find anything since I don't use $ tags.
Actually I tried to put Lightbox on my page and a JavaScript slideshow, but it seems like only the slideshow would work and the lightbox gets disabled when I add both.
<link href="css/lightbox.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="style.css" />
My JavaScript slideshow
<script type="text/javascript">
var Image = new Array("images/food1.jpg", "images/food2.jpg", "images/food3.jpg");
var Image_Number = 0;
var Image_Length = Image.length - 1;
function change_image(num) {
Image_Number = Image_Number + num;
if (Image_Number > Image_Length) {
Image_Number = 0;
}
if (Image_Number < 0) {
Image_Number = Image_Length;
}
document.slideshow.src= Image[Image_Number];
return false;
}
function auto() {
setInterval("change_image(1)", 3000);
}
</script>
//lightbox: importing the lightbox
<script src="js/jquery-1.10.2.min.js">;</script>
<script src="js/lightbox-2.6.min.js">;</script>

I did not went detail on your code, but that simpton you discribed seems like you are having a script conflict, a rule is that if you can only call a script once in your website here I'll give you an example of an issue I had... so just call a script once for as many plugins or modules using the script...
In the HTML codes, please remove the line marked by red. It's because the jQuery has already been added in the header section.

Javascript Gallery that automatically uses all large images on page

I have a site with lots of images on one large page.
The easiest would be a Script that i could include, that automatically searches through that same page and uses all images larger than 100px to create a slideshow gallery from them.
Anyone knows such an easy script, that doesent need any programming skills?
I found this for a start:
jQuery get all images within an element larger than a specific size
To get all images larger that some size you can use something like this:
var allImages = $('img', yourDivElement)
var largeImages = allImages.filter(function(){
return ($(this).width() > 70) || ($(this).height() > 70)
})
Update:
After some more research, I found this the most fitting: Fancybox Gallery
It should be implemented on this page:
http://www.kathrinhoffmann.com/

It really depends on what is your favourite lightbox ("gallery opener"). Let's say thatyou like ShadowBox. It requires rel="shadowbox[gallery-name]" in which the gallery name is optional. The fun side of shadowbox is that lightbox instead of shadowbox will work as well.
What you then need to do is to add a link-tag around the images with this rel attribute.
var img = $("img"),
a = "<a href='",
b = "' rel='lightbox[",
galName = "chooseName",
c = "]'>";
img.each(function() {
var $this = $(this);
if ($this.width() > 100 || $this.height() > 100) {
$this.wrap(a + $this.attr("src") + b + galName + c);
}
});
Fiddle.

Have you tried doing something like this to get the original width and height of an image:
// loop through img elements
$('.img-class').each(function(){
// create new image object
image = new Image();
// assign img src attribute value to object src property
image.src = $(this).attr('src');
// function that adds class to image if width and height is greater that 100px
image.onload = function(){
// assign width and height values
var width = this.width,
height = this.height;
// if an image is greater than 100px width and height assign the
// string fancybox to image object className property
image.className = (width > 100 && height > 100) ? 'fancybox' : '';
}
});

#Bram Vanroy is almost right, but you need to take care about the real size (non affected by CSS or so) and about non loaded images (that's why my filters needs a callback to return the filtered images):
http://jsfiddle.net/coma/wh44u/3/
$(function() {
$('img').filterBiggerThan(100, function(big) {
console.log(big);
});
});
$.fn.filterBiggerThan = function (limit, callback) {
var imgs = [];
var last = this.length - 1;
this.each(function(i) {
var original = $(this);
var img = $('<img/>')
.appendTo('body')
.css({maxWidth: 'none'})
.load(function(event) {
if(img.width() > limit || img.height() > limit) {
imgs.push(original);
}
img.remove();
if(i >= last) {
callback(imgs);
}
});
img.attr('src', this.src);
});
};
Here you have another example:
http://jsfiddle.net/coma/NefFM/22/
Here you have a Fancybox gallery as Bram suggested:
http://jsfiddle.net/coma/NefFM/32/

Nothing stops you from wrapping your images (that you already found) with required markup and passing em to fancybox:
largeImages.each(function(){
$(this).wrap('<a></a>').parent().attr({'rel':'gallery', href: this.src});
});
$('a[rel=gallery]').fancybox();
You can see the working demo in this fiddle (beware I used body as root element for finding images in demo, you better add some class/attribute to the element that holds all the images you want to work with and use it instead).

Thanks,
I solved it like this:
I downloaded fancybox and added this code from the fancybox instructions at the bottom of my page at kathrinhoffmann.com :
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="s$
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.5"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="sc$
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
Then I included my own script:
<script type="text/javascript" src="/add_fancybox.js"></script>
which looks like this:
var img = $("img"),
a = "<a href='",
b = "' rel='group' class='fancybox'>";
img.each(function() {
var $this = $(this);
if ($this.width() > 50 && $this.height() > 50) {
$this.wrap(a + $this.attr("src") + b);
}
});

CSS switcher - looking for more seamless implementation

I'm using a JS CSS switcher to good effect really brilliant. However, I would be delighted if it worked more seamlessly. At the point of opening a new page on the site the default css style often flickers on breifly, before the cookie re-applies the selected CSS style.
e.g. the canvas style is the default style, this opens when first visiting the site, user selects corporate style, they open another page in the site - the canvas style shows for a split second, then the corporate style loads over it. Worse on older computers, but on my main computer this does not often happen on Firefox, although on other browsers, especially Chrome its very noticeable. Does anyone have the expertise to update the workings below with a tweak to say, first check for the cookie, then if no cookie, apply the default style, rather than applying the default style seemingly at the same time?
the code I am using is here below:
in html head:
<script type="text/javascript">
$(function()
{
// Call stylesheet init so that all stylesheet changing functions
// will work.
$.stylesheetInit();
// This code loops through the stylesheets when you click the link with
// an ID of "toggler" below.
$('#toggler').bind(
'click',
function(e)
{
$.switcher();
return false;
}
);
// When one of the styleswitch links is clicked then switch the stylesheet to
// the one matching the value of that links rel attribute.
$('.styleswitch').bind(
'click',
function(e)
{
$.stylesheetSwitch(this.getAttribute('rel'));
return false;
}
);
}
);
</script>
<link rel="stylesheet" type="text/css" href="/css/canvas.css " title="canvas">
<link rel="alternate stylesheet" type="text/css" href="/css/corporate.css " title="corporate">
<link rel="alternate stylesheet" type="text/css" href="/css/earth.css " title="earth">
<link rel="alternate stylesheet" type="text/css" href="/css/space-and-stars.css " title="space-and-stars">
<link rel="alternate stylesheet" type="text/css" href="/css/under-the-sea.css " title="under-the-sea">
<link rel="alternate stylesheet" type="text/css" href="/css/classical.css " title="classical">
<link rel="alternate stylesheet" type="text/css" href="/css/creative.css " title="creative">
the JS
(function($)
{
// Local vars for toggle
var availableStylesheets = [];
var activeStylesheetIndex = 0;
// To loop through available stylesheets
$.switcher = function()
{
activeStylesheetIndex ++;
activeStylesheetIndex %= availableStylesheets.length;
$.stylesheetSwitch(availableStylesheets[activeStylesheetIndex]);
};
// To switch to a specific named stylesheet
$.stylesheetSwitch = function(styleName)
{
$('link[#rel*=style][title]').each(
function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) {
this.disabled = false;
activeStylesheetIndex = i;
}
}
);
createCookie('style', styleName, 365);
};
// To initialise the stylesheet with it's
$.stylesheetInit = function()
{
$('link[rel*=style][title]').each(
function(i)
{
availableStylesheets.push(this.getAttribute('title'));
}
);
var c = readCookie('style');
if (c) {
$.stylesheetSwitch(c);
}
};
}
)(jQuery);
// cookie functions http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days)
{
if (days)
{
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++)
{
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name)
{
createCookie(name,"",-1);
}
// /cookie functions

I would do it server-side...
Anyway, when you do
$(function()
{
});
jQuery waits until the DOM is fully load to execute the function.
So, you should place the javascript just below the <link />s section, outside $(function(){}); . This will make the script as soon as the browsers parses it, and before the page is fully loaded. (it has to be below the elements because they must be loaded)

I think you might wish to run your code before the DOM is ready. Perhaps you could run it immediately rather than using $(function(){...}), since jQuery waits until the page loads to execute anything in that (hence the flicker).
Also perhaps this might give insight.
http://forum.jquery.com/topic/use-jquery-before-the-dom-is-ready-12-1-2010
Debugging steps for why links are not working:
>>> $('link[#rel*=style][title]') --> seems to show your styles are there
[..., <link rel=​"alternate stylesheet" type=​"text/​css" href=​"/​css/​corporate.css " title=​"corporate">, ...]
>>> $.stylesheetSwitch('corporate') --> seems to work
The only problem is that the links are not having anything bound to the onclick; wait... don't you mean this.getAttribute('title')? as you can see above, rel="alternate stylesheet" which is probably not your intent to use as a unique theme identifier.