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
Related
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.
I'm using a on-click event on javascript for my website and once the heading is clicked the block of information shows. That part works. However once I click it again it does not go back to "none".
var x = 1;
if(x%2 != 0){
document.getElementById("infoForEmployers").style.display = "block";
x++;
}else{
document.getElementById("infoForEmployers").style.display = "none";
x++;
}
console.log(x);
Never mind the console log, that was me trying to see if x was increasing. So basically every other click should either show or not show.
Your x variable is being set to 1 every time you set the function.
Make it a global variable and you'll be fine:
Try this:
window.x = window.x || 0 ;
if(window.x%2 != 0){
document.getElementById("infoForEmployers").style.display = "block";
window.x++;
}else{
document.getElementById("infoForEmployers").style.display = "none";
window.x++;
}
console.log(window.x);
Use this function to toggle the element
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.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);
function globalModelToggleClicked(modname)
{
var state = this.checked ? true : false;
var display = this.checked ? 'inline-block' : 'none';
var inputs = document.getElementsByTagName('input');
var input_l = inputs.length;
// check uncheck inputs checkboxes
while(input_l--)
{
var input = inputs[input_l];
if(input.getAttribute('class') == modname)
{
input.checked = state;
}
}
// show/ hide all colorings
var main = document.getElementById('main');
var divs = main.getElementsByTagName('div');
var divs_l = divs.length;
var regex = new RegExp(modname);
while(divs_l--)
{
var div = divs[divs_l];
if( regex.test(div.getAttribute('class'))
&& ( /hit/.test(div.getAttribute('class'))
|| /seqBorder/.test(div.getAttribute('class'))
)
)
{
div.style.display = display;
}
}
}
function localModelToggleClicked(modname)
{
var display = this.checked ? 'inline-block' : 'none';
// get parent fieldset
var fieldset = this.parentNode;
while(fieldset.nodeName != 'FIELDSET')
{
fieldset = fieldset.parentNode;
}
// show/ hide all colorings
var divs = fieldset.getElementsByTagName('div');
var divs_l = divs.length;
var regex = new RegExp(modname);
while(divs_l--)
{
var div = divs[divs_l];
if( regex.test(div.getAttribute('class'))
&& ( /hit/.test(div.getAttribute('class'))
|| /seqBorder/.test(div.getAttribute('class'))
)
)
{
div.style.display = display;
}
}
}
The two above functions toggle the div's visibility. They work perfectly in all browsers except IE(8) and I have no idea what is wrong. I have tried the debugger, which shows nothing. The functions are on an external script with other functions, which are working. When I alert inside the function everything seems in order. Can anyone help
?
The Problem was with the getAttribute('class') apparently IE does not accept this. So i use the className instead. Which works perfectly in all browsers.
In the following code I want to reduce these 5 functions down to 3.
The first function toggle_visibility() is already made universal by passing the id when I call the function from my html, however, I have to repeat the next two functions thankYouText_Change() and resettxt() because I don't know how to store the value of the Item variable, nor the p or OK_button variables and pass them to the next function so that they can be used by the other functions.
My goal is to figure out how to reduce these to a set of 3 functions that can be accessed at anytime in my html and applied to any and all relevant elements simply by using onClick="function_foo('desired_element_foo'), without having to have a separate set of functions for each time I want to use them on a different element.
I think that in order to do this I also need to know how to make the variables p and OK_Button have values that will automatically change and be stored based upon the id that I send to them/access them with.
function toggle_visibility(id) {
var Item = document.getElementById(id);
if (Item.style.display == 'block') {
Item.style.display = 'none';
}
else {
Item.style.display = 'block';
}
}
function thankYouText_Change() {
var p = document.getElementById("thanksForEmail");
var OK_Button = document.getElementById("okButton");
if (p.innerHTML == 'Thank you for submitting your e-mail.') {
OK_Button.style.display = 'none';
p.innerHTML = "Returning to page...";
setTimeout("toggle_visibility('msgSend'), resettxt()", 500);
}
}
function resettxt() {
var p = document.getElementById("thanksForEmail");
var OK_Button = document.getElementById("okButton");
if (p.innerHTML == 'Returning to page...') {
p.innerHTML = 'Thank you for submitting your e-mail.';
OK_Button.style.display = 'block';
}
}
//Start of repeated functions for second div and button elements
function thankYouText_Change2() {
var p = document.getElementById("thanksForEmail2");
var OK_Button = document.getElementById("okButton2");
if (p.innerHTML == 'Thank you for submitting your e-mail.') {
OK_Button.style.display = 'none';
p.innerHTML = "Returning to page...";
setTimeout("toggle_visibility('msgSend2'), resettxt2()", 500);
}
}
function resettxt2() {
var p = document.getElementById("thanksForEmail2");
var OK_Button = document.getElementById("okButton2");
if (p.innerHTML == 'Returning to page...') {
p.innerHTML = 'Thank you for submitting your e-mail.';
OK_Button.style.display = 'block';
}
}
For a first pass, you could simplify this to something like this:
function thankYouText_Change(pId, okId, msgSendId){
var p = document.getElementById(pId);
var OK_Button = document.getElementById(okId);
if(p.innerHTML == 'Thank you for submitting your e-mail.'){
OK_Button.style.display = 'none';
p.innerHTML = "Returning to page...";
setTimeout(function(){
toggle_visibility(msgSendId);
resettxt(pId, okId);
}, 500);
}
}
function resettxt(pId, okId){
var p = document.getElementById(pId);
var OK_Button = document.getElementById(okId);
if(p.innerHTML == 'Returning to page...'){
p.innerHTML = 'Thank you for submitting your e-mail.';
OK_Button.style.display = 'block';}
}
And then for each set of elements on the page, you just need to call thankYouText_Change with the correct IDs for each of the 3 related elements.
For a 2nd pass, you could simplify both of my above functions into one, so that you don't need to re-call document.getElementById on the same elements more than once (not significant, but I also like to declare everything with var - variables and functions alike):
var thankYouText_Change = function(pId, okId, msgSendId){
var p = document.getElementById(pId);
var OK_Button = document.getElementById(okId);
if(p.innerHTML == 'Thank you for submitting your e-mail.'){
OK_Button.style.display = 'none';
p.innerHTML = "Returning to page...";
setTimeout(function(){
toggle_visibility(msgSendId);
if(p.innerHTML == 'Returning to page...'){
p.innerHTML = 'Thank you for submitting your e-mail.';
OK_Button.style.display = 'block';
}
}, 500);
}
}
(Note that this eliminates the need for a resettxt function.)