I'm having an issue with urls.
I have a navbar.ejs file that I include in every page of my website via
<% include ./navbar %>
In the file, I have something like this:
<li><a id="loginButton" href="../login">Login</a></li>
<li><a id="signupButton" href="../users/new">Sign up</a></li>
The issue I'm having is that depending on where I am on the website, the login button might or might not work. This is because of
"../login"
So at times when you click the login button, you're directed to
https://baseurl/login
At other times, it goes to
https://baseurl/campgrounds/login
This URL is wrong and doesn't exist.
I know the source of the problem obviously. But how do I get replace "../login" with an absolute URL path... As in, how do I go back to the root?
Something like
$("#loginButton).attr("href", document.location.hostname + "/login") doesn't work because it just directs to
baseurl/baseurl/login
which is also invalid
If the URL of the login page will always be https://yelpcamp-asool.c9users.io/login then the below code will work fine.
<a id="loginButton" href="/login">
Related
href # is not appending to end of URL
I have written the html page on which one of the anchor tag has href "#". Whenever I am clicking on it, # is not appending at the end of URL path in browser. Same functionality is working in different websites. Please suggest..
<li class="nav-item d-md-down-none">
<a class="nav-link" href="#">
<i class="icon-location-pin"></i>
</a>
</li>
My current url is "http://localhost:8080/add/AddDocument.html"
After clicking on the link i should get "http://localhost:8080/add/AddDocument.html#"
But i am getting this "http://localhost:8080/add/#"
This issue is solved.
There is <base href=”/”> tag present in my html which was loading alternative html link while clicking on href="#".
Thanks for all your help.
Usually, it is to link to part of a page ('#about'). If it is just there instead of being empty('#' vs. ''), it prevents the page from being reloaded on click.
Normally, you define it like this:
<div id="about"></a>
In order for your href to have a clickable link ie a web address, by placing the hashtag symbol, you refer the element (image,text, video etc) as a href if the website link is either not yet available or if it’s in the same page you can use the hashtag followed by the id name.
Also please check your routing.
I have the below code. I would like to print out the file names in that directory and append an href tag. The below code works but only the port number my node.js app is listening to is still there. How could I remove that (so my hrefs will actually work?). Something with the document object, as in truncating the URL?
<h1><%= title %></h1>
<p>Welcome to
<%=t itle %>
</p>
<ul>
<% for(var i=0; i<fs.readdirSync( './Week4/').length; i++) {%>
<li>
<a href="<%= fs.readdirSync('./Week4/')[i] %>">
<%=f s.readdirSync( './Week4/')[i] %>
</a>
</li>
<% } %>
</ul>
From reading your comments, it seems that your problem is not where you think it is.
The :8080 you see is written automatically because you specify an href that is relative to the current URL:
If the current URL is localhost:8080/Week4/index.html, going to the relative URL itemlist will in fact redirect you to localhost:8080/Week4/itemlist.
If this is not the way you intend things to work, you have to specify an absolute URL. For instance, using //localhost:80/Week4/itemlist will redirect you to another server (or another listener on the same server).
I don't exactly know what you are trying to achieve but, to me, the behavior you are expecting doesn't sound really good. A link should not redirect to a different port on the same server except if you are doing something very specific.
If you could tell us what you are really trying to achieve, we could help you better.
In the Component Template section of this angular tutorial, they use the following code:
...
<ul class="phones">
<li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb">
<img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />
</a>
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
...
In the anchor tag they use following value for href "#/phones/{{phone.id}}". As far as I know href="#" would jump to the top of page on click. And href="#mydiv" would jump to the element with id mydiv.
I've never seen something like href="#/folder1/myimg.jpg". Is it equivalent to href="/folder1/myimg.jpg"?
Putting the "#" symbol as the href for something means that it points not to a different URL, but rather to another id or name tag on the same page. For example:
Click to go to the bottom of the page
blah blah
blah blah
...
<a id="bottomOfPage"></a>
However, if there is no id or name then it goes "no where."
for more info you can see ...
What is href="#" and why is it used?
But in angularJS it is used for routing the request ... as angularJS provide very good support to built Single Page Application .. the parameter after # used to find out proper page to render ....
here is a nice example .. but you need time to understand it in depth ..
It seems like all anchor events will be interrupted by javascript and perhaps page will be loaded on background using ajax and browser's address line will change but it will not be cause for browser to reload the page. In HTML4 it was unable to change address line without reloading the page. So It's kind of workaround to:
Specify which page should be loaded by js.
Give the user ability to refer to specific page in future or share it.
On a page I have a Tweet button, like this:
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
The problem is that in the bubble with counts of tweets is the value 2197, which is incorrect.
How to put there the correct value?
Thanks
The problem is that you're specifying:
<a ... data-url="false" .../>
Twitter reads this value as the URL you're wanting to share, and is ultimately under the impression that the URL "false" has been shared 2,197 times. If you want to share a static URL, this attribute must relate to the URL of the page you're wanting users to Tweet about. If your page was http://example.com, for instance, you'd use:
<a ... data-url="http://example.com" .../>
(Which has been shared 1,492 times).
If you want to share the URL of the page the button is added to, you'd simply remove the data-url parameter altogether:
<a href="https://twitter.com/share"
class="twitter-share-button"
data-lang="en"
data-count="horizontal"
data-text="#{tw_listing(#data)}">Tweet</a>
If you need help with creating your Tweet button, you should refer to the official creation page at twitter.com/about/resources/buttons.
The code I want to run upon triggeting the redirect, is to go to another web page (or local html file, either is possible in this situation), however pass some javascript to run on that page, as that page works off embeding content in Iframes. This needs to be done to allow me to specify the content in the iframe upon redirect.
To put it simpler. How can I make it so when you go to website.com/about/, it redirects to website.com/ with the content for /about/ loaded in an iframe?
<head>
<title> CodeBundle </title>
<script>
function home() {document.getElementById("loadedpage").src="home.html";}
function about() {document.getElementById("loadedpage").src="about.html";}
function reviews() {document.getElementById("loadedpage").src="reviews.html";}
function tutorials() {document.getElementById("loadedpage").src="tutorials.html";}
function blog() {document.getElementById("loadedpage").src="blog.html";}
</script>
</head>
<body>
<header>
<br><hr><font size=27><a onClick="home();">Code Bundle</a></font><br><hr>
<div ALIGN=RIGHT>
<font size=6> | <a onClick="about();">About</a> | <a onClick="reviews();">Reviews</a> | <a onClick="tutorials();">Tutorials</a> | <a onClick="blog();">Blog<a> |</font> <hr>
</div>
<iframe id="loadedpage" src=home.html width=100% height=100% frameborder=0>Iframe Failed to Load</iframe>
</header>
</body>
</body>
this is my index.html for website.com/
I want to write a page so that when you go to website.com/about/ it redirects to website.com/ running the javascript function about(), so as to display the about page.
You will have to either pass some data using a query parameter or a fragment identifier.
See:
http://en.wikipedia.org/wiki/Query_string
http://en.wikipedia.org/wiki/Fragment_identifier
In either case you will have something present in the url and it will look like:
http://www.example.com/?page=about
or:
http://www.example.com/#about
or - this would be best:
http://www.example.com/#!/about
because it could let you make the website crawlable. See:
Making AJAX Applications Crawlable
Now after reading your comment to the answer by theredled that you "add new content regularly and loading that in embeded iframes is quicker than writing new html every time" I have to ask this: aren't you using a templating system in your website?
Keep in mind that making AJAX-loaded content and using fragment identifiers to display the right content is not done because the page creation is easier (it isn't) but because the user experience is faster and more responsive. See for example the website for the SoundJS library:
http://www.createjs.com/#!/SoundJS
When you click the link to PreloadJS at the top you go to:
http://www.createjs.com/#!/PreloadJS
The content is reloaded, the address bar changes, but the page is actually not reloaded. (You can see that it is properly crawlable because it shows in the results if you google for ReloadJS.)
Pass content by a user session ?
However, it's a quite dirty case, maybe you already know that :)