Develop Reference

Javascript: are some things too simple to link externally? [duplicate]

This question already has answers here:
When to use onclick in HTML?
(3 answers)
Closed 4 years ago.
I'm really new to JavaScript. So this might be a basic question? I would just like some explanation, if possible.
I'm working on some web development that has JS. However, I have the requirement that all files (JS and CSS) have to be linked through external sheets, and with complex functions that makes sense, but with some of the simple JS I'm a little confused as to what that means.
With CSS, you can do inline styling, or in the header in style tags, or in an external sheet. There are some JS interactions where I can't tell if it has to be where it is, or if there is a way to move it to an external sheet.
For Example, this basic "bulb on/off"
The js here is onclick=document.getElementById(...) (Changing an image by clicking on it/on a button)
Is this kind of code stuff that can even go in an external sheet? is my internal analogy of inline/tags/external CSS fitting to apply to Javascript, too, or does JS work differently? I just don't want to get counted off for not having stuff in the right place.

What you need to understand is that the "scope" of what you are working with when you use JavaScript, is the user's viewport. Internally represented as a tree of objects which we call the DOM (document object model). The browser fetches these external sheets, JavaScript files, html etc. and then loads them into the DOM.
JavaScript is all about just one thing: manipulating the DOM.
Depending on when your JavaScript is executed, it will manipulate the DOM in the state it is in at that exact moment.
The usual moment that programmers choose to execute their code is right after DOM-ready. This is a moment in time after which all external pieces of code/styling etc. have been fetched and initialized into the DOM, therefore allowing you to be sure, that your code is working against the full scope of content that you'd also see while browsing the page right after it loads.
Zooming in on your question about placing code in an external file: sure, its possible. As at one point this file would be imported and loaded into the DOM. The code inside would be executed at the point where this file is loaded, or when you hook into the DOM-ready event to start up the code inside this file.

