I have a div that have img with id and another div inside it
I want to hide the info div (you can see in code) on load of the page and then show it again on hover of the img - I also want the info div to slide right nicely..
Thanks in advance for helping :)
the HTML
<div class="wrapper">
<img id="logo" src="img/logo.png" alt="logo">
<div id="info">
info- blah <br>
blah & blah .<br>
email#gmail.com
</div>
</div>
The CSS
.wrapper{
float: left;
opacity: 0.4;
margin-top: -30px;
margin-left: 5px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#logo {
width: 39px;
}
.wrapper:hover{
opacity: 0.6;
}
#info {
margin-left: 2px;
margin-top: 5px;
float:right;
font-size: 9px;
}
What is the jQuery I need for this?
Here's one way to do it.
I don't know if that's what you wanted, but since you're already using CSS3, you don't need jQuery for that:
.wrapper {
float: left;
opacity: 0.4;
margin-left: 5px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
overflow:visible;
position:relative;
}
.wrapper:hover {
opacity: 0.6;
}
#info {
margin-left: 2px;
margin-top: 5px;
float:right;
font-size: 9px;
opacity:0;
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
left:50%;
position:absolute;
top:0;
}
.wrapper:hover #info {
left:100%;
opacity:1;
}
http://jsfiddle.net/Y2B2v/
Place your .wrapper with the same image height. Place an overflow:hidden to hide text which is under.
After you must just change height in .wrapper:hover to show the text.
If you want a nice transition, you can adjust that with
.wrapper:hover{
opacity: 0.6;
height:100px;
transition: height 1;
-webkit-transition: height 1s; /* Safari */
}
like this : http://jsfiddle.net/AW9qh/2/
Related
I've done some research and it doesn't seem that I can find exactly what I'm looking for. My goal is to have a navigation bar on the bottom of my JS-app and when a user clicks a certain button, it would start an animation where the navbar travels from the bottom of the app to the top of the app. Here's some edits I made to illustrate what I mean:
default position
after user presses "profile" button, for example
Not sure what JS library would help me with this or if there is a code-sample. The key here is that I dont want it to shift on any button clicked, only certain ones. For example, if the user clicks on "Library" from my example above, I want it to stay on the bottom.
Might anyone know how I can accomplish this?
EDIT: so the reason im doing this is because this is an electron app that i want some content to be local, and some content to be remote. This is why when the users presses "Library" i would want the navbar to remain stationary. However if the user presses "Profile" it would shift to the top and the "content" window would act sort of like a web-browser in that it would load a page on a remote webserver. I hope that helps. And thanks for all the info!
EDIT 2: A little off-topic, but i get this weird padding that im not sure where is coming from:
weird space
EDIT 3:
Heres the HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="renderer.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet" href="styles.css">
<body>
<script>
function toggleNavLocation() {
//alert('clciiikkkked');
$('nav').toggleClass('top');
}
</script>
<nav>
<div id="logo_container"><img id="logo"
src="./assets/images/poscon_nav.jpg" width="100px" height="55px" /></div>
<div id="navitems">
<ul>
<li id="dashboard">DASHBOARD</li>
<li id="pilotclient">PILOT CLIENT</li>
<li id="livemap">LIVE MAP</li>
<li id="community">COMMUNITY</li>
<li id="profile" onclick="toggleNavLocation()">PROFILE</li>
<li id="training">TRAINING</li>
<li id="support">SUPPORT</li>
<li id="library">LIBRARY</li>
</ul>
</div>
</nav>
<div id="right_content">
<div id="user_pane">
<span id="username"></span>
</div>
</div>
<div id="center_content">
</div>
<div id="left_content">
</div>
</body>
</html>
CSS:
body {
font-family: "Arial", Serif;
background-color: rgb(27, 27, 27);
overflow-x: hidden;
overflow-y: hidden;
}
nav {
position: absolute;
bottom: 0;
left: 0;
width:850;
height:75px;
background: rgb(27, 27, 80);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
nav.top {
bottom:calc(100% - 50px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#dashboard, #pilotclient, #livemap, #community, #profile, #training,
#support, #library, #search_img {
font-size: 11px;
color: rgb(81, 81, 81);
padding-top: 22px;
display: inline-block;
width: 75px;
height:75px;
background:rgb(27, 27, 27);
text-align:center;
}
#dashboard:hover, #pilotclient:hover, #livemap:hover, #community:hover,
#profile:hover, #training:hover, #support:hover, #library:hover {
background: #252525;
}
#logo_container {
display: inline-block;
position: absolute;
left: 10px;
bottom: 2px;
}
#navitems {
display: inline-block;
margin-left: 150px;
height: 100px;
}
#right_content {
width: 250px;
height: 575px;
position: absolute;
top: 0px;
right: 0px;
background-color: red;
}
#center_content {
width: 500px;
height: 575px;
position:absolute;
top: 0px;
right: 250px;
background-color: blue;
}
#left_content {
width: 250px;
height: 575px;
position:absolute;
top: 0px;
left: 0px;
background-color: green;
}
#user_pane {
width: 250px;
height: 250px;
position: absolute;
top: 0px;
right: 0px;
background-color: green;
}
#username {
width: 200px;
height: 25px;
position: absolute;
top: 175px;
left: 20px;
text-align: center;
background-color: white;
}
You can use some JS to add a class to your nav bar to do the animation, and you can add this class when clicking on a button with specific IDs.
Below is a snippet that demonstrates this:
$('#profile').on('click', function(){
toggleNavLocation();
});
function toggleNavLocation() {
$('nav').toggleClass('top');
}
nav {
width:100vw;
height:50px;
background:#000;
bottom: 0;
color:#fff;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: absolute;
}
nav.top {
bottom:calc(100% - 50px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
li {
display:inline-block;
width:100px;
height:25px;
background:rgba(255,255,255,0.2);
text-align:center;
line-height:25px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<nav>
<ul>
<li id="profile">Profile</li>
<li id="library">Library</li>
</ul>
</nav>
</body>
</html>
If you don't want it to animate, but just jump to top or bottom, then you can remove all of these lines:
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
Here is a snippet demonstrating this:
$('#profile').on('click', function(){
toggleNavLocation();
});
function toggleNavLocation() {
$('nav').toggleClass('top');
}
nav {
width:100vw;
height:50px;
background:#000;
bottom: 0;
color:#fff;
position: absolute;
}
nav.top {
bottom:calc(100% - 50px);
}
li {
display:inline-block;
width:100px;
height:25px;
background:rgba(255,255,255,0.2);
text-align:center;
line-height:25px;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<nav>
<ul>
<li id="profile">Profile</li>
<li id="library">Library</li>
</ul>
</nav>
</body>
</html>
These examples us some JQuery, but if you want pure JS, you should be able to port it over to Vanilla with a bit of thought put into the code I have supplied.
It seems pretty straight forward but we need to know which property did you use to position the navbar at the bottom?. Best solution would be to create two css Properties of different properties in flexbox behavior then just use JavaScript to change the nav id corresponding the properties when the profile is clicked.
You can animate the navbar to slide between 2 vertical positions with css as such:-
#keyframes animatebottom {
from {
bottom: -300px;
opacity: 0
}
to {
bottom: 0;
opacity: 1
}
}
Modify the "bottom" property to suit your page height and other requirements.
I'm using bootstrap3. Having said that, I'm open to implementing my requirement in pure javascript or Jquery or any other similar frameworks.
I'm looking to implement a sidebar on the left hand side of the page. The sidebar needs to be invisible. However a handle like picture to show that something can be clicked is a must. When the user clicks on this handle type image, the sideber needs to float out. The sidebar will have a bunch of options on it which the user can choose which will later act as a filter to the contents on the page. Once the work is done, if the user clicks anywhere outside of the sidebar, the sidebar needs to slide back into it's place.
I like the example here - http://startbootstrap.com/template-overviews/simple-sidebar/ However, it doesn't float on top of the existing content, instead, pushes out the content & also doesn't have a handle type stuff I'm after, instead uses a button.
Could I please request some guidance here?
First off there are several different off-canvas menu plugins for jquery. Here is one that may be helpful jquery off canvas push navigation. Or you can check out this page with multiple plugins Jquery off canvas menus.
If you don't want to use a plugin you can do this with a very tiny jquery code and some css. First you need to create a menu button and a menu and give the menu a negative margin so it is hidden. Then you should wrap you body content in a div so that you can easily move it over when the menu is open. Then you just need to use jquery toggleClass to toggle the body to have a class of menu-open when when your button is clicked, a nav link is clicked and when the menu is open your main content is clicked.
Fiddle demo Fiddle
Here is the jquery:
$( document ).on( "click", ".menu-button, .menu ul li a, .menu-open .content-wrapper", function() {
$( 'body' ).toggleClass( "menu-open" );
});
The html:
<div class="menu-button">
<span class="menu-layer first"></span>
<span class="menu-layer second"></span>
<span class="menu-layer third"></span>
</div>
<nav class="menu">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
<div class="content-wrapper">
<h1>Body Content</h1>
<p>Here is you main content</p>
</div>
And the css:
body{
overflow-x: hidden;
}
.menu{
width: 300px;
height: 100%;
position: fixed;
left: -300px;
top: 0;
background: #000;
z-index: 99;
-ms-transition: all 500ms ease-in-out;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.menu ul{
list-style-type:none;
padding: 0;
margin: 0;
}
.menu ul li{
width: 100%;
margin: 1px 0;
}
.menu ul li a {
width: 100%;
display: block;
padding: 15px;
background: #111;
color: #fff;
font-size: 16px;
}
.content-wrapper {
padding: 20px;
padding-top: 80px;
width: 100%;
min-height: 100vh;
-ms-transition: all 500ms ease-in-out;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
/*menu button styles*/
.menu-button {
width: 100px;
height:75px;
text-align:center;
position:fixed;
left:0;
top:0;
z-index: 99;
background: #111;
-ms-transition: all 500ms ease-in-out;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.menu-button:hover {
cursor:pointer;
cursor: hand;
}
.menu-button .menu-layer {
border-radius: 1px;
display: block;
height: 1px;
position: absolute;
width:50%;
left:25%;
background:#fff;
-ms-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.menu-button .menu-layer.first { top: 25%;}
.menu-button:hover .menu-layer.first {top:30%; }
.menu-open .menu-button .menu-layer.first {
top: 50%;
left: 35%;
width:30%;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-button .menu-layer.second { top: 45%;}
.menu-open .menu-button .menu-layer.second {
opacity: 0;
left: 0;
}
.menu-button .menu-layer.third { top: 67%;}
.menu-button:hover .menu-layer.third {top:62%; }
.menu-open .menu-button .menu-layer.third {
top: 50%;
left: 35%;
width:30%;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*menu open styles */
.menu-open .menu{
left: 0;
}
.menu-open .menu-button {
left: 300px;
}
.menu-open .content-wrapper {
margin-left: 300px;
}
I am trying to achieve the effect shown here:
https://css-tricks.com/almanac/properties/t/transition/
Where the color changes when the user hovers over the element. But I want this to occur overtop a background image I set and for the animation to reverse when the user moves their cursor away from the element.
An example of which can be found here:
http://thefoxwp.com/portfolio-packery-4-columns/
I can get the transition part working with:
.box {
width: 150px;
height: 150px;
background: blue;
<!--background-image: url("http://lorempixel.com/380/222/nature");-->
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: black;
cursor: pointer;
}
<div class="box"></div>
But I am having trouble achieving it with a background image and making the white animation transparent over top of it.
The better way to do it would be to use an overlay over the image and apply transition on its opacity.
See this FIDDLE
Use a wrapper div for both .box and .overlay. Since we want overlay to placed exactly top of the box, we absolute positioned overlay on the top of box.
<div class="wrapper">
<div class="box">
</div>
<div class="overlay">
</div>
</div>
You Css
.wrapper {
position: relative;
width: 150px;
height: 150px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
.box {
position: absolute;
//background: blue;
width: 100%;
height: 100%;
background-image: url("http://lorempixel.com/380/222/nature");
}
.overlay {
position: absolute;
z-index: 1;
opacity: 0;
width: 100%;
height: 100%;
background: white;
-webkit-transition: opacity 2s ease-out;
-moz-transition: opacity 2s ease-out;
-o-transition: opacity 2s ease-out;
transition: opacity 2s ease-out;
}
.overlay:hover {
opacity: 0.7;
}
You can add background-image:none on .box:hover. It will remove the background-image and you can get the background-color work. As soon as, you move out of the div.box, image will appear again.
.box {
width: 150px;
height: 150px;
background-image: url("http://lorempixel.com/380/222/nature");
margin-top: 20px;
margin-left: auto;
margin-right: auto;
-webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}
.box:hover {
background-color: black;
cursor: pointer;
background-image:none;
}
<div class="box"></div>
the problem is that background and background-image cannot both exist at the same time. try using nested div tags: one with the background color nested inside the background-image.
I'm on basic jQuery. I'd like to display a text inside a div with some kind of animation and give a white background to the same div. This is a starting code I made:
<div class="square square1">
<p class="toggle">some text</p>
</div>
<div class="square square2"></div>
<div class="square square3"></div>
<div class="square square4"></div>
..the style..
.square {
width:100px;
height:100px;
}
.toggle {
display:none;
width:100px;
height:100px;
}
..and the simple js.
$('.square1').click(function(){
$('.toggle').slideToggle(300).addClass('white');
});
The problem is that I'm sure this is not the right way to display a text inside a container. The div is 'jumping' when the text is toggled.
Also, is there some jQuery animation to display a content with a 'nicer' movement? Toggle is so rude!
On fiddle: http://jsfiddle.net/2pnxf4go/9/
Try this
var activeDIV = document.querySelector("div");
activeDIV.addEventListener("click", toggleMe, false);
function toggleMe(e) {
this.classList.toggle("toggle")
}
*{box-sizing: border-box; padding: 0; margin: 0}
.square {
width: 100px;
height: 100px;
background: #ccc;
margin: 4px;
cursor: pointer;
overflow: hidden
}
.square p{
width: 100%;
height: 100%;
line-height: 100px;
text-align:center;
background: current-color;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: transform .3s ease, background .3s .3s ease;
-moz-transition: transform .3s ease, background .3s .3s ease;
transition: transform .3s ease, background .3s .3s ease
}
.toggle p{
background: white;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
transform: translateY(0%)
}
<div class="square square1">
<p class="toggle">some text</p>
</div>
<div class="square square2"></div>
<div class="square square3"></div>
<div class="square square4"></div>
You could do it with out jquery animations and use css transitions instead.
$('.square1').click(function(){
$('.toggle').addClass('white');
});
CSS:
.toggle{
color: transparent;
transition: color 0.2s ease-in-out;
}
.toggle.white{
color: #000;
}
Here is the jsfiddle: http://jsfiddle.net/kimimsc/LEjBR/
<section id="portfolioContent" class="blueTheme">
<div class="container mmContainer">
<div class="pullLeft portfolioVignette">
<div class="portfolioVignetteFilter">
<p>Test1</p>
</div>
</div>
</div>
#portfolioContent {}
.portfolioVignette {background-color: gold; width: 500px; height: 300px; border-radius: 20px; margin: 20px;}
.portfolioVignette > .portfolioVignetteFilter {height: 300px; width:0px; border-radius: 20px; background-color: rgba(204,204,204,0.5); -webkit-transition: width 0.5s ease-out; -moz-transition: width 0.5s ease-out; -o-transition: width 0.5s ease-out; transition: width 0.5s ease-out;}
.portfolioVignette:hover > .portfolioVignetteFilter {height: 300px; width: 500px; border-radius: 20px; background-color: rgba(204,204,204,0.5); -webkit-transition: width 0.5s ease-out; -moz-transition: width 0.5s ease-out; -o-transition: width 0.5s ease-out; transition: width 0.5s ease-out;}
So first of all, if you look at the jsfiddle that I provided you will see what I've done.
Bascily I have a div (in yellow) and I am using css3 transition to animate the width change on another div (grey with 0.5 alpha). The grey div appears over the yellow on hover and disappears when the hover action is over. You can also see that there is a text element 'Test1' that is always displayed.
So what I want to do is when there is no hover I would like to have only the yellow element without anything else (so no text aswell) and on hover I would like the text to come with the grey element.
I don't think this is the right way to do it but I couldn't find anything that could help me.
If I haven't been clear enough. tell me if you have any questions.
Thank you for your help guys,
I did something similar, but interpreted your problem a little differently:
.portfolioVignette p {
width:0;
margin-left:0;
overflow: hidden;
transition: width .5s ease-out;
transition: margin-left .5s ease-out;
}
.portfolioVignette:hover p {
width:100%;
margin-left:90%;
}
Something like this should do it:
.portfolioVignette p {
width: 0;
overflow: hidden;
transition: width 0.5s ease-out;
}
.portfolioVignette:hover p {
width: 100%;
}
See it here: http://jsfiddle.net/shomz/LEjBR/6/