I have HTML page that has couple of paragraphs and a reference to an IFrame, the IFrame contains a form, with a couple of text boxes, dropdownlist and a button. When a user clicks the button on the IFrame it send's back a thank you message. The only problem is that the two paragraphs on the HTML page are still showing when the thank you message is displaying. How do I hide the two paragraphs when the button on the IFrame is clicked? (I've rapped two paragraphs around a div)
Thanks
Try this code in your iframe script,
$('button').on('click',function(){
$('p').hide();
});
If the paragraph elements are in parent window then use window.parent.document like,
$('button').on('click',function(){
$('p', window.parent.document).hide();
});
Well, without markup or javascript I have to guess, but, assuming both the main document and the document displayed in the iframe are in the same domain, that the div in which your paragraphs are contained has an id of pContainer and your button in the iframe has an id of formButton you can do this (as you say nothing, I assume you're not using jQuery):
In the main document script:
function hideParagraphs() {
document.getElementById('pContainer').style.display = 'none';
}
In your iframe:
window.onload = function() {
document.getElementById('formButton').addEventListener('click', window.top.hideParagraphs, false);
};
Change the ids for those that suit your markup.
Related
I'm using jquery to load my website content once its fully loaded. That works great.
jquery code
function check() {
$("#content").load('items.html');
}
$(document).ready(function() {
check();
});
html
<div id="content">
</div>
Is there a way without refreshing the whole page to dynamically load html element (div) when user clicks on one of the items which were already loaded('items.html')?. On one click I want to remove already loaded 'items.html' inside #content div and load new div from any.html file.
So basically, I need to show more info for that particular item by dynamically replacing already loaded items.html and adding new div instead.
I managed to load new html page by adding anchor tags on every item, but it would be much better if I could load only one part(div) of a html file and not a whole page, that way I can write all items informations in only one html file, and then add those div's dynamically when user clicks on any item.
function check() {
$("#content").load('items.html #loadable'); // #ID to load
}
$('#loadCont').click(check);
main page example
page 2 example
You might also want to put this somewhere
$.ajaxSetup({ cache: false });
https://api.jquery.com/jquery.ajaxsetup/
As seen from the demo, .load() does already content-replacement, so no need to .empty() or .html('') beforehand.
Simple.Try to call the check() function on clicking of the element
$('element').click(function(){
check();
});
I have a div in the middle of my web page that is placed in front of an iframe the with links along side of it. I would like to hide the div once any one of the links are clicked. How would I go about doing this using javascript? I am very new to this so please be as descriptive as possible so that I can understand.
Here is some of my html code. I have a number of links that appear in an iframe. I have the logo div positioned on top of the iframe and it loads when you enter the site. However I want to hide the logo when you click on anyone of the links.
<li>My Resume</li></br>
<li>My Course Work</li></br>
I used the jquery code noted by Dolours below along with extra coding within my the body of my html code, when you click on a link then the div disappears as I intended but then it reappears once you click on another link. I want it to disappear and stay away. Here is the additional code that I came up with
About Me
Does anyone know how I can make my logo stay away?
You can do this using jQuery:
// Get the iFrame jQuery Object
var $MyFrame = $("#iframeid");
// You need to wait for the iFrame content to load first
// So, that the click events work properly
$MyFrame.load(function () {
var frameBody = $MyFrame.contents().find('body');
// Find the link to be clicked
var link = frameBody.find('.link_class');
// Set the on click event for the link
link.on('click', function() {
// Hide the div inside the iFrame
$('#divID').hide();
});
});
You can use the code below
$('a').click(function() {
$('#divID').hide();
});
Assuming all links will load the iframe.
I have a webpage with 2 iframes, 1 underneath the other. I would like both iframes hidden when a user first clicks on the webpage. There will be 2 buttons, 1 above each iframe and the user must click on the button to show/hide the iframe
Here is what I tired(jQuery function) but it wont seem to work when I preview in chrome from expression web
jsfiddle.net/darego/Z62P7/2/
All you need to do is to call the function after the document.ready:
$(document).ready(function() {
hideToggle(".button1", ".iframe1");
hideToggle(".button2", ".iframe2");
});
Just placing it in document ready will not be enough.
You can make your function MUCH easier.
function hideToggle(elem) {
$(elem).toggle();
}
This means: If the element is visible > hide it, if it is hidden > show it.
But for your initializing (hide both divs) i would recommend doing it by css.
iframe {
display:none;
}
Also you need to setup click handlers for the buttons. If you need help on this write me a comment or edit your question please.
I am using Highslide and it is working well, except when I try to reopen a highslide popup with new content. I actually don't need it to reopen, but since its the same contentId, it does. The content is not being updated though. Here is the code:
function doSomething() {
//Changes to fileExistList (removed for simplicity)
var newHTML = $('fileExistList').clone(true); //Cloning div as Highslide removes it
$(newHTML).id = 'fileExistList2'; //Change cloned divs id
$('fileExistList').insert({ //add cloned div to page
before: newHTML
});
hs.htmlExpand(null, { contentId: 'fileExistList2', align:'center' });
}
The first time it is called, it displays correctly, but all the times after that until refresh displays the initial popup content and not the updated content. I am using iframes for the Highslide popups.
Anyone have any ideas how to modify this to open with the updated content?
Thanks.
Highslide has a few configuration options and one is preserveContent, which you need set to false for HTML content. This wasn't the only thing that I had to do to make it work. I had to check the hs.clones object and remove the id of the HTML content I was copying. This forces highslide to get the updated id content.
Maybe to late to answer, but best way is to redirect your page (page that show in iframe) after you've done your job.
Something like this:
Page1->Enter your data->Redirect to itself->Page1
I always do this in my works and it's always working.
I have a page which opens another page using window.open and does some work and refreshes whole parent page . Is it possible to refresh content of a div/table on parent page using JQuery/Javascript ?
FYI : Here the content of the div is not changing there is an image inside div which is edited by child window which I want to update but that image does not have unique id so I want to refresh whole div .
Thanks.
Pure JavaScript (not JQuery) solution : wrap your div in an iframe, give it an id myFrame, then refresh it from the child like this:
parent.document.getElementById("myFrame").reload();
You can use the .load() method of jQuery to quickly update the contents of a container
http://api.jquery.com/load
Simple as
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
$("#myDiv", window.parent.document).load("page.html", function(){
alert("Portion of page loaded");
});
The second parameter of $() is the context to search into. Default to document.
You can use .html() instead of .load() if you want reload from html string instead of using another page.