We Keep Coding

JQuery in JS function doesn't work on the first click, but works after doing something else with that element.

I am new to JQuery and Javascript, and after searching for an answer to my problem I am having a difficult time resolving it. I have a Javascript function openNav that is working perfectly to open and close a sidebar that I have built on my webpage, but I have a line of JQuery inside of the function that doesn't seem to work initially.
The goal of the code is to have a glyphicon change when the menu is opened and closed, and it works fine when clicking on the glyphicon itself. There are about 12 additional "menu" buttons that will also open the side bar. The sidebar opens just fine when clicking any of these buttons, however I cannot get the glyphicon to change on the initial click.
function openNav() {
var sideNavBarElement = document.getElementById("sideNavBar");
if (sideNavBarElement.style.width == "0px")
$('#menutoggle').find('span').toggleClass('glyphicon-menu-right').toggleClass('glyphicon-menu-left');
sideNavBarElement.style.width = "250px";
document.getElementById("main-body").style.marginLeft = "285px";
}
I have added this function into the code for each of my menu buttons, and after the menu is opened the first time the glyphicon will alternate using this code, but the very first time it is clicked it does not change. Any help is appreciated. Thanks!

Using javascript to close a foundation 4 dropdown button menu window

I am struggling with a JavaScript / jQuery issue. I am developing with foundation 4. I have a group of 5 buttons. Two of the buttons are dropdown buttons. When the dropdown button is pressed a window is presented with the dropdown options(links).
<a id="products" href="#" data-dropdown="prod" class="not_active_button_dropdown">Dropdown Button</a><br>
<ul id="prod" class="f-dropdown">
<li><a class="prod" href="index.php?info=basic">Basic</a></li>
<li><a class="prod" href="index.php?info=unifrost">Unifrost</a></li>
<li><a class="prod" href="index.php?info=teal">Teal-Sorb</a></li>
</ul>
Note: I created my own buttons classes with sass by mixin (class="not_active_button_dropdown").
Now I developed a script that loads the php response into a div #dropdownwrap, changes the buttons so it highlights the current button that has been pressed.
<script style="text/javascript">
$(document).on('click','a.not_active_button, a.prod', function(){
var href=$(this).attr('href');
var querystring=href.slice(href.indexOf('?')+1);
//get
$.get('index_jq.php', querystring, processResponse).error(errorResponse);
//reset all buttons to not active
//normal button
$('a.active_button').removeClass("active_button").addClass("not_active_button");
//dropdown button
$('a.active_button_dropdown').removeClass("active_button_dropdown").addClass("not_active_button_dropdown");
//if it is a normal button make it active
if ($(this).hasClass("not_active_button"))
{
$(this).addClass("active_button");
}
//if it is a dropdown button option link make it active
if ($(this).hasClass("prod"))
{
$('#products').removeClass("not_active_button_dropdown").addClass("active_button_dropdown");
//$('ul#prod.f-dropdown').close();
}
//slide down wrap
if ($('.dropdownwrap').is(":hidden")) {
$('.dropdownwrap').slideDown();
} else {
$('.dropdownwrap').slideToggle("slow");
$('.dropdownwrap').slideDown("slow");
}
return false; // stop the link
});
function processResponse(data) {
$('.dropdownwrap').html(data);
}
function errorResponse() {
var errorMsg = "Your request could not be processed right now.";
errorMsg += "Please try again.";
$('.dropdownwrap').html(errorMsg);
}
</script>
I am not that experienced with JavaScript or jQuery. Anyhow the problem is the following:
//$('ul#prod.f-dropdown').close();
which is commented out above. Everything works fine, my data loads and the dropdown button highlights. The problem is that the foundation 4 dropdown button window does not close after the script executes. This is because (I am guessing) I return false to stop the link from executing. So I tried to close the window using the above commented out line. When I uncomment the line, the window closes but the return false does not execute, that is the link is not disabled, it goes to the link, i. e. index.php?info=basic. So it seems when I add the close window statement, return false does not work. I tried adding the line after return false, but it does not close the dropdown menu.

