I have this code.
CSS
body {
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
}
.slidingDiv {
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}
.show_hide {
display:none;
}
HTML
Show/hide
<br />
<div class="slidingDiv">
Fill this space with really interesting content.
hide
</div>
JS
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
Someone tell me if its possible to add in this jquery function that if i click on it, at the same time to show/hide a new div, change a class to an tag and remove another class from another tag? How can i do it?
Thanks.
yes you can, take a look of the method addClass and also of the removeClass.
remove: jQuery('element').removeClass('class'); reference
add: jQuery('element').addClass('class'); reference
And you can use toggleClass to switch.
toggle: jQuery('element').toggleClass('class otherClass'); reference
Add class:
$('selector').addClass('className');
Remove class:
$('selector').removeClass('className');
yes of course you can add or remove classes
<script type="text/javascript">
$("#ButtonId").click(function () {
$('#itemid').removeClass('classname');
$('#itemid').addClass('classname');
});
</script>
Related
This is frustrating and I can't figure this out.
I just need to change/toggle back/foreground color
for the entire body when user clicks on a link, 'theme'.
Following is my html file.
...
<style>
highlight {
background-color: black;
color: white;
}
</style>
<script>
$(document).ready(function () {
$('.theme').on('click', function () {
$(document.body).toggleClass("highlight");
//$(document.body).css({"background-color": "black"});
});
});
</script>
When I use $().css({...}), it works but when I try to use
class to be able to toggle, it doesn't. Please help.
Agree with Rayon. "highlight" in the style is not a class if missing the period in front. jQuery is not able to toggle the "highlight" class since there's no "highlight" class to toggle. The code works here: http://liveweave.com/T6c7Mz
change the following line
$(document.body).toggleClass("highlight");
with
$("body").toggleClass("highlight");
This will work
HTML
Click Me
CSS
body { background-color:red; }
.highlight
{
background-color:yellow;
}
JQUERY
$("#theme").click(function() {
$("body").toggleClass("highlight");
});
Here is the working code
http://jsfiddle.net/CLwE5/119/
When I click on it changes background. It works fine. But what if I want to click on it again to restore the original background? I have this code:
jQuery(document).ready(function($) {
$(".select").on("click", function () {
$(this).css("background-image", "url(images/selected.png)");
});
});
Here is jsfiddle EXAMPLE
Basically when I click on the div it changes the background, which is fine. But I want to have ability to click on it again to restore the original background.
It will be an alternative solution for tick box, but just for demo purposes.
Thanks
JS
replace
$(this).css("background-image", "url(images/selected.png)");
with
$(this).toggleClass("active");
Style
#multiselect .active {
background-image: url('...');
}
Fiddle http://jsfiddle.net/09xgrhxo/4/
Instead of using .css() to change the background-image I would add a class in your CSS and use .toggleClass().
Also be aware that simply adding a class will not be specific enough because your css is using:
#multiselect .select
you're going to have to target the class you add as a child of #multiselect:
#multiselect .change
CSS
#multiselect .change{
background-image: url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)
}
JS
$(".select").on("click", function () {
$(this).toggleClass("change");
});
FIDDLE
You could use data-* attribute.
$('.select').attr('data-img', $('.select').css('background-image'));
$(".select").on("click", function() {
$(this).css("background-image", ($(this).css('background-image') == $(this).data('img')) ? "url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)" : $(this).data('img'));
});
#multiselect .select {
background: url(http://t0.gstatic.com/images?q=tbn:ANd9GcQF_ErOlc78eOGZaEWb-dwPkrv2uyAoKx0Pbn3-e0tAZoUDSQRCsA) center;
width: 250px;
height: 100px;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="multiselect">
<div class="select">Option1</div>
<div class="select">Option2</div>
<div class="select">Option3</div>
</div>
Instead of writing background-img url in javascrpt, I would suggest to create two classes having same properties but different background-img url which you want to toggle. so here we will be toggling class (ultimately background-img) in javascript.
see jsfiddle [example][1]
[1]: http://jsfiddle.net/09xgrhxo/13/
I'm still a bit of a jQuery noob. I'm creating a fitness website where a user can hover over different body parts which then highlight a different colour. I want all divs with class 'arms' to turn red when a user hovers ONE of the arms (ids "leftarm" and "rightarm") but at the moment, nothing happens.
Any help would be appreciated :)
HTML
<div id="muscleStructure">
<div class="arms" id="leftarm">
</div>
<div class="arms" id="rightarm">
</div>
</div>
CSS
#muscleStructure{
position:relative;
width:150px;
}
.arms{
height:150px;
width:25px;
background:#CF6;
position:absolute;
top:15px;
cursor:pointer;
}
#rightarm{
right:0px;
}
#leftarm{
left:0px;
}
Javascript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
$(".arms").hover(function(){
$(".arms").css("background","#F00");
},function(){
$(".arms").css("background","#CF6");
});
</script>
do like this otherwise all the elements with class arms backgroung color will get changed:
$(".arms").hover(function(){
$(this).css("background","#F00");
},function(){
$(this).css("background","#CF6");
});
also wrap it in $(document).ready()
$(document).ready(function(){
//your code here
});
UPDATED:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$(".arms").hover(function(){
$(this).css("background","#F00");
},function(){
$(this).css("background","#CF6");
});
});
</script>
Change the code like this:
WORKING FIDDLE DEMO
Try this:
$(".arms").hover(function(){
$(this).css("background","#F00"); // $(this) instead $('.arms')
},function(){
$(this).css("background","#CF6"); // $(this) instead $('.arms')
});
You're applying css to all elements in the DOM which are having class .arms, Target the current element which is hovered and you will see the desired effect.
Fiddle
Here's the issue:
I want to be able to turn "on and off" the grid on this html table. I'm not sure why the css is not taking over other than the original css I have for the table isn't allowed to change.
Here's the fiddle
Here's the css:
td{ width:15px; height:15px; font-size: 10px; text-align:center; vertical-align:middle; border-style:inset; text-overflow:ellipsis; white-space: nowrap; z-index:-1;}
and here's the jquery:
$('#hideGrid').click(function(){
$('#tab td').css({ 'border-style': 'none !important'});
});
$('#showGrid').click(function(){
$('#tab.td').css({'border-style': 'inset !important'});
});
Any advice on how to get the css with the button to override the declared original css or explain why this method is not working?
Thanks!
Use CSS class it is fatser than .css(). Aslo not that in you fiddle you have not set ID of table.
HTML
<table id="tab">
CSS, Here created a new class
td.no-border {
border-style:none;
}
JS
$('#hideGrid').click(function () {
$('#tab td').addClass('no-border'); //Added class
});
$('#showGrid').click(function () {
$('#tab td').removeClass('no-border'); //Removed class
});
DEMO
works now:
http://jsfiddle.net/Nez7V/2/
your selector for the table td's was wrong:
$(document).ready(function(){
var tableTds = $('table td');
$('#hideGrid').click(function(){
tableTds.css('border-style', 'none');
});
$('#showGrid').click(function(){
tableTds.css('border-style', 'inset');
});
});
however, you can use the jquery function elem.css(attribute, value) if you only want to change one css-attribute.
I am making a html forum and am using javascript to change the colour of the forum, I have three divs, one is blue, green and red.
When each div is clicked, the javascript will change the colour of the elements.
I would like to change the colour of the submit button's focus with the .css() function in javascript, but the focus part doesn't work.
Here is my javascript code:
$("#green").click(function() {
$(".mailheader").css("background","#a3d300");
$(".submit").css("background","#a3d300");
$(".submit:focus").css("background","#98cf00");
});
$("#blue").click(function() {
$(".mailheader").css("background","#00b4ff");
$(".submit").css("background","#00b4ff");
$(".submit:focus").css("background","#04a6e9");
});
$("#red").click(function() {
$(".mailheader").css("background","#ff0000");
$(".submit").css("background","#ff0000");
$(".submit:focus").css("background","#ea0202");
});
So I have tried $(".submit:focus").css("background","#ea0202"); for chaning the background of the focus, but it doesn't work. anyone know how to fix this? thanks
Check this
DEMO
HTML
<div class="mailheader"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="red"></div>
<input type="button" value="submit" class="submit" />
CSS
#green, #red, #blue {
height:50px;
width:100px;
}
#green {
background-color:green;
}
#red {
background-color:red;
}
#blue {
background-color:blue;
}
jQuery
$("#green").click(function () {
$(".mailheader").css("background", "#a3d300");
$(".submit").css("background", "#a3d300");
$(".submit").focus(function () {
$(".submit").css("background", "#04a6e9");
})
});
$("#blue").click(function () {
$(".mailheader").css("background", "#00b4ff");
$(".submit").css("background", "#00b4ff");
$(".submit").focus(function () {
$(".submit").css("background", "#ea0202");
})
});
$("#red").click(function () {
$(".mailheader").css("background", "#ff0000");
$(".submit").css("background", "#ff0000");
$(".submit").focus(function () {
$(".submit").css("background", "#98cf00");
})
});
You are setting styles directly on the element. Why not set a css class on the elements and handle all the changes via css. That is much cleaner and easier to use.
eg. when '#green' is clicked add a class 'Green' to the submit button. (see http://api.jquery.com/addClass/ ) (be sure to remove the other classes)
Then in css you can set #MySubmitButton.Green{.. your green styles..} and use all the pseudo css classes you like. Things like #MySubmitButton.Green:hover {color:#FF00FF;}
Hope this helps...
jQuery can't change pseudo-elements' style
Fix (I used the .html() function for the :focus's style, using a <style> tag in the body or elsewhere):
<script>
...
$(".submit").css("background","#ff0000");
$("body style.changeColor").html("
.submit:focus {background: #ea0202};
");
...
</script>
<body>
<style class="changeColor">
</style>
</body>
And I were you, I rather change all other .css() functions into text inside the .html() string.
$("body style.changeColor").html("
...
.submit {background: #ff0000};
.submit:focus {background: #ea0202};
");