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
Related
I'm trying to toggle between div .cam1 and div .cam2, but nothing is working, heres the code;
HTML:
<div class="cam1"></div>
<div class="cam2"></div>
CSS:
.cam1 {
position:absolute;
height:100%;
width:100%;
background-color:red;
}
.cam2 {
position:absolute;
height:100%
width:100%
background-color:blue;
}
JS:
$('.cam2').hide();
$('.cam1, .cam2').on('click',
function()
{
$('.cam1, .cam2').toggle()
}
);
$(document).read(main)
Your dom elements are not loaded when you are trying to hide and bind the event to them. You need to wrap the code in DOM ready event:
$(function(){
$('.cam2').hide();
$('.cam1, .cam2').on('click',function(){
$('.cam1, .cam2').toggle();
});
});
Demo
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};
");
I'm working on a webpage that has a "Lower Lights" function but the code I have now has a few problems.
The first problem is that for some reason instead of the normal mouse pointer "arrow" it changes to the text select "I" when over the element and its confusing because the user doesn't know its clickable. I've tried changing the tags around it but nothing seems to help.
My second problem is I can't get the text to Dynamically change AND still function. I need it to cycle through "Light: High" > "Light: Medium" > "Light: Low" but with the script I'm using now that seems impossible.
Here is the code that I'm using. Hopefully someone can point out what I'm doing wrong or point me in the right direction.
Notes: The goal of this was to be as simple and light weight HTML5 as possible. If there is an easier, less code, more light weight, option please let me know. Also I'm not opposed to using jQuery if it makes things more simple but I'm completely lost on that front.
If anymore information is needed please let me know.
<html>
<!-- This script handles the "Lower Lights-->
<script>
$(document).ready(function(){
$("#the_lights").fadeTo(1,0);
$("#turnoff").click(function () {
$("#the_lights").css({'display' : 'block'});
$("#the_lights").fadeTo("slow",1);
});
$("#soft").click(function () {
document.getElementById("the_lights").style.display="block";
$("#the_lights").fadeTo("slow",0.8);
});
$("#turnon").click(function () {
document.getElementById("the_lights").style.display="block";
$("#the_lights").fadeTo("slow",0);
});
});
</script>
<style>
#the_lights{
background-color:#000;
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
display:none;
}
#standout{
padding:5px;
background-color:black;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:1000;
}
</style>
<div id ="standout">
<font color="white">
<div id = "turnoff">Lights: Low</div>
<div id = "soft">Lights: Medium</div>
<div id = "turnon">Lights: High</div>
</font>
</div>
<div id="the_lights"></div>
</html>
Is this what you want? Your divs are not links so you need to use the CSS cursor property. cursor:pointer so that it appears clickable. Start out with the first div visible and the other 2 hidden with the hidden CSS class created. I assigned the div id's as numbers. If you actually want divs to use to cycle with, then the code below should work.
example here JSFIDDLE
The jQuery
$(document).ready(function(){
$("#the_lights").fadeTo(1,0);
$(document).on("click","div.lights",function () {
var divId = $(this).attr("id");
$(this).hide();
$("#" + divId).show();
$("#the_lights").css({'display' : 'block'});
if(divId == 1){
$("#2").show();
$("#1").hide();
$("#the_lights").fadeTo("slow",0.8);
}else if(divId == 2){
$("#2").hide();
$("#3").show();
$("#the_lights").fadeTo("slow",1);
}else if(divId == 3){
$("#3").hide();
$("#1").show();
$("#the_lights").fadeTo("slow",0);
}
});
});
The CSS
#the_lights{
background-color:#000;
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
}
#standout{
padding:5px;
background-color:black;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:1000;
}
.lights{
cursor:pointer;
}
.hidden{
display:none;
}
The HTML
<div id ="standout">
<font color="white">
<div class='lights' id = "1">Lights: High</div>
<div class='lights hidden' id = "2">Lights: Medium</div>
<div class='lights hidden' id = "3">Lights: Low</div>
</font>
</div>
<div id="the_lights"></div>
The fiddle
http://jsfiddle.net/gE8VZ/
First for the UI you can change the mouse pointer using CSS cursor property: cursor:pointer; to let the user know it's clickable. Then you can also set an indicator to the current active lights by adding a class to change the styling.
You also don't need to set the display property everytime, "#the_lights" is a <div> element so it has a default block display. And trim down your code to something like this:
$(document).ready(function () {
var lights = $("#the_lights");
lights.fadeTo(1, 0);
$('#standout div').click(function(){
$(this).addClass('active').siblings().removeClass('active');
if($(this).is('#turnoff')){
lights.fadeTo("slow", 1);
}else if($(this).is('#soft')){
lights.fadeTo("slow", 0.8);
}else if($(this).is('#turnon')){
lights.fadeTo("slow", 0);
}
});
});
See this jsfiddle.
I'm not quite sure what you mean by: I need it to cycle through "Light: High" > "Light: Medium" > "Light: Low" but I think a <select> element is a good way to do this. See this jsfiddle.
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>
I have a link and when user hover mouse over it, it should display a box (div) under the link. The box should overlay whatever is under it. How can I do it using css or javascript?
You have an absolutely positioned div that is hidden, and a child of the link. Then, when you hover over the link, you should unhide the div. I can't provide full CSS, and I haven't tested this, but that should get you started. You'll have to play around with the positioning and sizes.
Somewhere<div class="desc">This is hidden.</div>
a.special { position:relative; }
a.special div.desc { background-color:white; display:none; position:absolute; z-index:100; }
a.special:hover div.desc { display:block; }
This would be the pure-CSS way.
I have created a sample here. You can modify from there to suit your needs.
<div class="hover">Hover here</div>
<div class="overlay" style="visibility:hidden">
<img src="http://www.google.com/images/logos/ps_logo2.png" alt="google" />
</div>
$(document).ready(function()
{
$("div.hover").mouseover(function ()
{
$(this).css('cursor', 'pointer');
$("div.overlay").css('visibility','visible');
});
$("div.hover").mouseout(function ()
{
$(this).css('cursor', 'default');
$("div.overlay").css('visibility','hidden');
});
});
$("#id").mouseover(function(){
$("a[rel='#petrol']").overlay().load();
});
$("#id").mouseout(function(){
$("a[rel='#petrol']").overlay().close();
});