I have two domains and both have the same web page. Same HTML CSS and content.
foo.com and bar.com
Both websites reside in the same hosting and return the same files. This way I don't have to duplicate the changes in both domains. I just edit one file and both domains are updated.
Now I want to change some colors on foo.com and hide some elements on bar.com but still don't want to duplicate the website.
I want a JavaScript code snippet that can detect the current URL of the page and add class to the body. It would be nice if there is something that can detect only domain.
Try this..
if(window.location.href == 'https://stacksnippets.net/js'){
$("#demo").addClass('demoClass');
}
.demoClass{
color: green;
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="demo">Color changed as per url change</p>
put below in script at the end of body:
You can use jquery as well. In short use documet/winod load event to put your host based logic.
window.addEventListener('load', function() {
var isFoo = window.location.href.indexOf('foo.com') > -1;
var body = document.getElementsByTagName("body")[0];
var class = isFoo ? 'foo-class' : 'bar-class';
body.className = body.className + ' '+ class;
})
Try using Window.location in javascript. Add some custom logic aswell.
// Get the current browser url.
const url = window.location.href;
console.log(url);
// Selecting the body tag
const body = document.getElementsByTagName("BODY")[0];
// Adding a custom check to check whether the url contains our domain.
if (url.indexOf('stacksnippets') > -1) {
body.className += ' class-one';
} else {
body.className += ' class-two';
}
.class-one {
color: blue;
}
.class-two {
color: green;
}
<body>
<h2>JavaScript</h2>
<h3>The window.location object</h3>
</body>
Related
I have no clue what I'm doing wrong. It works it just shows the popup for a split second. Would a timeout option be better? Which part is the problem? I'm a little new to Javascript so I don't really know what to exactly look for.
<script language="javascript" type="text/javascript">
/** Create a html cookie and set expiry as a day. **/
function createCookie(name,value,days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = date.toGMTString();
document.cookie = name+"="+value+"; expires="+expires+"; path=/";
}
/** Check if already a cookie has been created. **/
function readCookie(name) {
var flag = 0;
var dcmntCookie = document.cookie.split(';');
for(var i=0;i < dcmntCookie.length;i++) {
var ck = dcmntCookie[i];
while (ck.charAt(0)==' ') {
ck = ck.substring(1,ck.length);
}
if(ck) {
cparts = ck.split('=');
if (cparts[0] == name) flag=1;
}
}
if(flag) {
return true;
} else {
return false;
}
}
/** Check if cookie exists else create a new one. **/
function checkCookie(name) {
if (readCookie(name)) {
document.getElementById('google').style.display = "none";
document.getElementById('google').style.visibility = "hidden";
}
else createCookie(name,"cookie 4 the day",1);
}
</script>
<script type="text/javascript">
function closeThisDiv()
{
var openDiv = document.getElementById('google');
openDiv.style.display = 'none';
}
</script>
<body onLoad="checkCookie('MyCookie')"
If your goal is to have the element with id="google" to be hidden from the very beginning of the page display (so it never shows), then you should add a CSS rule that loads in the head section like this:
#google {display: none;}
Or, you should add a style element to the HTML itself:
<div id="google" style="display:none"></div>
As your code is currently written, it sounds like it is doing what it is supposed to. It waits for the entire document to be loaded (including images) and then it hides the element with id="google". That means the item will show briefly while the page is loading and then your code will hide it.
If you can't modify the CSS or the HTML for the google object and you're just trying to hide it as soon as possible with javascript and the google object is present in the HTML of your page (not added programmatically), then you can do this:
<body>
other HTML here
<script>
// script that executes right before the /body tag
checkCookie("MyCookie")
</script>
</body>
This will at least not wait for all images to load before hiding it.
I fixed it like this:
Create a css property of display:none; for #google
#google{display:none;}
Then switch around the last portion of code to display only if they don't have the cookie, and to create the cookie.
/** Check if cookie exists else create a new one. **/
function checkCookie(name) {
if (readCookie(name)) {
}
else document.getElementById('google').style.display = "inline";
document.getElementById('google').style.visibility = "visibility";
createCookie(name,"cookie 4 the day",1);
In case anyone runs into this problem. Worked great for me.
The following HTML displays a fancy font on my site, due some alterations I made to <h2>
<section id="content">
<article>
<h2 id="titletext">Welcome to <span>Pomona High School!</span></h2>
<p id="infotext" style="width: 773px; height: 28px;" >Welcome to the new Pomona High School site! Please give us feedback!</p>
<br />
</article>
</section>
This displays quite fine in the site.
When the user now goes to the taskbar and chooses one of the submenu items, the <h2> text will change to a specified string value. I went into the Javascript editor and produced the following.
window.onhashchange = function() { //when the hash changes (the '#' part)
var loc = window.location + ""; //get the current location (from the address bar)
var curHash = loc.substr(loc.lastIndexOf("#")); //get what's after the '#'
if (curHash == "#mission") { //else if it's #mission
document.getElementById('titletext').innerHTML = 'Mission Statement';
}
else {
document.getElementById('titletext').innerHTML = 'Welcome to Pomona High School';
}
};
Linking one of the menu items to #mission, I was succesful in changing the text. But the font changed to the default <h2> font.
I need help on how to bring my custom font onto strings in Javascript. Thanks in advance!
CSS stylsheet for <h2>:
h2 {
font-size: 30px;
line-height: 1.2em;
font-weight: normal;
color: #212222;
margin-bottom: 22px;
}
h2 span {
color: #8a8a8a;
}
And here's the two custom font files (too big to copy and paste to Stack Overflow):-
Regular Font
Light Font
Your code is actually replacing
Welcome to <span>Pomona High School!</span>
with
Welcome to Pomona High School!
Notice, no element. Just set it with the span tag, and you will be fine.
Source: MDN Docs
Here's what MDN has to say about this:
The hashchange event fires when a window's hash changes (see
location.hash).
Syntax:-
window.onhashchange = funcRef;
<body onhashchange="funcRef();">
window.addEventListener("hashchange", funcRef, false);
I think that passing function() { ... } is a function reference but could you try defining the function first and then passing a named reference? The code would go:
function hashChange() { //when the hash changes (the '#' part)
var loc = window.location + ""; //get the current location (from the address bar)
var curHash = loc.substr(loc.lastIndexOf("#")); //get what's after the '#'
if (curHash == "#mission") { //else if it's #mission
document.getElementById('titletext').innerHTML = 'Mission Statement';
}
else {
document.getElementById('titletext').innerHTML = 'Welcome to Pomona High School';
}
};
window.onhashchange = hashChange;
OK, I'm confused. There must be something else going on as it's working for me in this JSFiddle...
Your code removes the <span> in the <h2> on hash change which was presumably giving the styling. So it should really be:
window.onhashchange = function() { //when the hash changes (the '#' part)
var loc = window.location + ""; //get the current location (from the address bar)
var curHash = loc.substr(loc.lastIndexOf("#")); //get what's after the '#'
if (curHash == "#mission") { //else if it's #mission
document.getElementById('titletext').innerHTML = '<span>Mission Statement</span>';
}
else {
document.getElementById('titletext').innerHTML = 'Welcome to <span>Pomona High School</span>';
}
}
Also, I think you're mixing up the if and else statements. This:
else if(curHash == "#mission") {
...
}
else {
...
}
should really be:
if(curHash == "#mission") {
...
}
else if {
...
}
What I'm trying to achieve:
Based on URL (ie., foo.com/item1), the div element "logoswap" receives a different class.
The following is the code I put together but it seems completely wrong. I'm not a JS pro by any means, XHTML/CSS is more my speed (some PHP)... I cannot use PHP, even if it is possible in PHP (and I know it is because I have a PHP version of what I need done already, but I can't call the PHP properly.
I'm really just trying to get a different logo to show up based on the directory/url... It doesn't have to be a background element called in by the CSS class necessarily, I just need a different image to load based on the aforementioned url variable...
$(function() {
var url = location.pathname;
if(url.indexOf('item1') > -1) {
document.getElementById("logoswap").className += " class1";
}
elseif(url.indexOf('item2') > -1) {
document.getElementById("logoswap").className += "class2";
}
elseif(url.indexOf('item3') > -1) {
document.getElementById("logoswap").className += "class3";
}
elseif(url.indexOf('item4') > -1) {
document.getElementById("logoswap").className += "class4";
}
elseif(url.indexOf('item5') > -1) {
document.getElementById("logoswap").className += "class5";
}
else {
document.getElementById("logoswap").className += "class1";
}
});
That's what I have... Ugly I'm sure.
That's why I'm here though, I definitely need some help.
Assigning CSS Class By URL Pathname
A jsfiddle has been setup for
this solution.
Here is a case for using numeric expressions if they are available. This does not apply to the above question.
$(function() {
var rgx = /item(\d+)$/,
url = location.pathname,
id = (rgx.test(url)) ? url.match(rgx)[1] : '1';
$("#logoswap").addClass("class" + id);
});
UPDATE:
In light of the new details you may need an array of values, these should be derived from or exactly equal to the class names you intend to use.
$(function(){
// my favorite way to make string arrays.
var matches = "brand1 brand2 brand3".split(" "),
url = location.pathname.match(/\w+$/)[0], // get the last item
id = matches.indexOf(url),
className = matches[(id > -1) ? id : 0];
$("#logoswap").addClass(className);
});
To make this work you will need a few things in place. I will assume that the paths will end in a number as we have outlined here. The default ends with 1. You will need the images to be accessible. You need to define the styles for each possibility.
CSS Setup
#logoswap {
height : 200px;
width : 200px;
}
.class1 {
background-image : url(/path/to/default.jpg);
}
.class2 {
background-image : url(/path/to/second.jpg);
}
.brand1 {
background-image : url(/path/to/brand/1/logo.jpg);
}
...
Without jQuery
if you do not have jQuery in your code you may need to use window.onload.
(function(){
var old = window.onload;
window.onload = function(){
old();
var r = /item(\d+)$/,
url = location.pathname,
id = (r.test(url)) ? url.match(r)[1] : '1';
document.getElementById('logoswap').className += "class" + id;
};
})()
I just want to take a moment here to
encourage anyone who is doing this
type of code to get used to Regular
Expressions and learn them. They are
far and away the most frequently used
cross language part of my development
arsenal.
There's nothing that wrong with what you have. You could tidy it up with something like below.
$(function() {
var url = location.pathname;
var logo = document.getElementById("logoswap");
var i = 6;
logo.className = "class1";
while(i--)
{
if(url.indexOf("item" + i) > -1) {
logo.className = "class" + i;
}
}
});
Hope this helps.
Using just HTML/CSS, you could add (or append via javascript) an id to the body of the page:
<body id="item1">
Then in your CSS, create a selector:
#item1 #logoswap {
// class1 CSS
}
I have a function doing the following using javascript:
Create link element and set href=cssFile.
Insert the link element in head tag.
Create a div element.
Set the class name using setAttribute
appendChild the div on body.
Now getting CSS rule value using document.defaultView.getComputedStyle(divElement, null)[cssRule].
Now getComputedStyle is returning the default values, and if I wait on breakpoint using Firebug before getComputedStyle call, then it returns the CSS rule from the CSS injected.
Regards,
Munim
You can create the dynamic css url and fetch the css as plain text using a normal ajax call.
Then use this to load the css:
function loadCss(cssText, callback){
var style = document.createElement('style');
style.type='text/css';
if(callBack != undefined){
style.onload = function(){
callBack();
};
}
style.innerHTML = cssText;
head.appendChild(style);
}
And use it like this:
loadCss(ajaxResponseText, function(){
console.log("yaay css loaded, now i can access css defs");
})
This is actually what I did.
To ensure a specific CSS file is loaded, I added a style in the end of the CSS file. For example:
#ensure-cssload-8473649 {
display: none
}
Now I have a JavaScript function which will fire the callback specified when the above style is loaded on the page:
var onCssLoad = function (options, callback) {
var body = $("body");
var div = document.createElement(constants.TAG_DIV);
for (var key in options) {
if (options.hasOwnProperty(key)) {
if (key.toLowerCase() === "css") {
continue;
}
div[key] = options[key];
}
}
var css = options.css;
if (css) {
body.appendChild(div);
var handle = -1;
handle = window.setInterval(function () {
var match = true;
for (var key in css) {
if (css.hasOwnProperty(key)) {
match = match && utils.getStyle(div, key) === css[key];
}
}
if (match === true) {
window.clearTimeout(handle);
body.removeChild(div);
callback();
}
}, 100);
}
}
And this is how I used the function above:
onCssLoad({
"id": "ensure-cssload-8473649",
css: {
display: "none"
}
}, function () {
// code when you want to execute
// after your CSS file is loaded
});
Here the 1st parameter takes the options where id is to check against the test style and css property to verify against what loaded from the CSS.
I assume you are doing this because you need to dynamically create the URL of the stylesheet.
Couple options come to mind:
1) Create the URL server-side and avoid this problem altogether.
2) Use a setTimeout to check whether or not the style has been loaded and check every 20ms or so until getComputedStyle returns the value you want.
I don't like #2 at all...but it's an option. If you use #2 make sure to clear the timeout even if there is an exception.
Here is a solution that seems to work across all browsers.
function loadCss(fileUrl) {
// check for css file type
if (fileUrl.indexOf(".css")==fileUrl.length-4) {
// Create link element
var fileref=document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", fileUrl);
if (typeof fileref!="undefined") {
// remove the . if this is a relative link
if(fileUrl.indexOf('.')==0) {
fileUrl = fileUrl.substr(1);
}
// generate the full URL to use as the fileId
var pathname = window.location.pathname;
var pathUrl = pathname.substr(0,pathname.lastIndexOf("/"));
var fileId = window.location.protocol + "//" + window.location.host + pathUrl + fileUrl;
// append the newly created link tag to the head of the document
document.getElementsByTagName("head")[0].appendChild(fileref);
// begin checking for completion (100ms intervals up to 2000ms)
this.checkCSSLoaded(fileId,100,0,2000);
} else throw 'INVALID_CSS_ERROR';
} else throw 'INVALID_CSS_ERROR';
}
function checkCSSLoaded(cssHref,milliPerCheck,milliPerCount,milliTimeout) {
// Look through all sheets and try to find the cssHref
var atSheet = -1;
var sheetLength = document.styleSheets.length;
while(++atSheet < sheetLength ) {
if(cssHref == document.styleSheets[atSheet].href) {
// If found dispatch and event or call a procedure
/* Do whatever is next in your code here */
return;
}
}
// check for timeout
if(milliCount > milliTimeout) {
alert('INVALID_CSS_ERROR::'+" ("+cssHref+"+ not found!");
/* Do whatever happens if timeout is reached here */
return;
}
// else keep trying
setTimeout(checkCSSLoaded ,milliPerCheck, cssHref, milliPerCheck, milliCount+millPerCheck, milliTimeout);
}
Essentially we
Create a link tag.
Set its attributes so it knows its a stylesheet link tag
Create a file id in such a way that it will always be the full file URL
Append the link tag to the head of the document head
Perform consecutive tests to see if (stylesheet.href == fileID) comes into existence
If found do something else if timeout do something else keep checking
Using document.styleSheets to check if a css is loaded is wrong, since as soon as a css link is being added to the DOM, it will be available from document.styleSheets, even if it is not loaded yet.
Adding a marker to CSS is hacky too.
The correct solution is to listen to the onload event :
var loadedCss = {};
cssHref = "http://www.foo.com/bar.css";
css = document.createElement("link");
css.setAttribute("rel", "stylesheet");
css.setAttribute("type", "text/css");
css.setAttribute("href", cssHref);
css.onload = function(){
loadedCss[cssHref] = true;
}
document.getElementsByTagName("head")[0].appendChild(css);
function isCssLoaded(url) {
return loadCss[url];
}
I have an iframe and couple of tables on my aspx page. Now when the page loads these tables are hidden. The iframe is used to upload file to database. Depending on the result of the event I have to show a particular table on my main page (these tables basically have "Retry","next" buttons...depending on whether or not the file is uploaded I have to show respective button).
Now I have a JavaScript on the "onload" event of the iframe where I am hiding these tables to start with. When the control comes back after the event I show a particular table. But then the iframe loads again and the tables are hidden. Can any one help me with this problem. I don't want the iframe to load the second time.
Thanks
mmm you said you're on aspx page,
I suppose that the iframe do a postback, so for this it reload the page.
If you can't avoid the postback, you've to set a flag on the main page just before posting back, and check against that while you're loading...
...something like:
mainpage.waitTillPostBack = true
YourFunctionCausingPostBack();
..
onload=function(){
if(!mainpage.waitTillPostBack){
hideTables();
}
mainpage.waitTillPostBack = false;
}
I am not sure what your problem is, but perhaps your approach should be a little different. Try putting code into the iframe what would call functions of the parent. These functions would display the proper table:
<!-- in the main page --->
function showTable1() {}
<!-- in the iframe -->
window.onload = function () {
parent.showTable1();
}
This would put a lot of control into your iframe, away from the main page.
I don't have enough specifics from your question to determine if the iframe second load can be prevented. But I would suggest using a javascript variable to check if the iframe is being loaded a second time and in that case skip the logic for hiding the tables,
This is my code
function initUpload()
{
//alert("IFrame loads");
_divFrame = document.getElementById('divFrame');
_divUploadMessage = document.getElementById('divUploadMessage');
_divUploadProgress = document.getElementById('divUploadProgress');
_ifrFile = document.getElementById('ifrFile');
_tbRetry = document.getElementById('tbRetry');
_tbNext=document.getElementById('tblNext');
_tbRetry.style.display='none';
_tbNext.style.display='none';
var btnUpload = _ifrFile.contentWindow.document.getElementById('btnUpload');
btnUpload.onclick = function(event)
{
var myFile = _ifrFile.contentWindow.document.getElementById('myFile');
//Baisic validation
_divUploadMessage.style.display = 'none';
if (myFile.value.length == 0)
{
_divUploadMessage.innerHTML = '<span style=\"color:#ff0000\">Please select a file.</span>';
_divUploadMessage.style.display = '';
myFile.focus();
return;
}
var regExp = /^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.doc|.txt|.xls|.docx |.xlsx)$/;
if (!regExp.test(myFile.value)) //Somehow the expression does not work in Opera
{
_divUploadMessage.innerHTML = '<span style=\"color:#ff0000\">Invalid file type. Only supports doc, txt, xls.</span>';
_divUploadMessage.style.display = '';
myFile.focus();
return;
}
_ifrFile.contentWindow.document.getElementById('Upload').submit();
_divFrame.style.display = 'none';
}
}
function UploadComplete(message, isError)
{
alert(message);
//alert(isError);
clearUploadProgress();
if (_UploadProgressTimer)
{
clearTimeout(_UploadProgressTimer);
}
_divUploadProgress.style.display = 'none';
_divUploadMessage.style.display = 'none';
_divFrame.style.display = 'none';
_tbNext.style.display='';
if (message.length)
{
var color = (isError) ? '#008000' : '#ff0000';
_divUploadMessage.innerHTML = '<span style=\"color:' + color + '\;font-weight:bold">' + message + '</span>';
_divUploadMessage.style.display = '';
_tbNext.style.display='';
_tbRetry.style.display='none';
}
}
tblRetry and tblNext are the tables that I want to display depending on the result of the event.