I have a page which by default has a plain looking theme. In order to swap between one of 5 themes the url parameter agency=x where is the name of the theme must set.
So if the default url of my page was
http://127.0.0.1:8888/index.html?&some.param=123&someother.param=321
I need to have a url that would link to
http://127.0.0.1:8888/index.html?&some.param=123&someotherparam=321&agency=2
Keep in mind that some.param and someother.param are arbitrary, users could hit this page with all sorts of crazy get params, I just need to (if possible) link to itself with the addtional get parameter.
I can always render this out dynamically via a servlet or jsp but if there is a way to do this with standard links/hrefs it would be much better.
Any ideas?
It's a bit of both, but I would do, in the <head> element:
<link rel="stylesheet" type="text/css" href="agency<%= the agency %>.css" />
And have agency.css for the default, agency1.css for theme 1 and so on.
You could do this with javascript.
On all hrefs add an onclick callback (using document.getElementsByTagName('a')) which parses window.location and adds it to the href on the fly.
Related
I am attempting to setup a service which will redirect the user to a URL stored in the ?url= parameter, how would I do this?
I have tried using meta
http-equiv="refresh"
with
out.print(request.getParameter("ur;")) %>
however all that happens is the page reloads in a loop. Not too sure if I need to use quotation marks (e.g /?url="https://google.com")
<meta http-equiv="refresh"
content="0; URL="<%
out.print(request.getParameter("redirect")) %>">
What I need to happen is when the user gets redirected to "https://example.com/exampledir/index.html?url=https://anotherwebsite.com" (just an example url) the script on index.html will get the parameter and redirect to it exactly. What actually happens is the page just reloads in a loop.
Since you're not using any server-side language, you won't be able to generate a different meta tag during rendering. Instead, you'll need to do this with JavaScript after the page loads.
Add a script tag to the bottom of the page like this:
<script>
var redirect = new URL(window.location).searchParams.get('redirect');
if (redirect) window.location = redirect;
</script>
Now if you browse to the page like this: http://<myserver>/myfile.html?redirect=https://google.com you'll be redirected to https://google.com.
For reference, see MDN articles on:
Window.location
URL.searchParams
I also highly recommend you read through Java​Script basics just to make sure you understand the overall concepts presented here.
I want to add <link rel="alternate" href="https://www.example.com" hreflang="en-us" /> this kinda of link tag in my bigcommerce site using jQuery or anything else...
Tried code:
1:
if ($("body#home").length > 0) {
$('head').add($('<link rel="alternate" href="https://www.example.com" hreflang="en-us" />'));
}
2:
var page = window.location.pathname;
if (page == '/' || page == '/index.html') {
$('head').add($('<link rel="alternate" href="https://www.example.com" hreflang="en-us" />'));
}
3:
if ($("html").hasClass("home")) {
$("head").append("<link rel=alternate href=https://www.example.com hreflang=en-us>");
}
But nothing worked for me....
Let's first give some background on hreflang and the three valid ways that Google will read it..
HTML link element in header. In the HTML section of http://www.example.com/, add a link element pointing to the Spanish version of that webpage at http://es.example.com/, like this:
<link rel="alternate" hreflang="es" href="http://es.example.com/" />
HTTP header. If you publish non-HTML files (like PDFs), you can use an HTTP header to indicate a different language version of a URL:
Link: <http://es.example.com/>; rel="alternate"; hreflang="es"
To specify multiple hreflang values in a Link HTTP header, separate the values with commas like so:
Link: <http://es.example.com/>; rel="alternate"; hreflang="es",<http://de.example.com/>; rel="alternate"; hreflang="de"
Sitemap. Instead of using markup, you can submit language version information in a Sitemap.
Source: Google 'hreflang' Usage
So Method 2 isn't possible since you can't modify or control the headers from your BigCommerce store.
This leaves us with Method 1 or Method 3.
The big question here though is..
"Will Google index & process a dynamically inserted JavaScript hreflang link tag"?
Unfortunately at the time of writing this, I need to wait several days for the Google Webmaster Tool to become active on my test site so I can be certain; while all the 3rd party hreflang test sites I used failed. My gut feeling is that I would not trust it. However, if you have an active Google Webmaster / Search Console account, you can test this by going to: Dashboard > Search Traffic > International Targeting.
But for the sake of argument, let's assume that it will work, and so to answer your specific question, you would go about this method like so...
Within the <head>...</head> block, create an empty link tag like so: <link id="lang1" /> This will have the link element physically in the DOM awaiting its attributes to be dynamically added.
Next, immediately below the link element created above, let's create the JavaScript that will turn this empty link tag into a complete hreflang reference depending on the current page:
<script>
// If current page is homepage, then append the neccessary attributes to the link tag. Else, do nothing.
// If on homepage, the link tag would become: "<link id="lang1" rel="alternate" href="https://www.example.com" hreflang="en-us" />"
window.location.pathname == '/' ? $("#lang1").attr({"rel": "alternate", "href": "https://www.example.com", "hreflang": "en-us"}) : false;
</script>
And that's about it from the coding side. If you run this and inspect the DOM (it won't be viewable in page source), you can confirm that your link tag now reads as: <link id="lang1" rel="alternate" href="https://www.example.com" hreflang="en-us" />
Again, whether or not Google will process this, I don't know.
But here's an alternative I do know will work...
We can follow Method 3 listed above, and submit language version information via your site's sitemap, which can specify which individual and specific pages have alternative language versions.
Now, you do not have access to directly modify your BigCommerce generated Sitemap. But what you do have access to, is to:
Create your own custom sitemap file, and upload it to your store.
Tell Google to use the URL of this custom sitemap, rather than the default BigCommerce one.
There are plenty of resources online on how to create a sitemap, and there are many tools that can help automate this process. Although beware, if you use a custom sitemap, then you will need to maintain it and manually update it whenever you add new pages or products to your store.
I've taken the time to point you to some specific documentation resources that should help you with this task. I will eventually come back to this post to transcribe the content from these links into this post as I do recognize posting links is bad SO practice. A hardass might say "well why are you doing it then", and well my time is limited and I'm trying to be as helpful as I can now upfront.
Here is a link from the Google Docs with information on creating a sitemap with page specific language versions.
Here is a link from the BigCommerce Docs with information on uploading a custom file to your store which can then be accessible via your domain/URL.
Finally, here is a link from the BigCommerce Docs with information on how to direct Google to use a specific/alternate file as your store's sitemap.
Please attempt the code suggestion I wrote for Method #1 and test it using your Google Webmaster's tool to let us know if the hreflang link tag is successfully crawled by Google when dynamically inserted via JavaScript - you would be doing the community a great service as there is no definite answer around this.
Remember, you can officially test this by logging into your Google Webmaster Console and navigating to Dashboard > Search Traffic > International Targeting
I'm trying to prepare a default error page. In error.html file I use:
<link href="css/bootstrap.min.css" rel="stylesheet">
In tornado Application I use following routing instruction:
(r'/css/(.*)', web.StaticFileHandler, {'path': 'assets/css'}
Let's say I type http://localhost:8888/api url. Everything is fine and css file is loading correctly and error page is rendered fine. However when I type http://localhost:8888/api/foo the css file is not found.
In the first situation the css request http://localhost:8888/css/bootstrap.min.css is handled correctly by the handler. In the second approach the request for css is translated to http://localhost:8888/api/css/bootstrap.min.css which is not handled.
I want the resources to be found in both situations to correctly display error page. I can use:
(r'.*/css/(.*)', web.StaticFileHandler, {'path': 'assets/css'}
However this time I can type into browser http://localhost:8888/api/asdasdsadsad/css/bootstrap.min.css url and the css file is dispayed while I think there should displayed error page. How may I get rid of this problem?
It is because you use relative paths. There are two common ways to fix this:
use absolute urls. Add / (slash) before any resource, so instead of <link href="css/bootstrap.min.css" rel="stylesheet"> use <link href="/css/bootstrap.min.css" rel="stylesheet">
add <base> to page in <head> section
Base ... specifies the base URL to use for all relative URLs contained within a document.
<base href="http://www.example.com/">
And leave the handler as
(r'/css/(.*)', web.StaticFileHandler, {'path': 'assets/css'})
the latter is working because it's regex is very broad, as you notice it handles request that should be 404. The good practice is to have routes as specific as possible.
Basicly what I want to do is to change the stylesheet when the user selects the one they whant from a select box. To do that there would be a variable called $_SESSION['style']. What's the best way to change the variable when clicking it from the select box? (without clicking a submit button). Is it possible to change the stylesheet without reloading the whole page?
Thanksss! :)
Yes you can dynamically inject a CSS file when the select box is updated.
<select onchange="changecss(this.value);">
...
</select>
<script>
function changecss(value){
//based on the value, pick a style sheet here
var cssname='pick your own css file';
csl=document.createElement('link');
csl.setAttribute('rel','stylesheet');
csl.setAttribute('type','text/css');
csl.setAttribute('href',cssname);
document.getElementsByTagName("head").item(0).appendChild(csl);
}
</script>
Edit:
I have seen code that directly change the src value of the current css inclusion. This doesn't not work in some versions of IE, because the browser is not "notified" of a DOM change, and your page is therefore unaffected. Inserting new CSS node in the DOM works more reliably.
With this Ajax wrapper you can dynamically load the CSS file in one line:
<script src="http://www.antradar.com/nano.js"></script>
<script>
ajxcss(self.cssloader,'newcss.css');
</script>
Since PHP is a server-side language that cannot update the data in the user's browser (no "push"), you need a client-side script for the change of the stylesheet without having to reload the page. Changing the stylesheet is possible with javascript. Because your stylesheet filename is stored in a (server-side) session variable, you've got 2 options:
Render the filename into the site (e.g. by echoing it into the javascript code as a variable), so that it can be used by the client side script.
Use an ajax call from the client side script, to get the filename from a PHP script ("pull"), that ouputs the session variable.
However, this might be too much overhead*. Maybe you should consider hardcoding the stylesheet filename into the javascript.
*) if you are using a javascript framework like jQuery or MooTools such things can be implemented easily...
Edit: I just recognized, that you've got a selectbox of items. In this case you surely want to go with the first option: Create the selectbox via PHP and for example use the filenames of the stylesheets as the values. You can than use javascript to change the stylesheet when a onSelectedIndexChanged happens.
I'm currently trying to build a new website, nothing special, nice and small, but I'm stuck at the very beginning.
My problems are clean URLs and page navigation. I want to do it "the right way".
What I would like to have:
I use CodeIgniter to get clean URLs like
"www.example.com/hello/world"
jQuery helps me using ajax, so I can
.load() additional content
Now I want to use HTML5 features like pushstate to
get rid of the # in the URL
It should be possible to go back and forth without a page refresh but the page will still display the right content according to the current URL.
It should also be possible to reload a page without getting a 404 error. The site should exist thanks to CodeIgniter. (there is a controller and a view)
For example:
A very basic website. Two links, called "foo" and "bar" and a emtpy div box beneath them.
The basic URL is example.com
When you click on "foo" the URL changes to "example.com/foo" without reloading and the div box gets new content with jQuery .load(). The same goes for the other link, just of course different content and URL.
After clicking "foo" and then "bar" the back button will bring me back to "example.com/foo" with the according content. If I load this link directly or refresh the page, it will look the same. No 404 error or something.
Just think about this page and tell me how you would do this.
I would really love to have this kind of navigation and so I tried several things.
So far...
I know how to use CodeIgniter to get the URLs like this. I know how to use jQuery to load additional content and while I don't fully understand the html5 pushstate stuff, I at least got it to work somehow.
But I can't get it to work all together.
My code right now is a mess, that's the reason I don't really want to post it here. I looked at different tutorials and copy pasted some code together. Would be better to upload my CI folder I guess.
Some of the tutorials I looked at:
Dive into HTML5
HTML5 demos
Mozilla manipulating the browser history
Saner HTML5 history
Github: History.js
(max. number of links reached :/)
I think my main problem is, that everybody tries to make it compatible with all browsers and different versions, adds scripts/jQuery plugins and whatnot and I get confused by all the additional code. There is more code between my script-tags then actual html content.
Could somebody post the most basic method how to use HTML5 for my example page?
My failed attemp:
On my test page, when I go back, the URL changes, but the div box will still show the same content, not the old one. I also don't know how to change the URL in the script according to the href attribute from the link. Is there something like $(this).attr('href'), that changes according to which link I click? Right now I would have to use a script for every link, which of course is bad.
When I refresh the site, CodeIgniter kicks in and loads the view, but really only the view by itself, the one I loaded with ajax, not the whole page. But I guess that should be easy to fix with a layout and the right controller settings. Haven't paid much attention to this yet.
Thanks in advance for any help.
If you have suggestions, ideas, or simple just want to mention something, please let me know.
regards
DiLer
I've put up a successful minimal example of HTML5 history here: http://cairo140.github.com/html5-history-example/one.html
The easiest way to get into HTML5 pushstate in my opinion is to ignore the framework for a while and use the most simplistic state transition possible: a wholesale replacement of the <body> and <title> elements. Outside of those elements, the rest of the markup is probably just boilerplate, although if it varies (e.g., if you change the class on HTML in the backend), you can adapt that.
What a dynamic backend like CI does is essentially fake the existence of data at particular locations (identified by the URL) by generating it dynamically on the fly. We can abstract away from the effect of the framework by literally creating the resources and putting them in locations through which your web server (Apache, probably) will simply identify them and feed them on through. We'll have a very simple file system structure relative to the domain root:
/one.html
/two.html
/assets/application.js
Those are the only three files we're working with.
Here's the code for the two HTML files. If you're at the level when you're dealing with HTML5 features, you should be able to understand the markup, but if I didn't make something clear, just leave a comment, and I'll walk you through it:
one.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>One</title>
</head>
<body>
<div class="container">
<h1>One</h1>
Two
</div>
</body>
</html>
two.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>Two</title>
</head>
<body>
<div class="container">
<h1>Two</h1>
One
</div>
</body>
</html>
You'll notice that if you load one.html through your browser, you can click on the link to two.html, which will load and display a new page. And from two.html, you can do the same back to one.html. Cool.
Now, for the history part:
assets/application.js
$(function(){
var replacePage = function(url) {
$.ajax({
url: url,
type: 'get',
dataType: 'html',
success: function(data){
var dom = $(data);
var title = dom.filter('title').text();
var html = dom.filter('.container').html();
$('title').text(title);
$('.container').html(html);
}
});
}
$('a').live('click', function(e){
history.pushState(null, null, this.href);
replacePage(this.href);
e.preventDefault();
});
$(window).bind('popstate', function(){
replacePage(location.pathname);
});
});
How it works
I define replacePage within the jQuery ready callback to do some straightforward loading of the URL in the argument and to replace the contents of the title and .container elements with those retrieved remotely.
The live call means that any link clicked on the page will trigger the callback, and the callback pushes the state to the href in the link and calls replacePage. It also uses e.preventDefault to prevent the link from being processed the normal way.
Finally, there's a popstate event that fires when a user uses browser-based page navigation (back, forward). We bind a simple callback to that event. Of note is that I couldn't get the version on the Dive Into HTML page to work for some reason in FF for Mac. No clue why.
How to extend it
This extremely basic example can more or less be transplanted onto any site because it does a very uncreative transition: HTML replacement. I suggest you can use this as a foundation and transition into more creative transitions. One example of what you could do would be to emulate what Github does with the directory navigation in its repositories. It's an intermediate manoever that requires floats and overflow management. You could start with a simpler transition like appending the .container in the loaded page to the DOM and then animating the old container to {height: 0}.
Addressing your specific "For example"
You're on the right track for using HTML5 history, but you need to clarify your idea of exactly what /foo and /bar will contain. Basically, you're going to have three pages: /, /foo, and /bar. / will have an empty container div. /foo will be identical to / except in that container div has some foo content in it. /bar will be identical to /foo except in that the container div has some bar content in it. Now, the question comes to how you would extract the contents of the container through Javascript. Assuming that your /foo body tag looked something like this:
<body>
foo
bar
<div class="container">foo</div>
</body>
Then you would extract it from the response data through var html = $(data).filter('.container').html() and then put it back into the parent page through $('.container').html(html). You use filter instead of the much more reasonable find because from some wacky reason, jQuery's DOM parser produces a jQuery object containing every child of the head and every child of the body elements instead of just a jQuery object wrapping the html element. I don't know why.
The rest is just adapting this back into the "vanilla" version above. If you are stuck at any particular stage, let me know, and I can guide you better though it.
Code
https://github.com/cairo140/html5-history-example
Try this in your controller:
if (!$this->input->is_ajax_request())
$this->load->view('header');
$this->load->view('your_view', $data);
if (!$this->input->is_ajax_request())
$this->load->view('footer');