Overriding preceding function in javascript - javascript

Say I have many div "pages" set up like this:
<script type="text/javascript">
$('.link').on('click', function(e){
fadeOutPage();
$(this.getAttribute("href")).fadeIn(); //fade in clicked page
});
function fadeOutPage() {
$('#container>div').fadeOut(); //fade out all displayed pages
}
</script>
page 1
page 2
page 3
....
....
<div id="container">
<div id="page1">
<div class="navbar"> contents of navbar 1 </div>
<div class="pagecontents"> contents of page 1 </div>
<div class="pagefooter"> more contents for page 1 </div>
</div>
<div id="page2">
<div class="navbar"> contents of navbar 2 </div>
<div class="pagecontents"> contents of page 2 </div>
<div class="pagefooter"> more contents for page 2 </div>
</div>
<div id="page3">
<div class="navbar"> contents of navbar 3 </div>
<div class="pagecontents"> contents of page 3 </div>
<div class="pagefooter"> more contents for page 3 </div>
</div>
...
...
</div>
This works as I intend it, fade out all pages then fade in the clicked page when I click a link. But I want to delay the fade in of ".pagefooter", for let's say 1000ms, but keep ".pagefooter" inside the parent div "#pageX". Right now when I call "$(this.getAttribute("href")).fadeIn();" it will fade in "#pageX" all at the same time.
How do I override that so I can insert a settimeout(function() {('.pagefooter').fadeIn()},1000) somewhere, so that everything else except ".pagefooter" fades in normally, then ".pagefooter" fades in 1000ms afterwards?

EDIT: Here you go:
$('#page1').show().find('div').hide().filter(function () {
return !$(this).hasClass('pagefooter');
}).fadeIn().add('.pagefooter').delay(1000).fadeIn();
Here's a working demo: http://jsfiddle.net/mFjg5/1

Related

Adding a Scroll to Next Element With the Same Class in jQuery

I am trying to add functionality of an arrow when clicked would scroll the user to the next section with a specified class. Each section would have the same class and an arrow with a class to target in jQuery. So I will have a few sections set up like this:
<section class="homeSection">
<div class="content">
//Content goes here
</div>
<div class="btnContainer">
<button class="arrow">Arrow</button>
</div>
</section>
<section class="homeSection">
<div class="content">
//Content goes here
</div>
<div class="btnContainer">
<button class="arrow">Arrow</button>
</div>
</section>
<section class="homeSection">
<div class="content">
//Content goes here
</div>
<div class="btnContainer">
<button class="arrow">Arrow</button>
</div>
</section>
//And so on...
So there will be around 5 sections set up with this setup with the same classes for the section and the button. What I am trying to do then is when the button of a section is clicked it will then scroll to the very next section below it and that cycle will continue until you reach the last section and the end of the page.
I at first had it set up like so:
$(".downArrow--hero").click(function() {
$('html, body').animate({
scrollTop: $(".cardItems").offset().top
}, 1000);
});
And it would target each section based on a unique class, but I now need to set it up with each section having the same class. What would be my best approach to this?

JQuery hide() not persisting after hide event

I'm trying to hide a visible section then show a hidden section using JQuery .hide() and .show(). When the event fires (on clicking an image) it only hides the visible section momentarily, then becomes visible again with the previously hidden section now visible below the first visible section. Based on the docs I've read and some tutorials I've watched this shouldn't be happening.
HTML:
<div class="transition-div">
<section class="project-section">
<div class="project-wrapper" id="project-one">
<div class="desc-text">
<h2>Header</h2>
</div>
<div class="project-image-wrapper">
<img class="project-image" id="project-img-one" src="images/img1.png">
<button class="project-button">Button
</button>
</div>
</div>
</section>
<section class="project-section hidden">
<div class="project-wrapper">
<div class="desc-text">
<h2>Header</h2>
<p>Some description text</p>
</div>
<div class="project-image-wrapper">
<img class="project-image" src="images/img1.png">
</div>
</div>
</section>
</div>
JS:
$('.hidden').hide();
var slideSection = function() {
$('.project-image-wrapper').click(function() {
var $parentDiv = $(this).parents('.transition-div');
var $childToShow = $parentDiv.find('.hidden');
var $childToHide = $childToShow.siblings('.project-section');
$childToHide.hide(300, hideActiveSection());
function hideActiveSection() {
$childToHide.addClass('hidden');
$childToShow.show(300, function() {
$(this).removeClass('hidden');
});
}
});
};
slideSection();
How would I get the section I want to hide to do so persistently until I click the currently visible project image to show it? Could my CSS be interfering with what I want to do here? If so I'll post the code. Thanks!

