Change the div content of an html from another html through jquery - javascript

I'm using iframe tags in my index.html. Below is the code
<iframe src="header.html" height="100px" scrolling="no" width="1335px"
style="position: absolute; top: 0px;"></iframe>
<iframe src="menu.html" height="500px" scrolling="no" width="250px"
style="position: absolute; top: 103px;"></iframe>
<iframe src="body.html" height="500px" scrolling="no" width="1083px"
style="position: absolute; top: 103px; left: 260px"></iframe>
<iframe src="footer.html" height="100px" scrolling="no" width="1335px"
style="position: absolute; top: 605px;"></iframe>
My Login div is in menu.html and logout is in footer.html. I want to show logout when login div is hidden(after login) and when i click Logout i want my logout link to be hidden and login div to be displayed. Since both of them are in differnet html's so i want to know how we can do this simultaneaously. Right now this functionality is working but i need to refresh the page.
Also window.location.reload is not useful.
Is there any easier way to perform hide/show operations in multiple html's concurrently.

If you really must keep this content in separate files and are intent on making separate calls for each, try this:
<div id="header" style="height: 100px; width 1335px; overflow: hidden; position: absolute; top: 0px;"></div>
<div id="menu" style="height: 500px; width 250px; overflow: hidden; position: absolute; top: 103px;"></div>
<div id="body" style="height: 500px; width: 1083; overflow: hidden; position: absolute; top: 103px; left: 260px;"></div>
<div id="footer" style="height: 100px; weight:1335px; overflow: hidden; position: absolute; top: 605px;"></div>
And some jQuery like so:
<script>
$(document).ready(function() {
$("#header").load("header.html");
$("#menu").load("menu.html");
$("#body").load("body.html");
$("#footer").load("footer.html");
});
</script>
Now that you have all your markup in the same window, use jQuery to do whatever you want with it.

Related

How to check if dynamic element is visible inside of the iframe?

I am loading an iFrame on a page :
<div style="width: 800px; height: 500px; overflow: hidden">
<iframe src="https://mypage.com" width="900px" style="position: relative; left: -6%; top: -8%"></iframe>
when the iframe loads it contains :
<div id="overlap-root" style="position: absolute; z-index: 150; top: 0px; left: 0px;"></div>
But there wont be anything inside of this div , but depending on the user interaction a popup dialogue can appear and this div can load some classes like:
<div data-id="SSSearch" style="position: relative; z-index: 35;">
<div class="_dialog-nonmodal ui-draggable" style="width: 750px; z-index: 110; left: -46px; top: 49px;">
<div class="_dialog-error">
Q: Is there any way to detect the load of those classes ? i am trying to change the height of the iframe when the popup dialogue appears, and revert back to normal size when the popup disappears.

How do I link specific buttons to a div which content can vary based on which button is clicked?

