We Keep Coding

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/ .

Execute function on clicking any element in a page except for two elements (in jQuery Mobile, jQM)

Execute a function on clicking any element in a page (with id='home_page') except for two elements (id='link1', id='link2'). These two elements have different function to execute on click.
The below are the two jQuery codes I've tried unsuccessfully.
Code1:
$( document ).on("pageinit", '#home_page', function () {
$('#home_page').not('#link1, #link2').click(function(){
alert();
});
});
Code2:
$( document ).on("pageinit", '#home_page', function () {
$('#home_page:not(#link1, #link2)').click(function(){
alert();
});
});
The below is the jQM code for the page:
<div data-role="page" id="home_page">
<div data-role="header" data-theme="a" ><!-- Header -->
<a id='link1' href="/done" rel="external">Home</a>
<a id='link2' href="/exit" rel="external">Exit</a>
</div><!-- Header -->
<div data-role="content">
<p>Home Page</p>
<!-- Other elements -->
</div>
</div>

I think you should use .on() method for binding events and as suggested in other answer you have a missing closing tag }); for click event:
$( document ).on("pageinit", '#home_page', function () {
$('#home_page').not('#link1, #link2').on('click touchstart', function(){
alert(); //---try adding "touchstart"--------^^^^^^^^^^
});
});
and make sure that you have stopped the event to bubble up on '#link1, #link2' links with event.stopPropagation(); only if you have bound some js events to these links.
As per your comments i just came with this:
$(function () {
$('#home_page').not('#link1, #link2').click(function () {
alert('page clicked');
});
$('#link1, #link2').click(function (e) {
e.stopPropagation(); //<---stops the event to bubble up
});
});
What i noticed you have mentioned the href for your anchor tag to http://www.google.com/, what seems to me that navigating to google is not working in the fiddle while other link is working properly.
Try to change the first link href to this:
<a id='link1' href="http://www.apple.com/mac/" rel="external">link1</a>
<a id='link2' href="http://www.apple.com/" rel="external">link2</a>
Demo # Fiddle

Seem like you're missing closing }) for your click function:
$( document ).on("pageinit", '#home_page', function () {
$('#home_page').not('#link1, #link2').click(function(){
alert();
}); // <-- Here
});

Show div with jQuery blind function

I'm new to jQuery and try to show a div when the user is clicking on a button. The button is below the text and is suppose to move up and down.
I tried a couple of things but couldn't work it out.
This is my code:
HTML
<div class="travel_infobox">
</div>
<div class="clearfix"></div>
<div class="travel_info_button">
InfoBox
</div>
jQuery
<script>
$(document).ready(function(){
$("input.show").click(function(){
$(".travel_infobox").show("blind");
});
});
$(document).ready(function(){
$("input.hide").click(function(){
$(".travel_infobox").hide(blind);
});
});
</script>

You have to use $(document)ready(function() {}); just one time, it is needed to let jQuery know when the page is fully loaded to run your code.
Then, that input.show I suppose there is an input button with show class somewhere, otherwise it doesn't work.
<script>
$(document).ready(function(){
$("input.show").click(function(){
$(".travel_infobox").show("blind");
});
$("input.hide").click(function(){
$(".travel_infobox").hide("blind");
});
});
</script>

Try this. Where is your show and hide button? So I have added one.
<div class="travel_infobox">
Trave info
</div>
<div class="clearfix"></div>
<div id="travel_info_button">
InfoBox
</div>
<button id='show'>show</button>
<button id='hide'>hide</button>
<script>
$(document).ready(function(){
$("#show").click(function(){
$(".travel_infobox").show("blind");
});
});
$(document).ready(function(){
$("#hide").click(function(){
$(".travel_infobox").hide("blind");
});
});
</script>

Why is this JavaScript function not working?

I am working with bootstrap and attempting to create a button in tab 1 which "activates" (switches to) tab 2.
Here's my code:
HTML navigation tabs:
<ul id="pageSwitcher" class="nav nav-tabs" style="width:100%;">
<li>Page One</li>
<li>Page Two</li>
</ul>
HTML tab content:
<div class="tab-content" style="width:100%;">
<div class="tab-pane active" id="page1">
<button type="button" onclick="showPageTwo();">Proceed to page 2</button>
</div>
<div class="tab-pane" id="page2">
<p>Page 2 content here!</p>
</div>
</div>
JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
}
});
function showPageTwo() {
$('#pageSwitcher li:eq(1) a').tab('show');
}
</script>
Anyone willing to provide some insight as to where exactly I'm going wrong? I've copied several examples almost exactly... clicking on the tabs themselves works fine, I just can't seem to make a button at the bottom of page 1 that activates page 2.

