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).
Related
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.
This question already has answers here:
How to apply CSS to iframe?
(28 answers)
Closed 8 years ago.
have one question, i trapped in a prob..The problem is like that --->I have to manipulate the css of inner html of iframe but the content of this iframe is not coming from same domain so how can it makes possible
live eg.-u can take ("tweets feed in our website ,it comes from another domain tweeter.com/bla....blaa but render on our web page encapsulate with iframe,so how can i style tweet section in our website")
i have tried by jQuery but its not working can u plz help me out in that ?
Thanks in advance Smile | :)
The comment by Sico refers to an existing question on stack that answers this as not possible. How to change style of iframe content cross-domain?
If you are looking to do this in Javascript or JQuery that answer is correct, basically. You Cannot. It is not possible to alter the content of another domain.
A solution however, would be to use PHP to fetch the content of the target page and make it your own, there are several ways to do this such as curl http://php.net/manual/en/book.curl.php. You can then redisplay that content in any manner you like and apply any style you like. You can even ditch the iframe and inline it right into the rest of your content.
Be warned however, depending on the source domain, they may not approve of their content being re-used in this manner.
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.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How do I change the text of a span element in javascript
Well, I've searched a lot for the answer to this, but still I couldn't find it. What I did find didn't work.
What I'm trying to do is, basically, using JavaScript: At the browser's bar, not via Greasemonkey or something else, edit a span's text .
This' the span that contains the text I want to edit:
<span id="serverTime">5:46:40</span>
The time within is just random, don't pay attention to it, it's what I want to edit using javascript..
I'm a newbie so yeah :\
document.getElementById("serverTime").innerHTML = ...;
Replace whatever is in the address bar with this:
javascript:document.getElementById('serverTime').innerHTML='[text here]';
Example.
This question already has answers here:
How to detect if JavaScript is disabled?
(39 answers)
Closed 8 years ago.
I want to inform a user if javascript is disabled in the browser and tries to access my website. My information will be like: "Please enable javascript in your browser for better use of the website". So how to do this?
If informing your users to enable it is all you want to do, you don't need to depend on server-side code (in fact, I don't think you can). Just use a <noscript> element:
<noscript><p>Please enable JavaScript in your browser for better use of the website.</p></noscript>
Well there's the tag for displaying html only without javascript, but if you want to control the CSS depending on it the best thing to do is to then specify .no-js before any CSS that's only for if JS is disabled, then as your first meaningful line of javascript remove that class from the body (and possibly add a .with-js class to apply js-only styles).
You can also have no default class but add one only with JS, it comes down to personal preference though you can/do get a slight flash of content intended for no javascript with the former before the body class is removed.
<noscript>
<div id="noscript-warning">Stack Overflow works best with JavaScript enabled<img src="http://pixel.quantserve.com/pixel/p-c1rF4kxgLUzNc.gif" alt="" class="dno"></div>
very easy u can do it in this way this is how stack overflow use to alert user if java script is dsabled