So I'm pretty new to JavaScript and HTML, and I was wondering how I can make a menu which allows you to make specific content in div(s) visible based on which button(picture1-12) was clicked. I think it should be possible to make one div which can output String linked to that specific button. I hope I'm clear enough. Is there anyone who could help me?
body{
background-color: #A50000;
}
#Container{
width: 90%;
margin: 0 auto;
}
.CenterImage{
text-align: center;
}
.Menu{
float: left;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Test_Site</title>
</head>
<body>
<div ID="Container">
<div class="CenterImage">
<img src="images\HeaderImage.jpg" alt="HeaderImage" width="100%">
</div>
<div class="Menu">
<img src="images/Buttons/Picture1.png" alt="Button_1" style="position: absolute; top: 210px;"/>
<img src="images/Buttons/Picture2.png" alt="Button_2" style="position: absolute; top: 320px;"/>
<img src="images/Buttons/Picture3.png" alt="Button_3" style="position: absolute; top: 430px;"/>
<img src="images/Buttons/Picture4.png" alt="Button_4" style="position: absolute; top: 540px;"/>
<img src="images/Buttons/Picture5.png" alt="Button_5" style="position: absolute; top: 650px;"/>
<img src="images/Buttons/Picture6.png" alt="Button_6" style="position: absolute; top: 760px;"/>
<img src="images/Buttons/Picture7.png" alt="Button_7" style="position: absolute; top: 870px;"/>
<img src="images/Buttons/Picture8.png" alt="Button_8" style="position: absolute; top: 980px;"/>
<img src="images/Buttons/Picture9.png" alt="Button_9" style="position: absolute; top: 1090px;"/>
<img src="images/Buttons/Picture10.png" alt="Button_10" style="position: absolute; top: 1200px;"/>
<img src="images/Buttons/Picture11.png" alt="Button_11" style="position: absolute; top: 1310px;"/>
<img src="images/Buttons/Picture12.png" alt="Button_12" style="position: absolute; top: 1420px;"/>
</div>
</div>
</div>
</body>
</html>
You need to change the ids and styles according to your situation. I think this is the one you looking for.
<div style='display:none' id='Button_1'>button1 content</div>
<div style='display:none' id='Button_12'>button12content</div>
<script type='text/javascript'>
$(function() {
$('.Menu img').click(function() {
if ($(this).attr("alt") == 'Button_1')
$('#greenbox').html($('#Button_1'.html()));
});
});
</script>

Javascript-Load URL from iFrame

I am using below code to load some content in iFrame.
<html>
<head></head>
<body>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width:550px; height:280px;" onClick=onStopRecording();>
<div style="overflow: hidden; margin-top: -100px; margin-left: -25px;"></div>
<iframe id="exIframe" src="http://example.com" scrolling="no" frameborder="0" style="height: 280px; border: 0px none; width: 550px; margin-top: -60px; margin-left: -24px;"></iframe>
</div>
</div>
</body>
</html>
Now when I click the URL inside the iFrame, it needs to redirect to that URL and get loaded in main window itself.
But it is loading inside the iFrame.
Please note that I am using third party site inside the iFrame where I can't change its code

How can I load URL content in main window

I am using below code to load some content in iFrame.
<html>
<head></head>
<body>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width:550px; height:280px;" onClick=onStopRecording();>
<div style="overflow: hidden; margin-top: -100px; margin-left: -25px;"></div>
<iframe id="exIframe" src="http://example.com" scrolling="no" frameborder="0" style="height: 280px; border: 0px none; width: 550px; margin-top: -60px; margin-left: -24px;"></iframe>
</div>
</div>
</body>
</html>
Now when I click the URL inside the iFrame, it needs to redirect to that URL and get loaded in main window itself.
But it is loading inside the iFrame.
Please note that I am using third party site inside the iFrame where I can't have access to edit the code
Could you please help?
Thanks in advance.
You need to do it like this:
window.top.location.href = "http://www.google.com";

binding a click event to jqzoom to launch fancybox

So I've been playing around with this for a while, but cannot get the binded click event to fire from a jqzoomed element.
HTML:
<div class="product-clicktozoom-image">
<div class="product-clicktozoom-image-main">
<img itemprop="image" id="mainimage" src="http://exampe.com/image.jpg" alt="Image" title="Image"/>
</div>
</div>
JS:
jQuery(document).load(function() {
jQuery('#mainimage').bind('click',function(){
var fancyImage = jQuery('#mainimage').attr('src');
jQuery.fancybox.open(fancyImage);
});
});
jqzoom creates a couple of extra div's so the final page structure actually looks like this:
<div class="product-clicktozoom-image-main">
<a href="example.com/image.jpg" class="jqzoom" title="" rel="gall" style="outline-style: none; text-decoration: none;">
<div class="zoomPad">
<img itemprop="image" id="mainimage" src="http://example.com/image.jpg" alt="Image" title="Image" style="opacity: 1;">
<div class="zoomPup" style="display: none; top: 105px; left: 145px; width: 126px; height: 126px; position: absolute; border-width: 1px;"></div>
<div class="zoomWindow" style="position: absolute; z-index: 5001; cursor: default; left: 0px; top: 0px; display: none;">
<div class="zoomWrapper" style="border-width: 1px; width: 355px; cursor: crosshair;">
<div class="zoomWrapperTitle" style="width: 100%; position: absolute; display: none;"></div>
<div class="zoomWrapperImage" style="width: 100%; height: 355px;">
<img src="http://example.com/image.jpg" style="position: absolute; border: 0px; display: block; left: -411.26760563380276px; top: -298.5915492957746px;">
</div>
</div>
</div>
<div class="zoomPreload" style="visibility: hidden; top: 156px; left: 132.5px; position: absolute;">Loading zoom</div>
</div>
</a>
</div>
I have tried binding the click event to the #mainimage, along with the zoomPad class and also the img within the zoomWrapperImage element as this appears to be the top element when you mouseover the image.
All I want to do is open the full image in a fancybox if they click on the zoom (currently the zoom happens on mouseover). I know the fancybox.open(fancyImage); works, I can run the code in the click function directly in the console successfully, I just can't get it to fire from the click event itself.
Help!
This turned out to be pretty simple in the end, the click event needs to bind on the .zoomPad, and I used window.load in place of (document).ready as that ensures all the elements have loaded.
Final JS:
jQuery(window).load(function() {
jQuery('.zoomPad').bind('click',function(){
var fancyImage = jQuery('.zoomWrapperImage img').attr('src');
jQuery.fancybox.open([{href : fancyImage}], {closeClick : true});
});
});

Categories