JQuery & Browser Compatibility regarding :focus - javascript

Ok it seems ive stumbled on another JQuery problem but i think this is more off a browser problem. The code below seems to work fine in All browsers apart from IE7 & Opera
function inputs() {
$('#search').css({opacity: .25}).hoverIntent( function() {
$(this).stop(true,true).animate({opacity: 1}, 500 );
},
function() {
if(!$('#mod_search_searchword').is(':focus') ) {
$('#search').stop().delay(500).animate({opacity: .25}, 500 );
}
}
);
$('#search').focusout(function(){$(this).stop(true,true).animate({opacity: .25}, 500 );});
}
The effect is simple... I just want it so that once the search input field is hovered to raise its opacity then when its hovered out to revert back to original opacity, but if the input field is active to not execute the hoverout till they focus out. But for some reason :focus doesnt seem to be recognised by opera or IE7. Is there a work around?

I did not find the :focus selector in the latest jQuery docs.
You have to extend jQuery to use this feature.Answered here

Try this out.
setTimeout(function() { document.getElementById('mod_search_searchword').focus(); }, 10);
or you can also use :active

Related

setInterval not working in Opera

I am trying to make an element blink (by toggeling visibility of the element) but its not working in Opera for whatever reason. Works fine in Firefox and Chrome.
Here's a fiddle with a working sample: http://jsfiddle.net/UDWkK/2/
I don't think I have made any obvious errors.
Tested in Opera 12
Code:
var blinker;
function blink(elem) {
clearInterval(blinker);
blinker = setInterval(function() {
if ($(elem).css('visibility') === 'hidden'){
$(elem).css('visibility', 'visible');
} else {
$(elem).css('visibility', 'hidden');
}
}, 500);
}
As #nevermind noted in the comments above the problem is not with Opera. The problem is with the jsFiddle iframes. Note that jsFiddle is still in alpha stage. Hence there are bound to be some quirks. Hopefully the developers will fix it soon.
Nevertheless the code you provided doesn't really need jQuery, and setInterval works perfectly fine in Opera 12. For example this is what I did, and it blinks away nicely: http://jsfiddle.net/XwEhj/
I think you are in a corner buggy case.
When it's comes to user interface, it's not a good practice to rely on the state of the graphic objects to find out the state of the view. In other terms, you don't want to "read" the state of the view in the HTML elements, but rather in a variable or a set of variables called a view model.
I suggest that you rewrite your code this way, and I think there's a good chance to work around the bug:
var blinker;
function blink(elem) {
clearInterval(blinker);
var visible = false;
blinker = setInterval(function() {
visible = !visible;
$(elem).css('visibility', visible ? 'visible' : 'hidden');
}, 500);
}

Javascript hide/show toggle works both ways in Opera, but only one way in other browsers

I have a customized show/hide toggle script that I'm using along with CSS3 transitions for the effects.
The script shows the content when clicked, and hides it when the 'HideLink' link is clicked, complete with CSS3 transistions - but only in Opera.
In other browsers the script only works for showing the content, clicking the hide link doesn't work.
See this JSfiddle: http://jsfiddle.net/xte63/
These days with show / hide javascript, I prefer to use HTML5's data-* attributes.
This can already be used in non-HTML5 browsers via the getAttribute and setAttribute function.
I've quickly tried it against IE7, Chrome and Opera and it seems to work.
http://jsfiddle.net/ThJcb/
function showHide(shID) {
var exDiv = document.getElementById(shID);
if(exDiv.getAttribute("data-visible") != 'false'){
document.getElementById(shID+'-show').style.cssText = ';height:auto;opacity:1;visibility:visible;';
document.getElementById(shID).style.cssText = ';height:0;opacity:0;visibility:hidden;';
exDiv.setAttribute("data-visible" , 'false');
} else {
document.getElementById(shID+'-show').style.cssText = ';height:;opacity:0;visibility:hidden;';
document.getElementById(shID).style.cssText = ';height:auto;opacity:1;visibility: visible ;';
exDiv.setAttribute("data-visible" , 'true');
}
}
This allows you to determine the state of the div without having to check for CSS values.
EDIT: As pointed out in the comments, a typo was on the hide link (onlick instead of onclick) which made it appear the above jsfiddle worked whereas it didn't. At least not exactly as I made an error in the logic, setting the "data-visible" to false instead of true.
Here's an updated jsfiddle: http://jsfiddle.net/ThJcb/4/
(javascript snippet above updated also)

