We Keep Coding

Replace DIV with JQuery passing parameters

I'm having a problem here to create a generic function on JQuery for my "boxes".
I have a visible box with contents, but I will have some other boxes(all DIVs) with another contents and forms. It can be just a DIV ou a full scructured content.
For exemple, a structure like this:
| DIV CONTAINER
|---- DIV CONTACT FORM
|---- ---- DIV RESET PASSWORD
|---- DIV RESET PASSWORD
|---- DIV SIGN UP FORM
|---- DIV RULES
|---- TERMS
Right now I'm doing the box exchanging manually like this code:
$( "#contact-form-link" ).on( "click", function()
{
$( "#contact-form-link" ).fadeOut( "normal", function()
{
$( "#reset-password-form" ).fadeIn( "normal" );
});
});
$( "#reset-password-form" ).on( "click", function()
{
$( "#reset-password-form" ).fadeOut( "normal", function()
{
$( "#contact-form-link" ).fadeIn( "normal" );
});
});
It's unecessary so much code!
I would like to create a function with parameters, so, I can call it from a LINK inside any part of the current box.
A function like:
function exchangeBoxes(box_fadeout,box_fadein)
{
$("box_fadeout").on("click", function()
{
$("box_fadeout").fadeOut( "normal", function()
{
$("box_fadein").fadeIn( "normal" );
});
});
};
So this way, I can call this function from a link passing which DIV will fadeOut and which will fadeIn.
I'm in #contact-form and want to change to #reset-password-form?
Click Here
I need to be able to call the function from any link, anywhere on the page, WITHOUT setting a ID or CLASS for the link, only for the DIVS.
I'm using one function inside another so the IN page only loads when the OUT page is done.
ONLY ONE div can be displayed at time. When one fades out, the other one called will fadeIN. Always callig by the ID, never by CLASS.
Any help to create this generic function is welcome!
Thanks!

You can attach the event to parent div, check id of element at click event, pass the element as either first or second parameter to exchangeBoxes depending on the id of the element.
function exchangeBoxes(a, b) {
$(a).fadeOut( "normal", function() {
$(b).fadeIn( "normal" );
});
}
var elems = ["contact-form-link", "reset-password-form"];
$("#container").on("click", "[id]", function(e) {
if (this.id === elems[0]) {
exchangeBoxes("#" + elems[0], "#" + elems[1])
}
if (this.id === elems[1]) {
exchangeBoxes("#" + elems[1], "#" + elems[0])
}
});
or use multiple selectors when assigning click event
var elems = ["contact-form-link", "reset-password-form"];
$("#contact-form-link, #reset-password-form")
.on("click", function(e) {
exchangeBoxes(this, "#"
+ elems.filter(function(id) {return id !== e.target.id})[0])
});

You could attach a class e.g. exchange to your link and use a data attributes to store the ID of the elements you want to fade in and out.
<a class="exchange" href="#" data-out="#contact-form" data-in="#reset-password-form">Click Here</a>
<a class="exchange" href="#" data-out="#reset-password-form" data-in="#contact-form">Click Here</a>
Then attach an event handler
$(".exchange").on("click", function () {
var data = this.dataset;
$(data.out).fadeOut("normal", function () {
$(data.in).fadeIn("normal");
});
});
If you strictly only focusing on those two DIVs, you could also use fadeToggle() without having to use data attributes
$(".exchange").on("click", function () {
$('#contact-form').fadeToggle("normal", function () {
if ($(this).is(':visible')) {
$("#reset-password-form").fadeOut("normal");
} else {
$("#reset-password-form").fadeIn("normal");
}
});
});

