Is it possible to slow down a setAttribute()? For example, I have the following code:
function hide(i) {
var previewDiv = document.getElementById('preview');
var fullDiv = document.getElementById('full');
previewDiv.setAttribute('style', 'display:normal;');
fullDiv.setAttribute('style', 'display:none;');
}
Now want to make the display:none go to display:normal with a delay so it "fades" open instead of just bluntly open. Or is there another good way to achieve this?
It can be done in a multitude of ways. You could use jQuery's fadeIn method $('.element').fadeIn(); or using css and Javascript. I found this example http://www.chrisbuttery.com/articles/fade-in-fade-out-with-javascript/ by Chris Buttery.
I really comes down to taste. Although one could argue that the second option should be more optimal on most systems.
Related
It's a long shot which is not that investigated yet, but I'm throwing the question while I'm looking for answers to hopefully get on the right track.
Building a Wordpress site with the theme Dante. This has an image slider function for products, handled in jquery.flexslider-min.js. In my first attempt i used wp_dequeue_script( 'sf-flexslider' ); to stop using this, and then added my own js which works perfect. The problem, however, is that in the bottom of the page there's another slider for displaying other products that uses this file, so i can not simply just dequeue this script.
I've tried to put my js-file both before and after the jquery.flexslider-min.js but this is always the primary. It there a way to, in my js-file, do something like "for obects in [specified div], skip instructions from jquery.flexslider-min.js"?
EDIT: Found this thread and tried the .remove() and the .detach() approach and add it again, but this makes no difference.
I really want to get rid of that flexslider on this particullar object. I can, of course, "hack" the output and give the flexslider item another class or something, but that would bring me so much work i don't have time for.
Maybe, You can monkey patch the flexslider behavior. There's a good tutorial here:
http://me.dt.in.th/page/JavaScript-override/
Something like:
var slider = flexSlider;
var originalSlide = slider.slide;
slider.slide= function() {
if ( some condition) {
// your custom slide function
} else {
// use default behavior
originalSlide.apply(this, arguments);
}
}
I'm working on a responsive site. I'm browsing for a way to handle jQuery "media query" changes so to speak.
I got some calculations like height, width ect on some elements and i would need to recalculate those when the media query change, like from 1160px to 980px.
I found a solution that feels like a good one because it should be supported by most browsers (if not all?) but I'm just not sure if there is any performance or any other issues with having a setTimeout() running as frequent as this one.
jsfiddle for live example
setInterval(function() {
//code here
}, 100);
maybe there is some other better way using a already made plugin by paulirish or any other crew? Please advice me with your experience on this subject.
I'm using this code to handle jquery "media queries". I took a element that got the size of my media queries (480, 980, 1160) as selectors, usually a wrapper or like in my case the header.
var myDivWidth = $('YOUR-SELECTOR').width();
$(window).resize(function () {
if ($('YOUR-SELECTOR').width() != myDivWidth) {
//If the media query has been triggered
myDivWidth = $('YOUR-SELECTOR').width();
//Your resize logic here
}
});
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.
<ul id="MarqueePro2"></ul>
</ul>
<script>
var speed=60;
var MarqueePro=document.getElementById("MarqueePro");
var MarqueePro2=document.getElementById("MarqueePro2");
var MarqueePro1=document.getElementById("MarqueePro1");
MarqueePro2.innerHTML=MarqueePro1.innerHTML;
function Marquee()
{
if(MarqueePro2.offsetTop-MarqueePro.scrollTop<=0)
{
MarqueePro.scrollTop-=MarqueePro1.offsetHeight;
}
else
{
MarqueePro.scrollTop++;
}
}
var MyMar=setInterval(Marquee,speed);
MarqueePro.onmouseover=function() {clearInterval(MyMar)}
MarqueePro.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
appers shake under IE browser.how to solve the problem?
and thx very much!
scrollTop behaviour in IE is extremely dodgy. Two things can affect it:
1) The document type - you have to get the right one - there appears to be some issues with transitional and loose DTDs.
2) Whether or not there is overflow set on the container.
See http://forums.digitalpoint.com/showthread.php?t=11965. It presents a solution to both issues of scrollTop in IE.
(At the risk of enacting a stackoverflow cliche, you might want to consider using a framework such as jQuery, which will take a lot of such annoyances out of the equation).
I'm not sure what your script intends to do, but for Javascript effects, check out the frameworks:
JQUery
Prototype / Scriptaculous
Mootools
they have worked out most cross browser issues and are very easy to use.
You may want to set speed to a higher number.
The second argument to setInterval is the delay in milliseconds. 60 milliseconds is quite fast; 50 milliseconds is 1/20th of a second.
Maybe try 100 or 200 to see if things improve?
This isn't much of a problem but I'm wondering if theres a way I can turn this
$(".selector").sortable("disable").sortable("refresh");
into this
$(".selector").sortable("disable", "refresh");
Using disable and refresh within the same sortable function seems more efficient/simple.
I have no idea if you can do that with the Sortable API, but if you can't you can always add the functionality youself using prototype:
$.prototype.sortableDisableAndRefresh = function() {
this.sortable("disable").sortable("refresh");
}
$(".selector").sortableDisableAndRefresh();
I'm not sure what kind of efficiency you are after. If you want it to run faster, this won't help. If you just want to make one function call to make the code pretty, it might.