I created a bilingual website using two databases:
www.martyregan.com/
www.martyregan.com/jp/
You can choose the language of the website using the 'Website Language' flags, but currently the links only bring you to the homepage. The paths/URLs on both sites are exactly the same, other than /jp/ directory on the Japanese site.
I'm looking for a way to alter the hyperlinks to go to the parallel page, based on the URL of the page the visitor is currently on. I figure it'd be quite simple being that the paths are identical, but not really sure where to start with my little knowledge of jquery.
This assumes your language is accessible as seen below.
"http://" is removed from the URL for convenience.
$(function(){
var lang = 'jp';
$('a').attr('href', function(x, url){
var split = url.replace(/(http:)?(\/\/)?/, '').split('/');
return split.shift() + '/' + lang + '/' + split.join('/');
});
});
You may be able to get away with using the <base> tag depending up on the browsers you need to support. You can just set that to whatever the base is by acquiring it from the server.
If you want to use jQuery to do it, it should be fairly simple if all of your hrefs are absolute:
$("a").attr('href', function (_, href) {
return $("base").attr('href') + href;
});
This assumes that you are using <base>. If you're not you can get the path from window.location.path, or even some other element on the page.
In case you are confused, the JavaScript is only required if <base> is not enough to work on its own
Related
Okay so here's the problem.
<a>
Tag on the website has a href of
/news-features/8/news-headlines/103818/these-pupils-deserve-better
and of course the domain in the beginning let's say it is:
http://www.webserver.com/
Therefore the whole link is
http://www.webserver.com/news-features/8/news-headlines/103818/these-pupils-deserve-better
However, it should be:
http://www.oldham-chronicle.co.uk/news-features/8/news-headlines/103818/these-pupils-deserve-better
So it is linked to the website information is taken from.
My JQuery function is
var base = "http://www.oldham-chronicle.co.uk/";
$('a').each(function(index, element) {
element.href = element.href.replace("http://dev.liveoldham.com/", base);
});
Which locally works fine as it gives me the correct link however the same code on a webserver gives me:
/news-features/8/news-headlines/103818/these-pupils-deserve-better
Now I am not sure what is the fault, is it the .htaccess and it's rewrite rule or is it something else?
I'm building a webpage on which I want certain elements of a div to change (background color and logo) for users who enter the page from a specific redirect URL. Previously I would just make two separate versions of the page and get the redirect URL to point to the second one but with duplicate content a no no I was wondering if there was a dynamic solution that can make the changes to the original page?
You're looking for the document.referrer property:
if (document.referrer.indexOf("www.example.com") !== -1) {
// Do stuff if user is coming from example.com
$('#theDiv').css('background', 'red');
}
You can also check using regex or operators.
Extract the url-parameters using something like this: Get url parameter jquery Or How to Get Query String Values In js
Then use the parameters as a "flag" in ur code to change the look and feel with Javascript.
Pseudo code:
var urlColor = getURlParamater(Color)
switch(UrlColor){
case "blue":
setBackground(blue)
case "red":
setBackground(red)
default:
setBackground(white)
}
On the server, you can use the 'Referer' HTTP header to see where a user came from and give a different response accordingly. Browsers may not always provide this information to you however.
Alternately, if both the redirecting page and the destination page are on the same server, there are many other ways you could try tracking the user (eg. sessions, user-agent profiling, etc).
Two URLs, two brands, one code base
I'm assuming you want one set of HTML code served from two different URLs. You want to make it look like you have distinct web sites with different branding, but you want them to share all their content. And I'm assuming you want to do this all with HTML, Javascript, and CSS; no server side path mapping.
This approach requires a few steps but will be forward compatible to as many brands as you want.
Step 1
Move your style definitions to a set of external style sheets. You should have a global.css (for common styles) plus a style sheet for each of your background color/logos (say, company1.css and company2.css). (If you don't know how to define image URLs in the CSS, click here).
Step 2
If your two sites are on different domains (e.g. http://www.company.com and http://www.company2.com) then use location.host to detect which brand to display.
var companyName = document.location.host.split('.')[1]; //take middle segment, e.g. in "www.company1.com" extract the "company1"
OR
If your two sites are on the same domain, but with different paths (e.g. http://myhosting.com/company1 and http://myhosting.company2 then use document.location plus perhaps the split function to parse the URL and figure out which brand to display.
var companyName = document.location.split('/')[4] //your code may differ depending on your path scheme
Step 3
See this article on how to use Javascript to dynamically switch stylesheets.
Ta-da
When you're done it'll look a little bit like this:
var companyName = document.location.host.split('.')[1];
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = 'branding';
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = companyName + ".css";
link.media = 'all';
head.appendChild(link);
I am building an app with Phonegap and jQuerymobile. The app roughly works like this:
1) The app downloads a ZIP file from a public server and then unzips them to a local folder. I got the local folder path from fileSystem.root.toNativeURL() (in OS, it's something like this: file://var/mobile/Container/Data/Application/xxxx/Documents/)
2) App redirects to HTML that was unzipped in local folder (ex: file://var/mobile/Container/Data/Application/xxxx/Documents/index.html)
I am now facing issues b/c inside the index.html file, all the links are absolute path (ex: Link). This breaks all the links since (I assume) they are all now pointing to file://content/index2.html instead of file://var/mobile/Container/Data/Application/xxxx/Documents/content/index2.html.
My question is, how should I handle the links? I am thinking i should just rewrite all the links to force prepend the local folder URL in front of it. Is there a better way?
And if rewriting links is the way to go, how can I do this with jQuerymobile? I did this in jQuery which seems to work http://jsfiddle.net/jg4ouqc5/ but this code doesn't work in my app (jQueryMobile)
When you are loading index.html, you are getting file://some_path/..../index.html as your base URL. Any links which will be encountered now own-wards can be resolved in relation to the base URL.
You would know your scenario better. There could be multiple ways in which this can be fixed.
Have a contract with the CMS/Code generator. Links should always be generated either Relative to the base URL or Absolute. The links you are getting in the page are wrong - Link it ideally should be Link or fully qualified like https://www.google.com.
If you want to change the URL then you can use native code to change it after unzipping the content. It will be really straight forward.
If you want to change the URL in browser then you will have to persist the base url and then take care of couple of things:
a. absolute urls - In your case you can just check the window.location.protocol, if it starts with 'http' and then skip it.
b. sub-directories
Here is a small I have written:
Note: I have not tried this code and you might have to change it according to your need.
$(document).ready(function(){
var base_file_name = window.location.pathname.substring(window.location.pathname.lastIndexOf('/') + 1);
//In index.html (persist this value in native)
var baseUrl = window.location.href.replace(base_file_name, "");
$("a").each(function () {
this.href = baseUrl + this.pathname;
$(this).click(function (e) {
e.preventDefault();
alert(this.pathname);
window.location.href = this.href;
});
});
});
The example you linked should work, make sure you have the <base> set correctly and that you are using the correct string to replace.
Yeah, your going to have to normalize all URL's when your page loads. I can't test with phonegap right now, but your basePath will need to be one of the following:
The file path as you described in your answer (not likely)
window.location.origin (optionally including window.location.pathname)
CODE:
// mini dom ready - https://github.com/DesignByOnyx/mini-domready
(function(e,t,n){var r="attachEvent",i="addEventListener",s="DOMContentLoaded";if(!t[i])i=t[r]?(s="onreadystatechange")&&r:"";e[n]=function(r){/in/.test(t.readyState)?!i?setTimeout(function(){e[n](r)},9):t[i](s,r,false):r()}})
(window,document,"domReady");
domReady(function () {
var anchors = document.getElementsByTagName['a'],
basePath = /* get your base path here, without a trailing slash */;
Array.prototype.forEach.call(anchors, function( anchor ){
anchor.setAttribute('href', basePath + anchor.getAttribute('href'));
});
});
Remove the forward slash from the beginning of your links.
href="content/index2.html">
When I click on a certain link the server writes if I have done it by stating either true or false in a text file...
Just like this:
{"needs_click":false,"has_clicked":false,"sites":[{"id":2134,"name":"testing","has_clicked":false,"click_url":"http://testing.com?siteid=5433"}]}
Now what I have done is uploaded a text file to my FTP already and changed all the false results into true like this:
{"needs_click":true,"has_clicked":true,"sites":[{"id":2134,"name":"testing","has_clicked":true,"click_url":"http://testing.com?siteid=5433"}]}
Now in one of the JavaScript files attached to the source code there is the variable at the top directing to the text file I just need to know how to make my browser read the spoofed link I created instead of the original.
I need to change the variables:
var API_VERSION = 0.1;
var API_URL = "http://api.testwebsite.com/" + API_VERSION + "/";
To:
var API_VERSION = 0.1;
var API_URL = "http://api.testwebsite2.com/" + API_VERSION + "/";
So it reads the other text file stating all the true options instead of the original... any suggestions?
What if you used a personal proxy to shape the query? Something like Charles proxy could work. In any case you will need to get in between the browser and server to do this sort of thing.
Alternatively you could try to rewrite entire JavaScript (ie. remove the original from source before loading and inject your own with the url fixed, you might be able to get away with a replace on the original). I don't know how feasible this is, though, as I don't know internals of Greasemonkey well enough. But this might be something to explore.
Was impossible, at the time I was very new to programming and limitations on what I could and could not do.
In javascript, how do I go to a specific url without knowing exactly where I am?
For example, I might be at
www.mysite.com/level1/level2
www.mysite.com/level1
I want to go to:
www.mysite.com/go_here
I tried:
window.location.href = document.domain + "/go_here/";
But that tags domain and go_here onto the previous url:
www.mysite.com/level1/www.mysite.com/go_here
Normally, I'd use ../ but I don't know how many levels to go back.
Try / at the beginning , without document.domain:
window.location.href = "/go_here"