Run Parent Javascript from iFrame - javascript

I have page (Red) with an iFrame on (white). Within the code of the iFrame, there is another iFrame containing another 2 pages (Green & Blue).
In the Red page, i have some Javascript that allows a hidden sidebar to appear when the mouse hovers on the right side of the screen (300px from right). This works fine, however if the user pulls the mouse away and the curser hovers over the red or green pages in the iFrame, the sidebar will not retract. However if the user retracts the curser into the red area (top and left) the sidebar retracts as expected. Im assuming that there is no code within the red and green pages telling the sidebar to retract when a mouseover occurs.
My problem is, i really suck at Javascript. How would I go about having the side bar retract regardless of where the mouse curser ends up? Any help would really be appreciated. Thanks
$(window).on('mousemove',function(e){
if(e.pageX >= $(window).width() - 300 || e.target.id=='sidebar' ){
$('#sidebar').css({'right':'0px'});
}
else{
$('#sidebar').css({'right':'-300px'});
}
});

Could you try to change the mousemove event to using mouse out and mouse in?
$(window).on('mousein',function(e){
$('#sidebar').css({'right':'0px'});
}
$(window).on('mouseout',function(e){
$('#sidebar').css({'right':'-300px'});
});
Also I would like to suggest maybe using a CSS based solution for this where instead using a :hover selector to show/hide the sidebar on mouse over
.sidebar-container{
width:300px;
height:100%;
background:#999;
position:absolute;
left:0px;
top:0px;
}
.sidebar-container .sidebar{
width:100%;
height:100%;
background:#465;
position:absolute;
left:-300px;
top:0px;
transition:all 0.5s;
}
.sidebar-container:hover .sidebar{
left:0px
}
<div class="sidebar-container">
<div class="sidebar">Hi!</div>
</div>

Related

Always keep div at the same place relative to the browser

I have a small menu that I always want to be in the bottom right corner.
Now normally this would be no issue with
#element {
position:fixed;
bottom:0;
right:0;
}
but I am using the zoomooz plug in to zoom into several elements on the page.
When this happens, the menu elemnt stays where it originally was.
The plugin uses transform to perform the zoom:
transform: translate(-1358.83px, 577.585px) rotate(0rad) skewX(0rad) scale(3.33879, 3.33879); transform-origin: 1280px 667px 0px;
What can I do to keep the menu element in the bottom right corner even when the plugin zooms?

Expanding a div's height when page scrolls down

