JQuery :: Re-Initialize Colorbox From Within IFrame
Apr 25, 2011
As you no doubt know, a link that is generated on the fly (ie by a JS function) and is supposed to invoke a ColorBox (due to a predefined selector) doesn't work as the link didn't exist when the ColorBox was initialised e.g., you have this in the head:
$(document).ready(function(){
$(".frmMe").colorbox({iframe:true, innerWidth:1200, innerHeight:640});
}
Then a link generated by JS at a later time (for example triggered by a users click) like:
<a href="blah.php" class="frmMe">Easter Eggs</a>
Whenever I dynamically create a link like the one above, I re-run the line:
"$(".frmMe").colorbox({iframe:true, innerWidth:1200, innerHeight:640});" afterwards to ensure the colorBox functionality works.
Now however, I have an instance where a link on a parent page like the above is created from within an iFrame (on the fly using JS). Unfortunately however, I haven't been able to find a way to re-intialize the ColorBox on the parent page from within the iframe to ensure that the new link has ColorBox functionality enabled.
I have tried:
$('.frmMe', parent.document.body).colorbox({iframe:true, innerWidth:1200, innerHeight:640});
but it seems to have no affect and generates no errors (yet this follows the format I use to create the link. On the page which is:
$('#updateBx', parent.document.body).html('<a href="" class="frmMe">Glorious</a>');
View 1 Replies
ADVERTISEMENT
May 9, 2011
I'm interested in putting on a simple, fade, slideshow. I followed the directions according to this link: [URL].
Here's my code in the <head> </head>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="[URL]"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="[URL]"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
I uploaded the.JS files.
And here's the HTML:
<div class="slideshow">
<img src="[URL]" width="200" height="200" />
<img src="[URL]" width="200" height="200" />
<img src="[URL]" width="200" height="200" />
<img src="[URL]" width="200" height="200" />
<img src="[URL]" width="200" height="200" />
</div>
They are just stacked up, nothing's happening. Check it out: [URL].
View 6 Replies
View Related
Dec 16, 2011
Does anyone know if there is a way to change the defaults such as number of thumbnails after initialisation? e.g.$('.changeTo16').live('click', function(){//set gallerific stuffnumThumbs: 16});$('.changeTo8').live('click', function(){//set gallerific stuffnumThumbs: 8}); etc...
View 2 Replies
View Related
Aug 26, 2010
I'm initializing a lightbox type plugin after an ajax response. The plugin is usually initialized with .ready, but I've read on this forum that .ready won't work after page load or with dynamic loading. Most posts say to initialize right after the ajax response... I've done this and it works for the first ajax load, but not for the subsequent ajax loads. It should trigger the same code every time ajax is called since it goes through the same function, but it doesn't.
Project Info: This project seems pretty simple... There are links that load content into a DIV via ajax... the content is made up of thumbnails that should launch lightbox...Is there a good way of dynamically initializing plugins after ajax load?
View 1 Replies
View Related
Nov 4, 2010
Is there an approach that I can take to have the URL change and still open a Colorbox?I need to get some tracking code to display in the URL, but I guess the <a> tag isn't really followed when I open the colorbox, so the URL change is cancelled when I click to open the Colorbox.
View 1 Replies
View Related
Apr 29, 2011
I am somewhat new to JQuery and I am trying to use cookies with a colorbox.
Here is the code I'm using
[code]
The end goal is to display the link with the pop_search_searay class (that opens the colorbox) when a cookie is not set. If there is a cookie, then the other link (with id=cookieyes) should display instead (so the colorbox does not open in this case).
I am having trouble with the if cookie is true statement.. After colorbox closes, even if the cookie is set, as soon as I view another page for some reason the cookie seems to reset as I am still seeing the link with the colorbox class displayed.
Is my if true statement incorrect? Do I need to move it somewhere else in the code?
View 2 Replies
View Related
Oct 25, 2011
I'm trying to show a div using colorbox, and for some reason, the following is not working: jQuery("div#the_div_that_i_want_to_show").colorbox();
Calling the function directly, however, does work:
$.fn.colorbox({'href':'div#the_div_that_i_want_to_show', 'open':true, 'inline':true});
And passing the div as an argument also works (with arguments 'inline' and 'open' set):$("div#the_div_that_i_want_to_show").colorbox({'href':'div#the_div_that_i_want_to_show', 'inline':true, 'open':true});
This, of course, is sort of redundant, as we're already selected the element with jQuery; there should be no need to also pass it as an argument.However, when I strip out the 'href' argument this does _not_ work--All I get is an empty colorbox/modal: $("div#the_div_that_i_want_to_show").colorbox({'inline':true, 'open':true});
For completeness, here is the div:
<div id="the_div_that_i_want_to_show" style="font-size: 18pt">Hello world</div>
why colorbox is not receiving the wrapped set from the jQuery selector?This call is very similar to that discussed on the following page:: [URL]
View 3 Replies
View Related
Aug 18, 2010
[URL]you will notice if you click the image, the Colorbox comes up with a new image, BUT if you click the word Details below the image, the colorbox effect does not take place, even though it using the same link as the image. is there a way to make that text link be clicked and have an image pop up in the colorbox style?
View 3 Replies
View Related
Nov 2, 2010
I'm using ColorBox to open a simple popup and it works fine. In the same page I have a link which sends an ajax request which return the entire <body> content that I then use to replace the body of the current page. After I do this replacement, the colorbox does not open anymore. I got no JS errors.
Here is a code which reproduces this behaviour
<html>
<head>
<script src="js/jquery-1.4.3.js"></script>
<script src="js/jquery.colorbox.js"></script>
[Code]....
In the submitAjax() function I simply replace the body of the current page with the same content.
View 9 Replies
View Related
Jul 20, 2011
I have an image that has been resized via CSS to show as 100x100px on an HTML page. When clicked, I want to open the image in a colorbox - so the user can see the non resized/squashed version as it will normally appear. I've worked out how to set the path of the href to itself (so this doesn't have to be changed every time) (see below), although not sure how to get the colorbox part working - I tried changing 'each' to 'colorbox' - as per how you would normally assign the colorbox, and it opens, it just doesn't load the image in it.
<div class="logoImage"><img src="../tym_img_shared/background-2.jpg" alt="Your company logo" /></div>
$(document).ready(function(){
$('div.logoImage img').each(function(){
var $this = $(this);
$this.wrap('<a href="' + $this.attr('src') + '"></a>');
});
});
Thinking about it, perhaps it would be easier to also set the 're' attribute of the link whist setting the source?
$(document).ready(function(){
$('div.logoImage img').each(function(){
var $this = $(this);
$this.wrap('<a rel="gallery" href="' + $this.attr('src') + '"></a>');
});
});
Doesn't work for some reason - but it does if I hardcode the URL and rel?
View 6 Replies
View Related
Dec 15, 2010
I have been trying to display "anythingslider" plugin inside a jquery modal popup. I have tried with both colorbox and simplemodal and both give exact same effect. The effects I am seeing is when the modal window is launched the anythingslider shows the start button and the 2 green 1-2 tabs stacked vertically on top of each other. I don't see anything else (no slides etc).I am testing with the code found here:URL....I am using the setup and example code as it is listed on the page.[code]
View 1 Replies
View Related
Mar 25, 2011
How to declare and initialize an array with key/values using JavaScript and then dynamically creating select dropdown and assigning key/values to the options using JavaScript?
View 1 Replies
View Related
Feb 8, 2009
I understand that there is no need to initialize a variable at the point of declaration. OTH, what is the default type of a [declared] variable? For example:
[Code]...
View 15 Replies
View Related
Oct 6, 2009
I am trying to initialize form elements with the values retrieved from an excel file. I am able to read from excel, but unable to initialize the form elements to values retrieved. No idea where I am going wrong.. code...
View 1 Replies
View Related
May 9, 2011
Is it possible to use Colorbox to individually load the larger versions of images?I want to assign their default of rel="example1" to various images on the same page, but have them display individually rather than in a linked gallery.
View 2 Replies
View Related
Dec 30, 2010
When a user clicks the "Send Carol a Message" button and submits the form I would like the "Message Sent Successfully" alert to display within the modal window. Ideally, I would like for the modal to close after "X" seconds but this is not an absolute necessity
[Code]...
View 1 Replies
View Related
Oct 25, 2010
Have this in parent document:
function ResizeDocument(...) {
$("iframe"
).each(function
(){ $(this
.contentWindow.document).trigger('customresize'
,null
);});
[Code]...
View 2 Replies
View Related
Aug 18, 2009
I am loading a collection of frames as follows (from jsp source, so ignore <%= %> blocks):
<html>
<frameset name="MNGM_OUTER" rows="50,*,20" framespacing=0
frameborder=0 border=0>
<frame name="MNGM_TOP" src="control/top.jsp" scrolling=no
[Code].....
View 1 Replies
View Related
Feb 18, 2011
I am trying to make a comment editor with iframe, and want to trigger the change of content inside iframe, the following code cant work.code....
View 5 Replies
View Related
Oct 7, 2011
Im trying to use javascript history to resize an iframe when a submit button is clicked inside the iframe.
This is what i found so far.
Code:
Us this with iframe:
Code:
Code:
But im not really sure on how to apply this to my iframe, and i know that the resize part also needs to be edited, but what is missing?
View 1 Replies
View Related
Aug 14, 2009
I'd like to resize an iframe into which different (same domain) pages of differing heights are loaded. I can do a first-time resize no problem. It's the subsequent reloads that need to pass back their height to the parent page There seem to be lots of solutions for that around, but few I can see for resizing each time the iframe reloads. One is described here on another board [URL] but unfortunately the test page is no longer around (or indeed the site), so the full code is no longer available there. This one works, almost, for me: [URL] it does resize for me, but not quite sufficiently high each time - about 90% of what is required: [URL] Is there a way to add on sufficient extra margin that scrollbars no longer appear?
View 8 Replies
View Related
Aug 2, 2009
Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really.Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with.We have a central area which can be longer or shorter depending on the forum.
View 3 Replies
View Related
Jan 27, 2010
I have an order-administrations-system with 2 iFrame (left and right). Can I somehow click a link in the right iFrame and use that info to set a value in a field in the left iFrame?
View 1 Replies
View Related
Aug 11, 2011
I have a page A and inside it I have an iframe B. B points to another php file that shows a form (so basically in the iframe we see a form). When I submit the form, I call to another page C that verifies the fields of the form and if they are ok I redirect to page X, if not I redirect to page Y. The problem is that I see page X and Y inside the iframe, and I want to see them in the parent page.
View 1 Replies
View Related
Sep 14, 2011
I have a page that displays in an iframe. How to get the index of the iframe in the parent window in which my page is getting displayed using javascript.
HTML Code:
<html>
<iframe src="A.html"></iframe>
<iframe src="B.html"></iframe>
<iframe src="C.html"></iframe>
</html>
if I run the javascript from B.html then I should get the iframe position as 2. same way, if I run the javascript from C.html then I should get the iframe position as 3.
View 3 Replies
View Related
Mar 29, 2011
I have this, and works fine ... googles for quoted string
<form method="get" action="http://www.google.com/search" target="_self" >
<input type="submit" value=""<%=con.rs.getString("term")%>"" />
</form>
instead I want to display google page in iframe, like:
<input value ="<%=con.rs.getString("term")%>" style ="button" onClick = "document.getElementById('mainContenceFrame').src = 'http://www.google.com/search';" />
View 1 Replies
View Related