I'm trying to convert my five-item navigation menu (with internal links on the same page) to a dropdown menu at a certain width.
I've followed the directions from here exactly but the creator doesn't mention how to include internal links in the dropdown. I'm obviously missing something, but does anybody know how to include a simple internal link (e.g. #, #aboutme, #contact) within the
<select>
element?
Thanks
here's the fiddle - it's almost exactly the same as the link above
Look well at the link you provide:
Then to make the dropdown menu actually work...
$("nav select").change(function() {
window.location = $(this).find("option:selected").val();
});
So in your markup it looks like:
<option value="#books">Books</option>
Where value is the reference to go.
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'm inexperienced at coding and trying to build a pretty simple site with some HTML and CSS in Dreamweaver. I'd like my navigation menu to highlight the current page a viewer is looking at, and I've found different ways to do this. However, to make life easier as the site evolves, I've made the navigation menu an uneditable region of a template. I'm therefore finding myself unable to make the coding changes (e.g., giving a unique class to each link or a unique body id to each page) to each page that would seemingly allow me to highlight the current page link. Thanks!
A simple way to do this is with Dreamweaver template attributes which allow you to have editable tag attributes:
https://helpx.adobe.com/dreamweaver/using/defining-editable-tag-attributes-templates.html
While editing your template, if you put your cursor on the nav item class, you could then go to Modify > Templates > Make Attribute Editable.
Then, when editing the page based on the template, you'll be able to add an active class.
You could use jQuery for this to detect a word in url:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function($) {
if(window.location.href.indexOf("contact") >= 0){
$(".contactLink").addClass("active");
}
});
</script>
<style>
.active { color: black; font-weight: bold }
</style>
contact
This could add a class to the menu item that has the word "contactLink" as a class. So long as you have this js on all pages (put it in a file rather than hard coded on all pages) it will work. If you copy the above code into a page called test.html the link is normal. change the name to contact.html and it goes black..
Give each menu item a class, and then duplicate the code above for however many items you have.
There are more dynamic ways of doing it, but if you don't have millions of pages, is a nice easy way.
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
Ok, so I've been researching for some time now, without any luck, a way to to access different areas of a single page from a list of links in a dropdown sub-menu that currently contains five (5) working links that go to different pages.
What I'd like to do is keep the separate links for each piece of content, but combine the information from these pages to a single page and then link those specific areas from the existing dropdown menu / sub-menu links.
Can this be done? I understand about anchor tags and have tried to see how I can use them here but it doesn't appear to be an option since I'm not trying to link from within a page, rather from sub-menus in a dropdown menu?
Any thoughts or ideas would be greatly appreciated, if this is in fact possible! Thanks...
BTW: not sure if it's going to make a difference, but this site is in WordPress.
Use jquery and following code
HTML:
<select id="_selectPlatform" name="_selectPlatform" onChange=selectPlatformChange();>
<option value="default">Select</option>
<option value="Android">Android</option>
<option value="Blackberry">BlackBerry</option>
<option value="IOS">IOS</option>
<option value="Others">Others</option>
</select>
and script code
function selectPlatformChange() {
var _selectPlatform = $('#_selectPlatform').val();
if (_selectPlatform == 'Android') {
window.location.href = 'androidpage.html';
}
}
it will work
Using mootools.js 1.3.2 and mootools-more.js
As far as I can tell this is supposed to reveal the div and also hide the content and linkTab divs at the same time.
$('blogLink').addEvent('click', function(){
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
});
This is the HTML
Blog
<div id="blogContent">
content here
</div>
It all works properly and that's OK but in addition to this, I also want to be able to give people a URL like http://mysite.com/#blogLink and have that blogContent div opened. When I do that now, it takes me to the top of the page and the blogContent div is hidden.
How do I do achieve that? I did try adding the mootools-smoothscroll.js and using the method outlined here http://davidwalsh.name/smooth-scroll-mootools but that just broke the entire page - would not load properly.
I have zero experience with mootools and weak on Javascript so please excuse me if I take a while to 'get' what you're trying to explain.
Many thanks.
First, are you particularly attached to MooTools? If you're a JavaScript newbie, jQuery is probably easier to use and definitely has a larger support community. But I'll post a solution that should work in MooTools for now:
If I understand you correctly, what you want to achieve is the following:
The anonymous function you posted will run when "Blog" is clicked
The function will also run if someone visits the page with #blogLink in the URL.
That's not too difficult to achieve:
// Once the DOM has loaded - so that our elements are definitely available
window.addEvent('domready', function() {
// Check for #blogLink hashtag, and reveal blog
if(window.location.hash == 'blogLink') { revealBlog(); }
// Make sure blog is revealed when link is clicked
$('blogLink').addEvent('click', revealBlog);
});
function revealBlog() {
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
}
You could also change your link mark-up to:
Blog
To make sure they're always on the correct link when the blog is revealed.