Making automatic transition slideshow out of previously designed gallery

As title states, the website I have currently has a "click to go to next image" slide show as the banner image. I'm looking to turn it into a slideshow that automatically transitions from image to image but I'm not sure exactly how to do it.
The site can be found # rdesignmedia.com/testing/logo_you
The code is as follows:
<div class="camera_container">
<div class="camera_wrap" id="camera">
<div data-src="images/page-1_slide1.jpg">
<div class="camera_caption fadeIn">
<div class="jumbotron jumbotron1">
<em>On Tour</em>
<div class="wrap">
<p>Engineered Elegance</p>
</div>
</div>
</div>
</div>
<div data-src="images/page-1_slide2.jpg">
<div class="camera_caption fadeIn">
<div class="jumbotron jumbotron2">
<em>ELEVATE</em>
<div class="wrap">
<p>Your Brand Lives Here.</p>
</div>
</div>
</div>
</div>
<div data-src="images/page-1_slide3.jpg">
<div class="camera_caption fadeIn">
<div class="jumbotron">
<em>Tech Branding</em>
<div class="wrap">
<p>Stand out from the crowd with technological branding</p>
</div>
</div>
</div>
</div>
</div>
</div>
Looking at the site you can do this after the page loads:
// Creates an interval that runs the function every 2 seconds
setInterval(
function () {
// Finds the ul holding the little dots
var ul = $(".camera_pag_ul");
// Finds the currently selected dot
var selected = ul.find('.cameracurrent');
// Finds the next dot to click
var next = selected.next('li');
// If the next dot exists click it, else start over with first one
if (next.length != 0) {
next.click();
}
else {
ul.find('li:first').click();
}
}, 2000
);
This works if I run it in the console on the site. This switches the image every 2 seconds. You can obviously change the 2000 to something else to increase the time the images is displayed before the next one shows.

How to not repeat myself in jquery

