We Keep Coding

Changing mouse events depending on a variable

I bet this is really simple and im gonna try to explain it the best I can:
I am trying to build a gallery to show different transitions and reveals ( making an overlayed div transition out of sight, for instance ), and I want there to be a button that the user can click to experience the same transition with hover and with clicks.
To achieve this I simply created a new variable that I called toggleButton, initialized it at 0, and made a conditional statement saying that should the variable be 0, the transition should be working on hover, and, should toggleButton be 1, the transition would work with clicks.
I am logging the variable changes on the console everytime the button to change them is pressed, and it works fine, no errors, but I can't achieve what i wanted to, the transition never changes, it always stays the way i initialize it ( if i init it at 1 then the transition works with clicks ).
I made a fiddle with a little example of what I'm talking about, I hope you can understand what I want by looking at it in case i failed at explaining it with words: http://jsfiddle.net/mcczrbgg/1/
Thanks in advance!

That If/Else that sets up mouseovers on line 21 only runs once.
Try making a .mouseenter() function AND the .click() function, but in each one, check the state of toggle button:
$(".thumb").mouseenter(function() {
if (toggleButton === 0) {
}
}
$(".thumb").click(function() {
if (toggleButton === 1) {
{
}
Is that what you had in mind?

The reason it is not working is because youre only running the function once at load. You need to also make sure the function runs every time you run the toggle event.
This is what I would do:
$(function(){
var toggleButton = 0 ;
console.log(toggleButton);
$('.switchButton').toggle(function(){
toggleButton = 1 ;
$('.toggleButton').css({'transform' : 'rotateZ(0deg)'});
$('#hover').removeClass('active');
$('#click').addClass('active');
console.log(toggleButton);
runTransition();
}, function(){
toggleButton = 0 ;
$('.toggleButton').css({'transform' : 'rotateZ(180deg)'});
$('#hover').addClass('active');
$('#click').removeClass('active');
console.log(toggleButton);
runTransition();
});
runTransition();
// thumb hover
function runTransition(){
if ( toggleButton == 0 ) {
$('.thumb').mouseenter(function(){
$('.overlay').css({'left' : '-100%'});
}).mouseleave(function(){
$('.overlay').css({'left' : '0%'});
});
} else {
$('.thumb').unbind('mouseenter mouseleave');
$('.thumb').toggle(function(){
$('.overlay').css({'left' : '-100%'});
}, function(){
$('.overlay').css({'left' : '0%'});
});
}
}
});

jQuery dialog error when opening dialog second time - TypeError: oa is not a function

I am showing a dialog using function shown below when someone clicks on element with id mydialog. The page that is shown loads following javascripts
jquery-2.1.0.js
jquery-ui.js
highcharts/js/highcharts.js
( highchart is graphing library )
This all works beautifully when someone click on element with id mydialog. but when someone click on that element second time I see following error.
TypeError: oa is not a function
if ( typeof module === "object" && typeof module.exports === "object" ) {
What am I doing wrong,
[ it appears that when second time dialog opens jQuery is not initialized before highchart tries to access some methods? ]
What cleanup if anything am I missing when user clocks the dialog?
$(function(){
$('.mydialog').on('click', function(e){
e.preventDefault();
$('<div/>', {'class':'myDlgClass', 'id':'link-'+($(this).index()+1) }).
load($(this).attr('href')).appendTo('body').dialog({
title: 'MyDialog',
width: 700,
height: 375,
modal: true,
close: function() {
id_to_remove = 'link-'+($(this).index()+1)
alert("Destroy Dialog " + id_to_remove);
$(id_to_remove).remove();
//$(this).dialog('destroy');
}
});
});
});
The html page that gets opened is uses following javascript
I have two jsFiddle trying to re-create problem but I am coming across CORS issue
This is content of the dialog
http://jsfiddle.net/snijsure/6v0ozwt6/
This is to open dialog
http://jsfiddle.net/snijsure/fgb8cvtv/

Check whether you are giving a valid input as expected.

jQuery script fires twice? Perhaps live event is firing twice?

I am building an application using the latest version of PhoneGap, jQM and jQuery 1.8.0. So far so good except for this tiny and annoying problem I came across.
I have my show.html linked from the index.html that contains the following code:
<div id="search"> contains search bar and submit button </div>
<div id="list" style="display:none;">
<ul data-role="listview" data-filter="true"> </ul>
</div>
The ul tag is empty because the list will be dynamically appended to it using ajax when the submit button is clicked. I didn't want to display the #list div at first so I set the display to none.
So this works fine, when the submit button is clicked, it will send an ajax request to the server and append the items to the list. It will also hide the search div. This works alright as well!
Now the problem comes in, I added a window.scroll function to detect when the bottom of the page is reached.
Here's my jQuery code:
$(document).on("pageshow", "#pageID", function() {
$("#submit").click(function() {
$.ajax({
success: function(data, status){
$('#search').hide();
$('#list').show();
//append to list div and refresh list here
}
});
});
//detects bottom of page
$(window).scroll(function () {
if ($(window).scrollTop()+200 >= ($(document).height() - ($(window).height()))) {
console.log('end of the page');
lastPostFunc(); //infinite scroll function
}
});
});
This prints 'end of the page' two times to the firebug console! This script exists in between the head tag.
Is there anyway to just make it print once? I need this because I implemented my own endless scroll function and the problem is causing my ajax request to post twice to the server. The function works great but is not the cause of the problem because even when I commented lastPostFunc() out, it still prints to the console twice!!
Edit: Personally, I don't think the answers given so far are wrong, they are correct but they do not help me solve the problem. Maybe I need to rephrase things better. I copied my code and pasted it on a standalone page, it prints only once, so my code actually has nothing wrong with it and it's working like it should be.
Therefore, I was wondering whether there's something else that's causing it to print twice after submitting the form. My form and my results page is ON the same page. Does this means it caused the live event to work twice? Thus, causing it to print to the console twice on pageshow? If I am correct, is there anyway to work around this and making it only print ONCE?
Any help is appreciated. Thank you!

Okay I finally solved it.
Apparently all I have to do is to add this line of code to it:
$(window).scroll(function (e) {
if (reach bottom) {
e.stopImmediatePropagation();
console.log('End of the Page');
}
});
And it works! Stopped printing twice for me.

Your function will actually write output to the console more than two times. The problem lies within your condition:
if ($(window).scrollTop()+200 >= ($(document).height() - ($(window).height())))
Because for every scroll within this area the condition will evaluate to true. You could change it to:
if ($(window).scrollTop() == ($(document).height() - ($(window).height())))

May this will solve your problem
jQuery(window).scroll(function() {
if( (jQuery(document).height() < (jQuery(window).scrollTop() + jQuery(window).height() + 200))&&(jQuery(document).height() > (jQuery(window).scrollTop() + jQuery(window).height() + 99))) {
console.log('test')
}
});
//Update
var lastlogtime= null;
jQuery(window).scroll(function() {
if( (jQuery(document).height() < (jQuery(window).scrollTop() + jQuery(window).height() + 200))&&(jQuery(document).height() > (jQuery(window).scrollTop() + jQuery(window).height() + 99))) {
if(((lastlogtime+600)<(+new Date())) || (lastlogtime== null)){
//your scroll logic
console.log('test') ;
lastlogtime= +new Date();
}
}
});

One piece of Javascript stopping another from loading

The below code, seems to cancel each other out, the top one works but the bottom one doesn't but when I remove the top part it all works fine!
A working example of both can be found here: http://www.healthygit.com as you can see the fade on the menu doesn't work but the accordion does... Does anyone know what's causing this?
<script>
$(function() {
$('#slidorion').slidorion({
first: 2,
easing: 'easeInOutCubic',
effect: 'random'
});
});
</script>
<title>Healthy Git | Health And Fitness Guide</title>
</head>
<body>
<div id="headerimage"></div>
<script type="text/javascript">
$(document).ready(function($){
$('.megamenu').megaMenuCompleteSet({
menu_speed_show : 300, // Time (in milliseconds) to show a drop down
menu_speed_hide : 200, // Time (in milliseconds) to hide a drop down
menu_speed_delay : 300, // Time (in milliseconds) before showing a drop down
menu_effect : 'hover_fade', // Drop down effect, choose between 'hover_fade', 'hover_slide', etc.
menu_click_outside : 1, // Clicks outside the drop down close it (1 = true, 0 = false)
menu_show_onload : 0 // Drop down to show on page load (type the number of the drop down, 0 for none)
});
});
</script>

Your javascript has errors in it.
Uncaught TypeError: Object [object Object] has no method 'megaMenuCompleteSet'
Either your menu is not loaded properly or not initialized, i guess.
You can debug javascript with Firebug(FF) or Inspect Element(Chrome)

I don't see anything specifically wrong, but it's hard to see without the rest of the code. My guess is that the slidorion function has not been added to the jQuery prototype, ie:
$.fn.slidorion = function() {
//do something
}

javascript variables not setting - checked via firebug

I'm new to stackoverflow!
I'm having problems with a piece of code for my companies website, using jquery. I'm trying to track the clicks on two button and set a variable/s which can then be used to determine a course of action. Basically its a sliding dropdown that animates one way if the variable is set to true and another if it is set to false. I've initiallised the variables both to be false to begin with and then through the course of clicking they should be set to true or false depending on the situation:
var boollogin = false;
var boolregister = false;
$(document).ready(function(){
$('#slidedownlogin').hide();
$('#details_add_area').hide();
$('#emailconfirmation').hide();
$('#register').toggle(function(){
if(boollogin == false){
$('#login_area').hide();
$('#register_area').show();
$('#details_add_area').hide();
$('#slidedownlogin').animate({'height':'235px'},1500, 'easeOutExpo');
}else{
$('#slidedownlogin').animate({'height':'0px'},1500, 'easeOutExpo',function(){
$('#login_area').hide();
$('#details_add_area').hide();
$('#register_area').show();
$('#slidedownlogin').animate({'height':'235px'},1500, 'easeOutExpo');
});
}
boolregister = true;
} , function(){
$('#slidedownlogin').animate({'height':'0px'},1500, 'easeOutExpo', function(){
$('#slidedownlogin').children().hide();
});
boolregister = false;
boollogin = false;
});
$('#login').toggle(function(){
if(boolregister == false){
$('#register_area').hide();
$('#details_add_area').hide();
$('#login_area').show();
$('#slidedownlogin').animate({'height':'220px'},1500, 'easeOutExpo');
}else{
$('#slidedownlogin').animate({'height':'0px'},1500, 'easeOutExpo',function(){
$('#register_area').hide();
$('#details_add_area').hide();
$('#login_area').show();
$('#slidedownlogin').animate({'height':'220px'},1500, 'easeOutExpo');
});
}
boollogin = true;
} , function(){
$('#slidedownlogin').animate({'height':'0px'},1500, 'easeOutExpo', function(){
$('#slidedownlogin').children().hide();
});
boollogin = false;
boolregister= false;
});
});
The page I'm working on is at http://www.premiersoftware.co.uk/index94.php. Full code is in the php file at the moment so you can look at it there too. You should be able to get an idea of what I'm trying to do by clicking the two links (Register and Login) at the top right of the page.These are supposed to reset the variables boollogin or boolregister, but inspecting these two variables in firebug reveals they aren't being reset and don't change. As a result the page initially acts as expected but after a while and a few clicks it gets really quirky. The form valitation and stuff hasn't been done yet as I'm trying to get the animation sorted first.
I was hoping someone here would be able to shed some light on why the variables aren't being reset and suggest how I could fix the code. If there is another way to create the same kind of functionality I'm also open to suggestion.
Thanks in advance
Dan

I think instead of closing the div that drops down and then opening it up again when the user switches between login and register, it may be more intuitive to just display the correct register or login form within the opened div.
This code may help you regardless, but it implements what I suggested above.
http://jsbin.com/etezo5
edit link so you can see the code:
http://jsbin.com/etezo5/edit

have you tried doing something like:
$('Register').appendTo('#support').css({'float':'right','margin-right':'10px'});
$('Login').appendTo('#support').css({'float':'right','margin-right':'10px'});
Then in your JS,
function toggleTheCorrectDiv(toggleRegister){
if (toggleRegister){
//Show Register Content
}else{
//Show Login Content
}
}