My fixed footer has an arrow icon on top of it. Clicking the arrow should "lower" the footer below the page until only the arrow is visible. Clicking it again should bring back the footer.
I tried playing with the bottom value but it doesn't hide the footer, only pushes it below while the page becomes taller to make room for it:
$('#footer_arrow').toggle(function() {
$('#footer_wrap').css('bottom', '-84px');
}, function() {
$('#footer_wrap').css('bottom', '0');
});
I want the same but with the footer actually disappearing below the page with just the arrow visible on top of it.
MARKUP:
<div id='footer_wrap'>
<footer>
<div id='footer_arrow'></div>
<div>
content
</div>
</footer>
</div>
CSS:
#footer_wrap {
position: absolute;
bottom: 0;
height: 84px;
}
footer {
position: absolute;
bottom: 0;
z-index: 9999;
position: relative;
}
#footer_arrow {
position: absolute;
width: 61px;
height: 23px;
top: -23px;
left: 50%;
background: url(images/footer_arrow.jpg) 0 0 no-repeat;
z-index: 9999;
cursor: pointer;
}
A couple things. First off, I recommend using toggleClass() instead of toggle(). That way, you can just add a class with the required CSS, and toggle it using toggleClass(). This way, you can change any styles necessary from pure CSS, instead of making the modifications in the JavaScript code. However, the toggle() from jQuery's event handling suite that you are currently using will work just fine nonetheless.
Secondly, to move the footer off screen, you'll need to use fixed positioning instead of absolute on #footer_wrap. Otherwise, the bottom is moving relative to the page, which means it just extends it. However, with fixed, the element is positioned at a fixed point in the viewport, which can be moved off screen without extending the page.
$('#footer_arrow').click(function() {
$('#footer_wrap').toggleClass('down');
});
#footer_wrap {
position: fixed;
bottom: 0;
height: 84px;
}
footer {
position: absolute;
bottom: 0;
z-index: 9999;
position: relative;
}
#footer_arrow {
position: absolute;
width: 61px;
height: 23px;
top: -23px;
left: 50%;
background: url(http://www.placehold.it/61x23) 0 0 no-repeat;
z-index: 9999;
cursor: pointer;
}
.down {
bottom: -84px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='footer_wrap'>
<footer>
<div id='footer_arrow'></div>
<div>
content
</div>
</footer>
</div>
What You have to do imho is not .toggle() a #footer_arrow element. You need to .toggle() a #footer_wrap element after clicking on #footer_arrow
Look into this fiddle: http://jsfiddle.net/tdcrsn2j/
I've changed Your HTML & CSS a little, but You can bring it back. It was done just to show case.
go with this
when you want to show
$('#footer_wrap').css({"display":"block"});
when you want to hide
$('#footer_wrap').css({"display":"none"});
Related
I'm trying to use the normal approach to create an element and hide it using jQuery once the page finished loading.
You can see this basic approach in many places but here's the code anyway:
DIV for the image I'd like to display while the page loads, right after the <body> tag:
<div class="pleasewait"></div>
To remove the icon from the screen after the page loads, in the HEAD section of the HTML page:
$(window).bind("load", function() {
$(".pleasewait").fadeOut("slow");;
});
CSS to style the image in the center of the page:
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.pleasewait {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(img/ajax-loader.gif) center no-repeat #fff;
}
I get the nav bar on my PHP page to load ok but nothing on the <body> section is displayed until the page fully loads (including waiting for the server call to complete and form the remainder of the page).
While there are other fancier methods of achieving my goals, I would really like to understand what I'm doing wrong here.
From the comments I saw you are using jQuery 3.1.1.
.bind() is deprecated since jQuery 3.0
Instead use
$(window).on('load', function(e){
....
})
Also make sure (from this answer and the jQuery API document):
When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.
HTML
<div id="preloader">
<div id="status">
</div>
</div>
<div id="wrappers">
Welcome to page
</div>
CSS
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
z-index: 999999;
}
#preloader #status {
width: 70px;
height: 70px;
position: absolute;
left: 50%;
top: 50%;
background-image: url(images/loader.gif);
background-repeat: no-repeat;
background-position: center;
}
jQuery
$(document).ready(function(){
$(window).load(function() {
$('#status').fadeOut();
$('#preloader').delay(100).fadeOut('fast');
$('#wrappers').delay(250).css({'overflow':'visible'});
});
});
I have a div that I want to completely cover a page. I don't want anything on the page to be showing. The div should overlay on the page and hide everything on it. To create such an overlay I use the following CSS:
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
}
But if the page that the overlay is over is too long, some parts of the page still shows. How can I make it so that the div completely covers the page? Setting the position to fixed doesn't help because the overlay is multi pages long and the scrollbars get wracked.
The CSS that you're going to want to use for the overlay div is this.
.overlay {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
}
This should completely cover the page with a black div.
I am having some difficulties with a scrolling fixed header I am creating. I found a good example of it on here and now I am trying to make it work with my changes to it and I am trying to adapt it.
I put additional divs than what were in the example and now whenever I scroll past the yellow bar, the red bar(my header) displays way lower than I want.
I created a fiddle to show what it is doing.
https://jsfiddle.net/zoue6gv7/
This worked until I added my top margin to my div id join_login. It now is that far away from the top.
#join_login {
position: absolute;
right: 15%;
top: 27px;
font-size: 1em;
color: #383838;
}
How can I get this header to stay fixed at the top after I get to my scroll point?
Is this what you want? https://jsfiddle.net/zoue6gv7/1/
I just removed the margin-top -50px and replaced it with
top: 0;
This should do the trick! You can just eliminate the space above #logo by adding margin-top: -15px
#logo {
position: absolute;
left: 15%;
top: 22px;
font-size: 2em;
margin-top: -15px;
}
Just kidding! I think I misunderstood what you're trying to do, if you want the red Header to stick to the top of the page even when you scroll down:
Use position: fixed; to tell the header to stay in the same location regardless of scrolling
Use top: 0px; to tell the header, that the location you'd like it to be fixed to is the very top of the page
header {
position: fixed;
top: 0px;
width: 100%;
height: 75px;
background: red;
z-index: 100;
border-bottom: 1px solid #888888;
}
I looked around what I would like to achieve, but I wasn't able to find any suitable answer.
Basically I can't make the code to correctly detect mouse entering and leaving a div that is overlapping another div.
This is my current situation:
Working demo: http://jsfiddle.net/2f5xx73y/
HTML:
<div style='height: 100%; width: 100%;padding: 30%;'>
<div class='box'>
<div class='inner-box'>Merry xmas!</div>
</div>
<div class='box'>
<div class='inner-box'>Happy new year!</div>
</div>
</div>
CSS:
.box {
height: 100px;
width: 100px;
display: inline-block;
position: relative;
background-color: green;
}
.inner-box {
height: 100%;
width: 100%;
position: absolute;
opacity: 0;
z-index: 1;
}
.zoomed-inner-box {
height: 160%;
width: 160%;
top: -30%;
left: -30%;
position: absolute;
background-color: red;
z-index: 1;
}
JS:
$(".inner-box").mouseenter(function () {
$(this).attr("class", "zoomed-inner-box");
});
$(".inner-box").mouseleave(function () {
$(this).attr("class", "inner-box");
});
As you can see there are two boxes which become bigger when hovered overlapping the other box.
Going right to left everything works fine, in fact the red div goes away as soon as the mouse leave it. This doesn't happen in the opposite direction, where a mouseleave event it's fired as soon as the cursor enters the green div behind the red one, while I want the red div to go away when the mouse completely leave it.
I also tried using the :hover selector for the inner-box class but it has the exact same behaviour. Do you know a nice solution to this problem?
Just change the z-index on .zommed-inner-box to overwrite the .inner-box's z-index. That way the currently hovered box has a higher z-index than .inner-box :
.inner-box {
height: 100%;
width: 100%;
position: absolute;
opacity: 0;
z-index: 1; <---- original z-index
}
.zoomed-inner-box {
height: 160%;
width: 160%;
top: -30%;
left: -30%;
position: absolute;
background-color: red;
z-index: 2; <---- higher z-index
}
FIDDLE
I have asked questions like this and have not really got an answer that really helped me! I know it is probably very easy and i just can't figure it out!
I have been studying jQuery for a few days now and have the basics down but cant create the right function to make this effect happen! Please visit the website below!
There are a few things i would like to know about! The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.) The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
The next part i would like to know is when you click one of the icons a whole another window pops out. I kind of have an idea of how these both happen but i cant put all the pieces together. Please help me out! I know it cannot be that difficult. Even if you know of any jQuery plugins that can help achieve these results, would be even better!
http://intothearctic.gp/en/
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates"></div>
</div>
</div>
CSS
#sidemenu {
width: 60px;
height: 100%;
min-width: 60px;
height: 100vh;
max-width: 60px;
background-color: #383D3F;
background-size: 100% 100%;
background-attachment: fixed;
margin-top: -8px;
margin-bottom: -8px;
margin-left: -8px;
position: absolute;
}
#regionsContainer {
width: 60px;
height: 481px;
min-height: 481px;
min-width: 60px;
max-width: 60px;
max-height: 481px;
background-color: #383D3F;
position: relative;
top: 25%;
bottom: 25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background-image:url(../_images/_header/regionsUnitedStates.png);
}
#regionsUnitedStates:hover {
background-position:bottom;
}
you can do that using position: absolute like mentioned by fizzix before, and for each of your question with this html example
<div id="sidemenu">
<div id="submenu" class="not-open">
Sub
<div id="submenu-inner">
inner
</div>
</div>
<div id="submenu-item1">
item
</div>
</div>
1 The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.)
This can be achieved with jQuery on document ready, and using setTimeout if you want to further delay it, then add a class to the element, like this
CSS :
#sidemenu {
background: #000;
width: 50px;
height: 100%;
position: absolute;
left: -50px;
transition: left ease-in-out 0.5s;
}
#sidemenu.show {
left: 0;
}
jQuery :
$(function() {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
2 The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
This can be achieved with only CSS on hover, what you need is put the floating element inside the element you want to hover, in this example submenu-inner inside submenu, then add some CSS
#submenu {
background: #fff;
height: 50px;
margin: 150px 0 0 0;
text-align: center;
position: relative;
}
#submenu.not-open:hover #submenu-inner {
left: 50px;
opacity: 1;
}
#submenu-inner {
opacity: 0;
position: absolute;
transition: all ease-in-out 0.5s;
top: 0;
left: 250px;
height: 50px;
background: #f00;
}
firstly, the inner element is transparent and positioned more to the right using left, then on hover, set the position right beside the container, by setting the left CSS again to the width of the container
3 The next part i would like to know is when you click one of the icons a whole another window pops out
it's the same with number 1, except this one triggered by onClick event
here's the working example on JSFIDDLE
I dont think any plugin is required.
You can use translate to keep the menu hidden.transform:translate(90%)
Please refer this example:JSFIDDLE
The entire site is using absolute positions. This means that they are positioned on the page with pixel co-ordinates. They then using jQuery animate to move the top and left positions.
I have made a brief example of how to do this HERE. You can edit this to your liking.
If you are interested in seeing what the site was built with, you can see a whole list HERE