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
Related
I have 2 grid divs, one with images and the other with a list of names. Each element within each of the divs corresponds to another within the other div (eg. .image-1 corresponds with .name-1).
When you hover over one of the elements, I want that element AND the corresponding element in the other div to both disappear.
For example, when you hover over "Name 1", I want that and the corresponding image to both disappear. Here's my general html setup:
<body>
<div class="wrapper">
<div class="picture-grid grid">
<div class="grid-box image-1">
<img src="images/image1.png" />
</div>
<div class="grid-box image-2">
<img src="images/image2.png" />
</div>
<div class="grid-box image-3">
<img src="images/image3.png" />
</div>
<div class="grid-box image-4">
<img src="images/image4.png" />
</div>
<div class="grid-box image-5">
<img src="images/image5.png" />
</div>
</div>
<div class="names-grid grid">
<div class="grid-box name-1">Name 1</div>
<div class="grid-box name-2">Name 2</div>
<div class="grid-box name-3">Name 3</div>
<div class="grid-box name-4">Name 4</div>
<div class="grid-box name-5">Name 5</div>
</div>
</div>
</body>
I'm sorry, I've been stuck on this for hours and would love some help! Here's a fiddle:
https://jsfiddle.net/8egpf1j3/
One solution using JQuery is to add data-* attributes to the HTML markup. In this approach we going to add a data-target attribute that will hold the class of the related element that should be hidden (with opacity: 0) when the current element is hovered. You can use JQuery.data() to work with data-* attributes. Check the next simplified example, from where I hope you can understand the underlying idea.
$(".grid-box").hover(
// Handler for hover-in.
function()
{
$(this).css("opacity", 0);
$($(this).data("target")).css("opacity", 0);
},
// Handler for hover-out.
function()
{
$(this).css("opacity", 1);
$($(this).data("target")).css("opacity", 1);
}
);
.grid-box {
width: 100px;
background-color: skyblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="picture-grid grid">
<div class="grid-box image-1" data-target=".name-1">
IMAGE 1
</div>
<div class="grid-box image-2" data-target=".name-2">
IMAGE 2
</div>
<div class="grid-box image-3" data-target=".name-3">
IMAGE 3
</div>
<div class="grid-box image-4" data-target=".name-4">
IMAGE 4
</div>
</div>
<hr>
<div class="names-grid grid">
<div class="grid-box name-1" data-target=".image-1">
Name 1
</div>
<div class="grid-box name-2" data-target=".image-2">
Name 2
</div>
<div class="grid-box name-3" data-target=".image-3">
Name 3
</div>
<div class="grid-box name-4" data-target=".image-4">
Name 4
</div>
</div>
</div>
You can do it this way, I suppose number of images and names is the same, and they are in the same order. Means image number one is first in its div, and name number one is first in its div.
//getting all pictures by <a> tag
var pictures = document.querySelector(".picture-grid").querySelectorAll("a");
//getting all names by <a> tag
var names = document.querySelector(".names-grid").querySelectorAll("a");
//attach reaction to "hover" event to all pictures and names
for (var i = 0; i < pictures.length; i++){
pictures[i].addEventListener("mouseenter", hide.bind(i));
names[i].addEventListener("mouseenter", hide.bind(i));
}
//run function on "hover" event, i = index of chosen image/name
function hide (){
var i = this;
pictures[i].style.opacity = 0;
names[i].style.opacity = 0;
}
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!
I am very new to javascript but i wanted to know how to do something in it. Basically i have 3 image buttons. I want to know how i can make it so when you click the first button a div shows up, then when you click the next button the div that is present disappears and the next div shows up for button two in its place. By divs i mean any content that i put inside of it. Just like the tabs on a website, when you click one you get a page. Then when you click the next tab the previous page disappears and the next page is shown. Instead of pages these would be divs.
Any advice would be greatly appreciated.
Here is the simple solution for hide and show related div's
Check the link for solution : http://jsfiddle.net/silpa/rny2wb5z/34/
HTML:
<img src="http://i.stack.imgur.com/JHoSf.gif?s=128&g=1" data-id="divId1"/>
<img src="http://i.stack.imgur.com/JHoSf.gif?s=128&g=1" data-id="divId2"/>
<img src="http://i.stack.imgur.com/JHoSf.gif?s=128&g=1" data-id="divId3"/>
<div id="divId1" class="hideDivs">Div 1</div>
<div id="divId2" class="hideDivs">Div 2</div>
<div id="divId3" class="hideDivs">Div 3</div>
jQuery:
$("img").on('click',function(){
var hello = $(this).attr('data-id');
$('.hideDivs').hide();
$('#'+hello).show();
});
CSS:
.hideDivs{
display:none;
}
Assign IDs to the divs, then set their visibility with a function. You can call this function with the onClick attribute of the image button.
Javascript:
function changePage(newPageId) {
//hide all pages
document.getElementsByClassName("selectablePages").style.display = 'none';
//show page we want to see
document.getElementById(newPageId).style.display = 'block';
}
Html:
<img src="p1.gif" alt="page1" onclick="changePage('page1')" />
<img src="p2.gif" alt="page2" onclick="changePage('page2')" />
<img src="p3.gif" alt="page3" onclick="changePage('page3')" />
<div id="page1" class="selectablePage">asdasdasd</div>
<div id="page2" class="selectablePage">jghjghjghj</div>
<div id="page3" class="selectablePage">utytyutyuty</div>
Check Fiddle
<img src="http://i.stack.imgur.com/JHoSf.gif?s=128&g=1" id="imgId1"/>
<div id="divId1" class="hideDivs">Div 1</div>
<img src="http://i.stack.imgur.com/JHoSf.gif?s=128&g=1" id="imgId2"/>
<div id="divId2" class="hideDivs">Div 2</div>
<img src="http://i.stack.imgur.com/JHoSf.gif?s=128&g=1" id="imgId3"/>
<div id="divId3" class="hideDivs">Div 3</div>
//jQuery
$("#imgId1").click(function(){
$("#divId2").hide();
$("#divId3").hide();
$("#divId1").show();
});
$("#imgId2").click(function(){
$("#divId1").hide();
$("#divId3").hide();
$("#divId2").show();
});
$("#imgId3").click(function(){
$("#divId1").hide();
$("#divId2").hide();
$("#divId3").show();
});
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
<div id="wrapper">
<div class="accordionButton">Personal Information</div>
<div class="accordionContent">
Personal text
</div>
<div class="accordionButton">Experience</div>
<div class="accordionContent">
Experience information
</div>
<div class="accordionButton">Training</div>
<div class="accordionContent">
No skills
<div class="accordionButton">Career</div>
<div class="accordionContent">
Never had a job
</div>
<div class="accordionButton">Referers</div>
<div class="accordionContent">
None.
</div>
</div>
This code works how i want it to. It is a horizontal accordion. However, when it is loaded on my webpage, they content divs have to be hidden for my jquery to work.
Jquery:
$(document).ready(function() {
// When div is clicked, hidden content divs will slide out
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
// Close all divs on load page
$("div.accordionContent").hide();
});
If i don't hide the divs, all the divs display. Is there any way to display the 1st page without changing too much of my jquery or would i have to set different class names for the button and the content so that when a specified button is clicked, the affiliated content will slide out for that button div?
You can use jquery selector for first div and set it as show(). Something like :
$('div.accordionContent:first').show();
I think you have to try this:-
<script type="text/javascript">
$.fn.accordion = function(settings) {
accordion = $(this);
}
$(document).ready(function($) {
$('div.accordionContent').click(function() {
if($(this).next().is(":visible")) {
$(this).next().slideDown();
}
$('div.accordionContent').filter(':visible').slideUp();
$(this).next().slideDown();
return false;
});
});
</script>
Why not use slideToggle() instead of IF statements....
Try this very simple solution
HTML
<div class="accordion-container">
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
</div>
jQuery
$('.accordion-content .accordion-title').on('click', function(){
$(this).toggleClass('active');
$('.accordion-title').not($(this)).removeClass('active');
$(this).next().slideToggle();
$(".accordion-toggle").not($(this).next()).slideUp();
});