How to smooth this search bar animation - javascript

I tried to modify the code taken from herefor my usage need:
CSS:
.search-bar{ width: 200px; display: none; }
.searchbox { display: inline;}
.trigger { display: inline}
HTML:
<div class="search-bar">
<input type="text" name="s" class="searchbox" value="Search" onfocus="this.value=''">
</div>
<button class="trigger">search</button>
JS:
$(document).ready(function() {
$('.trigger').click(function() {
if ($("search-bar").is(':visible')) {
$('.search-bar').animate({width: 'toggle'}).css({ 'display' : 'inline'});
} else {
$('.search-bar').animate({ width: 'toggle' }).css({ 'display' : 'inline'});
}
});
});
It works as expected but the animation isn't smooth. How to make the animation flow smoothly.
JSFiddle
Thank you,

try something like this, FIDDLE
$(document).ready(function () {
$('.trigger').click(function () {
if ($(".search-bar").is(':visible')) {
$('.search-bar').fadeOut();
} else {
$('.search-bar').fadeIn();
}
});
});
simplified version
$(document).ready(function () {
$('.trigger').click(function () {
$('.search-bar').fadeToggle("slow");
});
});

set animation time also see updated fiddle
$(document).ready(function() {
$('.trigger').click(function() {
if ($("search-bar").is(':visible')) {
$('.search-bar').animate({width: 'toggle'},500);//here set animation duration
} else {
$('.search-bar').animate({ width: 'toggle' },500);//here set animation duration
}
});
});
reference animation()

You just need to add the width to each expandable div.
To explain:
jQuery doesn't know the dimensions of your hidden div until it's displayed. So when it's clicked on it actually pulls it out of position to measure it before quickly replacing it. This often has the side effect of causing some jumpiness. Setting the width on the element prevents jQuery from pulling it out of position.
More detailed information please see this link:
jQuery slideDown is not smooth

Someone has helped me out. The feature I want is here: http://jsfiddle.net/mw7yK/12/
CSS:
.search-bar { display: inline; }
.searchbox { width: 200px; display: none; }
.trigger { display: inline}
HTML:
<div class="search-bar">
<input type="text" name="s" class="searchbox" value="Search" onfocus="this.value=''" />
</div>
<button class="trigger">search</button>
JS:
$(document).ready(function() {
$('.trigger').click(function() {
$('.searchbox').animate({width: 'toggle'}, 1000);
});
});

Related

Switching Focus Between Two Divs and the Webpage

Here is the answer to the question, thanks to #CumminUp07
I've found this link to be helpful, except that I do not want the suggestions div to disappear after an element is selected in the suggestions div in order to select more suggestions later. I have tried to implement this strategy with the slideUp() and slideDown() jquery functions, but of course that is not as fast as the show() and hide() jquery functions, and trying to speed up the sliding functions ends up stopping the suggestions div from appearing again.
Here is a plunker of what I am currently stuck on:
$('#search').focus(function() {
$('#suggestions').slideDown();
});
$('#search').blur(function() {
$('#suggestions').slideUp();
});
$('#suggestions div').click(function() {
$('#search').val($(this).html());
$('#suggestions').slideDown();
$('#search').focus();
});
#search,
#suggestions {
width: 200px;
}
#suggestions {
display: none;
border: 1px solid gray;
border-top: none;
}
#suggestions div:hover {
background-color: #99CCFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" value="" />
<br />
<div id="suggestions">
<div>Toronto</div>
<div>Seattle</div>
<div>Dallas</div>
</div>
I do not believe this is a duplicate to Action on blur except when specific element clicked with jQuery, because the timeout does not work well enough for the functionality I desire, nor does it allow you to ensure I can click two different divs while keeping one of those two divs open until a different object in the document is selected.
You can stop the animation from completing and then just show the suggestions
$('#search').focus(function() {
$('#suggestions').slideDown();
});
$('#search').blur(function() {
$('#suggestions').slideUp();
});
$('#suggestions div').click( function() {
$('#suggestions').stop(true,true).show();
$('#search').focus();
$('#search').val($(this).html());
});
Maybe it will help you
$('#search').focus(function() {
$('#suggestions').slideDown();
});
$('#search').blur(function() {
$('#suggestions').slideUp();
});
$('#suggestions div').click(function() {
$('#search').val($(this).html());
$('#search').blur();
});
https://jsfiddle.net/vc15r7qb/

