Sorry for my poor English.
I'm using jQuery plugin slick. It contain some code
_isSlideOnFocus =_.$slider.find('*').is(':focus');
...
if(_isSlideOnFocus) {
//some code that i don't want to execute
}
Plugin gives ability to execute callback right before upper code will execute. So i can unfocus elements, but i don't know how.
In browser console right before upper code i try
_.$slider.find('*').blur();
_.$slider.find('*').each(function() {$(this).blur()});
_.$slider.find('*').trigger('blur');
but it don't work's.
i try in console
_.$slider.find(':focus'); //empty jQuery object
_.$slider.find('*').each(function() {
console.log($(this).is(':focus')); //false for all elements
});
_.$slider.find('*').is(':focus') //but this one returns true
Even if I try
_.$slider.find('*').each(function() {
if($(this).is(':focus')) {
$(this).blur();
console.log($(this).is(':focus'));
}
});
console logs true, so as I can see blur is not working for is(':blur')
How can i blur all elements in $slider? Thank's for help
Here the fiddle. My code in the end of js block. Subject plugin code is in the Slick.prototype.activateADA function in the end of plugin.
I have found the solution. I was using the old jQuery version 1.7. After updating jQuery to 1.9 blur works.
I did this:
$('.ui-slider-handle').blur();
Related
I've the following piece of code which works on one page and doesn't work on another though html markup is the same on both pages:
JS
$("#books_list").on('click', '.load-more-books', function(event) {
// Some stuffs
});
Html
<div id="book_list">
...
</div>
More books
Even after entering JS code in Chrome Browser console events not bound.
Can anyone help me with this, what am I doing wrong?
Thanks,
Sultan
The selector you specified means that .load-more-books needs to be a descendant of #book_list for this to work.
Upgrade to jQuery 1.8.1 and see the results
I am trying to hide Division B on this page. Due to the nature of the Wordpress template, it's kind of difficult to do. I am trying to use javascript in the footer:
$('div#division-2 div.teampage').prev('h2').css("display","none");
This works perfectly on JSFiddle, so I'm not sure what I'm doing wrong. I also created a javascript file with the code. Can someone please give me some guidance?
In the header, you have this code:
var $jquery = jQuery.noConflict();
This disables the $ shortcut. Replace $ with jQuery or $jquery in your code. For example:
jQuery(document).ready(function() {
jQuery('div#division-2 div.teampage').prev('h2').css("display", "none");
});
The reason the code in hide-division.js isn't working is that while it is using $jquery (for $jquery(document).ready, at least; it still needs to use that in the body of the handler), hide-division.js is running before the code calling noConflict.
In your hide-division.js file, code is like:
$jquery(document).ready(function()
{
$('div#division-2 div.teampage').prev('h2').css("display","none")
});
Here $jquery is not defined so the next code is not executing. Please remove jquery and use the following code:
$(document).ready(function()
{
$('div#division-2 div.teampage').prev('h2').css("display","none")
});
Hope this helps you.
just try giving $('div#division-2 h2').css("display","none");
$jquery must not given... its invalid... either $ or jQuery must be given...
This tutorial may help u...
I am trying to do a slow reveal on a particular div with an id of 'contentblock' on page load. This is my first time trying to code something in jQuery and I continue to fail. The following is my latest attempt, but I'm a complete newbie to this and surprisingly google hasn't been a whole lot of help.
<script type='text/javascript'>
$(window).onload(function(){
$('#contentblock').slideDown('slow');
return false;
});
</script>
before that I also had the following instead of the window onload line above:
$(document).ready(function(){
But that didn't have any success either. Can someone help a jQuery newbie out?
First, you'll need to make sure the element is hidden (or it won't be shown, since it's already visible). You can do this in either CSS or JavaScript/jQuery:
#contentblock {
display: none;
}
Or:
$('#contentblock').hide();
If you use CSS to hide the element you need to be aware that the element will remain hidden in the event of JavaScript being disabled in the user's browser. If you use JavaScript there's the problem that the element will likely flicker as it's first shown and then hidden.
And then call:
$(window).load(function(){
$('#contentblock').slideDown('slow');
});
I've made two amendments to your jQuery, first I've changed onload to load and I've also removed the return false, since the load() method doesn't expect any value to be returned it serves no purpose herein.
For the above jQuery you can use instead:
$(document).ready(function(){
$('#contentblock').slideDown('slow');
});
$(document).ready(function(){
if($('#contentblock').is(':hidden'))
{
$('#contentblock').slideDown('slow');
}
});
if you have jquery added to your project and your div is display none ... something like this should work.
I have simple call to slideToggle like below
$(document).ready(function(){
$("#Btn_WebCategories").click(function(){
$("q").slideToggle("slow"); // slide
});
//
// Second part: below not working.
//
$("#ExclBlockBtn").click(function(){
$("ExWeb").slideToggle("slow");
});
In IE6 slideToggle on "q" element is working fine, but in the second part ("ExWeb" element) which is much similar to first one is not working. Also above code is working fine in FF4.0.
I have tried by giving speed parameter differently.
Thanks in advance.
})
Ask yourself if you really need it to work in IE6. Consider:
http://www.theie6countdown.com/default.aspx
If anything, the stats published by Microsoft reveal that, for all intents and purposes, IE6 is not used except on in developing countries (pirated copies of WinXP?), and on corporate networks that need it for their intranets.
Looks like you are missing the # in your selector: #q and #ExWeb
$(document).ready(function(){
$("#Btn_WebCategories").click(function(){
$("#q").slideToggle("slow"); // slide
});
//
// Second part: below not working.
//
$("#ExclBlockBtn").click(function(){
$("#ExWeb").slideToggle("slow");
});
IE6 doesn't know <ExWeb/> , it's not a valid HTML-tagName(assuming you're working on an (X)HTML-document).
<q/> is a valid tagName.
I have a blog. I'm insert yahoo pipe. I need to remove yahoo pipe icon after script load finish.
script is here>>
<script src="http://l.yimg.com/a/i/us/pps/listbadge_1.1.js">
{"pipe_id":"24f8f6a880eb3be0711d541","_btype":"list","width":"100%","hideHeader":true}
</script>
My code is here>>
$("script[src=http://l.yimg.com/a/i/us/pps/listbadge_1.1.js]").load(function(){
$(".ybf").hide();
});
But this don't work.
How to handle script load finish?
Something like this should work.
$("DOM ITEM TO LOAD SCRIPT INTO").load(
"http://l.yimg.com/a/i/us/pps/listbadge_1.1.js",
{"pipe_id":"24f8f6a880eb3be0711d541","_btype":"list","width":"100%","hideHeader":true},
function(){
$(".ybf").hide();
});
);
look under the examples:
http://docs.jquery.com/Ajax/load
This should get you started for Firefox 3+
$('.ybf').live('DOMAttrModified', function() {
if ($(this).css('display') !== 'none')
$(this).css('display', 'none');
});
I would look into the propertychange event for IE, but I didn't have any luck combining that event with the jQuery live events, probably because they don't bubble. There may be another way to work around this however.
Good luck!
EDIT: You might want to look into the liveQuery plugin for jQuery. It looks to have more functionality and you may be able to get live binding to the 'propertychanged' event that IE supports.