Show navbar on mousover - javascript

I'm working on a website and I thought it would be cool to have the navbar only show when you move your mouse to the top of the screen. Is that even possible? because I cant find any tutorials on it. Anyway, is there also a way for it to not just appear, but more slide down from the top? Kind of like the windows taskbar does only upside down. Thanks!
This is the site if anyone wants to see the navbar right now: https://www.oakparknerds.tk/

There are a few approaches that could be taken to achieve this. The easiest is to just use CSS to animate the margin-top of the nav bar when hovered. You can set the nav bar to have no background color, then on hover change the color to make it appear.
Example with nav bar ID of #slidingBox:
#slidingBox {
width: 100%;
height: 60px;
background-color: none;
overflow-y: scroll;
margin-left: 0px;
margin-top: -50px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#slidingBox:hover {
margin-top: 0px;
background-color: #d9dada;
}
Here is a fiddle

Here is a way to do this with jquery and css. I changed the background color to orange so you can see it in action.
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="nav_container" style="border:1px solid black;width:100%;height:300px;">
<nav id="my_nav" style="display:none;width:100%; height:200px;background-color:orange;">
Links
</nav>
</div>
<script>
$(document).ready(function(){
$("#nav_container").mouseover(function(){
$("#my_nav").slideDown(3000);
});
$("#nav_container").mouseout(function(){
$("#my_nav").fadeOut();
});
});
</script>
</body>
</html>

Related

JQuery Toggle animation interfering with CSS height transition

I have a JQuery function to toggle a Div with ( toggle(200) ) so there is a small sliding animation.
However I have another function that will add a class to this div, which change the height of the div with a 0.3s transition.
#navbar {
height: 270px;
transition: height 0.3s ease-out;
}
#navbar.change-size {
height: 430px !important;
}
My problem is that the transition isn't just applying to the height (which was the intended purpose) but it also applies to the first JQuery function toggling when the div slides in.
My question is how can I set up my css so the height transition effect only applies to .change-size height ?
PS: I didn't add my JQuery toggle code as I believe it is not relevant. The JQuery sliding animation is probably tweaking the div's height/width to create the sliding effect, therefore being influenced by the transition I set up.
Please let me know if I'm unclear. Thank you !
Hope this helps
little fiddle
<!DOCTYPE html>
<html>
<head>
<style>
#navbar {
height: 270px;
-ms-transition: all .3s ease-out; /*IE*/
-moz-transition: all .3s ease-out; /*firefox*/
-webkit-transition: all .3s ease-out;/*safari and chrome*/
-o-transition: all .3s ease-out; /*opera*/
background-color: #999;
}
#navbar.change-size {
height: 430px;
}
</style>
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="navbar">
Hello
</div>
<button id="toggle">.change-size</button>
<script>
$(function(){
$("#toggle").on("click", function(){
$("#navbar").addClass("change-size");
})
})
</script>
</body>
</html>

CSS transition hover (h1 inside a div seems not to work properly)

I'm having a slight problem with css transition. On my website, I have a div, and in that div is a h1.
Here's the css code.
#inner1 {
background-image: url("rsz_astromenu1.jpg");
height: 333px;
width: 500px;
display: inline-block;
opacity: 0.5;
font-size: 10px;
}
#inner1:hover {
font-size: 50px;
transition: font-size 1s linear;
opacity: 1;
transition: opacity 1s linear;
}
I want to animate the opacity (from 0.5 to 1) and font-size (from 10px to 50px).
However, when I hover my mouse over that div, the opacity is nicely transitioned, but the text just changes the size instantly. So the hover seems to work and change the font-size, why is transition omitted?
If I make it #inner1 h1:hover, the transition works properly but only when I hover over the text. And I want the font-size transition when I hover over that div.
I tried to work around the problem and write a JS script for enlarging the text.
Here's what I came up with. I'll paste all the HTML content as well since there's not much of it.
However, this is not really smooth, I've gone as far as to incrementing only 0.09px every millisecond, but it still looks bumpy and also sends hundreds of unnecessary commands to the browser, right?
How can I solve that problem? Either with CSS or JS?
Thanks in advance ;).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="mainStyle.css">
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner1" class="hover-menu">
<h1 id="astro-h1" class="hover-menu">Astrofotografia</h1>
</div>
<div id="inner2"></div>
</div>
</div>
<script>
var JSinner1 = document.getElementById("inner1");
var JSastroh1 = document.getElementById("astro-h1")
JSastroh1.style.fontSize = "16px";
var textBigger = function() {
var newSize = parseFloat(JSastroh1.style.fontSize) + 0.009 + "px";
window.setInterval(textBigger, 1)
if (parseFloat(newSize) < 60) {
JSastroh1.style.fontSize = newSize;
console.log(newSize);
}
}
JSinner1.addEventListener("mouseover", textBigger)
</script>
</body>
</html>
You're overwriting one transition with another. Try with
transition: font-size 1s linear,opacity 1s linear;
It's very simple, the problem is your :hoverselector, as you are adding two transitions properties, the last one is overwriting the previous one. In order to make this work, just add this to that rule:
transition: opacity 1s linear, font-size 1s linear;
Or you can use
transition: all 1s linear;
instead of using
transition: font-size 1s linear;
transition: opacity 1s linear;
use all
transition: all 1s linear;
or merge the two into one transition: font-size 1s linear,opacity 1s linear;
#inner1 {
background-image: url("rsz_astromenu1.jpg");
height: 333px;
width: 500px;
display: inline-block;
opacity: 0.5;
font-size: 10px;
}
#inner1:hover {
font-size: 50px;
opacity: 1;
transition: all 1s linear;
}
<div id="inner1">
<h1> Some text </h1>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#inner1 {
background-image: url("rsz_astromenu1.jpg");
height: 333px;
width: 500px;
display: inline-block;
opacity: 0.5;
font-size: 10px;
transition: opacity 1s linear, font-size 1s linear;
}
#inner1:hover {
font-size: 50px;
opacity: 1;
}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner1" class="hover-menu">
<h1 id="astro-h1" class="hover-menu">Astrofotografia</h1>
</div>
<div id="inner2"></div>
</div>
</div>
</body>
</html>