stopImmediatePropagation() of sibling not working

I show a search field on some text click, and hide it on search input blur.
But if I click on the search button I don’t want to hide the input field, and prevent it from being hidden (because of the blur). I tried to stopImmediatePropagation() without any luck.
Here’s some code:
// Not working. when search button is pressed, disable hiding the search input
$('.search-contacts-container > button').on('click touchstart', function(e) {
alert('xxx');
e.stopImmediatePropagation();
})
// when search input is blurred, hide it
$('#search-contacts').on('blur', function() {
$('.search-contacts-container').addClass('visuallyhidden');
$('#search-contacts').attr('required', 'false').blur();
})
// when search input is focused, show it
$('#search-contacts').on('focus', function() {
$('.search-contacts-container').removeClass('visuallyhidden');
$('#search-contacts').attr('required', 'true');
})
// on search text click, show the search input
$('.js-show-search').on('click touchstart', function() {
if ($('.search-contacts-container').is('.visuallyhidden')) {
$('.search-contacts-container').removeClass('visuallyhidden');
$('#search-contacts').attr('required', 'true').focus();
} else {
$('.search-contacts-container').addClass('visuallyhidden');
$('#search-contacts').attr('required', 'false').blur();
}
})
HTML:
<span class="js-show-search" title="Search for contacts">Search</span>
<form action="search" method="post" class="form-search search-contacts-container visuallyhidden">
<input type="text" id="search-contacts" placeholder="Search" required="false" />
<button type="submit" class="form-search__button" title="Search"></button>
</form>
Demo: http://jsfiddle.net/un775/
Any ideas?
Check out my new JsFiddle. I use this method on day to day tasks. I hope it helps you.
Basically what you are doing is adding a background that masks everything behind it, and then adding a click even listener to it that hides everything. The form/input is in front of the background allowing you to interact with it.
HTML
<div id="js-show-search">...</div>
<form id="search-contacts" class="hide">...</form>
<div id="background" class="hide"></div>
JavaScript
var searchContact, background;
searchContact = $('#search-contacts');
background = $('#background');
$('#js-show-search').on('click', function(){
//remove .hide to show elements
});
$('#background.close').on('click', function(){
//add .hide to hide elements
});
CSS
html, body {
height: 100%;
}
#background {
height: 100%;
width: 100%;
position: absolute;
top:0;
left: 0;
z-index: 0;
}
#search-contacts {
position: relative;
z-index: 1;
display: inline-block;
}
.hide {
display: none!important;
}
http://jsfiddle.net/un775/7/

how to toggle visibility of div on mouseover of another a tag

