Is there a way to get this behavior on this dropline menu?Need second or thrid level to stay active for one second when mouse is hover out from menu items.
To clarify, you're looking for some kind of delayed reaction to the mouse's movement? If so, check out this jQuery hoverintent plugin: http://cherne.net/brian/resources/jquery.hoverIntent.html
EDIT: I think you'll need to edit your menu script to replace any instance of .hover with .hoverIntent. I had trouble testing this in jsfiddle, but see if it works:
var droplinemenu={
arrowimage: {classname: 'downarrowclass', src:'http://www.odzaci.rs/wp-content/themes/typo/images/down.gif', leftpadding: 5}, //customize down arrow image
animateduration: {over: 200, out: 300}, //duration of slide in/ out animation, in milliseconds
buildmenu:function(menuid){
jQuery(document).ready(function($){
var $mainmenu=$("#"+menuid+">ul")
var $headers=$mainmenu.find("ul").parent()
$headers.each(function(i){
var $curobj=$(this)
var $subul=$(this).find('ul:eq(0)')
this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
this.istopheader=$curobj.parents("ul").length==1? true : false
if (!this.istopheader)
$subul.css({left:0, top:this._dimensions.h})
var $innerheader=$curobj.children('a').eq(0)
$innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
$innerheader.append(
'<img src="'+ droplinemenu.arrowimage.src
+'" class="' + droplinemenu.arrowimage.classname
+ '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
)
// THIS IS THE PART I REPLACED
var config = {
over: function(e){
var $targetul=$(this).children("ul:eq(0)")
if ($targetul.queue().length<=1) //if 1 or less queued animations
if (this.istopheader)
$targetul.css({left: $mainmenu.offset().left, top: $mainmenu.offset().top+this._dimensions.h})
if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
$mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
$targetul.slideDown(droplinemenu.animateduration.over)
},
timeout: 1000, // number = milliseconds delay before onMouseOut
out: function(e){
var $targetul=$(this).children("ul:eq(0)")
$targetul.slideUp(droplinemenu.animateduration.out)
}
};
$curobj.hoverIntent( config );
}) //end $headers.each()
$mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
}) //end document.ready
}
}
Related
var globaltest = 400;
$('.Quick-Sidebar-Toggle').click(function() {
var QSWSW = $(".Quick-Sidebar-Wrapper").width() == globaltest ? "0" : globaltest;
alert(globaltest + ", " + QSWSW);
$('.Quick-Sidebar-Wrapper').animate({
width: QSWSW + "px"
}, {
duration: 1000,
easing: 'easeOutBounce'
});
});
$('.Quick-Sidebar').bind('resize', function(e) {
globaltest = $(this).width();
});
The variable is changing upon DIV resize via a test I implemented;
$('.PannelLogo').click(function(e) {
alert(globaltest);
});
However upon checking upon clicking to toggle the quick access side panel once again via;
alert(globaltest + ', ' + QSWSW);
If I haven't resized it will say '400, 0' however if I do resize it will say the pixel value of the width twice ie '520, 520'
Attempted a JSFiddle here but didn't work... You can see the live version here where you can click the red square in the top-right corner to open, see the alert, resize, click the logo to see what the variable is however upon clicking to hide again, the variable which is shown in the alert is wrong...
Update I
Basically upon resize my script sets globaltest so for var QSWSW = $(".Quick-Sidebar-Wrapper").width() == globaltest ? "0" : globaltest; it basically means if width is not 0 then it should be and visa versa for opening it back up.
This works if you don't resize however doesn't if you do resize...
Update II
I'm still not near solving this problem and have tried several dozen attempts including the following;
$('.Quick-Sidebar-Toggle').click(function() {
if (QSWSCW == globaltest) {
QSWSW = 0;
} else {
QSWSW = globaltest;
}
$('.Quick-Sidebar-Wrapper').animate({
width: 'toggle'
}, {
duration: 1000,
easing: 'easeOutBounce'
});
});
You don't need to predefine the width:
$('.Quick-Sidebar-Toggle').click(function() {
$('.Quick-Sidebar-Wrapper').animate({
width: 'toggle'
}, {
duration: 1000,
easing: 'easeOutBounce'
});
});
...Just toggle it!
I'm using Bxslider for my div slider. But I need my next slide to slide over my old slide - effectively once a slide has animated in it remains there stacked on top of the others that went before it.
When prev slide button is pressed then it needs to animate out - similar to this effect: http://storiesbylove.com (don't try it out on a tablet though).
Does anyone know how to do this with boxslider?
Bxslider itself is not designed to operate in that way. It only supports three types of transitions ("mode" in the API): fade, horizontal, and vertical. To support the behavior you want would require modifications to Bxslider.
Bxslider stores all the images in the slider in a ul element with a class "bxslider". It then uses the transform property to move the entire slider left/right (or up/down for a veritcal slider). To get the desired behavior you would have to modify bxslider to transform the individual images instead of the ul container.
Below I modified setPositionProperty from Bxslider to do this. You should be able to just modify the original jquery.bxslider.js file and change this function, beginning around line 535 (NOTE: this particular solution does not support infiniteLoop=true):
var setPositionProperty = function(value, type, duration, params){
var selectedSlide=parseInt(slider.active.index) + 1;
// Handle going backwards
if(value==0)
selectedSlide++;
//By default, slide the entire container
var selectedEl = el;
//If set to use "lockedSlide", then only slide one image rather
//than all of them
if(slider.settings.lockedSlide===true)
selectedEl = $(el.children()[selectedSlide-1]);
// use CSS transform
if(slider.usingCSS){
// determine the translate3d value
var propValue = slider.settings.mode == 'vertical'
? 'translate3d(0, ' + value + 'px, 0)'
: 'translate3d(' + value + 'px, 0, 0)';
// add the CSS transition-duration
selectedEl.css('-' + slider.cssPrefix + '-transition-duration', duration / 1000 + 's');
if(type == 'slide'){
// set the property value
selectedEl.css(slider.animProp, propValue);
// bind a callback method - executes when CSS transition completes
selectedEl.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
// unbind the callback
el.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
updateAfterSlideTransition();
});
}else if(type == 'reset'){
selectedEl.css(slider.animProp, propValue);
}else if(type == 'ticker'){
// make the transition use 'linear'
selectedEl.css('-' + slider.cssPrefix + '-transition-timing-function', 'linear');
selectedEl.css(slider.animProp, propValue);
// bind a callback method - executes when CSS transition completes
selectedEl.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
// unbind the callback
selectedEl.unbind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd');
// reset the position
setPositionProperty(params['resetValue'], 'reset', 0);
// start the loop again
tickerLoop();
});
}
// use JS animate
}else{
var animateObj = {};
animateObj[slider.animProp] = value;
if(type == 'slide'){
selectedEl.animate(animateObj, duration, slider.settings.easing, function(){
updateAfterSlideTransition();
});
}else if(type == 'reset'){
selectedEl.css(slider.animProp, value)
}else if(type == 'ticker'){
selectedEl.animate(animateObj, speed, 'linear', function(){
setPositionProperty(params['resetValue'], 'reset', 0);
// run the recursive loop after animation
tickerLoop();
});
}
}
}
To use when activating bxslider set "lockedSlide" to true:
$('.bxslider').bxSlider({
infiniteLoop: false,
hideControlOnEnd: true,
mode: 'horizontal',
lockedSlide: true
});
I am using parallax.js to animate a series of elements on a homepage. I searched for code that would allow me to add a simple "slider" effect to the elements as well.
Everything seems to be working properly, except that after the first li, the parallax effect only works horizontally. On li #1, the element hovers as expected, following the mouse in every direction.
Here's a link to jsfiddle: http://jsfiddle.net/sdeviva/t6uwq/1/
Here's a link to the revised jsfiddle: http://jsfiddle.net/sdeviva/t6uwq/5/
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
var scene = document.getElementById('scene2');
var parallax = new Parallax(scene2);
(function($) {
$.fn.ezslide = function ( options ) {
var defaults = {
fadeIn : 1000,
fadeOut : 1000,
delay : 500
},
settings = $.extend( defaults, options ),
$this = this,
cur = 0,
fadeIt = function( which ) {
var li = $this.find('li');
cur = which = (which >= li.length) ? 0 : which;
li.fadeOut( settings.fadeOut );
li.eq( which )
.delay( settings.fadeOut )
.fadeIn( settings.fadeIn, function(){
setTimeout(function() {
cur++;
fadeIt( cur );
}, settings.delay);
});
};
fadeIt( cur );
};
$('ul.scene').ezslide({
fadeIn : 600,
fadeOut : 600,
delay : 3000
});
})(jQuery);
EDIT: I sort of fixed this. I don't really know what I'm doing, so there's probably a cleaner way. But, I realized that the parallax effect was only being applied once to the first list item. The script that makes each item fade in wasn't getting the benefit of the parallax.js script.
SO - I put each fading element into its own ul, with a unique id, and a shared class. By some miracle, this actually works. But let me know if there's a better way.
This is an interesting one. The issue is that the parallax code sets the very first layer to position: relative and all others to position: absolute. This has the effect of making the parent ul have the dimensions of only the first layer. This is normally fine, except that when you display any element other than the first, the first is hidden. This causes the ul to have 0 height. The parallax depends on the height of the scene, as a result no height means no vertical movement.
You can fix the issue by applying a fixed height to your ul:
#scene{
height: 128px;
}
http://jsfiddle.net/t6uwq/7/
You can find greater detail on the motion calculation in the documentation on github.
I am having some issues with some code. I am trying to get a div to move in time with a slider show. Each time a new slide is shown the div moves.
This is what I came up with
setInterval(function() {
$( ".bar" ).animate({ "left": "+=13.5em" }, "slow" );
}, 3000);
This works great, the div keeps up with the slider. But It never stops. I have been trying to come up with the code to make this work but I can't seem to do it.
Once the div reaches a certain point I want it to go back to its starting point and then repet its animation over and over just as the image slider does.
Could I put another timer on another line of code to tell the div to go back to a point after a set duration? then the above code will keep playing the aniamtion? (I will give this ago now!)
Are you using a plugin for the slider? Some plugins you can set a callback like flexslider plugin:
$(elem).flexslider({
before: function(){
//event before slide transition
},
after: function(){
//event after slide transition
}
});
var count = $(".bar").length;
var current = 1;
setInterval(function() {
$( ".bar" ).animate({ "left": "+=13.5em" }, "slow" );
current++;
if(current == count) {
$( ".bar" ).animate({ "right": "+=" + (count*13.5) "em" }, "fast" );
current = 1;
}
}, 3000);
Maybe something like that?
var startPos = $(".bar").offset();
var endPos = $("foo").offset();
var foo = setInterval(function() {
var updatedPos = $( ".bar" ).position();
if (updatedPos.left === endPos.left) {
$(".bar").css({"left":startPos.left,"top":startPos.top});
}
$( ".bar" ).animate({ "left": "+=13.5em" }, "slow" );
}, 3000);
EDIT:
var pos = $(".bar").offset(); this gets the position relative to the document, you could also get the position relative to the parent node with .position() and then check on the interval if it hit the position, you could also just update the left right or top bottom, depending on your needs. but this would be a way to reset the position. You just need to know the start and end points.
I've put together a small script (JavaScript - jQuery) for testing an image resize operation that is dependent on the mousemove event. In short, the idea is to click on the image once and then drag the cursor around. The image resizes at every mouse move, its bottom-right corner "following" your cursor around.
The problem I've encountered is this: right after you start moving the cursor around, the resize works a bit jerky. After 1-2 seconds, it runs very smoothly. The same situation occurs if you stop moving the cursor around for a bit and then move it again.
This issue appears to happen only in Google Chrome, so my first thought is that it has something to do with this browser's anti-aliasing feature. But I'm not an expert.
The image is quite big (width&height - wise, not "KB"-wise)
You can test this "mini-app" here: http://picselbocs.com/projects/helsinki-map-application/test.php
And bellow is the code:
<img src="Helsinki.jpg" id="map" style="width: 526px; height:300px; position: absolute; top:0; left:0" />
<script>
var drag = false;
(function(){
$('#map').on('click',function(){
drag = true;
});
$(document).on('mousemove',function(e){
if (drag)
$('#map').css({ 'height': e.pageY, 'width': e.pageX });
});
})();
</script>
If anyone can provide a solution to this problem I would greatly appreciate it.
http://asp-net-by-parijat.blogspot.in/2014/09/aspnet-image-magnifying-effect-with.html
!function ($) {
"use strict";
var Magnify = function (element, options) {
this.init('magnify', element, options)
}
Magnify.prototype = {
constructor: Magnify
, init: function (type, element, options) {
var event = 'mousemove'
, eventOut = 'mouseleave';
this.type = type
this.$element = $(element)
this.options = this.getOptions(options)
this.nativeWidth = 0
this.nativeHeight = 0
if(!this.$element.parent().hasClass('magnify')) {
this.$element.wrap('<div class="magnify" \>');
this.$element.parent('.magnify').append('<div class="magnify-large" \>');
}
this.$element.siblings(".magnify-large").css("background","url('" + this.$element.attr("src") + "') no-repeat");
this.$element.parent('.magnify').on(event + '.' + this.type, $.proxy(this.check, this));
this.$element.parent('.magnify').on(eventOut + '.' + this.type, $.proxy(this.check, this));
}