In addition to the answer above, you can also acheive this without using inline onclick. I prefer to keep the javascript separate.
Give each link a data-link with the box they link to. e.g.
Go to box 2
Then in js you can pick this up and do the required fade in/out as per the example:
p.s. sorry for the css I'm really bored with nothing better to do.
$(".box a").click(function() {
linkTo = $(this).data("link");
$(this).parent().fadeOut("normal", function() {
$(linkTo).fadeIn();
});
});
body {
background: #333;
color: #ccc;
font-family:sans-serif;
}
.box {
margin: 0 auto;
width: 300px;
border: 1px solid #ccc;
text-align: center;
display:none;
}
.box a {
text-decoration: none;
color: #ccc;
border:1px solid #ccc;
padding: 10px;
margin: 0 0 10px 0;
display: inline-block;
}
.box a:hover {
background: #333;
color: #ccc;
}
#box1 {
background: #CD5C5C;
display:block;
}
#box2 {
background: #6B8E23;
}
#box3 {
background: #6A5ACD;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="box" id="box1">
<h3 class="title"> I am Box 1 </h3>
Go to box 2
<br>
Go to box 3
</div>
<div class="box" id="box2">
<h3 class="title"> I am Box 2 </h3>
Go to box 1
<br>
Go to box 3
</div>
<div class="box" id="box3">
<h3 class="title"> I am Box 3 </h3>
Go to box 1
<br>
Go to box 2
</div>
</div>

Well, thank you all!
I put all responses together and came up with this:
<div id="contact">
<h3>CONTACT</h3>
<p>My form</p>
Reset Password
About
</div>
<div id="reset" style="display:none">
<h3>RESET</h3>
<p>Reset password form</p>
Back to contact
</div>
<div id="about" style="display:none">
<h3>ABOUT</h3>
<p>Some info.</p>
Back to contact</li>
</div>
And the JQuery very clean:
function exchangeBoxes(a, b)
{
var a = "#" + a;
var b = "#" + b;
$(a).fadeOut( "normal", function()
{
$(b).fadeIn( "normal" );
});
}
Thank you very much, guys!

Links for triggering a certain <div> to slide up and a link for triggering the <div> to slide down

I'd like to make some (let's say 2) links that will trigger a specific to appear by sliding up , then another link that will trigger the specific to huide by sliding down.
The links are generated dynamically by a certain application (something like looping which I personally don't understand)
After researching in this site, I tried the code below but found some problems:
only the first link for sliding up worked well, other blue links didn't work
Current script is sliding up and down the content for each click on the blue link.
I can't figure out how to break apart the script so I can apply sliding up script only for the blue links and the sliding down script for the red link.
to be noted, the blue links are dynamically generated based on a certain application loop, so practically there is no fix number for the amount of the blue links being displayed.
This is the code :
$(function(){
var list = $('#slidingcontent'),
button = $('#triggerup'),
speed = 500;
list.hide().css('bottom', button.css('top'))
.css('margin-top', list.outerHeight() * -1);
button.toggle(function(e) {
e.preventDefault();
e.stopPropagation();
list.slideDown(speed);
},function(e){
e.preventDefault();
e.stopPropagation();
list.slideUp(speed);
});
});
#slidingcontent{
position:absolute;
}
.linkcontainer{
text-align:center;
}
.sliding_up_link a, .sliding_down_link a, #slidingcontent{
color:white;
margin: 1px;
padding: 1px;
text-decoration:none;
font-weight:bold;
}
.sliding_up_link a{
background:blue;
}
.sliding_down_link a{
background:red;
}
#slidingcontent{
background:green;
}
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<div class= "linkcontainer">
<span class="sliding_up_link" id="triggerup" >
<a href ="#">
triggerup1 (for sliding upward)</br>
the amount of links(for triggering content to slide up) is uncertain based on conditions (it maybe only 1 link, or 3 links like this, or 7 links, or 15 links, etc)
</a>
</span>
</div>
<div class= "linkcontainer">
<span class="sliding_up_link" id="triggerup" >
<a href ="#">
triggerup2 (for sliding upward)</br>
the amount of links(for triggering content to slide up) is uncertain based on conditions (it maybe only 1 link, or 3 links like this, or 7 links, or 15 links, etc)
</a>
</span>
</div>
<div class= "linkcontainer">
<span class="sliding_down_link" id="triggerdown" >
<a href ="#">
triggerdown (for sliding down)</br>
only one link (for triggering content to slide down) will be displayed
</a>
</span>
</div>
<div id="slidingcontent">
content here
</div>
</body>
Thanks for help :)

