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();
});
});
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 came across similar questions, but it did not have the exact problem/solution I was hoping for. I apologize in advance if this has been answered before and I missed it.
I have dynamic HTML code that I insert on AJAX return from db:
for(var i=0;i<data.Links.length;i++){
$('#vid-list').append('<li class="vid-item" onclick="startVideo(\''+data.Links[i]+'\')"><div class="thumb"><img src="'+ data.Thumb[i]+'"></div><div class="desc">'+data.Name[i]+'</div></li>');
}
data.links is an array of youtube embed links. data.Name is an array of titles, data.thumb is the respective thumbnail images and so on.
startVideo is a fucntion in my JS file defined as this:
$(function(){
function startVideo(srcUrl){
$('#popup2').style.display ='block';
document.getElementById('vid_frame').src=srcUrl;
}
});
It passes the link from the dynamic HTML to play the video in an iframe popup. The HTML code for that is :
<div class="vid-list-container">
<ul id="vid-list">
<!--need to insert videos here-->
</ul>
</div>
<div id="popup2" class="popup">
<iframe id="vid_frame" frameborder="0" height="315" src="" width="560" allowscriptaccess="always">
</iframe>
<a class="close" href="#" onclick="toggleVideo('hide')">
<img id="close-icon" src="../images/info-close-icon.png"></a></div>
</div>
So this is my problem: The HTML looks fine after loading. Data gets properly populated within the HTML elements.
But when I click on the video, no popup appears. i.e. startVideo() does not get called onClick event. This code worked fine with static HTML code. I read other questions and it was said that if the event happens after the dynamic element has completely loaded, there should not be problem with the binding.But that is not the case here.
Are there any other checks that I could do?
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>
This question already has answers here:
Change iframe src by clicking a link
(2 answers)
Closed 8 years ago.
following is the iframe code i want to know how can i change the src link when lets say i'll click on any button and it changes the link and shows result accordingly without page reload
Thanks,
<iframe name="reloader" id="reloader" width="500" height="400" src="http://www.google.com/"/>
$('#yourBtn').on('click', function(){
$('#reloader').attr('src', 'yourNewLink');
})
This is the perfect solution, if you can use links in place of button:
Basic jQuery question: How to change iframe src by clicking a link?
( in case you were overcomplicating )
<a href="http://www.somewebsite.com" target="reloader">
click here
</a>
<iframe name="reloader"
id="reloader" width="500"
height="400"
src="http://www.google.com/"/>
without jquery ( being seo friendly and degrades well )
<a href="http://www.somewebsite.com" class="mybutton" target="reloader">
click here
</a>
<iframe name="reloader"
id="reloader" width="500"
height="400"
src="http://www.google.com/"/>
<script type="text/javascript">
$(".mybutton").click(function(e) {
/* stop the link */
e.preventDefault();
/* get the url from the link */
var url = $(this).attr("href");
/* do something with it */
$("#reloader").attr("src",url);
});
</script>
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>