jQuery - display div fro - javascript

I am creating a members' profile page. The members' names are links to their bio's id. The desired outcome is that when each person's name is clicked, their bio details appear in a specific css-styled box on the page. The box's background and border are visible when the page loads, but no content. When another name is clicked, the previous bio returns to hide and the current one changes to show. There is probably a simple answer to this that this newbie just doesn't get.
<script type="text/javascript">
$(document).ready(function() {
$(document).ready(function() {
$("#bioLinks div a").click(function(){
$("#bios .show").removeClass("show").addClass("hide");
var bio = $("#bios ." + $(this).attr("id"));
bio.removeClass("hide");
bio.addClass("show");
})
});
</script>
The css for the styled portions of the links and box:
#bios {background:#FFFFCC; border-style:solid; border-color:#ffd119; padding:15px; width:600px;text-align:left;position:absolute; top:200px;left:20px;}
.show {display:block; width:600px;}
.hide {display:none;}
.biopic {float:left; margin-right:15px; width:200px; height:200px; border-style:solid; border-color:#000099;clear:left;}
.biostext {display:inline; margin-left:15px; font-family:Georgia, serif; clear:right;}
#bioLinks {float:left; display:block; font-family:Georgia, serif; margin-left:25px; margin-top:15px;clear:right;}
a {font-family:Georgia,serif; color:#0000ff; text-decoration:none;}
The links themselves, although in reality there will be dozens:
<div id="bioLinks">
<div><a href id="bio1">Joe Bloggs</a></div>
<div><a href id="bio2">Monica Faux</a></div>
<div><a href id="bio3">John Doe</a></div>
</div>
And the bios themselves, but with the photos expunged for privacy:
<div id="bios">
<div class="bio1 hide">
<!--div class="biopic"><img src="http://www. -- snip--.jpg" width="200" height="200" alt="Joe Bloggs"-->
<!--/div-->
<div class="biostext">Joe Bloggs is just like everybody else.
</div>
</div>
<div class="bio2 hide">
<!--div class="biopic"><img src="http://www. -- snip--.jpg" width="200" height="200" alt="Monica Faux"-->
<!--/div-->
<div class="biostext">Monica Faux is a belle with a shady past.</div>
</div>
<div class="bio3 hide">
<!--div class="biopic"><img src="http://www. -- snip--.jpg" width="200" height="200" alt="John Doe"-->
<!--/div-->
<div class="biostext">John Doe is an unknown in the organisation.
</div>
</div>
</div>
When I test my code in Chrome and IE, the empty box displays on load, but clicking the links produces nothing.

Working Fiddle
I believe your problem is syntactical. You shouldnt be double binding $(document).ready() and it looks like there is one less than the required amount of closing brackets in any case.
Change your javascript to
$(document).ready(function () {
$("#bioLinks div a").click(function () {
$("#bios .show").removeClass("show").addClass("hide");
var bio = $("#bios ." + $(this).attr("id"));
bio.removeClass("hide");
bio.addClass("show");
})
});
And see if that fixes the problem
On another note, you used the incorrect method of commenting out HTML. The closing comment of HTML is --> not --!>

You may try this
$("#bioLinks div a").click(function () {
$("#bios > div").removeClass("hide").hide();
var bio = $("#bios ." + $(this).attr("id"));
bio.show();
});
DEMO.

Related

How to simultaneously hide and show content and vice versa?

I have a problem and I need your help. I have several links (in <aside>) leading to several different menus (in <section>). On click over the link, only the relevant div in <section> is shown, the rest are hidden. This part is ok and working. What is not working is when I click over an image:
the current div (.menu) in <section> should be hidden;
the same picture (with bigger size) should be shown;
when you click once again over the big image, the big image should disappear and the current div in .menu (the one that was hidden on the first step) should appear one more time. Sort of toggling between content.
So if I click on a picture on the "second div" content, the same picture with bigger size should be show (the "second div" content should be hidden) and when I click once again over the big picture it should disappear and the "second div" content to be returned.
I tried with toggle() but had no success. Either I did not use it correctly, or it is not suitable for my case. This is where I managed to reach to.
I will really appreaciate your support - how to show only the hidden div, not all hidden div's. Right now, when you click on the big image it did not show the hidden div.
$(window).on("load", function() {
$("div.menu:first-child").show();
});
$(".nav a").on("click", function() {
$("div.menu").fadeOut(30);
var targetDiv = $(this).attr("data-rel");
setTimeout(function() {
$("#" + targetDiv).fadeIn(30);
}, 30);
});
var pictures = $(".img-1, .img-2").on("click", function() {
$("div.menu:active").addClass("hidden");
//how to reach out only the current, active div (not all div's in .menu)?
$(".menu").hide();
var par = $("section")
.prepend("<div></div>")
.append("<img id='pic' src='" + this.src + "'>");
var removePictures = $("#pic").on("click", function() {
$(this).hide();
$(".hidden").show();
});
});
.menu {
width: 100%;
display: none;
}
.menu:first-child {
display: block;
}
.row {
display: inline-block;
width: 100%;
}
.img-1,
.img-2 {
width: 120px;
height: auto;
}
<!doctype html>
<html>
<head>
</head>
<body>
<aside>
<ul class="nav">
<li>To first div
</li>
<li>To second div
</li>
<li>To third div
</li>
</ul>
</aside>
<section>
<div class="menu" id="content1">
<h3>First Div</h3>
<div class="present">
<div class="row">
<div>
<p>Blah-blah-blah. This is the first div.</p>
<img class="img-1" src="http://www.newyorker.com/wp-content/uploads/2014/08/Stokes-Hello-Kitty2-1200.jpg">
</div>
</div>
<div class="row">
<div>
<img class="img-2" src="https://jspwiki-wiki.apache.org/attach/Slimbox/doggy.bmp">
<p>Blah-blah-blah. This is the first div.</p>
</div>
</div>
</div>
</div>
<div class="menu" id="content2">
<h3>Second Div</h3>
<div class="present">
<div class="row">
<div>
<p>
Blah-blah-blah. This is the second div.
</p>
<img class="img-1" src="http://www.newyorker.com/wp-content/uploads/2014/08/Stokes-Hello-Kitty2-1200.jpg">
</div>
</div>
<div class="row">
<div>
<img class="img-2" src="https://jspwiki-wiki.apache.org/attach/Slimbox/doggy.bmp">
<p>
Blah-blah-blah. Yjis is the second div.
</p>
</div>
</div>
</div>
</div>
<div class="menu" id="content3">
<h3>Third Div</h3>
<div class="present">
<div class="row">
<div>
<p>
Blah-blah-blah. This is the third div.
</p>
<img class="img-1" src="http://www.newyorker.com/wp-content/uploads/2014/08/Stokes-Hello-Kitty2-1200.jpg">
</div>
</div>
<div class="row">
<div>
<img class="img-2" src="https://jspwiki-wiki.apache.org/attach/Slimbox/doggy.bmp">
<p>
Blah-blah-blah. This is the third div.
</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</body>
</html>
Sorry for the ugly sketch and pictures - it is only to get an idea what it should look like....
In general, it's poor form to ask on Stack Overflow how to code for a specific behavior. However, that takes some understanding of the libraries you're using, and what you are trying to achieve. Hopefully, my answer will help you better articulate and form your questions in the future.
Here's a fiddle for you: https://jsfiddle.net/hwd4b0ag/
In particular, I've modified your last click listener:
var pictures = $(".img-1, .img-2").on("click", function() {
var parentDiv = $(this).closest('div.menu').hide();
var blownUpPic = $("<img>").attr({
id: 'pic',
src: this.src,
'data-parent': parentDiv.attr('id')
})
.appendTo("section")
.on('click', function() {
$('#' + $(this).attr('data-parent')).show();
$(this).remove();
});
});
Now, let's review it!
First,
var parentDiv = $(this).closest('div.menu').hide();
In a jQuery listener, the this variable stores the current javascript DOM element that is the recipient of the event listener. In your case, it refers to an element that matches ".img-1, .img-2".
.closest(selector) will traverse up the DOM (including the current element) and find the first matching element for the provided selector. In this case, it finds your container div with class menu. Then we hide that div and save a reference to it in a variable.
Next, we create a full-sized version of the picture and assign it some attributes:
var blownUpPic = $("<img>").attr({
id: 'pic',
src: this.src,
'data-parent': parentDiv.attr('id')
})
We set the data-parent attribute to the id of our container div, so we have a reference back to it later.
We then add our image to the DOM:
.appendTo("section")
And declare a new click listener for it:
.on('click', function() {
$('#' + $(this).attr('data-parent')).show();
$(this).remove();
});
With $(this).attr('data-parent') we use the reference to our container div that we assigned earlier, and then retrieve that element by its id. We unhide the container div and remove the full-sized image.
All done!
There are better ways to code this, but I think this is a good next step for you that's analogous to your current code.

Jquery only updating elements in the first matching div

I have two matching div that are siblings, they each have 2 images in them. I have one image showing in each sibling div by default and the other hidden. I then have a control to click to hide the current image and show the other.
My problem is that only the images in the first div are updating, the images in the second div are not changed.
I'm being fairly generic in my traversal, not a lot of specific classes, and I need to keep it that way.
Feels like I'm missing something really simple or maybe I'm not understanding how .eq() works in some way that limits the change to the first ".images" div?
How can I fix this to have the images in both divs change at the same time?
My html is is basically:
<div class="main">
<div class="image-group">
<h2> Title </h2>
<div class="color-selection">
<img alt="Black and Red" title="Black and Red">
<img alt="Black and Matte Black" title="Black and Matte Black">
</div>
<div class="images">
<img style="display: inline;">
<img style="display: none;">
</div>
<div class="images">
<img style="display: inline;">
<img style="display: none;">
</div>
</div><!--end image group -->
<div class="image-swap">
<i class="js-profile current">View 1</i>
<i class="js-angle">View 2</i>
</div>
</div><--/end main -->
And the jquery:
$(document).on("click" , ".js-profile" , function(){
var itemImage = $(this).parent().prev().find(".images img");
$(itemImage).eq(1).fadeOut(200);
$(itemImage).eq(0).fadeIn(200);
$(this).addClass("current");
$(this).next().removeClass("current");
return false;
})
$(document).on("click" , ".js-angle" , function(){
var itemImage = $(this).parent().prev().find("images img");
$(itemImage).eq(0).fadeOut(200);
$(itemImage).eq(1).fadeIn(200);
$(this).addClass("current");
$(this).prev().removeClass("current");
return false;
})
Firstly, you have some naming issues:
var bikeImage = $(this).parent().prev().find("images img");
$(itemImage).eq(0).fadeOut(200);
It should be
var itemImage = $(this).parent().prev().find(".images img");
$(itemImage).eq(0).fadeOut(200);
Let's asume that's due to posting it there and concentrate on the main problem.
$(this).parent().prev().find(".images img");
This returns a set of four images, always, not some 2x2 matrix, so
$(itemImage).eq(0).fadeOut(200);
$(itemImage).eq(1).fadeIn(200);
This part always targets the first set of images, as they have indexes 0 and 1, the other two images have indexes 2 and 3. So yes, eq does something else than you expect because your selection is different than what you might think.
Simple solution would be to filter then like this
$(itemImage).filter(':first-child').fadeOut(200);
$(itemImage).filter(':last-child').fadeIn(200);
This again takes a set of 4 images but doesn't limit the query to index 0 or 1 but rather to first-child, so it gets first image of both subset.
... maybe I'm not understanding how .eq() works in some way that limits the change to the first ".images" div?
You are correct. Please refer to the documentation for .eq():
Reduce the set of matched elements to the one at the specified index.
This means you are only selecting the first image element in the jQuery collection, not the first element in each div.
To resolve this you should use the :nth-child() pseudo-selector as follows:
$(itemImage).filter(':nth-child(1)').fadeOut(200);
$(itemImage).filter(':nth-child(2)').fadeIn(200);
According to the jQuery documentation for :first-child, it can also be used in place of :nth-child(1).
itemImage will be an array of count 4
by eq(0) and eq(1) you are targeting only img tag in your first div
For the second div it should be eq(2) and eq(3)
Also there is a scope issue for var itemImage This variable is not accessible in the event handler $(document).on("click" , ".js-angle" , function(){...}
The below code should work for you.
$(document).on("click" , ".js-profile" , function(){
var itemImage = $(this).parent().prev().find(".images:first img"); // this line is updated
$(itemImage).eq(1).fadeOut(200);
$(itemImage).eq(0).fadeIn(200);
$(this).addClass("current");
$(this).next().removeClass("current");
return false;
})
$(document).on("click" , ".js-angle" , function(){
var bikeImage = $(this).parent().prev().find("images:nth-child(2) img"); // this line is updated
$(bikeImage).eq(0).fadeOut(200); // itemImage changed to bikeImage
$(bikeImage).eq(1).fadeIn(200); // itemImage changed to bikeImage
$(this).addClass("current");
$(this).prev().removeClass("current");
return false;
})
Try this
$(document).on("click" , ".js-profile" , function(){
var itemImage = $(this).parent().prev().find(".images");
itemImage.each(function(){
$(this).find('img').eq(1).fadeOut(200);
});
itemImage.each(function(){
$(this).find('img').eq(0).fadeIn(200);
});
$(this).addClass("current");
$(this).next().removeClass("current");
return false;
})
$(document).on("click" , ".js-angle" , function(){
var itemImage = $(this).parent().prev().find(".images");
itemImage.each(function(){
$(this).find('img').eq(0).fadeOut(200);
});
itemImage.each(function(){
$(this).find('img').eq(1).fadeIn(200);
});
$(this).addClass("current");
$(this).prev().removeClass("current");
return false;
})
.images img:first-child{
width:100px;
height:100px;
background:#ccc;
}
.images img{
width:100px;
height:100px;
background:#f00;
}
.image-swap{
padding:5px;
}
.image-swap i{
padding:5px;
margin:5px;
border:1px solid #ccc;
cursor:pointer;
}
.image-swap i:hover{
background:#000;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="image-group">
<h2> Title </h2>
<div class="color-selection">
<img alt="Black and Red" title="Black and Red">
<img alt="Black and Matte Black" title="Black and Matte Black">
</div>
<div class="images">
<img style="display: inline;">
<img style="display: none;">
</div>
<div class="images">
<img style="display: inline;">
<img style="display: none;">
</div>
</div><!--end image group -->
<div class="image-swap">
<i class="js-profile current">View 1</i>
<i class="js-angle">View 2</i>
</div>
</div>
Hope this Helps..

JQuery Minimize & Maximize HTML Div

Basically I am trying to make a minimize/maximize div with jquery animation. I have a wrapper div named leftFilterBox. In leftFilterBox, there is another div to wrap all the contents named filterContent. So when I minimized the window, the filterContent should be collapse and the leftFilterBox will be shifted down at the same time when filterContent is collapse with jquery animation. Same goes to maximize. Here is my html code:
<div id='leftFilterBox'>
<div style='background: linear-gradient(#848484, #2E2E2E);color: white;line-height:2.2em;padding-left:5%;width:auto;font-weight:bold;'>Traffic Conditions
<div id='filterWindowNav'><img class='minMaxFilterBox' src='img/minimizeFilterWindow.png' onClick='minimizeFilterWindow();' />
<img class='minMaxFilterBox' src='img/maximizeFilterWindow.png' onClick='maximizeFilterWindow();' />
<img class='closeFilterBox' onclick='closeLeftFilterBox();' alt='close' src='img/closeFilterWindow.png' /></div></div><br/>
<div id='filterContent'><span class='getLiveTrafficTitle'><center>Select date</center></span><hr width='85%'></div>
</div>
And my CSS:
#filterWindowNav {
float:right;
}
.minMaxFilterBox, .closeFilterBox {
width: 28px;
height: 28px;
cursor: pointer;
}
And my JavaScript:
function minimizeFilterWindow() {
$('#leftFilterBox').css('height', '25px');
$('#leftFilterBox').css('top', '90%');
}
function maximizeFilterWindow() {
$('#leftFilterBox').css('height', '65%');
$('#leftFilterBox').css('top', '30%');
}
Here is my jsFiddle link: Fiddle
Currently, my code is just collapsing the filterWindow by setting specific some css such as height and top. I wonder is it possible to use some jquery animation like slideUp() or slideDown() for enhcnacement because I tried it, but it does not work.
Thanks in advance.
Hmm, I couldn't get your code to work, but I organized it and added some click events to call your functions. I also added a background color to show the maximize effect is happening as it wasn't as obvious.
Updated fiddle demo
$('#minimize').click(function(){
minimizeFilterWindow();
});
$('#maximize').click(function(){
maximizeFilterWindow();
});
function minimizeFilterWindow() {
$('#leftFilterBox').css('height', '25px');
$('#leftFilterBox').css('top', '90%');
}
function maximizeFilterWindow() {
$('#leftFilterBox').css('height', '65%');
$('#leftFilterBox').css('top', '30%');
$('#leftFilterBox').css('background-color', '#000');
}
And, the updated HTML
<div id='leftFilterBox'>
<div style='background: linear-gradient(#848484, #2E2E2E);color: white;line-height:2.2em;padding-left:5%;width:auto;font-weight:bold;'>Traffic Conditions
<div id='filterWindowNav'>
<img id='minimize' src='img/minimizeFilterWindow.png' />
<img id='maximize' src='img/maximizeFilterWindow.png' />
<img id='close' alt='close' src='img/closeFilterWindow.png' />
</div>
</div>
<br/>
<div id='filterContent'><span class='getLiveTrafficTitle'><center>Select date</center></span>
<hr width='85%' />
</div>
</div>

How to change the CSS on the last clicked div

I am creating a messaging inbox and would like to have the selected message (div) change colour when selected. I have done this but I am not sure how to set the div back to the original colour once another message (div) is selected. This is what I have so far but each message will get the selected class.
<script>
function getmessage(str) {
$('#mb'+str).removeClass('Message-Background');
$('#mb'+str).addClass('Message-Background-Selected');
// alert('#mb'+str);
// var lastmb = $('#mb'+str);
$('#mt'+str).removeClass('Message-Title');
$('#mt'+str).addClass('Message-Title-Selected');
//var lastmr = $('#mt'+str);
$('#mprev'+str).removeClass('Message-Text');
$('#mprev'+str).addClass('Message-Text-Selected');
}
</script>
<div id="mb1" class="Message-Background" style="border-left:#000 solid 4px;">
<div id="mt1" class="Message-Title" onclick="getmessage(this.id)" style="float:left;">
Title 1
</div>
<div id="mprev1" class="Message-Text" style="float:left;">
Message 1
</div>
</div>
<div id="mb2" class="Message-Background" style="border-left:#000 solid 4px;">
<div id="mt2" class="Message-Title" onclick="getmessage(this.id)" style="float:left;">
Title 2
</div>
<div id="mprev2" class="Message-Text" style="float:left;">
Message 2
</div>
</div>
<div id="mb3" class="Message-Background" style="border-left:#000 solid 4px;">
<div id="mt3" class="Message-Title" onclick="getmessage(this.id)" style="float:left;">
Title 3
</div>
<div id="mprev3" class="Message-Text" style="float:left;">
Message 3
</div>
</div>
Just make a function:
$("div").click(function() {
$("div").removeClass('Message-Text-Selected');
$(this).addClass('Message-Text-Selected');
});
You can also use toggleClass
http://api.jquery.com/toggleClass/
JSFiddle:
http://jsfiddle.net/hwgTr/
Since you want to change multiple elements I would set the click on the ".message-background" and toggle a class there that effects all of the css within it.
Javascript:
$(".message-background").click(function() {
$(".message-background").removeClass('Message-Background-Selected');
$(this).addClass('Message-Background-Selected');
});
Now the elements within the message-background can just inherit the selected state from it.
CSS:
.Message-Background-Selected {
border:1px solid red;
}
.Message-Background-Selected .Message-Title {
color:red;
}
.Message-Background-Selected .Message-Text {
color:red;
}
Could be done like this too:
$("div").click(function() {
$(this).addClass('message-selected').siblings().removeClass('message-selected');
});

Hide Content Loading Gif

I have two large image files in a div on a page that take several seconds to load. How can I hide the loading content while a "loading gif" appears and then have the content appear once it has fully loaded?
I don't really know anything about javascript but I tried using this code. It did half of what I wanted it to do. The "loading gif" worked but the problem was that the content was visible as it was loading.
http://aaron-graham.com/test2.html
<div id="loading" style="position:absolute; width:95%; text-align:center; top:300px;">
<img src="img/parallax/ajax-loader.gif" border=0>
</div>
<script>
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>
Any help would be greatly appreciated!
Use jquery, with code like:
$(document).ready(function(){
$('#pic1').attr('src','http://nyquil.org/uploads/IndianHeadTestPattern16x9.png');
});
With the html like:
<img id="pic1" />
It works by running when document's ready function is called (which is called after the DOM and other resources have been constructed), then it will assign the img's src attribute with the image's url you want.
Change the nyquil.org url to the image you want, and add as many as needed (just don't go overboard ;). Tested Firefox 3/chrome 10.
Here is the demo: http://jsfiddle.net/mazzzzz/Rs8Y9/1/
Working off your HTML structure I added a notifyLoaded class for the two images so you can watch for when both have loaded via an onload event. Since css background images don't get that event I've created a hidden img using the background's path so we can test when that image is loaded
HTML:
<div id="loading">
<img src="http://aaron-graham.com/img/parallax/ajax-loader.gif" border="0" />
</div>
<div id="vertical">
<div>
<div class="panel">
<img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/tile3.png" />
</div>
</div>
</div>
<div id="imgLoader">
<img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/deepspace3.jpg" alt="" />
</div>
You have reference to jQuery in your page already so I've replaced your script to the following.
jQuery:
$(document).ready(function() {
var $vertical = $('#vertical');
var $imgs = $('.notifyLoaded');
var imgCount = $imgs.length;
var imgLoadedCount = 0;
$vertical.backgroundparallax(); // Activate BG Parallax plugin
$imgs.load(function() {
console.log(this);
imgLoadedCount++;
if (imgCount == imgLoadedCount) {
// images are loaded and ready to display
$vertical.show();
// hide loading animation
$('#loading').hide();
}
});
});
I've also set #Vertical to a default display:none; which gets changed when images have loaded
CSS:
body {background-color:black;}
#loading {position:absolute;width:95%;text-align:center;top:300px;}
#vertical {display:none;background-image: url('http://aaron-graham.com/img/parallax/deepspace3.jpg');background-position: 0 0;height: 650px;width: 900px;overflow: auto;margin:35px auto auto auto;}
#vertical > div {margin: 0;color: White;}
#vertical .panel {padding: 100px 5%;margin-left:40px;height: 3363px;}
#imgLoader {display:none;}

Categories