Hi,
When the page first is rendered my div elements looks like this :
<div onmousedown="this.className='showhideExtra_down_click';"
onmouseout="this.className='showhideExtra_down';"
onmouseover="this.className='showhideExtra_down_hover';"
class="showhideExtra_down" id="extraFilterDropDownButton"> </div>
Then i manually updates the onmouse attributes with javascript so it looks like this :
<div onmousedown="this.className='showhideExtra_down_click';"
onmouseout="this.className='showhideExtra_down';"
onmouseover="this.className='showhideExtra_down_hover';"
class="showhideExtra_down" id="extraFilterDropDownButton"> </div>
They looks the same, the big difference is that the first one will change class when hovering and the second will not? Is it not possible to set this after page is rendered?
Please note : I need IE6 compability, thats why I use onmouse instead of CSS hover
BestRegards
Edit : This is what I found and that works grate, I haven´t tested it in IE6 just yet :
$("#extraFilterButton").hover(function() {
$(this).attr('class','showhideExtra_down_hover');
},
function() {
$(this).attr('class','showhideExtra_down');
});
you can use:
$('#selector').live('mouseover',function(){//something todo when mouse over})
live() allows for dynamic changes
(you can do the same for 'mouseout')
To expand on #maniator's correct answer, I would use:
$("#some_id").live("hover",
function() {
// do on mouseover
},
function() {
// do on mouseout
});
This is what I ended up with :
$("#extraFilterDropDownButton").hover(function() {
if($('#divCategoryFilter').css("display") == 'block'){
$(this).attr('class','showhideExtra_up_hover');
}
else{
$(this).attr('class','showhideExtra_down_hover');
}
},
function() {
if($('#divCategoryFilter').css("display") == 'block'){
$(this).attr('class','showhideExtra_up');
}
else{
$(this).attr('class','showhideExtra_down');
}
});
This is however not yet tested in IE6.
Related
I'm trying to make it so when any other slide is active besides the home page slide it hides the menu: ocw2018.orangecoastwebsites.com
I was using this code:
$(document).ready(function () {
if ($('.about-us, .services, .portfolio, ocw-whole-testimonials, .ocw-blog, .contact-us').hasClass('uncode-scroll-active')) {
$('#menu-main-menu').hide();
} else {
$('#menu-main-menu').show();
}
});
In the console, it works fine, but I'm not sure why it's not working on the live site.
Edit:
Basically I want what this code is able to do but with a hasClass instead of hover
$(window).on('hover', function(){
if(
$('.about-us').hasClass('uncode-scroll-active') ||
$('.services').hasClass('uncode-scroll-active') ||
$('.portfolio').hasClass('active') ||
$('.ocw-whole-testimonials').hasClass('uncode-scroll-active') ||
$('.ocw-blog').hasClass('uncode-scroll-active') ||
$('.contact-us').hasClass('uncode-scroll-active')) {
$('#menu-main-menu').hide();
} else {
$('#menu-main-menu').show();
}
});
It is live on the URL I provide above, so you can see when you scroll to the next page, and move your mouse, the menu disappears. It's my workaround until I figure out how to make it hidden when a class is active.
It is very hard to know from your post actually exactly what you want. However see below whatever I guessed so far.
First of all you missed '.' on 'ocw-whole-testimonials' it should '.ocw-whole-testimonials'.
After that please breakdown the multiple condition instead single line selector series like following, it will confirm you more accurate output, suppose any selector may have the expected selector so will return true but any other one may not so what will be out put false? so avoid this confusion it is better to breakdown:
$(document).ready(function () {
function hideMenu(){
if(
$('.about-us').hasClass('uncode-scroll-active') ||
$('.services').hasClass('uncode-scroll-active') ||
$('.portfolio').hasClass('uncode-scroll-active') ||
$('.ocw-whole-testimonials').hasClass('uncode-scroll-active') ||
$('.ocw-blog').hasClass('uncode-scroll-active') ||
$('.contact-us').hasClass('uncode-scroll-active')) {
$('#menu-main-menu').hide();
} else {
$('#menu-main-menu').show();
}
}
hideMenu(); // Call when page load
$(window).scroll(function(){
hideMenu(); // Call when page scroll
})
});
Use this function.
$(window).scroll(function(){
//write your code here
});
I have a checkbox and some <div>s that show/hides whenever a checkbox is checked. Now it all works great but it could be more efficient.
jQuery("#filtertype").change(function () {
if (jQuery("#posttype").is(":checked")) {
jQuery("#postblock").slideDown("slow");
} else {
jQuery("#postblock").slideUp("slow");
}
if (jQuery("#taxonomycat").is(":checked")) {
jQuery("#taxonomyblock").slideDown("slow");
} else {
jQuery("#taxonomyblock").slideUp("slow");
}
if (jQuery("#taxonomytag").is(":checked")) {
jQuery("#taxonomyblocktag").slideDown("slow");
} else {
jQuery("#taxonomyblocktag").slideUp("slow");
}
if (jQuery("#fieldjeskey").is(":checked")) {
jQuery("#fieldblock").slideDown("slow");
} else {
jQuery("#fieldblock").slideUp("slow");
}
if (jQuery("#sliderme").is(":checked")) {
jQuery("#sliderblock").slideDown("slow");
} else {
jQuery("#sliderblock").slideUp("slow");
}
});
This works like it should; it gets the ID of the checkbox <input> and for every <input> (#filtertype, #taxonomycat etc.) it will show or hide a <div> (#postblock, #taxonomyblock etc.)
It may be smarter to get the ID of every <input> and toggle the slideUp, slideDown function.
How can this be done?
Firstly, rather than have a list of id selectors, put a single class of each of those checkboxes, along with a data attribute to specify the relation. Something like this:
<input type="checkbox" name="posttype" class="filter-checkbox" data-rel="postblock" value="foobar" />
Then in javascript you can simplify all the code above to the following:
jQuery("#filtertype").change(function() {
$('.filter-checkbox').each(function() {
var func = this.checked ? 'slideDown' : 'slideUp';
$('#' + $(this).data('rel'))[func]('slow');
});
});
Example fiddle
It could be more efficient by not using jQuery.
Replace all of your jQuery("#someID").is(":checked") with
document.getElementById('someID').checked, and short of writing your own lightweight animation engine that's as good as you'll get.
Or you can go down the dark path of obscurity:
jQuery("#postblock")["slide"+(document.getElementById('posttype').checked ? "Down" : "Up")]("slow");
But that's probably not a good idea :p
I have a list of blocks, for each block their is a css change by jquery on mouseover/out.
I have a button that is job is to add one more block to the list.
It do it great! But the new block not respond to the mouseover/out jquery set.
This is my blocks and the add:
<div class='blocks'>
<div class='block'>
<div class='block-top'></div>
Default Text Here
</div>
<div class='block'>
<div class='block-top'></div>
Default Text Here
</div>
<div class='block'>
<div class='block-top'></div>
Default Text Here
</div>
</div>
<a href='#' id='addBlock'>Add Block</a>
And this is the javascipt:
$(document).ready(function() {
var inEdit=0;
$(".block").hoverIntent(function() {
if(inEdit==0) {
$(this).children('.block-top').delay(300).animate({opacity:1},600);
$(this).delay(300).animate({borderColor: '#8f8f8f'},600);
}
},function() {
if(inEdit==0) {
$(this).children('.block-top').animate({opacity:0},200);
$(this).animate({borderColor: '#ffffff'},200);
}
});
$('#addBlock').click(function() {
$('.blocks').append("<div class='block'><div class='block-top'></div>Default Text Here</div>");
});
});
I'm using this two scripts:
http://www.bitstorm.org/jquery/color-animation/
http://cherne.net/brian/resources/jquery.hoverIntent.html
What can I do?
Thanks
If you wish that future elements benefits from the event, you have to use on : http://api.jquery.com/on/
For instance :
$('#addBlock').on('click', function() {
$('.blocks').append("<div class='block'><div class='block-top'></div>Default Text Here</div>");
});
You are binding the hoverintent to the element which doesnt exist on load. Therefore the new element wont get the event handler. You have to use .Delegate() or .on()/.off() depending on your version of jQuery Information on how to use each can be found below
http://api.jquery.com/delegate/
http://api.jquery.com/on/
However as hoverIntent uses jquerys mouseover i dont know if it has a specific eventType you can use for delegate/on
This question is about using hoverIntent on new elements. There is exactly this other thread about the same thing, check out the answer :
help with understanding the logic behind how javascript executes on new dom elements being created on the fly
make use of jquery live() method, i.e) use below codes
$(".block").live('hoverIntent', function() { //this line is modified
if(inEdit==0) {
$(this).children('.block-top').delay(300).animate({opacity:1},600);
$(this).delay(300).animate({borderColor: '#8f8f8f'},600);
}
},function() {
if(inEdit==0) {
$(this).children('.block-top').animate({opacity:0},200);
$(this).animate({borderColor: '#ffffff'},200);
}
});
make some adjustments to add 2 functions for the event 'hoverIntent'. I mean this will work
$(".block").live('hoverIntent', function() { //this line is modified
if(inEdit==0) {
$(this).children('.block-top').delay(300).animate({opacity:1},600);
$(this).delay(300).animate({borderColor: '#8f8f8f'},600);
}
});
but to have 2 functions you can try like
$(".block").live('hoverIntent', function() { //this line is modified
if(inEdit==0) {
$(this).children('.block-top').delay(400).animate({opacity:1},600);
$(this).delay(400).animate({borderColor: '#8f8f8f'},600);
}
if(inEdit==0) {
$(this).children('.block-top').animate({opacity:0},200);
$(this).animate({borderColor: '#ffffff'},200);
}
});
I have a small jQuery script:
$('.field').blur(function() {
$(this).next().children().hide();
});
The children that is hidden contains some links. This makes it impossible to click the links (because they get hidden). What is an appropriate solution to this?
This is as close as I have got:
$('.field').blur(function() {
$('*').not('.adress').click(function(e) {
foo = $(this).data('events').click;
if(foo.length <= 1) {
// $(this).next('.spacer').children().removeClass("visible");
}
$(this).unbind(e);
});
});
The uncommented line is suppose to refer to the field that is blurred, but it doesn't seem to work. Any suggestions?
You can give it a slight delay, like this:
$('.field').blur(function() {
var kids = $(this).next().children();
setTimeout(function() { kids.hide(); }, 10);
});
This gives you time to click before those child links go away.
This is how I ended up doing it:
var curFocus;
$(document).delegate('*','mousedown', function(){
if ((this != curFocus) && // don't bother if this was the previous active element
($(curFocus).is('.field')) && // if it was a .field that was blurred
!($(this).is('.adress'))
) {
$('.' + $(curFocus).attr("id")).removeClass("visible"); // take action based on the blurred element
}
curFocus = this; // log the newly focussed element for the next event
});
I believe you can use .not('a') in this situation:
$('.field').not('a').blur(function() {
$(this).next().children().hide();
});
This isn't tested, so I am not sure if this will work or not.
Can i make jscrollpne such that parent pane doesnot scroll even when child scroll has reached its bottom. Now when child scrolling reaches bottom scrolling of parent occurs. I want parent to scroll only when mouse is out of child scrollpane.
The behaviour you describe is by design. This is how the native browser scrollbars behave on an element which has overflow: auto. I wouldn't recommend changing it. However, if you wish to then Borgenk's answer is correct, you can use this code:
$('.scroll-pane')
.jScrollPane()
.bind(
'mousewheel',
function(e)
{
e.preventDefault();
}
);
See an example here (you may need to shrink your window so the parent has any need to scroll): http://jsfiddle.net/VYcDZ/51/
You could use event.preventDefault()
$('.selector').mousewheel(function(event) {
event.preventDefault();
});
Ran into this problem tonight... saw no one had the answer so i wrote it up
var blockScrollTarget;
$('.jscroll').mousewheel(blockScroll);
......
function blockScroll(e) {
blockScrollTarget = blockScrollTarget || $(e.currentTarget);
var d = blockScrollTarget.data('jsp');
if(d.getPercentScrolledY() == 1 || d.getPercentScrolledY() == 0) {
return true;
}
if(d.getIsScrollableV()) {
e.preventDefault();
}
}
The above answers didn't work for me. If you are comfortable with editing the plugin source, you can expose the relevant internal methods to the public api:
// Public API
$.extend(
jsp,
{
...
initMousewheel : function(){
initMousewheel();
},
removeMousewheel : function(){
removeMousewheel();
}
}
);
Now you can conditionally and pragmatically eanable/disable the scrolling of any jscrollpane:
api = $('#full-page-container').data('jsp');
api.removeMousewheel(); // disable
api.initMousewheel(); // enable