We Keep Coding

Onclick function in anchor tag is not working

This is my code
<div id="bodyForm" style="display: none" class="feedback-modal feedback-css" data-html2canvas-ignore="true">
<div class="feedback-header" id="headerDiv">
<a class="feedback-close" id="closeSnip" onclick="close();">X</a>
<h4 id="feedbackHeader">Contact Development (Beta)</h4>
</div>
close() is not working
function close(){
$j("#bodyForm").css("dsiplay", "none");
document.getElementsByTagName("body")[0].className = "small";
document.getElementsByTagName("body")[0].style = "";
document.getElementsByTagName("body")[0].draggable = true;
return false;
}
i tried event listener its not working too please help

Try this in the js:
document.getElementById("closeSnip").onclick = close;
and remove the onClick attribute from the html

As shown in the picture. Maybe you typed a wrong word.

Handle two slideUp/Down via classes

i've two menus in mobile view of my website. If you click on the hamburger bar, they should slide down/up. This is basically no problem for me.
My HTML looks like this:
...
<div class="foo">
<div class="trigger menu1">
..
</div>
<div class="trigger menu2">
...
</div>
</div>
...
<nav id="main-navi">
...
</nav>
<ul id="info-navi>
...
</ul>
...
At the moment I solved it via jQuery with click-events for every single trigger. Like this...
...
$(".trigger.menu1").click(function() {
...
$("#main-navi").slideDown();
});
$(".trigger.menu2").click(function() {
...
$("#info-navi").slideDown();
...
});
...
This works fine, but I want to use it more easier and without so much code. Isn't it possible to get just an event for the .trigger and refer it just to the class to trigger the menu to slide down?
I tried it with something like, but it doesn't work:
if ($this.hasClass("menu1")) {
$("#main-navi").slideDown();
} else {
$("#info-navi").slideDown();
}
Is there a way to get this working?
Regards,
Markus

You already have solved your problem. Though there are other possible solutions to this, but this code works quite well for your purpose:
$(".trigger").on("click", function(e){
e.preventDefault();
if ($this.hasClass("menu1")) {
$("#main-navi").slideDown();
} else {
$("#info-navi").slideDown();
}
});//.trigger click

