StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h3>FINAL EDIT:</h3> <p>There are two problems:</p> <ol> <li><p>Use <code>$('#source').contents()</code> instead of simply using <code>$('#source')</code></p></li> <li><p>The css rule for <code>.hover</code> is not visible in the context of the iframe.<br> Either use <code>.css()</code> to set style directly, add the css links in <code>demo.php</code> or clone all styles in the main document into the iframe with jQuery.</p></li> </ol> <p>Also you should avoid <code>.live</code> as there seem to be <a href="https://stackoverflow.com/questions/1655862/jquery-click-even-on-element-inside-iframe">some issue</a>s inside iframes (when using live jQuery binds special eventHandlers on the document, and checks events when they bubble up)</p> <p>Here is a working example (<a href="http://jsfiddle.net/danmana/pMBw2/" rel="nofollow noreferrer">jsFiddle link</a>):</p> <pre><code>var $c = $('#source').contents(); //clone all styles from this document into the iframe $c.find('head').append($('style, link[rel=stylesheet]').clone()); $c.find('body').prepend('<b>This is a test</b><br><b>Click here</b>'); $c.delegate('b', 'hover', function() { $(this).toggleClass('hover'); }); $c.delegate('b', 'click', function() { alert('You clicked on:' + $(this).text()); }); </code></pre> <hr> <h3>ORIGINAL ANSWER:</h3> <p>Your problem is that you are using the iframe as context. You should use the frame document instead.</p> <p>Also just for safety you might want to add your code in the onload event like this:</p> <pre><code>var doc = window.frames['source'].document; $(doc).ready(function(){ $('body').prepend('This is outside the iframe<br>'); $('body',doc).prepend('This is inside the iframe<br>'); }); </code></pre> <p>You can view this <a href="http://jsfiddle.net/danmana/QBVfw/" rel="nofollow noreferrer">live jsFiddle example</a>.</p> <hr> <h3>EDIT 1:</h3> <p>Ok, so the actual problem is that the css styles are not visible within the iframe.</p> <p>For example if you use <code>$(this).css('color':'red')</code> instead of <code>addClass</code> it would work. See the updated jsFiddle</p> <p>What I suggest is either to have the correct css styles already in <code>demo.php</code> or inserted afterwards like so:</p> <pre><code>$('head',doc).append($('style, link[rel=stylesheet]').clone()); </code></pre> <p><a href="http://jsfiddle.net/danmana/QBVfw/11/" rel="nofollow noreferrer">updated jsFiddle</a> - with addClass and cloning of styles</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload