Develop Reference

why do my onClick functions take two clicks

I've noticed from a few different projects of mine that whenever I click something I add an onClick function to, it always takes two clicks to get them going when a page is freshly loaded. The general structure I use for them is:
function PageChange(){
var welc_p = document.getElementById("welcome");/**gathers page DIVs**/
var page01 = document.getElementById("page01");
var page02 = document.getElementById("page02");
var start = document.getElementById("start_btn");/**gathers buttons**/
var p1_back = document.getElementById("p1_back");
var p1_next = document.getElementById("p1_back");
var p2_back = document.getElementById("p2_back");
var p2_next = document.getElementById("p2_back");
start.onclick=function(){
page01.style.display="block";
welc_p.style.display="none";
window.location="#page01";
};
}/**function**/
then the way I call it in the html is
<div class="some_class" id="start_btn" onClick="PageChange()">!!!LETS GET STARTED!!!</div>
Here's a fiddle of it as well.
https://jsfiddle.net/Optiq/42e3juta/
this is generally how I structure it each time I want to create this functionality. I've seen tons of other posts on here about their items taking 2 clicks to activate but none of them were doing anything near what I was trying to accomplish and it seemed their problem was within their coding. Does anybody know why this is happening?

This is because you are attatching a event handler to your button on click of your button.
This means that one click of the button activates the event handler, not the code within start.onclick=function() {
Then, the second click works becasue the event handler has been activated, and now the code will run.
Try moving your code out of the function, then it will work with just one click

Just had the same issue, and found an easy solution based on the above answer.
Since your function needs two clicks to work, I just called the function above the function and it works fine. This way the function already gets called one time on load, then it gets called the second time when you click it.
yourFunction();
function yourFunction(){
-- content --
}

I also had the same 2 clicks required on intitial interaction and after many searches couldn't find the best solution for my specific nav menu. I tried this solution above but couldn't get it to work.
Stumbled upon this code from a youtube example and it solved my issue. I wanted to nest submenu's for multiple levels and modified it from its original implementation to work best for my responsive mobile menu.
var a;
function toggleFirstLevelMobileSubMenu(){
if(a==1){
document.getElementById("mobile-sub-menu-depth-1").style.display="none";
return a=0;
}
else {
document.getElementById("mobile-sub-menu-depth-1").style.display="flex";
return a=1;
}
}
var b;
function toggleSecondLevelMobileSubMenu(){
if(b==1){
document.getElementById("mobile-sub-menu-depth-2").style.display="none";
return b=0;
}
else {
document.getElementById("mobile-sub-menu-depth-2").style.display="flex";
return b=1;
}
}
Of course, in the CSS I had display: none set for both ID's.

First, the problem:- On first click instead of running js your browser runs the button aka the event.
Solution:- in order to resolve this we need to make sure our function is already before the event is run (this is one of the ways to solve the problem). To achive this we need to load the function aka call the function in some way.
So, i just simply called the function after function is completed.
Code answer-
Just add at the end of your code
PageChange();

casperjs: how do I click a remote div and then update it's class name?

As a way of learning CasperJS, I am trying to initiate a click event on a div on a remote page, and then change the class name of the div after I have clicked it. The idea is to find the first clickable div, click it, and then mark it as clicked so I can skip over it to other clickable divs. The markup for the div tag on the remote page looks like:
<div class='clickable_div'></div>
I have tried the following casperjs code:
...
casper.then(function() {
if( this.exists( 'div.clickable_div' ) ) {
this.evaluate(function() {
this.click(document.querySelector('div.clickable_div'));
return document.querySelector('div.clickable_div').setAttribute("className","clicked");
});
}
});
...
It doesn't seem to work. First, I don't think I am initiating the mouse click event on the div correctly. What am I missing? Second, when I fetch the updated html, I don't see any changes in the div's class name. Am I going about this step in the wrong way?

You're calling this.click within evaluate(), it just can't work as evaluate() executes code within the page DOM context where there's probably no window.click method.
Here's a possibly working script:
var linkSelector = 'div.clickable_div';
casper.then(function() {
if (!this.exists(linkSelector)) return;
this.click(linkSelector);
this.evaluate(function(linkSelector) {
__utils__.findOne(linkSelector).setAttribute("className", "clicked");
}, linkSelector);
});
You may want to have better handling of errors and edge cases, but you get the idea.

JS Breakpoint doesn't get hit, but code executes

I have an unsual problem and working on it since hours. My breakpoint doesn't get hit within the function yet the functionality works, it is driving me crazy. I have tried this with both Chrome/developer tools and Firefox/Firebug. I never had something like this before.
The first breakpoint hits when I click on the button New Conversation.
But then when I click on Cancel Button that comes through the jquery .load() the break point doesn't hit. Yet the functionality behind it executes (the div gets emptied).
What am I missing please?
function cancel_new_conversation(event){
//2nd Breakppoint below this line doesn't get hit, but the empty() statement works.
event.preventDefault();
$('#new_conversation_div').empty();
}
function new_conversation(event){
event.preventDefault();
var url = $(this).attr("href") + "/";
$('#new_conversation_div').load(url, function(){
//1st Breakpoint gets hit.
$('#new_conversation_cancel_button').click(cancel_new_conversation);
});
}
$(document).ready(function (){
$('#new_conversation_button').click(new_conversation);
}
Is there anything I am doing that breaks the javascript somehow?
EDIT:
Good idea with the alerts. here is the proof. Maybe its an environment issue? I have to try it on a different machine.

After lunch yesterday in my infinite wisdom I had my partial html that I was meant to load with $('#new_conversation_div').load(url, function() designed as a full blown html with header and body.
Hence once it was loaded into my div, the html markup became completely a mess (two headers, two bodies)
I moved the javascript file from the corrupted partial html into my main html and removed the header and body from the partial html. Now that I .load() the partial html, it all works as expected and the breakpoint hits. It was very hard to find.
Hope this helps someone else.

The only problem i can see in your code is that you don't unbind click event on #new_conversation_cancel_button when loading a new conversation.
If you use jquery >1.7, you should test following code:
function cancel_new_conversation(event){
//2nd Breakppoint below this line doesn't get hit, but the empty() statement works.
event.preventDefault();
console.log("cancel_new_conversation");
$('#new_conversation_div').empty();
}
function new_conversation(event){
event.preventDefault();
var url = $(this).attr("href") + "/";
$('#new_conversation_div').load(url, function(){
//1st Breakpoint gets hit.
$('#new_conversation_cancel_button').off('click').on('click',cancel_new_conversation);
});
}
$(document).ready(function (){
$('#new_conversation_button').on('click',new_conversation);
});
​

How to create a global function that closes a jQuery colorbox?

First I am using the jQuery colorbox plugin that is working fine so far but then I want to close the colorbox using a button. Unfortunately I can't just trigger the click event on that button by selecting its ID using jQuery, instead of that the button must call a javascript function called closepan() (this behavior is unfortunately mandatory for me).
I tried to create the function
closepan() {
$.colorbox.close();
}
first case : inside the
$(document).ready(function(){...});
but then I got the error closepan is undefined.
second case : before the
$(document).ready(function(){...});
but then it's the colorbox method that is undefined!
I gave up after gazillion hours of fiddling with several solutions I've found all around stackoverflow.com regarding this topic! I can't figure out how to make this working!
In other words, how to create a function named closepan() that can execute $.colorbox.close(); while being available globally for my button?

No matter where you create a variable or function if you create it on window it will be available globally.
window.closepan = function() {
// hello there
}

function closepan() {
if($.colorbox) {
$.colorbox.close();
}
}
However, at the point where someone clicks your button all external scripts should have been loaded so that check shouldn't be necessary...

Don't forget to put the keyword function in front of your declaration...
function closepan() {
$.colorbox.close();
}
Working JSFiddle

JavaScript changes to style being delayed

I'm running into a little problem that's driving me crazy, and I'd welcome any thoughts as to the cause. At this point I feel like I'm just going 'round in circles.
I have the following code:
function JSsortTable(phase) {
dynaLoadingDivShow();
createSortArray();
dataArr = do2DArraySort(dataArr, orderList, orderDir);
sortArrayToRs();
dynaListTable.tableControl.refreshTableViaObjects(rsDynaList, colObjs);
dynaLoadingDivHide();
}
function dynaLoadingDivShow() {
document.getElementById('dynaReportGuiWorking').style.display = 'block';
document.getElementById('dynaReportGuiWorking').style.visibility = 'visible';
}
function dynaLoadingDivHide() {
document.getElementById('dynaReportGuiWorking').style.display = 'none';
document.getElementById('dynaReportGuiWorking').style.visibility = 'hidden';
}
<div style="visibility:hidden; display:none; z-index:25;" class="tableControlHeader" id="dynaReportGuiWorking">
Working...
</div>
I call JSsortTable as an onclick event. When I run the above code as is, I never see the div in question. The JSsortTable function takes some 800-2500 ms to run so it's highly unlikely I just missed it the 10+ times I tried. If I change the style of the div to start out visible, then it will remain visible until after JSsortTable has finished running and then disappear; exactly as expected. So I figured the problem was in dynaLoadingDivShow.
Now, I tried removing dynaLoadingDivHide to see what would happen and found something completely unexpected. The div will not appear when you the JSsortTable function fires. Instead, after all the other code has been run, when JSsortTable finishes, the div becomes visible. It's alomst as though IE (version 8) is saving up all the changes to the DOM and then waiting until the end to paint them. This is, obviously, not the desired behavior.
Anyone have any thoughts on this? I'm only allowed to have IE at work so I haven't tried this on other browsers. I have enough CSS/JS knowledge to be dangerous, but am by no means an expert yet. ;)
Thanks!

You'll need to use a timeout:
function JSsortTable() {
dynaLoadingDivShow();
setTimeout(JSortTableWork);
}
function JSortTableWork()
createSortArray();
dataArr = do2DArraySort(dataArr, orderList, orderDir);
sortArrayToRs();
dynaListTable.tableControl.refreshTableViaObjects(rsDynaList, colObjs);
dynaLoadingDivHide();
}
Note that I took out the parameter phase because it's not used in the function. If you do need the parameter then you'll need to modify the timeout as
setTimeout(function(){JSortTableWork(phase);});
and also add the parameter to JSortTableWork