I have the following block of code, characterising a div:
#posts{
position:absolute;
left:150px;
top:90px;
width:640px;
}
And my problem is: when i scroll down, it goes beyond "top:90px".
What I'm trying to do is: the part of the div's content which is above top:90px should be invisible.
The thing is... i can't use z-index:(...) because the only thing i have behind this div is the background.
$(function () {
$(window).scroll(function () {
$('#clickme').click(function() {
if ($(this).scroll() > 100) {
$('#myDiv').hide('slow', function() {
alert('Animation complete.');
});
}
} else {
alert('Error');
}
});
/*HTML*/
<div id="clickme">
test.
</div>
This will hide the div.
Related
I have a top menu using Bootstrap and have made it transparent, but want it to change to opaque once a user scrolls to the next section/div on the page. Anyone know the best/easiest way to accomplish this?
You can add a class on scroll down, or remove your class what is rewriting Bootstrap styles.
$(document).ready(function() {
// Transition effect for navbar
$(window).scroll(function() {
// checks if window is scrolled more than 500px, adds/removes solid class
if($(this).scrollTop() > 500) {
$('.navbar').addClass('solid');
} else {
$('.navbar').removeClass('solid');
}
});
});
This will assign a class to your top menu initially setting it to a transparent version, then once you scroll down past the threshold, it will remove that class which will remove the transparency.
$(window).scroll(function() {
var scrollPercent = ($(window).scrollTop() / $(document).outerHeight()) * 100;
if (scrollPercent > 20)
$('#container').removeClass('transparent')
else
$('#container').addClass('transparent')
});
#container {
height: 1000px;
background-color: orange;
}
.transparent {
opacity: .2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="transparent">
</div>
I have made this:
https://jsfiddle.net/f69gu8ss/2/
When I do position:fixed the header goes outside the parent. And also when I scroll it goes to the top of the page. I want it to stick below the image. What do I give to top to make it stick below the image.. relative to its sibling?
In your css, add this:
.sticky {
position: fixed;
width: inherit;
}
Also, jQuery is used here:
$(document).ready(function() {
var stickyNavTop = $('.header').offset().top;
var stickyTopNav = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.header').addClass('sticky');
} else {
$('.header').removeClass('sticky');
}
};
stickyTopNav();
$(window).scroll(function() {
stickyTopNav();
});
});
See this: https://jsfiddle.net/f69gu8ss/5/
I have a div that is 300px from the top, and an up arrow image on top of the div.
I want users to click on the up arrow image, making this div go up 300px, then the up arrow image changes into a down arrow image, then when users click on the down arrow image, this div goes back down 300px to it's original location.
I'm looking to do this with jQuery.
using a response, this is what my markup looks like now:
$(function() {
$('.container img').click(function() {
$('.container').animate({top:-276});
});
$('.container img').click(function() {
$('.container').animate({top:0});
});
});
.container{
border:1px solid gray;
margin-top:300px;
height:800px;
padding:50px;
position:relative;
}
.container img{
position:absolute;
top:-22px;
width:25px;
height:25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" />
<p>some text here</p>
</div>
</body>
The div is just moving up and down without stopping at the top.
Also, how do I get a the up arrow to change to down arrow on first click? then back again to up arrow on second click?
I would use jQuery.animate() triggered by the jQuery.click() event.
Like this but with 2 states, toggling from one to the other:
$(function() {
$('#arrow').click(function() {
$('#thediv').animate({top:300});
});
});
$(function()
{
var expanded = false;
$('#sidebar').click(function()
{
if (!expanded)
{
$(this).animate({'left' : '0px'}, {duration : 400});
expanded = true;
}
else
{
$(this).animate({'left' : '565px'}, {duration: 400});
expanded = false;
}
});
});
You can check this link below. May be it can help you to find solution.
link:-Javascript move div onClick
I am using wordpress site. I created menu bar, inside of sub-menu, used position:fixed element. Anybody tell me how can i disable mousewheel inside of that sub-menu. That means i don't want page scroll inside of that sub-menu.
Please anyone help me.
You can use CSS property overflow: hidden; which specifies what happens if content overflows an element's box.
Using overflow: hidden; allow you to do not show up the scroll bar and so do not allowing scrolling at all including mouse weal.
Here below a very generic example, please consider to add your real markup in your question for a fix on your real app code.
https://jsfiddle.net/bxohL8tt/2/
#sub-menu{
width:250px;
height: 100px;
background-color:red;
overflow: hidden;
}
If the element that is scrolling on mouse-wheel event is the body, or even some other element, you can use JavaScript to prevent it from scrolling while your menu has "focus" like this:
var menuBar = document.getElementById('menuBar');
menuBar.onmouseover = function()
{
document.body.style.overflow = 'hidden';
};
menuBar.onmouseout = function()
{
document.body.style.overflow = 'auto';
};
Add the above inside a <script> element at the end of your main HTML source-code and it should work.
You can do this by the following code:
$("sub-menu-selector").bind("wheel mousewheel", function() {
return false;
});
For example: (The example shows the disabling on the menu but it's just the same)
$(".menu").bind("wheel mousewheel", function() {
return false;
});
body {
margin:0;
}
.menu {
background:black;
color:#fff;
position:fixed;
width:100%;
padding:15px;
}
.content {
height:1500px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
Menu
</div>
<div class="content"></div>
I have two divs; one inside the other one. I would like to show the inner div when hovered on the outer div, otherwise the inner div should be hidden. The outer div has an image in it as well (sibling of the inner div) which is always displayed, so when hovered over the image it will also show the text. Can someone help me?
<script>
$(".divone").hover(
function () {
$(".divtwo").css("visibility","visible");
},
function () {
$(".divtwo").css("visibility","hidden");
}
);
</script>
<div class="divone">
<div class="divtwo">some text here</div>
<img src="images/test.png" />
</div>
.divtwo{
background-color:red;
top:120px;
height:50px;
width:223px;
position:absolute;
visibility: hidden;
}
.divone{
height:169px;
position:relative;
}
You could also have a style like this:
.divone:hover .divtwo {
visibility: visible;
}
No JS required.
You can attach the events to mouseenter and mouseleave events like this.
$(".divone").mouseenter(function () {
$(".divtwo").css("visibility","visible");
});
$(".divone").mouseleave(function () {
$(".divtwo").css("visibility","hidden");
});