I'm trying to implement a simple "scroll to top" button on my site.
HTML:
<img src="img/scrolltotop.png">
CSS:
#scrolltotop {
width: 40px;
height: 40px;
position: fixed;
right: 100px;
bottom: 50px;
display: block;
}
JS:
jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() > 150) {
$('#scrolltotop').fadeIn('slow');
} else {
$('#scrolltotop').fadeOut('slow');
}
});
$('#scrolltotop').click(function(){
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
When I load my page, I see the button there in the right place for a split second, then it is covered by a background of one of my divs that is down the page in my HTML structure. In the end, I can't see it anywhere on my page, and when I inspect the element it is in the right spot, just not visible.
I think you just need to add an initial display:none; to #scrolltotop like so:
#scrolltotop {
width: 40px;
height: 40px;
position: fixed;
right: 100px;
bottom: 50px;
display:none;
}
Working Example
When using fadeIn() you need to have the element's initial display state set, so that you're not trying to fadeIn() an element that's already present.
Add z-index: 1000 to the back to top link so it is shown on top of everything.
Related
Here's the challenge:
I have two divs layered on top of one another in an HTML file. The top div is mostly transparent using CSS the bottom div has an image as its background. On mouseenter, I want the top div to disappear and on mouseleave I want the top div to come back.
$(document).ready(function() {
$('.dimmer').on('mouseenter', event => {
$(this).hide();
}).on('mouseleave', event => {
$(this).show();
});
});
.experience {
background: url("cmu-110.png") no-repeat center;
height: 110px;
width: 110px;
z-index: 2;
}
.dimmer {
background: rgba(238, 238, 238, .25);
position: relative;
top: -128px;
z-index: 3;
}
<div>
<div class="experience"></div>
<div class="dimmer"></div>
</div>
The jquery code snippet above is in a separate file and called in the html's head.
<head>
<!--- Some head stuff like title, meta, calling css in separate file, etc --->
<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="interaction.js"></script>
</head>
Full transparency: I am new to jquery and trying to use it for the first time. Despite working through the full codecademy jquery tutorial, reading w3C school tutorial, searching other stackoverflow posts, and spending more than a reasonable amount of time, I can't seem to get this to work--probably due to a dumb mistake.
Thank you for your help!
I believe a jquery '.on( "mouseout", handler )' on the bottom div should be sufficient to make the top div visible/fade in.
This post should help you: jquery .mouseover() and .mouseout() with fade
If not (if that does not work) what I would do/suggest is:
When mouse enters the top div activate a setTimeout polling functiion or .mouseMove that runs every 1 second or so which checks the mouse position and hide the top div.
If the mouse is not on the bottom div (mousemove) , then display the top div and disable the polling.
You can seach this forum for how to write a setTimeout polling function, etc. If I have some time over the weekend I will give it a whirl...
Trust this helps.
You can set the css visibility property to hidden and visible on mouseenter and mouseleave. I put some space between two divs to make the effect visible clearly.
$(document).ready(function() {
$('.dimmer').on('mouseenter', () => {
$('.dimmer').css("visibility","hidden");
}).on('mouseleave', () => {
$('.dimmer').css("visibility","visible");
});
});
.experience {
background: red;
height: 110px;
width: 110px;
z-index: 0;
}
.dimmer {
background: blue;
position: absolute;
top: -10px;
height: 110px;
width: 110px;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="experience"></div>
<div class="dimmer"></div>
</div>
jQuery(document).ready(function(){
jQuery(".dimmer").on({
mouseenter: function () {
jQuery(this).css('opacity', '0');
},
mouseleave: function () {
jQuery(this).css('opacity', '1');
}
});
});
.experience {
background: url("http://lorempixel.com/400/200/") no-repeat center;
height: 110px;
width: 110px;
z-index: 2;
}
.imparant{
position:relative;
height: 110px;
width: 110px;
}
.dimmer {
background: rgba(238, 238, 238, .25);
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
z-index: 3;
transition:opacity 320ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="imparant">
<div class="experience"></div>
<div class="dimmer"></div>
</div>
You don't really need to use jQuery or javascript at all for this. You can do it with a single div, a pseudo-element, and a hover style:
.container{
position:relative;
height: 110px;
width: 110px;
background-image: url("https://randomuser.me/api/portraits/men/41.jpg");
}
.container::before{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
transition: opacity 0.4s;
}
.container:hover::before{
opacity: 0;
}
<div class="container"></div>
If for some reason you wanted to keep the extra divs you could still do it but you'd want to change the CSS hover rule slightly. If you were ok moving the .dimmer before .experience you could just do the hover directly on the .dimmer element:
.dimmer:hover { opacity: 0 }
Otherwise you'd need to use a descendant selector:
.outerDiv:hover .dimmer { opacity: 0 }
I am trying to create an effect basically exactly the same as the one used on this page: http://www.ohmy.io/work/landrover-live/
When you scroll down the page the text moves with the scroll and then stops at a certain position.
Can anyone direct to how this can be done?
Thanks
I think you're looking for:
.some-class{
position: sticky;
top: //now used to set position to stick to
left: //or you could sticky left, etc.
}
CSS Position
What you can do is switch between classes when you hit the bottom of the page, or location of some element...
This is an example, it can be made better I'm sure
Html:
$(window).scroll(function() {
console.log($(window).scrollTop());
//this is for normal window:
// if($(window).scrollTop() + $(window).height() == $(document).height()) {
//this is for this test:
if ($(window).scrollTop()>100){
$(".stuck").addClass("release").removeClass("stuck");
}
});
.stuck{
position: fixed;
padding-left: 400px;
}
.release{
position: relative;
top: 320px;
padding-left: 400px;
}
.main{
width: 400px;
height: 1000px;
}
.left{
margin-top: 300px;
width: 70%;
float: left;
}
.right{
width: 30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="main">
<div class="right stuck">
here i am
</div>
<div class="left">
will you send me an angel
</div>
</div>
or fiddle if you pref: fiddle example
I want to have two fixed nav bars one on top and other at some center of the page. When scroll reach to second nav first should hide (or become relative) &
second should become fixed bar. And when we move up the second nav now become relative (not hide) and fist one will again start showing again.
fiddle
<div id="nav01">
</div>
<div class="content"></div>
<div id="nav02">
</div>
<div class="content"></div>
#nav01
{
height: 100px;
background: red;
width: 100%;
position: fixed;
top: 0;
}
#nav02
{
height: 100px;
background: blue;
width: 100%;
}
.content
{
height: 2000px;
background: #ccc;
width: 100%;
}
I have seen many jquery plugins but not found them useful - I am not good in scripting so need your help thanks in advance.
You have to add the below code
$(document).ready(function(){
$(window).scroll(function() {
if($(window).scrollTop()>2000){
$("#nav02").css("position", "fixed");
$("#nav02").css("top", 0);
$("#nav01").hide();
} else {
$("#nav02").css("position", "relative");
$("#nav01").show();
}
});
});
See this fiddle http://jsfiddle.net/P8Hzx/1/
I'm using geocoding to display a google map with the users location displayed. I'm looking the map to be situated with a sliding menu. The problem I have is when you open out the sliding menu the map only takes up a small area in the top left corner, but as soon as you resize the browser window the map takes up the full area like I want it to. This happens no matter what way you resize the browser window even by making it smaller. Let me know if you need to see more of my code than this:
Sliding menu function
$(document).ready(function()
{
$(".content").hide(); //updated line, removing the #panel ID.
$('#tab').toggle(function() //adding a toggle function to the #tab
{
$('#panel').stop().animate(
{
width:"800px", opacity:0.8 //to adjust width of bar
}
, 500, function() //sliding the #panel to 200px
{
$('.content').fadeIn('slow'); //slides the content into view.
});
},
function() //when the #tab is next cliked
{
$('.content').fadeOut('slow', function() //fade out the content
{
$('#panel').stop().animate(
{
width:"0", opacity:0.1 //slide the #panel back to a width of 0
}
, 500);
});
});
});
Sliding menu html
<div id="panel">
<div class="content">
<div id="mapContainer"></div>
</div>
</div>
CSS
#tab {
width: 30px;
height: 100px;
position: fixed;
left: 0px;
top: 100px;
display: block;
cursor: pointer;
background-color: #ff0000;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
#panel {
position: fixed;
left: 0px;
top: 50px;
background-color: #ffffff;
height: 500px;
width: 0px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
#mapContainer {
height: 500px;
width: 800px;
border:10px solid #eaeaea;
}
The map container requires a width and height to correctly display the map but it seems the animations are interfering with the values.
The map works when the browser is resized as the width and height are correctly set and the resize event is raised.
The quickest solution to your problem would be to call the resize method when the animation has finished as so:
google.maps.event.trigger(map, 'resize');
JSFiddle Update: http://jsfiddle.net/uADHv/2/
I have the following jQuery which I need adapting:
$(document).ready(function(){
$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
});
});
CSS:
.rss-popup {
margin: 100px auto;
padding: 0;
width: 100px;
position: relative;
}
div.rss-popup em {
background: url(../images/rssbuttonbubble.png) no-repeat;
width: 100px;
height: 49px;
position: absolute;
top: -70px;
left: -0px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}
#rss-icon {
width: 42px;
height: 42px;
background: url(../images/rssbutton.png) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;
}
The HTML:
<div class="rss-popup">
RSS Feed
<em>Subscribe to our RSS Feed</em>
</div>
I want to make the rssbuttonbubble.png appear underneath rather then from above, can any make any suggestions as to how I can achieve this?
Just adjust your top values in the animation and css to be the distance you want:
$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "70"}, "fast");
});
And in CSS change top: -70px; to:
top: 70px;
This will make it appear below, then just decrease those values if you want it higher, increase if you want it lower.
Nick's answer is correct. You will want to attempt to do this via CSS but just in case you can't you could also achieve something similiar via Jquery. There is an offset() function that returns the onscreen position of a matched element. Once you have that you can then set the position of another element to this position and add the source elements height to the Y coordinate.
See the jQuery documentation here.