Overriding yellow autofill background

After a long struggle, I've finally found the only way to clear autofill styling in every browser:
$('input').each(function() {
var $this = $(this);
$this.after($this.clone()).remove();
});
However, I can’t just run this in the window load event; autofill applies sometime after that. Right now I’m using a 100ms delay as a workaround:
// Kill autofill styles
$(window).on({
load: function() {
setTimeout(function() {
$('.text').each(function() {
var $this = $(this);
$this.after($this.clone()).remove();
});
}, 100);
}
});
and that seems safe on even the slowest of systems, but it’s really not elegant. Is there some kind of reliable event or check I can make to see if the autofill is complete, or a cross-browser way to fully override its styles?
If you're using Chrome or Safari, you can use the input:-webkit-autofill CSS selector to get the autofilled fields.
Example detection code:
setInterval(function() {
var autofilled = document.querySelectorAll('input:-webkit-autofill');
// do something with the elements...
}, 500);
There's a bug open over at http://code.google.com/p/chromium/issues/detail?id=46543#c22 relating to this, it looks like it might (should) eventually be possible to just write over the default styling with an !important selector, which would be the most elegant solution. The code would be something like:
input {
background-color: #FFF !important;
}
For now though the bug is still open and it seems like your hackish solution is the only solution for Chrome, however a) the solution for Chrome doesn't need setTimeout and b) it seems like Firefox might respect the !important flag or some sort of CSS selector with high priority as described in Override browser form-filling and input highlighting with HTML/CSS. Does this help?
I propose you avoiding the autofill in first place, instead of trying to trick the browser
<form autocomplete="off">
More information: http://www.whatwg.org/specs/web-forms/current-work/#the-autocomplete
If you want to keep the autofill behaviour but change the styling, maybe you can do something like this (jQuery):
$(document).ready(function() {
$("input[type='text']").css('background-color', 'white');
});
$(window).load(function()
{
if ($('input:-webkit-autofill'))
{
$('input:-webkit-autofill').each(function()
{
$(this).replaceWith($(this).clone(true,true));
});
// RE-INITIALIZE VARIABLES HERE IF YOU SET JQUERY OBJECT'S TO VAR FOR FASTER PROCESSING
}
});
I noticed that the jQuery solution you posted does not copy attached events. The method I have posted works for jQuery 1.5+ and should be the preferred solution as it retains the attached events for each object. If you have a solution to loop through all initialized variables and re-initialize them then a full 100% working jQuery solution would be available, otherwise you have to re-initialize set variables as needed.
for example you do: var foo = $('#foo');
then you would have to call: foo=$('#foo');
because the original element was removed and a clone now exists in its place.

jQuery .hover not working in Safari or Chrome

I am currently trying to make some jQuery hover effects render correctly in all browsers. For the moment, firefox, IE, opera all do what they are supposed to. However, Safari and Chrome do not.
The code looks like this:
<div id="button1">
<div id="work_title" class="title_james">
WORDS
</div>
</div>
<div id="button2">
<div id="work_title" class="title_mike">
MORE WORDS
</div>
</div>
and the script effecting it looks like this
<script>
$(function() {
$("#button2").hover(
function() {
$("#james").css('z-index', '100')
$(".title_mike").css('width', '590px')
}, function() {
$("#james").css('z-index', '')
$(".title_mike").css('width', '')
});
});​
$(function() {
$("#button1").hover(
function() {
$(".title_james").css('width', '785px')
}, function() {
$(".title_james").css('width', '')
});
});​
</script>
what I am trying to get it to do is change the css styles two elements on hover over two large areas of text..
I have tried the mouseenter .addClass and mouseleave .removeClass thing and that didn't work at all.. so when I got this to work in firefox I was all happy... then I did cross browser checking and I got sad again..
You can see it live in action at:
http://roboticmonsters.com/who
Using the dev tools in Chrome it says there is an invalid token at the end of each of the javascript functions. The IE dev tools shows an invalid token too, but it seems to ignore this and render correctly. Check your source and remove the token, if you can.
IE:
Chrome:
$.css takes an object:
$("#james").css({'z-index': '100'});
Note the curly braces and colon (not comma).
This is so you can specify several css rules in one:
$("#james").css({'z-index': '100', 'height': '100px'});
If you are getting the value of a css rule, just pass in the name as a string:
$("#james").css('z-index'); // returns 100
It's possibly because you are trying to bind to those events before the DOM has loaded.
I didn't have much time to give you an answer as to why it was broken, but the following works for me in chrome.
$(document).ready(function() {
$("#button2").hover(function() {
$("#james").css('z-index', '100');
$(".title_mike").css('width', '590px');
},
function() {
$("#james").css('z-index', '');
$(".title_mike").css('width', '');
}
);
$("#button1").hover(function() {
$(".title_james").css('width', '785px');
},
function() {
$(".title_james").css('width', '');
}
);
});
if just use the code below it works fine:
$("#button2").hover(
function() {
$("#james").css('z-index', '100')
$(".title_mike").css('width', '590px')
}, function() {
$("#james").css('z-index', '')
$(".title_mike").css('width', '')
});
Otherwise Chrome reports: Unexpected token ILLEGAL. To see this yourself, right-click on the page and choose inspect element. Click the small red x in the bottom right.
Update: actually your code works fine if you remove the illegal character as shown in #anothershubery's answer

