Access element inside colorbox - javascript

$.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() ?

Related

Change window onload to work after pagination

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();
});

Creating an iframe from JQuery - properties are not working, why not?

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.

Jquery On element load from external script

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.

json2html, I need to add click events to the resulting html

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;
});

Jquery Colorbox issue with firefox

I am populating anchor links in repeater through javascript, I am poping up the those links with colorbox iframe.
Its working fine in IE7,Safari, Chrome, but not in Forefox(14.1).
In firefox its opening in a new window, instead of opening in colorbox iframe.
function BidCountFormatter(BidCount, AuctionID) {
if (parseInt(BidCount) > 0)
return "<b><a class=auctionhistorybox href=popupauctionhistory.aspx?auctionid=" + AuctionID + ">" + BidCount + "</a></b>";
else
return "--";
}
$(document).ready(function () {
$(".auctionhistorybox").colorbox({ iframe: true, width: "35%", height: "60%" });
});
As the anchor links were dynamically generated at run time, so I had to rebind ColorBox events after that:
instead of doing " $(document).ready"
$(document).ready(function () {
$(".auctionhistorybox").colorbox({ iframe: true, width: "35%", height: "60%" });
});
I called below function after generating the "auctionhistorybox" links in repeater
function bindColorBoxEvents() {
$('.auctionhistorybox').each(function (i) {
$(this).unbind('click');
$(".auctionhistorybox").colorbox({ iframe: true, width: "50%", height: "95%" });
});
}
appreciate your help #Vector.

Categories

Resources