jQuery change containing element's width with slide - javascript

I'd like to have a button group with buttons where when the user hovers over them, more content slides in within the button using jQuery's .show("slide", {direction: 'right'}). As you can see in the Fiddle, I have it partly working, but when hovering over the button, the button immediately grows to account for the space where the text will slide to when it's done. Is there any way to have the width of the button follow the width of the sliding element inside it?
Fiddle: https://jsfiddle.net/k7ypusdq/1/
$(document).ready(function() {
$("#new-hidden").hide();
$("#new-button").hover(function() {
$("#new-hidden").show("slide", {
direction: 'right'
}, 300);
}, function() {
$("#new-hidden").hide("slide", {
direction: 'right'
});
});
});
#import url('https://fonts.googleapis.com/css?family=Passion+One');
body {
background-color: #339999;
}
.centered {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.big-button {}
.button-group {
float: right;
}
.button-group a,
button {
background-color: #9fc;
color: #acc;
font-family: 'Passion One', cursive;
font-size: 24pt;
padding: 10px;
border: 1px solid #3a8;
border-bottom-width: 4px;
float: left;
width: auto;
}
.button-group button:first-child {
border-radius: 10px 0px 0px 10px;
}
.button-group button:last-child {
border-radius: 0px 10px 10px 0px;
}
.button-group:after {
content: "";
clear: both;
display: table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<html>
<body>
<div class="button-group">
<button id="new-button">
<div style="float: left">Hello!</div>
<span id="new-hidden" style="overflow: hidden;">
I'm here too!
</span>
</button>
<button>Middle</button>
<button>Other Stuff</button>
</div>
</body>
</html>

You could simplify it by just animating the width and preventing text wrap:
<html>
<body>
<div class="button-group">
<button id="new-button" style="text-align:left;text-wrap:none;overflow:hidden;width:100px;height:60px;line-height:40px">
Hello! I'm here too
</button>
<button>Middle</button>
<button>Other Stuff</button>
</div>
</body>
</html>
$(document).ready(function(){
$("#new-hidden").hide();
$("#new-button").hover(function(){
$("#new-button").animate({"width": 250}, 300);
}, function(){
$("#new-button").animate({"width": 100}, 300);
});
});
https://jsfiddle.net/k7ypusdq/42/

If you are looking for a dynamic approach that will get the width of any text you add without having to set a fixed width, you can do the following.
$(document).ready(function() {
// Store each hidden elements width within a data-width attribute.
// Set hidden elements width to zero.
$('.btn-with-text .hidden').each(function() {
$(this).data('width', $(this).outerWidth());
$(this).css({'width': 0});
})
$('.btn-with-text').hover(function() {
var hiddenBtn = $(this).find('.hidden');
// On HoverIn apply and animate the stored data-width and apply left margin
hiddenBtn.animate({
marginLeft: 10,
width: hiddenBtn.data('width')
}, 300);
}, function() {
// On HoverOut set width and margin back to zero.
$(this).find('.hidden').animate({
marginLeft: 0,
width: 0
}, 300);
});
});
#import url('https://fonts.googleapis.com/css?family=Passion+One');
body {
background-color: #339999;
}
.centered {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.big-button {}
.button-group {
float: right;
}
.button-group a,
button {
background-color: #9fc;
color: #acc;
font-family: 'Passion One', cursive;
font-size: 24pt;
padding: 10px;
border: 1px solid #3a8;
border-bottom-width: 4px;
float: left;
width: auto;
}
.button-group button:first-child {
border-radius: 10px 0px 0px 10px;
}
.button-group button:last-child {
border-radius: 0px 10px 10px 0px;
}
.button-group:after {
content: "";
clear: both;
display: table;
}
/*
Add this CSS
*/
button {
overflow: hidden;
position: relative;
}
button .not-hidden {
display: inline-block;
float: left;
}
button .hidden {
overflow: hidden;
white-space: nowrap;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<div class="button-group">
<button class="button btn-with-text">
<span class="not-hidden">Hello!</span>
<span class="hidden">
I'm here too!
</span>
</button>
<button class="button btn-with-text">
<span class="not-hidden">Middle</span>
<span class="hidden">
I'm Another One!
</span>
</button>
<button class="button">Other Stuff</button>
</div>

Related

Second Element Does Not Close On Click Outside

I have Problem With jQuery:
In the following code, I want to close Sidenav by clicking outside when it opens
The problem is that when left sidenav is opened it no longer closes because the right sidenav is an element that was created before left sidenav and i do not know how to solve this problem
$("[data-open-sidenav]").on("click", function () {
console.log($(`#${$(this).data("open-sidenav")}`));
if (
$(this).data("open-sidenav").length > 0 &&
$(`#${$(this).data("open-sidenav")}`).length
) {
$(`#${$(this).data("open-sidenav")}`).animate(
{
left: "0",
},
300
);
}
});
$(window).on("click", function () {
if (parseInt($(".sidenav").css("left")) === 0) {
$(".sidenav").animate(
{
left: "-400px",
},
300,
"linear"
);
}
});
$(".sidenav").on("click", function (event) {
event.stopPropagation();
});
.sidenav {
height: 100%;
width: 400px;
position: fixed;
z-index: 1;
top: 0;
left: -400px;
background-color: #fff;
border-right: 1px solid #gray;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav li a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="blue" data-open-sidenav="leftsn">Open Left Sidenav</button>
<button class="blue" data-open-sidenav="rightsn">Open Right Sidenav</button>
<div id="rightsn" class="sidenav right">
<li>Right Sidenav</li>
</div>
<div id="leftsn" class="sidenav">
<li>Left Sidenav</li>
</div>
You have two .sidenav elements in the DOM. Accessing them by css() will return the requested property from the first one only.
As such you need to loop through them and test individually before animating, if necesssary:
$("[data-open-sidenav]").on("click", e => {
let $target = $(`#${$(e.target).data("open-sidenav")}`);
$target.animate({ left: 0 }, 300);
});
$(document).on("click", () => {
$('.sidenav').each((i, el) => {
let $el = $(el);
if (parseInt($el.css("left")) === 0) {
$el.animate({ left: "-400px" }, 300, "linear");
}
});
});
$(".sidenav").on("click", e => e.stopPropagation());
.sidenav {
height: 100%;
width: 400px;
position: fixed;
z-index: 1;
top: 0;
left: -400px;
background-color: #fff;
border-right: 1px solid #gray;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav li a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="blue" data-open-sidenav="leftsn">Open Left Sidenav</button>
<button class="blue" data-open-sidenav="rightsn">Open Right Sidenav</button>
<div id="rightsn" class="sidenav right">
<li>Right Sidenav</li>
</div>
<div id="leftsn" class="sidenav">
<li>Left Sidenav</li>
</div>
You could use this jQuery Plugin to archive this behaviour. Its a plugin which allows you to set Clickout-Events to Elements.
https://www.jqueryscript.net/slider/Simple-jQuery-Click-Outside-Plugin-clickout-js.html
The below solution works, all I have done is added a event.stopPropagation to the button clicks on the sidenav buttons, and removed the check in your hide function.
I think the issue was that the function that was checking the value of left was only checking the first incidence of the sidenav that it found - i.e. the right sidenav. Thats why it worked for the right but not the left.
Let me know if there was something else.
$("[data-open-sidenav]").on("click", function () {
console.log($(`#${$(this).data("open-sidenav")}`));
// Stop the event propogation so that the sidenav doesnt automatically close
event.stopPropagation();
if (
$(this).data("open-sidenav").length > 0 &&
$(`#${$(this).data("open-sidenav")}`).length
) {
$(`#${$(this).data("open-sidenav")}`).animate(
{
left: "0",
},
300
);
}
});
$(".sidenav").on("click", function (event) {
event.stopPropagation();
});
$(window).on("click", function () {
// If there is any click (that is not stopped by the event.stopPropagations)
// Hide any sidenav
$(".sidenav").animate(
{
left: "-400px",
},
300,
"linear"
);
});
.sidenav {
height: 100%;
width: 400px;
position: fixed;
z-index: 1;
top: 0;
left: -400px;
background-color: #fff;
border-right: 1px solid #gray;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav li a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="blue" data-open-sidenav="leftsn">Open Left Sidenav</button>
<button class="blue" data-open-sidenav="rightsn">Open Right Sidenav</button>
<div id="rightsn" class="sidenav right">
<li>Right Sidenav</li>
</div>
<div id="leftsn" class="sidenav">
<li>Left Sidenav</li>
</div>

Slide out the link when the button is clicked

I am trying to make it where a button is clicked a div will slide out containing a link to another website. I have supplied the current code I have but when the button is clicked it doesn't slide out. It slides but appears under the button.
$('.button1').on('click', function() {
animateDiv();
})
$(document).keyup(function(e) {
if (e.keyCode === 27 && $('.inner').hasClass('visible')) {
animateDiv();
}
})
function animateDiv() {
$('.inner').toggleClass('visible');
$('.inner').animate({
width: 'toggle',
}, 350);
}
.toolbar {
position: right;
display: inline-block;
overflow: hidden;
white-space: nowrap;
margin: 0px auto;
padding: 5px 0px;
background-color: skyblue;
}
.inner {
float: right;
display: none;
}
.btn-primary {
color: #fff;
background-color: #2780E3;
border-color: #2780E3;
}
.btn-lg,
.btn-group-lg > .btn {
padding: 0.5rem 1rem;
font-size: 1.171875rem;
line-height: 1.5;
border-radius: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='toolbar'>
<div>
<button class="button1 btn btn-primary btn-lg">Slide it</button>
</div>
<div class="inner is-hidden">
Google
</div>
</div>

Fading in a div while animating from the left/right/top/bottom

I am trying to make a transition where a div set to "display:none" fades in and moves to the center of the page from either the left/right/top/bottom.
How can I get it to simultaneously fade in and animate({left: })?
My current code first fades it in and then animates it.
$("#button" ).click(function(){
$("#text").fadeIn(1000, function(){
$("#text" ).animate({ "left": "+=50%" }, "slow" )
})
})
Current JSFiddle
Use the notation like in my snippet below to animate both parameters at the same time. Note: I used opacity for the fading animation. (And use position: absolute for the animated element)
$(document).ready(function() {
$("#button").click(function() {
$("#text").animate({
left: '+=50%',
opacity: '1'
}, 1000);
})
})
#button {
display: inline-block;
border-radius: 5px 5px 5px 5px;
border: 2px solid deepskyblue;
color: white;
background-color: black;
padding: 2px;
margin: 2px;
}
#text {
color: deepskyblue;
font-size: 2vw;
position: absolute;
display: inline-block;
top: 60px;
opacity: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">
Move
</div>
<div id="text">
Hello there
</div>
position of the div with id text should be absolute. Here is your code
$(document).ready(function() {
$("#button").click(function() {
$("#text").fadeIn(1000, function() {
$("#text").animate({
"left": "+=50%"
}, "slow")
})
})
})
#button {
display: inline-block;
border-radius: 5px 5px 5px 5px;
border: 2px solid deepskyblue;
color: white;
background-color: black;
padding: 2px;
margin: 2px;
}
#text {
color: deepskyblue;
fontsize: 2vw;
position: absolute;
display: inline-block;
top: 60px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">
Move
</div>
<div id="text">
Hello there
</div>

Menu doesn't stay open when trying to click

I'm trying to make a menu with jquery but when i hover over "Menu" and try clicking one of the buttons it slides back up. anyone who knows how to fix this?
Here is my Jquery:
$(document).ready(function() {
$(".slide").hide();
$("#menu").hover(function() {
$(".slide").slideToggle("slow");
});
$(".logo").click(function() {
window.location = 'index.html';
});
$(".logo").hover(function() {
});
});
Here is the full code:
https://jsfiddle.net/lollz4/dh1kLh8L/
P.S. I'm new here so sorry if I'm doing anything wrong.
Add an additional wrapper around your menu and check for the hover state on that element instead:
$(document).ready(function() {
$(".slide").hide();
$("#menu-wrapper").hover(function() {
$(".slide").slideToggle("slow");
});
$(".logo").click(function() {
window.location = 'index.html';
});
$(".logo").hover(function() {
});
});
* {
margin-top: 0px;
margin-left: 0px;
}
body {
background-color: #EBEDEF;
}
.page {
background: white;
width: 100%;
height: 52em;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 2px;
position: absolute;
margin: 0;
padding: 0;
}
#menu {
display: block;
position: absolute;
left: 0em;
top: 0em;
background-color: #2E4053;
border: none;
padding: 15px 32px;
font-size: 16px;
clear: both;
}
.slide {
display: block;
left: 0em;
top: 0em;
position: relative;
background-color: #2E4053;
border: none;
padding: 15px 32px;
font-size: 16px;
clear: both;
}
.logo {
height: 3em;
width: 100%;
background-color: #ABB2B9;
padding: 0px;
margin: 0px;
position: fixed;
}
div img {
margin: auto;
width: 8em;
height: 3em;
background-color: #607D8B;
border-radius: 2px;
display: block;
padding-top: 0;
}
div img:hover {
opacity: 0.80;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="scripts.js"></script>
<title>Stefan's Website</title>
</head>
<body>
<div class="logo">
<img src="http://previews.123rf.com/images/alexutemov/alexutemov1511/alexutemov151100338/48202700-Pizza-flat-icon-logo-template-Pizza-food-silhouette-Pizza-piece-logo-pizza-slice-logo-Pizza-menu-ill-Stock-Vector.jpg" width="160em" height="90em">
<div id="menu-wrapper">
<button id="menu">
Menu
</button>
<button class="slide">
Pagina1
</button>
<button class="slide">
Pagina2
</button>
<button class="slide">
Pagina3
</button>
</div>
</div>
<!--<div class="page">
</div>-->
</body>
</html>

jQuery click event is not working

I have a menu on the left where all the elements have the same class. I've added the event $('.menuitem').click and also tried several other options, even calling the event based on the div id but without success.
As there aren't any error messages on the browser console, I'm kinda lost on the search for the error. I appreciate if you could help me figure out what the problem is.
Here is the Fiddle
HTML:
<div class='mainwindow'>
<div class='menupane'>
<div id='entity' class='menuitem'><p class='glyphicon glyphicon-triangle-right'>ENTITIES</p></div>
<div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>COURSES</p></div>
<div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>STUDENTS</p></div>
<div class='menuitem'><p class='glyphicon glyphicon-triangle-right'>CLASSES</p></div>
<div class='menuitem'></div>
</div>
<div class='contentpane'></div>
</div>
DOM:
$(document).ready(function(){
console.log("loaded");
$('.menuitem').click(function(){
console.log("CLICKED 1");
});
$('#entity').click(function(){
console.log("CLICKED 2");
});
$('.menupane').on('click', '.menuitem', function(){
console.log('CLICKED 3');
});
});
As you can see, I tried adding the click event through several methods and I'm not getting it. Thanks a ton for your help.
Negative z-index will not let event to dispatch on elements.
$(document).ready(function() {
console.log("loaded");
$('.menuitem').click(function() {
console.log("CLICKED 1");
});
$('#entity').click(function() {
console.log("CLICKED 2");
});
$('.menupane').on('click', '.menuitem', function() {
console.log('CLICKED 3');
});
});
.header {
position: absolute;
background-color: #525252;
height: 5%;
width: 100%;
min-height: 30px;
display: block;
margin: 0;
z-index: 0;
font-weight: 700;
line-height: 175%;
font-size: 1.4em;
text-align: center;
color: #FFFFFF;
display: inline-block
}
.mainwindow .menupane {
position: relative;
display: inline-block;
width: 25%;
min-width: 200px;
background-color: #FFFFFF;
margin: 0;
box-shadow: 1px 0px 10px -0px #F5F5F5;
//z-index: -1;
padding-top: 40px;
}
.mainwindow .contentpane {
position: relative;
display: inline-block;
width: 100%;
background-color: #FFFFFF;
margin: 0;
//z-index: -2;
padding-top: 40px;
}
.menuitem {
background-color: #525252;
position: relative;
width: 75%;
height: 1.5em;
min-height: 10px;
border-radius: 0.65em;
margin: 7.5%;
color: lightgray;
/*font-size: 0.8vw;*/
/*line-height: 1.5em;*/
padding-left: 10%;
border: 0.05em solid lightgray;
/*box-shadow: 0px 0px 1px 1px gray;*/
}
glyphicon-triangle-right {
transition: transform 180ms ease-in;
}
glyphicon-triangle-right.rotate90 {
transform: rotate(90deg);
transition: transform 180ms ease-in;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='header'>SISTEMA CONTROLE DE CURSOS</div>
<div class='mainwindow'>
<div class='menupane'>
<div id='entity' class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>ENTITIES</p>
</div>
<div class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>COURSES</p>
</div>
<div class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>STUDENTS</p>
</div>
<div class='menuitem'>
<p class='glyphicon glyphicon-triangle-right'>CLASSES</p>
</div>
<div class='menuitem'></div>
</div>
<div class='contentpane'></div>
</div>
Fiddle Demo
Your z-index CSS was causing issues. Here is an updated example without those so you can fix from there: https://jsfiddle.net/zxgkprw9/1/
your issue is not the binding of the event but the class .mainwindow .menupane having this property position: relative;
the events is added properly but due to this class the actual position of the element is different . Remove this property and all work fine
jsfiddle : https://jsfiddle.net/zxgkprw9/3/
.mainwindow .menupane{
display: inline-block;
width: 25%;
min-width: 200px;
background-color: #FFFFFF;
margin: 0;
box-shadow: 1px 0px 10px -0px #F5F5F5;
z-index: -1;
padding-top: 40px;
}

Categories