change html page according to day (mo, tu etc.) - javascript

window.onload=function(){
var day=new Date().getDay();
switch (day)
{
case 0:
window.document.location.href = 'su.html';
break;
case 1:
window.document.location.href = 'mo.html';
break;
case 2:
window.document.location.href = 'tu.html';
break;
case 3:
window.document.location.href = 'we.html';
break;
case 4:
window.document.location.href = 'th.html';
break;
case 5:
window.document.location.href = 'fr.html';
break;
case 6:
window.document.location.href = 'sa.html';
break;
}
};
it does not load the current html page. It loads the index.html file
can somebody pls tell me how to make this could work ?
thanks!
i've got an array whith week days

You can't put the javascript in every page, but only in a "loading" page that execute the code and navigate the user in the correct page.
Loading page (With your script) -> Go in the correct page

You will need to change your script to something like this if you want to have the same script in every page:
window.onload=function(){
var day=new Date().getDay();
var path = window.location.pathname;
var page = path.split("/").pop();
if(day == 0 && page != 'su.html')
window.document.location.href = 'su.html';
else if(day == 1 && page != 'mo.html')
window.document.location.href = 'mo.html';
else if(day == 2 && page != 'tu.html')
window.document.location.href = 'tu.html';
else if(day == 3 && page != 'we.html')
window.document.location.href = 'we.html';
else if(day == 4 && page != 'th.html')
window.document.location.href = 'th.html';
else if(day == 5 && page != 'fr.html')
window.document.location.href = 'fr.html';
else if(day == 6 && page != 'sa.html')
window.document.location.href = 'sa.html';
};

Related

array within a switch javascript

A little while ago I needed help with a complicated switch, but now I am substituting the direct variables for arrays. I thought it best to use a for statement, and it isn't displaying the results.
This is a side project for me, so please let me know if there are any aspects you see that could be improved.
<script>
var strMod=0;
var dexMod=0;
var conMod=0;
var intMod=0;
var wisMod=0;
var chaMod=0;
var strength = prompt("what is your strength?");
var dexterity = prompt("what is your dexterity?");
var constitution = prompt("what is your constitution?");
var intelligence = prompt("what is your intelligence?");
var wisdom = prompt("what is your wisdom?");
var charisma = prompt("what is your charisma?");
var abilities=[strength,dexterity,constitution,intelligence,wisdom,charisma];
var abiMod=[strMod,dexMod,conMod,intMod,wisMod,chaMod];
for (var i=0; i<abilities.length;i++){
switch(true){
case (abilities(i)>=0 && abilities(i)<2 && abilities(i)!==null):
abiMod(i)=-5;
break;
case (abilities(i)>=2 && abilities(i)<4):
abiMod(i)=-4;
break;
case (abilities(i)>=4 && abilities(i)<6):
abiMod(i)=-3;
break;
case (abilities(i)>=6 && abilities(i)<8):
abiMod(i)=-2;
break;
case (abilities(i)>=8 && abilities(i)<10):
abiMod(i)=-1;
break;
case (abilities(i)>=10 && abilities(i)<12):
abiMod(i)=0;
break;
case (abilities(i)>=12 && abilities(i)<14):
abiMod(i)=1;
break;
case (abilities(i)>=14 && abilities(i)<16):
abiMod(i)=2;
break;
case (abilities(i)>=16 && abilities(i)<18):
abiMod(i)=3;
break;
case (abilities(i)>=18 && abilities(i)<20):
abiMod(i)=4;
break;
case (abilities(i)>=20 && abilities(i)<22):
abiMod(i)=5;
break;
default:
abiMod(i)= prompt("what is your"+ abilities(i) +"modifier?");
break;
};
alert(abiMod(i));
};
</script>
Rather than using the switch statement, there is a common theme across all case and so a mathematical formula can be used instead.
Here is the revised code
for (var i = 0; i < abilities.length; i++) {
if (abilities[i] !== null && abilities[i] >= 0 && abilities[i] < 22) {
abiMod[i] = Math.floor(abilities[i] / 2) - 5;
}
else {
abiMod[i] = prompt("what is your "+ abilities[i] +" modifier?");
}
};
For starters, you need to access array indices via brackets, not parens.
for (var i=0; i<abilities.length;i++){
switch(true){
case (abilities[i]>=0 && abilities[i]<2 && abilities[i]!==null):
abiMod[i]=-5;
break;
case (abilities[i]>=2 && abilities[i]<4):
abiMod[i]=-4;
break;
case (abilities[i]>=4 && abilities[i]<6):
abiMod[i]=-3;
break;
case (abilities[i]>=6 && abilities[i]<8):
abiMod[i]=-2;
break;
case (abilities[i]>=8 && abilities[i]<10):
abiMod[i]=-1;
break;
case (abilities[i]>=10 && abilities[i]<12):
abiMod[i]=0;
break;
case (abilities[i]>=12 && abilities[i]<14):
abiMod[i]=1;
break;
case (abilities[i]>=14 && abilities[i]<16):
abiMod[i]=2;
break;
case (abilities[i]>=16 && abilities[i]<18):
abiMod[i]=3;
break;
case (abilities[i]>=18 && abilities[i]<20):
abiMod[i]=4;
break;
case (abilities[i]>=20 && abilities[i]<22):
abiMod[i]=5;
break;
default:
abiMod[i]= prompt("what is your"+ abilities[i] +"modifier?");
break;
};
alert(abiMod[i]);
};
</script>