JQuery background color animate not working

I want to change the background color of 'exampleDiv' from the original white background to when I call the code below to immediate change the background yellow and then fade back to the original white background.
$("#exampleDiv").animate({ backgroundColor: "yellow" }, "fast");
However, this code does not work.
I have only the JQuery core and JQuery UI linked to my web page.
Why doesn't the code above work?
I've had varying success with animate, but found that using its built in callback plus jQuery's css seems to work for most cases.
Try this function:
$(document).ready(function () {
$.fn.animateHighlight = function (highlightColor, duration) {
var highlightBg = highlightColor || "#FFFF9C";
var animateMs = duration || "fast"; // edit is here
var originalBg = this.css("background-color");
if (!originalBg || originalBg == highlightBg)
originalBg = "#FFFFFF"; // default to white
jQuery(this)
.css("backgroundColor", highlightBg)
.animate({ backgroundColor: originalBg }, animateMs, null, function () {
jQuery(this).css("backgroundColor", originalBg);
});
};
});
and call it like so:
$('#exampleDiv').animateHighlight();
Tested in IE9, FF4, and Chrome, using jQuery 1.5 (do NOT need UI plugin for this). I didn't use the jQuery color plugin either - you would only need that if you want to use named colors (e.g. 'yellow' instead of '#FFFF9C').
I believe you also need JQuery Color Animations.
I had the same problem and I was able to get everything to work when I included the correct js files.
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.8.20.js"></script>
<script src="/Scripts/jquery.color-2.1.2.js"></script>
I took it a step further and found a nice extension someone wrote.
jQuery.fn.flash = function (color, duration) {
var current = this.css('backgroundColor');
this.animate({ backgroundColor: 'rgb(' + color + ')' }, duration / 2)
.animate({ backgroundColor: current }, duration / 2);
}
The above code allows me to do the following:
$('#someId').flash('255,148,148', 1100);
That code will get your element to flash to red then back to its original color.
Here's some sample code. http://jsbin.com/iqasaz/2
The jQuery UI has a highlight effect that does exactly what you want.
$("exampleDiv").effect("highlight", {}, 5000);
You do have some options like changing the highlight colour.
Animating the backgroundColor is not supported in jQuery 1.3.2 (or earlier). Only parameters that take numeric values are supported. See the documentation on the method. The color animations plugin adds the ability to do this as of jQuery 1.2.
I came across the same issue and ultimately it turned out to be multiple call of jquery's js file on the page.
While this works absolutely fine with any other methods and also with animate when tried with other css properties like left, but it doesn't work for background color property in animate method.
Hence, I removed the additional call of jquery's js file and it worked absolutely fine for me.
For me, it worked fine with effects.core.js. However, I don't recall whether that's really required. I think that it only works with hexadecimal values. Here's a sample hover code that makes things fade as you hover. Thought it might be useful:
jQuery.fn.fadeOnHover = function(fadeColor)
{
this.each(function()
{
jQuery(this).data("OrigBg",jQuery(this).css("background-color"));
jQuery(this).hover(
function()
{
//Fade to the new color
jQuery(this).stop().animate({backgroundColor:fadeColor}, 1000)
},
function()
{
//Fade back to original color
original = jQuery(this).data("OrigBg");
jQuery(this).stop().animate({backgroundColor:original},1000)
}
);
});
}
$(".nav a").fadeOnHover("#FFFF00");
I had to use the color.js file to get this to work. I'm using jquery 1.4.2.
Get the color.js here
Just added this snippet below jquery script and it immediately started working:
<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
Source

Categories

Resources