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');
});
Related
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
I tried to find the easiest way to set the active class to the active Navbar point.
My Code looks like this:
function setActive(i) {
$(document).ready.getElementById(i).addClass("active");
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/main.js"></script>
<script>
setActive("contact");
</script>
</head>
<body>
<a id="contact" class="nav-link" href="">Example</a>
</body>
Why is this not working?
Thanks for the help!
In jQuery, you use $().addClass(). You should call the function inside $(document).ready(), not have the function run only if the document has loaded.
In your setActive function, it looks like you are mixing up Javascript and jQuery. You should only use one or the other.
$(document).ready.getElementById(i).addClass("active");//this line is a syntax error
.active{
color: green;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function setActive(i) {
$('#'+i).addClass("active");
}
$(document).ready(function(){
setActive("contact");
});
</script>
</head>
<body>
<a id="contact" class="nav-link" href="">Example</a>
</body>
With pure Javascript, you can use Element.classList.add() to add a class to an element.
.active{
color: green;
}
<head>
<script>
function setActive(i) {
document.getElementById(i).classList.add("active");
}
document.addEventListener("DOMContentLoaded", function(){
setActive("contact");
});
</script>
</head>
<body>
<a id="contact" class="nav-link" href="">Example</a>
</body>
To set the contact active you need to this it this way. You already have jQuery in you code so it is more easy.
function setActive(tag){
//This bloc is optinal. It will remove active class from all other elements. You may not need that
$('body a').removeClass('active');
//End optional block
$(`#${tag}`).addClass('active');
}
$(document).ready(function(){
setActive('contact')
});
please try:
function addActive(el){
document.querySelector(el).classList.add("active");
}
You should call setActive("content") inside main.js inside a ready function
You are also missing the id selector (#) in your jQuery selector
$( document ).ready(function() {
setActive("contact");
});
function setActive(id){
$(`#${id}`).addClass("active");
}
.active{
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="contact" class="nav-link" href="">Example</a>
Try this
function setActive(i) {
document.getElementById(i).classList.add("active");
}
function setDisable(i) {
document.getElementById(i).classList.remove("active");
}
.active{
background-color: yellow;
color: red;
}
<html>
<body>
<button type="button" onclick="setActive('demo')">
Activate
</button>
<button type="button" onclick="setDisable('demo')">
Disable
</button>
<p id="demo">Here</p>
</body>
</html>
I have two simple script html:
<html>
<body>
<style>
.myBtn{
display: none
}
.myBtnReg{
display: block
}
</style>
<button class="myBtnReg" id="btn1" >Click Me!</button>
<script src="jquery-1.11.2.min.js"></script>
<script src="js.js"></script>
</body>
</html>
and javascript:
$(function(){
$("button").mouseenter(function(){
$(this).attr("class", "myBtn");
});
$("button").mouseleave(function(){
$(this).attr("class", "myBtnReg");
});
});
I'm trying to make an effect where the button changes class when ever the mouse enters and change it back when the mouse leaves, the code above doesn't seem to work properly, when I put my mouse over the button it flickers, so I assume I changes class constantly for some reason.
You can put button inside div and then toggleClass of button when you hover over div (you also need to set fixed height on div)
$('div').hover(function() {
$(this).find('button').toggleClass('myBtn');
});
div {
height: 50px;
}
.myBtn {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class="myBtnReg" id="btn1">Click Me!</button>
</div>
your style should be like
.myBtn{
background-color:RED;
}
.myBtnReg{
background-color:Green;
}
your total html is like this
<html>
<body>
<style>
.myBtn{
background-color:RED;
}
.myBtnReg{
background-color:Green;
}
</style>
<button class="myBtnReg" id="btn1" >Click Me!</button>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script src="js.js"></script>
</body>
</html>
I take a script from jsfiddle, and obviously it work, but when i try to run it locally, it stops to work. I read in another question that to use jsfiddle code, I need to put my script into:
$(document).ready(function() {
});
I do it for the following code, but it doesn't work even. Can someone please help me?
<html>
<head>
<style type="text/css">
li {
border: 1px solid #ccc;
margin-bottom:3px;
padding: 2px 5px;
}
button {
margin-left: 10px
}
</style>
<script type=”text/javascript”>
$(document).ready(function() {
$('#btnName').click(function(){
var text = $('#inputName').val() + '<button>x</button>';
if(text.length){
$('<li />', {html: text}).appendTo('ul.justList')
}
});
$('ul').on('click','button' , function(el){
$(this).parent().remove()
});
});
</script>
</head>
<body>
<input type="test" id="inputName" />
<button id="btnName">Add</button>
<ul class="justList"></ul>
</body>
</html>
Two reasons:
Because you haven't included jQuery on the page. You need
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
somewhere before your script (with that path or some other valid path to jQuery).
The quotes here
<script type=”text/javascript”>
are fancy quotes. They must be normal quotes. Or, best practice, just don't include the type at all; JavaScript is the default.
It's also worth formatting your code in a reasonable, consistent way.
E.g.:
<html>
<head>
<style type="text/css">
li {
border: 1px solid #ccc;
margin-bottom:3px;
padding: 2px 5px;
}
button {
margin-left: 10px
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(document).ready(function() {
$('#btnName').click(function() {
var text = $('#inputName').val() + '<button>x</button>';
if (text.length) {
$('<li />', {
html: text
}).appendTo('ul.justList')
}
});
$('ul').on('click', 'button', function(el) {
$(this).parent().remove()
});
});
</script>
</head>
<body>
<input type="test" id="inputName" />
<button id="btnName">Add</button>
<ul class="justList"></ul>
</body>
</html>
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;
}