I am creating a search field with the click function (animate) but as you can see from this example: https://www.ve.com/search when you click on the search icon it moves up and down and I am not sure why this is happening.
I am sure it is something very simple but not sure what it is I am doing wrong.
Code below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".hs-search-field__bar").animate({width: "toggle"});
if ($(".hs-search-field__bar").is(':visible'))
$(".hs-search-field__bar").css('display','inline-block');
});
});
</script>
<div class="search-separator">
<div class="hs-search-field">
<div class="hs-search-field__bar" style="display:none;" >
<form action="/{{ site_settings.content_search_results_page_path }}">
<input type="search" class="hs-search-field__input" name="term" autocomplete="off" placeholder="{{ module.placeholder }}">
</form>
</div>
<button class="search-button"> <i class="fa fa-search"></i></button>
</div>
</div>
As Michael pointed out, during the animation there is an overflow: hidden;
WORKAROUND
Don't use jQuery animations.
Animate via CSS instead
<div class="hs-search-field__bar">
...
</div>
$(".search-button").on("click", function(){
$(".hs-search-field__bar").toogleClass("show");
});
CSS
.hs-search-field__bar{
width: 0;
overflow:hidden;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
.hs-search-field__bar.show{
width:auto; /* or some width you want, including 100% */
}
Related
Anyone know how to resize an image up and down on click.
Example: nrk.no
The website you give as an example uses CSS Transitions to make some of their images grow and shrink. You can learn more about CSS Transitions at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
Below is a simple example using JQuery. When you click on the Google logo it will grow and when you click on it again it will shrink.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.box img {
transition: width .4s,margin .4s,max-width .4s;
transition-property: width, margin, max-width;
transition-duration: 0.4s, 0.4s, 0.4s;
transition-timing-function: ease, ease, ease;
transition-delay: 0s, 0s, 0s;
}
.box img.clicked{
width: 500px;
}
</style>
<script>
$(function(){
$('.box img').on('click', function() {
$(this).toggleClass('clicked');
});
});
</script>
</head>
<body>
<div class="box">
<img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
</div>
</body>
</html>
I am trying to recreate the buttons with spinners when clicked from this example: http://jsfiddle.net/AndrewDryga/GY6LC/
HTML
A and Button tags:
<p>
<a class="btn btn-success has-spinner">
<span class="spinner"><i class="icon-spin icon-refresh"></i></span>
Foo
</a>
</p>
<p>
<button class="btn btn-success has-spinner" name="btn">
<span class="spinner"><i class="icon-spin icon-refresh"></i></span>
Foo
</button>
</p>
CSS
.spinner {
display: inline-block;
opacity: 0;
max-width: 0;
-webkit-transition: opacity 0.25s, max-width 0.45s;
-moz-transition: opacity 0.25s, max-width 0.45s;
-o-transition: opacity 0.25s, max-width 0.45s;
transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden width */
}
.has-spinner.active {
cursor:progress;
}
.has-spinner.active .spinner {
opacity: 1;
max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */
}
JS
$(function(){
$('a, button').click(function() {
$(this).toggleClass('active');
});
});
I am able to recreate the tag button to work but not the tag. In his site (linked at top) they both work the same. Is there anything Im missing?
I am impletementing this in flask and using WTFforms, so i am getting the events through request.form.get['btn'], it appears that having the html inside the flask tags is whats causing the issue
Any help would be greatly appreciated.
EDIT: Sorry, i've narrowed down the issue to appear when i include the name for the button
I'm trying to fade in an element on my page that is some text formatted with CSS. I can get a plain text element to fade in using element.fadeIn(). But that doesn't work with my document's current element. The onMouseOver and onMouseOut events are correctly just showing and hiding the element with no fade. I'm trying to get it to fade in (and eventually fade out) with the mouse events.
The first part of the <body>:
<body>
<div class="content">
<h1 class="title">Application</h1>
<ul id="sdt_menu" class="sdt_menu" >
<li onMouseOver="change_it('sub2');" onMouseOut="change_back('sub2');">
<a href="../app.exe">
<img src="images/1.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">APPName</span>
<span class="sdt_descr">Click to Install</span>
</span>
</a>
Function for trying to fade in the text:
function change_it(id)
{
setVisibility(id, 'inline');
//id.FadeIn("slow");
// $('div.detail').fadeIn('fast');
}
Function to setting the visibility:
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
The "sub2" element:
<div class ="detail" id="sub2">
<p><b>Welcome my application!</b></p>
<p>Here is a bunch of text I want to fade in during a mouse over another element!
</p>
</div>
From the CSS file:
.detail{
position: fixed;
top: 0;
left: 35%;
width: 650px;
height: 300px;
Line-height: 1.4em;
color : white;
}
Can someone spot the problem or suggest what I need to do to fade in the "sub2" element during that mouse over action?
Since you didn't answer my question about display vs visibility, I'll assume you want it to take up space (example):
css:
.fade-in
{
opacity: 0;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
}
.fade {
opacity: 1;
}
jquery:
$(document).ready(function()
{
$('.fadeIn').on('click', function()
{
var target = $(this).data('target');
$(target).toggleClass('fade');
});
});
html:
Click me!
<div id="theId" class="fade-in">You clicked on Click me!</div>
<div>Hi!</div>
JsFiddle Example
Below is my HTML-CSS-Jquery code.
Problem: When I click on the background button, The Colour changes from Orange to Green instantly.
What I want is, when I click on the Background button the background color of the div must change colour slowly.
Please note that I am only permitted to use Jquery. No Other plugins may be used.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
#box
{
position:absolute;
height:200px;
width:200px;
background-color:orange;
padding: 20px;
margin: 200px 200px;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#width").click(function(){
$("#box").animate(
{"width": "300px"},
"slow");
});
$("#height").click(function(){
$("#box").animate(
{"height": "300px"},
"slow");
});
$("#background").click(function(){
$("#box").css("background-color","green");
});
});
</script>
</head>
<body>
<button id="width" type="button"> Width </button>
<button id="height" type="button"> Height </button>
<button id="background" type="button"> Background </button>
<div id="box">
<p>Bringing so sociable felicity supplied mr. September suspicion far him two acuteness perfectly. Covered as an examine so regular of. Ye astonished friendship remarkably no. Window admire matter praise you bed whence. </p>
</div>
</body>
</html>
try something like this,FIDDLE
$("#background").click(function(){
$("#box").css({
transition : 'background-color 1s ease-in-out',
"background-color": "green"
});
});
you can do also by css
In CSS
.slowbackground {
background-color: green;
-webkit-transition: background-color 0.4s ease;
-moz-transition: background-color 0.4s ease;
-o-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
background-color: D3E1FA;
}
in js
$("#background").click(function(){
if( $("#box").hasClass("slowbackground")) {
$("#box").addClass("slowbackground");
}
});
I want to highlight the borders of a textfield using animate function, when click on Add Animation Link.
Like this:
Js Fiddle Here: http://jsfiddle.net/N9um8/20/
HTML :
<div>
<p>
<input type="text" name="search" id="search" placeholder="Search for people...." class="field_style">
</p>
<p> Add Animation </p>
</div>
<p class="styling"> I want it like this when click on Add Animation :</p>
<div>
<p>
<input type="text" name="test_search" id="test_search" placeholder="Search for people...." class="test_field_style">
</p>
</div>
CSS:
.field_style { width:400px; }
.styling { color:red; }
.test_field_style {
border-color: #6EA2DE;
box-shadow: 0 0 10px #6EA2DE;
width:400px;
}
Jquery:
$(".add_animation").click(function (){
$("#search").focus().animate({ "background-color": "#B6DADA" }, 800, "linear");
});
backgroundColor is not an animatable property with jQuery animate by default. In general, it cannot animate colors. You will have a much better time using simple CSS transitions although they are not as widely supported (IE9- will not).
.field_style {
width:400px;
transition: box-shadow .8s linear;
outline: 0;
}
.field_style:focus {
box-shadow: 0 0 10px #6EA2DE;
border-color: #6EA2DE;
}
http://jsfiddle.net/N9um8/31/
.8s is a bit long for the animation by the way.
You have a couple of different options. The best performance-wise would definitely be CSS:
The JS:
$(".add_animation").click(function (){
$("#search").focus(function() {
$(this).css({backgroundColor: '#B6DADA'});
}).blur(function() {
$(this).css({backgroundColor: '#fff'});
}).focus();
});
The CSS:
#search {
-webkit-transition: .8s background linear;
-moz-transition: .8s background linear;
-ms-transition: .8s background linear;
-o-transition: .8s background linear;
transition: .8s background linear;
}
The fiddle
Another way is using a jQuery plugin or something (my favorite is called jquery color) to animate your colors.
$(".add_animation").click(function (){
$("#search").focus(function() {
$(this).animate({backgroundColor: '#B6DADA'}, 800, 'linear');
}).blur(function() {
$(this).animate({backgroundColor: '#fff'}, 800, 'linear');
}).focus();
});
The fiddle
Try with this plugin : http://www.bitstorm.org/jquery/color-animation/ and append :
<script src="http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js"></script>
An example here:
http://jsfiddle.net/N9um8/20/