I have a input of type 'button' with a background and was wondering how I would grey out the background through javascript. The css for it looks like this:
background:url(../img/cameraPic.png) no-repeat center;
When someone touches it I want it to respond by greying out while it's being held down. The skeleton for such a function would look like this but I'm not sure how to change the color when it has background.
$("#myButton").bind('touchstart', function(e){
//...What to put here?
});
Does anybody have any ideas? Should I use a grayscale() css property or just make a new image and replace the background with the new image every time its being pressed?
Something like this? Example
$("button").bind('touchstart', function(e){
e.preventDefault();
$(this).css({
'background-color':'grey',
opacity:0.3
});
});
$("button").bind('touchend', function(e){
$(this).css({
'background-color':'transparent',
opacity:1
});
});
Related
I run a free resource site providing tileable/seamless patterns and I'm trying to add a button (with a script) in my posts which visitors can click to change the background image of the page so that they can preview the pattern in action. So for instance on this post (http://tileablepatterns.com/denim-pattern/) I'd want the user to be able to click on a button/link which would change the background image from the grey background to the denim pattern.
How do I go about doing this? Also, preferably I'd want it to be a simple script that I can just insert into the post instead of having to edit theme files.
Thanks a lot for any help!
Give your button an ID, for example: id="button" and then the following should work:
$('#button').click(function(){ $('body').css('background', 'url(http://tileablepatterns.com/wp-content/uploads/2014/09/Denim.jpg) repeat 0 0'); });
So basically I tried this <button onclick="document.body.style.background = 'url(http://tileablepatterns.com/wp-content/uploads/2014/09/Denim.jpg) no-repeat center center'">change bg</button>
And it adds two white lines to the existing background, one close to the top and one close to the bottom but it's not changing the entire background. I think there's a wrapper over the background or something but I don't know how to change the code so that it changes the entire page's background including the wrapper?
If I were to do this using jQuery, I'd take a modular approach and one that's easy to template in HTML and still works when Javascript fails.
Start with some basic markup (I'm using Baconmockup as a sample image):
<div id="page" class="container">
<!-- Note that we're defining both href as well as two html5 attributes called data-src and data-background-change (data-background-change is what indicates that this particular link has some special functionality and data-src is the the source for the script below) -->
<a href="https://s3.amazonaws.com/baconmockup/img/baconmockup-470-300.jpg" data-src="https://s3.amazonaws.com/baconmockup/img/baconmockup-470-300.jpg" data-background-change>Click me</a>
</div>
And a bit of CSS:
// The container is your page, and the background we'll change in this example.
div.container {
background: red;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
And finally in main.js:
$(function () {
$.fn.changeBackgroundOnClick = function () {
var target = this[0];
var image = target.getAttribute('data-src');
$(target).on('click', function(e) {
// If JS is enabled, the click will prevent the browser from navigating to the image.
e.preventDefault();
$('#page').css({
'background-image' : 'url(' + image + ')',
'background-size' : 'cover',
'background-repeat' : 'no-repeat'
});
});
return this;
}
// We can now iterate over every element with data-background-change to give it the functionality you need. No code needs to be repeated. :)
$('a[data-background-change]').each(function () {
$(this).changeBackgroundOnClick();
});
});
Good luck.
Check out this fiddle: http://jsfiddle.net/Nyyby/31/
I want to view disabled button as:
The one marked with red is a disabled button and the green one is enabled.
I am trying to apply CSS to do the same as follows:
$(document).ready(function () {
$('#btnSearch').attr("disabled", true);
$("#btnSearch").css({ 'background': "#grey" });
});
But its not showing up as mentioned in the image.
Its looking for me like this:
Which CSS attribute do I need to use for disabled buttons as above (marked in red)?
JSFIDDLE:
http://jsfiddle.net/54qJx/
Try out with prop()
$(document).ready(function () {
$('#btnSearch').prop("disabled", true);
$("#btnSearch").css({ 'background': "gray" });
});
#BearGrylls
Check this updated fiddle demo, its working as per your requirement.
css function should be like this to work.
$(document).ready(function () {
$('#btnSearch').prop("disabled", true);
$("#btnSearch").css('background-color','grey');
});
You can also use attr, but I prefer prop
$(document).ready(function () {
$('#btnSearch').attr("disabled", true);
$("#btnSearch").css('background-color','#ccc');
});
you can simply disable a button by this
$('#btnSearch').prop('disabled', true);
also change the background color with
$('#btnSearch').css('background-color', 'gray');
check the .css() API for usage.
btw when using color name like gray, you don't need to put a '#' ahead of the name, that's why your setting of background color doesn't work.
You can use opacity css for graying out disabled button :
$('#btnSearch').prop('disabled',true).css('opacity','0.5');
Working Demo
You can use the CSS3 :disabled selector, if you want to style it with CSS instead of Javascript:
#btnSearch:disabled {
background-color: grey !important;
}
edit:
Your problem is, that your button is styled with an inline style-tag. It's generally a bad idea to use these, as it makes maintaining larger pages a nightmare. Read this article for more information: Best Practices: Avoid Inline Styles for CSS.
See this fiddle for an example of how to do it anyways. What I'm doing here is using this trick to override the inline style properties.
Setting the background color won't grey won't make the button look like the two you have circled, as it looks like there is more CSS at work then simply setting the background to grey.
you can use
$("#btnSearch").css({ "element": "new value" });
But you might need to call it 4 or 5 times to get the desired effect with different elements.
Otherwise you can use
$("#btnSearch").addClass("disabled")
where disabled is a CSS class you've created with the correct styling (background grey, text colour darker etc). At a guess the two red circled buttons have had a class added to them to make them look disabled, so you can just add that class to the button you want to disable.
if you want to use "#" with color. than you must use color HEX value not the name
Error in line $("#btnSearch").css({ 'background': "#gray" });
Try this
Your Button
<button id="btnSearch" onclick="TeacherData_OnSearch()" style="background-color: #249FDA; color: white; height: 22px; width: 45px; border-radius: 4px;">Search</button>
Script
$(document).ready(function () {
$('#btnSearch').attr("disabled", true);
$('#btnSearch').css("background-color", '');
$("#btnSearch").css({
'background-color': "grey"
});
})
DEMO
set a css class
.bg1 {background:#ddd}
then add it on button
$(document).ready(function () {
$('#btnSearch').attr("disabled", true);
$("#btnSearch").addClass("bg1");
});
I am trying to show an overlay <div> on image when mouse enters & hide when mouse leaves.
I am using position:relative; with position:absolute; to do this.My code is working fine in chrome & firefox but in IE 9(i have only this one,so not sure about other versions) it shows overlay image when mouse enter on image but it doesn't remove it when mouse leave the image.
So basically the second part of the .hove() not executing.
Here is my code http://jsfiddle.net/AYaJn/.
HTML
<img id="testimage" src="http://www.dothetest.co.uk/images/do-test.gif" >
CSS
img#testimage{
border:1px solid #000;
}
JS
jQuery(document).ready(function($){
$("img#testimage").hover(function(event){
$(this).wrap("<div id='testdiv'></div>");
$("#testdiv").css("position","relative");
var imageWrapperInner="<div class='imageWrapperInnerDiv' style='position:absolute;top:0px;left:0px;background-color:#000;width:100%;height:30px;display:none;'></div>";
$("#testdiv").append(imageWrapperInner);
$(".imageWrapperInnerDiv").slideDown("fast");
},function(event){
$(".imageWrapperInnerDiv").remove();
$(this).unwrap();
});
});
Wrapping and unwrapping an element on every mouseenter / leave seems like a generally bad idea, and it's also the cause of the issue with IE, wrapping the element that has the event handler bound with another element etc. Try something like this :
jQuery(function($){
$("#testimage").on({
mouseenter: function(event){
var imageWrapperInner = $('<div />', {'class': 'imageWrapperInnerDiv'});
$('body').append(imageWrapperInner);
imageWrapperInner.slideDown("fast")
},
mouseleave: function(event){
$(".imageWrapperInnerDiv").remove();
}
});
});
FIDDLE
all.
I have.
<div id="imagecontainer" class="header-image-container"> </div>
BG image are specified in css for ich page according on parent class.
.category-1 #imagecontainer {
background: url(_/images/1.jpg);
}
And i have menu. I want to chage BG image ommouse over, and on mouse out return image specified in css for this page according on parent class. I think it could be real using JQuery. For example we have opened category-3 page and move mouse on category-1 menu item and see catefory-1 BG image in #imagecontainer, and then we move mouse out see again category-3 BG image.
I think this will do you want:
$('#menu').mouseenter(function() {
$('#imagecontainer').css({'background':'blue'});
}).mouseleave(function() {
$('#imagecontainer').removeAttr('style');
})
You can see it in action here: http://jsfiddle.net/Cdzk8/
If you have other inline styles on your imagecontainer, it will also remove those on mouseleave. In that case, you will have do something more like what mblase75 is recommending.
Store the current background image as data before swapping it out, and retrieve it from there when you want to swap it back.
$('#imagecontainer').mouseover(function() {
$(this).data('bgimg') = $(this).css('background-image');
$(this).css('background-image','url(my/new/url.jpg)');
}).mouseout(function() {
$(this).css('background-image', $(this).data('bgimg'));
});
I am using a giant sprite for an element that changes different states at hover. I was wondering if there was a way to have the hover state image fade in? You can view my code live - here
Here's my code for the hover state for each span
$(".hf-1").hover(
function () {
$(this).css("background-position","0 -121px");
$(".hf-2").css("background-position","0 -242px");
$(".hf-3").css("background-position","0 -363px");
$(".hf-4").css("background-position","0 -484px");
},
function () {}
);
I am using Jquery to do the background image hover instead of basic css cause i have multiple hovers that need to be reset.
Thanks for any help.
Use something like this:
$(this).animate({"background-position": "0 -121px"}, "slow");
Rinse and repeat for the other three.
You would need to double-stack the backgrounds and fade from to the other. Won't be able to fade within the same container.
Or you can just use jquery's native fadeIn API.
$(this).click(function () {
$("this").fadeIn("slow");
});