So, I'm trying to disable scrolling event when a user hovers on a container, there are some solutions on SO but they use jQuery and none of them seem to work or they are not the solution I'm looking for. I don't want to disable the scrollbar as that would cause bad user experience (scrollbar causing widths of the containers to increase/decrease). Is there any js way of achieving this?
For example,
<body>
<div onScroll={()=> }>Container</div>
Content here
</body>
that ?
const scroll_stopper = document.querySelector('#StopSrollonHover')
scroll_stopper.onmouseover = () =>
{
document.body.classList.add('noScroll')
}
scroll_stopper.onmouseout = () =>
{
document.body.classList.remove('noScroll')
}
.noScroll {
overflow: hidden !important;
}
body {
height: 200vh;
}
#StopSrollonHover {
display : block;
margin-top : 25vh;
height : 100px;
background : yellow;
}
<div id="StopSrollonHover"> </div>
I'm new with Jquery and I try to do something too difficult for me.
I try to create a menu with animated links : when you hover a link, a other one'll appear and hide the first link.
I try with a simple menu and 2 links : one with an id="link" and the other with id="hover".
When a mouse is on #link (the first link), the #hover (the second one) will appear, grow up and hide #link.
But, when I put the mouse on #link : nothing !!! I test to change CSS and I use Chrome for searching the matter without success.
$("document").ready(function() {
$("#link").hover(function () {
$(this).next("#hover").stop().animate({
display : block,
margin-top : -31px,
height : 30px
}, 500);
},function () {
$(this).next("#hover").stop().animate({
display : block,
margin-top : -31px,
height : 30px
}, 300);
});
});
#link {
display : block;
position : absolute;
border : 1px solid black;
height : 30px;
width : 100px;
}
#hover{
display : none;
position : absolute ;
background-color : orange;
color : blue;
height : 0px;
width : 100px;
}
nav{
position : relative;
height : 100px;
width :100px;
border : 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id="link">A</div>
<div id="hover">A</div>
</nav>
thanks for your help.
I have a static element that is above a fixed element. When the upper static element is clicked, I want to pass this click through to the fixed element. How can I do this? Here is a working example (I wasn't able to get this to work in JSFiddle).
<body>
<div class="lower" onclick="lowerClick()"></div>
<div class="upper" onclick="upperClick()"></div>
</body>
<script>
function lowerClick() {
alert("LOWER CLICK");
};
function upperClick() {
alert("UPPER CLICK");
};
</script>
//CSS file
.lower {
height: 100px;
width: 100%;
z-index: -1;
position: fixed;
background-color:blue;
}
.upper {
height: 50px;
width: 100%;
z-index: 1;
position: static;
background-color:red;
pointer-events: none;
}
I thought that adding pointer-events:none to my upper element would make this work, but when I click the top element, nothing happens.
In fact pointer-events:none works expectedly. But what prevents you from clicking on the lower is the body element. Because of setting z-index:-1 on your lower, it will be sent to behind of its parent (which is the body). So you can set the z-index of the body to a more negative number, of course the postion should be some value other than static (default):
body {
z-index:-1000;
position:relative;
}
Demo
You can use the following css for the upper div
.upper {
pointer-events:none;
}
...also avoid negative z-index, and instead use 1 for lower and 2 for upper. Also why put static and not absolute element at the top?
I have a div and after I click a button, I would like the div to appear (which I can do), but I would like the whole background to become darker too (this is inline with overlays).
I've tried using opacity - I change the opacity of the whole html with jQuery, i.e. $('html').css('opacity','-0.5'); and change back the opacity of the div to normal, but for some reason, the opacity of the div stays the same (0.5).
I don't quite like the opacity since actually it doesn't make the background darker (rather lighter).
HTML--
<a id="some-button" href="#">click me</a>
<div id="overlay-back"></div>
<div id="overlay"><span>YOUR HTML GOES HERE</span></div>
CSS--
html, body {
width : 100%;
height : 100%;
}
#overlay-back {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : #000;
opacity : 0.6;
filter : alpha(opacity=60);
z-index : 5;
display : none;
}
#overlay {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
z-index : 10;
display : none;
}
JS--
$('#some-button').on('click', function () {
$('#overlay, #overlay-back').fadeIn(500);
});
Then just add your youtube video embed code to the overlay div and style it appropriately to put it where you want on the page.
Here is a demo: http://jsfiddle.net/EtHbf/1/
This can be now done even easier than before. Just use absoluted box-shadow.
#yourDIV {
box-shadow: 0px 0px 1px 5000px rgba(0,0,0,0.8);
}
First, for opacity, you don't set a negative number. $('html').css('opacity','1'); is solid and completely visible, and $('html').css('opacity','0'); is completely invisible. Anything in between (0.2, 0.5, 0.7) gets more visible the close it is to 1.
Second, to make the background darker you can do this:
Create a div that fills the screen
Set z-index on that div higher than all content
Set background to black and opacity to 0.5
Put youtube video in another div with a higher z-index than the div you just made with the black background
You'd want a 'modal' dialog. It's basically accomplished by using an underlying div and a background set.
jQuery UI supports it here: http://jqueryui.com/demos/dialog/#modal , but you can see how they do it by inspecting.
// video lightbox
$('.video_popup').height($(document).height());
// GET WINDOW SCROLLtop OFFSET
var winScrT;
$(window).scroll(function() {
winScrT = $(window).scrollTop();
});
$.getDocHeight = function() {
var D = document;
return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};
$('.play').click(function() {
$('.video_popup').height($.getDocHeight);
$('#popup').css({
top: (winScrT + 15) + 'px'
});
$('.video_popup').fadeTo(0, 0).css({
marginLeft: '0px'
}).fadeTo(600, 0.6);
});
$('.popup_close, .video_popup').click(function() {
$('.video_popup').fadeTo(600, 0, function() {
$('.video_popup').hide();
});
});
.video_popup {
position: absolute;
margin-left: -9000px;
top: 0px;
left: 0px;
background: #000;
width: 100%;
z-index: 300;
}
.popup_content {
position: relative;
margin: 50px auto;
width: 560px;
color: #fff;
}
.popup_close {
position: absolute;
right: -55px;
top: -25px;
z-index: 2000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a class="play" href="javascript:void(0);">PLAY</a></p>
<div class="video_popup">
<div class="popup_content">
<a class="popup_close" href="javascript:void(0);"><img src="_/images/close.png"></a>
<object width="560" height="315">
<param name="movie" value="http://www.youtube.com/v/-pJcKCqxtAM?version=3&hl=en_US&atuoplay=1">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<embed src="http://www.youtube.com/v/-pJcKCqxtAM?version=3&hl=en_US&atuoplay=1" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"/>
</object>
</div>
</div>
Here's another example of this behavior, in the demo: click the "watch video" link to fade in the video and screen dimmer divs (escape to fade out)
jsfiddle demo
CSS:
#screenDimmer,#video {display:none;position:absolute;}
#screenDimmer {top:0;left:0;width:100%;height:100%;background:#000;opacity:.5;
/* ie opacity */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50);}
#video {top:50%;left:50%;margin-left:-240px;margin-top:-193px;}
HTML:
<div id="screenDimmer"></div>
<div id="video"><!-- embedded video here --></div>
hi i changed the code of someone who posted here, even though this may be solved already here is the updated code of jasper
html:
<a id="some-button" href="#">click me</a>
<div id="overlay-back"></div>
<div id="overlay"><iframe src="http://www.youtube.com/embed/08DjMT-qR9g" width="340"
height="250"></iframe><br><br><button id="close"><img
src="http://icongal.com/gallery/image/89825/remove_close_button_x_delete.png"
height="50"
width="50"></button></div>
css:
html, body {
width : 100%;
height : 100%;
}
#overlay button{
opacity:0.5;
}
#overlay button:hover{
opacity:1;
}
#overlay-back {
position : absolute;
text-align :center;
width : 100%;
height : 100%;
background : #000;
opacity : 0.75;
filter : alpha(opacity=60);
z-index : 5;
display : none;
}
#overlay {
position : absolute;
text-align :center;
width : 100%;
height : 100%;
z-index : 10;
display : none;
}
jquery:
$('#some-button').on('click', function () {
$('#overlay, #overlay-back').fadeIn(1000);
});
$('#close').on('click',function(){
$('#overlay,#overlay-back').fadeOut(1000);
});
i hope this might still help you and that this edit may be usefull to some people
added by me (close button,changed very little part of the css and used a youtube vid instead of nothing)
The simplest thing I have seen to achieve it is this:
$("#overlay").css("-webkit-filter","blur(5px)");
$("#overlay").css("-moz-filter","blur(5px)");
$("#overlay").css("-o-filter","blur(5px)");
$("#overlay").css("-ms-filter","blur(5px)");
$("#overlay").css("filter","blur(5px)");
$("#overlay").css("pointer-events", "none");
On clicking a button we have to run above steps. "overlay" is the ID of div which we want to be blur. After successful execution of script, at the end we can do this to re-enable the div:
$("#overlay").removeAttr("style");
I have a function that dynamically creates links for a photo gallery. The function also produces a larger image as a background image of a div when and thumbnail is clicked on. What I want to do is have a third event, where if the user clicks the enlarged image in the div, the jQuery Fancybox loads an even bigger version of the image being displayed in the div. The problem is that the link for the anchor tag I'm using is created dynamically, and I know that Fancybox parses the HTML when the DOM is ready...unfortunately my function changes the DOM by appending the anchor tag for the full sized image. The help I need is using the Fancybox's options to specify the href attribute for the plugin. I'm sorry that was so long-winded...here's the code.
jQuery:
function gallery(picid, picnum){
var ext = 'jpg';
var fullSize = 'imgs/'+picid+'_full.'+ext;
$('#photolarge').css("background", 'url(imgs/'+picid+'_large.'+ext+') no-repeat');
$('#photolarge a').attr(
{ href: fullSize
//rel: 'lightbox',
}
);
$("#lightboxlink").click(function(){
$('#lightboxlink').fancybox({
'autoDimensions' : false,
'width' : 'auto',
'height' : 'auto',
'href' : fullSize
});
});
return false;
}
HTML Snippet
<div id="photolarge">
<a id="lightboxlink" href="#"></a>
</div>
<div id="phototable">
<ul id="photorow1">
<li><a onclick="gallery('bigsun',1)"><img id="sun" src="imgs/bigsun.jpg" /></a></li>
</ul>
</div>
Subsequent CSS:
#photolarge {
width: 590px;
height: 400px;
margin-left: 7px;
border: 2px solid;
background: none;}
#phototable {
width: 590px;
height: 300px;
border: 2px solid;
margin: 10px 0 0 7px;}
#phototable img {
cursor: pointer;}
#phototable ul {
list-style: none;
display: inline;}
#phototable li {
padding-left: 10px;}
#lightboxlink {
display: block;
height: 100%;
width: 100%;}
Any help would be greatly appreciated!!!
You can use .live() for the event handler, and .triggerHandler() to immediately open the lightbox, like this:
$("#lightboxlink").live('click', function(e){
$(this).filter(':not(.fb)').fancybox({
'autoDimensions' : false,
'width' : 'auto',
'height' : 'auto',
'href' : fullSize
}).addClass('fb');
$(this).triggerHandler('click');
e.preventDefault(); //prevent opening in new window
});
This runs .fancybox() on the link, but only if we haven't already run it, which we're tracking with a .fb class addition. Whether it's a new or fresh bind, we need to trigger the click handler, which is what fancybox listens to in order to open.