I have a JavaScript function which doesn't fire on page refresh. It works when I navigate to the page from another page, but fails if I refresh the page.
All this function does is assign the height of one element in the page to the height of another element (If they both exist).
jQuery(document).ready(function ($) {
if ($(".Video_Pane iframe").length && $(".Image_Pane img").length) {
$(".Video_Pane iframe").height($(".Image_Pane img").height())
}
}
Any ideas? Console doesn't show any errors regarding this
The existence of the img does not imply that it has been loaded (so you can read its height). And refreshing will usually invalidate the cached version of the image so it must be reloaded.
Try using the load event (on the window object) and not the ready
jQuery(window).load(function ($) {
if ($(".Video_Pane iframe").length && $(".Image_Pane img").length) {
$(".Video_Pane iframe").height($(".Image_Pane img").height())
}
})
You have a syntax error in you code.
After the last } there is a ); missing.
I just tried it out and its working for me like this:
jQuery(document).ready(function ($) {
console.log("Hello");
});
You are missing a bracket.
jQuery(document).on('ready',function () {
if ($(".Video_Pane iframe").length && $(".Image_Pane img").length) {
$(".Video_Pane iframe").height($(".Image_Pane img").height())
}
});
I would also use .on('ready') rather than .ready.
Related
I want to get the .click of the image on Froala Editor to create a customize function, for that I want to get the image I have selected in the Froala Editor.
I have Tried a couple of methods for this.
1.froalaEditor.click function:
$('#froala_editor').on('froalaEditor.click', function(e, editor, clickEvent) {
console.log(clickEvent.toElement);
});
2.Custome jQuery function
$.extend({
IFRAME: function (s) {
var $t = $('.campaign-create-sec').find('iframe');
if (typeof s !== 'undefined') {
return $t.contents().find(s);
}
return $t;
}
});
$('#froala_editor').on('froalaEditor.initialized', function (e, editor) {
$.IFRAME('body').on('click', function (e) {
console.log(e.target);
});
});
In the above, both cases I am getting all the other elements other than <img> and <video> of what I tested, so Is there any other way for me to get the click even for an image in Froala Editor.
A fiddle for you to check, any help will be appreciated.
You can try this.
var monitor = setInterval(function(){
var iframe_found = $('iframe').length;
console.log('iframe_found '+iframe_found);
if (iframe_found) {
clearInterval(monitor);
$('iframe').contents().find("img").click(function(){
$(this).css('border','2px solid #090');
console.log('got that!');
});
}
}, 100);
Here is the working fiddle.
setInterval() : For checking iframe presence after page load. iframe may only load after the page data is loaded & in your case its from a editor plugin, may take some time surly to load.
$('iframe').length; : Confirms presence of iframe.
clearInterval() : For destroying the setInterval(), so avoids multiple checking again for iframe.
And, at last we are finding required img tag.
Try... Have a nice day.
I have a situation where I must wait for a Specific image to load, and then either swap out its src, or locate the next image and hide/show it.
What I need to happen is show a placeholder image (silhouette) until its main image is ready, and then hide the silhouette and show the main image. Very common stuff.
Problem is this jquery function does not fire on a new tab, or window... but if I hit f5 it works perfectly... but then again I open a new tab, and it wont fire until I hit f5.
CSS:
.staffImage1, .staffImage2, .staffImage3, .staffImage4, .staffImage5 { display: none; }
Jquery:
$('.staffImage1, .staffImage2,.staffImage3,.staffImage4, .staffImage5')
.load(function () {
$(this).next('.sillhouette').hide();
$(this).show();
console.log("function fired")
})
I get the log message only after refresh.
Something to be aware of is I am using the "First 14k" method to increase page speed, so maybe jquery just is not ready when the images are initially loaded the first time, but are cached and work after f5?
Each image must wait until its fully loaded, they are in a slider, so I need to show the first slides image as soon as its ready,I cannot wait until all 5 images are ready, as that would slow down the first slides image.
Any advice is appreciated, thank you
This structure:
$('.staffImage1, .staffImage2,.staffImage3,.staffImage4, .staffImage5').load(...)
does not work to notify you when all the images have been loaded. .load() only works on a single image at a time. And, if the images are cached, they may already have finished loading before your jQuery even runs so you would miss the load event entirely.
The simplest work-around is to use the window load event when all page resources have finished loading:
$(window).load(function() {
// all images are loaded here
});
It is also possible to monitor just those 5 images, but that is more work. I've written code to do this before so I'll see if I can find that prior code.
Here's a jQuery plug-in function that monitors just specific images. It will call its callback when all the images in the jQuery object are loaded:
// call the callback when all images have been loaded
// if all images are already loaded or there were no images in the jQuery
// object, then the callback will be called immediately
jQuery.fn.imgsLoaded = function(fn) {
var cntRemaining = 0;
function checkDone() {
if (cntRemaining === 0) {
fn();
}
}
function imgDone() {
--cntRemaining;
checkDone();
// remove event handlers to kill closure when done
$(this).off("load error abort", imgDone);
}
this.each(function() {
if (!this.tagName.toLowerCase() === "img" && !this.complete && this.src) {
++cntRemaining;
$(this).on("load error abort", imgDone);
}
});
checkDone();
return this;
}
You could use it like this:
$('.staffImage1, .staffImage2,.staffImage3,.staffImage4, .staffImage5').imgsLoaded(function () {
$(this).next('.sillhouette').hide();
$(this).show();
console.log("function fired")
});
Working demo: http://jsfiddle.net/jfriend00/zaoweyoo/
Write jquery code
'$(document).ready(function(){
//your code
});'
I'm trying to force an update of my jQuery page before I want to change the page.
Code looks like this:
function popupOrRedirect2() {
location.reload();
var content = document.getElementById('invisibleDiv').innerHTML;
if (content > 0) {
$.mobile.changePage("http://localhost:8080/application/test");
} else {
$("#popupDialog4").popup("open");
}
}
I need to read a value from a hidden div, but the div gets updated only after the page is getting reloaded. I must ensure to have the latest value.
The problem is, it doesn't work. If I remove the location.reload() it works... but it doesn't have the newest value.
Any hint on how to achieve the behavior that I want?
I'm using jQuery mobile 1.8.3.
A quick and dirty way might be to use URL params to determine whether to reload.
Instead of:
location.reload()
you could do:
if (location.search !== '?reloaded=1') {
location.search = "reloaded=1"; //triggers a reload once
}
I have already followed instructions on how to make a specific div height take up the entire document. I created the following function, which works perfectly when the page is first loaded.
function resizeBody() {
$(document).ready(function () {
$(window).resize(function() {
$('.body').height((document).height - $(".topbar").height() - 30);
});
$(window).resize();
console.log(document.height);
});
};
In another section of my code, I am hiding and showing divs using jquery to create tabs. These tabs are all of different heights. The code is as follows:
$(document).ready(function() {
$(".tab").click(function () {
$(".tab_content").hide();
$(".tab").css("font-weight","normal");
resizeBody();
});
$("#infoButton").click(function() {
$("#info").show();
$("#infoButton").css("font-weight", "bold");
});
$("#toolsButton").click(function () {
$("#tools").show();
$("#toolsButton").css("font-weight", "bold");
});
$("#dataButton").click(function () {
$("#data").show();
$("#dataButton").css("font-weight", "bold");
});
$("#visButton").click(function () {
$("#vis").css('display','inline-block');
$("#visButton").css("font-weight", "bold");
});
resizeBody();
});
My problem is that when I hide or show a div, the properties of the document aren't updated. Calling console.log(document.height) in the resizeBody() function still prints the original height of the document. Oddly, when I type "document.height" directly into the developer console, the correct (resized) value is printed.
Additionally, after opening the developer console, the page seems to update (without any kind of refresh) and the body div is correctly resized.
What am I missing here? Is this a problem specific to Chrome or am I misunderstanding something fundamental about the way javascript deals with the document object.
It may be important to note that all of my divs use inline-block as their display style. Each div gives a specific value for it's height in the web inspector.
i have some jquery script which runs after the window has loaded
$(window).load( function() {
$('.picture a img').each(function(index) {
$(this).height(280);
if ($(this).width() > $(this).height()) {
alert("yes");
} else {
alert("no");
}
});
});
i always get a "no" from this when i know some of the images should be a "yes". When i trace the script in chrome i noticed that the $(this).width() always returns a 0. ive googled around and some suggestions were that the images havent loaded but here ive used the window.load method which i thought should run once everything has loaded. any ideas??
thanks for any help in advance
Chrome is weird about image widths. I noticed then when building a jQuery photo gallery. If your image width is not specifically set in the tag, chrome will return 0. FF, and IE will figure out the width, but chrome will not. Try actually setting the width and see if you get the desired result then.
<img width="200" src="..." />
You need to run your code when the image is loaded, the following code should work:
$(window).load( function() {
$('.picture a img').load( function() {
$(this).height(280);
if ($(this).width() > $(this).height()) {
alert("yes");
} else {
alert("no");
}
});
});
note that every DOM element that have some kind of web resource associated to (window, img, iframe) respond to .load() event.
try
if ($(this).attr("width") > $(this).attr("height")) {
try adding a load event on the image, so it will only execute when the image is fully loaded.
$(window).load( function() {
$('.picture a img').each(function(index) {
$(this).bind('load', function () {
$(this).height(280);
if ($(this).width() > $(this).height()) {
alert("yes");
} else {
alert("no");
}
})
});
});
you can also try checking this.complete on the image object
I just wanted to add that you should also ensure that your image is actually a visible element. I've had plenty of issues in the past trying to measure visible:hidden or display:none elements. If you are indeed attempting to measure a hidden element, you can get past it by doing something like
var width = $('img').show().width();
$('img').hide();
Now that code is incredibly vague, but it gives you my thought behind visibility flashing.
The correct method to use, to run your scripts after the dom has finished loading, is:
$(document).ready(function() { /*your code here*/ });