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');
Related
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
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 }?>
I want to make a dynamic site which loads the div content from other pages into the div content that has the links which use the function .load(). It works if the div you are changing is another div than the content div.
Here is the command that I think that should work:
<div class="container">
<div class="links">
CLick here<br />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$("#button").on("click", function(){
$("#container").load("example.php?q=2 #container > *");
});
</script>
</div>
</div>
If I replace #container with another div, the whole procedure works. But when I try to replace the container div it does absolutely nothing. In example.php there are some PHP functions which populate the inside of another div through MySQL.
How can I make the load function work on the upper div?
The problem is that instead of class(.) I appended the id tag(#). The solution was to add to the class container an id container. <div class="container" id="container">
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)';
Basically, I have a whole lot of these collapsing divs on one page, which have iframes inside the collapsed div. (I used css to make the clickable div look like a button.)
The problem is that it's taking a very long time for the page to load, because basically it's loading every single domain in each iframe every time the page loads.
I want to delay loading any of the iframes unless the div is clicked.
Here is my code currently:
the Javascript
jQuery(document).ready(function() {
jQuery(".cont").hide();
jQuery(".title").click(function()
{
jQuery(this).next(".cont").slideToggle(500);
});
});
the HTML
<div class="layer1">
<p class="title">test</p>
<div class="cont">
<iframe src="http://example.com" scrolling="no"></iframe>
</div>
<div class="cont">
<iframe src="http://example2.com" scrolling="no"></iframe>
</div>
<div class="cont">
<iframe src="http://example3etc.com" scrolling="no"></iframe>
</div>
still need a solution.
What about only inserting it into the DOM after the button is clicked?
jQuery(document).ready(function() {
$("cont1").click(function()
{
$("cont1").html("<iframe src='http://example1.com' scrolling="no"></iframe>")
}
);
$("cont2").click(function()
{
$("cont2").html("<iframe src='http://example2.com' scrolling="no"></iframe>")
}
);
});
And so on. And you could use a "remove" button to remove the html afterwards?