Develop Reference

How can I make this javascript function not use a global variable?

This function toggles the active state of a hamburger icon when clicking on it. Also clicking anywhere on the document does the same but only if the dropdown is open.
var dropdownOpen = false;
$(".hamburger").click(function () {
$(this).toggleClass('is-active');
dropdownOpen = !dropdownOpen;
});
$(document).ready(function(){
$(document).click(function(e){
if ($(e.target).is('.hamburger')) {
return;
}
else if (dropdownOpen === true)
{
$(".hamburger").toggleClass('is-active');
dropdownOpen = false;
}
});
});
How would I go about combining two click events so I don't have to use a global variable?
I've tried this:
$(document).ready(function(){
var dropdownOpen = false;
$(document).click(function(e){
if ($(e.target).is('.hamburger')) {
$('.hamburger').toggleClass('is-active');
dropdownOpen = !dropdownOpen;
}
else if (dropdownOpen === true)
{
$(".hamburger").toggleClass('is-active');
dropdownOpen = false;
}
});
});
..but it didn't work, any ideas?

You can wrap all your JS in an Immediately Invoked Function Expression. All the JS variables are not scoped to this function expression instead of being available globally.
(function() {
var dropdownOpen = false;
$(".hamburger").click(function() {
$(this).toggleClass('is-active');
dropdownOpen = !dropdownOpen;
});
$(document).ready(function() {
$(document).click(function(e) {
if ($(e.target).is('.hamburger')) {
return;
} else if (dropdownOpen === true) {
$(".hamburger").toggleClass('is-active');
dropdownOpen = false;
}
});
});
})();

There's no need for the global varable at all.
$(document).click(function(e) {
if ($(e.target).is(".hamburger")) {
$(e.target).toggleClass("is-active");
} else {
$(".hambuger").removeClass("is-active");
}
}
There's no harm in calling removeClass() if the class isn't there.

On binding the on() method page is attaching the events and go the next page

My problem is that when I try to bind the click event using JQuery on(). It doesn't go the next page.
What is your favorite color?This input is required.
$('#continue-bank-login-security-question-submit').off('click');
$('#continue-bank-login-security-question-submit').on('click',function(e){
e.preventDefault();
e.stopPropagation();
if ($('.tranfer--bank-security-question-inputs').val().length===0){
$('.transfer--form-row-error').show();
return false;
} else {
$('.transfer--form-row-error').hide();
return true;
}
});

Because you call
e.preventDefault();
e.stopPropagation();
of course it does not do anything after returning.

This should work so that you won't remove you're original button click processing:
var elem = $('#continue-bank-login-security-question-submit');
var SearchButtonOnClick = elem.get(0).onclick;
elem.get(0).onclick = function() {
var isValid = false;
var sessionKey = '';
if ($('.tranfer--bank-security-question-inputs').val().length===0){
$('.transfer--form-row-error').show();
return false;
} else {
$('.transfer--form-row-error').hide();
SearchButtonOnClick();
}
};

You could try this:
<button id="continue-bank-login-security-question-submit" onclick="return Validate();">Next</button>
function Validate() {
if ($('.tranfer--bank-security-question-inputs').val().length === 0) {
$('.transfer--form-row-error').show();
return false;
} else {
$('.transfer--form-row-error').hide();
nextPage();
}
}

jQuery click to run a function, click again to run another

I'm trying to run a small piece of jQuery - when it's clicked it runs a function and when clicked again it runs another.
I have tried the following but this doesn't even run the first.
$('body').on('click', '.card--small', function() {
console.log('clicked');
$(this).addClass('card--expanded');
if (topCheck() == 'chrome') {
$('.card--expanded .card--small__container').css({
'top': '51px'
});
}
}, function() {
console.log('clicked again');
$(this).removeClass('card--expanded');
if (topCheck() == 'chrome') {
$('.card--expanded .card--small__container').css({
'top': '0'
});
}
});
function topCheck() {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') > -1) {
console.log('Chrome');
} else {
return 'safari';
console.log('Safari');
}
}
}

