json2html, I need to add click events to the resulting html after the transform. right now I am using a timer. Even though it did not appear to be an option i attempted to add the code to the Options for the transform call. Didn't work. Is there a better option than adding a timer to document.ready to give the transform time to run before adding my click event to the resulting divs?
setTimeout(function() {
$('.item').click( function() {
$this = $(this);
$.fancybox({
height: '100%',
href: $this.find('a').attr('href'),
type: 'iframe',
width: '600px'
});
return false;
});
}, 1000);
this answer is coming a little late .. but hey better late than never.
You can directly assign events within json2html like so
json2html eventData example
OR you can just do it manually after you call the transform like so
$('#someElement).json2html(data,transform);
$('.item').click( function() {
$this = $(this);
$.fancybox({
height: '100%',
href: $this.find('a').attr('href'),
type: 'iframe',
width: '600px'
});
return false;
});
Related
$.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() ?
EDIT: This software package is the full and undoctored version of what I'm trying to fix here. The problem is in the /data/renderpage.js script. Feel free to examine this before continuing.
https://github.com/Tricorne-Games/HyperBook
I really appreciate all the help guys!
=
I am polishing a jQuery script to do the following in a rigid sequence...
Fade out the text.
Shrink the size of the container div.
Preload the remote HTML ///without showing it yet!///
Open the size of the container div.
Fade in the new remote HTML.
I do not mind if steps 1 and 2, 4 and 5 are combined to be one whole step (fade/resize at the same time). It's when the new HTML is loaded it interrupts the entire animation, even from the beginning.
The idea is that I do not want my remote HTML to show until after the animation renders right. I want the original text to fade out and the container div close up, then, behind the scenes, ready the text of the new HTML, and then have the container div open up and fade the new text in.
It seems when I call the load(url) function, it instantaneously loads the page up, and the animations are still running (like the new HTML ends up fading out, only to fade back in, and not the original text out and then the new one in). Either that, or the whole function is calling each line at the same time, and it's disrupting the page-changing effect I want.
Here's my current script setup...
$(document).ready(function() {
// Start-Up Page Load (Cover, ToC, etc.)
$('#content').load('pages/page1.htm');
// Navigating Pages
$(document).on('click', 'a', function(e) {
e.preventDefault();
var ahref = $(this).attr('href');
$('#content_container').animate({height: 'hide'}, 500);
$('#content').fadeTo('slow', 0.25);
$('#content').load(ahref);
$('#content').css({opacity: 0.0});
$('#content').fadeTo('slow', 1.0);
$('#content_container').animate({height: 'show'}, 500);
return false;
});
});
What is it wrong I'm doing here? I have used the delay() function on every one of those steps and it doesn't solve the problem of holding back the new text.
jQuery objects can provide a promise for their animation queues by calling .promise on the jQuery element.
You can wait on one or more of these to complete using $.when() and then perform other operations.
The following does a fade out and slide up in parallel with the load, then (only when the animations complete), slides it down then fades it in (in sequence):
$(document).on('click', 'a', function (e) {
e.preventDefault();
var ahref = $(this).attr('href')
var $container = $('#content_container');
var $content = $('#content');
// Slide up and fadeout at the same time
$container.animate({
height: 'hide'
}, 500);
$content.fadeOut();
// Load the content while fading out
$('#content').load(ahref, function () {
// Wait for the fade and slide to complete
$.when($container.promise(), $content.promise()).then(function () {
// Slide down and fadein (in sequence)
$container.animate({
height: 'show'
}, 500, function () {
$content.fadeTo('slow', 1.0);
});
});
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/pffm1tnb/3/
The only issue with this version is that the load may complete faster than the fadeout/slideup and show the new data too early. In this case you want to not use load, but use get (so you have control over when to insert the new content):
// Load the content while fading out
$.get(ahref, function (data) {
// Wait for the fade and slide to complete
$.when($container.promise(), $content.promise()).then(function () {
$content.html(data);
// Slide down and fadein (in sequence)
$container.animate({
height: 'show'
}, 500, function () {
$content.fadeTo('slow', 1.0);
});
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/pffm1tnb/4/
Notes:
return false from a click handler does the same as e.stopPropagation() and e.preventDefault(), so you usually only need one or the other.
I started with the JSFiddle from #Pete as no other sample was handy. Thanks Pete.
Update:
Based on the full code now posted, you are returning full pages (including header and body tags). If you change your code to .load(ahref + " #content" ) it will extract only the part you want. This conflicts with the second (better) example I provided which would need the pages returned to be partial pages (or extract the required part only).
Additional Update:
As $.get also returns a jQuery promise, you can simplify it further to:
$.when($.get(ahref), $container.promise(), $content.promise()).then(function (data) {
$content.html(data);
// Slide down and fadein (in sequence)
$container.animate({
height: 'show'
}, 500, function () {
$content.fadeTo('slow', 1.0);
});
});
The resolve values from each promise passed to $.when are passed to the then in order, so the first parameter passed will be the data from the $.get promise.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/pffm1tnb/11/
The issue is because you're not waiting for the hide animations to finish before loading the content, or waiting for the content to load before starting the show animations. You need to use the callback parameters of the relevant methods. Try this:
$(document).on('click', 'a', function(e) {
e.preventDefault();
var ahref = $(this).attr('href'),
$content = $('#content'),
$contentContainer = $('#content_container');
$contentContainer.animate({ height: 'hide'}, 500);
$content.fadeTo('slow', 0.25, function() {
// animation completed, load content:
$content.load(ahref, function() {
// load completed, show content:
$content.css({ opacity: 0.0 }).fadeTo('slow', 1.0);
$contentContainer.animate({ height: 'show' }, 500);
});
});
});
Note that for the effect to work the most effectively on the UI you would need to perform the load() after the animation which takes the longest to complete has finished.
Instead of using the load() function, you can use the get() function and its callback paramater to save the HTML into a variable before actually putting it into the element with html().
After doing all the animations to fade out and close the old box (and maybe inside an animation-finished callback function) you'll want to use something like the following:
$.get(ahref, function(data) {
// JQuery animation before we want to see the text.
$('#content').html(data); // actually inserts HTML into element.
// JQuery animation to fade the text in.
});
Using a bunch of the code everyone posted here, I rewrote the segment I originally had to follow suit. This is now my working result.
$(document).ready(function() {
// Start-Up Page Load (Cover, ToC, etc.)
$('#content').load('pages/page1.htm');
// Navigating Pages
$(document).on('click', 'a', function(e) {
e.preventDefault();
var ahref = $(this).attr('href');
$('#content').fadeTo('slow', 0.0)
$('#content_container').animate({height: 'hide'}, 500, function(){
$('#content').load(ahref + '#content', function(){
$('#content_container').animate({height: 'show'}, 500, function(){
$('#content').fadeTo('slow', 1.0);
});
});
});
return false;
});
});
You can use deferred or callbacks function
$(document).on('click', 'a', function(e) {
e.preventDefault();
var ahref = $(this).attr('href');
var dfd1 = $.Deferred();
var dfd2 = $.Deferred();
var dfd3 = $.Deferred();
var dfd4 = $.Deferred();
$('#content_container').animate({height: 'hide'}, 500, function(){
dfd1.resolve();
});
dfd1.done(function() {
$('#content').fadeTo('slow', 0.25, function() {
dfd2.resolve();
});
});
dfd2.done(function() {
$('#content').load(ahref, function() {
$('#content').css({opacity: 0.0});
dfd3.resolve();
});
});
dfd3.done(function() {
$('#content').fadeTo('slow', 1.0, function() {
dfd4.resolve();
});
});
dfd4.done(function() {
$('#content_container').animate({height: 'show'}, 500);
});
return false;
});
In my code I have external script that adds some element to my page. This script loads async after document.ready:
<script src="http://any.com/script.js"></script>
This script contains next:
$.ajax({
url: '/anyScript',
complete: function(){
alert('yo'); // FIRED
$('body').append('<div id="xxx" />'); // FIRED
}
});
I need to wait until this element will appear and add some styles to it
$(function(){
$('body').on('load','#xxx', function(){
$(this).css({
background:'red',
width: 100,
height: $('#first_el').height()
});
});
});
This doesn't fire. What to do?
UPDATED: http://jsfiddle.net/81ucdoLo/1/
This solution is based on the assumption that you don't have any control over the external script. So the proposed solution is to use an interval based solution to check whether the target element is loaded if so style it and then stop the interval.
In that case, try use $.getScript() to load the script like
jQuery.getScript('http://any.com/script.js', function () {
var interval = setInterval(function () {
var $el = $('#xxx');
if ($el.length) {
clearInterval(interval);
$el.css({
background: 'red',
width: 100,
height: $('#first_el').height()
});
}
}, 500);
})
Demo: Fiddle
You can try using ajaxComplete as shown :
$( document ).ajaxComplete(function() {
$('#xxx').css({
background:'red',
width: 100,
height: $('#first_el').height()
});
});
Working Demo
This should wait for the element to be ready:
$(function(){
$("#xxx").css('top','123px');
//OR
$("#xxx").addClass('topMargin');
});
Do somthing like this, call your js function using window.onload, it will execute doSomthing function after your page load.
window.onload = function() {doSomthing();}
function doSomthing()
{
$("#xxx").css('top','123px');
}
Or add timeout,
setTimeout(doSomthing,1000);
this will delay the call process, and will call after specified time.
What if you try this :
JSFiddle Demo:
I updated your demo.
I'm having a tricky time with this code.
First, I have a series of images, each within an anchor.
a > img
a > img
a > img
The functionality I want is, when you roll your mouse over the image it dynamically adds 2 share buttons to the anchor:
a > .fb + .twitter + img
When you roll off they get removed.
The problem is, I also have a lightbox which binds to the a. That means when you click one of the share divs, it shows the share box properly, but it also triggers the lightbox.
I have tried everything to stop this... preventDefault(), stopPropagation() and return false. None of them stop the div click from bubbling to the anchor and triggering the lightbox.
First is my code for the rollovers. App.postImages is just a cached collection of jQuery image anchors. I use .add() to also add embedded video containers.
rolloverShares: {
divs: $('<div class="image-rollover rollover-facebook">Facebook</div><div class="image-rollover rollover-twitter">Twitter</div>'),
init: function() {
var _this = this;
App.postImages.add('.embed-container', '#content-wrapper').hover(
function() {
_this.divs.prependTo($(this)).show();
},
function() {
$('div', this).remove();
}
);
$(document).on('click', '.rollover-facebook', function() {
Social.facebook.popup();
return false;
});
$(document).on('click', '.rollover-twitter', function() {
Social.twitter.popup();
return false;
});
}
},
Here is my lightbox code. Nothing fancy. If it matters, the .on() in the block below makes it so you can click anywhere on the lightbox to close it, not just the image.
lightbox: function() {
if (isDesktop) {
App.postImages.nivoLightbox({
effect: 'fade',
theme: 'default',
keyboardNav: false,
clickOverlayToClose: true,
errorMessage: 'The requested image cannot be loaded. Please try again later.'
});
$(document).on('click', '.nivo-lightbox-image img', function() {
$(this).closest('.nivo-lightbox-overlay').find('.nivo-lightbox-close').click();
});
} else {
App.postImages.click(function(e) {
e.preventDefault();
});
}
},
Also I suppose i should put what's in App.postImages. It's just this:
$('a img', '#content-wrapper').not('.share-button img').parent().addClass('post-image')
I hope someone can help with this problem. I am using ui Dialog that pops up on clicking a link with the same class. The problem is that the link work great once but if i click it again or another link with the same class then only the overlay loads but not the content box in IE only. It works great in firefox.
My script includes an ajax post, if i remove the ajax code then the box works fine on every click.
My code:
$().ready(function() {
$('#dialog').dialog({
autoOpen:false,
title: $(this).attr("title"),
modal: true, width: 450, height:"auto", resizable: false,
close: function(ev, ui) { $(this).remove(); },
overlay: {
opacity: 0.5,
background: "black"
}
});
$(".mybutton").click(function(){
$.post($(this).attr("href"), { },
function(data) {
$('#dialog').html(data);
}
);
$('#dialog').dialog('open');
return false;
});
});
I have multiple links with the class "mybutton" and a div with the id #dialog . I am also using the latest version of jQuery and ui.
Any help would be greatly appreciated. Thanks
I am using IE8, jQuery 1.3.2, jQuery UI 1.7.1
The post is done asynchronously by default. It looks like you expect it to be synchronous. Try moving the open of the dialog into the callback after the data is set rather than in the click function -- which may execute before the callback returns.
move the open into the callback...
$('#dialog').html(data).dialog('open');
I was having the same problem. I resolved it by managing the state of the Dialog myself...creating a new one and disposing of it each time.
function makeDialog()
{
var html = '';
html += '<div>My dialog Html...</div>';
return $(html).dialog(
{
position: 'center',
modal: true,
width: 518,
height: 630,
autoOpen: false,
close: function() { $j(this.remove(); }
});
}