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

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

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>

Related

jQuery change containing element's width with slide

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>

how to trigger an event for an element when some other element is clicked in jQuery?

here is my code: https://jsfiddle.net/2vvLe0ko/2/
I want to hide div with class droppointercontainer when the user clicks any other region except click me! div. and show the droppointercontainer div when the user clicks the click me! div.
how to do that with jQuery?
html:
<body>
<div class="click" id="click1">click me!
<div class="droppointercontainer" id="droppointercontainer1">
<div class="droppointer"></div>
<div class="dropmenu" id="dropmenu1">
<h4>option1</h4>
<h4>option2</h4>
<h4>option3</h4>
</div>
<div class="dropmenutop"></div>
</div>
</div>
<div class = "click" id="click2">click me!
<div class="droppointercontainer" id="droppointercontainer2">
<div class="droppointer"></div>
<div class="dropmenu" id="dropmenu1">
<h4>option1</h4>
<h4>option2</h4>
<h4>option3</h4>
</div>
<div class="dropmenutop"></div>
</div>
</div>
<div class = "static">Iam just a tatic div</div>
<div class = "static">Iam just a tatic div</div>
<div class = "static">Iam just a tatic div</div>
</body>
css:
.click{
display:inline-block;
margin: 10px;
padding: 10px;
background-color: purple;
color: white;
}
.static{
background-color:steelblue;
height: 100px;
}
.droppointer{
/*display: none;*/
position: absolute;
margin: 0 auto;
width: 0;
right: 0;
border: 10px solid transparent;
border-bottom: 10px solid #efefef;
border-top: 0px;
z-index: 200;
}
.droppointercontainer{
display:none;
position: relative;
width: 100%;
margin: 0 auto;
background-color: blue;
}
.dropmenutop{
/*display: none;*/
background-color: transparent;
position: absolute;
height: 10px;
left: 0;
right: 0;
z-index: 199;
}
.dropmenu{
/*display: none;*/
box-shadow: 0 0 15px #888888;
background-color: #efefef;
position: absolute;
margin-top: 10px;
min-height: 20px;
left: 0px;
right: 0px;
z-index: 199;
}
h4{
color:black;
}
javascript:
$("#click1").on("click", function(){
$(this).children("#droppointercontainer1").fadeIn(200);
});
$("#click2").on("click", function(){
$(this).children("#droppointercontainer2").fadeIn(200);
});

You need to call a function that does the job for all clicks...
Edited and added a working proof link.
$("#click1").on("click", function(){
showMe(this);
});
$("#click2").on("click", function(){
showMe(this);
});
$(document).on('click', function(__e){
if(!$(__e.target).hasClass('click')){
$('.droppointercontainer').fadeOut(200);
}
});
function showMe(__obj){
$('.droppointercontainer').each(function(__idx, __el){
if($(__el)[0] !== $(__obj).children('.droppointercontainer:first')[0]){
if($(__el).css('opacity') > 0){
$(__el).fadeOut(200);
}
}
});
$(__obj).children('.droppointercontainer:first').fadeIn(200);
}
Proof
https://jsfiddle.net/2vvLe0ko/7/

