I am attempting to toggle the height of all elements with class name on button click.
Here is what I am currently using. Right now it will work onClick the first time, but wont change back on second click. When I change if statement to something NOT true, the function still fires.
<head>
<script type="text/javascript">
function changeHeight() {
var elems = document.getElementsByClassName('div1');
for(var i = 0; i < elems.length; i++)
{
if (elems[i].style.height = '25px'){
elems[i].style.height = '110px';
}
else {
elems[i].style.height = '25px';
document.getElementById("expand").innerHTML="[+]";
}
</script>
<style type="text/css">
.div1 {
overflow:hidden;
height:25px;
}
</script>
</head>
<body>
<button type="button" id="expand" onClick="changeHeight();">[+]</button>
<div class="div1">
content
</div>
<div class="div1">
content
</div>
</body>
I believe the issue is I can not get my 'else' to fire because my if is not firing properly.
Any ideas?
Thanks
-Trevor
your if condition check is wrong, you need to use equality operator (==) and not assignment operator ( = ) in condition check, so change:
if (elems[i].style.height = '25px'){
..
to
if (elems[i].style.height == '25px'){ //use == not =
..
and yes the closing tag } of for loop is also missing, do:
for(var i = 0; i < elems.length; i++) {
if (elems[i].style.height == '25px'){
elems[i].style.height = '110px';
}
else {
elems[i].style.height = '25px';
document.getElementById("expand").innerHTML="[+]";
}
}
Use descendant selector for this kind of task. It's much easier.
http://jsfiddle.net/h7vGj/2/
<head>
<style type="text/css">
.div1 {
overflow:hidden;
height:25px;
}
.on .div1 {
height: 110px;
}
</style>
<script>
function foo(ele) {
if ( !ele.state ) {
document.body.className = "on";
ele.state = true;
}
else {
document.body.className = "";
ele.state = false;
}
};
</script>
</head>
<body>
<button type="button" id="expand" onclick="foo(this);">[+]</button>
<div class="div1">
content
</div>
<div class="div1">
content
</div>
</body>
PS. Your style tag is closed by script tag.
Related
here i want to apply some css to those divs are not visible because if its height. So i want to apply some css dynamically which are not showing here(sanjana, giri, santhosh divs)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div style="height:100px;overflow:hidden;background:red;border:2px dashed #000;">
<div>Ganesh</div>
<div>Om shankar</div>
<div>Sai</div>
<div>venkat</div>
<div>Sireesha</div>
<div>Sanjana</div>
<div>Giri</div>
<div>Santhosh</div>
</div>
</body>
</html>
If it's inline defined, you can use this:
[style*="overflow:hidden;"],[style*="overflow: hidden;"]
What it does is looking for ANY type of tag,
that has a style attribute set
and that style attribute contains: overflow:hidden; or overflow: hidden;
then applies relevant styles.
var value = 'initial';
var old = 'hidden';
function toggle() {
$('div[style]').css({'overflow':value});
var tmp = value;
value = old;
old = tmp;
}
[style*="overflow:hidden;"],[style*="overflow: hidden;"] {
color:white;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="button" onclick="toggle()" value="toggle values">
<div style="height:100px;overflow:hidden;background:red;border:2px dashed #000;">
<div>Ganesh</div>
<div>Om shankar</div>
<div>Sai</div>
<div>venkat</div>
<div>Sireesha</div>
<div>Sanjana</div>
<div>Giri</div>
<div>Santhosh</div>
</div>
</body>
</html>
Now if you only wish to do something to the NOT visible divs, you need to use javascript, and you can use Bounding boxes to test if something is visible:
Also see How to check if an element is overlapping other elements?
$('[style*="overflow:hidden"],[style*="overflow: hidden;"]').children().each(function(index, element) {
var $el = $(element);
var $parent = $el.parent();
// get the bounding boxes.
var rect1 = $parent.get(0).getBoundingClientRect();
var rect2 = element.getBoundingClientRect();
// check for overlap(if it's visible)
if(!(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom)) {
$el.removeClass('hidden');
}
else {
// it's hidden!
console.log('found hidden div '+$el.text());
$el.addClass("hidden");
}
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div style="height:100px;overflow:hidden;background:red;border:2px dashed #000;">
<div>Ganesh</div>
<div>Om shankar</div>
<div>Sai</div>
<div>venkat</div>
<div>Sireesha</div>
<div>Sanjana</div>
<div>Giri</div>
<div>Santhosh</div>
</div>
</body>
</html>
You can check the height from the wrapper via javascript and then add a class to all the elements which are not fully visible inside the wrapper. Added a class wrap to the wrapper to make it more obvious.
var wrap = document.querySelector('.wrap');
var wrapHeight = wrap.offsetHeight; // just in case it's not known and set by CSS
wrap.querySelectorAll('div').forEach(function(element){
var elementBottomPosition = element.offsetTop + element.offsetHeight;
if(elementBottomPosition >= wrapHeight) {
element.classList.add('some-class');
}
});
.wrap {
height:100px;
overflow:hidden;
background:red;
border:2px dashed #000;
}
.some-class {
color: lime;
}
<div class="wrap">
<div>Ganesh</div>
<div>Om shankar</div>
<div>Sai</div>
<div>venkat</div>
<div>Sireesha</div>
<div>Sanjana</div>
<div>Giri</div>
<div>Santhosh</div>
</div>
so, ive got 2 divs, one which is visible from start, and the other is hidden. Im trying to work out the action so that when i click a single link, the first div disappears and the second appears, and to reverse on second click. I have some knowledge of javascript, but zero knowledge of Jquery and those were the only questions i could find on here.
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleContent");
var text = document.getElementById("displayContent");
if(ele.style.display == "block") {
ele.style.display = "none;
text.innerHTML = "blog posts";
}
else {
ele.style.display = "block";
text.innerHTML = "hide posts";
}
}
</script>
this is what i have so far, which works for one div, but i dont know how to change this to work for 2 divs through the same link
You are missing a quote, add a second quote like below:
ele.style.display = "none";
Use a class rather than an ID.
<style type="css/stylesheet">
#div1 {
width:200px;
height:100px;
background:green;
}
#div2 {
width:200px;
height:100px;
background:red;
}
.toggle {
display:none;
}
</style>
<div id="menu">Toggle
</div>
<div id="div1" class="toggle">
<p class="displayContent">I'm some content 1</p>
</div>
<div id="div2" class="toggle">
<p class="displayContent">I'm some content 2</p>
</div>
<script language="javascript">
var a = document.getElementById("link");
a.onclick = function () {
var ele = document.getElementsByClassName("toggle");
for (var i = 0; i < ele.length; i++) {
var item = ele[i];
if (item.style.display == "block") {
item.style.display = "none";
} else {
item.style.display = "block";
item.innerHtml = "some content from " + i;
}
}
};
</script>
Here is the JSFiddle solution http://jsfiddle.net/dUU7j/
This question relates to the last i asked on this site - Using javascript to "link" from html background image?.
I received a good answer which worked, however the link for the background image is also applied to the container. How would I go about ensuring that only clicking on the background image (of the id body) and not the container links to whatever website?
I hope I have been clear enough. Many thanks in advance.
The html:
<html>
<head>
<link href = "style1.css" rel = "stylesheet" type = "text/css">
</head>
<div id = "header">
Header
</div>
<body>
<div id = "body">
<div class = "container">
</div>
</div>
</body>
</html>
<script>
document.getElementById('body').onclick = function() {
window.location = 'http://www.google.com/';
}
</script>
The CSS code:
#header{
width:100%;
height:50px;
background-color:black;
}
#body {
width:100%;
height:2000px;
background-image:url('uploads/1.jpg');
cursor:pointer;
}
.container{
width: 1000px;
margin-right: auto;
margin-left: auto;
height: 1000px;
background-color:white;
}
In your click handler, you can check the element that was clicked on, if it's not body (meaning it's a child), then don't do anything.
document.getElementById('body').onclick = function(e) {
// e.target is what you clicked on
// this is always what the event was bound to
if(e.target === this){
window.location = 'http://www.google.com/';
}
}
Try add this code in your script:
document.querySelector('#body .container').onclick = function() {return false; }
To have:
<script>
document.getElementById('body').onclick = function() {
window.location = 'http://www.google.com/';
}
document.querySelector('#body .container').onclick = function() {return false; }
</script>
You could also do a return false
document.getElementById('body').onclick = function(e)
{
if(!(e.target===this))
return false;
console.log("click");
//window.location = 'http://www.google.com/';
}
How to set up animation to element once it appears? (So that others with same properties remain calm.) I am trying to do like this:
$.each(data, function(i, obj) {
if(obj['Ping'] == "FALSE"){
out = "<li class='red'>"+obj.Vardas+" is down..."+obj.Data+"</li>";
/////animation, once the element gets generated
$(out).prependTo('#database').animate({fontColor:"red", 1000});
out ="";
}else{
out = "<li>"+obj.Vardas+" is up......."+obj.Data+"</li>";
$(out).prependTo('#database');
out ="";
}
});
});
});
</script>
</head>
<body>
<div style="float:right; overflow-y:scroll; height: 400px; width: 50%">
<ul id ='database'></ul>
</div>
jQuery is not able to use color for animation. But for such things you can use jQuery Color plugin ( https://github.com/jquery/jquery-color ).
Here is small working example with opacity blink:
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
var t = function(){
for(var i = 0; i < 5; i++){
$("<li>ata" + i + "tata</li>").prependTo($("ul")).animate({opacity: 0.10}, 200).animate({opacity: 1}, 200);
}
}
$(function(){
setInterval(t, 1000);
});
</script>
</head>
<body>
<ul> </ul>
</body>
</html>
I'm using Javascript to show documents. First, I hide the content that is loaded. Then, if a user press a button, the text related to that button will become visible while hiding other texts.
Currently, my technique does not change the URL that shows in the address bar.
I would like to update the address bar when a user clicks on one of the content display buttons. For example:
address.com/value_of_button
And if a user enters:
adress.com/a_value
I want to change display of div associated with the value. How is this done?
You can always use a hash url, and set the url like this:
function setHash(var hash) {
window.location.hash = hash;
}
If you want to retrieve the hash in the link to update the page, you can use something like
function getHash() {
return window.location.hash;
}
And to update the page you can just simply use if statements like this:
if(getHash() == "#main") {
document.getElementById('content').innerHtml = "<p>Main content</p>";
}
I had already demonstrated this at some point in the last year with jQuery. It's possible to not use jQuery, of course, but I'll provide you with the demo I created. I'll port an example to regular Javascript as well.
<html>
<head>
<style type="text/css">
.content {
display: none;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu a').each(function(){
id = $(this).attr('href');
id = id.substring(id.lastIndexOf('/'));
id = id.substring(0,id.indexOf('.'));
$(this).attr('rel',id);
});
$('#home').show();
$('#menu a').click(function(e){
e.preventDefault();
$('.content').hide();
$('#'+$(this).attr('rel')).show();
location.hash = '#!/'+$(this).attr('rel');
return false;
});
});
</script>
</head>
<body>
<div id="menu">
Home -
One -
Two -
Three
</div>
<div id="home" class="content">
Home content.
</div>
<div id="one" class="content">
One content.
</div>
<div id="two" class="content">
Two content.
</div>
<div id="three" class="content">
Three content.
</div>
</body>
</html>
EDIT
DOM method as promised:
<html>
<head>
<style type="text/css">
.content {
display: none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var links = document.getElementById('menu').getElementsByTagName('a'),
divs = document.getElementsByTagName('div'),
sections = [],
id = '';
for (var i = 0, size = divs.length; i < size; i++) {
if (divs[i].className.indexOf('content') != -1) {
sections.push(divs[i]);
}
}
for (var i = 0, size = links.length; i < size; i++) {
id = links[i].href;
id = id.substring(id.lastIndexOf('/') + 1);
id = id.substring(0,id.indexOf('.'));
links[i].rel = id;
links[i].onclick = function(e){
e.preventDefault();
for (var p = 0, sections_size = sections.length; p < sections_size; p++) {
sections[p].style.display = 'none';
}
document.getElementById(this.rel).style.display = 'block';
location.hash = '#!/' + this.rel;
return false;
}
}
document.getElementById('home').style.display = 'block';
};
</script>
</head>
<body>
<div id="menu">
Home -
One -
Two -
Three
</div>
<div id="home" class="content">
Home content.
</div>
<div id="one" class="content">
One content.
</div>
<div id="two" class="content">
Two content.
</div>
<div id="three" class="content">
Three content.
</div>
</body>
</html>