I am sorry for the title. I don't no how to write the title for the below scenario .
The below question would be easier for an expert. Kindly bear with my English.
I am creating a single page portfolio. In the web site I have top menu,breadcrumb,content & footer.
If i click any menu or submenu the corresponding div is loading properly but I want to change my breadcrumb dynamically based on the menu
Here is the HTML code for top menu
<div id="eyMenuNav">
<ul id="navmenu">
<li class="on">
<a class='link1' href="#first">Article on Technology</a></li>
<li>
<a class="sub" href="#">Success Stories</a>
<ul>
<li>
<a class='link2' href="#second" onclick="onctext();">Customer Quotes</a>
</li>
<li>
<a class='link3' href="#third" onclick="onctext();">CSS, Appreciation - Metrics</a>
</li>
<li>
<a class='link4' href="#four" onclick="onctext();">Lesson Learnt</a>
</li>
</ul>
</li>
<li>
<a class='link5' href="#five">Hexaware Key Contributor</a>
</li>
</ul>
</div>
Here is the HTML code for breadcrumb
<div id="eyBreadCrumb">
<ul>
<li>
<a id="crumb" href="#"><!-- Here I need update my breadcrumb based on the link which i clicked -></a>
</li>
</ul>
<!-- Clearing Element -->
<div style="clear:both;"></div>
<!-- end breadcrumb --> </div>
Here Is the code for javascript which i tried it is working for one menu click but i want for all.
function onctext()
{
document.getElementById("crumb").innerHTML="Success Stories - Customer Quotes";
}
Kindly help me for the above scenario
Note : I am not using jquery only iam working with javascript.
Thanks
Mahadevan
Add this parameter to your onctext() call, so your menu items look like so:
<a class='link3' href="#third" onclick="onctext(this);">CSS, Appreciation - Metrics</a>
And then change your onctext function to retrieve the text from this:
function onctext(elm) {
var text = elm.innerHTML;
document.getElementById("crumb").innerHTML = text;
// set active class
var active = document.getElementsByClassName('active')[0];
if (active) {
active.className = active.className.replace(' active', '');
}
elm.className += ' active';
}
Related
I use the following code to create a toggle menu for mobile versions and It works fine but I want to generate a sub menu below a menu item. For example I want to have to create two sub tabs for SERVICES item like New and Used to be appeared only when the user clicks on SERVICES. Anybody can help me doing this?
HTML
<nav id="navigation">
<a class="menu_button" href="#footer_nav" onclick="toggleNav(); return false;">☰ MENU</a>
<ul id="navigation_list" role="navigation">
<li><a href=#>HOME</a></li>
<li><a href=#>SERVICES</a></li>
<li><a href=#>WORK</a></li>
<li><a href=#>CONTACT</a></li>
</ul>
</nav>
Javascript
var originalNavClasses;
function toggleNav() {
var elem = document.getElementById('navigation_list');
var classes = elem.className;
if (originalNavClasses === undefined) {
originalNavClasses = classes;
}
elem.className = /expanded/.test(classes) ? originalNavClasses : originalNavClasses + ' expanded';
}
From http://blog.g-design.net/post/42617934013/create-an-accessible-toggle-menu-for-mobile
Thanks
You simply just create another list inside of the SERVICES list item. You can initially hide the list, and when you want to see it, via clicking, you just display it.
<nav id="navigation">
<a class="menu_button" href="#footer_nav" onclick="toggleNav(); return false;">☰ MENU</a>
<ul id="navigation_list" role="navigation">
<li><a href=#>HOME</a></li>
<li id="services-item">SERVICES
<ul id="sub_list" style="display: none;">
<li>NEW</li>
<li>USED</li>
</ul>
</li>
<li><a href=#>WORK</a></li>
<li><a href=#>CONTACT</a></li>
</ul>
</nav>
If you want to see the list when you click SERVICES, you need to add javascript, or a JS library, to do so:
//jQuery
$('#services-item').on('click', function() {
$('#sub-list').toggle();
)};
This method does not allow SERVICES to direct the user to a page. If you need it to direct a user to a page, then just add an icon beside the SERVICES text that toggles the sub-list when clicked.
I've created a simple menu bar using bootstrap. now i want the user to be able to edit the items on the list including the links on the menu, add, delete etc. How do i do this using just frontend code like javascript etc?
Code:
<div id="sidebar">
<ul class="sidebar-nav">
<li class="sidebar-menu">
<a>MENU</a>
</li>
<li>
Link #1
</li>
<li>
Link #2
</li>
<li>
Link #3
</li>
<li>
Link #4
</li>
</ul>
</div>
What you're looking for is possible with vanilla Javascript, jQuery, or a host of other libraries. jQuery is where I'd recommend you start.
You can create new elements by passing html elements as strings to the jQuery function. See the "Creating New Elements" section of this page. Using append and remove as Muzammil mentioned, you can add and remove elements from the DOM.
I've created a small jsFiddle demonstrating some of the functions I'm talking about and how you might use them. This is a limited demo that doesn't include every feature you'd want for a full implementation, but uses some of the pertinent jQuery functions.
HTML
<div id="sidebar">
<ul class="sidebar-nav">
<li class="sidebar-menu">
<a>MENU</a>
</li>
<li>
Link #1
<button class="delete-link">Delete</button>
</li>
<li>
Link #2
<button class="delete-link">Delete</button>
</li>
<li>
Link #3
<button class="delete-link">Delete</button>
</li>
<li>
Link #4
<button class="delete-link">Delete</button>
</li>
</ul>
<div class="input-field">
<label for="link-title">Enter link title</label>
<input type="text" class="link-title" name="link-title" placeholder="link Title" />
</div>
<div class="input-field">
<label for="link-title">Enter link URL</label>
<input type="url" class="link-url" name="link-url" />
</div>
<input type="submit" class="add-button" value="Add" />
</div>
Javascript w/ jQuery
var $addButton = $('.add-button');
var $sidebarMenu = $('.sidebar-nav');
// Add the event handlers
$(document).on('click', '.delete-link', removeLink);
$addButton.on('click', addLink);
function removeLink(e) {
// Remove the parent <li> element of the clicked link
var $link = $(e.currentTarget).closest('li');
$link.remove();
}
function addLink(e) {
e.preventDefault();
var $linkTitle = $('.link-title');
var $linkUrl = $('.link-url');
// Create the new link element using values from text inputs
var $link = $('<li>').append(
$('<a>').attr('href', $linkUrl.val()).text($linkTitle.val()));
// Add a delete button for the link
$link.append($('<button>').addClass('delete-link').text('Delete'));
$sidebarMenu.append($link);
// Reset the text inputs
$linkTitle.val('');
$linkUrl.val('');
}
you can use jquery to achieve this, the following function will help you : append, remove, html, text
I've got an html menu as below...
<ul class="menu" id="menu">
<ul class='section' id='section_1'>
<li><span id='section_title_1' class='section_title'><a href='#' id='section_link_1'>Against the odds.</a></span>
<ul>
<li id='exhibit_1' class='exhibit_title'> → Introduction
</li>
<li id='exhibit_2' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> → Deriving functions</a>
</li>
<li id='exhibit_3' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> → Exploiting odds</a>
</li>
<li id='exhibit_4' class='exhibit_title'><a href='../against-the-odds/betting_history'> → Betting history</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_2'>
<li><span id='section_title_2' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_2'>Remembering everything.</a></span>
<ul>
<li id='exhibit_104' class='exhibit_title'><a href='#'>black swans</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_5'>
<li><span id='section_title_5' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_5'>Running faster.</a></span>
<ul>
<li id='exhibit_107' class='exhibit_title'><a href='#'>possible areas to explore</a>
</li>
<li id='exhibit_108' class='exhibit_title'><a href='#'>developing the model</a>
</li>
<li id='exhibit_109' class='exhibit_title'><a href='#'>performance</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_4'>
<div class='bot'>
<p>twitter
<br />
facebook
</p>
</div>
</ul>
</ul>
It's composed of several "sections" which house links (relevant to the section). Each section has a main title (e.g. Against the odds.) and several sub-sections (which are stored in another ul) like "deriving functions". The subsections are set to display: none by default (I have jQuery which opens the sub-sections if the user wishes to).
The problem:
Once the user clicks on a sub-section link (e.g. www.themathsproject.co.uk/against-the-odds/deriving-functions), I want the sub-section which houses the link (in the case id=section_1) to be open on the page reload so that the user can easily navigate to other links in the section. The other sub-sections would remain closed.
I would like to write a jQuery function which compares the current page url to the links in each section, and, if it finds a match, assign the "active_section" class to the relevant section. Unfortunately, I don't know how to do this.
I've been stuck on this all day and have made little headway.
I would greatly appreciate any help,
Jack
Your post is a little chaotic, so I will try to give you a general tips.
To get last element of your url use
var name = window.href.substr(this.href.lastIndexOf('/') + 1)
Now you can get all your subsections and iterate over them (for example using jQuery):
$('.sub-section').each(function() {
if ($(this).attr('id') === name) {
$(this).addClass('active');
}
});
If your ID's are different than names in url, you can create dictionary to map your equivalents:
var sectionMap = { "section-name-1": "sectionID1" };
And after you get url using first line of code I have provided, you can do:
name = sectionMap[name];
I have a top menu with some items that have sub-items. If the user clicks on an item that has sub items, I want these sub-items to be displayed in the bottom menu, so that when one reaches the bottom of the page it is easy to continue to a another sub-item.
Example: If the user clicks on "First" it should look like below.
<nav id='top-menu'>
<ul>
<li>
<a href='#'>First</a>
<ul>
<li>
<a href='#'>Sub-first</a>
</li>
<li>
<a href='#'>Sub-second</a>
</li>
</ul>
</li>
<li>
<a href='#'>Second</a>
</li>
</ul>
</nav>
<article>
Article text
</article>
<nav id='bottom-menu'>
<ul>
<li>
<a href='#'>Sub-first</a>
</li>
<li>
<a href='#'>Sub-second</a>
</li>
</ul>
</nav>
<details>
<summary>Heading #1</summary>
<nav>
Link A
</nav>
</details>
<details>
<summary>Heading #1</summary>
<nav>
Link B
</nav>
</details>
with out jquery by using html5 we can do it,if you dont like comment i will update with jquery more..in fiddle
if you are using jQuery you can try something like this:
var $bottomContainer = $('#bottom-menu');
$('#top-menu a').on('click', function(e){
e.preventDefault();
var $submenu = $(e.target).siblings('ul');
if (!$submenu.length) return;
$bottomContainer.empty().append($submenu.clone());
});
I have a label in navigational breadcrumb:
<li>Eligibility</li>
Please keep in mind, i am very new learning .NET.
On this page there is iFrame content, where you click a link to view the respective content:
<ul id="ss-categories" >
<li class="eligibility">
<a href="#" onclick="ChangeFrame('mem_eligibility.aspx');")>Eligibility</a href>
</li>
<li class="deductible">
<a href="#" onclick="ChangeFrame('mem_deductible.aspx');")>Deductible</a href>
</li>
<li class="claims"><a href="#" onclick="ChangeFrame('mem_claims.aspx');")>Claims & EOBs</a href>
</li>
<li class="benefits">
<a href="#" onclick="ChangeFrame('mem_benefits.aspx');")>Benefits</a href>
</li>
<li class="hospital">
<a href="#" onclick="ChangeFrame('mem_priorAuth.aspx');")>Hospital Admissions</a href>
</li>
<li class="priorauth">
<a href="#" onclick="ChangeFrame('mem_Inpatient.aspx');")>Prior Authorizations</a href>
</li>
And the iFrame displays the content based on the link you click:
<iframe id="ctl00_middleContent_frame1" style="float:left" scrolling="auto" frameborder="0" height="400" width="100%" src="mem_eligibility.aspx">
In that navigational breakcrumb at the top, how would i code it so that it will change, based on the section of content displayed in the iFrame.
i.e. (in lehmans terms)
if iFrame src="mem_elibigility.aspx" {
document.write = 'Eligibility'
}
if iFrame src="mem_deductible.asps" {
document.write = 'Deductible'
}
Hope that makes sense, and yes i know my code is complete garbage... and is not structured right, but thats not my job at the moment...
Updated Version:
The following stores the urls that control your iFrame as title attributes and it uses jQuery to set the title of your "header" area. I tried to clean up a bit of the code as well, but this should work for exactly what you need:
jQuery (Example):
$(document).ready(function(){
$('#ss-categories li').click(function()
{
var test = $(this).text();
$("#title").text(test);
//Code to change iframe based on property of the item clicked goes here
var title = $(this).attr("title");
$('#ctl00_middleContent_frame1').attr('src', title);
});
});
HTML (Example):
<ul id="ss-categories" >
<li class="eligibility" title="mem_eligibility.aspx">
Eligibility
</li>
<li class="deductible" title="mem_deductible.aspx">
Deductible
</li>
<li class="claims" title="mem_claims.aspx">
Claims & EOBs
</li>
<li class="benefits" title="mem_benefits.aspx">
Benefits
</li>
<li class="hospital" title="mem_priorAuth.aspx">
Hospital Admissions
</li>
<li class="priorauth" title="mem_Inpatient.aspx">
Prior Authorizations
</li>
<li id="title" style="font-size: x-large; font-weight: bold">Eligibility</li>
<iframe id="ctl00_middleContent_frame1" style="float:left" scrolling="auto" frameborder="0" height="400" width="100%" src="http://www.google.com">
Try this demo to see if that is the functionality you want : Updated Demo
Older answer:
Is something like this demo what you are looking for?
Code:
$(document).ready(function(){
$('#ss-categories li').click(function()
{
var test = $(this).text();
$("#title").text(test);
//Insert logic here to change iFrame based on clicked item
});
});
It creates a function that will grab the "name" of one of your links in the list and it will display that in your "title" area. If I understood you correctly - I think this will do what you need.