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>
Related
Whenever I click on a container which is also the h1. But I want to do when I click on the container. I want to make its h1 color blue. Im stuck on the part making the h1 blue.
var container = document.getElementsByClassName('container');
var h1 = document.getElementsByTagName('h1');
// Put event listener on each container
for(var i = 0; i < container.length; i++) {
container[i].addEventListener('click', function() {
// This isn't working
h1[i].style.color = 'blue';
})
}
<div class="container">
<h1>HELLO</H1>
</div>
<div class="container">
<h1>HELLO</H1>
</div>
<div class="container">
<h1>HELLO</H1>
</div>
<div class="container">
<h1>HELLO</H1>
</div>
You are referring to the wrong element when you used h1[i].style...
Use this instead and it will work fine. See code below:
var container = document.getElementsByClassName('container');
var h1 = document.getElementsByTagName('h1');
// Put event listener on each container
for(var i = 0; i < container.length; i++) {
container[i].addEventListener('click', function() {
// Get the 1st H1 inside current container
this.getElementsByTagName('h1')[0].style.color = 'blue';
})
}
<div class="container">
<h1>HELLO</H1>
</div>
<div class="container">
<h1>HELLO</H1>
</div>
<div class="container">
<h1>HELLO</H1>
</div>
<div class="container">
<h1>HELLO</H1>
</div>
var container = document.getElementsByClassName('container');
var h1 = document.getElementsByTagName('h1');
// Put event listener on each container
for(var i = 0; i < container.length; i++) {
container[i].addEventListener('click', function() {
this.firstElementChild.style.color="blue"
})
}
Inside the container[i].addEventListener('click', ....) this is the HTML Element of the container. Therefore, calling this.firstElementChild will grab the H1 of that container and change it's color to blue. If you add anything before the H1, just call the children function on this and grab the h1 element.
Neither of the answers that have been posted directly address the issue. They rely on changing the entire color of the .container element, or on the <h1> always being the immediate first child of .container.
The problem that you have is that you have is that your i variable is out of scope, and cannot be used inside the event handler you're defining. We can get around this by wrapping the handler function in a closure as follows:
var container = document.getElementsByClassName('container'),
h1 = document.getElementsByTagName('h1');
for(var i = 0; i < container.length; i++)
{
container[i].onclick = (function(i) {return function() {
h1[i].style.color = 'blue';
};})(i);
};
<div class="container">
<h1>HELLO</H1>
</div>
<div class="container">
<h1>HELLO</H1>
</div>
<div class="container">
<h1>HELLO</H1>
</div>
<div class="container">
<h1>HELLO</H1>
</div>
Notice that the above will only change the colour of the <h1>. Of course, this assumes that all of your <h1> elements are always matched in number and index by the .container elements (but I assume that they are, from your question).
I have created this block of code. It works in a way that if you click one of the cirles, it gets activated and the content corresponding to the circle is show. How can I make this change automatically so that, for example, every 5 seconds another circle gets activated with its corresponding content shown. I want to make this loop never ending.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#timeline{height:460px;width:3px;background-color:#E6E6E6;position:absolute;left:50%;top:55px;}
a.cirle{width:15px;height:15px;background-color:#E6E6E6;border-radius:50px;position:absolute;}
a.cirle:hover{background-color:red;}
a.cirle.active{background-color:red;}
.contentquestion1{position:absolute;top:35px;margin-left:-7px;left:50%;}
.contentquestion2{position:absolute;top:225px;margin-left:-7px;left:50%;}
.contentquestion3{position:absolute;top:425px;margin-left:-7px;left:50%;}
#contentanswer {position: absolute;left: 50%;top: 200px;margin-left: 50px;}
#contentanswer1 {position: absolute;left: 50%;top: 200px;margin-left: 50px;display:none;}
#contentanswer2 {position: absolute;left: 50%;top: 200px;margin-left: 50px;display:none;}
#contentanswer3 {position: absolute;left: 50%;top: 200px;margin-left: 50px;display:none;}
</style>
</head>
<body>
<div id="timeline"></div>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('[class^="contentquestion"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('contentquestion', '');
$('[id^="contentanswer"]').fadeOut(500);
$('#contentanswer' + numb).fadeIn(500);
});
});//]]>
</script>
<script type='text/javascript'>
$(function() {
$('a.cirle').click(function() {
$('a.cirle').removeClass('active');
$(this).addClass('active');
}).eq(1).addClass('active');
});
</script>
<div class="timeline timeline1">
<div class="contentquestion1"><a class="cirle" href="#"></a></div>
<div class="contentquestion2"><a class="cirle" href="#"></a></div>
<div class="contentquestion3"><a class="cirle" href="#"></a></div>
</div>
<div class="new_member_box_display" id="contentanswer">CONTENT 2</div>
<div id="contentanswer1">CONTENT 1</div>
<div id="contentanswer2">CONTENT 2</div>
<div id="contentanswer3">CONTENT 3</div>
</body>
</html>
Codepen: http://codepen.io/anon/pen/BoWZgY
Add this to your code:
jQuery.fn.random = function () {
var randomIndex = Math.floor(Math.random() * this.length);
return jQuery(this[randomIndex]);
};
setInterval(function () {
$('.cirle:not(".active")').random().click();
}, 2000);
You can easily click the next circle in the list by detecting the index of the currently active circle, and then clicking the next one. using the % operator allows it to loop forever
Example: http://codepen.io/anon/pen/KdWvdJ
setInterval(function(){
var totalCircles = $("a.cirle").size();
var currIndex = $("a.cirle.active").index("a.cirle");
currIndex++;
$('a.cirle').eq(currIndex % totalCircles).click();
}, 1000); // Adjust the time here 5000 = 5sec
I am having trouble figuring this out. After a user clicks Link1 I would like it to close when Link2 has been clicked using Javascript. I have seen an example or two with this working in jquery, but I already have a tone of code written using this method, so I would prefer to to have to start all over.Thanks everyone!
HTML...
<style>
.hidden { display: none; }
.visible { display: block; }
</style>
</head>
<body>
<div id="col2">
Link 1
<div id="contentONE" class="hidden">
<h3>contentONE</h3>
<ul>
<li>Content1.1</li>
<li>Content1.2</li>
</ul>
</div>
</div>
<div id="col2">
Link 2
<div id="contentTWO" class="hidden">
<h3>contentTWO</h3>
<ul>
<li>Content2.1</li>
<li>Content2.2</li>
</ul>
</div>
</div>
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
</body>
Try something like this:
var collapsables = document.getElementsByClassName('collapsable');
function unhide(divID) {
// Hide previous
for (var i = 0; i < collapsables.length; i++) {
collapsables[i].className = 'collapsable hidden';
}
// Show new
var item = document.getElementById(divID);
if (item) {
item.className = 'collapsable';
}
}
Demo: http://jsfiddle.net/MLmXa/
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.
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>