I have found myself writing similar code a few times and im not sure of the best way to do it.
i have a few divs:
<div id="gallery1">
some content
</div>
<div id="gallery2">
some content
</div>
<div id="gallery3">
some content
</div>
<div id="gallery4">
some content
</div>
<div id="gallery5">
some content
</div>
<div id="gallery6">
some content
</div>
i will hide gallery 2 - 6 in css and then show them using jquery with the following:
$(document).ready(function(){
// shows gallery 1
$('.gallery1show').click(function(){
// prevents link from going anywhere
event.preventDefault();
// shows gallery 1
$('#gallery1').show();
// hides other galleries
$('#gallery2').hide();
$('#gallery3').hide();
$('#gallery4').hide();
$('#gallery5').hide();
$('#gallery6').hide();
});
// shows gallery 2
$('.gallery2show').click(function(){
// prevents link from going anywhere
event.preventDefault();
// shows gallery 2
$('#gallery2').show();
// hides other galleries
$('#gallery1').hide();
$('#gallery3').hide();
$('#gallery4').hide();
$('#gallery5').hide();
$('#gallery6').hide();
});
// shows gallery 3
$('.gallery3show').click(function(){
// prevents link from going anywhere
event.preventDefault();
// shows gallery 3
$('#gallery3').show();
// hides other galleries
$('#gallery1').hide();
$('#gallery2').hide();
$('#gallery4').hide();
$('#gallery5').hide();
$('#gallery6').hide();
});
... etc
});
i got a feeling that rather than using gallery1, gallery2 etc i should just give each div a class of gallery and then use this and not this in jquery. but im not sure where to start.
any advice?
I would do something like this:
var galleries = $('.gallery');
$('.show-gallery').on('click', function(e) {
e.preventDefault();
var gallery = $($(this).attr('href'));
galleries.not(gallery).hide();
gallery.show();
});
.gallery + .gallery {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery1" class="gallery">gallery 1</div>
<div id="gallery2" class="gallery">gallery 2</div>
<div id="gallery3" class="gallery">gallery 3</div>
<div id="gallery4" class="gallery">gallery 4</div>
<div id="gallery5" class="gallery">gallery 5</div>
Gallery 1
Gallery 2
Gallery 3
Gallery 4
Gallery 5
Make all div a common class "gallery" and hide it
$(".gallery").hide();
and show only that gallery which is require
$("#gallery1").show();
or write code is such a way that jQuery identify div dynamically to show it.
$('.show').on('click',function() {
$('.gallery').hide();
$($(this).attr('href')).show();
});
.gallery {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Show gallery 1
Show gallery 2
Show gallery 3
Show gallery 4
Show gallery 5
Show gallery 6
<div id="gallery1" class="gallery">
some content 1
</div>
<div id="gallery2" class="gallery">
some content 2
</div>
<div id="gallery3" class="gallery">
some content 3
</div>
<div id="gallery4" class="gallery">
some content 4
</div>
<div id="gallery5" class="gallery">
some content 5
</div>
<div id="gallery6" class="gallery">
some content 6
</div>
A bit late, but here's a working example : https://jsfiddle.net/
Guess you have given partial of your html code there, hence I assume it has some buttons to trigger the show action of gallery. Below is on that assumption how your HTML has to be
<div class="galleries">
<div id="gallery1" class="gallery active">
gallery 1
</div>
<div id="gallery2" class="gallery">
gallery 2
</div>
<div id="gallery3" class="gallery">
gallery 3
</div>
<div id="gallery4" class="gallery">
gallery 4
</div>
<div id="gallery5" class="gallery">
gallery 5
</div>
<div id="gallery6" class="gallery">
gallery 6
</div>
</div>
<div class="gallery-buttons">
<button data-id="1">Gallery 1</button> <button data-id="2">Gallery 2</button>
<button data-id="3">Gallery 3</button>
<button data-id="4">Gallery 4</button>
<button data-id="5">Gallery 5</button>
<button data-id="6">Gallery 6</button>
</div>
and css
.gallery{
display:none;
}
.gallery.active{
display:block;
}
and the js
$('.gallery-buttons button').on('click',function(){
var id = $(this).attr('data-id');
$('.gallery.active').removeClass('active');
$('.gallery[id="gallery'+id+'"]').addClass('active');
});
Here is a demo pen http://codepen.io/anon/pen/zGJaNM

how to rotate content in a div?

I have a div which sits on the left hand side of the page, it has another div with content that fills the div,what i want to do is swap the inside div, with another div filled with different content after 10 seconds. and again after 10 seconds rotate back to the first div and so on..
on my main page i had php include of 'left_box.php'.. on that page the code looks like
<div class="span3 main_div">
<!-- first div -->
<div class="well sidebar-nav transfer-central">
<?php include 'includes/transfer_central.php'; ?>
</div>
<!-- second div -->
<div class="well sidebar-nav fixture-results">
<?php //include 'includes/fixture-results.php'; ?>
</div>
</div>
i have put both divs(includes) which i want to appear in the main div but currently only the first div appears.. but how after 10 seconds do i get the second div to replace the first div, inside the main div?
I looked around and just cant seem to get my head around it
JSFiddle: http://jsfiddle.net/Arj2C/
HTML:
<div id="outerdiv">
<div class="" id="1">
<!--content-->
</div>
<div class="hidden" id="2">
<!--content-->
</div>
<div class="hidden" id="3">
<!--content-->
</div>
<div class="hidden" id="4">
<!--content-->
</div>
</div>
JS (with jquery):
var next = 2;
$(function(){
setInterval(function(){
if(next == 1) $("#4").toggleClass("hidden");
$("#" + (next-1)).toggleClass("hidden");
if(++next == 5) {
//$("#4").toggleClass("hidden");
$("#" + (next-1)).toggleClass("hidden");
next = 1;
} else $("#" + (next-1)).toggleClass("hidden");
}, 10000);
});
CSS:
.hidden {
display: none;
}

Categories