Right now I am trying to add a class to images when they are landscape using the following code:
$('.gallery img').each(function() {
if ($(this).width() > $(this).height()) {
$(this).addClass('landscape');
}
});
The code is working some times, but sometimes the class is not added, thus the styles I have are not applied. I have tried with and without the $(document).ready function, along with putting it next to the images rather than at the end of the code, but nothing is consistently adding the class to the landscape images. I'm not sure what else to try. Any suggestions?
Also listen to a load event, since some images might not be loaded (and therefore have unknown width/height):
// Put this in your $(document).ready
function handleImage($image) {
if ($image.width() > $image.height()) {
$image.addClass('landscape');
}
}
$('.gallery img').each(function() {
handleImage($(this));
}).load(function() {
handleImage($(this));
});
Note that having width and height attributes on image tags is recommended if you know the dimensions beforehand. Adding those attributes would void the need to have an onload handler.
Related
I have a function that I wrote basically as below:
function getListHeight() {
$(".tur-list .col-lg-5 figure img").each(function() {
var getTurHeight = $(this).parents(".tur-list").find(".col-lg-7").outerHeight();
var getLeftHeight = $(this).parents("tur-list").find(".col-lg-5 figure img").outerHeight();
if (getTurHeight > getLeftHeight) {
$(this).outerHeight(getTurHeight);
}
});
}
to make equal my columns and it works as I wanted so there is nothing to here. my problem is this code is not working on my .js file but if I copy and paste it console my code is working so if you try you will see
Please click to my real demo
and copy getListHeight(); and paste it on console you will see my columns will be equal my question is why my code is not working properly in .js file ? what I have to do to work my code ?
and my getListHeight() function is work with $(window).resize when I resize the window or with click event but my function is not working in document.ready.
its not working because the images are not loaded yet, the image tag is there but the size is not set yet because the image is still being loaded.
i'd change the code to the following:
function matchSize() {
var getTurHeight = $(this).parents(".tur-list").find(".col-lg-7").outerHeight();
var getLeftHeight = $(this).parents("tur-list").find(".col-lg-5 figure img").outerHeight();
if (getTurHeight > getLeftHeight) {
$(this).outerHeight(getTurHeight);
}
}
function onResize() {
$(".tur-list .col-lg-5 figure img").each(matchSize);
}
function getListHeight() {
$(".tur-list .col-lg-5 figure img").load(matchSize);
}
$(document).ready(function(){
getListHeight();
$(document).on('resize', onResize)
onResize()
});
this will work on resize, on newly loaded images, and on previously loaded images before javascript kicks in (cached images probably).
here is a link to the codepen fork: https://codepen.io/Bamieh/pen/gRLPqm
P.S. i do recommend that you do not rely on the col-* classes as a selector, since the code will easily break as soon as you change your styles, using data-* attributes for selection is the way to go in my opinion.
I'm doing a lot of "post production" with jquery and logically when the page loads it takes a few seconds more for the jquery scripts to load causing the infamous "jitter" effect. Now I'm in a special predicament. The only way for me to manipulate the HTML structure is using jQuery. I have zero access to the HTML. I've attached my jQuery code, was wondering what the best way was to speed things up a bit or make things flow better.
$(document).ready(function() {
//Remove container class from masthead
$('#masthead').removeClass('container');
//Move search bar to navbar
$('#search').unwrap();
$('.nav.navbar-nav').append($('#search'));
$('#search').removeClass('text-right');
$('#search').addClass('pull-right');
//Logo size
$('.pageLogo').children('img').css('width', '100px');
$('.nav.navbar-nav').append('<li class="dropdown"><span class="userdropdown">Login</span><b class="caret"</b><ul class="dropdown-menu profileul" role="menu"></ul></li>');
if($('.notloggedin').length) {
$('.profileul').append($('#internal_login_form'));
} else {
$('.userdropdown').text($('.user-details').html().split('<br>')[1]);
$('.profileul').append($('.profile-menu').children('.dropdown-menu').children());
$('.user-details').next().remove();
$('.user-details').remove();
$('.profileul').append($('#langSel'));
}
$('#login_info').remove();
$('.navbar').unwrap().unwrap().unwrap();
//Add Logo to navbar header
$('.navbar-header').append($('.pageLogo'));
//Remove original container for
$('#masthead').children().first().remove();
//Change pageLogo class to navbar-brand
$('.pageLogo').addClass('navbar-brand');
$('.navbar-brand').removeClass('pageLogo');
//Login Form
$('#login_page').children('div').remove();
//Footer
$('#footer').find('hr').remove();
//Remove glyphicon from learning path
$('.glyphicon-play').remove();
//Move forums tile on mycourse page
$('.forums').appendTo($('.col-md-4').first());
});
As something to try what happens if you instead of binding to document.ready you bind to window.onload.
eg: window.onload = function() { .... }
not sure if it will make a difference but might be worth a try.
I have a 1440*900 monitor; a page with header, footer, and two DIVs between them (the first is my main-content DIV and the second is under it, with the same width)
I need to resize the second DIV (it uses the same background as the main-content DIV does) to feel the gap between footer and bottom of window (if there is some)
I use this code :
while($("#page").height() < wh){
$("#spacer").css('height', (parseInt($("#spacer").css('height').replace('px', '')) + 1) + 'px');
}
I use it in document-ready (jquery), but it freezes in Chrome (but not in firefox).
You could try making classes in your CSS file for your different sizes, and then just using jQuery to change the class. Might be faster.
.addClass
or
.attr('heightClass', 'whateverClassYouWant')
What's that? That code is repeated. And I wouldn't use while. I would use an event detector,
$(window).resize(function(e) {
if ($(window).height>value) {
//do stuff
}
else if ($(window).height<value) {
//do stuff
}
}
);
$(document).ready ( function(e) { //the same } );
While makes it slower. try not to use while in that ocasions, while hasn't been created for that, there are event listeners, while stays there till the condition changes or you break it.
If the page is loaded and the browser window is between 1100px & 640px, the following jQuery script works properly:
$('#mobileMenu').click(function(){
if ($('body').hasClass('mobile-nav-open')) {
$('body').removeClass('mobile-nav-open')
} else {
$('body').addClass('mobile-nav-open');
};
});
What this does is when a#mobileMenu is clicked, a class is added to body and the mobile nav menu slides in, then the class is removed and the mobile nav menu closes upon another click.
But if the page is loaded at <=640px, the class .mobile-nav-open never gets added onto the body. I cannot for the life of me figure out why it isn't working. This code is also being inserted through Squarespace's code injection into the footer. There's a lot of JS packed into the template that may be interfering, but I can't figure out how to override it. Anyone able to help me out? Any help is appreciated.
The site can be seen here: https://ryan-vandyke-4rks.squarespace.com/
This looks to be what I'm trying to override:
Y.use(function (a) {
a.on("domready", function () {
if (640 >= a.one("body").get("clientWidth")) a.one("#mobileMenu").on("click", function () {
a.one("body").hasClass("mobile-nav-open") ? a.one("body").removeClass("mobile-nav-open") :
(a.one("body").addClass("mobile-nav-open"), a.one("body.email-open") && a.one("body").removeClass("email-open"), a.one("body.desc-open") && a.one("body").removeClass("desc-open"))
});
})
});
Instead of add/remove class on click try below approach to add/remove class on body tag.
function addBodyClass(){
if($(window).width() <= 640){
$('body').addClass('mobile-nav-open');
} else {
$('body').removeClass('mobile-nav-open');
}
}
$(window).on('load resize', function(){addBodyClass()})
Fiddle Demo
I want to load an external file (using jQuery) when the user hovers a div. I tried loading it like a css file on hover but no luck. (Also, I can load a css file on hover, right? That code I tried for that is below.)
$(document).ready(function () {
$("#f1_container2").hover(function () {
$('head').append('<link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" />');
});
});
You can load content using $(".target").load("file.html"), where file.html is an HTML fragment containing some markup.
Since CSS is passive (it doesn't do anything until someone uses it), it can sit in the head in the first place. That way, when you hover over a div, you can do $(".target").addClass("newClass") to apply some groovy styling.
hover() can also take a SECOND function, which is invoked when the mouse leaves the target, so you can undo whatever you did on the mouseover.
The document has already been loaded and rendered when you append the code for the stylesheet. The browser has already retrieved the needed resources and won't retrieve a file because you appended some code.
I would recommend, as mentioned, pre-loading your images or using another technique to retrieve the file on hover.
I believe something like this may work.
$(document).ready(function () {
$("#f1_container2").hover(function () {
// The easy way
//$('head').append('<img src="images/sprite.gif">');
// The cool way
var $img = $('<img>', {
src: 'images/sprite.gif',
load: function() {
$(this).fadeIn('slow');
},
css: {
display: 'none'
}
}).appendTo('body'); // append to where needed
});
});