I have created a simple jQuery drop down menu using the slideUp and slideDown functions. It works if the user would slowly hover over each allowing the previous one to finish but that would never happen in reality.
How would I go about improving the code so it would be a smooth transition for each dropdown?
Here is a working fiddle of my dilema: jsfiddle and here is the code:
HTML
<div id="header">
<a id="item1" class="item" href="">Item 1</a>
<a id="item2" class="item" href="">Item 2</a>
</div>
<div id="box1">box1</div>
<div id="box2">box2</div>
CSS
#header{
width:100%;
height:50px;
background:blue;
text-align:right;
}
.item{
color:#fff;
width:50px;
height:50px;
display:inline-block;
background:gray;
}
#box1{
width:200px;
height:100px;
background:gray;
display:none;
float:right;
}
#box2{
width:200px;
height:100px;
background:gray;
display:none;
float:right;
}
jQuery
$('#item1').hover(function(){
$('#box1').stop().slideDown();
}, function(){
$('#box1').stop().slideUp();
});
$('#item2').hover(function(){
$('#box2').stop().slideDown();
}, function(){
$('#box2').stop().slideUp();
});
Specifies the speed of the slide effect.
Possible values:
milliseconds
slow
fast
The key is using promise() to waint until animation is ended.
You can check how its work there: http://jsfiddle.net/mcXBB/4/
I also changed your events to more flexible way which allow you to handle more menu positions in easier way:
<div id="header">
<a id="item1" class="item" rel="#box1" href="">Item 1</a>
<a id="item2" class="item" rel="#box2" href="">Item 2</a>
</div>
<div id="box1" class="boxes" >box1</div>
<div id="box2" class="boxes" >box2</div>
$('#header a')
.mouseenter( function() {
var boxId = $(this).attr('rel');
$('.boxes').promise().done( function() {
$(boxId).slideDown();
});
})
.mouseleave(function() {
var boxId = $(this).attr('rel');
$('.boxes').promise().done( function() {
$(boxId).slideUp();
});
});
check this awesome way to let you hover only apply to filtered not in animation, this will fix your question i guess .
$('#box1').filter(':not(:animated)').slideUp();
Related
I want that when the click activate the element2 div, the element should disappear. And the element2 div should not appear at the beginning.
$(".toggle").click(function() {
$(".element2").toggle();
});
$(".close").click(function() {
$(".element2").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">
Element 1
<div class="toggle">
toggle
</div>
<div class="element2">
Element 2
<div class="close">close Element 2</div>
</div>
</div>
Add display none to hide an element from the start:
<div class="element2" style="display:none">
The rest of your code appears to be doing what it's supposed to, unless I am misunderstanding "I want that when the click activate the element2 div, the element should disappear"... which is entirely possible.
In order to have element2 hidden at the beginning you need to either add a style tag or even better add a CSS file where you will keep all of your stylings in one place.
For style tag:
<div class="element2" style="display:none">
For CSS:
.element2 {
display: none;
}
Then for your code you are close. In order to make element hide, you need to change it to:
$(".toggle").click(function() {
$(".element2").show();
$(".element").hide();
});
$(".close").click(function() {
$(".element2").hide();
$(".element").show();
});
The HTML will need some changes to, this will make what I wrote work the way I believe you want it to:
<div class="element">
Element 1
<div class="toggle">
toggle
</div>
</div>
<div class="element2">
Element 2
<div class="close">close Element 2</div>
</div>
You should probably do something like this:
$(".toggle").click(function() {
$(this).parent().find(".element2").toggle();
});
$(".close").click(function() {
$(this).parent().hide(); // close the correct .element2
});
In CSS you need to:
.element2 {
display: none;
}
just $(".element2").hide(); hide it at start
$(function() {
$(".element2").hide();
$(".toggle").click(function() {
$(".element2").toggle();
});
$(".close").click(function() {
$(".element2").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">Element 1
<div class="toggle">Toggle </div>
<div class="element2"> Element 2
<div class="close"> close</div>
</div>
</div>
HTML
<div class="element">
<div class="toggle"></div>
<div class="element2" style="display:none">
<div class="close"></div>
</div>
</div>
EXAMPLE CSS
.toggle
{
display:block;
width:20px;
height:20px;
margin-left:10px;
float:left;
background:green;
}
.element2{
display:block;
width:40px;
height:40px;
margin-left:10px;
float:left;
background:yellow;
}
.close{
display:block;
width:20px;
height:20px;
margin-left:10px;
float:right;
border:1px solid #000;
}
JQUERY
$(".toggle").click(function() {
$(".element2").toggle();
});
$(".close").click(function() {
$(".element2").css({"display":"none"});
});
fiddle to check
I hope it is helpfull answer. Good Luck !
I am unable to change the text color using jQuery.I have gone through other similar questions and tried to implement the solutions but somehow its not working. Not sure where I am going wrong. please help. I have created a demo
CODE
HTML
<div class="wrapper">
<button class="addItem">Add Item</button>
<button class="removeItem">Remove Last Item</button>
<div class="clear">
</div>
<div class="colr blue">blue</div>
<div class="colr red">red</div>
<div class="clear">
</div>
<ul class="items">
<li class="newItem">ONE</li>
<li class="newItem">ONE</li>
</ul>
</div>
CSS
.clear{
clear:both;
}
.colr{
height:20px;
width:50px;
float:left;
color:white;
padding:10px;
margin:10px;
text-align:center;
cursor:pointer;
}
.blue{
background:blue;
}
.red{
background:red;
}
jQuery
$(document).ready(function(){
$('.addItem').click(function(){
$('.items').append("<li class=\'newItem\'>NEW ITEM</li>");
});
$('.removeItem').click(function(){
$('.items li:last-child').remove();
});
$('blue').click(function(){
$('.items').css('color','blue');
});
$('red').click(function(){
$('.newItem').css('color','red');
});
});
Here you can try this code
$('.blue').click(function(){
$('.items').css('color','blue');
});
$('.red').click(function(){
$('.newItem').css('color','red');
});
Js fiddle link click here
Does anybody knows how can I add some bootstrap icons to my textarea. Icons should show on focus and hide on focus out. This textarea is similary, if not the same as Facebook Add new status textarea.
All I was able to do is to expand and shrink textarea onfocus/focusout events, using JavaScript.
This is the code I have:
HTML:
<div class="jumbotron" style="height:150px">
<div class="col-lg-12">
<textarea class="expand" rows="3" cols="20"></textarea>
</div>
</div>
JS:
<script type="text/javascript">
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
});
$('textarea.expand').focusout(function () {
$(this).animate({ height: "2em" }, 500);
});
</script>
CSS:
.expand
{
height: 2em;
width: 50%;
}
I've also try using .css in JS and trying to add icon, but I suppose I don't do this right way, cause nothing gets shown.
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
$(this).css('glyphicon glyphicon-camera');
});
Textarea should behave like this:
OnFocusOut:
OnFocus:
Can someone help me, and give me an idea on how to do this...Because I'm pretty bad in JS.
One Simple answer can be creating a sibling div element to the textarea which will contain all the icons, show the div of focusing the textarea and hide it on focusout of the textarea
This example is using the selector
.parent:hover .links{}
but could be edited to
.parent:focus .links{}
if desired. However, to show you this in action, i've designed a simple demo below:
.parent{
height:100px;
width:70%;
background:red;
position:relative;
}
.parent:hover .links{
display:block;
}
.links{
display:none;
position:absolute;
bottom:0;
}
<div class="parent">
<div class="child">
<div class="links">
facebook twitter etc
<img src="http://placekitten.com/g/20/20" alt="" />
</div>
</div>
</div>
An example using Sibling selectors
Here is a working example of using the sibling selector
input:focus + .items
which selects the class .items of which has a sibling of 'input' which has a focus (i.e. what you're looking for)
#parent{
height:100px;
width:80%;
background:red;
position:relative;
}
.items{
bottom:0;
padding:5px;
display:none;
}
input:focus + .items{
display:block;
}
<div id="parent">
<input type="text" placeholder="enter text"/>
<div class="items">
<img src="http://placekitten.com/g/20/20" alt=""/>
<img src="http://placekitten.com/g/20/20" alt=""/>
<img src="http://placekitten.com/g/20/20" alt=""/>
</div>
</div>
I want to point out which div I clicked on to prevent confusing as the pop up menu that comes out of it on my site will be both the same just different links but same buttons. Now my problem is that i cant figure out how i can manage to do it been stuck on it for quite some time now. My site is in Wordpress for the info. The color of the text doesnt really matter atm.
The code does work but i want that when i hit "juicyplants" the color changes and when i hit "leafyplant" that color changes and "juicyplants" go back to normal. with the changing colors i mean the already presenting ones.
My code:
HTML:
<div id="clickOne" class="clickDesign">
<h2 class="fs20 nobold">Leafy Plants</h2>
</div>
<div id="clickTwo" class="clickDesign">
<h2 class="fs20 nobold">Juicy Plants</h2>
</div>
</div>
<div id="leafyPlants">
Leafy Test
</div>
<div id="juicyPlants">
Juicy Test
</div>
CSS:
#leafyPlants{
display:none;
position:absolute;
top:50px;
cursor:pointer;
}
#juicyPlants{
display:none;
position:absolute;
top:50px;
cursor:pointer;
}
h2 {
float:left;
display:block;
height:40px;
width:150px;
cursor:pointer;
}
jQuery:
$("#clickOne").on('click', function() {
$("#leafyPlants").fadeIn();
$("#juicyPlants").fadeOut();
});
$("#clickTwo").on('click', function() {
$("#leafyPlants").fadeOut();
$("#juicyPlants").fadeIn();
})
Best to change classes and use styling:
jsfiddle: http://jsfiddle.net/TrueBlueAussie/Pcn5a/2/#update
$(function () {
$("#clickOne").on('click', function () {
$('.clickDesign').removeClass("active");
$(this).addClass("active");
$("#leafyPlants").fadeIn();
$("#juicyPlants").fadeOut();
});
$("#clickTwo").on('click', function () {
$('.clickDesign').removeClass("active");
$(this).addClass("active");
$("#leafyPlants").fadeOut();
$("#juicyPlants").fadeIn();
})
});
in style add:
.active{
color: green;
}
It is better to data-drive any menu system and reduce the code:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/Pcn5a/3/
JQuery:
$(function () {
$('.clickDesign').on('click', function () {
var $this = $(this);
$('.clickDesign').removeClass("active");
$this.addClass("active");
// Use the id in the data-target attribute
$target = $($this.data('target'));
$(".target").not($target).fadeOut();
$target.fadeIn();
});
});
Html (has data-target attributes)
<div>
<div id="clickOne" class="clickDesign" data-target="#leafyPlants">
<h2 class="fs20 nobold">Leafy Plants</h2>
</div>
<div id="clickTwo" class="clickDesign" data-target="#juicyPlants">
<h2 class="fs20 nobold">Juicy Plants</h2>
</div>
</div>
<div id="leafyPlants" class="target">Leafy Test</div>
<div id="juicyPlants" class="target">Juicy Test</div>
I'm creating a website with horizontal scrolling. I'm using this jQuery plugin for automatic scrolling. Below is the code.
HTML
<head>
<link type="text/css" rel="stylesheet" href="stylesheets/styles.css" />
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="container">
<div id="navigation">
<ul>
<li>
<div class="menubutton" id="homeLink"><a class="menuitem" href="#"></a></div>
</li>
<li>
<div class="menubutton" id="aboutLink"><a class="menuitem" href="#"></a></div>
</li>
<li>
<div class="menubutton" id="musicLink"><a class="menuitem" href="#"></a></div>
</li>
</ul>
</div><!-- end of navigation -->
<div id="firstMark"></div>
<div id="secondMark"></div>
<div id="thirdMark"></div>
</div>
</body>
</html>
CSS
#charset "utf-8";
ul li { list-style-type:none; }
/* navigation */
#navigation { position:fixed; z-index:5; bottom:80px; left:-26px; background-color:#FFF; width:70px; height:190px; border-top-right-radius:10px; border-bottom-right-radius:10px; }
.menubutton { float:left; width:20px; height:20px; border-radius: 50%; background-color:#F00; margin-bottom:15px; }
.menubutton:hover { cursor:pointer; }
#homeLink { background-color:#007FD2; }
#aboutLink { background-color:#C7007A; }
#musicLink { background-color:#FFDB1A; }
#brandsLink { background-color:#000; }
#contactLink { background-color:#F90; }
#homeLink:hover { background-color:#006DB4; }
#aboutLink:hover { background-color:#99005E; }
#musicLink:hover { background-color:#FFC61A; }
#brandsLink:hover { background-color:#333; }
#contactLink:hover { background-color:#F60; }
#container {
position:absolute;
width:10000px;
height:100%;
background-color:#FFC;
top:0;
left:0;
}
#firstMark {
position:absolute;
width:1px;
height:1px;
left:3000px;
}
#secondMark {
position:absolute;
width:1px;
height:1px;
left:6000px;
}
#thirdMark {
position:absolute;
width:1px;
height:1px;
left:9000px;
}
JavaScript
$(document).ready(function(e) {
$('#homeLink').click(function(e) {
e.preventDefault();
$.scrollTo(0,0, {duration: 2000});
});
$('#aboutLink').click(function(e) {
e.preventDefault();
$.scrollTo('#firstMark', {duration: 2000});
});
$('#musicLink').click(function(e) {
e.preventDefault();
$.scrollTo('#secondMark', {duration: 2000});
});
});
Here's the link to a demo page. This works in Firefox(v18), Opera(v12), Safari(v5.1.2) and even Internet Explorer 9 but it doesn't work in Chrome(v24).
Can anybody tell me what's missing here? It it something wrong with my code or a bug in the plugin?
Failing that, please tell me if there are any other alternatives to automatic scrolling which also supports horizontal scrolling.
Thank you.
Old question but I'll write down my experience.
I had the same issue with that plugin downloaded from http://flesler.blogspot.com/2007/10/jqueryscrollto.html
That plugin in the article is outdated, you can download the latest version here: https://github.com/flesler
Also you will also have to change
$.scrollTo(0,0, {duration: 2000});
to
$.scrollTo("0px","0px", {duration: 2000});
Your anchor might be receiving the click event rather than the div.
Just give this a quick try:
$('#homeLink a').click(function(e) {
e.preventDefault();
alert('click');
$.scrollTo(0,0, {duration: 2000});
});
I added an alert('click') as well so you can tell if it's been detected.
Try using px will scroll value
Change
$.scrollTo(0,0, {duration: 2000});
to
$.scrollTo(0px,0px, {duration: 2000});
The bug is in webkit's ability to animate the body. Instead, create a div just inside body and apply the animation to this instead...
<body>
<div class="wrapper">
<nav>
<a class="scroll-to-id" href="#" data-target="section1">Section 1</a>
<a class="scroll-to-id" href="#" data-target="section2">Section 2</a>
</nav>
<section>
<a id="section1"> </a>
<p>Some content<p>
</section>
<section>
<a id="section2"> </a>
<p>Some more content<p>
</section>
</div>
</body>
Note: In my personal experience, the ID could be just as effectively applied to the tag instead of a redundant and this still work ... I've only done it this way in this example because some users noted issues with targeting IDs higher up the DOM tree than this ... I couldn't personally recreate that problem, so hey, either way works!
Then style the wrapper element and body to behave correctly
body { position:relative; }
.wrapper { overflow:auto; position:absolute; top:0; height:100%; width:100%; }
Then the jQuery
$('.scroll-to-id').on('click', function(event) {
event.preventDefault();
var target = "#" + $(this).data('target');
$('.wrapper').animate({
scrollTop: $(target).offset().top
}, 1500);
});