Javascript change icon

I try to change the icon with select element. I have made it with 2 values, but now I need 3.
Any idea what is wrong with this code?
var icon = document.getElementById.("marker-icon");
if (type == 1) {
marker-icon.src = "images/icon1.png";
} else if (type == 2) {
marker-icon.src = "images/icon2.png";
} else if (type == 3) {
marker-icon.src = "images/icon3.png";
}
This code is for 2 values and it works fine.
var icon = (type == 1) ? "images/icon1.png" : "images/icon2.png";
Try this:
var icon = document.getElementById("marker-icon");
if (type == 1) {
icon.src = "images/icon1.png";
} else if (type == 2) {
icon.src = "images/icon2.png";
} else if (type == 3) {
icon.src = "images/icon3.png";
}
There was an extra . after the getElementById and you were using marker-icon instead of icon. (I am assuming that marker-icon is the id of an img tag.)
Try to use switch case syntax.
switch (type) {
case 1:
var icon = "images/icon1.png";
break;
case 2:
var icon = "images/icon2.png";
break;
case 3:
var icon = "images/icon3.png";
break;
default:
//default code block
break;
}
It works with that :
var icon = document.getElementById("icon");
if (type == 1) {
icon = "images/icon1.png";
} else if (type == 2) {
icon = "images/icon2.png";
} else if (type == 3) {
icon = "images/icon3.png";
}
Thanks for all! ^^

Geolocation precision

I programmed this code but there is a problem, the code works but if I open it and don't open maps on my phone before opening script the location is not precise, but if I open maps(in maps I'm located with precise +/- 1 meter) than I get redirected accurately. Is there any way to put in my script that user is located precise like in maps?
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else {
alert("Vaš preglednik ne podržava geolokaciju.");
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
alert("Molimo dopustite lociranje kako bi stranica pravilno radila.");
break;
case error.POSITION_UNAVAILABLE:
alert("Nema informacija o vašoj lokaciji.");
break;
case error.TIMEOUT:
alert("Vrijeme slanja zahtjeva isteklo.");
break;
case error.UNKNOWN_ERROR:
alert("Oops. Dogodila se nepoznata greška.");
break;
}
}
function showPosition(pos) {
//Neboder
if (pos.coords.latitude <= 45.77578 && pos.coords.latitude >= 45.77502 && pos.coords.longitude <= 15.995222 && pos.coords.longitude >= 15.994286)
{window.location = 'mob_test.html';}
//Vrtic
if (pos.coords.latitude <= 45.774885 && pos.coords.latitude >= 45.774754 && pos.coords.longitude <= 15.993956 && pos.coords.longitude >= 15.993886) {
window.location = 'vrtic.html';}
//Restoran
if (pos.coords.latitude <= 45.774896 && pos.coords.latitude >= 45.774748 && pos.coords.longitude <= 15.993792 && pos.coords.longitude >= 15.993671) {
window.location = 'skola.html';
}
//Ostalo
else {
window.location = 'bljak.html';
}
}
The HTML5 Geolocation API has options, which one of is enableHighAccuracy. Try setting that option to true and see if it makes any difference.

Jquery Cookies Issue

I'm trying to use jquery cookies to store the state of a tree menu between page loads, for some reason the below code does not seem to create a cookie inside the switch statement. Using the cookie code outside of the switch statement works fine. I'm not too great with JS so it could be a simple issue with my switch,
intImage = 2;
var catCookie = jQuery.cookie('catCookie');
if(catCookie == 'left')
{
intImage = 1;
};
if(catCookie == 'down')
{
intImage = 2;
};
function swapImage() {
switch (intImage) {
case 1:
intImage = 2
document.getElementById(".giftarrow").src = "http://www.domain.com/left-arrow.png";
jQuery.cookie('catCookie', 'left')
return(false);
case 2:
intImage = 1
document.getElementById(".giftarrow").src = "http://www.domain.com/down-arrow.png";
jQuery.cookie('catCookie', 'down')
return(false);
}
}
any help is greatly appreciated.
You seem to be missing some semicolons:
switch (intImage) {
case 1:
intImage = 2;
$('.giftarrow').attr('src', 'http://www.gracecole.co.uk/shop/skin/frontend/default/default/images/left-arrow.png');
jQuery.cookie('catCookie', 'left');
return(false);
case 2:
intImage = 1;
$('.giftarrow').attr('src','http://www.gracecole.co.uk/shop/skin/frontend/default/default/images/down-arrow.png');
jQuery.cookie('catCookie', 'down');
return(false);
}

