I'm trying to make my first website, the function that I am looking to get is I
have a dropdown box where every option changes the hash. When the hash changes
I have a certain table and image display based on which hash. So far I can get
it to work but only with my first option. Whenever I try to add more only one
of them is functioning.
So far I've tried fitting all of my code into a single function but that seems very tedious and it would involve me writing a massive amount of
elem = document.getElementById("xxxxx");
elem.style.display = "block";
for every one of my options
function locationmario() {
if (window.location.hash === '#Mario') {
elem = document.getElementById("damagetablemario");
elem.style.display = "block";
elem = document.getElementById("marioimage");
elem.style.display = "block";
} else {
elem.style.display = "none";
elem = document.getElementById("damagetablemario");
elem.style.display = "none";
}
}
function locationdk() {
if (window.location.hash === "#Donkey-Kong") {
elem = document.getElementById("damagetabledk");
elem.style.display = "block";
elem = document.getElementById("dkimage");
elem.style.display = "block";
} else {
elem = document.getElementById("dkimage");
elem.style.display = "none";
elem = document.getElementById("damagetabledk");
elem.style.display = "none";
}
}
window.onhashchange = locationmario;
window.onhashchange = locationdk;
I want to be able to see my corresponding table and image for each hash that I switch to.
I really want to change more of your code, but the below should work.
First the clear_ids, simply loops through IDs and hides those divs by default. After that its just a simple IF else statement.
function locationchange() {
var clear_ids = ["marioimage","damagetablemario","damagetabledk","dkimage"];
for(z=0;z<=clear_ids.length-1;z++){
elem = document.getElementById(clear_ids[z]);
elem.style.display = "none";
}
if (window.location.hash === "#Donkey-Kong") {
elem = document.getElementById("damagetabledk");
elem.style.display = "block";
elem = document.getElementById("dkimage");
elem.style.display = "block";
}
else if (window.location.hash === '#Mario') {
elem = document.getElementById("damagetablemario");
elem.style.display = "block";
elem = document.getElementById("marioimage");
elem.style.display = "block";
}
}
window.onhashchange = locationchange;
window.onhashchange can only point to one function, so in the case above it will only point to locationdk. I suggest you refactor you code so that you have two if statements checking the window.location.
Related
i have managed to make a script that allows me to show and hide my div when i click a link, but i also want it to hide the div when i click outside the div.... how do i manage such thing?
<script>
function toggle() {
var ele = document.getElementById("dropdown");
var text = document.getElementById("trigger");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Kontakta oss";
}
else {
ele.style.display = "block";
text.innerHTML = "Kontakta oss";
}
}
</script>
You need to listen to clicks on the document.
var ele = document.getElementById("dropdown");
document.addEventListener("click", function(event){
var childClicked = [].slice.call(ele.getElementsByTagName('*')).some(function(node) {
return node === event.target;
});
if(event.target !== ele && !childClicked){
ele.style.display = "none";
}
});
I am using document here but you can choose whatever fits your needs with document.querySelector for example.
edit:after comment
I am currently running a page that requires a drop-down menu and three radio buttons for user selections. Each time the user changes their selection, a div is displayed based on their selection while all other divs are hidden. My current JavaScript works, but it's a massive, and probably inefficient mess.
EX:
function enrollmentChange() {
var enrollmentChoice = document.getElementById("enrollmentChoice");
if (document.getElementById("onC").checked) {
if (enrollmentChoice.options[enrollmentChoice.selectedIndex].text === "Please select enrollment status") {
document.getElementById("full-timeOn").style.display = "none";
document.getElementById("three-quarter-timeOn").style.display = "none";
document.getElementById("half-timeOn").style.display = "none";
document.getElementById("less-than-half-timeOn").style.display = "none";
document.getElementById("full-timeOff").style.display = "none";
document.getElementById("three-quarter-timeOff").style.display = "none";
document.getElementById("half-timeOff").style.display = "none";
document.getElementById("less-than-half-timeOff").style.display = "none";
document.getElementById("full-timeComm").style.display = "none";
document.getElementById("three-quarter-timeComm").style.display = "none";
document.getElementById("half-timeComm").style.display = "none";
document.getElementById("less-than-half-timeComm").style.display = "none";
}
You can see it all here http://jsfiddle.net/5h3kL/2/.
Is there a way for me to condense this into some type of loop? I have played around with a few loops, but I'm uncertain of how to make the loop consider both the radio button selection and drop-down menu selection.
I think this might shorten things a bit:
function enrollmentChange() {
var id = document.getElementById, // short hand
choice = id("enrollmentChoice").options[id("enrollmentChoice").selectedIndex].text,
which = id("onC").checked ? "On" :
id("offC").checked ? "Off" :
id("comm").checked ? "Comm" : "";
if (which !== "") {
["On", "Off", "Comm"].forEach(function(w) {
id("full-time" + w).style.display = "none";
id("three-quarter-time" + w).style.display = "none";
id("half-time" + w).style.display = "none";
id("less-than-half-time" + w).style.display = "none";
});
if (choice === "Full Time (12 or More Credit Hours)") {
id("full-time" + which).style.display = "block";
} else if (choice === "Three-Quarter Time (9-11 Credit Hours)") {
id("three-quarter-time" + which).style.display = "block";
} else if (choice === "Half Time (6-8 Credit Hours)") {
id("half-time" + which).style.display = "block";
} else {
id("less-than-half-time" + which).style.display = "block";
}
}
}
You can do something like that:
var enrollmentChoice = document.getElementById("enrollmentChoice");
var arraymap = ['Please select enrollment status',''],
['Full Time (12 or More Credit Hours)','three-quarter-timeOn'],
['Half Time (6-8 Credit Hours)','half-timeOn'] ... ;
var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type.toLowerCase() == 'radio') {
for(var ii=0;ii<arraymap.length;ii++){
if(arraymap[ii][0] == enrollmentChoice.options[enrollmentChoice.selectedIndex].text && arraymap[ii][1] == inputs[i].id){
inputs[i].style.display = 'block';
}else{
inputs[i].style.display = 'none';
}
}
}
}
This works fine at all times except for the first time tab_toggle(0) is called.
when the first time this function is called the #box_home has display:block; so the function shouldn't do anything but whats happening is #box_port(the next div) is getting display:block; and #box_home remaining display:block as before. why is this happening. is it because when the function is called the variable has value undefined so doing some random thing.
Please answer this in javascript only, dont answer in jquery.
i couldnt make it work just this part in jsfiddle so i am sharing the entire webpage code
http://goo.gl/dhTUDH
<!-- Javascript -->
<script>
function tab_toggle(x) {
console.log("tab_toggle");
var home = document.getElementById("box_home").style;
var port = document.getElementById("box_port").style;
var about = document.getElementById("box_about").style;
var contact = document.getElementById("box_contact").style;
var box = [home,port,about,contact];
switch (x) {
case 0:
if (home.display == "block") {
console.log('end');
} else if (port.display == "block") {
box[0].display = "block";
box[1].display = "none";
} else if (about.display == "block") {
box[1].display = "block";
box[2].display = "none";
} else {
box[2].display = "block";
box[3].display = "none";
}
break;
default:
if (home.display == "block") {
box[0].display = "none";
box[1].display = "block";
} else if (port.display == "block") {
box[1].display = "none";
box[2].display = "block";
} else if (about.display == "block") {
box[2].display = "none";
box[3].display = "block";
} else {}
break;
}
}
<!-- HTML -->
◀
▶
<div id="box_home"></div>
<div id="box_port"></div>
<div id="box_about"></div>
<div id="box_contact"></div>
<!-- CSS -->
#box_home{display:block;}\
#box_port{display:none;}
#box_about{display:none;}
#box_contact{display:none;}
You can't access a style directly as a property, as in
home.display
Instead, use the getComputedStyle() method
getComputedStyle(home).display
element.style will get the element's inline style. Try getComputedStyle or add a class.
getComputedStyle(box[0]).getPropertyValue("display")
Not sure what would you achieve, but this should work:
var currentElement = 0;
(tab_toggle = function (x) {
var home = document.getElementById("box_home").style;
var port = document.getElementById("box_port").style;
var about = document.getElementById("box_about").style;
var contact = document.getElementById("box_contact").style;
var box = [home, port, about, contact];
if (currentElement + x < 0 || currentElement + x > box.length - 1)
return;
currentElement += x;
console.log("toggled " + currentElement);
for (var i = 0; i < box.length; i++) {
box[i].display = "none";
}
box[currentElement].display = "block";
})(0);
I'm having an issue with the code I have provided below and I'm new to Javascript and Jquery. What the code is supposed to do is on load it fetches a number for "unread notifications" then places that number in a div called notes_number. Then it should read the number from notes_number and depending on if the number is more than 0 it will show the div called notes_signal.
I do this on load, every 5 seconds, and then whenever the notifications button is pressed. The code isn't working because on load it doesn't put a number in the notes_number div. Also the other occurrences aren't working. At one point I thought it was working but now I can't figure out what's up. Here's the code:
//THIS IS TO CHECK WHEN THE PAGE COMES UP
$("#notes_number").load("getnumber.php");
if(document.getElementById("notes_number").innerHTML > 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "";
}
if(document.getElementById("notes_number").innerHTML == 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "none";
}
//THIS IS TO CHECK EVERY 5 SECONDS
window.setInterval(function(){
$("#notes_number").load("getnumber.php");
if(document.getElementById("notes_number").innerHTML > 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "";
}
if(document.getElementById("notes_number").innerHTML == 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "none";
}
}, 5000);
//THIS IS TO CHECK WHEN THE BUTTON IS PRESSED
function toggleDiv(divId) {
$("#"+divId).show();
$(document).ready(function(){
$("#myContent").load("getnotes.php?page=<? echo $page; ?>");
});
$("#notes_number").load("getnumber.php");
if(document.getElementById("notes_number").innerHTML > 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "";
}
if(document.getElementById("notes_number").innerHTML == 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "none";
}
}
Create a function:
function checkNotes() {
$.get( "getnumber.php", function( data ) {
$( "#notes_number" ).text( data );
if ( parseInt(data) > 0 ) {
$('#notes_signal').show();
} else {
$('#notes_signal').hide();
}
});
}
And call it on load, on interval and on button click.
I would use .get in your instance
var load = $.get('getnumber.php');
Javascript is asynchronous, which means that
if(document.getElementById("notes_number..... will run before
$("#notes_number").load("getnumber.php"); is completed.
So you have to use a call back like this:
$("#notes_number").load("getnumber.php",function(){
if(document.getElementById("notes_number").innerHTML > 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "";
}
if(document.getElementById("notes_number").innerHTML == 0){
var elem = document.getElementById("notes_signal");
elem.style.display = "none";
}
});
Also I'm not sure that this will work elem.style.display = "";
Try 'elem.style.display = "block"; instead
I've been studying javaScript for two weeks now and I know there must be a better wayf doing what is shown bellow.
This is what happens:
The function myId() call another function and receives back a parameter that can be mk-prod06, mk-prod05, mk-prod04, mk-prod03. But I was wondering if I can make this function more flexible by accepting any parameter (mk-prod0x) where x can be any number. I don't' want to hand write every "if" for it. Is that even possible in this case? Thank you.
//Hides and shows product boxes
function myId() {
adjustStyle();
var showProduct6, showProduct5, showProduct4, showProduct3, hideProduct6, hideProduct5, hideProduct4, hideProduct3;
if (oProdId === "mk-prod06") {
showProduct6 = document.getElementById("mk-prod06");
showProduct5 = document.getElementById("mk-prod05");
showProduct4 = document.getElementById("mk-prod04");
showProduct3 = document.getElementById("mk-prod03");
showProduct6.style.display = "inline";
showProduct5.style.display = "inline";
showProduct4.style.display = "inline";
showProduct3.style.display = "inline";
}
if (oProdId === "mk-prod05") {
hideProduct6 = document.getElementById("mk-prod06");
hideProduct6.style.display = "none";
showProduct5 = document.getElementById("mk-prod05");
showProduct4 = document.getElementById("mk-prod04");
showProduct3 = document.getElementById("mk-prod03");
showProduct5.style.display = "inline";
showProduct4.style.display = "inline";
showProduct3.style.display = "inline";
}
if (oProdId === "mk-prod04") {
hideProduct6 = document.getElementById("mk-prod06");
hideProduct5 = document.getElementById("mk-prod05");
hideProduct6.style.display = "none";
hideProduct5.style.display = "none";
showProduct4 = document.getElementById("mk-prod04");
showProduct3 = document.getElementById("mk-prod03");
showProduct4.style.display = "inline";
showProduct3.style.display = "inline";
}
if (oProdId === "mk-prod03") {
hideProduct6 = document.getElementById("mk-prod06");
hideProduct5 = document.getElementById("mk-prod05");
hideProduct4 = document.getElementById("mk-prod04");
hideProduct6.style.display = "none";
hideProduct5.style.display = "none";
hideProduct4.style.display = "none";
showProduct3 = document.getElementById("mk-prod03");
showProduct3.style.display = "inline";
}
if (oProdId === "mk-prod02") {
hideProduct6 = document.getElementById("mk-prod06");
hideProduct5 = document.getElementById("mk-prod05");
hideProduct4 = document.getElementById("mk-prod04");
hideProduct3 = document.getElementById("mk-prod03");
hideProduct6.style.display = "none";
hideProduct5.style.display = "none";
hideProduct4.style.display = "none";
hideProduct3.style.display = "none";
}
}
Well, you basically have written out a loop. And it's quite trivial to formulate that loop explicitly:
function myId() {
adjustStyle();
var x = // the number, wherever you got it from. Maybe:
// parseInt(oProdId.slice(7), 10)
for (var i=6; i>2; i--) {
var product = document.getElementById("mk-prod"+("0"+i).slice(-2));
product.style.display = i > x ? "none" : "inline";
}
}
Something like this should work:
function hideShow(id) {
var upTo = id.match(/md-prod0(\d)/)[1];
for (var i = 3; i < 6; i++) {
var element = document.getElementById('md-prod0' + i);
if (i <= upTo) element.style.display = 'inline';
else element.style.display = 'none';
}
}
You have to adjust it slightly if more elements will be added.
Basically it loops over 3 to 6 and checks whether the current element is less than or equal to the given ID. In that case it shows the element. Otherwise it hides it.