You have a legitimate question here (apologies for the opinion - but good on you for giving it a go!).
This is from the Mozilla developer page (https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
Next, in your index.html file enter the following element on a new
line just before the closing tag:
<script src="scripts/main.js"></script>
This is basically doing the same job as the element for CSS — it applies the JavaScript to the page,
so it can have an effect on the HTML (along with the CSS, and anything else on the page).
In your sample code you wrote onclick=document.getElementById(...).
This should actually be written as
onclick=function() {
document.getElementById(...)...
}

HTML + CSS rendering issue [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Spent the past couple days pulling my hair out and on the road to a brain aneurysm over this.
I've created an HTML + CSS template for Ebay which looks great. Although it does not have the CSS rendered until you refresh the page after you initially open it.
To keep things simple and I'll post the exact test code im using for Ebay:
After its posted and the page is initially opened you see no CSS then the refresh makes the CSS render:
I have a professional page for a product im selling and this obviously wont fly.
This completely baffles me. Ive done everything. All browsers. Hosting the CSS on another site and pointing to it. Nothing works.
Really, anything that can in someway help would be deeply appreciated.Ill keep checking on this post every few hours.

Try using inline styles instead.
<p style="border: 1px groove black;">Thingy</p>

There is a known issue I have come across that causes problems:
When you first load an un-cached item, it loads the item's code directly within eBay. Upon refresh, it loads the item within an iframe (normal behaviour)
The first load causes issues as it carried css from the eBay main page style sheets.
try be more accurate and include a wrapper div and then style with .wrapper p {}
Also, link to an external style sheet to make your life easier updating!

Its from the wrong format/wording used in the inline style. Although they both work, it does not explain how one needs a refresh while the other does not.

You said:
it does not have the CSS rendered until you refresh the page after you initially open it.
This is maybe related to a eBay page load behavior. When you come from an external site (like pasting the eBay link to your browser) then eBay will load the page and will add their own CSS to your HTML tags. When you reload the page then eBay jumps into iframe mode and your Style elements are used.
Check topic #6 here: http://www.fix-css.com/2014/06/ebay-templates-coding-guide/

try to add border-width p{border:1px groove;}

Dynamically loading content on local HTML page [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Context:
Basically I'm attaching a little HTML help doc to go with my program (not meant to be on a server, viewed locally). HTML just because I'm most comfortable in making docs in it but I also want it to have some interactivity/dynamic content which I can't do in a PDF or whatever.
I'm dynamically replacing the content when you click on a link instead of making every page need it's own HTML page, which is just something I'm used to doing so I can change the menu and banner and whatever else on a single 'main' html file without having to adjust every single other html file for one tiny change in the shared stuff.
Current Method:
Right now it's all done through javascript and jQuery. When a user clicks a link, I use jQuery's load() function to load the appropriate content (an html file) and replace the content div with what's in the loaded html file. Currently just using relative links. E.g. the core function is something like below:
$("#ContentBox").load("content/faq.html");
This actually worked a few weeks ago when I first wrote it. It's not like I built the whole thing and didn't test its core concept until just now. But now it seems all the browsers are blocking it. Chrome says:
XMLHttpRequest cannot load file:///C:/[....]/content/home.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource. `
Question:
So I understand why it's happening as it's a potential security risk to allow that, I just want to figure a good way around it that still does what I want (if it's possible). I mean I could just preload all the content as huge string variables in the javascript file or as hidden divs that get turned on and off, but I was hoping for something a little more elegant.
And I can't expect all users of my program to setup a local web server just to view to help doc.
I've considered the File and FileReader classes but they require a user input for a lot of functions. There's also iFrames but that introduces all sorts of weirdness that needs to be accounted for and I hate iFrames.

If this is all local content then you should not be loading it via ajax. One option you have at your disposal is to set up your help files as local Javascript templates. You can then refer to them using a template library like mustache or underscore and link to them in your application like so:
<script type="text/template" src="local/helpfile.js" />
If you don't want to use a templating library then you can set up helpfile.js as JSON data, but you'll need to escape quote characters first.

If your help docs are to be viewed on a Windows machine only, you should look into using HTML Applications to get rid of the cross-origin issues. Or you can work around it by combining all of the source code files in hidden textareas. I've done it lol

To anyone still interested this is the solution I settled on as of now. At the end of the body are all the divs with the different page content styled like so:
<div id='PageName' class='content-div'>
<!-- content goes here -->
</div>
<div id='AnotherPage' class='content-div'>
<!-- content goes here -->
</div>
The id is important as that becomes the name of the page and the class type, which you can name whatever, I used to hide them with visibility:hidden; as well as gave it absolute positioning at 0,0 - just in case - so that they don't interact with other elements and screw up the layout.
On the page loading, along with a bunch of other functions, I store the elements into a javascript associative object by page name.
var content = {};
function onLoadThisGetsCalledSomewhere() {
// loop through all of those divs
$(".div-content").each(
function() {
// using $(this) to grab the div in the scope of the function here
var element = $(this).element;
var name = $(this).attr('id');
// remove it from the html (now it exists only in the content object)
element.detach();
// remove that style class that makes it invisible
element.removeClass('content-div');
// put it into memory
content[name] = element;
}
);
}
So when a link to another page is clicked, the onclick does something like switchPage(pageName) let's say.
function switchPage(requestedPage) :
// somewhat simplified, real version has case and null checks that take you to 404 page
var contentElement = content[requestedPage];
// replace content in some container div where you want content to go
$("#TheContentContainer").empty().append( contentElement );
// have to adjust size (width possibly too but I had a fixed width)
$("#TheContentContainer").height( contentElement.height() );
}
I'm not at the same computer so I'm writing all this up anew, not copy/pasting so there may be some bugs/typos (Caveat emptor - I'll fix it tomorrow). The version I used is somewhat more complicated as well since I have subpages as well as dynamically handled menu bar changes. Also features so that you can open the "links" correctly in new windows/tabs if such an action is made. But that's not important here now.
It's not too different I suppose with hidden divs (the benefit here is the detach() function to remove it from the html) or just storing long strings of html code in java vars (much more readable than that though), but I think it's advantage is is much cleaner (IMHO) and so far I like it. The one downside is with lots of pages you get one huge HTML doc that can be a pain to go through to edit one specific page but any decent editor should have a bookmark feature to make it a little easier to get to the line you're looking for. Also cause of that a bad idea if not local, but then again if it's online just use the jQuery load() function.

Changing the Title of a Web Page Using Javascript [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to dynamically change a web page's title?
I am trying to set the title of my web page using JavaScript because I want something that is stored in localStorage to be part of the title. The approach that I am trying is to use document.createElement('title'), but I cannot set the text of the title when I do that. Is there a way to set the text of the title this way or is there a different way that I should be doing this?

Use
document.title = 'Your desired title';

Your site should have a <title> element
If it does, you simply add this to your scripts and call it
function changeTitle(title) { document.title = title; }

The question is why are you doing it?
You can just do something like, document.title = "This is the new page title.";, but this would not work for seo etc, as most crawlers do not support JavaScript.
If you want this to be compatible with most of the important crawlers, you're going to need to actually change the title tag itself, on the server side which would involve (PHP, or the like).

How does GMAIL have a favicon that shows an unread message count? [duplicate]

This question already has answers here:
Changing website favicon dynamically
(18 answers)
Closed 6 years ago.
GMAIL in chrome has a favicon that shows an unread message count. Does anyone know how they do that? Is that them changing images? Or is there a property that allows you to set the number near the favicon?
Thanks

I am not 100% certain on how Google accomplishes this however, someone created a UserScript to mimic the functionality. You can view the source code of this script and see how they accomplished it.
http://userscripts.org/scripts/review/39432
EDIT
I'm including this resource since userscripts is no longer around:
http://lab.ejci.net/favico.js/
on github
https://github.com/ejci/favico.js

They use different images for counter icons, They have one default favicon and use javascript to update as new email arrives.
e.g.
https://mail.google.com/mail/u/1/images/2/unreadcountfavicon/0.png
https://mail.google.com/mail/u/1/images/2/unreadcountfavicon/1.png
https://mail.google.com/mail/u/1/images/2/unreadcountfavicon/2.png
https://mail.google.com/mail/u/1/images/2/unreadcountfavicon/3.png
https://mail.google.com/mail/u/1/images/2/unreadcountfavicon/n.png

There's no property that sets a number next to the favicon, but you can change it in javascript. Check out this question
Changing website favicon dynamically

I don't know how Google did it, but the way I did it way:
$('body').append($('<link rel="icon" type="image/ico" href="http://localhost/myfavicon.ico"/>'))
As needed.

I have no clue how they do it, but there's no reason you can't have your /faveicon.ico be responded to by a dynamic server-side script which generates/provides certain content based on information of the user in question.
That said... I don't think most browsers would get the updated Faveicon usually, as most seem to only check it once per session.