I would like to make a simple drop down menu when you click your choice from the list, it acts as a link.
Sorry for title being so ambiguous, I just do not have any idea what to call this.
The easiest way is to create a select list with attributes representing the links, then use JavaScript to jump to a link when it's clicked.
But a more accessible way would be to create a list of links, then use JavaScript to construct a select list from them. This way, the links would still work if JavaScript was turned off.
With jQuery, something like:
Link 1
Link 2
And your script is:
var $sel = $("<select/>")
.appendTo("body")
.change(function() {
document.location.href = $sel.val();
})
$("a").each(function() {
$("<option/>")
.appendTo($sel)
.val(this.href)
.html(this.innerHTML)
});
Do you mean that when you select an option from a drop-down, the browser goes to a different URL?
If so, here's a good page that describes how to accomplish that: http://www.davesite.com/webstation/js/theory1jump.shtml
Related
I wonder if there is any way to, on a page of my website, show a link or a div only if the visitor subscribed to my channel, with api's or something ? I already saw something like this with facebook in the past but now i'd like to use this kind of thing. Is it possible in any kind of way ?
you can achieve this in many ways depending on how are you checking witherthe user is a subscriber or not
if you store this in a bool value then all you need is a bit of javascript
<html>
body>
<a href ="#" class = "hidden"/>
</body>
$(function(){
var isSubscribed = //Here the value;
if(isSubscribed )
{
$(a).removeClass('hidden');
}
})
if you are using any server side language then it will be far easier
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
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
Is it possible to make a whole table as link?
I have a table which displays some statistical data, I wish to add up an additional functionality to this table so that .. when a user clicks on any part of the table, webpage should guide him/her to new page.
It's not really possible. However, it can be easily emulated with JavaScript. You just need to asign an onclick event handler to the table and make it change the document.location property:
var myTable = document.getElementById("my-table");
myTable.onclick = function(){
document.location.href = "http://example.com";
}
You can also provide and adequate cursor with some CSS:
table#my-table{
cursor: pointer;
}
put a around your table
The biggerLink plugin for jQuery does pretty much what Álvaro G. Vicario suggested and it has a few extra niceties such as title attribute handling and :hover handling.
I want to find and replace functionality in contentEditable div. I want to add one toolbar in which one find and replace button placed. when one press this button then one popup window open and ask for keyword to search when keyword is given then it will find only in given div id not whole document and highlight it.
Is this jquery plugin what you are looking for?
You can call it like this:
jQuery(function()
{
var options =
{
exact:"exact",
keys:"lorem ispum"
}
$("#myDiv").SearchHighlight(options);
});