I've a input a button which have a initial background image. I tried to change its image when some condition changed with jquery .css(). It seems that it will override the button's global css in css file. How can I only change background attribute with jquery or anything else? Thanks.
JS:
if(sum>=window.start_fee){
$(".shopcart").removeAttr("disabled")
$(".shopcart").css("background", 'url(/static/images/cart2.png)')
}else{
$(".shopcart").attr("disabled","disabled")
$(".shopcart").css("background", 'url(/static/images/cart.png)')
}
css:
.shopcart{
background:url(/static/images/cart.png) no-repeat;
border:none;
background-size:100% 100%;
width:57px; height:50px;
float:right;
}
The best thing to do is create a class disabled in css, in this way you separate the presentation of logic. Sample
CSS
.shopcart{
background:url(/static/images/cart2.png) no-repeat;
border:none;
background-size:100% 100%;
width:57px; height:50px;
float:right;
}
.shopcart.disabled{
background:url(/static/images/cart.png) no-repeat;
}
In JS you just add or remove the disabled class, sample:
JS
if(sum>=window.start_fee){
$(".shopcart").removeClass("disabled");
}else{
$(".shopcart").addClass("disabled");
}
Instead of Remove attr you can use addClass and removeClass property
$(document).ready(function(){
if(sum>=window.start_fee){
$("input[type=submit]").removeClass("submitbtn");
$("input[type=submit]").addClass("submitbtnnew");
}
else{
$("input[type=submit]").addClass("submitbtn");
$("input[type=submit]").removeClass("submitbtnnew");
}
});
</script>
Apply your background image for that class
<style>
.submitbtn{
background:#000;
}
.submitbtnnew{
background:#03C;
}
</style>
Related
I did some research on here, and I left with the impression that a background image is not loaded if the associated div class is not in the HTML. This led me to believe that when using addClass() to assign a div the class with the background image, I would need to refresh the CSS to make the image load. However, it is showing up without refreshing the CSS.
Does including the class in the JavaScript cause the CSS to pre-load the image, so it is ready when the class is added? If not, why is the background image available without refreshing the CSS?
HTML
<body>
<div class="no-class"></div>
</body>
CSS
.background-image {
background-image: url('image.png');
background-size: 100% 100%;
}
.no-class {
height: 500px;
width:500px;
background-color: red;
}
JS
$(document).ready(function () {
$('.no-class').click(function() {
$('.no-class').toggleClass('background-image');
});
})
rearrange classes
.no-class {
height: 500px;
width:500px;
background-color: red;
}
.background-image {
background-image: url('image.png');
background-size: 100% 100%;
}
And be sure to include Jquery
DEMO
and if you have more than 1 element with class .no-class .. use $(this)
$(document).ready(function () {
$('.no-class').click(function() {
$(this).toggleClass('background-image');
});
})
I change background color of a button using the jQuery click function, but I want to do this without jQuery. How can I use it only with CSS? Here are my codes and jsfiddle demo below.
.colorButton{
background: blue;
color: white;
cursor: pointer;
}
<div class="buttons">
<button class="colorButton">Click me</button>
</div>
<script>
$(document).ready(function () {
$('.colorButton').click(function (){
$(this).css("background","yellow");
});
});
</script>
http://jsfiddle.net/myyhs84b/
.colorButton{
background:blue;
color:white;
cursor:pointer;
}
.colorButton:focus{
background:yellow;
}
<button class="colorButton">Click me</button>
[EDIT] okay, now pure CSS
You can do this with CSS:
.colorButton:active,
.colorButton:focus{
background:yellow;
}
But on outside click it remain the same. Because you have to add a new class or have to implement the existing code that apply the inline style to your DOM element.
The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse.
CSS
.colorButton{
background:blue;
color:white;
cursor:pointer;
}
.colorButton:focus{
background: yellow;
}
HTML
<div class="buttons">
<button class="colorButton">Click me</button>
</div>
Fiddle here
FYI
focus
Using checkbox/radio CSS hack, this could be a solution: {please don't, handling click should be done in javascript anyway}
HTML:
<div class="buttons">
<input id="rd_btn" type="radio" />
<button class="colorButton">
<label for="rd_btn">Click me</label>
</button>
</div>
CSS:
.colorButton {
background:blue;
color:white;
cursor:pointer;
}
.colorButton {
padding: 0;
}
.colorButton label {
display: block;
padding: 2px;
}
#rd_btn {
display: none;
}
#rd_btn:checked + button {
background: yellow;
}
-jsFiddle-
Since there is no click event in HTML and CSS, you can use functionality of pseudo class :checked to change something.
Just style the label as some button, than bind some click functionality in jquery.
Take a look at this exaples:
http://www.paulund.co.uk/create-flat-checkboxes
Or :active pseudo class. Example here:
http://www.paulund.co.uk/create-a-css-3d-push-button
I don't think you can do this only with CSS as there isn't anything like a "clicked" property.
Maybe :active or :hover will fit your needs.
.colorButton1:active
{
background: green;
}
.colorButton2:hover
{
background: blue;
}
http://jsfiddle.net/qbjsnp42/
The closest thing you could do is using :active or :focus but the first will only should work while you are pressing the button while the second will only work unless you don't press anywhere else
what you can do is defining a class in your CSS and then via JS add the class on click
how can changed image size in mouse
example
from
to
This is one way to do it using HTML/CSS/JQuery:
See this code in action via jsfiddle here.
THE HTML
<div id="image_frame">
<div class="shrinking_image"></div>
</div>
THE JQUERY
$(document).ready(function(){
$("#image_frame").hover(
function(){
$(this).find(".shrinking_image").addClass("image_frame_hover");
},
function(){
$(this).find(".shrinking_image").removeClass("image_frame_hover");
});
});
THE CSS
#image_frame {
width:167px; height:27px;
}
.shrinking_image {
background-image:url(http://i.stack.imgur.com/q9MCk.jpg);
background-repeat: no-repeat;
background-position:0px 0px;
overflow:hidden;
width:167px; height:27px;
}
.image_frame_hover {
overflow:hidden;
background-position:-70px 0px !important;
width: 24px !important;
}
See this code in action via jsfiddle here.
Basically, you are just using jQuery's hover() function to assign and un-assign a special css that uses the a combination of the css properties width, height and background-position to show only the parts of the photo you care about.
Hope this helps!
i am totally new in web design, and i am right now struggling with creating part of my website, i need to somehow make this happen:
When PART of the BODY BACKGROUND is HOVERED, make the background change to "B", and when the mouse is not over that part, I need it to change back to background "A".
I have seen some examples here but as i am a beginner, i have no idea how to use javascript, if you could please give me some light here, either on pure CSS or on how to apply javascript.
This is accomplished very easily using a third party javascript library called JQuery http://jquery.com, you can see a working example here: http://jsfiddle.net/bbp8G/
$(document).ready(function(){
$("#hover").mouseenter(function(){
$(this).css("background","#009900");
}).mouseleave(function(){
$(this).css("background","#ffffff");
});
});
Here's the easiest way I know how to do what you've described...
<!-- POSITION THIS DIV WHEREVER YOU WANT THE
USER TO HOVER SO THAT THE BACKGROUND WILL CHANGE -->
<div id="hover">
</div>
<!-- PUT THIS CODE IN YOUR <HEAD> -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" />
<style>
#hover { width: 200px; height: 200px; position: relative; top: 200px; background: green; }
.myNewBackround { background-color: red; }
</style>
<script>
$(document).ready(function() {
// when the #hover DIV is hovered, change the background of the body
$('#hover').hover(function() {
$('body').addClass('myNewBackground');
});
});
</script>
Here's a JS FIDDLE:
http://jsfiddle.net/ZKaJn/
Or you can do it with pure CSS
<div id="left"> </div>
<div id="right"> </div>
And the CSS part:
#left
{
background-color:#000;
float:left;
width:50%;
height:200px;
}
#right
{
background-color:#FF0;
float:right;
width:50%;
height:200px;
}
#right:hover
{
background-color:#00F;
}
#left:hover
{
background-color:#F00;
}
You can replace the div's and values with whatever you like, the main part is the #right:hover and #left:hover
Actually with just css it is not possible to change the background of the body when hovering a DOM element. This is because CSS does not allow you (yet) to travel up the DOM tree (select a parent), only down (select a child).
That being said, it is however possible to mimic the effect, and it is even quiet easy if it is the body background you want to change. You can lay a pseudo element with a background on top of your body background, and underneath the actual content. This way it looks as if the body background has changed.
The css to achieve this would look something like this:
.hover-me:hover:after {
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
background: url(http://placekitten.com/600/300) center center;
background-size: cover;
z-index: -1;
}
And a small fiddle to demonstrate: http://jsfiddle.net/3dwzt/
Should be compatible with IE8 and up
i have a global class for an html
<div class="wrapper">
<div class="content"></div>
</div>
and the CSS is
.div { width:auto; display:block }
.content { width:100px; height:50px; }
On the .content div, i do not need "display:block" class. But Its applying on Runtime.
i Have given dispay:inherit; but it doesn't work. Is there any Other Way for Removing the Display Style ?
.div { width:auto; display:block }
this might not be working....for the above provided html cos there is not div named class
what you can do is
.content { width:100px; height:50px; display:inline}
.content { width:100px; height:50px; display: inline; }
or another display property
You can just do:
.content { width:100px; height:50px; display:inline }
//or display:none or whatever your standard default is
inline is what the value is by default, see MDN Ref.