I am using MOD_REWRITE to channel all URLs through a single file. The aim is to allow pretty urls like:
http://mysite.com/shop/electrical/hoover
or
http://mysite.com/shop/checkout
etc etc
I achieve this using the following .htaccess file:
# Turn on the RewriteEngine
RewriteEngine On
#
# Rules
#
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . urlbug.htm
This is the stripped down HTML file that does all the work:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>My web page</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.20.custom.css" media="all" rel="stylesheet"/>
</head>
<body>
<div id="accordion"><h3>Home</h3><div>
<ul class="submenu"><li>Clear Counters</li></ul>
</div>
<h3>Maintan Tables</h3>
<div>
<ul class="submenu">
<li>Stock</li>
<li>Categories</li>
<li>Designers</li>
</ul>
</div>
<h3>User Database</h3><div><ul class="submenu"></ul></div>
</div>
<script src="js/libs/jquery-1.7.1.min.js"></script>
<script src="js/libs/jquery-ui-1.8.20.custom.min.js"></script>
<script src="js/plugins.js"></script>
</body></html>
This works if you visit a URL like:
http://www.facebookanswers.co.uk/code/foobar/works
However, if you try a URL like:
http://www.facebookanswers.co.uk/code/foobar/no/longer/works
Then the URL will load, however, none of the CSS or JS files will load.
This is because I am using relative URLs.
If I instead use absolute URLs, then all works fine. I have set up a different folder to demonstrate this:
http://www.facebookanswers.co.uk/code/foobar2/works
and
http://www.facebookanswers.co.uk/code/foobar2/works/as/well
This is the code with the absolute URLs:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>My web page</title>
<link type="text/css" href="http://www.facebookanswers.co.uk/code/foobar2/css/ui-lightness/jquery-ui-1.8.20.custom.css" media="all" rel="stylesheet"/>
</head>
<body>
<div id="accordion"><h3>Home</h3><div>
<ul class="submenu"><li>Clear Counters</li></ul>
</div>
<h3>Maintan Tables</h3>
<div>
<ul class="submenu">
<li>Stock</li>
<li>Categories</li>
<li>Designers</li>
</ul>
</div>
<h3>User Database</h3><div><ul class="submenu"></ul></div>
</div>
<script src="http://www.facebookanswers.co.uk/code/foobar2/js/libs/jquery-1.7.1.min.js"></script>
<script src="http://www.facebookanswers.co.uk/code/foobar2/js/libs/jquery-ui-1.8.20.custom.min.js"></script>
<script src="http://www.facebookanswers.co.uk/code/foobar2/js/plugins.js"></script>
</body>
</html>
Somewhere along the line, the path is getting confused. What is the best way around this? I would like to keep relative URLs if possible, as the code I am developing will be used on a number of sites. Its not the end of the world if I have to use absolute URLs, and I know that there are performance benefits in absolute URLs, but it seems odd that the browser will happily load the URL, but then think that it is stored somewhere else!
Use root relative URLs.
The problem is that the browser sees a URL like http://www.facebookanswers.co.uk/code/foobar/no/longer/works so a relative link would resolve as http://www.facebookanswers.co.uk/code/foobar/no/longer/works/code/foobar2/css... and so on.
Instead use this...
<link type="text/css" href="/code/foobar2/css/ui-lightness/jquery-ui-1.8.20.custom.css" media="all" rel="stylesheet"/>
By starting with a / you're forcing it to be relative to the root of the website, but by not specifying the domain, it'll work just fine if you deploy on another site. This is really just an HTML issue rather than a mod-rewrite one.
Take a look at your server access logs and you'll see what pages are being requested, and you'll see they're not what you were expecting.
Site-wide resources are always best referred to with root-relative URLs - it means you don't need to adjust them based on where you are in the site, and it makes them portable between sites (which is handy if, like me you have your development site on a local machine with a different domain name - I use www.example.com.dev when working locally on www.example.com)
Related
I am having difficulty on how to properly display this like the real ones. Right, so
here's my piece of code. You can try this on your respective IDE's to view the page
because basically I cannot drag and drop here the image. I'm using html CSS, vs code. its just basically the interface of google with header, main, serach bar at the middle and those buttons and navs at the bottom of it.
I'm having difficulty on trying to make this like a real google ui. :(( Just a beginner.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Login</title>
<link rel="shortcut icon" href="google-logo-png-29534-32x32.ico" type="image/x-
icon">
</head>
<body>
<div id="header">
Gmail
Images
<img src="pad.png">
<img src="cs-logo.png">
</header>
<main>
<input type="search">
<img src="google-voice-search-icon.png">
<img src="googlelogo_color_272x92dp.png">
<button>Google Search</button>
<button>I'm feeling lucky</button>
</main>
<p>Google offered in: Filipino <a href="#">Cebuano</p>
</div>
</body>
</html>
The property src="" in the img tag will take the image from the local path or an URL to an image.
If you want, for example, the doodle's image you have two options:
Download the image from the Google web and then overwrite the img tag with something like this: <img src="/path/to/the/image.png"
Get the URL to the image in web(in this case: https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png) and then overwrite the img tag with something like this: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
I hope this could help.
Using ufront and erazor I ran into the following problem very quickly.
The hello-world example provides the following layout:
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
#viewContent
</div>
</body>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</script>
</html>
For certain pages I want to add more headers or scripts after Jquery has been loaded.
One way to do so (for the scripts for example), would be to pass the scripts as an array of strings, and construct them on the layout file :
...
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</script>
#for(script in scripts) {
<script src='#script.path'></script>
}
</html>
....
The problem with this approach is that I can't keep meaningful headers + body + scripts on the same template file witch would be great, also needs extra care to pass the scripts and headers as context.
Some template engines like Razor or Laravel allow to do that using 'sections'.
Is it possible to do something similar with erazor? If not what would be a good alternative?
Alright, my question is pretty simple. Suppose I have a homepage that is not linked to any external stylesheets, all its styles being either inline or internal, how do I do so that AFTER the homepage has been downloaded and displayed, the browser then downloads any necessary (specified) external stylesheets. Is this possible?
Thank you.
Try This:
<head>
<script type='text/javascript'>
function addstyle()
{
document.getElementById('style').href='style.css';
}
</script>
<link rel="stylesheet" type="text/css" href="">
</head>
<body onload="addstyle()">
<h1>Welcome</h1>
<p>Hello whats up</p>
<p>Hope you will have a great day</p>
</body>
this used to work in work in the older versions of service stack (.33). I'm trying .55 now.
I have a .cshtml page with a relative ~ link, and i also set the WebHostUrl in the EndpointHostConfig.
In the old version both the metarefresh and the href were replaced with the WebHostUrl. So both were
http://server/baseurl/Incidents.
In the newer versions, it only seems the href are. So the metarefresh is no longer working. it refreshes to
http://server/baseurl/~/Incidents
not sure if it can be fixed.
example .cshtml
<head>
<meta http-equiv="refresh" content="3; url=~/Incidents">
</head>
<body>
<div>
<p>
<center>
View Incidents
</center>
</p>
AppHost.cs
SetConfig(new EndpointHostConfig {
AllowJsonpRequests = true,
WebHostUrl = ConfigurationManager.AppSettings["BaseUrl"],
The issue is that the ~ is not valid html or a valid URL. But you can use the URL extension methods within Razor to translate the path for you as it understands the tilde. ASP.NET understands the ~ as the root of your application and will translate it accordingly.
<head>
<meta http-equiv="refresh" content="3; url=#Url.Content("~/Incidents")">
</head>
<body>
<div>
<p>
<center>
View Incidents
</center>
</p>
I am new to meteor and I am trying to do multi-page application where http://www.mydomain.com/page1 will result a totally different page from http://www.mydomain.com/page2.
By totally different I mean that I don't want the page to be rendered by the client.
I tried to use meteor-router but What I got is something like:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/myapp.css?9297ad4aa173c4e0c19aebd27c62a5c43242bb93">
<script type="text/javascript">
__meteor_runtime_config__ = {"ROOT_URL":"http://localhost:3000","serverId":"iMp4kgzzeqDtktJoY"};
</script>
<script type="text/javascript" src="/packages/underscore/underscore.js?6d71e6711255f43c0de8090f2c8b9f60534a699b"></script>
<script type="text/javascript" src="/packages/meteor/client_environment.js?07a7cfbe7a2389cf9855c7db833f12202a656c6b"></script>
<script type="text/javascript" src="/packages/meteor/helpers.js?2968aa157e0a16667da224b8aa48edb17fbccf7c"></script>
...
...MANY MANY MANY SCRIPTS.... ?!?
...
...
<script type="text/javascript" src="/myapp.js?2866dcdb5c828b129cdd3b2498a4bf65da9ea43f"></script>
<title>myapp</title>
</head>
<body>
</body>
</html>
And this is not what I want. I want page1 route will return me:
<!DOCTYPE html>
<html>
<head>
My meta tags
</head>
<body>
page1
</body>
</html>
And I want page2 to return different meta tags with different content.
In order to be clear, lets assume that my clients sometime doesn't have javascript. I don't asking about whether meteor is the right framework! I am asking only if can I do this with meteor.
Meteor works a bit different compared to the traditional LAMP stack. Basically it works by patching out the DOM to only where the changes are needed as opposed to re-downloading the whole web page. It makes for a very satisfying end user experience on modern web browsers.
To use meteor router you need to find a spot that you want to patch out with new data for different pages with {{renderPage}}. You can use something like
<head>
<title>xx</title>
</head>
<body>
{{renderPage}}
</body>
<template name="page1">
<h2>Hello!</h2>
</template>
<template name="page2">
<h2>Ola!</h2>
</template>
Now you need to define a router in your client side javascript:
Meteor.Router.add({
'/page1': 'page1',
'/page2': 'page2'
});
So if you load /page1 you would see Hello! and if you load /page2 you would see Ola! as defined in the <template name="page2">..</template>
With the meta tags you need to use javascript to create them. With something like
$('head').append("<meta...");
Again this depends on your preference, personally I find these type of apps load ridiculously fast between web pages as compared to other 'thin' based websites. (Have a look at meteor.com to see how fast you can swap between the pages). The browser does need javascript, however.
Of note is in production mode there will only be 1 script tag.