I am creating a mobile website with different events in a specific month. I want to add a button on every event page let user add different as'favorites'. I want that when user click the Add to favorites button, the event should be automatically added to a html page 'favorites'
I would go with a small javascript, external and called on the event pages (since there will be many instances of it). It's actually a very simple process you're asking about.
Create a new javascript file called favorites.js
Save it with this code:
Modified To support Opera
function bookmark(title,url){
var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
url =url+sPage;
if (window.sidebar) // firefox
window.sidebar.addPanel(title, url, "");
else if(window.opera && window.print){ // opera
var elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('title',title);
elem.setAttribute('rel','sidebar');
elem.click();
}
else if(document.all)// ie
window.external.AddFavorite(url, title);
}
In the head of every HTML document you write, you need to call this script (extremely similar to calling a CSS definition):
<script src="**/dir/**favorites.js" charset="UTF-8" type="text/javascript" defer/></script>
Defer is optional but recommended with a script like this which is not essential to the functioning of the page. However, if you want the possibility that the user can make use of the add to bookmarks function before the rest of the page loads, you may change defer to async.
Now you're almost there. At this point, to save yourself some frustration, make sure that your pages load without error before trying to use a link. This will ensure there are no bugs with your javascript or existing code.
To make use of the add to favorites button, it's as simple as using anchors and links. A link which would make use of this script in particular looks like this:
bookmark me
or
<img src="imgs/bookmarklogo.png" **other-img-definition-stuff**>
And in the old days it was common to use a form button, like this:
<input type="button" name="Bookmark this page" onclick="bookmark()" />
Several years have gone by since I really bothered myself with HTML/CSS, and in that time, options such as AddThis have come about. If you find this task too difficult, I would just go with something like that. And also I would recommend getting away from handcoding and go to some sort of CMS, like Drupal or Wordpress. Especially if you are on tight schedules.
Related
I was really confused with this question despite on google guide.
So, I have a web-page(html and js) which is upload some information to the
<div id=""></div>
using jquery's
.load(target)
Uploading realized with js function and "onclick" event in the html document.
So, when I click on the page region js start to upload information to the block.
According to google guide I should to use hash-bang if I want that page will be crawl.
Questions:
1.How can I implement this considering I have only one page?
2.How can I give access to the "#!" pages which upload by script?
3.How can I create html snapshots?
Thank you.
regarding Your question:
lets assume you have a page named MyPage.html with 3 elements to which you attach java script, with id's: A, B, C. each one of them causes different content to load in your div.
1) the simplest way is to create links like:
<a id='A' href='#GoToA' onclick='javascript:executeYourCodeA();'>Load A</a>
<a id='B' href='#GoToB' onclick='javascript:executeYourCodeB();'>Load B</a>
<a id='C' href='#GotoC' onclick='javascript:executeYourCodeC();'>Load C</a>
what that would do is when user clicks the link, the '#GoToA'or other will be added autommatically to browsers page addres. So the page address will look like
www.yourdomain.com/MyPage.html#GotoA
this change in addres will be remebered by the browser in its history.
2) if you wan to read the url use
var mylocation = window.location
- source: http://www.w3schools.com/js/js_window_location.asp
3) if the user accesses only MyPage.html everything is ok, the page renders with its original state, but what if user wants to see content visible after clicking link A ?
You can tell the difference, on page load, reading page url ( see 2)) and automatically loading the content. it can be achieved by :
$(function (){
var myurl = window.location;
var target = myurl.split('#')[1];
switch(target){
case 'GoToA' : executeYourCodeA(); break;
case 'GotoB' : executeYourCodeB(); break;
.
.
default: /*show the original, initial page*/
break;
});
Effectively what's going on now is that loading an address MyPage.html and clicking link A is the same by means of what is displayed to accessing a page MyPage.html#GoToA
So this way you can have separate links to the same site with different dynamically loaded content.
The thing Cristian Varga told you about can be used to achieving back and forward capabilities: basically what you do is you create a normal link to a page like MySecondPage.html ( this page does not really exist ). You then on click event load the contents to your div, force stop execution of standard link behavior (by preventDefault() - this causes your event not to be processed any more - so the browser 'ignores' navigation to MySecondPage.html. You then manually tell the browser to store the history stete and tell it that you are now om MySecondPage.html
history.pushState(null, null, link.href);
so you load the content, block navigation and manually convince the browser that the page has changed and to store the state in browsers history.
but now achieving the snapshot capability - would be more tricky in my mind, as the MySecondPage.html is a perfectly valid but non existent url, loading MyPage.html instead when user types in www.mydomain.com/MySecondPage.html and displaying MySecondPage content would require server side actions.
- source http://diveintohtml5.info/history.html
I need to trigger a piece of code after every single bits are done downloading. The script works if injected after everything is loaded, but how do I trigger that automaticly?
My script is:
var divId = "jwplayer-0_wrapper";
if ($('#' + divId).length == 1) {
myReg = /https?:\/\/www\.youtube\.com\/watch\?v=[^"]+/;
var plainText = $('#' + divId).parent().children('script').text();
var url = plainText.match(myReg);
if (url !== null) {
window.location = url;
};
};
It is used to skip certain site that decide to use the JW player witch I find horribly buggy. So it looks for a div with the indication of the JW player and if there's one, it finds the link to the original youtube video and directly goes there.
Its triggered By Google Chrome Add-on named Javascript Injector and I apply the script on every page I visit. The plug in work perfectly well on sites like www.ayoye.co and www.veuxturire.com. But on other sites, that uses the same pathern, it seems that the script is triggerd too early. For example there www.mondedestars.com and www.lesautos.ca triggers it too early.
If I use the "inject now" fonction of the Add on after the page is really done loading, then it redirects me to the youtube page as expected. I am lost on the why it works some where and not were else.
I'm not trying to understand every single website here, I'd prefer make it dynamicly triggered after the page has done loading everything from its php, ajax, script, flash, html and CSS.
I've tryed to look to the JWplayer API, but since its terribly unclear to me, over the fact that its partialy in flash, it woudl be simpler if there was a way to trigger it after, or maybe just triggering it after i hover over the body, since every sites has a body. It cant be specific to one page.
Use something like this
var timer;
function injectYouTube() {
// DO YOUR STUFF HERE
// ONCE DONE CALL clearInterval(timer);
clearInterval(timer);
}
timer = setInterval(injectYouTube, 2000);
I am not saying this will be called after everything is loaded but instead you can make sure your code is executed when you want it to.
The JWPlayer API are not that difficult. You can retrive the informations you need even not knowing the container id.
This is an example:
var player = jwplayer(0); // get the first jwplayer element of the page
var video = player.getPlaylistItem(); // get the player video
var url = video.file // retrieve the video url
I think the setTimeout or setInterval are unreliable.
Setting up a listener on jwplayer onReady event would be better.
The pessimistic answer to this is that you can't wait until a page has finished all AJAX operations etc. because web pages can continue loading new content indefinitely if they wish.
What you might consider is running your code every time a new HTML element is added to the page. This way, you can be certain to catch JWPlayer the moment it is inserted into the page.
document.addEventListener("DOMNodeInserted", yourRemovalFunction);
I am currently trying to setup a Client Side Experiment without Redirects as opposed to the default Content Experiment A/B testing. All I want to do is for half my visitors disable one of two existing stylesheets on a page.
To me it doesn't make sense to do this the default A/B way because then I would have to setup a second page with the stylesheet disabled for every page on my site.
There is also Running a Server-side Experiment but to me that is too heavy handed for something I think should be somewhat simple.
I have the js all setup, I just need to be able to tell the page that when there is a given variation disable the stylesheet or don't render the stylesheet before the DOM loads.
One thing I considered is, given a certain variation, redirect to the same page but append a url query parameter like &stylesheet_disabled=true then I would simply not render the stylesheet on the server side but when I briefly looked at that I ran into a redirect loop but perhaps someone has a better way to write the js.
Any help greatly appreciated.
You could do something like this:
<head>
...
<script>
if (cxApi.chooseVariation() != 1) { // not in the experiment
document.write('<link href="... />'); // add the stylesheet
}
</script>
...
Only use document.write while the page is still being loaded.
This is all client-side, so no need for redirects and extra server work.
Here is how I did it:
<head>
<script src="//www.google-analytics.com/cx/api.js?experiment=EXPERIMENT_ID"></script>
<script>
// Ask Google Analytics which variation to show the visitor.
var chosenVariation = cxApi.chooseVariation();
function redirectVariation($variation) {
var url = window.location.href;
if ($variation === 1) {
var queryString = document.location.search;
if (queryString.indexOf("stylesheet_disabled=true") == -1) {
if (Boolean(queryString)) {
url += "&stylesheet_disabled=true";
} else {
url += "?stylesheet_disabled=true";
}
window.location.href = url;
}
}
}
redirectVariation(chosenVariation);
</script>
This is only setup for one different variation but could easily be modified for more. Then you just have your application on the server side detect the presence of the querystring parameter and execute whatever logic you like, in my case not displaying a stylesheet.
Theoretically this could be used to do any kind of server side logic with GA Content Experiment Client Side Redirects. Hopefully this helps someone else.
So I've made a web app, image below. The app has several tabs which contain different information such as graphs and indicators. The app is made using HTML & Javascript and is one document. I have implemented a Javascript timer which, every 60 seconds, loads the exact same webapp but in a different HTML document, just with different values for the graphs etc. This was just to make it easy for me as i don't have a lot of time at the moment. So every minute the web apps graphs will refresh with different data coming from a different document. So basically i have index.html, index2.html and index3.html, all with the same code/webapp but loading different values into the graphs. Heres the code for the timer:
<script type="text/javascript">
var myVar=setInterval(function(){myTimer()},60000);
$(function () {
});
function myTimer()
{
window.location.replace("index2.html");
}
</script>
The only problem with this is that when, for example, index.html reaches 60 seconds and loads index2.html it goes back to the very first tab (Summary), is there anyway to remain on the same tab even though it's loading a different document?
As #JoshuaM pointed out, the best solution would be to use AJAX, but since you seem mostly satisfied with your current method, you could use a hash on the URL to indicate which tab should be active, e.g.:
index.html#/metrics
index2.html#/metrics
etc...
(I like to put in a leading slash for this sort of thing to distinguish it from a regular anchor link or unexpectedly jumping to an element with the same ID, but in a simple case like this, index.html#metrics could work just as well).
The link for the metrics tab would look like this:
Metrics
(Keep whatever Javascript you have set up on it to make the tabs work.)
Then, when loading the next page, append the hash to it:
var nextPage = 'index2.html';
window.location = nextPage + window.location.hash;
Finally, check for the hash when first loading a page:
var hash = window.location.hash;
//hashes indicating which tab to make active should begin with a slash, e.g. #/metrics
if (hash[1]=='/') {
var currentTab = hash.substr(2);
//activate current tab...
}
Another alternative would be to use an iframe for the graph content but that would probably require more reworking of your code.
I'm using javascript, so that when a refresh button is clicked it begins to spin around until the refresh is completed. This is my function:
function RefreshHome() {
// Refreshes the home page via the image link.
// Make the refresh link animate.
var refresh = document.getElementById("refresh_button");
refresh.src = "images/refresh_animated.gif";
// Refresh the page.
window.location = "home.aspx";
return false;
}
This worked perfectly for a while then, as far as I can see, inexplicably stopped working! When the refresh button is clicked on now, the image just disappears.
Does anybody know why this might happen?
Just want to mention that this would be much easier in jQuery. You wouldn't need to worry so much about maintaining browser compatibility etc. either. As your project grows your code may become unwieldily, so even if you don't decide to use jQuery you should find a suitable framework for your needs.
var refresh = $("#refresh_button");
refresh.attr("src", "images/refresh_animated.gif");
Also be aware that an image that has no src shows up with a placeholder X on most browsers, and you can hide it with display:none; or using the refresh.hide() and refresh.show() methods in jQuery as needed.