Description hidden until user hovers over the image?

I'm looking for some help with this project. I want to be able to hover over the image and this black box pops up with the description in it. Can I get some examples of how I would go about doing this? Thank you all so much for the help!
what I'm looking to do when user hovers over the image for a description
with pure css you can do something like this
#image_description {
display: none;
background-color : #333;
color : #fff;
padding : 50px;
}
#the_image:hover~#image_description{
display: block;
}
<img src="https://placehold.it/350x150" id="the_image">
<div id="image_description">SomeDescription</div>
with jQuery you can do something like this
$(document).ready(function(){
$("#the_image").hover(function(){
$("#image_description").fadeIn();
}, function(){
$("#image_description").fadeOut();
});
});
#image_description { display : none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://placehold.it/350x150" id="the_image">
<div id="image_description">SomeDescription</div>
#Allan Empalmado is correct. But you can add CSS transitions to make it flow in and out smoothly, with pure CSS transition property. Add this to the code...
#image_description {
background-color: #333;
color: #fff;
oveflow:hidden;
-webkit-transition: max-height 0.9s ease;
-moz-transition: max-height 0.9s ease;
transition: max-height 0.9s ease;
max-height:0;
}
#the_image:hover ~ #image_description{
max-height: 150px;
}
The -webkit- and -moz- make the CSS cross-browser. it is a simple google search to find other properties you can manipulate with the transition properties.Hopefully you can find other things you can do to enhance Alans sample code. happy coding !!

Getting a 'slide down' js panel implemented within WP

I'm trying to implement a very simple vertical slide down panel in Wordpress, I've tried jbar (http://tympanus.net/codrops/2009/10/29/jbar-a-jquery-notification-plugin/) and an easy JS method I found at http://jsfiddle.net/ahr3U/
But I still cannot get this implemented, I've tried inserting the below code in the footer.php right before it's close, and within the header.php and still nothing appears.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
<script>
$(document).ready(function(){
$("#notification").addClass("visible");
});
</script>
And CSS:
#notification {
background-color: #F00;
color: #FFF;
height: 25px;
position: absolute;
top: -25px;
width: 100%;
transition: top 0.5s;
-moz-transition: top 0.5s;
-webkit-transition: top 0.5s;
-o-transition: top 0.5s;
}
#notification.visible {
top: 0px;
}
The HTML CTA via the div, I've tried calling with the <head> and <body>
<div id="notification">Page load complete...</div>
Try putting the script code in the and make sure you close the first script tag where you include the jquery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

How to darken an image on mouseover?

My problem..
I have a number of images (inside hyperlinks), and I want each to darken on mouseover (i.e. apply a black mask with high opacity or something), and then go back to normal on mouseout . But I can't figure out the best way to do it.
I've tried..
Jquery color animate and some javascript references.
Setting the opacity of the image with javascript.
I don't want..
Image start at 80% opacity then go to 100% on mouseover (that's easy).
To swap between 2 images (one light & one dark), forgot the mention this sorry..
To reiterate..
I want in image (inslide a hyperlink) to darken on mouseover and then lose its darkness on mouseout.
Thoughts?
UPDATE :
This is my progress from suggestions. Looks fine in IE8, but not in FF3
<html>
<body>
<a href="http://www.google.com" style="background-color:black; opacity:1;filter:alpha(opacity=100)">
<img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200"
style="opacity:1;filter:alpha(opacity=100)" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" />
</a>
</body>
</html>
Thoughts?
-- Lee
ANSWER
I'm going with this (seems to work in IE8 & FF)
<html>
<head>
<style type="text/css">
.outerLink
{
background-color:black;
display:block;
opacity:1;
filter:alpha(opacity=100);
width:200px;
}
img.darkableImage
{
opacity:1;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<a href="http://www.google.com" class="outerLink">
<img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200"
class="darkableImage" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" />
</a>
</body>
</html>
Or, similar to erikkallen's idea, make the background of the A tag black, and make the image semitransparent on mouseover. That way you won't have to create additional divs.
CSS Only Fiddle (will only work in modern browsers)
JavaScript based Fiddle (will [probably] work in all common browsers)
Source for the CSS-based solution:
a.darken {
display: inline-block;
background: black;
padding: 0;
}
a.darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.7;
}
And the image:
<a href="http://google.com" class="darken">
<img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
</a>
Make the image 100% bright so it is clear.
And then on Img hover reduce it to whatever brightness you want.
img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
img:hover {
-webkit-filter: brightness(70%);
filter: brightness(70%);
}
<img src="http://dummyimage.com/300x150/ebebeb/000.jpg">
That will do it,
Hope that helps
I realise this is a little late but you could add the following to your code. This won't work for transparent pngs though, you'd need a cropping mask for that. Which I'm now going to see about.
outerLink {
overflow: hidden;
position: relative;
}
outerLink:hover:after {
background: #000;
content: "";
display: block;
height: 100%;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
width: 100%;
}
How about this...
<style type="text/css">
div.frame { background-color: #000; }
img.pic:hover {
opacity: .6;
filter:alpha(opacity=60);
}
</style>
<div class="frame">
<img class="pic" src="path/to/image" />
</div>
Put a black, semitransparent, div on top of it.
Create black png with lets say 50% transparency. Overlay this on mouseover.

Categories