Hello im creating an iframe in my javascript. However the style and the loaded event doesnt seem to work. What am I doing wrong?
var iframe = $("<iframe src='/Player/ShowPage/"+data.PageId+"'/>", {
style: "position:absolute; left:-100%",
load: function () {
var that = this;
$(this).animate({
left: 0
}, 500);
$('iframe').not(this).animate({
left: '-100%'
}, 500, function () {
$('iframe').not(that).remove();
});
}
});
$('body').append(iframe);
I must be missing something, I just cant figure out what it is. The iframe is just sitting there - mocking me - on the screen...
You just need to move the 'src' into the object literal and everything works fine.
var iframe = $("<iframe>", {
src: '/Player/ShowPage/' + data.PageId,
style: "position:absolute; left:-100%",
load: function () {
var that = this;
$(this).animate({
left: 0
}, 500);
$('iframe').not(this).animate({
left: '-100%'
}, 500, function () {
$('iframe').not(that).remove();
});
}
});
$('body').append(iframe);
Please check this JSFIDDLE for a working demo.
Related
I have the following JQuery which works on initial page load:
$(window).on('load', function(){
$('.details').hover(function() {
$(this).find('.description').stop().animate({
height: "toggle",
opacity: "toggle"
}, 200);
});
});
Now that I have added pagination and filters to the page, the window onload obviously won't work once any pagination or filters have been triggered. I understand that I need to create an additional function to ensure the above will still work, however I believe that there is something not write with my code, as when pagination is used, I am still getting no jquery. I am using the correct approach?
This is what I have so far:
document.onreadystatechange = function(){
if (document.readyState === "complete") {
$('.details').hover(function() {
$(this).find('.description').stop().animate({
height: "toggle",
opacity: "toggle"
}, 200);
});
}
else {
window.onload = function () {
$('.details').hover(function() {
$(this).find('.description').stop().animate({
height: "toggle",
opacity: "toggle"
}, 200);
});
};
};
}
I am still learning.
Created a function (partA), and then triggered function when required (partB)
// PART A
function cardFunction(){
$('.details').hover(function() {
$(this).find('.description').stop().animate({
height: "toggle",
opacity: "toggle"
}, 300);
});
}
// PART B
jQuery(document).ready(function () {
cardFunction();
});
I want to create a click event for the image to automatically change the height to 100% while the other images to a height of 0. You can see it working live at the website www.nhadatsonnghia.com nhà đất gò vấp .
Below is the code I have tried. Can someone help me? Thanks very much.
$('.post-header .desc-image-list .thumb .natural-thumbnail').click(function () {
$(this).find('img').each(function () {
var image_url_in_first_list = $(this).attr('src');
$('.post-header .desc-image-list .full .natural-thumbnail').each(function () {
if ($(this).css('height') == '100%') {
$(this).animate({
height : 0
}, 100, function () {
$('.post-header .desc-image-list .full .natural-thumbnail').each(function () {
if (image_url_in_first_list === $(this).find('img').attr('src')) {
$(this).animate({
height : "100%"
}, 100);
}
});
});
}
});
});
});
$.colorbox({ href: previewLink, iframe: true, width: "90%", height: "90%" });
I am using the above code to call colorbox. Once the colorbox is displayed I would like access and element inside the colorbox and then change the css.
However I am unable to access elements inside the colorbox.
I tried the following:
$(function () {
'use strict';
setInterval(
function () {
console.log("logging...");
var elements = document.getElementsByClassName("className");
if (elements.length > 0) {
console.log("Found element");
}
}, 1000);
});
Don't use timeout for this purpose, always look for events. The colorbox haves onOpen event(CTRL+F "Callbacks"), which I think fits your needs:
$.colorbox({
href: previewLink,
iframe: true,
width: "90%",
height: "90%",
onOpen: function()
{
debugger;
$("#colorbox").find(); // Find desired element
}
});
Fiddle.
Furthermore, why are you using getElementsByClassName if you already have jQuery on your page? Why not .find() ?
So I am trying to animate .load('content.html') function by doing this.
function loadContent(c) {
$('#main-container').stop().animate({
opacity: 0,
}, 300, function() {
$('#main-container').load('./content/' + c + '.html');
$(this).stop().animate({
opacity: 1,
}, 600);
});
}
It is pretty straight forward, I want to animate opacity to 0, load new content and animate opacity back to 1. The problem is that content loads immediately after function is called so content changes before 'opacity 0' happens. I tried also this piece of code
function loadContent(c) {
$('#main-container').stop().animate({
opacity: 0,
}, 300, function() {
setTimeout(function() {
$('#main-container').load('./content/' + c + '.html');
}, 600);
$(this).stop().animate({
opacity: 1,
}, 600);
});
}
But it is same result. Any hints?
I think it has something to do with .animation() event being asynchronous.
Both codes above, and both answers work just fine I had typo in my code (as whole) so I was calling .load() function before loadContent(c) itself, result was that content loaded immediately, animation started -> content loaded second time -> animation ended.
You need to pass your last animation as a callback function to load():
function loadContent(c) {
$('#main-container').stop().animate({
opacity: 0
}, 300, function() {
$('#main-container').load('./content/' + c + '.html', function() {
$(this).stop().animate({
opacity: 1
}, 600);
});
});
}
Here's a Fiddle: http://jsfiddle.net/Lp728/
how about:
function loadContentCOMMAS(c) {
$('#main-container').stop().animate({
opacity: 0
}, 300);
$('#main-container').promise().done(function () {
$('#main-container').load(c,function () {;
$(this).stop().animate({
opacity: 1
}, 600);
});
});
}
EDIT:
here is a FIDDLE
I am writing a really quick js module that opens up and image and fades out a container to show the image. The markup for the image is this below:
<div style="margin-bottom:1px;" class="rsNavItem rsThumb front">
<div class="rsTmb portfolio">
<img src="http://www.mysterium.ch/revelation/pictures/revelation_highres_06.jpg"/>
</div>
</div>
Now what happens is the click basically fades out a div and then shows the container.
loadSlide: function () {
console.log('clicked');
//$('.rsThumb').each(function () {
var containerT = $('.rsnav-container'),
containerB = containerT.find('.rsThumb');
$('.rsThumb').click(function (e) {
console.log('clicked again');
e.preventDefault();
var sliderObject = $('.collection #gallery-t-group').data('royalSlider');
var s = this;
// Lets make sure the body is activated
$('body').addClass('rsSlider-active');
$('.loader').show().transition({
opacity: 1
}, 100, 'easeInOutQuart');
// $('.socialbar-vertical-static').removeClass('activestate');
$('.body').transition({
opacity: 0
}, 100, 'easeInOutQuart');
// After slider loads
setTimeout(function () {
$('.body').transition({
opacity: 1
}, 500, function() {
$('.loader').transition({
opacity: 0
}, 500).hide();
});
theSliderActivated();
theSocialActivated();
sliderObject.updateSliderSize(true);
$('div#container').css('margin',0);
}, 1000);
});
//});
}
The script is also loaded in at the top like so:
init: function() {
var app = this;
this.fakingIt();
this.loadSlide();
this.unloadSlide();
this.mobileNav();
this.loadThumbs();
this.royalSlider();
this.thumbsSwitch();
this.functionResize();
this.theSocialActivated();
this.slideEventChange();
console.log('======> new.global.js');
}
For some reason it will not register the event at all and even with a console log after the click nothing registers at all.
Am I doing something really wrong here?
Make sure you are definitely calling init() from within a document ready event handler. This will ensure the rsThumb div is available when binding to its click event.
$(function(){
init();
});