This works for me. I corrected the HTML validation errors in your code as well.
jQuery(function ($) {
$(document).ready(function() {
$("#slidingcontent").css({"display": "none", "opacity": "1"});
});
$(window).load(function () {
var speed = 500,
target = $("#slidingcontent");
$(".sliding_up").on("click", function () {
target.slideDown(speed);
});
$(".sliding_down").on("click", function () {
target.slideUp(speed);
});
});
});
#slidingcontent {
position:absolute;
bottom: -2px;
opacity: 0;
padding: 0!important;
}
.linkcontainer {
text-align:center;
}
p.sliding_up, p.sliding_down, #slidingcontent {
color:white;
margin: 1px;
text-decoration:none;
font-weight:bold;
}
p.sliding_up, p.sliding_down {
cursor: pointer;
display:inline-block;
}
p.sliding_up {
background:blue;
}
p.sliding_down {
background:red;
}
#slidingcontent {
background:green;
}
.wrap {
overflow-y: hidden;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="linkcontainer">
<p class="sliding_up">trigger up 1 (for sliding upward)</p>
</div>
<div class="linkcontainer">
<p class="sliding_up">trigger up 2 (for sliding upward)</p>
</div>
<div class="linkcontainer">
<p class="sliding_down">triggerdown (for sliding down)</p>
</div>
<div id="slidingcontent">content here</div>
</div>

Selecting child of previous parent jQuery

Lately I've been trying my hand at animation using CSS and jQuery, it went well, however, now I want to do a bit more.
That is, once the user clicks information should show up on top of the image.
At the moment, I just have a few tags on which I perform the animations and class toggles.
My question is, I've thought about doing the following:
<div class= "singleImage">
<img src.... class="actualImage">
<p>text to put over the image</p>
</div>
This would be done per image which means that I'll have about 5 of them with different images.
However, I don't know how to go about selecting the previous element of class "actualImage".
Has anyone got any suggestions?
Thank you

Use the jQuery prev function. Example: Assume you want to select the image previous to the second image:
var foo = $(".singleImage").eq(1);
var bar = $(foo).prev().find('.actualImage');
Fiddle

Try this:
$('singleImage').children('.actualImage').prev();

I'm not sure why you are trying to select the previous element, but you could do something akin to this:
Bind a function to the click event for the element containing your image and caption.
Inside this function, toggle the caption.
Also, bind a click event handler to the body to detect clicks "off" the containing element.
HTML:
<a href="#" class="has-caption">
<img src="http://placehold.it/300x300" />
<span class="caption">This is a caption</span>
</a>
CSS:
a.has-caption { position: relative; }
a.has-caption .caption {
background: rgba(0, 0, 0, .25);
bottom: 0;
color: #fff;
display: none;
height: 20px;
left: 0;
line-height: 20px;
position: absolute;
width: 100%;
}
a.has-caption img { vertical-align: bottom }
JavaScript
$('a.has-caption').on('click', function(e) {
e.preventDefault(); e.stopPropagation();
var self = $(this)
, tmpId = 'toggle-' + Date.now();
self.addClass(tmpId);
$('span.caption', self).toggle();
$('body').one('click', function(e) {
if (!$(event.target).closest('.' + tmpId).length) {
$('span.caption', '.' + tmpId).hide();
self.removeClass(tmpId);
};
});
});
http://jsfiddle.net/83s7W/

Change href when anchor is clicked

I have a question about how I can dynamically change a href="" in a button.
The jsfiddle below shows a button fixed at the bottom of the viewport starting at the landing page:
http://jsfiddle.net/Hm6mA/3/
The html of the button is like so:
<div class="button">
<a href="#first" class="" style="width: 80px; height: 80px; opacity: 1;">
<img src="img/down.png" alt="down">
</a>
</div>
When it is clicked I want it to scroll to the next section and change the href="" to the following section of the page. So, when it is first clicked, the href will change to #second. It would obviously also need to change when the user manually scrolls past a section.
This is for a single page website. How would I go about such a thing?

Use .prop() to change its value
$(".button").on('click', function(){
$('.button').find('a').prop('href', '#services');
});
Demo

You can use fullPage.js plugin to achieve what you want. Maybe it is faster than coding it from cero :)
Demo fullPaje.js
Page