jQuery: part of a function not executing

I have a tabbed setup on the page and I want to automatically make corresponding menu tab highlighted as well as corresponding content div show depending on # hash.
Example:
http://design.vitalbmx.com/user_menu/member_profile_so.html -- no hash, opens 1st tab
http://design.vitalbmx.com/user_menu/member_profile_so.html#setup -- #setup, should open "Setup" tab
As you can see it works for highlighting "Setup" tab. But content div does not change.
The script is below:
var tab_content_current = 1;
switch (window.location.hash) {
case '#activity': tab_content_current = 1; break;
case '#friends': tab_content_current = 2; break;
case '#photos': tab_content_current = 3; break;
case '#videos': tab_content_current = 4; break;
case '#setup': tab_content_current = 5; break;
case '#forum': tab_content_current = 6; break;
case '#blog': tab_content_current = 7; break;
case '#comments': tab_content_current = 8; break;
case '#favorites': tab_content_current = 9; break;
case '#profile-comments': tab_content_current = 10; break;
default: tab_content_current = 1;
}
if (tab_content_current != 1) {
change_active_tab (tab_content_current);
}
function tabs_toggle (id) {
if (id != tab_content_current) {
change_active_tab (id);
tab_content_current = id;
}
}
function change_active_tab (id) {
$j('.profile_tabs li').removeClass('active');
if (id < 8) $j('.profile_tab_'+id).addClass('active');
$j('.profile_content').hide();
$j('#profile_content_'+id).fadeIn();
}
Note that it works when you actually click menu tabs.
Any help to fix this problem would be greatly appreciated.
Move the script to the very bottom of the page, after the profile_content divs. That way they will be in the DOM before the scripts run. It is also best to put scripts at the bottom of the page for speed reasons.
That part of the code is not inside a jQuery ready() call, so the DOM is not yet loaded when it runs.
EDIT: The reason the tabs work, is that the script appears to be in the middle of the HTML content. The tas come before the script, and the content comes after. So that tabs are loaded, and the content sections are not.
Do this:
$(document).ready(function() {
var tab_content_current = 1;
switch (window.location.hash) {
case '#activity': tab_content_current = 1; break;
case '#friends': tab_content_current = 2; break;
case '#photos': tab_content_current = 3; break;
case '#videos': tab_content_current = 4; break;
case '#setup': tab_content_current = 5; break;
case '#forum': tab_content_current = 6; break;
case '#blog': tab_content_current = 7; break;
case '#comments': tab_content_current = 8; break;
case '#favorites': tab_content_current = 9; break;
case '#profile-comments': tab_content_current = 10; break;
default: tab_content_current = 1;
}
if (tab_content_current != 1) {
change_active_tab (tab_content_current);
}
function tabs_toggle (id) {
if (id != tab_content_current) {
change_active_tab (id);
tab_content_current = id;
}
}
function change_active_tab (id) {
$j('.profile_tabs li').removeClass('active');
if (id < 8) $j('.profile_tab_'+id).addClass('active');
$j('.profile_content').hide();
$j('#profile_content_'+id).fadeIn();
}
});
Or just place the script at the end of the page. Good idea to use ready() anyway, though.
Try setting your <li> elements up like this:
<ul class="profile_tabs light">
<li class="profile_tab_1 active">Activity</li>
you can more easily write some jQuery to tab like so:
var tab_content_current = 1;
function GetIndex($obj) { return $(this).parent().children().index($obj); }
$j(function(){
$j(".profile_tabs li").click(function(e){
e.preventDefault();
change_active_tab(GetIndex(this) + 1)
});
function change_active_tab (id) {
tab_content_current = id;
$j('.profile_tabs li').removeClass('active');
if (id < 8) $j('.profile_tab_'+id).addClass('active');
$j('.profile_content').hide();
$j('#profile_content_'+id).fadeIn();
}
var hash = window.location.hash;
if (hash != null && hash != "")
{
var $li = $(".profile_tabs li a[href=" + hash + "]");
change_active_tab(GetIndex($li) + 1)
}
});

Categories