I have a website with two options represented by <a> tags, chairs and tables. This is the HTML that displays the div whenever a <a> tag is clicked on.
<div id="workbench_menu">
<p><strong>Living Room</strong></p>
<a onclick="chairs()" href="#"><p>chairs</p></a>
<a onclick="tables()" href="#"><p>tables</p></a>
</div>
<div id="workbench_objects">
<div id="tables" class="refresh" style="display:none;">
<div class="workbench_object_info">
<img src="images/house/objects/table_4.png">
<p>20 oak logs</p>
</div>
</div>
<div id="chairs" class="refresh" style="display:none;">
<div class="workbench_object_info">
<img src="images/house/objects/stonechair_1.png">
<p>20 oak logs</p>
</div>
</div>
</div>
The javascript which handles that function is here:
<script>
function tables() {
document.getElementsByClassName('refresh').style.display='none';
document.getElementById('tables').style.display='inline';
}
function chairs() {
document.getElementsByClassName('refresh').style.display='none';
document.getElementById('chairs').style.display='inline';
}
</script>
So what I am trying to do, is that when one of the options are pressed, everything else is hidden and only the div that is assigned that specific <a> tag will be displayed. When a new <a> tag is clicked, the old one will be hidden and the new on will be displayed.
I have tried adding a document.getElementsByClassName('refresh').style.display='none'; in hope that every class with "refresh" attached to it, will be put on display:none but this does not work somehow. The outcome is that after a link is clicked, the div is shown. After a new link is clicked, that div is shown too without hiding the old div. Hope you have some suggetions, thanks in advance.
UPDATE:
var length = document.getElementsByClassName('refresh').length;
for(var i=0; i<length;i++){
document.getElementsByClassName('refresh')[i].style.display='none';
}
function tables() {
document.getElementById('tables').style.display='inline';
}
function chairs() {
document.getElementById('chairs').style.display='inline';
}
document.getElementsByClassName('refresh') will return you the array of elements.
function tables() {
hideElements();
document.getElementById('tables').style.display='inline';
}
function chairs() {
hideElements();
document.getElementById('chairs').style.display='inline';
}
function hideElements(){
var length = document.getElementsByClassName('refresh').length;
for(var i=0; i<length;i++){
document.getElementsByClassName('refresh')[i].style.display='none';
}
}
Related
I have made a simple system which detects double taps. I want to show a heart icon when someone double taps on an image, just like on Instagram.
This is what my code looks right now:
var elements = document.getElementsByClassName('snap_img');
[].slice.call(elements).forEach(function(element) {
var hammertime = new Hammer(element),
img_src = element.getAttribute('src');
hammertime.on('doubletap', function(event) {
alert(img_src); // this is to test if doubletap works
// Some javascript to show the heart icon
});
});
This is what the HTML looks like:
<div class="snap_item">
<div class="snap_item_following_info">
<img class="snap_item_following_img" src="res/stat/img/user/profile/small/1.fw.png" alt="#JohnDoe" />
<a class="snap_item_following_name" href="#">#JohnDoe</a>
<div class="snap_too">
</div>
</div>
<img class="snap_img" src="res/stat/img/user/snap/43/2.fw.png" alt="#ErolSimsir" />
<div class="like_heart"></div>
<div class="snap_info">
<div class="snap_text">
LA is the shit...
<a class="snap_text_hashtah" href="#">#LA_city_trip</a>
</div>
<div class="snap_sub_info">
<span class="snap_time">56 minutes ago</span>
<div class="like inactive_like">
<div class="like_icon"></div>
<div class="like_no_active">5477</div>
</div>
</div>
</div>
</div>
So when the element 'snap_img' is double tapped, I need to get the element 'like_heart' which is one line below the snap_img element. How do I get that sibling element and fade it in with JQuery?
Like this
[].slice.call(elements).forEach(function(element) {
var hammertime = new Hammer(element),
img_src = element.getAttribute('src');
hammertime.on('doubletap', function(event) {
alert(img_src); // this is to test if doubletap works
$(element).next().text('♥').hide().fadeIn();
});
});
P.S. I've added that heart text, since the sibling was empty.
On the event handler, i would do $(element).parent().find('.like_heart').fadeIn(); So the code is not dependant on the element ordering.
(To clarify to selector: take the parent element which is the div.snap_item and find an element with class like-heart inside it)
I have a hidden div with the details of a thumbnail that is visible on the page. When you click on the thumbnail, it should fadein or slideup the div with details.
I have set with jquery incremented ID's to each ".portfolio-item-details" to identify each one and then have set with jquery the same ID's to the href of the thumbnail.
<section id="portfolio1" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio1" title="">
<img src="thumbnail.jpg">
</a>
<section id="portfolio2" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio2" title="">
<img src="thumbnail.jpg">
</a>
Since this is done dynamically, how can I with jquery fadeIn or slideUp the ".portfolio-item-details" if the href is equal to the ID. Basically thumbnail with "#portfolio1" should slide up the div with "#portfolio1" on click.
This is my jquery code which to add the IDs and HREF is working perfectly but not working to slideUp or fadeIn the div with the same ID.
$(document).ready(function () {
var i=0;
$(".portfolio-item-details").each(function(){
i++;
var newID="portfolio"+i;
$(this).attr("id",newID);
$(this).val(i);
});
var i=0;
$(".open-portfolio-item-details").each(function(){
i++;
var newReadMoreHREF="#portfolio"+i;
$(this).attr("href",newReadMoreHREF);
$(this).val(i);
if ($(".portfolio-item-details").attr("id") == "newReadMoreHREF") {
$(this).fadeIn();
}
});
});
SOLUTION
Thanks to Austin's code, I was able to modify it to work with mine.
Check here: http://jsfiddle.net/jdoimeadios23/xpsrLyLz/
You want something like this?
HTML
<div class="image" value="1">
<img src="thumbnail.jpg" />
</div>
<div id="portfolio1" class="details">details</div>
<div class="image" value="2">
<img src="thumbnail.jpg" />
</div>
<div id="portfolio2" class="details">more details</div>
JS
$(document).ready(function () {
$('.details').fadeOut(1);
$(".image").click(function () {
var num = $(this).attr("value");
$("#portfolio"+num).fadeIn(1000);
});
});
JSFiddle Demo
You don't even need to bother with ID's so long as the next div below each image is it's details.
The problem is in this block
if ($(".portfolio-item-details").attr("id") == "newReadMoreHREF") {
$(this).fadeIn();
}
Because you're having two errors, the first one is that newReadMoreHREF is a variable, not a string in your HTML or a value to any variable and so on.
Second thing is, that in the variable declaration you're using "#portfolio"+i;, which would be good if you were about to select an element. But using it in the jQuery iif statement with .attr('id') will again cause a havoc.
The thing that you need is something like this
$(".open-portfolio-item-details").each(function(){
i++;
var newReadMoreHREF="portfolio"+i; // removed #
$(this).attr("href",newReadMoreHREF);
$(this).val(i);
if ($(".portfolio-item-details a").attr("id") == newReadMoreHREF) {
// you need to access the hyperlink in the element, not
// the element itself. this portfolio1 ID is of a hyperlink
// again here, this is referencing the main iterator.
$(this).fadeIn();
// are you sure you want to fade the .open-portfolio-item-details?
}
});
Removed the hash sign and then called the variable value to check against. It would execute to be true if the condition is true.
Try this:
HTML:
content
<section id="portfolio2" class="portfolio-item-details hidden">content</section>
<a class="open-portfolio-item-details" href="#portfolio2" title="">
<img src="thumbnail.jpg">
</a>
<div id="portfolio1" class="portfolio" hidden>Portfolio 1</div>
<div id="portfolio2" class="portfolio" hidden>Portfolio 2</div>
Jquery:
$('a.open-portfolio-item-details').on('click', function (e) {
e.preventDefault();
var id = $(this).attr('href');
$('.portfolio').hide();
$('.portfolio' + id).fadeIn();
});
Couldn't get the fiddle link for some reason.
Edit:
I don't know the name of the class that shows the content you want displayed, so as an example I'm using portfolio. Try putting this code into a fiddle
I have a overlay page where I have one parent div and children div like this
<div id="completeBlock" style="display:block">
<div id="id1" style="display:block">
This is div one
</div>
<div id="id2" style="display:none">
This is div two
</div>
<div id="id3" style="display:none">
This is div three
</div>
</div>
and separate links to show the divs
<a onclick=doChangeDiv(id1)>link one</a>
<a onclick=doChangeDiv(id2)>link two</a>
<a onclick=doChangeDiv(id3)>link three</a>
My aim is to show one div at a time and make others none.It works fine in all browsers but in firefox
it works for the very first time I open the page.If I close the page and open it again,
the hidden divs cannot be made visible and I got an error "TypeError: can't access dead object"
My jquery script is
function doChangeDiv(fromId){
$('#completeBlock').children().each(function() {
if($(this).css('display') != 'none')
{
var hideId = '#'+$(this).attr('id');
$(hideId).hide();
}
});
$(fromId).attr('display','block');
$(fromId).show();
}
Please help me to sort out this problem.
See this : http://jsfiddle.net/uD9mU/1/
$(document).ready(function () {
$('a').click(function (e) {
e.preventDefault();
var fromId = $(this).attr("data");
//alert(fromId);
$('#completeBlock').children().hide().filter('#'+fromId).fadeIn('slow');
});
});
I have a li,some other elements like divs, inputs inside this li,and everything inside the gridview.
I have a onmouseover="calcRoute();" on li.
PROBLEM : I have noticed that on hovering on inside element divs and coming out of element divs to the parent div causes the calcRoute(); to execute again ,ie bind google maps again, which causes a flickering due to map rebind.
TRIED : onmouseenter and onmouseleave,but it wont support in all browsers
<li onmouseover="calcRoute(8.4572136,76.94017529999996);return false; ">
<div class="li-inner">
<input type="image" name="ctl00$ContentPlaceHolder1$FESearchListingControl1$dlPhotoView$ctl01$imgPhotoView" id="ctl00_ContentPlaceHolder1_FESearchListingControl1_dlPhotoView_ctl01_imgPhotoView" src="../UploadedImages/House2469-22-8-2012.jpg" style="height:142px;width:219px;border-width:0px;">
<div class="title">
<a id="ctl00_ContentPlaceHolder1_FESearchListingControl1_dlPhotoView_ctl01_lblPropName" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$FESearchListingControl1$dlPhotoView$ctl01$lblPropName','')">Halloween</a>
<div class="star"></div>
</div>
<div class="address">
<div class="left-location">
<span id="ctl00_ContentPlaceHolder1_FESearchListingControl1_dlPhotoView_ctl01_lblDistrict">Trivandrum</span>
</div>
<div class="right-price"><span class="WebRupee">Rs</span>
<span id="ctl00_ContentPlaceHolder1_FESearchListingControl1_dlPhotoView_ctl01_lblPrice">500.00</span>
</div>
</div>
</div>
</li>
You can attach an id to the li elements and pass this id to the calcRoute function.
onmouseover="calcRoute(8.4572136,76.94017529999996, this.id);
Then, in this function you can set a flag for this li element that it's been hovered before.
var hoveredItems = {}; // this is a global object
function calcRoute(x,y,id) {
// put this control on top so that recurring operations will be prevented from being run.
if(hoveredItems[id]) return;
else hoveredItems[id] = true;
..
}
Maybe this helps...
If I mouseover on a link it has to show div.
My problem is that I have to show divs in all of the links inside a page. For each link I have to show a different div.
How to do this using javascript?
Since, your question does not specify anything. I will give a simplest solution I can. That is, with plain CSS, no JS needed.
Here is a demo
Markup
<a href="#">
Some
<div class="toshow">
Hello
</div>
</a>
<a href="#">
None
<div class="toshow">
Hi
</div>
</a>
CSS
.toshow {
display:none;
position: absolute;
background: #f00;
width: 200px;
}
a:hover div.toshow {
display:block;
}
You should not try to rely on script as much as possible. This is a very simple example, with displays the use of :hover event of the link.
Steps can be:
Make multiple divs all with different id.
Give style="display:none;" to all div.
Make links to show respective div.
In onMouseOver of link call js function which changes display property to block of proper div. Ex.:- document.getElementById("divId").style.display = "block"; And for all other div set display:none; in that js function.
Sample code:-
Your links:
Div 1
Div 1
Your divs:
<div id="myDiv1">Div 1</div>
<div id="myDiv2">Div 2</div>
JS function:
function Changing(i) {
if(i==1){
document.getElementById("myDiv1").style.display = "block";
document.getElementById("myDiv2").style.display = "none";
} else {
document.getElementById("myDiv1").style.display = "none";
document.getElementById("myDiv2").style.display = "block";
}
}
If you have more divs then you can use for loop in js function instead of if...else.
look at jquery each
<div id=div-0" class="sidediv" style="display:none" > Div for first link </div>
<div id=div-1" class="sidediv" style="display:none"> Div for second link </div>
<div id=div-2" class="sidediv" style="display:none"> Div for third link </div>
<a class="linkclass" href=""> Link </a>
<a class="linkclass" href=""> Link </a>
<a class="linkclass" href=""> Link </a>
and essentially do something like this
$('.linkclass').each(function(i,u) {
$(this).hover(function()
{
$('#div-'+i).show();
}, function() {
$('#div-'+i).hide(); //on mouseout;
})
});
Edit: oops ...this will need jquery. dont know why I assumed jquery here.
You can give ids to all the links such as
<a id="link-1"></a>
<a id="link-2"></a>
<a id="link-3"></a>
and so on ..
and similarly to div elements
<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
and so on ..
then
$("a").hover(function () { //callback function to show on mouseover
var id = $(this).attr('id').replace("link-", "");
$("#div-"+id).show();
},
function () { //if you want to hide on mouse out
var id = $(this).attr('id').replace("link-", "");
$("#div-"+id).hide();
}
);