I am not used to jquery. Here is a pure javascript solution. It surely changes the hash value.
<body>
<div id="sections">
<section id="s100">asdfasd</section>
<section id="s101"></section>
<section id="s102"></section>
<section id="s103"></section>
<section id="s104">asdfasdasdfsdf</section>
<section id="s105"></section>
</div>
<div class="nav-bar">
<a id="next-button" class="button" href="#s100">Next</a>
</div>
<script type="text/javascript">
var sections = document.getElementById("sections");
var nextButton = document.getElementById('next-button');
sections.onscroll = function (evt) {
}
var counter = 100;
var limit = 105;
// closure
nextButton.onmouseup = function (evt) {
var incCounter = function () {
// add your custom conditions here
if(counter <= limit)
return counter++;
return 0;
};
var c = incCounter();
if(c != 0)
this.setAttribute('href', "#s" + c);
}
</script>
</body>
CSS
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
#sections {
height: 50%;
width: 100%;
overflow: scroll;
}
.nav-bar {
margin: 30px 20px;
}
.button {
text-decoration: none;
border: 1px solid #999;
padding: 10px;
font-size: 120%;
}

I have written a small jQuery plugin for that, just pushed it to GitHub. https://github.com/ferdinandtorggler/scrollstack
What you basically want to do is calling
$('.button').scrollstack({stack: ['#first', '#second', ... ]});
You dont even need the link when you call it on the button. So check it out and let me know if it works for you. ;)
Here you can try it and read more: http://ferdinandtorggler.github.io/scrollstack/

Wrong box being hidden

I have an array of links that when clicked will bring up a hidden div with information related to it. Each link, when clicked, will bring up a different div associated with it. I'm trying to make an image (closelabel.png) on every div with the class 'countystats' act as a close button to hide the divs. I can't get the image in every div to act as a clickable link yet. More importantly, when I click on link one nothing happens. When I open up two hidden divs and try to close one, the opposite one closes (if I click on 'one' and 'two' to make the divs appear, and then I lick on the "a" (for purposes of a closing link) the opposite div is closed. So the button for two closes one.
<style type="text/css">
.county{
color:blue;
display:block;
}
.countystats{
background-image:url('../../../../../closelabel.png') ;
background-position:top right;
border:3px black inset;
background-repeat:no-repeat;
background-color:#ccc;
display:none;
right:250px;
margin: 5px 5px 5px 5px;
padding:5px 5px 5px 5px;
width:200px;
}
</style>
<div style="height:250px;bottom:300px; width:100px; padding: 1em; overflow:auto; margin:5px 5px 5px 5px; border: 2px black; overflow-x:hidden;">
<a class="county" href="#">one</a>
<a class="county" href="#">two</a>
<a class="county" href="#">three</a>
<a class="county" href="#">four </a>
<a class="county" href="#">five</a>
<a class="county" href="#">six</a>
</div>
<div class="countystats">stats one<p>woot</p><a class="closediv" href="#">a</a></div>
<div class="countystats">stats two <a class="closediv" href="#">a</a></div>
<div class="countystats">stats three</div>
<div class="countystats">some other stuff</div>
<div class="countystats">even more other stuff</div>
<script type="text/javascript">
$('a.county').each( function(e){
$(this).bind('click', function(e){
var thisIs = $(this).index(); $('.countystats').eq(thisIs).show (250);
});
});
$('a.closediv').each( function(e){
$(this).bind('click', function(e){
var toClose = $(this).index(); $('.countystats').eq(toClose).hide(250);
});
});
</script>
jsfiddle demo

Your problem is a bit of confusion about what this is in the click handler in here:
$('a.closediv').each( function(e){
$(this).bind('click', function(e){
var toClose = $(this).index();
$('.countystats').eq(toClose).hide(250);
});
});
You're calling index on the <a> that you're using to hide the <div> rather than on the <div> itself.
The simplest solution is, as other people have noted, to use closest:
$('a.closediv').click(function(e) {
$(this).closest('.countystats').hide(250);
});
No one else noticed what the real root of your problem was so I thought I'd mention it.

You are trying to bind event handlers incorrectly (for what you want the code to do). Also, just use .closest() to figure out which element to hide.
$('a.county').click(function(e) {
var thisIs = $(this).index();
$('.countystats').eq(thisIs).show(250);
});
$('a.closediv').click(function(e) {
$(this).closest('.countystats').hide(250);
});
http://jsfiddle.net/mattball/tbNvn/4/

Just use parent():
$('a.county').click(function(e) {
var thisIs = $(this).index();
$('.countystats').eq(thisIs).show(250);
});
$('a.closediv').click(function(e) {
$(this).parent().hide(250);
});