I'm trying to hide or show a div when clicking on a link.
This is the HTML part that I want to show or hide:
<div id="product">
<div ng-repeat="producto in productos" >
<figure class="floating">
<img ng-src="{{ producto.image }}" alt="image" class="rcorners3" style='width:100%;' border="0" alt="Null">
<figcaption> {{ producto.name }}</figcaption>
</figure>
</div>
</div>
When clicking this:
<li onclick="isitvisible()" class="guides">
And this is the script I run when clicking:
<script type="text/javascript">
function isitvisible() {
var vale = document.getElementById('product').offsetLeft;
if (vale <= 0) {
document.getElementById('product').style.visibility='hidden';
} else {
document.getElementById('product').style.visibility='visible';
}
}
</script>
The div would hide but not show at all after clicking. I think I'm failing with the offsetLeft but not sure.
offsetLeft doesn't change when you toggle a element's visibility.
Try this isitvisible function instead:
function isitvisible() {
// Get a reference to the element's style.
var style = document.getElementById('product').style;
if (style.visibility === 'hidden') {
style.visibility = 'visible';
} else {
style.visibility = 'hidden';
}
}
Or a little shorter:
function isitvisible() {
var style = document.getElementById('product').style;
style.visibility = (style.visibility === 'hidden') ? 'visible' : 'hidden';
}
Change it to this:
<script type="text/javascript">
var style = document.getElementById('product').style;
function isitvisible() {
if (style.display=='none') {
style.display='block';
} else {
style.display='none';
}
}
</script>
Related
I can't for the life of me figure out how to add an exit feature to my code. I want it so the user can click anywhere on the screen to make the image go away. Can someone help please?
HTML
<body>
<div align="center">
<img id="image" src="image1.png" height="200" width="200">
JS
var hidden = false;
setInterval(function(){
document.getElementById("image").style.visibility= hidden ? "visible" : "";
hidden = !hidden;
},2000);
The default is visible. You need to set to hidden when you want to hide it.
And you need to bind your code on the click event.
var hidden = false;
window.document.addEventListener('click', function() {
document.getElementById("image").style.visibility = hidden ? "" : "hidden";
hidden = !hidden; // comment out this line if you do not want to show again on click
}, false);
<img id="image" src="https://dummyimage.com/200x200" height="200" width="200">
Update 2, if you want the timeout code to show the image after 2 seconds (as mentioned in comments) and then when you click anywhere to hide it for ever use
var image = document.getElementById("image");
setTimeout(function() {
image.style.visibility = 'visible';
window.document.addEventListener('click', function() {
image.style.visibility = 'hidden';
}, false);
}, 2000);
#image {
visibility: hidden;
}
<img id="image" src="https://dummyimage.com/200x200" height="200" width="200">
<div align="center">
<img id="image" src="image1.png" height="200" width="200">
</div>
<script>
var hidden = false;
setInterval(function(){
document.getElementById("image").style.visibility = "visible" ? "hidden" : "visible";
},2000);
</script>
Use jQuery to make it simple..
Codepen
$(document).ready(function(){
$('body').click(function(){
$('#image').hide();
})
})
you could use this.
$(window).click(function() {
//Hide the menus if visible
document.getElementById("image").hide();
});
var hidden = false;
setInterval(function(){
document.getElementById("image").style.visibility= hidden ? "visible" : "";
hidden = !hidden;
},2000);
function myremove(){
document.getElementById("image").style.display = "none";
}
<body onclick="myremove()">
<div align="center">
<img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded&a" height="200" width="200" style="display:block;">
</div>
</body>
Below are my requirements.. i tried in below way. it doesnt work for me. Please let me know what is missed out. Thanks
if data-block = 1, add data-rewardpoints = 300
if data-block = 2, add data-rewardpoints = 400
if data-block = 3, add data-rewardpoints = 500
HTML:
<div class="ir_image_holder">
<img class="ir_img_src" src="1.jpg" data-block="1" data-rewardpoints="" />
</div>
<div class="ir_image_holder">
<img class="ir_img_src" src="2.jpg" data-block="2" data-rewardpoints="" />
</div>
<div class="ir_image_holder">
<img class="ir_img_src" src="3.jpg" data-block="3" data-rewardpoints="" />
</div>
JS:
if ($('.ir_image_holder .ir_img_src').data('block')===1) {
$('.ir_image_holder .ir_img_src').attr('data-rewardpoints', '300');
} else if ($('.ir_image_holder .ir_img_src').data('block')===2) {
$('.ir_image_holder .ir_img_src').attr('data-rewardpoints', '400');
} else if ($('.ir_image_holder .ir_img_src').data('block')===3) {
$('.ir_image_holder .ir_img_src').attr('data-rewardpoints', '500');
}
To achieve this you need to loop over all the .ir_img_src elements individually. Right now your code is setting all the elements data() attributes based on the first element of the set.
You can also tidy the logic by holding all the values to set in an object keyed by the block. Try this:
var data = { 1: 300, 2: 400, 3: 500 }
$('.ir_img_src').each(function() {
$(this).attr('data-rewardpoints', data[$(this).data('block')]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ir_image_holder">
<img class="ir_img_src" src="1.jpg" data-block="1" data-rewardpoints="" />
</div>
<div class="ir_image_holder">
<img class="ir_img_src" src="2.jpg" data-block="2" data-rewardpoints="" />
</div>
<div class="ir_image_holder">
<img class="ir_img_src" src="3.jpg" data-block="3" data-rewardpoints="" />
</div>
Note that it's considered better practice to use the setter of data() instead of attr(), where possible. I've left your code as-is here, as there are certain cases where you have to use attr() to set the data attribute.
Do some thing like this
// Get all matched element
var elem = $('.ir_image_holder .ir_img_src');
// loop through each o fthem to get the data-block value
$(elem).each(function(e,v){
if($(this).data('block')===1){
// assign the data-reward point here
$(this).attr('data-rewardpoints',300);
}
// rest of code
})
try iterating over all elements
$('.ir_image_holder .ir_img_src').each(function() {
if($( this ).data('block') == "1") {
$( this ).attr('data-rewardpoints', '300');
}
else if($( this ).data('block') == "2") {
$( this ).attr('data-rewardpoints', '400');
}
else if($( this ).data('block') == "3") {
$( this ).attr('data-rewardpoints', '500');
}
});
Your selector selects all elements that match it and not a single one, which is the expectation of the JS snippet you've provided.
I assume you want the image to be clicked and then to perform the operation in your JS snippet. Here's how you can do it:
$('.ir_image_holder .ir_img_src').on('click', function () {
var $el = $(this);
if ($el.data('block')===1) {
$el.attr('data-rewardpoints', '300');
} else if ($el.data('block')===2) {
$el.attr('data-rewardpoints', '400');
} else if ($el.data('block')===3) {
$el.attr('data-rewardpoints', '500');
}
});
If you're just trying to initialize them then iterate over all selected elements.
$('.ir_image_holder .ir_img_src').each(function () {
var $el = $(this);
if ($el.data('block')===1) {
$el.attr('data-rewardpoints', '300');
} else if ($el.data('block')===2) {
$el.attr('data-rewardpoints', '400');
} else if ($el.data('block')===3) {
$el.attr('data-rewardpoints', '500');
}
});
When you just want to compare similar values, why not use switch instead of if
$('.ir_img_src').each(function(e,v){
var me = $(this);
var db = parseInt($(this).attr('data-block'));
switch(db)
{
case 1 : me.attr('data-rewardpoints', '300');
break;
case 2 : me.attr('data-rewardpoints', '400');
break;
case 3 : me.attr('data-rewardpoints', '500');
break;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="ir_image_holder">
<img class="ir_img_src" src="1.jpg" data-block="1" data-rewardpoints="" />
</div>
<div class="ir_image_holder">
<img class="ir_img_src" src="2.jpg" data-block="2" data-rewardpoints="" />
</div>
<div class="ir_image_holder">
<img class="ir_img_src" src="3.jpg" data-block="3" data-rewardpoints="" />
</div>
I have a div and a button which i would like to show/hide the div when its clicked:
<input type="button" name="info" value="Contact Information" onclick="showDiv()">
<div align="center" id="element" style="display: none;">bla</div>
And this piece of script:
function showDiv() {
document.getElementById('element').style.display = "block";
if( ... )
document.getElementById('element').style.display = "none";
}
The display style of the div is none,so its hidden.The first line of the js script changes that value into block,so the div its displayed now. Now i need something to reverse the first line,in case the button its triggered again.So i thought a conditional statement will do it,but i have no idea how to build it. Something line : "if the display style its block,execute the code between {}"
Any idea?
Edit
function toggleDiv(elementId, button, textOn, textOff) {
var style = document.getElementById(elementId).style;
if( style.display == "none" ) {
style.display = "block";
button.innerHTML = textOn;
} else {
style.display = "none";
button.innerHTML = textOff;
}
}
<button name="info" onclick="toggleDiv('element', this, 'Hide Contact Information', 'Show Contact Information')">Show Contact Information</button>
<div align="center" id="element" style="display: none;">bla</div>
Original Answer
function toggleDiv() {
if( document.getElementById('element').style.display == "none" ) {
document.getElementById('element').style.display = "block";
} else {
document.getElementById('element').style.display = "none";
}
}
Using the browser DOM directly is very annoying and your solution may not work in all browsers. You should use some javascript framework like jQuery, prototype or mootools. In jQuery what you want to do is as simple as this:
$("#element").toggle()
If you insist on using raw javascript you can try this:
function showDiv() {
if( document.getElementById('element').style.display == 'block' )
document.getElementById('element').style.display = "none";
else
document.getElementById('element').style.display = "block";
}
<input type="button" name="info" value="Contact Information" onclick="showDiv()">
<div align="center" id="element" style="display: none;">bla</div>
<script>
function showDiv() {
var div = document.getElementById('element').style.display;
if( div == 'block' )
document.getElementById('element').style.display = "none";
else
document.getElementById('element').style.display = "block";
}
</script>
I have three images and depending on which image is clicked I want to change the css of a specific div. I just don't understand how to connect the click of an image to the div.
Below is a (bad) example of how I think it should work. I don't understand how this is accomplished without creating a function for each image/click.
$('.circle_hiw_cont img').click(
function() {
if(this == content_img_1.jpg) {
$("#content_1").css("display", "block");
$("#content_2").css("display", "none");
$("#content_3").css("display", "none");
} else {
}
}
);
HTML:
<img id="content_img_1" src="images/conent_img1.jpg"/>
<img id="content_img_2" src="images/conent_img2.jpg"/>
<img id="content_img_3" src="images/conent_img3.jpg"/>
<div id="content_1">This is div 1</div>
<div id="content_2">This is div 2</div>
<div id="content_3">This is div 3</div>
CSS:
#content_1{display:block;}
#content_2{display:none;}
#content_3{display:none;}
You can add classes to the elements and use the index and eq methods:
var $img = $('.img').on('click', function() {
$('.div').hide().eq( $img.index(this) ).show();
});
Note that as this solution is index-based, the order of elements matters.
You can also try
var $contents = $('.content');
var $imgs = $('.circle_hiw_cont img').click(function() {
var $target = $('#content_' + this.id.replace('content_img_', '')).show();
$contents.not($target).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="circle_hiw_cont">
<img id="content_img_1" src="//placehold.it/64/ff0000" />
<img id="content_img_2" src="//placehold.it/64/00ff00" />
<img id="content_img_3" src="//placehold.it/64/0000ff" />
<div id="content_1" class="content">This is div 1</div>
<div id="content_2" class="content">This is div 2</div>
<div id="content_3" class="content">This is div 3</div>
</div>
if which div is shown is predefined, that should work:
$('.circle_hiw_cont img').click(
function() {
if( $(this).attr('src') === "content_img_1.jpg") {
$("#content_1, #content_2, #content_3").toggle();
} else {
}
}
);
You actually weren't too far off, this is going to refer to the current DOM node though, not the src of the image as your code assumes:
$('.circle_hiw_cont img').click(
function() {
if(this.src == "content_img_1.jpg") {
$("#content_1").css("display", "block");
$("#content_2").css("display", "none");
$("#content_3").css("display", "none");
} else {
}
}
);
The context this in the function call refers to the DOM element that was clicked. You will need to compare the appropriate attribute, instead.
$('.circle_hiw_cont img').click(
function() {
var $this = $(this);
if($this.attr('href') == 'content_img_1.jpg') {
...
} else {
}
}
);
Provide some class name to all the images say "imgClass" and
$('.imgClass').click(
function() {
$("#content_1").css("display", "block");
$("#content_2").css("display", "none");
$("#content_3").css("display", "none");
}
);
I have the following HTML and JavaScript. There are three pictures and three links. Clicking on one link shows one picture and hides the other two.
This works. However, I'd like it so that when a picture is shown, it is shown as if the other two pictures don't exist, instead of being pushed somewhere down the page. Is that possible?
HTML
<div id="content">
<div id="left">
show image1
show image2
show image3
</div>
<div id="right">
<img id="img1" src="berlin.jpg" height="200px"/>
<img id="img2" src="london.jpg" height="200px"/>
<img id="img3" src="madrid.jpg" height="200px"/>
</div>
</div>
JavaScript
function showImage(id) {
var images_id = new Array("img1", "img2", "img3");
for (var i = 0; i < images_id.length; i++) {
setImageVisible(images_id[i], false);
}
setImageVisible(id, true);
}
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.visibility = (visible ? 'visible' : 'hidden');
}
Instead of this:
img.style.visibility = (visible ? 'visible' : 'hidden');
Use this:
img.style.display = (visible ? '' : 'none');