I have a site with menu tabs: Home, About, Work, Contact.
I'm using anchor tags for this one-page navigation.
But I don't want my url to update to something like this - http://example.com/#about or ../#work ..
I just want simply the default url on the address bar (http://example.com/) whenever I click on the menu tabs and jump to different sections of that one page.
I don't want to update the address bar.
How can I do that?
Thank you so much!
set id for each your container of pages (about,work etc.) then set href like this
About
then use this function
<script type="text/javascript">
function myscroll(myID){
var offset = jQuery("#"+myID).offset()
window.scrollTo(0,offset.top);
}
</script>
You have to use javascript in order to achieve that. Im not sure you can do it without changing the url, but there is : a nice way to do it.
If you really dont want your url to change, check this post
Related
I want to give a link for nav-tabs from another page. I mean to say that, I want to access nav-tabs from another page. I will give you the detailed information about it.
On my website there are two pages one is index.html page and another is a business-listing.html. In business-listing page I used nav-tabs. And I want to access these tabs from index.html page.
Give some idea how to give a link.
The code is too long, so I can't put it here.
I'm trying this code to give a link Link to Tab1, but it can't work.
You'd need to write some JavaScript code to make this work. The tab switching occurs when you click on a navbar link. Something like:
$(function () {
var tabId = window.location.hash;
$("#yourTabUl").find('a[href=' + tabId + ']').tab('show');
});
Replace yourTabUl with the ìd of your ul-element of the TabLinks. (Create an id if needed)
Also see the documentation here: https://getbootstrap.com/javascript/#tabs
I am a little bit newbie in the web development.
I’m creating a simple web page with a Nav Tag navigation, but I’m not pretty sure which is the best way to redirect to another pages.
For example I have the menu: Home, Services, Contact and when you click in one of them you will go to a page with the properly information.
I have seen this structure:
<nav>
HTML |
CSS |
JavaScript |
jQuery
</nav>
But where do you go ? To another page or a section on the same page?
I would like see the same original page and when you click in one item of the menu only changes the bottom of the web page.
So what way do you recommend to do this ?
I hope you could help me, thank you so much.
Just add
"Any Text you want, in you case: "go to bottom""</l>
After this create class at the botton of the page with same id
<div class="bottom" id="ex1">
If you want to go to bottom by clicking to the link add javascript at the end of the .html file just before "/body" closes
<script type="text/javascript">
$(document).ready(function() {
$("a.go").click(function () {
var elementClick = $(this).attr("href");
var destination = $(elementClick).offset().top;
$('html,body').animate( { scrollTop: destination }, 700 );
return false;
});
});
</script>
If you want to redirect and go to another page, create html file in the same directory(same folder). Then add a link
"Any text you want, in your case: go to another page"
I wonder if someone can guide me on how to remove the url label that appears at the bottom of the page when you hover over an anchor (I wonder if it's even posible). I've googled a lot and didn't find any answers.
Suppose I have
<a href="www.somepage.com" title="The Page">Link< /a>
in the bottom of the page there will appear a tooltip/label showing "www.somepage.com".
Please see here for an example
Thanks in advance!
You can use either Javascript or JQuery.
For example, you can set to A attribute "href=#" and add an attribute url=www.somepage.com something like this:
Link
If you click over this nothing happen.
Now, you need to apply with javascript or JQuery click event. The next example is using JQuery and Javascript:
At the bottom of page's body:
<script>
$('#link').click(function() {
var url = $(this).attr('url');
window.location.href=url;
});
</script>
I'm making a page that has 4 in-page tabs on it. To link to those tabs, the URL is
URL/#tab-1-tab; URL/#tab-2-tab etc
Now, in one of the tabs I want to have buttons that link to specific points on a page inside another tab, but not sure if it's actually possible to link to.
I've made the anchors on that page with
<a name="1"></a>
But I can't figure out how to link to them. I tried
URL/#tab-4-tab/#1 and URL/#tab-4-tab#1
Not sure what else to try. The links do work if I go to the tab with the anchors, then erase the tab url bit and just put in the anchor link, so instead of
URL/#tab-4-tab, I type in URL/#1
Then it jumps to the right point.
But that doesn't work if I'm on any other tab or page.
Is it possible to do this somehow?
If your using tabs to switch div CSS properties like display:none / display:block then you will need some jQuery / JavaScript to switch them based of URL no differently then your jQuery that listens for the tabs "onclick" event then shows that relative div.
First step would be to obtain a JavaScript URL reader that listens for variables or hashtag-bookmarks. Here is an example of a variable reader I have used before.
http://jsfiddle.net/googabeast/hhkuj/
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
//usage
var myVar = getUrlVars()["tab"];
That would make the URL format slightly different then your above posting, something more like "index.php?tab=2" / "index.php?tab=3" etc...
Next phase would be generate a switch based off the incoming URL variables to properly show the requested div.
In a SPA, using a navigation framework such as Sammy.js, how could I use in page named anchors for in-page navigation?
e.g. Say I have a route like localhost/myapp/#/somerecord/1 where the application loads somerecord with id = 1.
However somerecord is really complicated and long. I want to be able to jump to a certain section using a named anchor.
Say an article element is defined like <article id=section-d> ... </article> and I just link to like <a href=#section-d>Section D</a> it technically works, but the URL reads like localhost/myapp/#section-d, this breaks the navigation stack. Hitting the Back button takes me back to localhost/myapp/#/somerecord/1 and without jumping back to the top.
The preferred action would be to either jump back to the top or to the previous page. Any ideas on how to accomplish this?
Effectively, you have to define your URL as a regular expression, and allow an optional bookmark hash at the end of it; something like:
get(/#\/somerecord\/(\d+)(#.+)?/, function() {
var args = this.params['splat'];
var recordId = args[0];
var articleId = args[1];
});
This should match any of the following routes:
#/somerecord/1
#/somerecord/1# (treated as if there is no article id)
#/somerecord/1#section-d (articleId = '#section-d')
You should then be able to use the articleId to find the matching element and manually scroll. e.g. in the last route above, using jQuery you could do something like:
var $article = $(articleId);
$(document.body).animate({ scrollTop: $article.offset().top });
});
I've just written up a more comprehensive article about this (using Durandal), if you're interested: http://quickduck.com/blog/2013/04/23/anchor-navigation-durandal/
Edit
Link is dead. The article available here http://decompile.it/blog/2013/04/23/anchor-navigation-durandal/
I've had the same problem using durandal with sammy.js. Basically, you have to create a (invisible) route for each anchor you want on your page. See a post from me about the solution I found: http://papamufflon.blogspot.de/2013/04/durandal-scrollspy.html