What's the way to move #content into the #wrapper?
index.html
<iframe id="my-iframe" src="./iframe.html"></iframe>
<div id="content"><p>content</p></div>
iframe.html
...
<div id="wrapper"></div>
...
The desired result:
...
<div id="wrapper">
<div id="content"><p>content</p></div>
</div>
...
Both plain JS and jQuery will be okay, although plain JS is a bit preferably.
You can't alter an iframe from a different domain, as that is the purpose of the element (to be unaltered by code on your page).
If you control both pages, you can see here: jQuery/JavaScript: accessing contents of an iframe
Related
I have written my own js/jquery code for some of the content on my website. now same content is inside iframe but js/jquery only applied for content without iframe.
any way i can re use same code for both contents ?
example i want this to work for both
$( ".myclass-price-info" ).appendTo( $( ".myclass-single" ) );
Edit:
example: i have this on my page as normal html
<div class="test"> This is test div </div>
Then i have same div inside iframe like below
<iframe src="">
<html>
<body>
<div class="test"> This is test div </div>
</body>
</html>
</iframe>
this is only one div as an example i have full page with same example.
now i already wrote js/jquery to target my .test class and perform some js/jquery action. the js/jquery is working for normal html but not for iframe div. e.g i changed background of div its changed for normal html but not for div inside iframe.
If it's not cross domain:
$('#iframeid').contents().find('.myclass-single').append('.myclass-price-info');
Is there any way to hide a div from source code at runtime
Using jquery, javascript or any other method.
Eg:
<div id="abc">
This will not be displayed on source as well as in page
</div>
By using jQuery remove() or hide() - the item is hidden from front end.
But i need to remove it from source...
I'm using drupal render method.
It is not possible to hide DOM elements in browser. You can only remove them using .remove() or hide with .hide() when rendered. But if DOM exist in code then you can not hide it in view source code component.
Here is one solution
In your body tag add onload event
<body onload='removeDiv()'>
<div id='abc'>
This will not displayed in source code as well as in web page.
</div>
<body>
Javascript
<script>
function removeDiv(){
var div = document.getElementById('abc');
div.remove();
}
</script>
<script>
$('.abc').hide();
</script>
If the .hide() and .remove() doesn't work for you. You can try this.
Make a parent div and set the html part empty
<div id="def">
<div id="abc">
This will not be displayed on source as well as in page
</div>
</div>
<script type="text/javascript">
$("#def").html('');
</script>
If you are using drupal the write a php if condition to hide the content of the div, example
<?php if(1){ ?>
<div id="abc">
This will not be displayed on source as well as in page
</div>
<?php }?>
So here is my body and inside is an iframe that has its own body as well.
<body>
<div id="container_container">
<div id="header_container">
<div id="logo_container"><br>
<div id="auth">
</div>
</div>
</div>
<div id="content_container">
<div id="main_container">
<div id="graphs_bom_container">
<div id="form_upload"></div>
<iframe id='my_iframe' name='my_iframe' src="" >
<html>
<head></head>
<body>
</body>
</html>
</iframe>
</div>
</div>
</div>
</div>
</body>
So if i am returning from a controller to the iframe (writing something to it) and then I want to change the background image of the top 'body' tag not the one one the iframe. I can change the background image of the body on the iframe but not the main body tag up above.
This is what I have:
document.body.style.backgroundImage='url(images/test.jpg)';;
So this changes the iframe body tag but I would like to reach the higher body tag at top for the whole page. Any suggestions? And need to do this using javascript only no jquery.
Bear in mind that i am return into an Iframe from the infamous ajax iframe file upload. Once the file upload (image in this case) is complete it should then change the background of current page.
If you do like this
document.body.style.backgroundImage='url(images/test.jpg)';
then it will set the background image of the whole page including the iframe body tag also.
One thing you can do is again change the background color of the body tag of iframe to the default white color.
window.frames[0].document.getElementsByTagName("body")[0].style.backgroundColor="white";
var iframe = document.getElementById('my_iframe');
And To get the content document you can use:
var contDoc = iframe.contentDocument || iframe.contentWindow.document;
contDoc.style.backgroundImage='url(images/test.jpg)';
What would be a good way to show hidden content with javascript, without having the image elements <img src="myimage.jpg"> of the hidden content load their images in google chrome or any other browsers until the content is actually shown?
hiding the content with the css rule display: none will not prevent the images from loading, and I would like to avoid using ajax calls.
EDIT 1 as discussed in the comments, a better alternative would be to use a template. As an example I picked John Resig’s Microtemplating engine:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = tmpl('content', {});">show div</button>
See fiddle
EDIT 2
As the original poster commented, it's perfectly possible to grab the contents of a <script type="text/html"> element. Templating engine's not necessary:
<div id="content_container">
<script type="text/html" id="content">
<div>
<img src="..."/>
</div>
</script>
</div>
<button onclick="document.getElementById('content_container').innerHTML = document.getElementById('content').innerHTML;">show div</button>
First Answer
(see in edits)
To do what you want within your requirements you could have javascript write the content when you want it displayed. So you would store your HTML in a javascript string and just use script to then insert it into the page when you want it. Its not a very nice way of doing it but it would mean that it would only load images at that point.
Alternatively you could put the HTML in but have the images pointing at nothing (or a blank placeholder, etc.) and then use script to programatically populate the image sources to the correct values when you call the show function to show the page.
Which of these you choose is probably more about readability than anything else though I would favour the second approach (just tweaking the image sources).
First, define a CSS style:
.invisible {
display: none;
}
Add this class to the objects in the HTML. Then anywhere in the JavaScript, simply add or remove the class, or change the display to block or float etc. In jQuery:
http://api.jquery.com/addClass/
http://api.jquery.com/show/
EDIT:
If you don't want the image to load, then use an AJAX call instead.
http://api.jquery.com/jQuery.get/
jQuery.get('myImage.jpg', function(data) {
jQuery('.imageContainer').html(data);
});
EDIT 2:
Load the src into the img once it's needed. You could check the scroll position etc.
http://jsfiddle.net/LYMRV/
Seems like it is possible to hide content using a script tag with type="text/html", it even prevents any images and iframes from loading in the background,
for example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.addEventListener('click',function(e){
if(e.target.id=='content_show'){
e.preventDefault();
document.getElementById('content_visible').innerHTML = document.getElementById('content_hidden').innerHTML;//document.getElementById('content_hidden').text also works
}
});
</script>
</head>
</body>
<img src="image1.jpg"/>
<script type="text/html" id="content_hidden">
<img src="image2.jpg"/>
<img src="image3.jpg"/>
<img src="image4.jpg"/>
</script>
Show Content
<div id="content_visible"></div>
</body>
</html>
Only thing to keep in mind is to avoid placing script tags inside #content_hidden.
Now if anyone is friendly enough to point out every flaw in this method, so that we can all benefit.
Is there a way to do this?
page1.php
--has
<div id="main">
<div id="content">hello</div>
</div>
index.php
--has
<div id="main">
</div>
Can I somehow grab the data from page1.php inside of the content div and load it into the main div in my index.php?
I have done this with the code provided at css-tricks url: http://css-tricks.com/examples/DynamicPage/
But this uses hash change events. I don't want to use the hash feature, just the load content feature, but I can't seem to isolate the code for that because I think it's built into the bbq hashchange plugin.
Is there an Ajax way of doing it?
Something like
$(selector).find('#main').load('#content');
Just put a filtering selector after the URL in .load's first argument:
$(document).ready(function() {
$("#main").load('page1.php #content');
});
That will inject the #main div in the current page with the contents of #content from page1.php.