The return false; not working is probably because there is some JavaScript error before it reaches that line. In this case, the error is calling .close() on something which does not have a close method. Instead, in order to call Foundation dropdown’s close method, you have to do something like the following:
$('#prod').foundation('dropdown', 'close', $('#prod'))
I guess there is a more elegant way to do this, but I found this to work. As a note, next time please post a minimal example on jsfiddle.net and link to it in your question. This makes reproducing your problem much easier.

You also need the data-dropdown-content attribute attached to the dropdown ul element.
Reference: https://github.com/zurb/foundation/issues/1831#issuecomment-15133817

How can I block clicks and Java Script in a HTML <div>

I have this HTML div with or withouth embeded content, I want to block right and left click.
So if the user clicks or right clicks nothing happens.
Can you do that with HTML/CSS/ Java Script ?
Basicly this is a question about breaking the rules, say you have an youtube embeded video in a div in html, how do you block the click from the user so that if he clicks the video he does not go to youtube dot com.
*note, i am not interested in youtube only, i just want a way to block clicks and right clicks in a div.
So take a much simple scenario:
In a basic HTML page, there is a div with absolute position and size, If the user clicks a link in that div I want it not to work, but if he clicks a link anywhere else on a page I want it to work.

Another way to do ignore the clicks is using css 'pointer-events'.
For instance:
div.style.pointerEvents = 'none'
OR
<div id="content" style="pointer-events:none;">

Use an overlay with a bigger DIV or use the following code
var event = $(document).click(function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
return false;
});

Guess this would help you:
function disableClick(){
if(window.event.target.id && window.event.target.id=="myDiv"){
window.event.preventDefault();
}
}
document.onclick = disableClick;
document.oncontextmenu = disableClick;

my menu button does not line up

http://www.spencedesign.netau.net/singaporehomemenu.html
This is the link to my page. When you click on menu it closes, or opens the menu, by bringing you to the other page, that doesn't have the menu. But, on the other page the menu button is not lined up. Even though the code for the button is the same on each page. Could someone tell me what I can do to fix this. Also, I don't know any javascript, so I had to make two pages instead of making the menu button work as an actual button and bring up/close the menu on one page. If anyone knows javascript, and knows a simple way to make the above scenario possible that would be greatly appreciated. Thank you.

You can do it using javascript.
Add this to your < head > tag:
<script type="text/javascript">
function showMenu() {
if (menu.style.display != "none") {
menu.style.display = "none";
}
else {
menu.style.display = "block";
}
}
</script>
And write this in your < body > section:
<div id="menuButton" onclick="showMenu()">Menu
</div>
This ought to do the trick. :)

Javascript Drag and Drop Script

Okay, so I have questions about two things. Look at my drag and drop script on: http://bouncygames.org/smell.php. First of all, when I click the X button on the draggable window I made, I need to click it twice, the first time I click it, things get all messed up, then I have to click it again for everything to disappear. How do I make it so I can only click the X one, to get the window div to disappear Also, I want it so only if you drag the TITLE place, it drags, not the main part of the div. How can I make it so I can control the window with only the title? Thanks.

or better
function setVisibility(id) {
document.getElementById(id).style.display = 'none';
//What is the rest here?
if(document.getElementById('aid').value=='Hide Layer'){
document.getElementById('aid').value = 'Show Layer';
document.getElementById(id).style.display = 'none';
}else{
document.getElementById('aid').value = 'Hide Layer';
document.getElementById(id).style.display = 'inline';
}
}

I created an example for you where:
The dialog is dragged using only the title bar.
The close button closes the dialog.
I know it is not a answer with deal with your code and I'm using jQuery and jQueryUI (the draggable module), but I think that using this approach would be better since the draggable issues are well controled by a tested library like jQueryUI.
Tale a look: http://jsfiddle.net/davidbuzatto/s9T4b/