Change div colour gradually using jquery ONLY - javascript

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

Related

Jquery toggle action for animate function effects height of search icon

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% */
}

how to resize responsive image up and down

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>

Javascript not working in my site

I'm having big trouble making a website. For some reason in whatever I do I can never get javascript to work. Is there something I'm missing for 'enabling' this?
For example I copied a very simple thing exactly.
https://codepen.io/thetallweeks/pen/boinE
In a test file this is:
<html>
<head>
<script>
$("#button").click(function() {
$('.transform').toggleClass('transform-active');
});
</script>
<style>
.box {
background-color: #218D9B;
height: 100px;
width: 100px;
}
.transform {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.transform-active {
background-color: #45CEE0;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="box transform">
</div>
<input type="button" id="button" value="Click Me"></input>
</body>
</html>
Yet the button does nothing in my test file.
What did I do wrong?
In addition to making sure JQuery has been loaded you should also load your JQuery code(script tag) before the closing body tag or wrap it in a document ready function call. If JQuery has been loaded then what is happening is that the JQuery is being executed before the html element your are attaching the event to has actually been loaded. So basically the JQuery event can't see your button element yet.
$(document).ready(function(){
$("#button").click(function() {
$('.transform').toggleClass('transform-active');
});
});
The $() is a jQuery shorthand for finding elements in DOM. Did you include the jQuery Library?
Try this
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$("#button").click(function() {
$('.transform').toggleClass('transform-active');
});
</script>
<style>
.box {
background-color: #218D9B;
height: 100px;
width: 100px;
}
.transform {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.transform-active {
background-color: #45CEE0;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="box transform">
</div>
<input type="button" id="button" value="Click Me"></input>
</body>
</html>
This happens as you did not include Jquery and tried using it.
Note additional script tag on the top of your script tag

Highlight Border Color Using Jquery Animate?

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/

How to create sliding DIV on click?

I am looking to create a slide out DIV, like the one here when you press "Contact". Does anybody know of anything similar to this?
Making use jQuery's slideToggle() method could help you do this.
Example
HTML:
<div id="contact">
Contact me!
</div>
Contact
CSS:
#contact
{
display: none;
background: grey;
color: #FFF;
padding: 10px;
}
JavaScript:
$(function()
{
$("a#toggle").click(function()
{
$("#contact").slideToggle();
return false;
});
});
If you don't want to use jQuery and you can stick to modern browsers you can try:
Demo: http://jsfiddle.net/ThinkingStiff/EVyE8/
HTML:
<div id="slide">click me</div>
CSS:
#slide {
height: 50px;
transition: height 500ms ease;
-moz-transition: height 500ms ease;
-ms-transition: height 500ms ease;
-o-transition: height 500ms ease;
-webkit-transition: height 500ms ease;
}
Script:
document.getElementById( 'slide' ).addEventListener( 'click', function() {
this.style.height == '50px' || this.style.height == ''
? this.style.height = '150px'
: this.style.height = '50px';
}, false );
yet another sample, but without jquery, and with a class add/remove approach :)
Demo: http://jsfiddle.net/1wbh8pqj/
The main idea is that you have two classes, one of them applies to the slider, and the another, says how the slider should show when it is expanded.
.slider {
height: 0px;
overflow: hidden;
transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
-ms-transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-webkit-transition: height 0.5s ease;
}
.slided {
height: 100px;
}
so, you have to set the 'slided' class to the slider when it has to be expanded, and remove it when the slider has to be shrinked, and using the super-mega-uber-awesome css transition, the height will smoothly change :)
var expander = document.getElementById("expander");
expander.addEventListener("click", function () {
var slider = document.getElementsByClassName("slider")[0];
if (slider.classList.contains("slided")) {
slider.classList.remove("slided");
} else {
slider.classList.add("slided");
}
});
ohbtw, the html:
<div class="slider">i am teh slidah!! :D</div>
<div class="content">and i am the content XD</div>
<div id="expander">click me to expand/hide the slidah! :O</div>
Another sample
Sample
http://jsfiddle.net/9cdYR/
HTML
<div id="slide">
Slide content<br />
Slide content<br />
Slide content<br />
</div>
<div id="content">
Content<br />
Content<br />
Content<br />
</div>
<button id="slide_button">Slide it</button>
CSS
#content {
background-color: #c0c0c0;
border: 1px solid blue;
}
#slide {
border: 1px solid red;
background-color: #000;
color: #fff;
overflow: hidden;
}
JS
$('#slide_button').click(function() {
$('#slide').animate({
height: 'toggle'
}, 1500, function() {
});
});
With jQuery, you make the div and add display:none with css. Then, something like:
$('.button').click(function(e){
e.preventDefault();
$('#mydiv').slideToggle();
});
The almighty jQuery comes to a rescue, once again.
If you don't want to use jquery, just set a timer and increase the height.

Categories

Resources