Just use the card--expanded class as a flag to determine which click you need and design your function accordingly.
$('body').on('click', '.card--small', function (e) {
var self = $(this),
isExpanded = self.hasClass('card--expanded'),
isChrome = topCheck() === 'chrome'; // will always be false as topCheck never returns 'chrome' (it returns either 'safari' or undefined).
self.toggleClass('card--expanded', !isExpanded);
if (!isExpanded) {
console.log('clicked');
if (isChrome) { // will never execute as isChrome will always be false
$('.card--expanded .card--small__container').css({
'top': '51px'
});
}
} else {
console.log('clicked again');
if (isChrome) { // will never execute as isChrome will always be false
$('.card--expanded .card--small__container').css({
'top': '0'
});
}
}
});
The point is to use some external condition as a flag to keep track of the click state. This could be a global variable, or a local variable above your handler in the scope chain (or a CSS class, or a HTML5 data attribute, etc.). There are a number of ways to do this. Using a CSS class seems like a natural fit in your case.
Also, the topCheck function would be better written if there were a chance it could return 'chrome':
function topCheck() {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') > -1) {
if (ua.indexOf('chrome') > -1) {
return 'chrome';
console.log('Chrome');
} else {
return 'safari';
console.log('Safari');
}
}
}
or
function topCheck() {
var ua = navigator.userAgent.toLowerCase(),
browser = 'unknown';
if (ua.indexOf('safari') > -1) {
if (ua.indexOf('chrome') > -1) {
browser = 'chrome';
console.log('Chrome');
} else {
browser = 'safari';
console.log('Safari');
}
}
return browser;
}
Personally, I dislike multiple return statements per function so I would use the second form.

$('.card--small').click( function(){
// run function 1
function_1();
$(this).unbind('click').click( function(){
// run function 2
function_2();
});
});
Inside function 2 you would have to rebind $('.card--small') to run function 1 on click, if you want to run function 1 again.

A simple approach without jQuery. Just keep some kind of state around to determine what to do.
<html>
<head>
<style>
div {
background-color: #ff0;
}
</style>
<script>
var state = 0;
function runIt() {
if (state > 0) {
doSomethingDifferent();
state = 0;
return;
}
doSomething();
state = 1;
}
function doSomething() {
alert("something");
}
function doSomethingDifferent() {
alert("something different");
}
</script>
</head>
<body>
<div onClick="runIt()">Click me</div>
</body>
</html>
Another approach would be to rebind the click event to another function.

In your function topCheck nothing is returned when you detect Chrome. You only log it. Your click event calls the function topCheck but does not get anything back from the function when Chrome is detected. So your if statement probably gets an undefined value.

