The idea is to execute an animation while the cursor is over a div. I've done this other times but now the function with the animation receives a parameter and if I add the parameter the page blows up. Without that last call to the function the code doesn't crash the page.
Please check my code:
function OnHover() {
function Animation(obj) {
obj.stop().animate({ top: '20px' }, 600).animate({ top: '0px' }, 600, Animation(obj));
}
$('#infobox').hover(
function(event) {
$circle = $(event.target).children().first();
Animation($circle);
},
function(event) {
$circle = $(event.target).children();
$circle.stop();
}
);
}
I have used this workaround:
$target = undefined;
$("#wrapper .infobox").mouseenter(event, function animate() {
if (typeof $target == 'undefined')
$target = $(event.target).children();
$target.animate({ marginTop: "+=40px" }, 600);
$target.animate({ marginTop: "-=40px" }, 600, animate);
}
);
$("#wrapper .infobox").mouseleave(function() {
$target.stop(true, false).animate({ marginTop: '20px'}, 300);
$target = undefined;
}
);
Related
I'm trying to show and hide with toggle the entire side menu bar(#menu_links) when the browser is tunneled to less than 750px.
Does anyone know why the side menu bar (#menu_links) is not hidden by passing the edge of the browser when you click "#menu_button" when the browser size is less than 750?
https://menusel-169ba.firebaseapp.com/
$(document).ready(function () {
$('#menu_links').css({ width: '50px' });
$('.collapse-menu').addClass('hidden');
$('ul#menu_links li').hover(function () {
$('span', this).addClass('show');
$('span', this).removeClass('hidden');
}, function () {
$('span', this).addClass('hidden');
$('span', this).removeClass('show');
});
// Muesrta panel de CAMBIAR CONTRASEÑA
$('a.test').on("click", function (e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
var timesClicked = 0;
$("#menu_button").click(function () {
timesClicked++
if (timesClicked % 2 == 0) {
$('#menu_links').animate({ width: '50px' }, 350);
$('.collapse-menu').removeClass('show');
$('.collapse-menu').addClass('hidden');
$('ul#menu_links li').hover(function () {
$('span', this).addClass('show');
$('span', this).removeClass('hidden');
}, function () {
$('span', this).addClass('hidden');
$('span', this).removeClass('show');
});
} else {
$('#menu_links').animate({ width: '200px' }, 350);
$('.collapse-menu').addClass('show');
$('.collapse-menu').removeClass('hidden');
$('ul#menu_links li').hover(function () {
}, function () {
$('span', this).addClass('show');
$('span', this).removeClass('hidden');
});
}
console.log(timesClicked % 2);
});
var menu_buttonVar = document.querySelector("#menu_button"),
menu_linksVar = document.querySelector("#menu_links");
// checkWidth() BREACK-POINTS
function checkWidth() {
var windowSize = $(window).width();
if (windowSize <= 750) {
console.log("screen width is less than 480");
menu_linksVar.style.left = "-50px";
$('#menu_button').click(function () {
$('#menu_links').animate({
left: '0px',
}, 0);
});
} // END if
else {
console.log("screen width is greater than or equal to 960");
menu_linksVar.style.left = "0px";
}
};
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
}); // END documentReady
Now my menu is ready and it works fine.
The next step is synthesize the code to work with the same functions but with less characters.
Here is the link:
https://menusel-169ba.firebaseapp.com/
Thank you.
I have the below slide-in menu code I put together from scratch. I'm trying to add a timeout function to prevent too many slide-ins and slide-outs due to multiple clicking. Only one click per 200ms should actually trigger the animation. I tried and tried but could not figure this out. Help! :)
var togglerWidth = $('#mobile-menu-toggler').css('min-width');
var slideLeft = function () {
var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
$('#mobile-menu-toggler').animate({
width: menuWidth
},
500,
'swing',
function () {
});
$('#mainmenu-mobile').animate({
right: "0px"
},
500,
'swing',
function () {
});
}
var slideRight = function () {
var menuWidth = $('#mainmenu-mobile').width();
$('#mobile-menu-toggler').animate({
width: togglerWidth
},
500,
'swing',
function () {
});
$('#mainmenu-mobile').animate({
right: -menuWidth
},
500,
'swing',
function () {
});
}
var activate = function () {
$('#mainmenu-mobile, #mobile-menu-toggler').addClass('active-menu');
}
var deactivate = function () {
$('#mainmenu-mobile, #mobile-menu-toggler').removeClass('active-menu').addClass('inactive-menu');
}
$("#mobile-menu-toggler").click(function () {
$(this).toggleClass('inactive-menu');
$('#mainmenu-mobile').toggleClass('inactive-menu');
if ($(this).hasClass('inactive-menu')) {
slideRight();
deactivate();
} else {
slideLeft();
activate();
}
});
$(document).mousedown(function (e) {
var container = $("#mobile-menu-wrap");
if (!container.is(e.target) && container.has(e.target).length === 0) {
slideRight();
deactivate();
}
});
FIDDLE: http://jsfiddle.net/Lam9rwLg/2/
Use This Code. Timer is set for 2 seconds. Change as per required.
//Mobile Menu Animation
var togglerWidth = $('#mobile-menu-toggler').css('min-width'); //get width of toggler
//Slide left function
var slideLeft = function () {
var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
$('#mobile-menu-toggler').animate({
width: menuWidth
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
$('#mainmenu-mobile').animate({
right: "0px"
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
}
//Slide Right Function
var slideRight = function () {
var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
$('#mobile-menu-toggler').animate({
width: togglerWidth
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
$('#mainmenu-mobile').animate({
right: -menuWidth
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
}
var activate = function () { //switch to 'active-menu' class
$('#mainmenu-mobile, #mobile-menu-toggler').addClass('active-menu');
}
var deactivate = function () { //switch back to 'inactive-menu' class
$('#mainmenu-mobile, #mobile-menu-toggler').removeClass('active-menu').addClass('inactive-menu');
}
$("#mobile-menu-toggler").click(function () {
$("#mobile-menu-toggler").unbind('click');
$(this).toggleClass('inactive-menu');
$('#mainmenu-mobile').toggleClass('inactive-menu');
$("#mobile-menu-wrap").prop("disabled",true);
if ($(this).hasClass('inactive-menu')) {
slideRight();
deactivate();
} else {
slideLeft();
activate();
}
setTimeout(function(){setFunction()},2000); //after 2 Second click. Set this variable as required.
});
var setFunction=function(){
$("#mobile-menu-toggler").bind('click',function () {
$("#mobile-menu-toggler").unbind('click');
$(this).toggleClass('inactive-menu');
$('#mainmenu-mobile').toggleClass('inactive-menu');
$("#mobile-menu-wrap").prop("disabled",true);
if ($(this).hasClass('inactive-menu')) {
slideRight();
deactivate();
} else {
slideLeft();
activate();
}
setTimeout(function(){setFunction()},2000); //after 2 Second click. Set this variable as required.
});
}
//Close menu if clicked outside the box.
$(document).mousedown(function (e) {
var container = $("#mobile-menu-wrap");
if (!container.is(e.target) && container.has(e.target).length === 0) {
slideRight();
deactivate();
}
});
Updated Link : http://jsfiddle.net/Lam9rwLg/5/
Hopefully the below code helps you. Please let me know if it's working as per your intention. Below is the updated javascript codes.
So it does:
Once the click event is clicked, the event subscription would be removed.
There would be setTimeout event to subscribe the event click again.
By doing that, the multiple clicking can be prevented.
//Mobile Menu Animation
var togglerWidth = $('#mobile-menu-toggler').css('min-width'); //get width of toggler
//Slide left function
var slideLeft = function () {
var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
$('#mobile-menu-toggler').animate({
width: menuWidth
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
$('#mainmenu-mobile').animate({
right: "0px"
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
}
//Slide Right Function
var slideRight = function () {
var menuWidth = $('#mainmenu-mobile').width(); //get width of main menu
$('#mobile-menu-toggler').animate({
width: togglerWidth
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
$('#mainmenu-mobile').animate({
right: -menuWidth
}, // what property we are animating
500, // how fast we are animating
'swing', // the type of easing
function () { // the callback
});
}
var activate = function () { //switch to 'active-menu' class
$('#mainmenu-mobile, #mobile-menu-toggler').addClass('active-menu');
}
var deactivate = function () { //switch back to 'inactive-menu' class
$('#mainmenu-mobile, #mobile-menu-toggler').removeClass('active-menu').addClass('inactive-menu');
}
$(function(){
TogglerClickSetup();
});
function TogglerClickSetup() {
$("#mobile-menu-toggler").click(function () {
$("#mobile-menu-toggler").off();
$(this).toggleClass('inactive-menu');
$('#mainmenu-mobile').toggleClass('inactive-menu');
if ($(this).hasClass('inactive-menu')) {
slideRight();
deactivate();
} else {
slideLeft();
activate();
}
window.setTimeout(TogglerClickSetup, 500);
});
}
//Close menu if clicked outside the box.
$(document).mousedown(function (e) {
var container = $("#mobile-menu-wrap");
if (!container.is(e.target) && container.has(e.target).length === 0) {
slideRight();
deactivate();
}
});
I have made a spelling game for primary school children. I want to make the click events in my game touch events so it can be compatible on tablets. Is there a way I can put them alongside my click events so that one program is compatible to both, or will I have to make a tablet version?
Here I have the code for one of my click events as an example
$('.drag').on('click', function(e) {
e.preventDefault();
if (animation) return;
animation = true;
setTimeout(function() {
animation = false;
}, 700);
$(".minibutton").css('visibility', 'hidden');
$('.next').css('visibility', 'hidden');
var target = $('.drop-box.spellword:not(.occupied):first');
var targetPos = target.position();
var currentPos = $(this).offset();
var b = $(this);
if (target.length) {
target.addClass("occupied");
b.clone().addClass(
b.data("letter") == target.data("letter") ? "wordglow3" : "wordglow").appendTo("table").css({
background: "transparent",
position: "absolute",
top: currentPos.top,
left: currentPos.left
}).animate({
top: targetPos.top,
left: targetPos.left
}, "slow", function() {
$(this).css({
top: 0,
left: 0
}).appendTo(target);
var spellWord = $('.drop-box.spellword');
if (!spellWord.filter(':not(.occupied)').length) {
var wordIsCorrect = 0;
spellWord.each(function() {
if ($(this).data("letter") == $(this).find("div").data("letter")) {
wordIsCorrect++;
}
});
if (spellWord.length == wordIsCorrect) {
spellWord.addClass('wordglow2');
$(right).val('Right!');
$(right).show();
success.play();
$(wrong).hide();
score.right++;
score.attempts++;
if (score.right == 3) {
$('.answers').css('visibility', 'visible');
$('.answers').html("Well done! </br> You correctly spelt " + score.right + ". </br> Keep it up.").show();
$('table').fadeOut(3000);
$('.right').hide();
$('.box-style2').hide();
$('.box-style').hide();
$('.picstyle').hide();
$('.play').hide();
$('.minibutton2').hide();
$("#mysoundclip").attr('src', listOfWords[rndWord].audio);
audio.stop();
$("#mypic").attr('src', listOfWords[rndWord].pic);
pic.hide();
}
setTimeout(function() {
jQuery('.minibutton').trigger('click');
}, 1500);
setTimeout(function() {
jQuery(right).hide();
}, 1500);
} else {
//spellWord.addClass("wordglow4").css('color', 'transparent');
$(wrong).val('Wrong!');
$(wrong).show();
failure.play();
$(right).hide();
score.wrong++;
score.attempts++;
if (score.wrong == 3) {
$(".minibutton").css('visibility', 'visible');
$('.next').css('visibility', 'visible');
}
$('.drop-box.spellword').animate({
'opacity': 1
}, 1500, function() {
$(this).removeClass('wordglow4').removeClass('occupied').html('')
});
setTimeout(function() {
jQuery(wrong).hide();
}, 1500);
}
}
});
}
});
Can someone point me in the right direction as I have never done this before.
Here is a fiddle to help (Sound warning!!) http://jsfiddle.net/smilburn/7Y7A5/8/
You could add the tap event and include jQuery Mobile in your mobile version.
$('.drag').on('click tap', function(e) {...}
I am a bit confused... I can load a javascript file when its above another jquery file in the tag however when its below other jquery files it doesn't load.
When I put it above the jquery.min.js file its loads fine but when its below it fails to load.
Im thinking there is something wrong with my jquery file.. but not sure what!
My Javascript file is:
/* =======================================================================================================================================*/
// gallery slider
/* =======================================================================================================================================*/
$(document).ready(function () {
$('.project').mouseover(function ()
{
$(this).children('.cover').animate(
{
height: "172px"
});
$(this).children('.title').animate(
{
bottom: '-25px', height: "100px"
});
});
$('.project').mouseleave(function ()
{
$(this).children('.cover').animate(
{
height: "17px"
});
$(this).children('.title').animate(
{
bottom: "0px", height: "20px"
});
});
});
/* =======================================================================================================================================*/
// Top Contact Area
/* =======================================================================================================================================*/
$(window).load(function () {
$("#contactArea").css('height', '0px');
$(".contact-hurry a").toggle(
function () {
$(this).text('Quick Contact Hide / Close [-]')
$("#contactArea").animate({height: "225px"}, {queue:false, duration: 500, easing: 'linear'})
$("body").addClass("reposition-bg",{queue:false, duration: 500, easing: 'linear'})
},
function () {
$(this).text('Quick Contact Show / Open [+]')
$("body").removeClass("reposition-bg",{queue:false, duration: 500, easing: 'linear'})
$("#contactArea").animate({height: "0px"}, {queue:false, duration: 500, easing: 'linear'})
}
);
});
/* =======================================================================================================================================*/
// Mega Menu $("#contactArea").css('height', '0px');
/* =======================================================================================================================================*/
$(document).ready(function () {
function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show();
//Calculate width of all ul's
(function($) {
jQuery.fn.calcSubWidth = function() {
rowWidth = 150;
//Calculate row
$(this).find("ul.floating").each(function() {
rowWidth += $(this).width();
});
};
})(jQuery);
if ( $(this).find(".row").length > 0 ) { //If row exists...
var biggestRow = 0;
//Calculate each row
$(this).find(".row").each(function() {
$(this).calcSubWidth();
//Find biggest row
if(rowWidth > biggestRow) {
biggestRow = rowWidth;
}
});
//Set width
$(this).find(".sub").css({'width' :biggestRow});
$(this).find(".row:last").css({'margin':'0'});
} else { //If row does not exist...
$(this).calcSubWidth();
//Set Width
$(this).find(".sub").css({'width' : rowWidth});
}
}
function megaHoverOut(){
$(this).find(".sub").stop().fadeTo('fast', 0, function() {
$(this).hide();
});
}
var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: 100, // number = milliseconds for onMouseOver polling interval
over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
timeout: 100, // number = milliseconds delay before onMouseOut
out: megaHoverOut // function = onMouseOut callback (REQUIRED)
};
$("ul#topnav li .sub").css({'opacity':'0'});
$("ul#topnav li").hoverIntent(config);
jQuery(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 0 };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 200, height: 60 } };
}
// run the effect
$( "#effect" ).toggle( selectedEffect, options, 500 );
};
// set effect from select menu value
$( "#button" ).click(function() {
runEffect();
return false;
});
});
/* =======================================================================================================================================*/
// faqs
/* =======================================================================================================================================*/
$(document).ready(function(){
$("#faqs tr:odd").addClass("odd");
$("#faqs tr:not(.odd)").hide();
$("#faqs tr:first-child").show();
$("#faqs tr.odd").click(function(){
$(this).next("tr").toggle('fast');
$(this).find(".arrow").toggleClass("up");
});
});
/* =======================================================================================================================================*/
// Portfolio slider
/* =======================================================================================================================================*/
/*
$(document).ready(function() {
var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
if(index < $('#bigPic img').length){
var indexImage = $('#bigPic img')[index]
if(currentImage){
if(currentImage != indexImage ){
$(currentImage).css('z-index',2);
clearTimeout(myTimer);
$(currentImage).fadeOut(250, function() {
myTimer = setTimeout("showNext()", 3900);
$(this).css({'display':'none','z-index':1})
});
}
}
$(indexImage).css({'display':'block', 'opacity':1});
currentImage = indexImage;
currentIndex = index;
$('#thumbs li').removeClass('active');
$($('#thumbs li')[index]).addClass('active');
}
}
function showNext(){
var len = $('#bigPic img').length;
var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
showImage(next);
}
var myTimer;
$(document).ready(function() {
myTimer = setTimeout("showNext()", 3000);
showNext(); //loads first image
});
});
*/
$("#foo2").carouFredSel({
circular: false,
infinite: false,
auto : false,
scroll : {
items : "page"
},
prev : {
button : "#foo2_prev",
key : "left"
},
next : {
button : "#foo2_next",
key : "right"
},
pagination : "#foo2_pag"
});
});
I am not sure what you actually mean, but I give it a shot.
If you include the jquery library before script files that uses jquery, those will succeed.
A script that uses jquery must have the symbols $ and jQuery defined and javascript runs the file sequentially from top to bottom.
That is why including jquery must be done before everything else.
How do I position a div next to a mouse click using JQuery?
Thanks
You can try:
$( "td").click( function(event) {
$("#divId").css( {position:"absolute", top:event.pageY, left: event.pageX});
});
After additional question was asked in the comment:
$( "td").click( function(event) {
var div = $("#divId");
div.css( {
position:"absolute",
top:event.pageY,
left: event.pageX});
var delayTimer = setTimeout( function( ) {
$that.fadeIn( "slow");
}, 100);
div.mouseover( function( event) {
if (delayTimer)
clearTimeout( delayTimer);
}).mouseout( function(){
if (delayTimer)
clearTimeout( delayTimer);
var $that = $(this);
delayTimer = setTimeout( function( ) {
$that.fadeOut( "slow");
}, 500)
});
});
Something like:
$('#cell').bind('click',
function(e){
$('#div').css('left',e.pageX + 'px' );
$('#div').css('top',e.pageY + 'px' ); });
The div's position should be set to absolute.