You can use HTML5 data-* attribute to achieve this:
$(function() {
$('.trigger').click(function(e) {
e.preventDefault();
$('#' + $(this).attr('data-target')).slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foo">
<div data-target="main-navi" class="trigger">
Menu Opener 1
</div>
<div data-target="info-navi" class="trigger">
Menu Opener 2
</div>
</div>
...
<nav id="main-navi">
Menu Slide 1
</nav>
<ul id="info-navi">
Menu Slide 2
</ul>

You are heading in the right direction, but you had a small syntax error in your code. Try this:
$('.trigger').on('click', function(){
var isMenu1 = $(this).hasClass('menu1');
if(isMenu1){
$("#main-navi").slideDown();
} else {
$("#info-navi").slideDown();
}
});
$this is incorrect, should have been $(this)

This might help you,
var clickedItem = $(".foo").find('div');
clickedItem.click(function(e){
e.prventDefault();
if($(this).hasClass('menu1')){
$("#main-navi").slideDown();
}else{
$("#info-navi").slideDown();
}
});

Why don't you use slideToggle() jquery function ?
You can find help here http://api.jquery.com/slidetoggle/ .

How to use the toggle function click open and close yet close menu when one selected

After searching through various tutorials i found something that almost fits my needs but i'm having trouble getting the menu to function how i really would like it too.
I set up a jsfiddle to show my efforts, i'm not very good at this even though i'm trying my best to understand.
http://jsfiddle.net/HZksH/2/
I would like some help on how i can get this menu , when in default to always show the content1 area, then if you toggle open the "Open/Close" buttom and menu1,menu2,menu3 appear , when i select any of the 3 , the content replaces the content1 and then closes the menu again
any ideas would be appreciated
<div class="menu">
<div class="submenu" id="menu" data-content="sort">menu1</div>
<div class="content" id="sort">content1</div>
<div class="submenu" id="menu1" data-content="1sort">menu2</div>
<div class="content" id="1sort">content2</div>
<div class="submenu" id="menu2" data-content="sort2">menu3</div>
<div class="content" id="sort2">content3</div>
</div>
$(document).ready(function() {
$('.menu').hide().before('Open/Close');
$('a#toggle-menu').click(function() {
$('.menu').slideToggle(1000);
return false;
});
$('.content').hide();
$('.submenu').click(function(){
$('.content:visible').hide('fast');
$('#' + $(this).data('content')).show('fast');
});
});

Here refer to this fiddle: http://jsfiddle.net/HZksH/3/
I have modified your js a bit
$(document).ready(function() {
$('.menu').hide().before('Open/Close');
$('a#toggle-menu').click(function() {
$('.menu').slideToggle(1000);
return false;
});
//$('.content').hide();
$('.submenu').click(function(){
$('.content:visible').hide('fast');
$('#' + $(this).data('content')).show('fast');
$('.menu').slideToggle(1000);
});
});
I hope it solves your problem

How to stay within a 'instance' using JQuery

I'm currently learning JavaScript/JQuery, but have an issue at work that I'm running into.
I've assigned a class of 'question' to an<a>tag, and 'answer' to a<div>. When a user clicks on the question, the answer will slide down. However, the problem I'm running into is that when they click on a <a href="#" class="question">, all of the <div class="answer">'s are displayed.
How can I make it so that only one .answer for it's parent .question is displayed when clicked?
Here is my HTML:
<li class="question">Question 1
<div class="answer"><p>This is answer for question 1</p></div></li>
<li class="question">Question 2
<div class="answer"><p>This is answer for question 2</p></div></li>
Here is my jquery:
<script>
jQuery(document).ready(function ($) {
$('div.answer').hide();
$('li.question').click(function() {
$('div.answer').slideDown('fast');
return false;
});
});
</script>
and the site is: http://topactioninvestments.com/faq/
Thanks!

$('li.question').click(function(e) {
$(this).find('div.answer').slideToggle('fast');
e.preventDefault();
});

Give every answer element an unique id attribute and add a data-answer attribute to the the the question that references the unique question.
The do the following.
$('li.question').click(function(e) {
$($(this).data("answer")).show();
});
To clarify with the relevant html.
<li class="question" data-answer="#answer-42">...</li>
<div class="answer id="answer-42">....</div>

What you typically want to do is have each unit within a container element. An example would be a div or other tag. Say your HTML looked like this:
<div class="qa">
<div class="question">What is 2+2?</div>
<div class="answer">4</div>
</div>
Then you could do:
$('.question').click(function(event) {
var target = $(event.target);
target
.closest('.qa')
.find('.answer')
.show();
});
Your markup for each question and answer looks like this:
<li>
<a><strong>Why do you not just sell these option contracts?</strong></a>
<div class="answer"><p>This is a test</p></div>
</li>
For this markup, this JavaScript would work:
$('li').on('click', function(event) {
$(this).find('.answer').show();
});
Demo: jsfiddle

Why doesn't Bootstrap button dropdown work on iOS?

It looks like even the bootstrap demo here doesn't work on iOS. You don't seem to be able to select an item from it on iPhone or iPad.
Is there a fix for this?

There is a quick fix as noted in many of the issue comments on github:
https://github.com/twitter/bootstrap/issues/2975#issuecomment-8670606
add this script just before your close html tag:
$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) {
e.stopPropagation();
});
I have tested the above method on both ios5 and 6. It works like a charm
If you wish to modify the bootstrap javascript you could, instead of the fix above, remove touchstart.dropdown.data-api from the html binding for clearMenus near the bottom of the file.
just change this
$('html')
.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
to this
$('html')
.on('click.dropdown.data-api', clearMenus)

You need to add a customize jquery in your file.If you want to use that then use:
<div class="container">
<div class="btn-group lt category_bg">
<p>Adults</p>
<button class="btn btn-large" data-toggle="dropdown"><cite>0</cite> <span class="caret"></span></button>
<ul class="dropdown-menu ">
<li id='adult_0' onClick="flight_user(this.id)"><a href="#" >0</a></li>
<li id='adult_1' onClick="flight_user(this.id)"><a href="#" >1</a></li>
<li id='adult_2' onClick="flight_user(this.id)"><a href="#" >2</a> </li>
<li id='adult_3' onClick="flight_user(this.id)">3</li>
<li id='adult_4' onClick="flight_user(this.id)">4</li>
</ul>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script>
function flight_user(selected){
var value = jQuery("#" + selected).find('a').text();
jQuery("#" + selected).parent().parent().find('cite').html(value);
}
</script>
I can give you live demo for this if you want

This script solve this problem. Just add this code
$(document).on('click', 'a.your-drop-down-link', function(event){
event.stopPropagation();
event.preventDefault();
if(event.handled !== true) {
if ( $(this).parent().hasClass('open') ) {
$(this).parent().removeClass('open');
}else{
$(this).parent().addClass('open');
}
event.handled = true;
} else {
return false;
}
});