There is a iframe fb group like, and need to hide it on click, but jQuery doesnt work
<script>
$(".closeFrame").click(function(){
$("#test").remove();
});
</script>
<div id = "test" class='like-btn'>
<iframe = "#" class="closeFrame" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fzhelechka&width=51&layout=button&action=like&show_faces=false&share=false&height=65&appId" width="51" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>
</div>
First of all, you need to understand the difference between the two elements: the button is the one that has to be clicked and the other element (the div or the iframe) is the one that is going to be hidden. It is important to understand this correctly in order to code the script properly.
Javascript code (using jQuery)
$(".hide").click(function () {
$(".elementtohide").hide();
});
See it in action: JSFiddle
Explanation
The idea is to attach an event to the button that has to be clicked in order to receive the user's click (this is made with the jQuery method called .click()). Inside that, we must especify what is going to happen when the click is done, so we make a call to the jQuery method called .hide() in order to hide the element (I have used a div but you can use an iframe or whatever you want).
Note: as mentioned in comments, .hide() and .remove() have different behaviours: the first one just adds the style display: none to the element and the second removes the element from the DOM, which means that if you had to show it again, you would have to create it. Use the one that better fits your needs.
A code like this can work
<div id = "test" class='like-btn'>
<iframe = "#" onclick="this.parentNode.style.display = 'none'" class="closeFrame" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fzhelechka&width=51&layout=button&action=like&show_faces=false&share=false&height=65&appId" width="51" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>
</div>
but
When you click into an iframe you will click on another part of the world so will not work so the code above will work only if the element isn't an iframe(if is a DIV can work)
so
the solution should be
<div id = "test" class='like-btn'>
<button onclick="document.getElementById('test').style.display = 'none'" value="Press me" name="closeBtn"/>
<iframe = "#" onclick="this.parentNode.style.display = 'none'" class="closeFrame" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fzhelechka&width=51&layout=button&action=like&show_faces=false&share=false&height=65&appId" width="51" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>
</div>
Related
<iframe class="class_name">
<html>
<head></head>
<body>
<div>
<!-- All of the stuff -->
</div>
</body>
</html>
</iframe>
How can I access to elements of this iframe?
.frame("class='classname'")
The above doesn't work.
Although two iframes have the same class, this will hide only the first iframe.
function hide() {
var iframe = document.getElementsByClassName("iframe");
iframe[0].style.display = "none";
}
<iframe class="iframe"></iframe>
<iframe class="iframe"></iframe>
<br>
<button onclick="hide()">Hide 1st Iframe</button>
What does this code does?
document.getElementsByClassName("iframe") gets all the elements with the class iframe and set the elements as the value of a variable named iframe. The number inside [] defines one element of the many. If the number inside [] is 0, the first element out of the group of elements is defined. After [], you can set the property you want.
Try with an id
<iframe id="your_id">
and use
.frame('your_id')
But here it will not work because of the security policy. Try it on your machine.
Read more about X-XSS-Protection.
var frame = document.querySelector(".myframe");
var content = frame.contentDocument;
console.log(content);
<iframe class="myframe" width="560" height="315" src="http://www.weather.gov/" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Assuming that you are using nightwatch - I see you're using .frame() and that is the Nightwatch method for selecting iframes - you cannot switch to an iframe by class, but you can use an index or by name if the element has a name attribute.
These posts should help:
Can't select an Iframe in selenium webdriver
Selecting nested iframe - selenium / javascript / node-js
I have included iframe to other web page as below
<script type="text/javascript">window.addEventListener("message", function(e){var $iframe=document.getElementById("my-iframe"); var eventName=e.data[0]; var data=e.data[1];switch(eventName){case "setHeight": $iframe.height=parseInt(data); break; case "scrollToTop": $iframe.scrollIntoView(); break;}}, false);
</script>
<div style="width:100%; text-align:left;" >
<iframe src="http://mywebpage.com/list?mode=iframe" frameborder="0" height="1000" width="100%" vspace="0" hspace="0" marginheight="5" marginwidth="5" scrolling="no" allowtransparency="true" id="my-iframe"></iframe>
</div>
I have three tabs in iframe page, first tab contains data which don't have long content but third tab having long content.
When i open third tab, iframe height doesn't get increased. Iframe height remains same when loaded for first time and remaining page's content gets hidden.
How can i fix this ?
I have used TBHTML tabs for tab rendering as below.
echo TbHtml::tabbableTabs($tabs);
you can use iframe-resizer jquery plugin to overcome this issue
http://davidjbradshaw.github.io/iframe-resizer/
example
http://davidjbradshaw.com/iframe-resizer/example/
For this you can use following code
document.getElementById("my-iframe").height = (document.getElementById('my-iframe').contentWindow.document.body.scrollHeight) + 'px';
I want to give action to iframe with blur and focus,
The scenario of my code is,I written a android question in webpage,beside that question I displayed android phone picture,what ever the code written below the question,the output will be shown in that picture and if you are out of browsing area,the title will shown as inactive.
action should be infocus or outfocus.
for this command I am writing,
<div class="andr_app">
<iframe src=" <%= request.getContextPath()%>/images/mob_empty.png" width="400px" height="800px" id="iFrameUrl${questionId}" class="mobileDisplayIframe" frameborder="0" scrolling="no"></iframe>
</div>
Please help me in this.
The iFrame element doesn't have focus or blur events, so you need to use the window.
var iframe = document.getElementById('iframe');
var iframeWindow = iframe.contentWindow;
iframeWindow.onfocus = function(){
//focussed
}
iframeWindow.onblur = function(){
//blurred
}
Reference: answer
Finally I got my answer,but not in iframe.
I change iframe to object,
<object data="<%= request.getContextPath()%>/images/mob_empty.png" width="325px" height="560px" style= "padding-right: 85px"; id="iFrameUrl${questionId}" id="iFrameUrl${questionId}" class="mobileDisplayIframe" frameborder="0" scrolling="no">
</object>
This question already has answers here:
How to update/change HTML content with JavaScript and prevent the page from refreshing?
(4 answers)
Closed 8 years ago.
so I'm attempting to make a page where I click on a button and the HTML code of the div next to it changes. Essentially, I want to be able to click a link and my code inside the div changes.
Here are the two different HTML codes:
Number One: (id = contentPOP)
<div id="contentPOP">
<h3>Hit like a girl entry, "Little Black Dress" by One Direction</h3>
<iframe width="500" height="300"
src="https://www.youtube.com/embed/QW6naMc6TWk?list=UUHe-Lb7DWhwT5S7Vzn7abxA"
frameborder="0" allowfullscreen> </iframe>
<br>
<h3>Remembering Steve Jobs</h3>
<iframe width="500" height="300"
src="https://www.youtube.com/embed/q7oyy0FjhAY?list=UUHe-Lb7DWhwT5S7Vzn7abxA"
frameborder="0" allowfullscreen></iframe>
</div>
Number Two (id = "contentNEW")
<div id="contentNEW">
<h3>Slow Motion War!</h3>
<iframe width="500" height="300"
src="https://www.youtube.com/embed/Y2996S-8oEU?list=UUHe-Lb7DWhwT5S7Vzn7abxA"
frameborder="0" allowfullscreen></iframe>
<br>
<h3>1 Year Aniversary of Teddy Bear Productions!</h3>
<iframe width="500" height="300"
src="https://www.youtube.com/embed/7Tim_K74ua8?list=UUHe-Lb7DWhwT5S7Vzn7abxA"
frameborder="0" allowfullscreen></iframe>
</div>
Here is an example of all the code
NOTE: I have no idea how to do this, so a detailed explanation would be very helpful. Also, I want to be able to do this with only JS, no JQuery
First, uncomment the following so it exists on the page:
<!--THE BELOW CODE SHOULD REPLACE THE ABOVE CODE
<div id="contentNEW">
...
</div>
-->
And instead hide it with CSS:
#contentNEW { display: none; }
Then add the following to your newVids() function:
function newVids() {
// target the div you want to change
var div = document.getElementById('contentPOP');
// replace its innerHTML with the innerHTML of the hidden div
div.innerHTML = document.getElementById('contentNEW').innerHTML;
}
This is really a poor way to go about what you're trying to do. You shouldn't think about toggling the visibility of each div, instead of replacing one with the other.
Listen, this is done very easily. Wrap both chunks of code inside of their own divs and give them unique IDs so that you can target them in the jquery. The inittialy hidden one, will have a display:hidden class attached to it and then you can use toggle to switch . Easy!
HERE IS AN EXAMPLE!!!
Good luck!
HTML
<p>This is a paragraph.</p>
<p class="hidden">This is a second paragraph.</p>
<button>Toggle </button>
CSS
.hidden{
display:none;
}
JS
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
I have an iframe that looks like this:
<iframe src="http://www.google.com" height=1000 width="500" id="myiframe"></iframe>
I want to create a link so that when I click on it, the iframe on the page changes. How can I do that using jQuery? Is it related to jQuery attr?
You don't need jQuery for that. You don't even need JavaScript for that.
Give your iframe a name, and target your anchors to point to it:
Foo
Bar
Baz
<iframe name="myiframe"></iframe>
This degrades nicely for people who have JavaScript turned off.
on clicking in the link "click here" // it will take move the link to the iframe as specified....
Click Here
<iframe src="blank.html" frameborder="0" name="test" id="test" width=1200 height=800></iframe>