I have about 30 options that a user can select. When they click the option it opens/highlights a content/html box for that selection and hides the others (similar to a picture lightbox but instead of thumbnails and main pic I need html).
I've found this Jquery code example: http://jsfiddle.net/EhtrR/1238/
<img id="img1"/>
<img id="img2"/>
<img id="img3"/>
<img id="img4"/>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
$("#img1").on('click', function() {
$("#div1").fadeIn();
$("#div2,#div3,#div4").fadeOut();
});
$("#img2").on('click', function() {
$("#div2").fadeIn();
$("#div1,#div3,#div4").fadeOut();
});
$("#img3").on('click', function() {
$("#div3").fadeIn();
$("#div1,#div2,#div4").fadeOut();
});
$("#img4").on('click', function() {
$("#div4").fadeIn();
$("#div1,#div2,#div3").fadeOut();
});
(Please note the images are just example. These can be div boxes or span.)
but as I'll need 20-30 of these options I was wondering how I can make it more efficient or do you suggest another way? I noticed on Mobile touch taps the clicks were fairly slow with the Jquery.
To DRY and simplify the logic you could put each set of elements in containers, grouped by their behaviour. Then apply common classes to them and relate them on click by their indexes. Try this:
let $contents = $('.content');
$('.trigger').on('click', e => {
let $target = $contents.eq($(e.target).index()).fadeToggle();
$contents.not($target).fadeOut();
});
.content { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="trigger-container">
<img src="01.jpg" class="trigger" />
<img src="02.jpg" class="trigger" />
<img src="03.jpg" class="trigger" />
<img src="04.jpg" class="trigger" />
</div>
<div class="content-container">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
</div>
for(let i=0;i<=4;i++){
$("#img"+i).on('click', function() {
$("#div"+i).fadeIn();
for(var num=0; num<=4; num++)
{
if(num!=i)
{
$("#div"+num).fadeOut()
}
}
});
}
Related
So I was basically trying to create a drop-down list with jquery. I was successful in achieving but came across with a slight problem. Here's the code
HTML
<div class="dropdown_heading">
text
</div>
<div class="dropdown_container">
<div class="">
Competition1
</div>
<div class="">
Competition2
</div>
<div class="">
Competition3
</div>
</div>
JQUERY
$(document).ready(function(){
$(".dropdown_heading").mouseenter(function(){
$(".dropdown_container").slideDown();
});
$(".dropdown_container").mouseleave(function(){
$(".dropdown_container").slideUp();
});
});
Once I hover over the dropdown_heading the dropdown shows-up and I'm able to navigate over it but the only way the it slides back up is if i actually have the cursor in the dropdown_container. If I try to slide it up removing the mouse from dropdown_heading, the dropdown is still visible. How would I be able to slide the submenu back up when the mouse leaves both div_container and div_heading?
I've tried to execute this function but therefore I am unable to navigate over the container. Thanks.
$(".dropdown_heading").mouseleave(function(){
$(".dropdown_container").slideUp();
});
You can try a timer based solution like
jQuery(function($) {
var $target = $(".dropdown_container");
$('.dropdown_heading').hover(function() {
clearTimeout($target.data('hoverTimer'));
$target.stop(true, true).slideDown(500);
}, function() {
var timer = setTimeout(function() {
$target.stop(true, true).slideUp();
}, 200);
$target.data('hoverTimer', timer);
});
$target.hover(function() {
clearTimeout($(this).data('hoverTimer'));
}, function() {
$(this).stop(true, true).slideUp();
});
});
.dropdown_container {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown_heading">
text
</div>
<div class="dropdown_container">
<div class="">
Competition1
</div>
<div class="">
Competition2
</div>
<div class="">
Competition3
</div>
</div>
The toggleClass() method toggles between adding and removing one or more class names from the selected elements.
This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect..
Try this,
$(document).ready(function(){
$(".dropdown_heading").mouseenter(function(){
$(".dropdown_container").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown_heading">
text
</div>
<div class="dropdown_container">
<div class="">
Competition1
</div>
<div class="">
Competition2
</div>
<div class="">
Competition3
</div>
</div>
I'm stuck with a menu I'd love to add to my website.
I have branched my work in:
Commercial
Fashion
Music
Portrait
So I have a menu like this one above.
When I click on one section, let's say "Commercial" I want all the others to be display:none.
Have a look at this FIDDLE: http://jsfiddle.net/bfevLsj2/8/
$(document).ready(function() {
$("#commercial").click(function() {
$(".commercial").toggleClass("show");
$(".fashion").toggleClass("hid");
$(".music").toggleClass("hid");
$(".portrait").toggleClass("hid");
});
});
You need siblings() width jquery
Description: Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
$("[id]").click(function(){ //onclick on element with ID
var selected = $(this).attr("id"); // save the value of that ID
$("."+ selected).show().siblings("[class]").hide()//find the class with the same value as class and show it then find all siblings class and hide them
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="commercial">Commercial</div>
<div id="fashion">Fashion</div>
<div id="music">Music</div>
<div id="portrait">Portrait</div><br />
<div class="commercial">C</div>
<div class="fashion">F</div>
<div class="music">M</div>
<div class="portrait">P</div>
BUT a better approach would be to use data-*
$("[data-tab]").click(function(){
var current = $(this).attr("data-tab");
$("[data-content="+ current +"]").show().siblings("[data-content]").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div data-tab="commercial">Commercial</div>
<div data-tab="fashion">Fashion</div>
<div data-tab="music">Music</div>
<div data-tab="portrait">Portrait</div><br />
<div data-content="commercial">C</div>
<div data-content="fashion">F</div>
<div data-content="music">M</div>
<div data-content="portrait">P</div>
AGAIN it is better to use pure javascript
function runClick (event) {
var current = this.getAttribute("data-tab");
for( var content = 0; content < dataContent.length; content++) {
dataContent[content].style.display = "none"
}
document.querySelector("[data-content="+ current + "]").style.display = "block"
}
var dataTabs = document.querySelectorAll("div[data-tab]"),
dataContent = document.querySelectorAll("div[data-content]");
for(var tab = 0; tab < dataTabs.length; tab++){
dataTabs[tab].addEventListener("click", runClick , false);
}
<div data-tab="commercial">Commercial</div>
<div data-tab="fashion">Fashion</div>
<div data-tab="music">Music</div>
<div data-tab="portrait">Portrait</div><br />
<div data-content="commercial">C</div>
<div data-content="fashion">F</div>
<div data-content="music">M</div>
<div data-content="portrait">P</div>
HTML:
<div id="commercial" class="menuItem">Commercial</div>
<div id="fashion" class="menuItem">Fashion</div>
<div id="music" class="menuItem">Music</div>
<div id="portrait" class="menuItem">Portrait</div><br />
<div class="commercial content">C</div>
<div class="fashion content">F</div>
<div class="music content">M</div>
<div class="portrait content">P</div>
JavaScript:
$(document).ready(function(){
$(".menuItem").click(function(){
var id = this.id;
$('.content').removeClass('show').addClass('hid');
$('.'+id).addClass('show').removeClass('hid');
});
});
CSS:
.hid {
display:none;
}
.show {
display:block;
}
Fiddle
Have a look at this fiddle, think it's what you want
Essentially you can use .toggle() to traverse and show/hide according to whether it's the one you want to show.
$(function(){
// find all the links that you can click
$("div.clickable a").click(function(e) {
// when they're clicked, find the identifier of
// the tab/div you want shown
var clickedId = $(e.target).parent("div").attr("id");
// traverse all of the divs and show/hide according
// to whether it's the tab you want
$("div.section").each(function(index, div) {
$(div).toggle($(div).hasClass(clickedId));
});
});
});
And the HTML:
<div id="commercial" class="clickable">Commercial</div>
<div id="fashion" class="clickable">Fashion</div>
<div id="music" class="clickable">Music</div>
<div id="portrait" class="clickable">Portrait</div>
<br />
<div class="commercial section">C</div>
<div class="fashion section">F</div>
<div class="music section">M</div>
<div class="portrait section">P</div>
HTH
Edited to add an "ALL" link in this fiddle
$("div.clickable a").click(function(e) {
// when they're clicked, find the identifier of
// the tab/div you want shown
var clickedId = $(e.target).parent("div").attr("id");
// traverse all of the divs and show/hide according
// to whether it's the tab you want
$("div.section").each(function(index, div) {
$(div).toggle($(div).hasClass(clickedId) || clickedId=="ALL");
});
});
After adding this to the list of clickable divs:
<div id="ALL" class="clickable">
ALL
</div>
Your could that more easy like:
<div class="link" id="commercial">Commercial</div>
<div class="link" id="fashion">Fashion</div>
<div class="link" id="music">Music</div>
<div class="link" id="portrait">Portrait</div><br />
<div class="commercial elem">C</div>
<div class="fashion elem">F</div>
<div class="music elem">M</div>
<div class="portrait elem">P</div>
<script type="text/javascript">
$(document).ready(function(){
$(".link").click(function(){
var id = $(this).attr('id');
$('.elem').hide();
$('.' + id).show();
});
});
</script>
I have a banner which I need changing on a click. at the moment I have hidden the 2nd banner and currently banner 1 shows. When I click the arrow I want banner 1 to hide and banner 2 to show etc.. only problem I tried using html.
<div class="homeArrow"><img src="https://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png" alt=""/></div>
i want homeArrow to be the click button to show next banner
but not sure how to connect to jquery...
This is JS fiddle:
http://jsfiddle.net/8a7GL/152/
Hide / Show one Banner at a time:
$(".homeArrow").on('click',function () {
$(".homeImage").slideToggle();
});
http://jsfiddle.net/8a7GL/152/
Sliding from left to right can be achieved by a little more code in jQuery see:
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/
You could also use addClass/removeClass and make the sliding CSS3 transitions. This would greatly improve quality.
UPDATE:
Here is the left / right slidy.
HTML:
<div class="homeBannerContainer" style="display: block">
<div id="a1" class="homeImage">
<h4>Banner 1</h4>
<img src="http://www.nostomachforcancer.org/wp-content/uploads/2013/08/nsfc_scam_banner_50percent.jpg" alt="" />
<div class="homeBanner">
<h3>My banner</h3>
</div>
</div>
<div id="a2" class="homeImage" style="display: none">
<h4>Banner 2</h4>
<img src="http://www.nostomachforcancer.org/wp-content/uploads/2013/08/nsfc_scam_banner_50percent.jpg" alt="" />
<div class="homeBanner" style="display: none">
<h3>My banner 2</h3>
</div>
</div>
<div class="homeArrow">
<img src="https://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png" alt="" />
</div>
CSS:
$(".homeArrow").on('click', function () {
$('.homeImage').animate({
width: 'toggle'
});
});
DEMO:
http://jsfiddle.net/8a7GL/174/
You can use the show/hide function provided by jquery and even give it an animation.
Just give the banners a selector and use the .click event.
http://api.jquery.com/toggle/
function change(){
$("#firstbanner").toggle();
$("#secondbanner").toggle();
}
In HTML:
<button onclick="change()" />
try this:
if ($('#Banner2Home').is(":visible")) {
$('#Banner2Home').hide();
} else {
$('#Banner2Home').show();
}
return false;
Till now I can grab the src of the image and display it in a fixed division, kind of like a pop up. But I want to hide the div element when the mouse is clicked outside the div. Please guide me how to do it, and also please correct me if my code can be improved. Thanks!
js:
$(document).ready(function () {
$(".pic").hide();
$(".screen").click(function () {
display($(this));
});
});
function display($this) {
var source = $("img", $this).attr("src");
$(".pic img").attr("src",source);
$(".pic img").css("width","450px");
$(".pic").show();
}
html:
<div id="album">
<div class="pic">
<img src="" />
</div>
<div class="screen">
<h1 class="title">Photo 1</h1>
<img src="images/1 png.png" class="image" />
<p class="description">This is a description</p>
</div>
<div class="screen">
<h1 class="title">Photo 1</h1>
<img src="images/2 png.png" class="image" />
<p class="description">This is a description</p>
</div>
<span class="clear_left"></span>
</div>
blur event of jquery can be used
$(".screen").bind('blur',function () {
hide($(this));
});
function display($this) {
$(".pic").hide();
}
Try like this
$(document).click(function () {
if ($(this).class != "pic") {
$(".pic").hide();
}
});
Live Demo
So I'm very beginner with javascript and would love some help simplifying this code.
I have a series of thumbnails arranged in a specific pattern, and when you click on a thumbnail, I'd like all the thumbnails to disappear, and the corresponding larger image to become visible. Then, when you click on the large image, it disappears and all the thumbnails are visible again. Each thumbnail has its own div id because they all have their unique positions.
I've figured out a way to do it, but it's very repetitive.
HTML:
<style type="text/css">
#largeimage_wrapper {visibility: hidden;}
</style>
</head>
<body>
<div id="thumbnail_wrapper">
<div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_big1();"/></div>
<div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_big2();"/></div>
<div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_big3();"/></div>
...etc
</div>
<div id="largeimage_wrapper">
<div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs1();"/></div>
<div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs2();"/></div>
<div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs3();"/></div>
...etc
</div>
</body>
javascript:
get_big1() {
document.getElementById('thumbnailwrapper').style.visibility='hidden';
document.getElementById('large1').style.visibility='visible';
}
get_thumbs1() {
document.getElementById('thumbnailwrapper').style.visibility='visible';
document.getElementById('large1').style.visibility='hidden';
}
get_big2() {
document.getElementById('thumbnailwrapper').style.visibility='hidden';
document.getElementById('large2').style.visibility='visible';
}
get_thumbs2() {
document.getElementById('thumbnailwrapper').style.visibility='visible';
document.getElementById('large2').style.visibility='hidden';
}
get_big3() {
document.getElementById('thumbnailwrapper').style.visibility='hidden';
document.getElementById('large3').style.visibility='visible';
}
get_thumbs3() {
document.getElementById('thumbnailwrapper').style.visibility='visible';
document.getElementById('large3').style.visibility='hidden';
}
</script>
There must be a better way! I imagine it's not that difficult, I just can't to get a grasp on it yet. Thanks in advance.
There are lots of ways to tackle this. The first and most obvious that comes to my mind is simply to pass a number into a single function which determines the image id to modify:
function get_thumbs(id) {
document.getElementById('thumbnailwrapper').style.visibility='visible';
document.getElementById('large' + id).style.visibility='hidden';
}
<div id="largeimage_wrapper">
<div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs(1);"/></div>
<div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs(2);"/></div>
<div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs(3);"/></div>
...etc
</div>
... And the same thing for get_big().
Alternatively you can use just one function that handles both conditions (big or thumbnail):
function get_img(id, type) {
if (type == 'big') {
document.getElementById('thumbnailwrapper').style.visibility='hidden';
document.getElementById('large' + id).style.visibility='visible';
}
else if (type == 'thumb') {
document.getElementById('thumbnailwrapper').style.visibility='visible';
document.getElementById('large' + id).style.visibility='hidden';
}
else return false;
}
And in the HTML:
<div id="thumbnail_wrapper">
<div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_img(1, 'big');"/></div>
<div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_img(2, 'big');"/></div>
<div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_img(3, 'big);"/></div>
...etc
</div>
<div id="largeimage_wrapper">
<div id="large1"><img src="thumbnail1.jpg" onClick="get_img(1, 'thumb');"/></div>
<div id="large2"><img src="thumbnail2.jpg" onClick="get_img(2, 'thumb');"/></div>
<div id="large3"><img src="thumbnail3.jpg" onClick="get_img(3, 'thumb');"/></div>
...etc
</div>
You could simplify by making it all into two functions and using an input to drive which item is affected:
HTML:
<style type="text/css">
#largeimage_wrapper {visibility: hidden;}
</style>
</head>
<body>
<div id="thumbnail_wrapper">
<div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_big(1);"/></div>
<div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_big(2);"/></div>
<div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_big(3);"/></div>
...etc
</div>
<div id="largeimage_wrapper">
<div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs(1);"/></div>
<div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs(2);"/></div>
<div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs(3);"/></div>
...etc
</div>
</body>
javascript:
get_big(id) {
document.getElementById('thumbnailwrapper').style.visibility='hidden';
document.getElementById('large'+id).style.visibility='visible';
}
get_thumbs(id) {
document.getElementById('thumbnailwrapper').style.visibility='visible';
document.getElementById('large'+id).style.visibility='hidden';
}
A library like jQuery can make this far easier, but here is how you can improve your code using javascript.
First, modify your html to include classes. We will then use these to gather the selected items. Also remove the inline onclick handlers. Try not to mix js and html.
<div id="thumbnail_wrapper">
<div class="thumbnail" id="thumbnail1"><img src="thumbnail1.jpg" /></div>
<div class="thumbnail" id="thumbnail2"><img src="thumbnail2.jpg" /></div>
<div class="thumbnail" id="thumbnail3"><img src="thumbnail3.jpg" /></div>
</div>
<div id="largeimage_wrapper">
<div class="large" id="large1"><img src="thumbnail1.jpg" /></div>
<div class="large" id="large2"><img src="thumbnail2.jpg" /></div>
<div class="large" id="large3"><img src="thumbnail3.jpg" /></div>
</div>
Next it is useful to use CSS to change the visibility of elements instead of directly modifying the style attribute. This makes style changes down the road far easier.
div#thumbnail_wrapper .hidden { visibility: hidden; }
div.large .hidden { visibility: hidden; }
Next we can use getElementsByClassName to attach onclick handlers
var thumbs = document.getElementsByClassName('thumbnail');
var large = document.getElementsByClassName('large');
for (var i = 0; i < thumbs.length; i++) {
thumbs[i].onclick = function() {
//hide all thumbs
document.getElementById('thumbnail_wrapper').classList.add('hidden');
//show large image (i got lazy and sliced)
document.getElementById('large' + this.id.slice(-1)).classList.remove('hidden');
};
}
for (var i = 0; i < large.length; i++) {
large[i].onclick = function() {
//hide large image
this.classList.add('hidden');
//show thumbs
document.getElementById('thumbnail_wrapper').classList.remove('hidden');
};
}
This creates a nice differentiation between styling with CSS, DOM structure for the contained elements and the javascript code that makes changes.
There are a lot of ways you could do this, and it would be very quick and easy in jQuery, but I'm not going to advocate that here because you clearly want to learn about javascript and jQuery can shield you from a lot of that. Try making your functions and function calls generic, like this:
<style type="text/css">
#largeimage_wrapper {visibility: hidden;}
</style>
</head>
<body>
<div id="thumbnail_wrapper">
<div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_big(1);"/></div>
<div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_big(2);"/></div>
<div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_big(3);"/></div>
...etc
</div>
<div id="largeimage_wrapper">
<div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs(1);"/></div>
<div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs(2);"/></div>
<div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs(3);"/></div>
...etc
</div>
</body>
javascript
function get_thumbs(id) {
document.getElementById('thumbnailwrapper').style.visibility='visible';
document.getElementById('large' + id).style.visibility='hidden';
}
function get_big(id) {
document.getElementById('thumbnailwrapper').style.visibility='hidden';
document.getElementById('large' + id).style.visibility='visible';
}