There is my menu without animation:
https://jsfiddle.net/sj0pycb7/5/
When I try add a code like that it doesn't work correct.
;(function(){
var height = 1;
var intervalID;
var get = document.getElementsByClassName('dropdown');
var set = document.querySelector('.menu .dropdown ul');
get[0].addEventListener('mouseover', function(){
startAnim();
}, false);
get[0].addEventListener('mouseout', function(){
stopAnim();
set.style.display = 'none';
}, false);
function startAnim(){
intervalID = setInterval(increaseHeight, 10);
set.style.overflow = 'hidden';
}
function stopAnim(){
set.removeAttribute('style');
set.style.display = 'none';
clearInterval(intervalID);
height = 1;
}
function increaseHeight(){
if(height){
height += 5;
height++;
set.style.height = height + 'px';
set.style.display = 'inline-block';
}
if(height>210){
height = 0;
clearInterval(intervalID);
set.removeAttribute('style');
set.style.display = 'inline-block';
}
}
})();
Problem is that event 'mouseout' executes(display:none) when I hovering between dropdown menu anchors. Removing margin and borders doesn't help.
Problem is solved with jQuery:
https://jsfiddle.net/sj0pycb7/6/
;(function(){
$(document).ready(function() {
$( '.dropdown' ).hover(
function(){
$(this).children('.submenu').slideDown(200);
},
function(){
$(this).children('.submenu').slideUp(200);
}
);
});
})();
Related
So I'm attempting to set up a rotating banner on my website (viewable at https://www.leapcraft.net) and I have a variable that gets the width of the element and should be offsetting the element not inside of the div by the number of pixels.
I've tried setting the values back to their original offset which fixes it.
var bannerStatus = 1;
var bannerTimer = 4000;
var element = document.getElementById("main-banner");
var positionInfo = element.getBoundingClientRect();
var o = positionInfo.width;
window.onload = function() {
bannerLoop();
}
var startBannerLoop = setInterval(function() {
bannerLoop();
}, bannerTimer);
function bannerLoop() {
if (bannerStatus === 1) {
document.getElementById("imgban2").style.opacity = "0";
setTimeout(function() {
document.getElementById("imgban1").style.right = "0px";
document.getElementById("imgban1").style.zIndex = "1000";
document.getElementById("imgban2").style.right = "-"+ o;
document.getElementById("imgban2").style.zIndex = "1500";
document.getElementById("imgban3").style.right = o;
document.getElementById("imgban3").style.zIndex = "500";
}, 500);
setTimeout(function(){
document.getElementById("imgban2").style.opacity = "1";
}, 1000);
bannerStatus = 2;
}
Expected Results: Rotating banner that is responsive to Width of device that is defined in style.css
Why you can't use css styles to rotate image? Look on my solution, maybe will be useful to you.
function bannerLoop() {
imgBanner[imgNum].style.opacity=1;
imgBanner[imgNum].style.WebkitTransitionDuration='';
imgBanner[imgNum].style.webkitTransform = '';
setTimeout(()=>{
imgBanner[imgNum].style.WebkitTransitionDuration='1s';
imgBanner[imgNum].style.webkitTransform = 'rotate(360deg)';
imgBanner[imgNum].style.opacity=0;
(imgNum<imgBanner.length-1)?imgNum++:imgNum=0
},3000)
}
And here is a working fiddle: https://jsfiddle.net/udtr659y/
I'm trying to create a simple JQuery slider, and I'm having trouble with the .on('click') function, if I click the next or prev button too fast it exceeds the value I expect.
var currentSlide = 1;
var $slider = $(".slides");
var slideCount = $slider.children().length;
var slideSpeed = 500;
var slideMarginLeft = -900;
var slideMarginRight = 0;
$(".prev").on('click',function(){
if(currentSlide > 1){
$slider.animate({marginLeft : slideMarginLeft + 1800} , slideSpeed, function(){
slideMarginLeft +=900;
currentSlide--;
console.log(currentSlide);
});
}
});
$(".next").on('click',function(){
if(currentSlide < 5){
$slider.animate({marginLeft : slideMarginLeft} , slideSpeed, function(){
slideMarginLeft -=900;
currentSlide++;
console.log(currentSlide);
});
}
});
var currentSlide = 1;
var $slider = $(".slides");
var slideCount = $slider.children().length;
var slideSpeed = 500;
var slideMarginLeft = -900;
var slideMarginRight = 0;
function previousClickCallback(animationCallback){
return function(){
if(currentSlide > 1){
$slider.animate({marginLeft : slideMarginLeft + 1800} , slideSpeed, () => {
slideMarginLeft +=900;
currentSlide--;
console.log(currentSlide);
$(".prev").once('click',previousClickCallback);
});
} else {
$(".prev").one('click',previousClickCallback);
}
}
}
function nextClickCallback(){
return function(){
if(currentSlide < 5){
$slider.animate({marginLeft : slideMarginLeft} , slideSpeed, () => {
slideMarginLeft -=900;
currentSlide++;
console.log(currentSlide);
$(".next").once('click',nextClickCallback);
});
} else {
$(".next").one('click',nextClickCallback);
}
}
}
$(".prev").one('click',previousClickCallback);
$(".next").one('click',nextClickCallback)
This should do, click event gets registered only once and once the callback for animation is done then only click event is registered again and that will stop from continuously firing events
Make sure the .next class is assigned to only one button.
If you consider the following Pen: http://codepen.io/jhealey5/pen/Lqyhu - And click the Left/Right buttons, you should see that while left works fine, there's a slight delay on the right one.
I understand there's a little more happening with the right button, it's having to move it before it animates, but is there any way to alleviate the problem? Other than purposely delaying the left animation that is.
And any other improvements are a bonus.
jQuery code:
var $left = $('#left'),
$right = $('#right'),
$images = $('.items img'),
isAnimating = 0;
$left.on('click', function(){
if (isAnimating) {
return false;
} else {
var $item = $('.items img:eq(0)');
$item.velocity({'margin-left': '-100%'}, 400, 'easeOut', function(){
$(this).appendTo('.items .wrapper').css('margin-left', 0);
});
isAnimating = 0;
}
});
$right.on('click', function(){
if (isAnimating) {
return false;
} else {
isAnimating = 1;
var $item = $('.items img:eq(0)'),
$lastItem = $('.items img:eq('+($images.length-1)+')');
$lastItem.prependTo('.items .wrapper').css('margin-left', '-100%').velocity({
'margin-left': 0
}, 350, 'easeOut');
isAnimating = 0;
}
});
Cheers.
Instead of using "-100%" try to do it in px.
$imgWidth = $images.width(); // Add this variable
$left.on('click', function(){
if (isAnimating) {
return false;
} else {
var $item = $('.items img:eq(0)');
$item.velocity({'margin-left': -$imgWidth},
400, 'easeOut', function(){
$(this).appendTo('.items .wrapper').css('margin-left', 0);
});
isAnimating = 0;
}
});
$right.on('click', function(){
if (isAnimating) {
return false;
} else {
var $lastItem = $('.items img:eq('+($images.length-1)+')');
$lastItem.prependTo('.items .wrapper')
.css('margin-left', -$imgWidth).velocity({
'margin-left': 0
}, 400, 'easeOut');
isAnimating = 0;
}
});
The integer in the second variable of the velocity function needs to be decreased to speed this up.
Try for example changing 350 to 100 to see the response rate increase.
I have a navigation bar that repositions after scrolling down. It works with position:fixed, but while scrolling I want it to move up like all the other content that follow on the site . I the user stops scrolling it should reposition on top:
Heres a demo:
http://jsfiddle.net/gvjeyywa/7/
But I want it to be position:absolute (especially for the scrolling on the Ipad)
http://jsfiddle.net/gvjeyywa/5/
How do i let the JS overide my CSS? Here is my JS:
var isInAction = false;
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
if (!isInAction){
isInAction = true;
$( "#navigation" ).animate({
top: "-" + $("#navigation").innerHeight() + "px"
}).delay(1000).animate({
top: "0px"
}, 800, function() {
isInAction = false;
});
}
}
lastScrollTop = st;
});
In the first look i think it's impossible but after some tries this code was created.
I spent long time to write this code and use several techniques and hope to be helpful.
Maybe there are simpler solutions too !!
var bitFlag = false;
var lastScrollTop = 0;
var timeoutId;
$navigation = $("#navigation");
$(window).scroll(function (event) {
var intWindowTop = $(window).scrollTop();
var intElementBottom = $navigation.offset().top + $navigation.innerHeight();
if (intWindowTop > lastScrollTop) {
if (!bitFlag) {
$navigation.css("position", "absolute").css("top", intWindowTop + "px");
bitFlag = true;
}
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(function () {
if (intWindowTop > intElementBottom) {
intDelayTime = setTimeout(function () {
$navigation.animate({
top: intWindowTop + "px"
}, 800);
}, 500);
}
}, 100);
} else {
$navigation.css("position", "fixed").css("top", "0px");
bitFlag = false;
}
lastScrollTop = intWindowTop;
});
The }, 500); section control Delay time in milliseconds and the }, 800); section control the slide down animation speed.
Check JSFiddle Demo
I have been trying to applying flipping box just like on http://demo.rickyh.co.uk/flipping-crazy-css3/
I try to modified it a little but it doesn't work even i try to copy paste the source code it doesn't work at all.
so where did i do wrong? do i have to install specific javascript?
note: i'm just trying it on jsfiddle
here is the code
Javascript
var effectSpeed = 250;
function loadDemo(){
var vendor = (Browser.Engine.gecko) ? 'Moz' : ((Browser.Engine.webkit) ? 'Webkit' : '');
if(vendor == "Webkit"){
loadWebKit();
}
else if(vendor == "Moz"){
loadFox();
}
}
function loadWebKit(){
var newStyles = new Hash({
'webkitTransform': 'skew(#deg, #deg)'
});
$extend(Element.Styles, newStyles);
var elements = $("main").getElements(".flips");
// elements.setStyle("left", "0px");
$("main").getElements(".flips").each(function(item, index){
var currentStyles = item.getStyles("position", "left", "width", "height", "top");
var toggle = false;
item.addEvent('click', function(){
var extraT = 0;
var extraP = 0;
if(this.id == "flip4"){
extraT = 150;
}
if(this.id == "flip4"){
extraP = 500;
}
this.setStyle("overflow", "hidden");
var tp = this;
this.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:in', onComplete: function(){
if(!toggle){
toggle = true;
item.addClass("toggleTrue");
}
else{
toggle = false;
item.removeClass("toggleTrue");
}
tp.setStyle('webkitTransform','skew(0deg, -20deg)');
tp.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:out', onComplete: function(){
}});
tp.morph({
'width': currentStyles.width,
'left': currentStyles.left,
'webkitTransform': 'skew(0deg, 0deg)'
});
}});
this.morph({
'width': 0,
'left': parseInt(currentStyles.width)/2 + parseInt(currentStyles.left)+extraP,
'webkitTransform': 'skew(0deg, 20deg)'
});
});
});
}
function loadFox(){
$("webkit").getElement("span").innerHTML = "This ones webkit only"
var newStyles = new Hash({
'MozTransform': 'skew(#deg, #deg)'
});
$extend(Element.Styles, newStyles);
var elements = $("main").getElements(".flips");
elements.setStyle("MozTransform", "skew(0deg, 0deg)");
$("main").getElements(".flips").each(function(item, index){
var currentStyles = item.getStyles("position", "left", "width", "height", "top");
var toggle = false;
item.addEvent('click', function(){
var extraT = 0;
var extraP = 0;
if(this.id == "flip4"){
extraT = 150;
}
if(this.id == "flip4"){
extraP = 500;
}
this.setStyle("overflow", "hidden");
var tp = this;
this.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:in', onComplete: function(){
if(!toggle){
toggle = true;
item.addClass("toggleTrue");
}
else{
toggle = false;
item.removeClass("toggleTrue");
}
tp.setStyle('MozTransform','skew(0deg, -20deg)');
tp.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:out', onComplete: function(){
}});
tp.morph({
'width': currentStyles.width,
'left': currentStyles.left,
'MozTransform': 'skew(0deg, 0deg)'
});
}});
this.morph({
'width': 0,
'left': parseInt(currentStyles.width)/2 + parseInt(currentStyles.left)+extraP,
'MozTransform': 'skew(0deg, 20deg)'
});
});
});
}
Here's a simpler, cleaner way
DEMO http://jsfiddle.net/kevinPHPkevin/UC6fK/
$(document).ready(function(){
// set up hover panels
// although this can be done without JavaScript, we've attached these events
// because it causes the hover to be triggered when the element is tapped on a touch device
$('.hover').hover(function(){
$(this).addClass('flip');
},function(){
$(this).removeClass('flip');
});
});