Something like this should work
$(document).click(function(e) {
if (!$(e.target).is("#click1") && !$(e.target).is("#click2")) {
if ($('#click1').is(':visible') || $('#click2').is(':visible')) {
$(".droppointercontainer").hide();
}
}

You need to toggle them. For that you can use a variable for each:
var drop1,drop2=false;
$("#click1").on("click", function(){
drop1 ? $(this).children("#droppointercontainer1").fadeOut(200) :
$(this).children("#droppointercontainer1").fadeIn(200);
$("#droppointercontainer2").fadeOut(200);
drop1 = !drop1;
drop2=false;
});
$("#click2").on("click", function(){
drop2 ? $(this).children("#droppointercontainer2").fadeOut(200) :
$(this).children("#droppointercontainer2").fadeIn(200);
$("#droppointercontainer1").fadeOut(200);
drop1=false;
drop2 = !drop2;
});

Is this what you looking for?
$(document).click(function(event) {
$(".droppointercontainer").hide();
if($(event.target).is(".click")) {
$(event.target).find(".droppointercontainer").show();
}
})
.click{
display:inline-block;
margin: 10px;
padding: 10px;
background-color: purple;
color: white;
}
.static{
background-color:steelblue;
height: 100px;
}
.droppointer{
/*display: none;*/
position: absolute;
margin: 0 auto;
width: 0;
right: 0;
border: 10px solid transparent;
border-bottom: 10px solid #efefef;
border-top: 0px;
z-index: 200;
}
.droppointercontainer{
display:none;
position: relative;
width: 100%;
margin: 0 auto;
background-color: blue;
}
.dropmenutop{
/*display: none;*/
background-color: transparent;
position: absolute;
height: 10px;
left: 0;
right: 0;
z-index: 199;
}
.dropmenu{
/*display: none;*/
box-shadow: 0 0 15px #888888;
background-color: #efefef;
position: absolute;
margin-top: 10px;
min-height: 20px;
left: 0px;
right: 0px;
z-index: 199;
}
h4{
color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click" id="click1">click me!
<div class="droppointercontainer" id="droppointercontainer1">
<div class="droppointer"></div>
<div class="dropmenu" id="dropmenu1">
<h4>option1</h4>
<h4>option2</h4>
<h4>option3</h4>
</div>
<div class="dropmenutop"></div>
</div>
</div>
<div class = "click" id="click2">click me!
<div class="droppointercontainer" id="droppointercontainer2">
<div class="droppointer"></div>
<div class="dropmenu" id="dropmenu1">
<h4>option1</h4>
<h4>option2</h4>
<h4>option3</h4>
</div>
<div class="dropmenutop"></div>
</div>
</div>
<div class="static">Iam just a tatic div</div>
<div class="static">Iam just a tatic div</div>
<div class="static">Iam just a tatic div</div>

To keep things simple, I'd go for a transparent overlay. When you click the overlay, the dropdown disappears. See fiddle here: https://jsfiddle.net/d6yv60od/
$(".click").on("click", function(){
$('body').append('<div class="overlay"></div>');
$(this).children(".droppointercontainer").fadeIn();
});
$('body').on('click', '.overlay', function() {
$(this).remove();
$(".droppointercontainer").fadeOut();
});
One advantage of this solution is that, in its simplicity, the dropdown remains open when you click on an iten. Unless you tell him to close of course, but this is another story :)

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;
}

Why are there different results for the following code?

I have a project where I create a virtual workstation using HTML CSS and JavaScript.
The code works smoothly and perfectly, as shown below (minus the images)
<!DOCTYPE html>
<html>
<head>
<title>Malfunction Compueter</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<style>
html{
font-family: courier
}
.inner{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: white;
font-size: 20px;
opacity: 1.0;
}
.loadScreen {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999999999999999999999999999999999999999999;
background: white;
font-size: 80px;
text-align: center;
padding-top: 150px
}
#cover{
position: relative
}
#content{
padding-top: 50px
}
td{
width: 33.3%
}
table{
width: 100%;
text-align: center
}
.titleSelection{
font-size: 60px;
transition-duration: 0.5s;
line-height: 10px
}
.titleSelection:hover{
box-shadow: 0 15px 19px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.title{
text-align: center;
padding-top: 40px;
}
#titleImage{
height: 200px
}
.selectionIcon{
height: 120px
}
#backgroundImage{
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
z-index: -9999;
text-align: center
}
#background{
width: 100%;
bottom: 0px
}
#title{
font-size: 60px;
font-family: "kaiTi";
text-align: center;
line-height: 5px
}
#exit{
position: fixed;
bottom: 10px;
right: 40px;
z-index: 99999
}
#exit:hover + #exitText{
font-size: 30px
}
#exitText{
transition-duration: 0.5s;
font-family: "kaiTi";
position: fixed;
bottom: 45px;
right: 45px;
z-index: 99999;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
color: white;
}
#fangNiu{
position: fixed;
left: 0px;
top: 0px;
width: 200px;
height: 74px;
z-index: 999999;
}
.innerTitle{
font-size: 80px;
text-align: center
}
.goodQuotesTable{
width: 20%;
font-size: 25px;
text-align: justify;
padding-right: 10px;
padding-left: 10px;
}
#quotesTable{
border-collapse: collapse;
vertical-align: bottom;
}
b{
font-size: 45px;
text-align: center
}
.quoteImage{
height: 50px;
width: 50px;
}
#summary{
border: 10px;
}
.quote{
color: black;
}
/* tell the container's children to float left: */
.floatLeft > * {
float:left;
margin-right:5px;
}
.floatRight > * {
float:right;
margin-left:5px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/* end clearfix*/
/* below is just to make things easier to see, not required */
body > div {
margin-bottom:10px;
}
.characterPicture{
height: 140px;
width: auto
}
#summaryText{
text-align: center;
font-size: 80px
}
.characterText{
font-size: 25px;
}
.tab{
position: relative;
margin-left: 120px;
margin-right: 10px;
}
#summaryItself{
padding: 10px
}
#schoolImage{
height: 290px;
width: auto
}
button{
border-radius: 50%;
background-color: #00FF04;
border-color: #00FF04;
color: white;
font-size: 40px;
transition-duration: 0.4s;
width: 25%;
height: 80px;
}
button:hover{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
background-color: red;
border-color: red;
}
#options{
text-align: center
}
#apps{
text-align: center
}
#languageMenu{
opacity: 0.9;
height: 100%;
width: 100%;
z-index: 99999999999999999999999999999999999999999999999999999999999999999999999999;
}
</style>
<body>
<p id="title">Malfunction Compueter</p><br><p id="title">Version A0.1</p>
<div id="content">
<table id="titleSelections">
<tr>
<td class="titleSelection" id="about"><img src="images/info.png" class="selectionIcon"><br><p>About</p></td>
<td class="titleSelection" id="settings"><img src="images/settings.png" class="selectionIcon"><br><p>Settings</p></td>
<td class="titleSelection" id="apps"><img src="images/apps.png" class="selectionIcon"><br><p>Apps</p></td>
</tr>
</table>
<script>
$(document).ready(function(){
$(".loadScreen").fadeOut("slow")
})
$(document).ready(function(){
$(".inner").fadeOut(0)
$("#exit").fadeOut(0)
$("#exitText").fadeOut(0)
$("#languageMenu").fadeOut(0)
})
$("#about").on("click",function(){
$("#info").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("#settings").on("click",function(){
$("#options").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("#apps").on("click",function(){
$("#applications").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("html").on("click","#exit",function(){
$("#exit").fadeOut(500)
$("#exitText").fadeOut(500)
$(".inner").fadeOut(500)
$("#fangNiu").fadeOut(500)
$("#languageMenu").fadeOut(500)
$("#backgroundImage").fadeIn(500)
})
$("#language").on("click",function(){
$("#languageMenu").fadeIn(500)
})
</script>
</body>
<div class="loadScreen">MALFUNCTION COMPUETER <br> MODEL A0.1</div>
<img src="images/logout.png" id="exit">
<p id="exitText">Exit</p>
<div id="options" class="inner" style="display: none">
<b>OPTIONS</b>
<br>
<br>
<br>
<button id="language">Languages</button>
<br>
<br>
<br>
<button id="wifi">Wifi connection</button>
</div>
<div id="applications" class="inner" style="display: none">
<b>APPS</b>
</div>
<div id="info" class="inner" style="display: none">
<b>ABOUT MALFUNCTION COMPUETER</b>
<p>Malfunction compueter is a 非常好的 computer software OS that runs on 你的电脑屏幕上 in the programming language 语文。.</p><br>
<p>In order to get the best out of malfunction compueter, one must 把你的脸爆炸，然后, and then one must also 死掉。这样.</p>
</div>
<div id="languageMenu" class="innerInner" style="display: none"><p>Choose your language:</p><br><br><select>
<option>English</option>
<option>Chinese</option>
<option>Japanese</option>
</select></div>
</html>
However, there is one set of lines that is not running properly:
<div id="languageMenu" class="innerInner" style="display: none"><p>Choose your language:</p><br><br><select>
<option>English</option>
<option>Chinese</option>
<option>Japanese</option>
</select></div>
^This is the DIV "#languageMenu", where the user selects his language.
Here, I have a button "#language" which on click, is supposed to make "#languageMenu" appear.
$("#language").on("click",function(){
$("#languageMenu").fadeIn(500)
})
Strangely, this does not work when I run it on Google Chrome, but when I put it in a JSFiddle it gives strange results.
http://jsfiddle.net/b58Lvtfy/1
From Chrome, what happens is that the language menu only appears upon pressing the exit button, and then fades immediately.
Why might this be so and what amendments might make the code work better?
Online demo: http://garridpunching.neocities.org/malfunction.html

Put every event binding inside doc ready block:
$(document).ready(function() {
$(".inner").fadeOut(0)
$("#exit").fadeOut(0)
$("#exitText").fadeOut(0)
$("#languageMenu").fadeOut(0)
$("#about").on("click", function() {
$("#info").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("#settings").on("click", function() {
$("#options").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("#apps").on("click", function() {
$("#applications").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})
$("html").on("click", "#exit", function() {
$("#exit").fadeOut(500)
$("#exitText").fadeOut(500)
$(".inner").fadeOut(500)
$("#fangNiu").fadeOut(500)
$("#languageMenu").fadeOut(500)
$("#backgroundImage").fadeIn(500)
})
$("#language").on("click", function() {
$("#languageMenu").fadeIn(500)
})
})
Because your button appears after event binding so no events bound on this element and cause as error. That is why it is always safe to put event bindings inside doc ready block.
Or you can shift your script to the closing of </body>.

Your inproper indentation obscures the errror, but you are closing the DOMReady listener, before you are binding the #language click listener. Therefore, #language does not exist in the DOM when the click listener is added.

Multiple elements on mouseover event instead of single element

JSFiddle: http://jsfiddle.net/357nf0ht/4/
If you are hovering one of the .item, a menu will appear. Hovering the "X" will show you a button.
I expect, that hovering the button will create a single temporary item, which belongs to the first selected .item. But instead of that, there are multiple temporary items, if you have hovered more then one .item at the beginning. It seems, that this remembers also the events in the past.
I don't understand this behavior.
$(document).on('mouseenter', '.item', function (event) {
var item = $(this);
$('#item_add').css({
"left": '5.5em',
"top": item.offset().top - 15
}).show();
$('#item_add').hover(function () {
var menue = $(this);
menue.animate({
"width": '7em',
"left": '0.5em'
}, 200, function () {
$(this).find(".body").stop().slideDown(200);
});
}, function () {
var menue = $(this);
menue.find(".body").stop().slideUp(200, function () {
menue.animate({
"width": '2em',
"left": '5.5em'
}, 200);
});
});
$('#item_element_new').hover(function () {
item.after('<div id="item_new"></div>');
}, function () {
$('#item_new').remove();
});
});

This is happening because every time you trigger mouseenter on .item you attach a new event to button.
Quick Solution: You have to remove previous events before attaching a new one, you can do this with .unbind(), here is a working example
$('#item_element_new').unbind();
$('#item_element_new').hover(function () {
$(document).on('mouseenter', '.item', function (event) {
var item = $(this);
$('#item_add').css({
"left": '5.5em',
"top": item.offset().top - 15
}).show();
$('#item_add').hover(function () {
var menue = $(this);
menue.animate({
"width": '7em',
"left": '0.5em'
}, 200, function () {
$(this).find(".body").stop().slideDown(200);
});
}, function () {
var menue = $(this);
menue.find(".body").stop().slideUp(200, function () {
menue.animate({
"width": '2em',
"left": '5.5em'
}, 200);
});
});
$('#item_element_new').unbind();
$('#item_element_new').hover(function () {
item.after('<div id="item_new"></div>');
}, function () {
$('#item_new').remove();
});
});
.item {
border: 1px solid #e2e2e2;
margin: 6px;
padding: 0px 10px 0px 10px;
position: relative;
height: 40px;
}
.wrap {
margin-left: 8em;
}
#item_new {
border: 1px dashed #C0C0C0 !important;
background: none repeat scroll 0% 0% #F7F7F7;
display: block;
height: 2.2em;
margin: 6px;
padding: 0px 10px;
position: relative;
}
#item_add {
display: none;
position: absolute;
width: 2em;
border: 1px solid #ddd;
background-color: #f7f7f7;
color: #aaa;
padding: 0px 6px;
}
#item_add .body {
display: none;
}
#item_add .arrow {
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
top: 5px;
right: -7px;
position: absolute;
}
#item_add button {
background: none repeat scroll 0px center #fff;
padding: 0.2em 2em;
margin: 3px .2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="item_add">
<header>X</header>
<div class="body">
<button id="item_element_new">Example</button>
</div>
<div class="arrow"></div>
</div>
Soulution 2: As #Regent pointed out your code have some problems, you can solve a part of them:
Moving event binding outside mouseenter event handler
Caching jQuery objects
Not using .unbind() anymore
var $itemAdd = $('#item_add');
var $menuBody = $itemAdd.find(".body")
var $item = $('.item');
$itemAdd.hover(function () {
$itemAdd.animate({
"width": '7em',
"left": '0.5em'
}, 200, function () {
$menuBody.stop().slideDown(200);
});
}, function () {
$menuBody.stop().slideUp(200, function () {
$itemAdd.animate({
"width": '2em',
"left": '5.5em'
}, 200);
});
});
$('#item_element_new').hover(function () {
$('.item-hovered').after('<div id="item_new"></div>');
}, function () {
$('#item_new').remove();
});
$item.mouseenter(function (event) {
var $currentItem = $(this);
$currentItem.addClass('item-hovered');
$currentItem.siblings().removeClass('item-hovered');
$itemAdd.css({
"left": '5.5em',
"top": $currentItem.offset().top - 15
}).show();
});
.item {
border: 1px solid #e2e2e2;
margin: 6px;
padding: 0px 10px 0px 10px;
position: relative;
height: 40px;
}
.wrap {
margin-left: 8em;
}
#item_new {
border: 1px dashed #C0C0C0 !important;
background: none repeat scroll 0% 0% #F7F7F7;
display: block;
height: 2.2em;
margin: 6px;
padding: 0px 10px;
position: relative;
}
#item_add {
display: none;
position: absolute;
width: 2em;
border: 1px solid #ddd;
background-color: #f7f7f7;
color: #aaa;
padding: 0px 6px;
}
#item_add .body {
display: none;
}
#item_add .arrow {
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
top: 5px;
right: -7px;
position: absolute;
}
#item_add button {
background: none repeat scroll 0px center #fff;
padding: 0.2em 2em;
margin: 3px .2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="item_add">
<header>X</header>
<div class="body">
<button id="item_element_new">Example</button>
</div>
<div class="arrow"></div>
</div>

The easiest fix, reason is what #erik-philips said:
$(document).on('mouseenter', '.item', function (event) {
var item = $(this);
$('#item_add').css({
"left": '5.5em',
"top": item.offset().top - 15
}).show();
$('#item_element_new').data('hovering_item', item);
});
$('#item_add').hover(function () {
var menue = $(this);
menue.animate({
"width": '7em',
"left": '0.5em'
}, 200, function () {
menue.find(".body").stop().slideDown(200);
});
}, function () {
var menue = $(this);
menue.find(".body").stop().slideUp(200, function () {
menue.animate({
"width": '2em',
"left": '5.5em'
}, 200);
});
});
$('#item_element_new').hover(function () {
var item = $('#item_element_new').data('hovering_item');
item.after('<div id="item_new"></div>');
}, function () {
var item = $('#item_element_new').data('hovering_item');
$('#item_new').remove();
});
.item {
border: 1px solid #e2e2e2;
margin: 6px;
padding: 0px 10px 0px 10px;
position: relative;
height: 40px;
}
.wrap {
margin-left: 8em;
}
#item_new {
border: 1px dashed #C0C0C0 !important;
background: none repeat scroll 0% 0% #F7F7F7;
display: block;
height: 2.2em;
margin: 6px;
padding: 0px 10px;
position: relative;
}
#item_add {
display: none;
position: absolute;
width: 2em;
border: 1px solid #ddd;
background-color: #f7f7f7;
color: #aaa;
padding: 0px 6px;
}
#item_add .body {
display: none;
}
#item_add .arrow {
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
top: 5px;
right: -7px;
position: absolute;
}
#item_add button {
background: none repeat scroll 0px center #fff;
padding: 0.2em 2em;
margin: 3px .2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="item_add">
<header>X</header>
<div class="body">
<button id="item_element_new">Example</button>
</div>
<div class="arrow"></div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

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

Related

jQuery change containing element's width with slide

how to trigger an event for an element when some other element is clicked in jQuery?

jQuery click event is not working

Why are there different results for the following code?

Multiple elements on mouseover event instead of single element

Categories

Resources