I will try to be as simple as possible, i am trying to achieve a simple visibility toggle on a div when someone mouseover an a tag, kind of like this the four buttons on this link:
http://www.bt.com/help/home/
now the problem is i want it to appear or want it to be visible on mouseover of a tag, but when once i hide the div it never comes back, i have tried multiple things, some are
$("#function").on("mouseover",this, function () {
$(this).addClass("show");
})
$("#function").on("mouseout",this, function () {
$(this).removeClass("show");
$(this).addClass("hide");
})
Another is:
$("#function").hover(
function () {
$(this).addClass("hide");
},
function () {
$(this).removeClass("hide");
}
);
and also
$("#butt").on("mouseover", this, function(){
$(this).find("div#function").show();
//$("#function").toggleClass("visible");
});
$("#butt").on("mouseout", this, function(){
$(this).find("div#function").hide();
//$("#function").toggleClass("visible");
});
You should use mouseenter instead of mouseover. It is because mouseover event will be triggered when you move within the element. Go here and scroll to the bottom to check the different between mouseover and mouseenter. http://api.jquery.com/mouseenter mouseenter event will be fired only when you entering the element but not move within element.
This is the solution you want. It is almost similar to the site you provided.
JavaScript
<script>
$(document).ready(function()
{
$("#function").mouseenter(function(event)
{
event.stopPropagation()
$(this).addClass("show");
}).mouseleave(function(event)
{
event.stopPropagation()
$(this).removeClass("show");
})
});
</script>
Style
<style>
.functionBlock { width:200px; height:200px; border:1px solid #CCC; padding:15px;}
.functionBlock ul { visibility: hidden}
.functionBlock.show ul { visibility: visible;}
</style>
HTML
<div id="function" class="functionBlock">
<h5>Demo </h5>
<ul>
<li>APPLE</li>
<li>SAMSUNG</li>
</ul>
</div>
Example on jsFiddle http://jsfiddle.net/TAZmt/1/
I got it, slight changes in selectors
$("#butt")
.mouseover(function () {
$("#function").show();
})
.mouseout(function () {
$("#function").hide();
});
$("#link").hover(function(){
$("#DIV").slideToggle();
});
and the html is
LINK
<div id="DIV" style="display:none">Your content in it</div>
This should do it. Check the jsfiddle. The basic idea here is to add a class (.shown) to your root-div on the mouseenter event, this class then makes the hidden <ul> in the div show up due to.
.shown ul{
display: block !important;
}
http://jsfiddle.net/28bb8/2/
EDIT:
Made some minor css changes, to better reflect the behaviour you're looking for, but you have to change the css to accommodate your own code basically. I hope this helps.
$("document").ready(function(){
$(".wrap").hover(
function () {
$(this).addClass("shown");
},
function () {
$(this).removeClass("shown");
}
);
});
You don't need Javascript here. This is possible with CSS alone
HTML:
<div class="panel">
<div class="teaser"><img src="http://lorempixel.com/300/400"/></div>
<div class="info">
<ul>
<li>Go here ...</li>
<li>Or there ...</li>
</ul>
</div>
</div>
CSS:
.panel {
width: 300px;
height: 400px;
}
.info {
display: none;
}
.panel:hover .teaser {
display: none;
}
.panel:hover .info {
display: block;
}
And JSFiddle for playing.
i hope this is the solution you're seaching for.
Just place the following code below your <body> tag:
<script type="text/javascript">
function toggle(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
And here is a link and the div which is toggled:
<a href="javascript: return false();" onmouseover="toggle('toggleme');">
Mouseover this link to toggle the visibility of #toggleme
</a>
<div id="toggleme">This div is "toggled"</div>

I have to push twice for that DIV to open

I'm using a JavaScript code that it suppose to show a hidden DIV, but somehow i have to push twice in order for that DIV to appear.
JavaScript code:
function AddComp() {
HideComp();
$("#Add-Com").click(function () {
$("#hide").toggle("fast", function () {
$('#hide').css({ visibility: "visible", height: "auto" });
});
});
var a = document.getElementById("divSave");
a.onclick = InsertComp;
}
function HideComp() {
$('#hide').css({ visibility: "hidden", height: "0" });
$("#Name").val("");
$("#Address").val("");
$("#Email").val("");
}
in HTML i have this:
<div id="Add-Com" onclick="AddCom()">
<span>Add Company</span></div>
<div id="hide" style="visibility: hidden; height: 0px;"> .....the code
Can anyone help me?
The default status is hidden. I want want to toggle it by clicking once.
Thanks
if ($("#hide").is(":visible")) $("#hide").hide();
else $("#hide").toggle("slow", function ()
{ $('#hide').css({ visibility: "visible", height: "auto" });
It seems that this do the trick the way I want it

jQuery: Showing a hidden div on page scroll

jQuery
function showDiv() {
if ($(window).scrollTop() > 100) {
$('.lock').fadeIn('slow');
} else {
$('.lock').fadeOut('slow');
});
}
$(window).scroll(showDiv);
showDiv();
HTML (.lock { display: none; position: fixed; })
<div class="lock">
Text
</div>
I'm trying to get a hidden fixed div to appear when you scroll to a certain part of the page, and to disappear when you scroll back up. What am I doing wrong?
looks like a syntax issue
function showDiv() {
if ($(window).scrollTop() > 100) {
$('.lock').fadeIn('slow');
} else {
$('.lock').fadeOut('slow');
}//); <-- drop this close parenthesis/semicolon
}
jsfiddle example
please test this:
put styles in the div.lock element.
<div class="lock" style="display: none; position: fixed;">
Text
</div>

Categories

Resources