I have an iFrame in a html page myPage.html where I am displaying another page otherPage.html. otherPage.html is a complicated page with many elements. I want to display only one div in the iFrame. All the others should remain hidden. How can I do this?
Instead of the iFrame, I tried to use the .load() function in jQuery. But for some reason, the page does not load. The otherPage.html is served from an IIS server and the page is constructed from purely Javascript. I have no idea why nothing is loading when I use the load() function.
How would I go about achieving this?
Update:
Here are some clarifications:
I tried to use the .load() function on myPage.html. Anyway, after fiddling around, I found the following to work:
For the div that I want to show, I hide all its siblings and also hide all the siblings of its parent. The following jQuery statement seems to do this:
$("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();
I have only one issue now. When I do the following:
Load myPage.html in Firefox (It also loads otherPage.html in an
Iframe)
Manually open firebug and type
$("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();
it seems to hide everything else.
But then I want to automate it. In other words, when I load myPage.html I want it to load the contents of the iFrame. Once the iFrame contents are loaded I want to then run this script:
$("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();
I cannot get this to work. I have tried these two approaches so far:
$(document).ready(function() {
$("#myFrame").ready(function () {
$("#myFrame").contents().find("#chart1").show().parentsUntil('body').andSelf().siblings().hide();
});
});
I have also tried to use
$("#myFrame").load(function () {
instead. But in both these cases the script does not hide the other elements. Since, the script works when I use it manually in the console, I assume that somehow it is running before all the elements are loaded. Please give me your thoughts.
Hide everything within the iFrame by something like $("#myIFrame *").hide(); or you can set the css display property to none.
Using CSS selector, re-display only the div you want. If your div has an id this is pretty easy : $('#myDiv').show();
If the div does not have an id, see if you can give it one. If creating an id for your div is not an option, try to give its parent an id/class.
If ID is not an option you may also find selectors like :nth-child() useful.
You say you are using the load() function. Are you using this in the parent page or the iframe page? Do you really mean to use the ready() function instead?
$(document).ready(function(){
// some code here ...
});
Using ready() on the document will ensure that the DOM elements have completely loaded, and then will execute the code in the handler. Without more information I'm not sure I can help much with what you're trying here.
Using an iframe you should first remember that if you want only one div to be visible and all others to be hidden you must make sure that the "visible" div is not inside an "invisible" container. If the container is hidden, all children will be hidden too.
If you had a div "showme", then something like this would work:
<div id="showme">visible text</div>
<div style="display:none;">hidden text</div>
But doing it this way, everything would be hidden:
<div style="display:none;">
hidden text
<div id="showme">supposed to be visible, but hidden!!</div>
</div>
If you are changing the visibility, or display, of an element you can do it in the iframe page like this:
// using jQuery...
// set the display css to an empty string, defaulting to visible (not 'none')
$('#showme').css('display','');
// set other elements to be hidden...
$('#hideme1').css('display','none');
$('#hideme2').css('display','none');
$('#hideme3').css('display','none');
If you want to change the visibility of elements from the PARENT page you first access the iframe, then change the elements within it:
// using jQuery...
// get the iframe. ps. you dont have to put the $ in front of the variable name.
// I chose to do it this way to remind myself it's a jQuery object.
var $f = $('#myiframe').contents();
// set the display css to an empty string, defaulting to visible (not 'none')
$f.find('#showme').css('display','');
// set other elements to be hidden...
$f.find('#hideme1').css('display','none');
$f.find('#hideme2').css('display','none');
$f.find('#hideme3').css('display','none');
See this article for example(s) on working with elements in a child iframe:
http://www.computerhowtoguy.com/jquery-and-iframes/
As I understood your question. You can do like this, pass div id to get displayed as hash in your otherPage.html url like you have a div with id first, you can pass first as hash
<iframe src="otherPage.html#first" />
and in otherPage.html, you can get this hash and according to that show your div, but make first all your sections hidden, using css will be easy, only add "display:none;" in css.
and try this : in otherPage.html
$(function(){
//var divToShow = location.hash.subString(1);
//$('#'+divToShow).show();
var divToShow = location.hash;
$(divToShow).show();
});
Related
I have an html element like this:
<div id="myelement_9082173219731721923">
I want to add a class to this element to select it with css.
It is loaded after the other stuff on the site, because it´s generated by an external javascript.
That´s why I tried:
$('[id^="myelement_"]').load(function()
{
alert("im here");
$('[id^="myelement_"]').addClass('myclass');
});
But it doesn´t reach the alert. What am I doing wrong?
Thanks
This should do the work, load on the div element will never happen. Use a DOM change listener instead. And you don't need the quotes around the id selector. It is not wrong, but not a must have.
$("body").on("DOMSubtreeModified", function() {
$('[id^="myelement_"]').addClass('myclass');
});
Working example.
You should change body to the most smallest selector of your DOM, where the div#myelement_ will be appear. And if it happens only one time, change on to one. Then the listener disables itself and will not run constantly on changes.
javascript experts,
i have this script in my template to load some html divs.
$(document).ready(function() {
$('body').append('<div id="wrap"><div id="wrapp-inner"><div id="wrapleft">'
+ $("#showlink").html()
+ '</div><div id="wrapright">This is text display by append</div></div></div>');
});
Now what problem i got
Now whenever i used to remove any other ID by getelemebyID script in a template then the above html all divs like wrap,inner-wrapp etc becomes completely removed. why it happened ?
Example i used the below script to remove some other IDs. but it also reflect that append body html div ids removed too. why as you see i set only slider id to remove which is not in that append body. but it reflect that append body html divs too. why ?
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
document.getElementById("slider").remove();
})
//]]>
</script>
working/showing the append divs when there is no "getelementbyid removed" script used for any Id: https://jsfiddle.net/83fbnwe4/15/
not working/not show the append divs when i set "getelementbyid removed" for any other iD: https://jsfiddle.net/83fbnwe4/18/
Please could you tell me why it happened. Why it reflect also the append html divs, since i only set #slider to removed, not that append bodys htmls.
Your issue is you are attempting to call the jQuery remove method on a standard DOM element. The remove method only works on jQuery objects. You really want to do this:
$(document).ready(function() {
$("#slider").remove();
});
If you do not want to use jQuery to remove the element, you can do this:
var element = document.getElementById("slider");
element.parentNode.removeChild(element);
This is how Javascript works. You cannot remove elements directly, you need to go to its parent and then use the removeChild method to remove an element. This is why jQuery uses this approach behind the scenes and makes it look a lot easier than it actually is.
In the newer versions of the Javascript specification, remove is an added method. However, it is still best practice to use the above approach or a polyfill (which uses this same approach) because Safari mobile does not support it, and none of the IE's (only Edge) supports it as well.
I have a div (let's call it potatoes) that I want to appear inside another div (food). The typical way to do this would be:
$("#food").html ( $("#potatoes").html());
However this doesn't accomplish what I want. Instead of using the actual "potatoes" div, jQuery seems to be copying that content into the food div, where the original content still exist in the browser.
I want the ACTUAL div (potatoes) to disappear from its place and to appear in the container div (food) without having to do perform .hide() ... or similar methods.
Reason why? I have selectors that enable and disable buttons in the potatoes div, and they seem to trigger the original potatoes div content, but NOT the duplicate that has been loaded into the food div.
Does that make sense? Can anyone give insight as to why this is and what I should do?
Side note:
$(document).on('click','#button-loaded-with-page', {} ,function(e){
this.disabled = true;
$('#button-inside-potatoes-div').hide();
});
The above example is what I would like to achieve, but does NOT hide the button when the potatoes content has been loaded into food by the .html() method. Instead it hides the original button on the page, and not the duplicated one.
What I am trying to achieve: https://jsfiddle.net/o9kshscj/6/
You can just pass the object to html()
$("#a").html($("#b"));
Demo: Fiddle
You could use append to change the parent. This will move the #potatoes object out of it's current DOM position, into the #food div as a child
$("#food").append($("#potatoes"));
You can just remove the div after replacing like this:
$("#a").html($("#b").html());
$("#b").remove();
$("#button-to-enable").prop("disabled", false);
Similar to Firebug Inspect I have a block of code to read the DOM and upon mouseover highlight the current element, and upon click to print out that current element's DOM location. See demo:
http://jsfiddle.net/94EaH/4/
I'm trying to modify the code to work on the content within an iframe. I don't want it to work on the current page AND iframe's DOM, because I know that won't work. I want to change the selector the code is bound to, to be the iframe. The iframe is of course embedded within a page, but only the iframe's DOM is being analyzed.
I can manipulate the parent through the iframe like this:
<iframe id="testFrame" src="blah.html" width="200px" height="200px"></iframe>
<div id="testBox">text text text</div>
$("#testFrame").contents().bind("click", function() {
$('#testBox').css('color', 'green');
});
But if I add one more line to modify the content of a DIV inside the iframe.. nothing.
$("#testFrame").contents().bind("click", function() {
$('#testBox').css('color', 'green');
$('#iframeDiv').css('color', 'red'); //this produces no result
console.log(event.target); // I get no information out of this also..
});
http://jsfiddle.net/94EaH/3/
It's difficult to show full functionality, since blah.html (iframe source) can't be displayed on jsfiddle..
Any ideas on how I could extend this functionality to an iframe's DOM instead of the #container element of the current page I've used in the example?
The iframe file is on the same server, so no security issues
If you're trying to access an element in an Iframe with jQuery from the parent window, then you've got a problem. Imagine you've got a iframe. Inside the iframe, there's a div with id 'container'. If you do this from the parent document, $('#container'), you'll find the jQuery object is empty.
jQuery is bound to the window and document objects of the page in which it is declared (loaded). It does no matter that you're constructing it from an event handler bound to the iframe, the $ function you're using still belongs to the parent window. If you load jQuery in the iframe's page, however, you could get references to the objects like this:
$('#testFrame')[0].contentWindow.$('#container');
Here, the first '$' and the second '$' do not refer to the same jQuery constructor.
Edited I forgot the [0] to access the first iframe in the jQuery object.
I hope this helps you.
I have a div that has this elements:
<div id = "menu">
<a>Elemento1</a><br/>
<a>Elemento2</a><br/>
<a>Elemento3</a><br/>
</div>
Each time one of the elements gets clicked I want a new div with different content to be added beside this list, depending on which element is clicked, it should add a diferent list. I'm new to web development, and I found that using the jQuery function .replaceWith() may do it, but is there any way I can use this function, adding divs I got in other .html files?
Thanks!
To get a certain part of another HTML file, use jQuery load function. A basic usage in your case, would be:
$('#result').load('ajax/test.html #container_you_want_to_load');
To add an element after or before the link, you have a few choices. The question is if you really need it. Perhaps it's enough to define one target div into which you'll load your content. In that case, the above example would suit perfectly.
If you however want to add element next to <a> tag, consider using after or before jQuery functions.
To catch a click even on one of your links, check click
Why not just have <div id="content"></div> after the menu, then use
$("#content").load("your_file.html");?
replaceWith is used to replace some DOM elements with different ones. I don't think this function can solve this.
You can use .load function to get html files content and insert it wherever you want. Just bind a click event to every link and use their href atributtes to get the respective file. Don't forget to return false in the end of the event.
something like this:
<div id="menu">
Elemento1
Elemento2
Elemento3
</div>
<div id="content"></div>
$("#menu a").click(function(){
$("#content").load(this.href);
return false;
});