One: bad form, inline onclick call... you don't need it, get rid of it:
<button type="button">Proceed to page 2</button>
Two: you have two JS errors. You didn't close your .click() function, and you're trying to trigger the first tab with the specifier of li:eq(0)...
$(document).ready(function() {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
// ALSO, you were missing a closing paren, here!
});
//two issues ... onclick inside your button is trying to access
// your function before it's available... inline js like that, bad idea anyhow
// so hook into it inside your DOM ready code here anyhow.
var showPageTwo = function() {
// secondly, you're looking at the wrong item!
// li:eq(0) means "look at the first li in the array of li"
$('#pageSwitcher li:eq(1) a').tab('show');
};
$(".tab-content").on("click","#page1 button", showPageTwo);
});
See this jsFiddle for a working example: http://jsfiddle.net/mori57/Xr9eT/

Give your button an ID :
<div class="tab-content" style="width:100%;">
<div class="tab-pane active" id="page1">
<button type="button" id="myButton">Proceed to page 2</button>
</div>
<div class="tab-pane" id="page2">
<p>Page 2 content here!</p>
</div>
</div>
and just trigger a click on the right anchor, bootstrap does the rest :
$(document).ready(function() {
$('#myTab a').on('click', function(e) {
e.preventDefault();
$(this).tab('show');
});
$('#myButton').on('click', function() {
$('.nav-tabs li:eq(1) a').trigger('click');
});
});

You should not use specific code for your button, but generic event-driven process:
- you should add an attribute to your button to specify towards which page it will redirect
- then attach a click event
- attach click event to tabs to do the same
HTML:
<button type="button" id="btn" gotoPage="#page2">Proceed to page 2</button>
JS to process tab switching:
function showPage(pageId){
$('.tab-pane').each(function(){
$(this).removeClass('active');
$(this).hide();
});
$(pageId).show();
$(pageId).addClass('active');
}
(Not sure you need to use show or hide functions if you CSS manages thats thanks to active class)
Then for your button:
$('#btn').click(function(){
var destPage = $(this).attr('gotoPage');
showPage(destPage);
});
For tabs:
$('#pageSwitcher a').each(function(){
$(this).click(function(e){
showPage($(this).attr('href'));
});
});
And you can load page one at startup, if needed:
$(document).ready(function(){
showPage("#page1"); // default: load page 1
});
Example: http://jsfiddle.net/DSbrj/1/

showPageTwo() should be declared outside of the document.ready() call.

Changing content in a div when a link is clicked

I am trying to change a div content box when a link above that box is clicked. I added a click function to the individual buttons then the corresponding dive containing the content for that particular box should be displayed.
When I apply the jQuery to the page, the content does not change according to the link that is clicked and the page displays awkwardly.
This is the jsfiddle I'm working with.
The webpage I'm working with is here.
Place where am i making the mistake.
The jQuery I'm working with so far looks like this
$(document).ready(function() {
$('.question1').click(function(){
$('.new_member_box_display').load('#answer1');
})
$('.question2').click(function(){
$('.new_member_box_display').load('#answer2');
})
$('.question3').click(function(){
$('.new_member_box_display').load('#answer3');
})
$('.question4').click(function(){
$('.new_member_box_display').load('#answer4');
})
});//end of ready
The HTML I'm working with looks like this :
<div class="new_member_box">
<h4>Vision</h4>
</div>
<div class="new_member_box">
<h4>Church History</h4>
</div>
<div class="new_member_box">
<h4>Becoming a Member</h4>
</div>
<div class="new_member_box">
<h4>Pastor-in-Training</h4>
</div>
</div>
<div class="clear" class="question"></div>
<div id="answer1">
1
</div>
<div id="answer2">
2
</div>
<div id="answer3">
3
</div>
<div id="answer4">
4
</div>
<div class="new_member_box_display" id="question">
Text will appear here when one of the tabs above is clicked
</div>

load() loads an external file with ajax, not elements on your page. You're probably just trying to hide and show elements :
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').hide();
$('#answer' + numb).show();
});
FIDDLE

Here's a fiddle that does what I think you're looking to do. There are cleaner ways to do it, but this should work.
http://jsfiddle.net/PZnSb/6/
Basically you want to set the inner html of one element to the inner html of another, like this:
$('.question1').click(function(){
$('.new_member_box_display').html($('#answer1').html());
})
instead of this:
$('.question1').click(function(){
$('.new_member_box_display').load('#answer1');
})

It seems you just want the text to change when you click, try this.
$(document).ready(function() {
$('.question1').click(function(){
$('.new_member_box_display').text($('.answer1 ').text());
});
$('.question2').click(function(){
$('.new_member_box_display').text($('.answer2').text());
});
$('.question3').click(function(){
$('.new_member_box_display').text($('.answer3').text());
});
$('.question4').click(function(){
$('.new_member_box_display').text($('.answer4').text());
});
});
http://jsfiddle.net/cornelas/PZnSb/7/embedded/result/