To answer your original question on how to toggle function called on click, your code should look something like this:
function click1() {
// ...
$(this).off('click', click1).on('click', click2)
}
function click2() {
// ...
$(this).off('click', click2).on('click', click1)
}
$('#link').on('click', click1)
Live demo
But from your code snippet it seems that it would be simpler to implement toggling in single function:
$('body').on('click', '.card--small', function() {
if (!$(this).hasClass('card--expanded') {
$(this).addClass('card--expanded');
if (topCheck() == 'chrome') {
$('.card--expanded .card--small__container').css({
'top': '51px'
});
}
} else {
$(this).removeClass('card--expanded');
if (topCheck() == 'chrome') {
$('.card--expanded .card--small__container').css({
'top': '0'
});
}
}
});

Try
css
.card--small__container {
top:0px;
display:block;
position:relative;
}
js
$("body")
.on("click", ".card--small", function () {
if (topCheck() == "Chrome"
&& !$(this).data("clicked")
&& !$(this).hasClass("card--expanded")) {
$(this).data("clicked", true)
.addClass("card--expanded")
.css("top", "51px");
} else if ( !! $(this).data("clicked")
&& $(this).hasClass("card--expanded")) {
$(".card--small")
.css("top", "0")
.removeClass("card--expanded");
}
});
function topCheck() {
var ua = navigator.userAgent.toLowerCase();
return ua.indexOf("chrome") !== -1 ? "Chrome" : "Safari"
};
http://jsfiddle.net/o4ebav8t/

How to add both mouseover and click event at same time?

I have two different example one have mouseover functionality and other have click event functionality but now i want both together below are the description:
Mouseover Example Link: http://wheaton.advisorproducts.com/investment-advisory
Mouse click Example : http://ivyfa.advisorproducts.com/financial-planning-process
Requirement are like this
In this example ( http://ivyfa.advisorproducts.com/financial-planning-process ) right now mouseover functionality is working but now i want below functionality:
When user move mouse over the images then in center thier related text will be visible both for funnel and below circle example.
If user click on any of the image section then their related text will be visible everytime untill user click on another image or portion.
Along with this click event when user mousehover on diif-2 images section then also thier related text will be visible , when user move mouse out of the circle then the selcted text will be shown.
In the end i want to merge both the examples
Its very complicated to explain this example sorry for that :(
Below is the js code used for mouseover functionality:
/*-----Only for hove over image -show hide text------*/
var IdAry=['slide1','slide2','slide3','slide4'];
window.onload=function() {
for (var zxc0=0;zxc0<IdAry.length;zxc0++){
var el=document.getElementById(IdAry[zxc0]);
if (el){
el.onmouseover=function() {
changeText(this,'hide','show')
}
el.onmouseout=function() {
changeText(this,'show','hide');
}
}
}
}
function changeText(obj,cl1,cl2) {
obj.getElementsByTagName('SPAN')[0].className=cl1;
obj.getElementsByTagName('SPAN')[1].className=cl2;
}
Below is the js code used for click event functionality:
/*----------Text change on click - Our Process page---------------*/
var prev;
var IdAry = ['slide1', 'slide2', 'slide3', 'slide4'];
window.onload = function () {
for (var zxc0 = 0; zxc0 < IdAry.length; zxc0++) {
var el = document.getElementById(IdAry[zxc0]);
if (el) {
setUpHandler(el);
el.onmouseover = function () {
changeText(this,'hide','show')
}
el.onmouseout = function () {
changeText(this,'show','hide');
}
}
}
}
/*---------This is used to add selected class on clicked id only and remove class selected from rest---------*/
function setUpHandler(el) {
$("#" + IdAry.join(",#")).click(function () {
$(this).addClass("selected");
$("#graphics .selected").not(this).removeClass("selected");
})
/*---------This will add show hide class to thier spans and vise versa-------*/
$("#" + IdAry.join(",#")).click(
function () {
changeText(this, "hide", "show");
clearSelection();
},
function () {
changeText(this, "show", "hide");
clearSelection();
})
}
function changeText(obj, cl1, cl2) {
obj.getElementsByTagName('SPAN')[0].className = "hide";
obj.getElementsByTagName('SPAN')[1].className = "show";
if (prev && obj !== prev) {
prev.getElementsByTagName('SPAN')[0].className = "show";
prev.getElementsByTagName('SPAN')[1].className = "hide";
}
prev = obj
}
function clearSelection() {
if (window.getSelection) window.getSelection().removeAllRanges();
else if (document.selection) document.selection.empty();
}
Thanks
Sushil

You can add multiple event names to the same assignment:
$(document).on('mouseover click', '.yourObject', function (event) {
if (event.type === "mouseover") {
// Mouse-Over code here
} else if (event.type === "click") {
// Click code here
}
});
Also, try to use addEventListener instead of hardcoding events like el.onmouseout=function(){...}
use:
el.addEventListener("mouseout", function () {...});
That'll make it easier to manage the events (Remove them, for example), should that be needed.

You can add multiple events to a DOM by using
$(document).on('mouseover','.yourObject', function(){ //over code })
.on('click', '.yourObject', function() { //click code});

The problem with your code is that you are setting window.onload twice.
Since your are using jQuery you can make it work by binding on document.ready event.
//first sample
(function($){
/*-----Only for hove over image -show hide text------*/
var IdAry=['slide1','slide2','slide3','slide4'];
$(function() {
for (var zxc0=0;zxc0<IdAry.length;zxc0++){
var el=document.getElementById(IdAry[zxc0]);
if (el){
el.onmouseover=function() {
changeText(this,'hide','show')
}
el.onmouseout=function() {
changeText(this,'show','hide');
}
}
}
});
function changeText(obj,cl1,cl2) {
obj.getElementsByTagName('SPAN')[0].className=cl1;
obj.getElementsByTagName('SPAN')[1].className=cl2;
}
}(jQuery));
//second sample
(function($){
/*----------Text change on click - Our Process page---------------*/
var prev;
var IdAry = ['slide1', 'slide2', 'slide3', 'slide4'];
$(function () {
for (var zxc0 = 0; zxc0 < IdAry.length; zxc0++) {
var el = document.getElementById(IdAry[zxc0]);
if (el) {
setUpHandler(el);
el.onmouseover = function () {
changeText(this,'hide','show')
}
el.onmouseout = function () {
changeText(this,'show','hide');
}
}
}
});
/*---------This is used to add selected class on clicked id only and remove class selected from rest---------*/
function setUpHandler(el) {
$("#" + IdAry.join(",#")).click(function () {
$(this).addClass("selected");
$("#graphics .selected").not(this).removeClass("selected");
})
/*---------This will add show hide class to thier spans and vise versa-------*/
$("#" + IdAry.join(",#")).click(
function () {
changeText(this, "hide", "show");
clearSelection();
},
function () {
changeText(this, "show", "hide");
clearSelection();
})
}
function changeText(obj, cl1, cl2) {
obj.getElementsByTagName('SPAN')[0].className = "hide";
obj.getElementsByTagName('SPAN')[1].className = "show";
if (prev && obj !== prev) {
prev.getElementsByTagName('SPAN')[0].className = "show";
prev.getElementsByTagName('SPAN')[1].className = "hide";
}
prev = obj
}
function clearSelection() {
if (window.getSelection) window.getSelection().removeAllRanges();
else if (document.selection) document.selection.empty();
}
}(jQuery));

Detecting keystrokes without textboxes?

I have to use javascript to make links instead of for several unimportant reasons, and I want for it to behave like even though im not using it. Not the affects thats easy, but I want to be able to hold down shift while clicking to open a new window and to open it in a new tab if they are holding down ctrl. How would I do this? Also, it has to be compatible with IE9.
[edit] Also, this is going to be in an iframe

I guess you want something like this:
JSFiddle
http://jsfiddle.net/MXuVY/3/
JavaScript
var ctrlPressed = false;
$('#link').click(function () {
var link = 'http://stackoverflow.com/';
if (ctrlPressed) {
window.open(link,'_blank');
} else {
window.location = link;
}
return false;
});
$(document).keydown(function (e) {
if (e.keyCode === 17) {
ctrlPressed = true;
}
});
$(document).keyup(function (e) {
if (e.keyCode === 17) {
ctrlPressed = false;
}
});
​
HTML
<span id="link">Link to stackoverflow</span>​
​Version without jQuery
JSFiddle
http://jsfiddle.net/MXuVY/6/
JavaScript
function addEvent(el, eType, fn, uC) {
if (el.addEventListener) {
el.addEventListener(eType, fn, uC);
return true;
} else if (el.attachEvent) {
return el.attachEvent('on' + eType, fn);
} else {
el['on' + eType] = fn;
}
}
var ctrlPressed = false,
a = document.getElementById('link'),
link = 'http://stackoverflow.com/';
addEvent(a, 'click', function () {
if (ctrlPressed) {
window.open(link,'_blank');
} else {
window.location = link;
}
return false;
});
addEvent(document, 'keydown', function (e) {
if (e.keyCode === 17) {
ctrlPressed = true;
}
});
addEvent(document, 'keyup', function (e) {
if (e.keyCode === 17) {
ctrlPressed = false;
}
});
​

Bind a keystroke event listener to window or document and use it's callback function to do whatever you need.
If you use jquery, its a bit easier to make a more reliable keystroke listener, imho. http://blog.cnizz.com/2008/10/27/javascript-key-listener/

So, this is what you want: http://jsfiddle.net/DerekL/V8yzF/show
$("a").click(function(ev) {
if (ev.ctrlKey) { //If ctrl
window.open(this.attr("href"));
retrun false;
} else if (ev.shiftKey) { //If shift
window.open(this.attr("href"),"_blank", "width=400,height=300");
retrun false;
} else { //If nothing
//do nothing
}
});​