I have 2 domains going to my site but I want to change the class of a div that has an ID of #logo.
I have tried the following but no luck...
<script type="text/javascript">
var hasChar1 = window.location.href.indexOf('domain01') != -1;
var hasChar2 = window.location.href.indexOf('domain') != -1;
if (hasChar1)
{
if (hasChar1)
{document.getElementById("logo").className = "logoNZ";}
else
{document.getElementById("logo").className = "";}
}
else if (hasChar2)
{document.getElementById("logo").className = "";}
</script>
Why inserting the same if statement inside itself?
This should work:
document.getElementById('logo').className = (window.location.hostname.indexOf('domain') !== -1) ? 'logoNZ' : 'notLogoNZ';
Make sure you place this code at the end of your body, after the div as already been rendered!
Have you tried something like this ?
if (window.location.hostname == "domain01"){
document.getElementById("logo").className = "logoNZ";
}
else if (window.location.hostname == "domain"){
document.getElementById("logo").className = "";
}
Related
I have this keyboard site launcher script, which I copied from some place years ago and it works fine as is. I want to enhance it by adding a cascading keypress launch for some of the keys. Here is my code:
<html><head>
<script language="JavaScript">
<!-- Begin
var key = new Array();
key['a'] = "https://www.arstechnica.com";
key['g'] = "https://www.google.com";
key['s'] = "https://slashdot.org";
key['y'] = "http://www.yahoo.com";
function getKey(keyStroke) {
isNetscape=(document.layers);
eventChooser = (isNetscape) ? keyStroke.which : event.keyCode;
which = String.fromCharCode(eventChooser).toLowerCase();
// alert('['+which+'] key \n has been stroke');
runUrl(which);
}
function runUrl(which) {
for (var i in key)
if (which == i) {window.location = key[i];}
}
document.onkeypress = getKey;
// End -->
</script></head>
<body>
Make a selection<br>
<br>
key['a'] = "https://www.arstechnica.com";
key['g'] = "https://www.google.com";
key['s'] = "https://slashdot.org";
key['y'] = "http://www.yahoo.com";
<br>
<br>
<!-- I solemnly swear this page is coded with vi or notepad.exe depending on the OS being used -->
</body>
</html>
Now, I want to modify the action for pressing the letter "s" to launch a submenu of sorts and ask me to select if I want to go to "Slashdot" or Spotify" for instance. like if I press an "s" second time, it goes to slashdot and if I press "f" for instance, it goes to spotify.
My problem is, I have never programmed in Javascript other than copying and pasting code and changing string values in the code, like here, changing the pressed keys and site URLs.
Any pointers, regarding how to start modifying this code, are greatly appreciated.
to be honest, the code provided is a bit outdated but I keep it so you can see the necessary changes that I made for the menu to be added and to implement the feature it's just a sketch but I will do the job I think from here you can expand, hope this puts you in the right direction
let isopenMenu = true;
const menu = document.getElementById("menu");
function toggleMenu() {
isopenMenu = !isopenMenu;
menu.style.display = isopenMenu ? "block" : "none";
}
var key = new Array();
key["a"] = "https://www.arstechnica.com";
key["g"] = "https://www.google.com";
key["s"] = "https://slashdot.org";
key["y"] = "http://www.yahoo.com";
key["b"] = "http://www.stackoverflow.com";
key["c"] = "http://www.test.com";
const menuSite = ["b", "c", "s"];
function getKey(keyStroke) {
isNetscape = document.layers;
eventChooser = isNetscape ? keyStroke.which : event.keyCode;
which = String.fromCharCode(eventChooser).toLowerCase();
runUrl(which);
}
function runUrl(which) {
for (var i in key)
if (which == i) {
if (which === "s") {
return toggleMenu();
}
if (!isopenMenu && menuSite.includes(which)) {
return;
}
window.location = key[i];
}
}
document.onkeypress = getKey;
window.addEventListener("load", toggleMenu);
<html><head>
<script language="JavaScript">
</script></head>
<body>
Make a selection<br>
<br>
key['a'] = "https://www.arstechnica.com";
key['g'] = "https://www.google.com";
key['s'] = "to toggel menu
key['y'] = "http://www.yahoo.com";
<br>
<br>
<ul id="menu">
<li>key['b'] = "http://www.stackoverflow.com";</li>
<li>key['c'] = "http://www.test.com</li>
</ul>
</body>
</html>
Indeed the code you've provided seems a bit dusted. There's some stuff that isn't done in that way nowadays. Notepad is an editor I still occassionally use though.
Since you've mentioned that you never really used JavaScript it's a bit hard to give you advice. You can do things way more elegant and even improve the look - but I'd say this would just confuse you even more. So let's work on something based on your code.
At the moment the keys and the corresponding targets are stored in an object (yeah, it's an object not an array). We can use a second object - let' say subKey - to store the additional targets upon pressing s.
var key = {};
key.a = "https://www.arstechnica.com";
key.g = "https://www.google.com";
key.s = "subMenu";
key.y = "http://www.yahoo.com";
var subKey = {};
subKey.a = "https://www.stackoverflow.com";
subKey.g = "https://www.startpage.com";
subKey.s = "goBack";
As you can see I've reserved the key s to go to the sub menu and inside the sub menu this button is used to go back to the main menu.
Now instead of hardcoding what the user gets to see on screen, we can iterate over those objects and use the information from there. To do this we need to reserve a html element - I've chosen an empty <div> which acts as some sort of container. As we iterate over the object we construct a string with the keys and it's associated targets and ultimately assign this this to the div's .innerHTML property.
let container = document.getElementById("container");
container.innerHTML = "Make a selection<br><br>";
for (var i in obj) {
container.innerHTML += "key['" + i + "'] = " + obj[i] + "<br>";
}
As the procedure is the same for both objects we just need to wrap it inside a function and pass it a reference to the desired object.
Your runUrl function needs to be modified a bit to take care of the additional options. This is best done with a simple if-else construct. So in pseudo-code:
if choice is subMenu open sub menu
if choice is goBack open main menu
if it's none of the above open a link
If we put everything together, your example looks a little bit like this:
(Just click on 'Run code snippet' and make sure to click somewhere inside the window so it'll have key focus)
<html>
<head>
</head>
<body>
<div id="container">
</div>
</body>
<script type="text/javascript">
var key = {};
key.a = "https://www.arstechnica.com";
key.g = "https://www.google.com";
key.s = "subMenu";
key.y = "http://www.yahoo.com";
var subKey = {};
subKey.a = "https://www.stackoverflow.com";
subKey.g = "https://www.startpage.com";
subKey.s = "goBack";
var currentObj = key;
function getKey(event) {
let which = String.fromCharCode(event.keyCode).toLowerCase();
runUrl(which)
}
function runUrl(which) {
for (var i in currentObj) {
if (which == i) {
if (currentObj[i] != "subMenu") {
if (currentObj[i] != "goBack") {
window.location = currentObj[i];
} else {
populateMenu(key);
}
} else {
populateMenu(subKey);
}
}
}
}
function populateMenu(obj) {
currentObj = obj;
let container = document.getElementById("container");
container.innerHTML = "Make a selection<br><br>";
for (var i in obj) {
container.innerHTML += "key['" + i + "'] = " + obj[i] + "<br>";
}
}
populateMenu(key);
document.onkeypress = getKey;
</script>
</html>
It looks like could achieve this with arbitrary list of sites. If so, you could handle this a little more generically by providing a list of sites and filtering the sites based on keystrokes.
If so, you can achieve it with the following:
const sites = [
'https://www.arstechnica.com',
'https://www.google.com',
'https://mail.google.com',
'https://slashdot.org',
'https://spotify.com',
'http://www.yahoo.com',
];
let matches = sites;
document.getElementById('keys').addEventListener('keyup', event => {
const keys = event.target.value.toLowerCase().split('');
matches = sites
.map(site => ({ site, stripped: site.replace(/^https?:\/\/(www\.)?/i, '')})) // strip out https://wwww. prefix
.filter(site => isMatch(site.stripped, keys))
.map(site => site.site);
if (event.keyCode === 13) {
if (matches.length === 0) {
alert('No matches');
} else if (matches.length === 1) {
alert(`launching ${matches[0]}`);
} else {
alert('More than one match found');
}
matches = sites;
}
document.getElementById('matches').textContent = matches.join(', ');
});
// find sites matching keys
function isMatch(site, keys) {
if (keys.length === 0) return true;
if (site.indexOf(keys[0]) !== 0) return false;
let startIndex = 1;
for (let i = 1; i < keys.length; i++) {
let index = site.indexOf(keys[i], startIndex);
if (index === -1) return false;
startIndex = index + 1;
}
return true;
}
document.getElementById('matches').textContent = matches.join(', ');
<div>Keys: <input type="text" id="keys" autocomplete="off" /> press Enter to launch.</div>
<p>Matches: <span id="matches" /></p>
The key parts to this are:
Define a list of sites you want to handle
Ignore the the https://wwww prefixes which is achieved with site.replace(/^https?:\/\/(www\.)?/i, '')
Implement filter logic (in this case it is the isMatch method) which tries to match multiple keystrokes
For demonstration purposes, I've wired keyup to an input field instead of document so that you can see it in action, and the action is triggered with the enter/return key.
In a c# MVC project, I was given a view by a front-end designer that contains this little script:
<script>
$('#PhaseDD').change(function () {
var chosenValue = $(this).val();
$('.ProcessDD').hide();
if (chosenValue == "")
$('#DefaultProcess').show();
if (chosenValue == "Planning")
$('#PlanningProcess').show();
if (chosenValue == "Procurement")
$('#ProcurementProcess').show();
if (chosenValue == "Installation")
$('#InstallationProcess').show();
if (chosenValue == "Closure")
$('#ClosureProcess').show();
});
</script>
I would like to replace all the hard-coded options with a list that comes from the model. Something like this...
<script>
$('#PhaseDD').change(function () {
var chosenValue = $(this).val();
$('.ProcessDD').hide();
if (chosenValue == "")
$('#DefaultProcess').show();
// loop over a list from the model here
if (chosenValue == " loop-item-name ")
$('# loop-item-name + Process').show();
// end loop
});
</script>
Is this possible? If so, how? And am I even going about this the right way? I was thinking I could use razor syntax, but that isn't working.
You can not compare a C# variable to a JS variable. But you can use razor to create a JS variable from a C# variable.
Here is how to fill a JS array with the values of a C# array:
#{
// fetch this from ViewModel if it needs to be dynamic
var cSharpNames = new [] { "Planning", "Procurement"};
}
<script>
var jsNames = []; // this is a JS array
#foreach(var name in cSharpNames) {
<text>jsNames.push(#name);</text>
}
</script>
Then use the indexOf() method to search in the jsNames array as has been shown by Jeremy.
I'd just make an array, check to see if the value exists within it, and if it does show it. Something like this:
<script>
$('#PhaseDD').change(function () {
var chosenValue = $(this).val();
var processes = ['Planning', 'Procurement'];
$('.ProcessDD').hide();
if (chosenValue == "")
$('#DefaultProcess').show();
if (processes.indexOf(chosenValue) > -1)
$('#' + chosenValue + 'Process').show();
});
</script>
I was overthinking this.
$('#PhaseDD').change(function () {
var chosenValue = $(this).val();
$('.ProcessDD').hide();
if (chosenValue == "")
{
$('#DefaultProcess').show();
}
else
{
$('#' + chosenValue + 'Process').show();
}
});
I have some problem with redirecting urls after checkboxes are selected. I am using document.location for this, but this doesn´t work in my code. I'm trying to fix it, but without success.
This is the part of my code which doesn't work:
function objednat() {
var adress = "";
if (document.getelementbyid('BoxtarifVolani1').checked == true) {
adress += "#tarifVolani1";
}
window.location = 'http://www.investcon.webinpage.cz/cz/objednat-tarif-dobijeci-cislo/' + adresa;
}
I want to redirect this to a form, which will be filled with the selected values. I don't know why, but this document.location doesn't work in the code.
This is the part of the code I use in the formula for grabbing the hash from the url.
<script type="text/javascript">
if(window.location.hash) {
//set the value as a variable, and remove the #
var hash_value = window.location.hash.replace('#', '');
if (tarifVolani1 == true) {
document.getelementbyid('BoxtarifVolani1").checked = true;}
....
</script>
What am I doing wrong?
Whatever you have done is right, except, the function name is wrong case:
Change getelementbyid to getElementById.
Change adresa to adress.
Code:
function objednat() {
var adress = "";
if (document.getElementById('BoxtarifVolani1').checked == true) {
adress += "#tarifVolani1";
}
window.location = 'http://www.investcon.webinpage.cz/cz/objednat-tarif-dobijeci-cislo/' + adress;
}
jQuery way of doing it
function objednat() {
var adress = "";
if ($('#BoxtarifVolani1').is(':checked')) {
adress += "#tarifVolani1";
}
window.location = 'http://www.investcon.webinpage.cz/cz/objednat-tarif-dobijeci-cislo/'+adress;
}
For your ref: jQuery :checked Selector
// Function for setting text of an element:
function setText(elementId, message)
{
'use strict';
if ( (typeof elementId == 'string')&& (typeof message == 'string') )
{
var output = $(elementId);
if (output.textContent !== undefined)
{
output.textContent = $(elementId).string;
}
else
{
output.innerText =$(elementId).string ;
}
} // End of main if.
} // End of setText() function.
I need help with this code, I need to define a function name the setText() function as shown below, when I run this code in JS Bin the page shows the code won't run, I couldn't find where the error is. Can anyone give me a hint?
Your type checking for message is unnecessary, but in case you want to keep it:
function setText(elementId, message){
if((typeof elementId == 'string') && (typeof message == 'string')){
document.getElementById(elementId).innerHTML = message;
}
}
setText("foo", "1")
setText("foobar", "2")
setText("bar", "3")
setText("barfoo", "4")
<p id="foo"></p>
<p id="foobar"></p>
<p id="bar"></p>
<p id="barfoo"></p>
You can do it using JavaScript prototypical way. This is little advanced.
HTML:
<span id="spanText"> Your sample Text </span>
First of all augment the type by this code:
/*
Augmenting type
*/
Function.prototype.addMethod = function(funcName, funcBody){
if(!this.prototype[funcName]){
this.prototype[funcName] = funcBody;
return this;
}};
String.addMethod("setText", function(text){
document.getElementById(this).textContent = text;
});
var elementId = "spanText";
elementId.setText("kkkkkkkkkkk");
Load this JS below your HTML file.
You are able to add any of your custom string, number, array method by this way.
See the complete example here:
https://jsfiddle.net/dmsbilas/wu3cd88w/
Hello I'm using this function as an address book module, for selecting any employee from the sidebar it display all the content of the employee. It works fine in Chrome but not in IE. I'm not able to run the src variables declared in this function in IE. Please suggest me some other ways to declare these type of variables so that these will be compatible to all browsers.
function singleSelect(id)
{
if(flag){
unCheckAll();
userIds="";
//userIds= document.forms['frmSidebarSearch'].elements['userIds'].value + id +",";
var src = ($("#"+id).attr("src") === "<#core.basePath/>images/chk-box-img.gif")
? "<#core.basePath/>images/chk-box-img-tick.gif"
: "<#core.basePath/>images/chk-box-img.gif";
$("#"+id).attr("src",src);
var src2 = ($("#anchor"+id).attr("class") === "")
? "selected"
: "";
$("#anchor"+id).removeClass().addClass(src2);
var elementss = document.getElementById("all").getElementsByTagName('img');
for(i=0;i<elementss.length;i++) {
if($("#"+elementss[i].id).attr("src") === "<#core.basePath/>images/chk-box-img-tick.gif"){
userIds= userIds +"," +elementss[i].id;
}
}
unHilightAll();
highLightIndex(id);
document.forms['frmSidebarSearch'].elements['userIds'].value=userIds;
$('#frmSidebarSearch').ajaxSubmit({target:'#content',url:'<#core.basePath/>sp/manager/manageraddressbook/manager/'+id});
}
flag = true;
}
Have you tried it with double equals (I think triple equals sign is only in languages like php).
(condition == condition) ? true : false;