I need to respond to a hover over a table cell. This css code works fine:
#dialog-date-picker td {
border-style: outset !important;
border : 2px solid #606060;
cursor: pointer;
...etc
}
#dialog-date-picker td:hover {
border-style: inset !important;
border : 2px solid #6060b0;
}
However, I need a more complex hover response that I can't get in css, and I've started as follows:
$('#dialog-date-picker td').hover(function () {
$(this).css('border-style', 'inset !important');
$(this).css('border', '2px solid #6060b0');
}, function() {
$(this).css('border-style', 'outset !important');
$(this).css('border', '2px solid #606060');
}
);
The jQuery equivalent works in Chrome and Opera, but not FF. Firebug shows that the code is executed, but nothing happens. Any ideas why this should be? Thanks.
EDIT
Folks - I understand that this isn't elegant, and I should be using css and JS, and adding a class, but that's not the issue. I just took a working css solution and, as a first step, just put it in the JS above. At that point I found out that the JS equivalent worked in Opera and Chrome, but not FF. Combining the two css calls, and converting 'border-style' to 'borderStyle', didn't make a difference; it still doesn't work in FF.
Is it relevant that the dialog (jQuery UI) is dynamic? I've got a table within the dialog. Thanks for all the input.
EDIT2
Simplified the code to:
$('#dialog-date-picker td').hover(
function() { $(this).css('border', '2px inset #6060b0 !important'); },
function() { $(this).css('border', '2px outset #606060 !important'); }
);
with no change (works in IE8, Opera, Chrome, Safari, but not FF 3.6 or 8.0).
EDIT3
Ok, given up on this. All the alternative (and better) stylesheet versions work in FF, so it seems a bit pointless worrying about why this particular code doesn't work in FF...
The problem is because the second css() call is overwriting the first. Try this:
$('#dialog-date-picker td').hover(
function () {
$(this).css({
'border-style': 'inset !important',
'border': '2px solid #6060b0'
});
},
function() {
$(this).css({
'border-style': 'outset !important',
'border': '2px solid #606060'
});
}
);
Example fiddle
EDIT
Here's an extra fiddle thanks to PPvG and ptriek with a much more elegant solution which uses classes and solves the issue of setting an outset border, then immediately making it solid.
Updated Fiddle
$('#dialog-date-picker td').hover(function () {
$(this).css({
'border-style' : 'inset !important',
'border' : '2px solid #6060b0'
});
}, function() {
$(this).css({
'border-style' : 'outset !important',
'border' : '2px solid #6060b0'
});
});
Thats also a little clean up in code for you too! Try not too use so many CSS functions, as your just essentially 're-dipping' when there's no reason too!
Also is your #dialog-date-picker being created by jQuery, if so you need to nest this function inside the function that creates that td.
i guess the id dialog-date-picker is created dynamically so better to use on with events mouseover and mouseout.
$('#dialog-date-picker td').on('mouseover' :
function () {
$(this).css('border-style', 'inset !important');
$(this).css('border', '2px solid #6060b0');
},
'mouseout' :function() {
$(this).css('border-style', 'outset !important');
$(this).css('border', '2px solid #606060');
}
);
You should preferably change both your CSS and JS and add a class to the TD on hover, and define this in your CSS. This reduces JS and keeps things where they belong:
http://jsfiddle.net/bDBWE/3/
$('#dialog-date-picker td').hover(function () {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
jquery css() uses inline style sets to set the property. The API it's using doesn't allow !important in the string.
See also https://bugs.webkit.org/show_bug.cgi?id=73941 for the WebKit bug on this; the existence of that bug (which they only recently fixed) is what allowed your script to work in Chrome and Safari.
Related
I'm trying to change the design of my hamburger navigation as the user scrolls. I feel I have come semi close https://jsfiddle.net/g95kk7yh/6/
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 10) {
$(".navigation").css('background', 'rgba(255, 0, 0, 0.5)');
$(".navigation span").css('background', '#bdccd4');
} else {
$(".navigation").css('background', 'transparent');
$(".navigation span").css('background', '#fff');
}
});
});
Here is what I'm trying to achieve
The main problem I'm having is assigning the correct width and height of the red box without repositioning the navigation menu as a whole.
Also is it possible to only have these changes at 600px and under (as you can see this is when the hamburger menu shows).
I have used #potatopeelings post and have changed few lines and added.
.myClass {
margin-right: -25px;
width: 85px;
height: 85px;
background-color: rgba(255, 0, 0, 0.5);
}
Fiddle: https://jsfiddle.net/moj7z2b4/2/
This covers only the 2nd part of the question (thanks #webeno and #MarcusPorter for catching that). Refer to 7urkm3n's solution for an answer that covers both parts of the question.
Instead of changing the CSS properties in your script, just add / remove a class that has the properties you need.
...
if(scroll_pos > 10) {
$(".navigation").addClass('myClass')
} else {
$(".navigation").removeClass('myClass')
}
...
Then wrap your class CSS rules with
#media screen and (max-width: 600px) {
.myClass {
...
}
.myClass span {
...
}
}
so that these rules only apply on screen size < 600px
Fiddle - https://jsfiddle.net/moj7z2b4/
I have come across this problem as well, it was when I was creating the 'preloader' thing for my website. Anyway, the way I resolved my problem was to change background-color with backgroundColor. Make sure backgroundColor isn't in quotation marks, just type it in as you would do with a variable or a function, etc.
From jQuery API Docs:
Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) and .css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }). Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name.
This code should work but I haven't tested it. I changed your .css('property', 'value') to .css({'property': 'value'});
$(document).ready(function() {
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if (scroll_pos > 10) {
$(".navigation").css({
backgroundColor: 'rgba(255, 0, 0, 0.5)'
});
$(".navigation span").css({
'background': '#bdccd4'
});
} else {
$(".navigation").css({
backgroundColor: 'transparent'
});
$(".navigation span").css({
'background': '#fff'
});
}
});
});
I'm trying to build a little effect without using any plugins/libraries besides jquery. The goal is to make it so that when the user changes the value of a box, a border appears, grows to 8px and then shrinks back to 0px. Right now I have the following shell of a code:
$('#pastebox').on('input', function() {
$("#pastebox").css("border", "solid 1px green");
});
I know that I can animate using something like the following, but I'm having trouble getting it to work:
$("#pastebox").animate({border-width: '5px'}, 1000);
I know that if I could get the previous to work, I could then do something like:
$('#pastebox').on('input', function() {
$("#pastebox").css("border", "solid 1px green");
$("#pastebox").animate({border-width: '5px'}, 1000);
$("#pastebox").animate({border-width: '0px'}, 1000);
});
What am I doing wrong?
Object keys cannot contain a minus sign (border-width) - either camelCase it, or quote it:
$('#pastebox').on('input', function() {
$("#pastebox").css("border", "solid 1px green");
$("#pastebox").animate({"border-width": '5px'}, 1000);
$("#pastebox").animate({"border-width": '0px'}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="pastebox" />
Console is always helpful.
I'm trying to learn to improve my code and not repeat myself. I'm trying to use .css() to make an aesthetic design element "flash" before disappearing. I have the result working but I am sure there is a better/shorter way to write this.
At the moment I am setting four intervals which handle changing the CSS.
setTimeout( function(){
$(outputID).css('border-right','2px solid #fff');
},500);
setTimeout( function(){
$(outputID).css('border-right','2px solid #343434');
},1000);
setTimeout( function(){
$(outputID).css('border-right','2px solid #fff');
},1500);
setTimeout( function(){
$(outputID).css('border-right','2px solid #343434');
},2000);
What would be the best way to do this, using the DRY principle? Loop through a 500 millisecond interval and then cancel based on 2000 milliseconds? Using .delay() somehow?
You can use a data-driven approach
var objA = [{
duration: 500,
style: '2px solid #fff'
}, {
duration: 1000,
style: '2px solid #343434'
}, {
duration: 1500,
style: '2px solid #fff'
}, {
duration: 2000,
style: '2px solid #343434'
}];
for (var i = 0; i < objA.length; i++) {
(function(i) {
setTimeout(function() {
$(outputID).css('border-right', objA[i].style);
}, objA[i].duration);
})(i);
}
Make sure to make a closure in the loop by using an IIFE to preserve the i variable
Pure CSS can handle this kind of task via Keyframe Animations. I created a fiddle to get you started, but it needs to be adjusted (especially as I left out vendor prefixes).
It basically boils down to this:
#keyframes borderblink {
0% {
border: 2px solid blue;
}
49% {
border: 2px solid blue;
}
50% {
border: 2px solid white;
}
100% {
border: 2px solid white;
}
}
.mybox.border-animated {
border: 2px solid blue;
animation-name: borderblink;
animation-duration: 0.4s;
animation-iteration-count: 10;
}
If you want to support browsers which do not include this feature (IE8+9, Opera Mini), you could use Modernizr for feature detection and only call your javascript solution if needed. But as it is only a visual goodie, I would probably not go that far if you don't already have Modernizr included.
To elaborate on my comment for jquery animate:
$(outputID)
.delay(500)
.animate({ borderColor: "#fff" }, 10)
.delay(500)
.animate({ borderColor: "#343434" }, 10)
.delay(500)
.animate({ borderColor: "#fff" }, 10)
.delay(500)
.animate({ borderColor: "#343434" }, 10)
You can use variables of course for delay times, the 500 matches the question timeouts and the 10 reduces the animation 'effect' so to flashes rather than pulses.
There are a lot of ways of achieving this. With "pure" JavaScript with a little bit of jQuery, you would do something like:
// flash an element and call the callback when done
var flash = function(element, cb) {
var counter = 0;
var max = 4;
var state = false;
var animate = function() {
// assume we have to css classes "off" and "on"
if (state)
element.removeClass("on").addClass("off");
else
element.removeClass("off").addClass("on");
state = !state;
counter++;
if (counter<max)
setTimeout(animate, 500);
else {
// make sure we end up in "off" state
element.removeClass("on").addClass("off");
if (cb instanceof Function) cb();
}
}
animate();
}
// use it like
flash(myElement, function () {
// we can even do stuff when flashing has stopped, how cool is that!
});
Hello if you consider best way, then according to me you can use css animation keyframes. http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
But if you want only to do the job via javascript then you can go with ammarcse' answer.
Okay, so far this works in Chrome, but not Firefox. It's pretty simple so I'm not sure what's going on. If I change .animate to .css it works perfectly (minus the animation).
$("#superfish-1 > li").hover(function() {
$(this).animate({"border-left" : "3px solid #A5D572", "margin-left" : "-2px"}, "fast");
}, function() {
$(this).animate({"border-left" : "1px solid #EFEFEF", "margin-left" : "0px"}, "fast");
});
Thanks
The second parametre to the hover() function should be the animate() function as well, not css(). If css() is meant to be there, remove its second parametre ("fast").
you can not animate color and border type by default with jquery. unless you use some plugin i would recommend that you only animate the border-width.
as mentioned by #mingos you should remove the fast parameter in the css function to.
http://jsfiddle.net/meo/Gsqre/1/
tested in Chrome. Color does not animate.
This version animates the with and the margin and it works in all browsers:
$("#superfish-1 > li").hover(function() {
$(this).animate({"border-left-width" : "3px", "margin-left" : "-2px"}, "fast");
}, function() {
$(this).css({"border-left-width" : "1px", "margin-left" : 0});
});
You can change the color separately in the css if you wish, even animate it. Or do the whole animation in CSS: http://jsfiddle.net/meo/Gsqre/3/
Okay this is how you do it. You must css the border-color first and then animate the width:
Make sure you use the borderWidth or borderLeftWidth property (without quotes) otherwise it does't work for some reason.
$("#superfish-1 > li").hover(function() {
$(this).css({"border-left" : "1px solid #A5D572"}).animate({borderLeftWidth : "3px", "margin-left" : "-2px"}, "fast");
}, function() {
$(this).animate({borderLeftWidth : "1px", "margin-left" : "0px"}, "fast").css({"border-left" : "1px solid #EFEFEF"});
});
I just want some simple links where if it's hovered over, instead of having a line appear under it suddenly, it should fade. I'm trying this, but to no avail:
$(document).ready(function(){
$('#footer a').mouseover(function(){
$(this).animate({
border-bottom: 'border-bottom: 1px solid #D8D8D8'
}, 1000, function() {
// Animation complete.
});
});
});
What should I be doing?
Thanks.
You need a few changes here, first you should animate only the color, like this:
$(function(){
$('#footer a').mouseover(function(){
$(this).animate({
borderBottomColor: '#D8D8D8'
}, 1000, function() {
});
});
});
Also, give the border an initial size so it doesn't just "appear" (when changing from 0 to 1px), like this:
#footer a { border-bottom: solid 1px transparent; }
You can see a working demo here, to make this work you need either the color plugin or jQuery UI so the colors can animate...core doesn't handle colors, or transitioning anything that's not a number.
Here's a more complete demo, probably what you're ultimately after:
$(function(){
$('#footer a').hover(function(){
$(this).animate({ borderBottomColor: '#D8D8D8' });
}, function() {
$(this).animate({ borderBottomColor: 'transparent' });
});
});