I am loading another html page in an tag and it is getting loaded in an overlay
<div id="overlay-inAbox4" class="overlay">
<div class="wrapper">
<object id="sendMessageOverlay" data="http://localhost:8000/messages/write/?recipients={{ context_user.username }}" style="height:25rem; width:50rem;" />
</div>
</div>
After doing an operation in the overlay i want to close it.
How can i do this?
I tried doing this by changing the css of $('.overlay') to display:none, but it wont work because $('.overlay') is not accessible within the object tag contents.
Related
I have a basic script which shows/hides a div. I'm using this for a drop-down menu.
https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
I'm looking for the div element to be hidden when the page loads instead of it showing and having to click it to toggle it.
Any help is appreciated!
Use display: none in div like below
<div id="myDIV" style="display:none">
This is my DIV element.
</div>
or you can create a class and assign to the div.
<style>
.hide{
display:none;
}
</style>
<div id="myDIV" class="hide">
This is my DIV element.
</div>
Instead of CSS, you may also use JavaScript to manipulate the display of a web page by taking advantage of events, such as onload.
window.onload = function(){
document.getElementById("myDIV").style.display='none';
};
<div>
This is the first DIV element.
</div>
<div id="myDIV">
This is the 2nd DIV element.
</div>
<div>
This is the last DIV element.
</div>
Using the following methods, you tell the browser to ignore these elements on the page.
Use display none on the element eighter in HTML, or in CSS files.
<div style="display: none">
This is my DIV element.
</div>
Attribute hidden is also helpful.
<div hidden>
This is my DIV element.
</div>
I have a site that has a buttons visible typically. If javascript is disabled then I want to hide that button from the user. I tried using the following code:
<noscript>
<style>
.cart-opt{display:none;}
</style>
<br>
<div class="panel callout radius"> <h5>Please Enable Javascript</h5></div>
</noscript>
<div class="cart-opt opt-btns"> <!-- BUTTONS HERE SHOULD BE SHOWN WITH JS ENABLED--> </div>
This didn't work. Even though the <style> tag was wrapped in <noscript> tag it was still read and hid the buttons even when JS enabled.
How do I write the styles so the <style> tag isn't read unless JS is disabled?
Note: I am using HTML 5.
Wouldn't this be an alternative solution?
<noscript>
<div class="panel callout radius"> <h5>Please Enable Javascript</h5></div>
<div style="display:none">
</noscript>
<div class="cart-opt opt-btns"> <!-- BUTTONS HERE --> </div>
<noscript>
</div>
</noscript>
You can wrap the button with <noscript> instead or you can hide the button initially (with CSS), and then display it with JavaScript.
In this case without the JavaScript, the button won't be shown
Also, leave the header notification (the one prompting user to use JS) inside the <noscript>.
Make them initially hidden by class.
<style>.jscriptenabled{display:none;}</style>
Then if JavaScript is allowed, they will become visible!
<script>
document.write('<style> .jscriptenabled{display:inherit;} </style>');
</script>`
I have a link like this
COME HERE
I want to open the popup.html file as a jquery popup. And I cant have it inside the current page as a <div> with an id. I must have it out side the current file.
And I cant use dialog's as it reloads the current page. Any idea on how to do it?
Inside the popup.html I am using just a single header.
Or any methods through which I can avoid the page being reloaded when dialog is closed?
Use .load() to load popup.html into a placeholder (i.e <div id="PopupPH">). This placeholder can be placed either inside data-role="page or outside it, depending on jQuery Mobile version you are using.
Moreover, in popup.html, you need to change data-role=page" to data-role="popup in order to treat it as a popup not a page.
jQuery Mobile 1.4
Insert placeholder inside body tag or data-role="page" and load popup.html.
<body>
<div data-role="page">
</div>
<div id="PopupPH">
<!-- placeholder for popup -->
</div>
</body>
Or
<body>
<div data-role="page">
<div id="PopupPH">
<!-- placeholder for popup -->
</div>
</div>
</body>
Load popup.html into placeholder
$("#PopupPH").load("popup.html");
Inside popup.html popup div, add JS to create, open and remove popup once it's closed.
<div data-role="popup">
<!-- contents -->
<script>
$("[data-role=popup]").enhanceWithin().popup({
afterclose: function () {
$(this).remove();
}
}).popup("open");
</script>
</div>
jQuery Mobile 1.3 and below
Do the same as above, except for popup placeholder should be inside data-role="page", because jQM 1.3 doesn't support external popup. Also, replace .enhanceWithin() with .trigger("create").
Using the frames & popups in jQuery mobile, you can simply include an iframe inside, although dialogs are still probably your better bet. (Especially as a click outside the popup.. kills it)
<div class="hidden">
<div data-role="popup" id="externalpage">
<iframe src="http://www.bbc.com"
width="480"
height="320"
seamless>
</iframe>
</div>
</div>
<a href='#externalpage'
data-rel="popup"
data-role="button">COME HERE</a>
<script>
$(document).on("pageinit", function() {
$( "#externalpage" ).on({
popupbeforeposition: function( event, ui ) {
console.log( event.target );
}
});
});
</script>
Demo: http://jsfiddle.net/tcS8B/
jQuery Mobile Dialogs don't refresh the page I don't think, it simply masks it with a new background for focused attention.
Try
Test
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)';
I written a simple image editor PHP script, users can add images from galleries to editor area and merge all finally.
now my problem is:
galleries open as popup and editor area is parent page, i need a javascript or jquery code when a user clicked on a item in popup page, image added to parent page in specific div.
here is destination div code:
<div id="objects">
<div class="obj_item"><img id="obj_1" class="ui-widget-content" src="elements/1.png" /></div>
<div class="obj_item"><img id="obj_2" class="ui-widget-content" src="elements/2.png" /></div>
</div>
please help me,
thanks
You can target the parent using window.opener
$('#objects', window.opener).append('image code');