Here is a screenshot of what I'm trying to accomplish:
Here's a snippet of the html:
<section id="obstacles">
<div class="row">
<div class="large-3 columns">
<a href="#">
<div class="box inactive topBox" id="theTank">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
<div class="large-3 columns end">
<a href="#">
<div class="box inactive topBox rightBox" id="sundaeSlide">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
</div>
<div class="row">
<div class="large-3 columns">
<a href="#">
<div class="box inactive" id="hamster">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
<div class="large-3 columns end">
<a href="#">
<div class="box inactive rightBox" id="downTheHatch">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
</div>
<div class="row">
<div class="large-6 columns large-offset-6">
<img id="smallSlime" src="/assets/otherAssets/smallSlime.png">
</div>
</div>
<div class="row">
<div class="large-6 columns large-offset-6">
<a href="#">
<hgroup>
<h2>Down the Hatch</h2>
<h3>6ft Slide Covered in Gunk!</h3>
</hgroup>
</a>
</div>
</div>
</section>
And here's the jQuery I'm using to change the large picture that shows up on the right:
$(document).ready(function() {
$("#theTank").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/the-tank.png' />");
$(this).toggleClass('active inactive');
})
$("#sundaeSlide").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/sundae-slide.png' />");
$(this).toggleClass('active inactive');
})
$("#hamster").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/hamster-wheel.png' />");
$(this).toggleClass('active inactive');
})
$("#downTheHatch").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/down-the-hatch.png' />");
$(this).toggleClass('active inactive');
})
$("#pickIt").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/pick-it.png' />");
$(this).toggleClass('active inactive');
})
$("#theWringer").click(function(event){
event.preventDefault();
$('.largeObstacles').html("<img src='/assets/obstacles/the-wringer.png' />");
$(this).toggleClass('active inactive');
})
})
Right now, when I click on the thumbnail image on the left, the background turns yellow and the correct large image displays on the right. However, when I click another image, the highlighted image remains highlighted. I am sure there is an easy fix to this, I'm just not confident of how to traverse the DOM to do what I want. Any help is greatly appreciated!
How about:
$(".active").toggleClass("active inactive");
Add this as the first line in your click functions.
$("#theTank, #anotherimg").click(function(event){
event.preventDefault();
var imgsrc = $(this).find('img').attr('src');
$('.largeObstacles').html("<img src='"+imgsrc+"' />");
$(this).toggleClass('active inactive');
});
Try this:
(function() {
var LMenuItems = $("a > .box");
var RMenuItem = $(".largeObstacles");
LMenuItems.foreach(function(MenuItem) {
MenuItem.onclick = function(event) {
event.preventDefault();
RMenuItem.html(MenuItem.childNodes[1]);
// Combined with Bill Read's answer -> Box class containing active class
$(".box > .active").toggleClass("active inactive");
}
});
}());
This method allows you to select all the menu items you have on the left menu by creating an array. Using .foreach allows you to iterate through the array and bind the click event to each menu object you have.
As others have mention. Your code makes it difficult because you are using individual event listeners for each element.
A good way to solve this would be to make your code more universal.
Adjusting for my lack of attention in seeing that the image source are different for small/large images.
First make you dom elements share a universal selector (.small-image)
And use a data-attribute on you element containing the large image src.
Note I used the same image for both just to make examples easier. Each data-imgsrc should have its respective image.
<div class="row">
<div class="large-3 columns">
<a href="#">
<div class="box inactive small-image" id="hamster" data-imgsrc="/assets/obstacles/the-tank.png">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
<div class="large-3 columns end">
<a href="#">
<div class="box inactive rightBox small-image" id="downTheHatch" data-imgsrc="/assets/obstacles/the-tank.png">
<img src="http://fpoimg.com/150x150">
</div>
</a>
</div>
</div>
Then with your javascript we can simple pull the data-imgsrc attribute from out clicked element and set it to the large container.
$('.small-image').on('click', function (ev) {
ev.preventDefault();
// remove any currently active small-images
$('.small-image.active').removeClass('active');
// make clicked active
$(this).addClass('active');
// Get the image src from the clicked elements data-imgsrc attribute
// and inject into large container
var imgText = '<img src="{img-src}" />';
var imgSrc = $(this).data('imgsrc');
$('.largeObstacles').html(imgText.replace('{img-src}', imgSrc);
});
This seems to be the best solution I've found:
("#obstacles .small-image").on('click', function(){
event.preventDefault();
var selector = '#'+$(this).attr('id');
var image = $(this).find('img').attr('data-attr-putItOver');
$(".small-image.active").removeClass('active').addClass('inactive');
$(selector).addClass('active');
$('.largeObstacles').html("<img src='"+image+"' />");
});
Related
I am trying to create a comparison overlay that shows items selected by users when they 'add to compare' link.(like one in flipkart that appears on top when you hit add to compare). Here is my code:
<div class="college-list-container">
<div class = "individual-college-container" id="text1">
<div class="image-header"><h3>text1</h3>
</div>
<div class="dark-overlay">
<div class="overlay-links" style=" float:left;"> <div class="absolute-center ">Details</div></div>
<a href=""> <div class="overlay-links" style=" float:right; border-right:none;"> <div class="absolute-center comparison" id="comparison">Add to compare</div>
</div></a>
</div>
</div>
<div class = "individual-college-container">
<div class="image-header"><h3>text2</h3>
</div>
<div class="dark-overlay">
<div class="overlay-links" style=" float:left;"> <div class="absolute-center ">Details</div></div>
<a href=""> <div class="overlay-links" style=" float:right; border-right:none;"> <div class="absolute-center comparison">Add to compare</div>
</div></a>
</div>
</div>
<div class = "individual-college-container" id="itm">
<div class="image-header" ><h3>text3</h3>
</div>
<div class="dark-overlay">
<div class="overlay-links" style=" float:left;"> <div class="absolute-center ">Details</div></div>
<a href=""> <div class="overlay-links" style=" float:right; border-right:none;"> <div class="absolute-center comparison">Add to compare</div>
</div></a>
</div>
Javascript
/show overlay when one checkbox is checked and add its name/image to the empty space
$('.comparison').click(function(e){
var clgId = $(this).parentsUntil('.individual-clg-container').find('.image-header').text();
e.preventDefault();
var clg = $("<li></li>")
clg.text(clgId);
var removeLink = $("<a href=''>(Remove)</a>");
clg.append(removeLink)
$('.comparison-colleges').append(clg);
$('.add-to-compare-overlay').show("slide", { direction: "up" }, 300);
});
I want the text in the div containing class 'image-header' to be assigned to the variable clgId. The problem that i am facing with my code is that it is adding the text of all the divs containing class 'image-header'. Ex i want the value text1 to be assigned on clicking add to compare of the div with id text1. However it assigns 'text1 text2 text3' to clgId.
Please help
I've created a JSFiddle with what I think is your desired functionality (I included a console log output in the script of the clgId variable):
http://jsfiddle.net/py38kuvv/
I replaced the parentsUntil function with the closest function (and replaced the individual-clg-container class selector):
var clgId = $(e.target).closest('.individual-college-container').find('.image-header').text();
and also updated your click handler:
$('.comparison').on( "click", function(e) {
In order to get a quicker response in future, posting a JSFiddle of what you have so far makes it easier for others to help :)
It is adding all of them because
var clgId = $(this).parentsUntil('.individual-clg-container').find('.image-header').text();
should be
var clgId = $(this).parentsUntil('.individual-college-container').find('.image-header').text();
I am trying to get a DIV to replaced by another DIV when clicked. Right now I have it so that the first DIV appears and then disappears when other DIVs are clicked but when I try to get the other DIVS to appear when clicked, the first DIV pops up with it. Here is a link to the page http://melinajesser.com/ArchFitters/womens.php, you can click on the Walk image and it is fine but click on the seasonal image and it messes up. How can I fix this?
<div id="infor1">
<div class="side col-md-4 align-center">
<p>Full EVA Midsole Provides Signature Hoka Cushioning</p>
<img src="images/valorwomensside.png">
</div>
<div class="bottom col-md-4 align-center">
<p>Early-Stage Meta-Rocker Provides Propulsion</p>
<img src="images/valorwomensbottom.png">
</div>
<div class="description col-md-4 align-center">
<p>Comfort reigns supreme in the VALOR from the Comfort-Frame lycra upper to the Ultrasize midsole that provides the signature HOKA ONE ONE cushioned ride. Built on an Early-Stage-Meta-Rocker for propulsion, the Valor is a smooth-riding shoe that is best suited for running on man-made surfaces.</p>
</div>
</div>
<div id="infor2">
<div class="side col-md-4 align-center">
<p>Lightweight, padded contour cork footbed</p>
<img src="images/trulieside.png">
</div>
<div class="bottom col-md-4 align-center">
<p>Lightweight Rubber</p>
<img src="images/truliebottom.png">
</div>
<div class="description col-md-4 align-center">
<p>A truly scrumptious leather sandal made in Spain. Man made woven hook and loop straps provide a custom feeling fit. Incredible comfort comes from the lightweight, padded, contour cork-polyurethane footbed lined in suede.</p>
</div>
</div>
$(document).ready(
function(){
$("#walk").click(function () {
$("#infor1").toggle("slow");
});
});
$(document).ready(
function(){
$("#run").click(function () {
$("#infor1").fadeToggle();
});
});
$(document).ready(
function(){
$("#seas").click(function () {
$("#infor1").fadeToggle();
});
});
$(document).ready(
function(){
$("#seas").click(function () {
$("#infor2").toggle("slow");
});
});
$(document).ready(
function(){
$("#run").click(function () {
$("#infor2").fadeToggle();
});
});
$(document).ready(
function(){
$("#walk").click(function () {
$("#infor2").fadeToggle();
});
});
There's no need to wrap each click function in a document ready they can go in the same one, that being said you should use a class to attach the click function or bind it to a handler.
$('.toggle').on('click', function(e){
//do stuff here
});
http://jsfiddle.net/6w0v8nw3/
$(document).ready(function () {
$('.toggle').on('click', function (e) {
e.preventDefault();
var id = $(this).attr('href');
if ($(id).is(':visible')) {
$(id).slideUp('fast');
return false;
}
$('.info:visible').slideUp('fast');
$($(this).attr('href')).slideDown('slow');
});
});
Have a link, make the anchor tag the id of the container you want to toggle.
I am using the following script to show a different background depending on the state of the div.
When it is not expanded it shows the "plus (+)" sign, while when is expanded it does not have background image (does not shows anything).
The problem there is that only work once, and I dont know why.
Here's the code:
EDIT (added HTML)!
HTML:
<body>
<section>
<div class="wrapper wf">
<ul id="Parks" class="just">
<!--------------- PRODUCT -->
<li class="mix" href="#therapy_vital" >
<div class="meta name">
<div class="img_wrapper">
<img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/>
</div>
<div class="titles">
<h2>TITLE</h2>
</div>
</div>
<!-- Expand -->
<div href="#therapy_vital" class="nav-toggle"></div>
<div id="therapy_vital" style="display:none">
<article class="ac-small">
SUBCONTENT<br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</div>
</li>
<!--------------- PRODUCT -->
<li class="mix" href="#therapy_natur" >
<div class="meta name">
<div class="img_wrapper">
<img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/>
</div>
<div class="titles">
<h2>TITLE</h2>
</div>
</div>
<!-- Expand -->
<div href="#therapy_natur" class="nav-toggle"></div>
<div id="therapy_natur" style="display:none">
<article class="ac-small">
SUBCONTENT<br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</div>
</li>
</ul>
</div>
</section>
</body>
JS:
$(document).ready(function() {
$('.meta').click(function() {
$(this).css('background', 'none');
});
$('.mix').click(function() {
var collapse_content_selector = $(this).attr('href');
var toggle = $(this);
$('.meta').click(function() {
$(this).css('background', 'url(images/arrow_down.png) no-repeat scroll 95% 97% transparent');
});
$(collapse_content_selector).toggle(function() {});
});
});
(The .mix value makes the Div expands, and the .meta class switch to different background).
Any clue?
EDIT2 (Live example)
http://anubisfiles.com/test/test.html
(Due I am not really familiar with jsFiddle, I prefer to show you it hosted on a website).
Thanks!
Use on function to bind events,
$('element').on('click', function() {
});
$('.mix').click(function() {
var collapse_content_selector = $(this).attr('href');
var toggle = $(this);
$(this).find('.meta').css('background', 'url(images/arrow_down.png) no-repeat scroll 95% 97% transparent');
$(collapse_content_selector).toggle(function() {});
});
Try this
I have a plain HTML page with various images on it, each image when clicked opens a lightbox with sharing buttons inside. I had planned to use the ID in the URL to highlight which image the like was for, but it appears that facebook and twitter strip these out.
Without having hundreds of separate lightboxes for each image, how can I have sharing specific to the image currently being viewed?
HTML Examples:
<div class="tile" id="tile-01">
<a href="#tile-01" data-name="Jo" data-title="Chartered Surveyor">
<img src="media/img01.jpg" alt="Jo" />
<p class="name">Jo - Chartered Surveyor</p>
</a>
</div>
<div class="overlay">
<div id="lightbox">
<div class="lightbox-content">
</div>
<div class="details">
<h2>Claire</h2>
<span class="job-title"></span>
<div class="social">
<div class="fb-like" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true"></div>
Tweet
<a href="//pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" ><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>
</div>
</div>
</div>
</div>
Javascript:
<script type="text/javascript">
$(function(){
var $container = $('#gallery');
$container.imagesLoaded( function() {
$container.masonry();
});
$('.tile a').click(function(){
$('.overlay').fadeIn();
$img = $(this).find('img').clone();
$('.lightbox-content').html($img)
$('#lightbox h2').text($(this).data('name'))
$('#lightbox span.job-title').text($(this).data('title'))
return true;
})
$('.overlay').click(function(){
$(this).fadeOut();
})
})
</script>
Hey all,
I am trying to make a portfolio page for my new website that will display portfolio items in a grid. The functionality of it seems simple but I can't seem to nail down the jQuery. Here is how I need it to work.
By default I want all items to be shown.
On a specific catagory button click I want it to show the respective divs and hide the rest.
These divs have overlapping classes(some items fit into more then one category). Those divs should be shown when either of their respective class buttons are clicked.
Here is what I was trying to use to make it work(it seems bulky, but I'm a jQuery noob):
$(document).ready(function(){
$('#showall').click(function(){
$(".item").show("fast");
})
$('#webtrigger').click(function(){
if ($('.web').is(':visible')) {
$('.web').show('fast');
} else {
$('.illustration.print.logo').hide('fast');
}
return false;
})
$('#logotrigger').click(function(){
if ($(".logo").is(":visible")) {
$(".logo").show("fast");
} else {
$(".illustration.print.web").hide("fast");
}
return false;
})
});
show all<br/>
web<br/>
illustration<br/>
print<br/>
logo<br />
<div id="wrapper">
<div class="item web">web</div>
<div class="item illustration">illustration</div>
<div class="item print">print</div>
<div class="item logo">logo</div>
<div class="item web logo">web logo</div>
<div class="item print illustration ">illustration print</div>
<div class="item illustration logo">illustration logo</div>
</div>
Any help would be greatly appreciated.
Thanks!
I'd remove the 'trigger' from the various control ids, and add a 'control' class to give:
show all<br/>
web<br/>
illustration<br/>
print<br/>
logo<br />
Then use the jQuery:
$('a.control').click(
function(){
var show = this.id;
$('#wrapper > div.' + show).show();
$('#wrapper > div:not(".'+show+'")').hide();
return false;
});
JS Fiddle demo.
Give this a shot.
$('#webtrigger').click(function(){
var shown = $('.web').show('fast').get();
$('#wrapper > item').not(shown).hide('fast');
return false;
});
It stores the ones you're showing in a variable, then uses not()(docs) to exclude them from the ones being hidden.
I would make something like this :
$('#webtrigger').click(function(){
$(".item").hide();
$('.web').show('fast');
});
You hide all items instantaneously, and then show with animation the divs you are interested in.
Of course, it's the same for all triggers you have.
Something like this should work when you have to pick through the items:
funciton tagClicked(e)
{
var ClassName=$(this).text();
if(ClassName="show all")
{
}
else
{
$.each($('.item'), function(idx,value)
{
if(value.hasClass(ClassName))
{value.show();}
else{ value.hide();}
};
}
}
jQuery:
$(document).ready(function(){
$('#showall').click(function()
{
$(".item").show("fast");
return false;
})
$('.trigger').click(function()
{
var triggerType = $(this).attr("id");
$(".item").hide("fast");
$('.'+triggerType).show('fast');
return false;
});
});
HTML:
<a href="#" id="showall">show all
<a href="#" id="web" class="trigger">web
<a href="#" id="illustration" class="trigger">illustration
<a href="#" id="print" class="trigger">print
<a href="#" id="logo" class="trigger">logo
<div id="wrapper">
<div class="item web">web</div>
<div class="item illustration">illustration</div>
<div class="item print">print</div>
<div class="item logo">logo</div>
<div class="item web logo">web logo</div>
<div class="item print illustration ">illustration print</div>
<div class="item illustration logo">illustration logo</div>
</div>
I would do a trick and use the id of the link to trigger the class of the content:
show all<br/>
web<br/>
illustration<br/>
print<br/>
logo<br />
<div id="wrapper">
<div class="item web">web</div>
<div class="item illustration">illustration</div>
<div class="item print">print</div>
<div class="item logo">logo</div>
<div class="item web logo">web logo</div>
<div class="item print illustration ">illustration print</div>
<div class="item illustration logo">illustration logo</div>
</div>
To show them all by default, use css
.item { display:block; }
Then jquery to display them:
$(document).ready(function(){
$(".showall").click(function(){$(".item").fadeIn(300);});
$(".trigger").click(function(){
var contentToDisplay = $("."+this.id);
if (contentToDisplay.is(":visible")) return;
$(".item").fadeOut(300); // I prefer this to hide effect
contentToDisplay.fadeIn(500);
});
});