Jquery problem animation or not animation

Jquery problem animation or not animation - javascript

First of all I'm new to jquery, so I don't know if it's possible, hence my question.
I have a problem to solve, but my doubt is it possible to solve it without animation or I will have to switch to animation.
<script type="text/javascript">
$().ready( function() {
$('table').on('click', 'tr', function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$(this).addClass('inactive');
}
});
$( "div" ).html( " <table class='table'><tbody><tr class='active'> <td><span>Row 1</span></td><td><span>Row 1 </span></td> <td><span>Row 1</span></td></tr></tbody></table>" );
})
</script>
<style type="text/css">
.active{
background-color:gray;
}
.inactive{
background-color:white ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

$(document).ready(function() {
$("div").html(" <table class='table'><tbody><tr class='active'> <td><div class='row active'>Row 1</div></td><td><div class='row'>Row 1 </div></td> <td><div class='row'>Row 1</div></td></tr></tbody></table>");
$('.row').on('click', function() {
if ($(this).toggleClass('active')) {
$(this).removeClass('active');
$(this).toggleClass('inactive');
}
});
})
.active {
background-color: gray;
}
.inactive {
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
You can switch color. Please check this

Related

Jquery - hover changes to click after several resizes

I am trying to build a basic tab-navigation. When I hover about a tab (step), then the background of the tab gets green.
But after several hovers/resizes of the browser, hover doesnt't work anymore. Then I have to click on the tab in order to get the green background. It kind of freezes.
Thats the jsFiddle:
https://jsfiddle.net/rob_the_mob_87/L84kyym1/
Here is my minimal code:
index.html
<html>
<head>
<title>Tabs</title>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/static.js">
</script>
<link rel="stylesheet" type="text/css" href="./css/main.css">
</head>
<body>
<div class="process_step active" id="1">Step 1</div>
<div class="process_step" id="2">Step 2</div>
</body>
</html>
main.css
.process_step{
}
.active{
background-color: green;
}
static.js
$(document).ready(function () {
bindShowStepHandlers()
});
this.bindShowStepHandlers = function () {
$('.process_step').each(function() {
$(this).hover(function () {
var clickedStepId = $(this).attr('id');
openStep(clickedStepId);
});
});
}
this.openStep = function (clickedStepId) {
$('.process_step').each(function() {
var stepId = $(this).attr('id');
if (stepId == clickedStepId) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
}

check this snippet below. i think it is what you want..
$(document).ready(function() {
bindShowStepHandlers()
});
this.bindShowStepHandlers = function() {
$('.process_step').each(function() {
$(this).on('mouseenter',function() {
$(this).addClass('active');
});
$(this).on('mouseleave',function() {
$(this).removeClass('active');
});
});
}
.process_step {}
.active {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="process_step active" id="1">Step 1</div>
<div class="process_step" id="2">Step 2</div>

Can't make button color change

Trying to do something super basic which doesn't seem to work:
HTML
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>
<button style="margin: 10px; color:white; background-color: #4CAF50; font-size:40px;" type="button" id="aaa" > גבע</button>
</body>
JS
$("aaa").click(function () {
$(this).css('backgroundcolor', 'white');
});
The button color doesn't seem to change. What am I doing wrong?
Thanks!

Two changes required
Id selection need a # in jquery
change backgroundColor to backgroundColor or background-color
$("#aaa").click(function() {
$(this).css('backgroundColor', 'white');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button style="margin: 10px; color:white; background-color: #4CAF50; font-size:40px;" type="button" id="aaa"> גבע</button>

$('.thing').on('click', function() {
$(this).css('background', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='thing'>button</button>
$('#aaa')
You need to target the element by id in your case.

button is an id selector #aaa.
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>
<body>
<button style="margin: 10px; color:white; background-color: #4CAF50; font-size:40px;" type="button" id="aaa" > גבע</button>
<script>
$("#aaa").click(function () {
$(this).css('background-color', 'white');
});
</script>
</body>
</html>
<script>
$("#aaa").click(function () {
$(this).css('background-color', 'white');
});
</script>

Two bugs are there
Put # before the id selector which is missing in your code.
The CSS(or DOM style) property should be background-color or backgroundColor
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button style="margin: 10px; color:white; background-color: #4CAF50; font-size:40px;" type="button" id="aaa" > גבע</button>
<script>
$("#aaa").click(function () {
$(this).css('background-color', 'white');
});
</script>

Replace your code with:
$("#aaa").click(function () {
$(this).css('backgroundColor', 'white');
});
There is a problem with your selector rule, you are missing "#"

For id use # for class use . in selector
$("#aaa").click(function () {
$(this).css({'background-color':'white'});
});

$(this).css("background-color", "yellow");
replace "backgroundcolor" attribute to "background-color"
Then it will work!
Good luck

1) Change $("aaa") To $("#aaa") :
For id selector must use # sign.
2)Change backgroundcolor To background-color
$("#aaa").click(function () {
$(this).css('background-color', 'white');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button style="margin: 10px; color:white;background-color: #4CAF50; font-size:40px;" type="button" id="aaa" > גבע</button>

for id use '#' and for 'backgroundcolor' use 'background-color'
$("#aaa").click(function () {
$(this).css('background-color', 'white');
});

How do I fade in/out a background with jQuery, but not its child

I have a menu on my webpage that I want to fade out the background of it but not the text. Here is the table for the menu, the jQuery and the CSS.
The Body/Table:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
#menu {
width:900px;
margin-left:auto;
margin-right:auto;
font-family:"britannic bold";
font-size:200%;
}
#allbodies {
width:900px;
margin-left:auto;
margin-right:auto;
}
#menu table tr td:hover {
color:#fff;
}
</style>
<title></title>
</head>
<body>
<div id="menu">
<table>
<tr>
<td id="logo" style="width:150px;height:200px;">
<img alt="Logo" height="200" src="logo.jpg" width="150">
</td>
<td id="home" style="cursor:pointer;width:150px;height:200px;background-color:red;">
<p id="menutext" style="text-align: center">HOME</p>
</td>
<td id="games" style="cursor:pointer;width:150px;height:200px;background-color:red;">
<p id="menutext" style="text-align: center">GAMES</p>
</td>
<td id="about" style="cursor:pointer;width:150px;height:200px;background-color:red;">
<p id="menutext" style="text-align: center">ABOUT</p>
</td>
<td id="contact" style="cursor:pointer;width:150px;height:200px;background-color:red;">
<p id="menutext" style="text-align: center">CONTACT</p>
</td>
<td id="author" style="cursor:pointer;width:150px;height:200px;background-color:red;">
<p id="menutext" style="text-align: center">AUTHOR</p>
</td>
</tr>
</table>
</div>
<div id="allbodies">
<div id="homebody">
<h1>Home</h1>
</div>
<div id="gamesbody">
<h1>Games</h1>
</div>
<div id="aboutbody">
<h1>About</h1>
</div>
<div id="contactbody">
<h1>Contact</h1>
</div>
<div id="authorbody">
<h1>Author</h1>
</div>
</div>jQuery:
<script>
$(function(){
$("#logo").mouseenter(function(){
$("#logo").fadeTo("fast",1.0);
});
$("#logo").mouseleave(function(){
$("#logo").fadeTo("fast",0.5);
});
$("#home").mouseenter(function(){
$("#home").fadeTo("fast",1.0);
});
$("#home").mouseleave(function(){
$("#home").fadeTo("fast",0.5);
});
$("#games").mouseenter(function(){
$("#games").fadeTo("fast",1.0);
});
$("#games").mouseleave(function(){
$("#games").fadeTo("fast",0.5);
});
$("#about").mouseenter(function(){
$("#about").fadeTo("fast",1.0);
});
$("#about").mouseleave(function(){
$("#about").fadeTo("fast",0.5);
});
$("#contact").mouseenter(function(){
$("#contact").fadeTo("fast",1.0);
});
$("#contact").mouseleave(function(){
$("#contact").fadeTo("fast",0.5);
});
$("#author").mouseenter(function(){
$("#author").fadeTo("fast",1.0);
});
$("#author").mouseleave(function(){
$("#author").fadeTo("fast",0.5);
});
$("#gamesbody").hide();
$("#aboutbody").hide();
$("#authorbody").hide();
$("#contactbody").hide();
$("#home").hide();
$("#games").hide();
$("#about").hide();
$("#author").hide();
$("#contact").hide();
$("#homebody").hide();
$("#homebody").fadeTo("slow",1.0);
$("#home").fadeTo("slow",0.5);
$("#games").fadeTo("slow",0.5);
$("#about").fadeTo("slow",0.5);
$("#author").fadeTo("slow",0.5);
$("#contact").fadeTo("slow",0.5);
$("#logo").hide();
$("#logo").fadeTo("slow",0.5);
$("#menutext").fadeTo("slow",1.0);
$("#home").click(function(){
$("#home").fadeIn("slow");
$("#homebody").fadeIn("slow");
$("#homebody").show();
$("#gamesbody").hide();
$("#aboutbody").hide();
$("#authorbody").hide();
$("#contactbody").hide();
});
$("#about").click(function(){
$("#about").fadeIn("slow");
$("#aboutbody").fadeIn("slow");
$("#aboutbody").show();
$("#gamesbody").hide();
$("#homebody").hide();
$("#authorbody").hide();
$("#contactbody").hide();
});
$("#contact").click(function(){
$("#contact").fadeIn("slow");
$("#contactbody").fadeIn("slow");
$("#contactbody").show();
$("#gamesbody").hide();
$("#aboutbody").hide();
$("#authorbody").hide();
$("#homebody").hide();
});
$("#author").click(function(){
$("#author").fadeIn("slow");
$("#authorbody").fadeIn("slow");
$("#authorbody").show();
$("#gamesbody").hide();
$("#aboutbody").hide();
$("#homebody").hide();
$("#contactbody").hide();
});
$("#games").click(function(){
$("#games").fadeIn("slow");
$("#gamesbody").fadeIn("slow");
$("#homebody").hide();
$("#gamesbody").show();
$("#aboutbody").hide();
$("#authorbody").hide();
$("#contactbody").hide();
});
});
</script>
</body>

You can use this code (Provided by jQuery ui web site) to find your way:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects - Animate demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.toggler { width: 500px; height: 200px; position: relative; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
var state = true;
$( "#button" ).click(function() {
if ( state ) {
$( "#effect" ).animate({backgroundColor: "#aa0000"}, 1000 );
} else {
$( "#effect" ).animate({backgroundColor: "#fff"}, 1000 );
}
state = !state;
});
});
</script>
</head>
<body>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Animate</h3>
<p>Just a line of text</p>
</div>
</div>
Toggle Effect
</body>
</html>
As you can see in this example, you can use $("#elementid").animate({backgroundColor: "#fff"}, 1000 ); to animate (fade in or out) the background color of your element.
You can find the full example here: http://jqueryui.com/animate/

You cannot use fadeTo() for this because it changes the opacity, and the opacity of a child cannot be different than the opacity of its parent.
You can, however, animate the background color, but you need to include the jquery UI library to do so.
Also, you do not have to choose two different background colors. Instead, you can set an opacity value for the background color.
The code to animate would look like this:
$("#parent").mouseenter(function () {
$(this).animate({ backgroundColor: 'rgba(64, 64, 64, 1)' }, 'fast');
});
$("#parent").mouseleave(function () {
$(this).animate({ backgroundColor: 'rgba(64, 64, 64, 0.5)' }, 'fast');
});
With the CSS like this:
#parent {
background-color: rgba(64, 64, 64, 0.5);
}
jsfiddle demo

Where to define hover class/behavior to override jQuery's theme CSS?

I have such a webpage with some jQuery using http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css
I would like to define the "highlight row" behavior but somehow I cannot override it as long as I am using jQuery's theme mentioned above.
My code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
$( document ).tooltip();
$("tbody > tr:even").addClass("even");
$("tbody > tr:odd").addClass("odd");
$("#company_row ~ tr").bind( "mouseover", function(e){
$(this).toggleClass("highlight");
});
$("#company_row ~ tr").bind( "mouseout", function(e){
$(this).toggleClass("highlight");
});
});
</script>
</head>
<body>
<style>
tr.even { background-color: #efefef; }
tr.odd { background-color: #fff; }
.highlight { background-color: #fffdcd !important; }
</style>
<div id="tabs">
<ul>
<li>Companies</li>
<li>People</li>
</ul>
<div id="tabs-1">
<table border='2' id="companies"></table>
</div>
<div id="tabs-2">
<table border='2' id="people"></table>
</div>
</div>
</body>
</html>
I have also tried this
$("#companies").hover(
function () {
$(this).css("background","yellow");
},
function () {
$(this).css("background","");
}
);

Try replacing the tr:even and tr:odd selectors with tr:nth-child(even)
You should not have to use jQuery at all to apply these styles, trying using a rule with a form similar to:
tbody > tr:nth-child(even):hover {
background-color: #efefef;
}

Jquery click event on div

I have this code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
.kat1 {
background-image:url(ikoniceKategorije/07.jpg);
width:30px;
height:30px;
float:left;
}
.kat1:hover {
background-image:url(ikoniceKategorije/07h.jpg);
}
// here I have a code for .kat2,kat2 ... styles
#div {
width:220px;
height:30px;
overflow:hidden;
}
</style>
<script>
$(function() {
$('#div div').click(function() {
var elem = $(this);
var style = elem.css('background-image');
if(/h\.jpg/.test(style)) {
elem.css('background-image', style.replace(/h\.jpg/, '.jpg'));
} else {
elem.css('background-image', style.replace(/\.jpg/, 'h.jpg'));
}
});
});
</script>
</head>
<body>
<div id="div">
<div class="kat1 changing"></div>
<div class="kat2 changing"></div>
<div class="kat3 changing"></div>
<div class="kat4 changing"></div>
<div class="kat5 changing"></div>
<div class="kat6 changing"></div>
<div class="kat7 changing"></div>
</div>
</body>
</html>
I have a problem - when I click once div change bacground color but when I click second time on same icon then I cant change div background...
demo www.pluspon.com/kategorije.html

Why do you want to have this functionality in JavaScript? An other option would be to use CSS classes to simplify the process:
$(function() {
$('#div div').click(function() {
$(this).toggleClass('active');
});
});
CSS:
.kat1 {
background-image:url(ikoniceKategorije/07.jpg);
width:30px;
height:30px;
float:left;
}
.kat1:hover,
.kat1.active {
background-image:url(ikoniceKategorije/07h.jpg);
}

Develop Reference

JavaScript is the programming language of the Web.

Jquery problem animation or not animation - javascript

Related

Jquery - hover changes to click after several resizes

Can't make button color change

How do I fade in/out a background with jQuery, but not its child

Where to define hover class/behavior to override jQuery's theme CSS?

Jquery click event on div

Categories

Resources