I'm looking for a way to dynamically change a div's height when a page scrolls. This is because I have a fixed panel on the right side of the screen, and a menu banner at the top.
When at the top of the page, the top of the side panel touches the bottom of the banner at the top. Thing is, when the page is scrolled down and the banner leaves the screen, this leaves a gap the size of the top banner between the top of the screen and the top of the side panel. I'd like to put a div between them that would grow in height when the page is scrolled down. Is there a way in css or js to do so ?
I can't just have the side panel have 100% height because it would hide some elements on the top banner, especially on lower resolution screens.
I added some ugly images made on paint to explain :
This is the css for the side panel :
position: fixed;
right: 0;
top: 180px;
height:calc(100% - 180px);
Hello I do not really understand your banner situation.. but regarding what you need, you can just call a js function whenever you scroll:
<body>
<div class="content" onscroll="dynamicheight()">
</div>
<script>
function dynamicheight() {
var content = document.getElementById("content");
var y = content.scrollTop;
document.getElementById('random').style.height = y;
}
</script>
This way the div with the id random will grow according to how much you scroll. Obviously you have to adjust it to your wishes. Hope this could guide you a bit.
As per your question, you have to stick Panel to the top of viewport on scroll right?
For that purpose you can trick some negative margin equal to the height of menu bar like,
Check this fiddle here
$(window).scroll(function() {
if ($(".sidepanel").offset().top > 50) {
$(".sidepanel").addClass("stick-top");
} else {
$(".sidepanel").removeClass("stick-top");
}
});
body{
margin:0;
padding:0;
height:1000px
}
.menu{
width:100%;
height:50px;
background:#111111
}
.sidepanel{
width:200px;
height:200px;
background:#888888;
position:fixed;
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
transition: all 0.35s;
}
.sidepanel.stick-top{
margin-top:-50px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="menu"></div>
<div class="sidepanel"></div>
See first based on the content you can adjust it automatically.
How to make sidebar with same height as the content div?

DIV element cursor behaves inconsistenly

I have a DIV element on a JSP page whose behavior is defined in the following CSS class:
.toolbarRight .shortcut {
background-position: left center;
background-repeat: no-repeat;
width:16px;
height:16px;
margin:0 8px 0 0;
display:inline;
cursor:pointer;
position:relative;
top:6px;
float:left;
border:none;
}
span.toolbarRight .export {
background-image: url('/images/excel.gif');
}
So basically when you hover over it with the mouse it should change into a pointer. The problem is that it only changes into a pointer over the bottom 1/4 of the element, over the top 3/4 it doesn't. Look at pictures below for illustration of the problem.
Pic 1: mouse cursor is over bottom 1/4 of Excel icon (changes into pointer):
Pic 2: mouse cursor is over top 3/4 of Excel icon (does not change into pointer):
Another thing that's strange is that it only happens in my current screen configuration which includes two DHTMLX grids, one in the top half of the screen, the other on the bottom (look at picture below; Excel icon where problem occurs is circled in yellow):
If I have three grids (two horizontal and one vertical) the problem does not occur:
Anybody know what the reason for this is?
Usually when I have this problem, it's because you have another item's padding overlapping the toolbar (or something else). Since the bottom 1/4 is visible, then odds are something above it is overlapping below slightly.
The other answers might be right, but you might also have a float issue here.
You can force parent containers to wrap their floated children by applying overflow: hidden;. Try that out. If it fails, use a clearfix.
Also, I don't know if the width and height of your .toolbarRight .shortcut class will stick because you have it set to display: inline. Try inline-block or just plain old block when you need to apply width and height to things.
It is your
position:relative;
top:6px;
combo - the element sits 6px lower than where you think. The image may be up higher but the container isn't. Move your pointer to the image, not the container for the image

Detecting hover and click through a transparent div

I feel like this question must have been asked before but I must not know the correct terminology to find an answer to it.
I have a transparent div that acts as a hit area. When the user hovers over this area a menu bar animates on to the screen. The problem is if the cursor moves on to this menu the animation to hide the menu begins. It doesn't sense that the cursor is over it. I can fix this by making the z-index of the hit area higher than the menu but then the menu buttons are not click-able.
Here's my code. Any ideas?
http://jsfiddle.net/92dYt/1/
CSS
#menu{
position:fixed;
top:-40px;
left:0px;
width:100%;
height:40px;
background-color:#000;
z-index:50;
}​
#hitarea{
position:fixed;
top:0px;
left:0px;
width:100%;
height:150px;
background-color:#eee;
z-index:49;
opacity:0;
}
HTML
<div id="menu"></div>
<div id="hitarea"></div>
JAVASCRIPT
$("#hitarea").hover(
function () {
$('#menu').delay(500).animate({
top: 0
}, 500, function() {
// Animation complete.
});
},
function () {
$('#menu').delay(500).animate({
top: -40
}, 500, function() {
// Animation complete.
});
}
);
You may want to nest the hit area as a background in the menu and code your own hover behaviour using mouseenter instead of hover.
http://api.jquery.com/mouseenter/
You can see from the example that mouseover fires for every child object while mouseenter fires just once. (Although if nested, the solution might work with hover too.)

Modal Div to fill entire window including below fold

I have an absolute positioned div that I need to get to to fill the entire document for a background to a modal window.
I can get it to fill the window but when there is a scroll bar it doesnt fill the area that is currently visible.
This is my current code:
position:absolute;
top:0;
left:0;
height:100%;
min-height:100%;
By the way I can get it to fill the document horizontally.
Give the div position:fixed and top,bottom,left,right 0
See here:
http://jsfiddle.net/sQLPr/
edit - removed the following line
and it's parent (probably body)
position:relative
div.covered {position: fixed; top:0; left:0; bottom:0; right:0;}
test it here: http://jsfiddle.net/meo/kGUYG/2/
Position absolute is gonna scroll when you scroll the page unless you find a JS solution. You need to use position fixed so the element does not scroll when the content does.
Put it in a table with 100% width and that's all

Categories