I'm trying to create the same effect as found on this site here https://glenner.org/ in the header when you click either the phone or email icon it toggles hidden text to slide. So when you click on the phone icon the text slides between the phone and the email icon.
I have this so far:
<div id="clickable" style="float:left; cursor:pointer; color: red"><i class="fa fa-phone"></i></div>
<div id="hidden" style="display:none; white-space:nowrap;">Phone Number</div>
<div id="clickable2" style="float:left; cursor:pointer; color: red"><i class="fa fa-envelope"></i></div>
<div id="hidden2" style="display:none; white-space:nowrap;">Email Here</div>
//
$('#clickable').click(function() {
$('#hidden').animate({width:'toggle'},350);
});
$('#clickable2').click(function() {
$('#hidden2').animate({width:'toggle'},350);
});
As of now when I click on one of the links it goes down to the next line, I'm sure I'm missing some css styling to fix this?
Here is my JsFiddle set up for it: http://jsfiddle.net/804jeg82/412/
I would clean up your code a little, put the hidden div inside the clickable div. Use CSS to control the animation and use classes rather than id's.
But that's just personal preference.
$(document).ready(function(){
$('.clickable').on('click' , function() {
$(this).find('.hid').toggleClass('showme');
});
});
.clickable .fa {
cursor: pointer;
color: red
}
.clickable .fa,
.hid {
float: left;
}
.hid {
width: 0;
overflow: hidden;
white-space: nowrap;
transition: all ease .35s;
-webkit-transition: all ease .35s;
-moz-transition: all ease .35s;
}
.showme {
width: 180px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="clickable"><i class="fa fa-phone"></i>
<div class="hid">Phone Number</div>
</div>
<div class="clickable"><i class="fa fa-envelope"></i>
<div class="hid">Email Here</div>
</div>
You need to add float:left to your hidden div
Specifically:
<div id="hidden" style="display:none; white-space:nowrap; float:left">Phone Number</div>
You may also wish to consider separating your HTML and CSS, for example if you used the ID, you could do something like:
HTML
<div id="hidden">Phone Number</div>
CSS
#hidden {
display:none;
white-space:nowrap;
float:left;
}
Related
I'm trying to achieve 3 clickable <div> that expand and hide/overlap others on click, while showing what's inside each clicked <div>. I only have JQuery as of right now.
My initial question is, what should I use? (Flexbox? CSS animation? React?)
Is it possible in vanilla html+css+js stack without having a bonky transition ?
I made an image to illustrate what I'm trying to say:
It is possible just by using pure Javascript, all you need to do is add a click event to each div, and when one is clicked you issue yourDivName.setAttribute("style", "display: block"); and issue yourDivName.setAttribute("style", "display: none"); to the other two. Then just repeat this process for each one. Obviously enclosing each one in a function yourFunctionName(){
//Enter logic here
}
Your process should be first getting each div and putting it in a variable, then doing the above code according to what you wish to do to the div. I hope this helps let me know if you'd like me to do the Javascript for you :)
First of all, you should write your script in the question when asking questions on stackoverflow. Because we must see what code do you have.
About your question, there are so many options. If you want to use jQuery:
HTML:
<div class="group"></div>
<div class="group"></div>
<div class="group"></div>
JavaScript:
$('.group').on('click', function(){
$('.group').hide();
$(this).show();
});
If you want to make it with CSS, you can do something like:
HTML:
<div class="group"></div>
<div class="group"></div>
<div class="group"></div>
CSS:
.group{
display: none;
}
.group:active{
display: block;
}
If you want to make some animation you can use CSS transition
I am answering my own question to show you the progress I made.
This is greatly starting to get form following both your advices. (Jsfiddle at the end).
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StackCode</title>
<link rel="stylesheet" href="dummy.css" />
</head>
<body>
<header>
</header>
<section class="section">
<div class="service-box">
<div class="service-story">
<div> <h1> Title </h1> </div>
<img class="img-left" src="https://via.placeholder.com/250x700">
<div class="service-story-expand">
<h1>TITLE</h1>
<p>Sample text</p>
<img src="https://via.placeholder.com/100">
</div>
</div>
<div class="service-art">
<div> <h2> Title2 </h2></div>
<img class="img-middle" src="https://via.placeholder.com/250x700">
<div class="service-art-expand">
<h1>TITLE</h1>
<p>Sammple text</p>
</div>
</div>
<div class="service-motion">
<div> <h2> Title3 </h2></div>
<img class="img-right" src="https://via.placeholder.com/250x700">
<div class="service-motion-expand">
<h1>TITLE</h1>
<p>Sammple text</p>
</div>
</div>
</div>
</section>
<script src="jquery-3.4.1.min.js"></script>
<script src="dummy.js"></script>
</body>
</html>
CSS
*
{
margin:0px;
padding:0px;
}
html {
overflow-x :hidden;
background: black;
}
header
{
height:20px;
overflow: hidden;
background-color: black;
padding: 45 0 0 0;
z-index: 0;
width: 100%;
}
.section{
width: 100%;
background:grey;
margin: auto;
}
.service-box{
overflow: hidden;
width: 90%;
height: auto;
margin:auto;
display: flex;
justify-content: space-evenly;
}
.service-story{
height: auto;
overflow: hidden;
flex:1;
order: 1;
transition: flex .3s ease-out;
}
.service-story.clicked{
background:white;
height: auto;
flex:6;
transition: flex .3s ease-out;
}
.service-story-expand{
display: none;
}
.service-art{
overflow: hidden;
flex:1;
transition: flex .3s ease-out;
order: 2;
}
.service-art.clicked{
background:white;
flex:6;
transition: flex .3s ease-out;
}
.service-art-expand{
display: none;
}
.service-motion{
overflow: hidden;
flex:1;
transition: flex .3s ease-out;
order: 3;
}
.service-motion.clicked{
background:white;
flex:6;
transition: flex .3s ease-out;
}
.service-motion.clicked img{
float: left;
}
.service-motion-expand{
display: none;
}
.service-story.clicked img{
width:auto;
height:auto;
}
Js + Jquery
$('.service-story').on('click', function(){
$(this).toggleClass('clicked');
$(this).show();
$('.service-story-expand').show();
});
$('.service-art').on('click', function(){
$(this).toggleClass('clicked');
$(this).show();
$('.service-story-expand').show();
});
$('.service-motion').on('click', function(){
$(this).toggleClass('clicked');
$(this).show();
$('.service-motion-expand').show();
});
I chose the solution of flexbox. This is not exactly what I was looking for, but it does the trick.
Now the problem I encounter are the following.
How to put content which is firstly hidden next to my images and not under ?
How to close other divs when one is open ?
How to hide content once a <div> is clicked again ? (If I understand correctly, is a "If/Then/Else" situation)
I think the last two questions are frequently asked, so I'll start searching by myself, just showing my progress.
Thank you once again for your time, and I hope I did better on formating.
Here is a jsfiddle.
https://jsfiddle.net/7oa28cg4/
Ps: Also working on responsiveness, i'm learning it.
I am trying to create on hover color change of buttons using javascript code, the unclear part for me is how to set up 'this' attribute so the hovered element trigger the css part for specific button.
$('this').mouseover(function() {
$('#div').removeClass('svg-active');
$('#span').removeClass('light-blue-link');
});
$('this').mouseout(function() {
$('#div').removeClass('svg-active');
$('#span').removeClass('light-blue-link');
});
.button-outer {
margin-top: 30px;
}
.button {
height: 30px;
width: auto;
cursor: pointer;
z-index: 1;
}
.button::before {
display:inline-block;
content:'';
height: 100%;
vertical-align: middle;
}
.light-blue-link {
color: rgb(88, 202, 230);
}
span {
font-weight: 300;
transition: color 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='button-outer'>
<div class='button'>
<div id='div' class='svg profile'></div>
<span id='span' class=''>Profile</span>
</div>
<div class='button'>
<div id='div' class='svg friends'></div>
<span id='span' class=''>Friends</span>
</div>
<div class='button'>
<div id='div' class='svg timeline'></div>
<span id='span' class=''>Timeline</span>
</div>
<div class='button'>
<div id='div' class='svg messages'></div>
<span id='span' class=''>Messages</span>
</div>
<div class='button'>
<div id='div' class='svg bookmarks'></div>
<span id='span' class=''>Bookmarks</span>
</div>
</div>
Note: First I address the JavaScript/jQuery question, but note the "However" bit at the end — you don't need them at all for this.
Instead of 'this' you want .button or div.button.
But that's not the main problem.
The main problem is that you're using the same id on more than one element. You can't do that, it's invalid, and browsers will typically use the first element and ignore the id on the other ones.
You don't need ids on those at all. Within your handlers, this will refer to the element you hooked the event on, so you can use the fact that the div and span are inside the element (via find) to find them:
$('div.button').mouseover(function() {
var $this = $(this);
$this.find('div').removeClass('svg-active');
$this.find('span').removeClass('light-blue-link');
});
$('div.button').mouseout(function() {
var $this = $(this);
$this.find('div').removeClass('svg-active');
$this.find('span').removeClass('light-blue-link');
});
Updated example:
$('div.button').mouseover(function() {
var $this = $(this);
$this.find('div').addClass('svg-active');
$this.find('span').addClass('light-blue-link');
});
$('div.button').mouseout(function() {
var $this = $(this);
$this.find('div').removeClass('svg-active');
$this.find('span').removeClass('light-blue-link');
});
.button-outer {
margin-top: 30px;
}
.button {
height: 30px;
width: auto;
cursor: pointer;
z-index: 1;
}
.button::before {
display: inline-block;
content: '';
height: 100%;
vertical-align: middle;
}
.light-blue-link {
color: rgb(88, 202, 230);
}
span {
font-weight: 300;
transition: color 1s ease;
}
<div class='button-outer'>
<div class='button'>
<div class='svg profile'></div>
<span class=''>Profile</span>
</div>
<div class='button'>
<div class='svg friends'></div>
<span class=''>Friends</span>
</div>
<div class='button'>
<div class='svg timeline'></div>
<span class=''>Timeline</span>
</div>
<div class='button'>
<div class='svg messages'></div>
<span class=''>Messages</span>
</div>
<div class='button'>
<div class='svg bookmarks'></div>
<span class=''>Bookmarks</span>
</div>
</div>
<!-- Scripts at the bottom unless you have a good reason to do something else -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I also changed the calls in your mouseover callback to addClass rather than removeClass.
Other things to consider:
You could use event delegation rather than hooking the event on the buttons directly:
$(".button-outer").on("mouseover", ".div.button", function() {
// ...
});
You could toggle a class on the button itself rather than on the things inside it, and then use structural CSS to apply the styling
However, you don't need JavaScript for this at all: Just use a div.button:hover div rule and a div.button:hover span rule:
.button-outer {
margin-top: 30px;
}
.button {
height: 30px;
width: auto;
cursor: pointer;
z-index: 1;
}
.button::before {
display: inline-block;
content: '';
height: 100%;
vertical-align: middle;
}
div.button:hover span {
color: rgb(88, 202, 230);
}
span {
font-weight: 300;
transition: color 1s ease;
}
<div class='button-outer'>
<div class='button'>
<div class='svg profile'></div>
<span class=''>Profile</span>
</div>
<div class='button'>
<div class='svg friends'></div>
<span class=''>Friends</span>
</div>
<div class='button'>
<div class='svg timeline'></div>
<span class=''>Timeline</span>
</div>
<div class='button'>
<div class='svg messages'></div>
<span class=''>Messages</span>
</div>
<div class='button'>
<div class='svg bookmarks'></div>
<span class=''>Bookmarks</span>
</div>
</div>
<!-- Scripts at the bottom unless you have a good reason to do something else -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
In jQuery, Argument as a string inside $() is a selector. It's failing due to jQuery method look out for element / tag in your DOM like below and One more below is invalid tag.
<this></this>
Try with valid selector like $('div.button')
Note: ID is for unique identifier. please use once. its not semantic if you use multiple times.
Efficient way will be from CSS. Main benefit will mouseout case will be taken care by browser.
div.button:hover {
color: blue;
font-size: 27px;
width:100px;
}
I have a navigation bar and a sub-navigation bar in my app. In the sub bar it's possible to press on a button and I want this button to open a new sub bar which will hide the original bar.
The new sub bar should slide from behind the main bar and hide the second bar.
Problem is:
When the third bar appears it bounces instead of appear smoothly
When the third bar disappears it just disappears and doesn't slide back up as I would expect
I tried playing with the top property thinking it might solve the issue, but it hasn't.
I'm attaching here the snippet. Or you can view it in jsfiddle
angular.module('myapp.controllers', []);
var app = angular.module('myapp', ['myapp.controllers', 'ngAnimate', ]);
angular.module('myapp.controllers').controller("BarController", function ($scope) {
$scope.showActionsBar = false;
$scope.cancelAction = function () {
$scope.showActionsBar = false;
}
$scope.click = function () {
$scope.showActionsBar = true;
}
});
.navbar-deploy {
background-color: red;
border: solid transparent;
}
.third, .sub-navbar-fixed {
background-color: black;
width: 100%;
height:60px;
padding-top: 18px;
margin-bottom: 0px;
z-index: 1000;
color: white;
}
.actions-bar {
top: 40px;
background-color: yellow;
position: fixed;
padding-left: 0px;
z-index: 1001;
}
.sub-bar {
padding-top: 40px;
}
.third-in, .third-out {
-webkit-transition:all ease-out 0.3s;
-moz-transition:all ease-out 0.3s;
-ms-transition:all ease-out 0.3s;
-o-transition:all ease-out 0.3s;
transition:all ease-out 0.3s;
-webkit-backface-visibility: hidden;
}
.third-in.myhidden-remove, .third-out.myhidden-add.myhidden-add-active {
display: block !important;
top: -2000px;
z-index: 0;
}
.third-out.myhidden-add, .third-in.myhidden-remove.myhidden-remove-active {
display: block !important;
top: -80px;
z-index: 1001;
}
.myhidden {
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<div ng-app="myapp">
<div ng-controller="BarController">
<div class="navbar-deploy navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="col-lg-2">First Toolbar</div>
</div>
</div>
<div class="sub-bar">
<div class="sub-navbar-fixed" ng-cloak>
<div class="container-fluid">
<span>
<a ng-click="click()"><span> Second Toolbar</span>
</a>
<div class="actions-bar third third-in third-out" ng-cloak ng-class="{'myhidden': !showActionsBar}">
<div class="container-fluid form-group"> <span class="col-lg-10">
<div class="col-lg-2 col-lg-offset-1">
<a ng-click="cancelAction()">Back</a>
</div>
</span>
</div>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
Try this:
.myhidden{ top:-2000px; }
To be honest.. I know why the "bounce". Your yellow container is placed (with visibility:hidden) at the final position (when visible). When you start your animation the menu first go to top (origin of the animation) and then down.
To fix it you may probably position the yellow container when not visible under the black menu but... Imho your html is quite a mess (I don't mean any offense) as your container is place inside an span which contains the buttom and it's a children of the red menu... and that changing all that may mess up everything.
But your menu effect is easy to do it from scratch with nothing but very simple css, html and jquery. This is how I would do it in case it may help you if you are up to change your code.
With this html (the order of the elements are set to avoid the use of z-index)
<div class="header">
<div class="header-bot">
<span class="show">second toolbar</span>
</div>
<div class="header-extra">
<span class="hide">back</span>
</div>
<div class="header-top">
<span>first toolbar</span>
</div>
</div>
this css:
body {margin:0;padding:0;}
span {color:#fff;}
.header {
width:100%;
position:fixed;
top:0;
}
.header-top {
background-color:black;
height:50px;
position:absolute;
top:0px;
width:100%;
}
.header-bot {
background-color:red;
height:50px;
position:absolute;
top:50px;
width:100%;
}
.header-extra {
background-color:yellow;
height:50px;
position:absolute;
top:0;
width:100%;
transition: all 0.3s ease;
}
.down {
top:50px;
}
.hide {color:#000;}
and just this jquery (to add or remove a class when click on the buttoms):
$(document).ready(function () {
$('.show').click(function () {
$('.header-extra').addClass("down");
});
$('.hide').click(function () {
$('.header-extra').removeClass("down");
});
});
You may have something simillar to what you are looking for. Hope this can help anyway.
FIDDLE
Just remove class third-in and third-out from div element it will stop bouncing effect.
<div class="actions-bar third " ng-cloak ng-class="{'myhidden': !showActionsBar}">
<div class="container-fluid form-group"> <span class="col-lg-10">
<div class="col-lg-2 col-lg-offset-1">
<a ng-click="cancelAction()">Back</a>
</div>
</span>
</div>
</div>
I am having trouble figuring this out. I have come up with jQuery that I can use multiple buttons to open a corresponding div using css transitions. I don't want to use text but the + and - to illustrate that the item is open and closed.
I want the + to change to - when you click on other + items. I also want the + on the current item to toggleClass or change from + to - and back to +
I am hoping that a fresh set of eyes with more JS skill can set me straight.
So here is my code...
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<style>
.btn {display:inline-block; text-decoration:none; width:20px; margin:1%; padding:.3em .8em; border-radius:20px; color:#fff; text-align:center; background-color:#FFB50B;}
.btn:hover {cursor:pointer; opacity:.7; color:#000;}
.btn-pnl:before {content:"+"; font-weight:600px;}
.btn-pnl-viz:before {content:"-";}
.hidden {visibility:hidden;}
.panels-wrap {width:870px; height:auto; margin:0 auto; padding:0;}
.panel {width:98%; height:0px; float:left; margin:0 1%; padding:0; opacity:0; visibility:hidden; background:#f60; color:rgba(0,0,0,0);
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.panel-trn {width:100%; height:100px; visibility:visible; opacity:1; color:rgba(0,0,0,1); background:#0F0}
</style>
</head>
<body>
<script>
$(document).ready(function() {
$("a[data-toggle]").on("click", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding selector from data-toggle
$(selector).toggleClass('panel-trn').siblings().removeClass("panel-trn");
});
$('a').click(function() {
$("a").removeClass("btn-pnl-viz");
//Tried this and no luck > $(this).toggleClass('btn-pnl-viz');
if ($(this).hasClass("btn-pnl-viz")){
$(this).removeClass("btn-pnl-viz");
}else{
$(this).toggleClass("btn-pnl-viz");
};
});
});
</script>
<div>
<div>
</div>
<div>
</div>
<div>
</div>
<div id="div1" class="panel">div 1</div>
<div id="div2" class="panel">div 2</div>
<div id="div3" class="panel">div 3</div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div id="div4" class="panel">div 1</div>
<div id="div5" class="panel">div 2</div>
<div id="div6" class="panel">div 3</div>
I can get everything to work except I cant get the button to toggle the + and - if I click the same button twice. I also cannot get the existing active to close when clicking on another button out side of the container div.
Total Newb question I know but, if someone could help I would greatly appreciate it... many hours on this!
Thanks!
Replace the code of $("a").click();
with following i testesed its working fine
$('a').click(function() {
($("a").not($(this))).removeClass("btn-pnl-viz");
$(this).toggleClass("btn-pnl-viz");
});
Reply if any problem with the code
Thanks
<div class="panel">
<a href onclick="manipulate()">Show Quick Admin (↑)</a>
<div class="hidden">
<ul>
<li>
Panel
</li>
</ul>
</div>
</div>
so i am tying to make a "quick admin bar", for the site i'm making. this is the code i am using, don't mind the fact it's bad. i tried to make it check the height and width of the div "panel", and if it was 20px, change the "a" tag's innerHTML, show the "hidden" div, and make it so that if you click the "a" tag again it will set the div height back from 300px to 20px, change the a tag's innerHTML again, and hide the "hidden" div from viewing. how would i do this?
javascript:
function manipulate() {
if ($("#panel").height() == "20") {
document.getElementsByClassName("panel").style.height= "300px";
document.getElementsByClassName("hidden").style = "";
}
}
css:
.panel {
padding:10px;
background:#fffdbb;
position:fixed;
bottom:15px;
width:225px;
height:20px; /* 300px */
right:15px;
border:10;
border-style:solid;
border-width:2px;
border-color:red;
}
.hidden {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
right now it just doesn't do anything when Show Quick Admin is clicked. how can i fix this?
you should use [0]
document.getElementsByClassName("panel")[0].style.height= "300px"
Why dont you use this if you are using jquery?
$(".panel").css("height","300px");
I would suggest you to use id instead of class
<div class="panel">
vs
<div id="panel">
The proper way of Using
http://jsfiddle.net/sb3fY/1/
<div id="panel">
<span class="link1">Show Quick Admin (↑)</span>
<div class="hidden">
<ul>
<li>
Panel
</li>
</ul>
</div>
</div>
Javascript
$(".link1").on("click",function(){
$("#panel").toggleClass("open");
$("#hidden").toggle();
});
CSS
#panel {
padding:10px;
background:#fffdbb;
position:fixed;
bottom:15px;
width:225px;
height:20px; /* 300px */
right:15px;
border:10;
border-style:solid;
border-width:2px;
border-color:red;
}
.hidden {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
#panel.open {
height: 300px;
}