Load dynamic content in div from different navbars - javascript

On one page, alphabet.php, in my project I have a sidebar further down on the page that loads diverse php-pages in a Content div. Like this:
HTML SideMenu
<nav id="sideMenu">
<ul class="list-unstyled components">
<li id="a">A</li>
<li id="b">B</li>
<li id="c">C <span class="caret"></span>
<ul>
<li id="c1">C1</li>
<li id="c2">C2</li>
</ul>
</li>
</ul>
</nav>
<div id="Content">
<h2>Lorem bla bla</h2>
<p>lorem bla bla </p>
</div>
JS
$(function() {
'use strict';
var newHash = '',
$content = $("#Content");
$("#sideMenu").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function() {
newHash = window.location.hash.substring(1);
$content.load(newHash);
console.log(newHash);
});
});
The same content should be loaded also when you click the topmenu and footer navigation. And at the same time scroll to the Content div.
HTML MainMenu
<li class="dropdown"><a href="#alpha" class="dropdown-toggle" data-
toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Alphabet <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-left" role="menu" id="alpha">
<li>A
</li>
<li>B
</li>
<li>C
<ul class="dropdown-menu dropdown-menu-left" role="menu">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>
</li>
I solved the JS for the main-menu with this code
$(function() {
'use strict';
if(location.hash) $('#Content').load(location.hash.substring(1));
$('#alphaa').click(function() {
$('#Content').load(this.hash.substring(1));
});
});
EDIT: I changed the URL in MainMenu to alphabet.php#a.php etc., and it loads the content into the div IF you are on the current page (alphabet.php). Not if you're on another page.
EDIT 2: Solution for the main-menu JS. Now everything works fine but I guess you could make it prettier without two different js functions for the main-menu and the side-menu, but for now I'm pleased with this. It works!

Here is how i am able to do the navigation
i wrote the links like:
<a class="nav-link" href="javascript:void(0);" data-href="/page1.html #div1">Page 1</a>
<a class="nav-link" href="javascript:void(0);" data-href="/page2.html #div2">Page 2</a>
<a class="nav-link" href="javascript:void(0);" data-href="/page3.html #div3">Page 3</a>
If you use javascript:void(0) in your href= then you don't need to call the event.preventDefault.
then in my scripting side i wrote:
$(window).on('load', function () {
$('.nav-link').on('click', function () {
var linkPage = $(this).attr('data-href');
if (linkPage !== undefined)
{
$('#content').load(linkPage);
}
});});
Note
One thing you need to make sure is that domain of the calling page and pages from which the data has to come should be the same or else you will have the cross-domain issue.
Edit 1
The #div1,#div2,.#div3 are basically the ids of the div on their respective pages from which the data has to be fetched.
for example if i have some content on my pages like this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Page 1</title>
</head>
<body>
<div id="div1">
hi i am the content of page 1
</div>
</body>
</html>
So, when someone clicks on the menu links the load function will go to the particular page (which is in our case the page1.html or any other) and return the HTML contents of div with id as div1 and load the data to the particular div(i.e. div with id content).
Edit 2
The JQuery's Load() is better explained on this Jquery Load you can use this to understand more about it.
So, what i think you are doing is you are creating a request to a /page1.html from the domain www.example.com, in that case load function will call the www.example.com/page.html and will load the contents of the page but if you make a request to other any other page let say /page11.html from the domain www.example.com/page2.html then the load() will create this www.example.com/page2.html/page11.html url which is not correct and hence it will not load any content.
So,what you can do is either you can put the whole url on the of the page i.e. www.yourdomain.com/page.html #divid in the attribute data-href or you can create the particular url on the javascript calling funciton like:
$(window).on('load', function () {
$('.nav-link').on('click', function () {
var linkPage = $(this).attr('data-href');
if (linkPage !== undefined)
{
var pageUrl = window.location.origin+'any other seperation for the pages
if any'+linkPage;
$('#content').load(pageUrl);
}
});
});
Here the window.location.origin is going to give you the domain on which the website is running regardless of hashes or slashes and then it will concate it with the linkPage and will make the proper url for the called page.

Related

How to get a link that do nothing

I have created a search engine using Angular and Bootstrap. I have created different results tab as shown in image Tabs . Right clicking on tab does not show the option of a link as we get on any link.
link on right click
Currently I am using <li> tag and bootstrap to create the tabs of different result section. Here is the code for that
<ul type="none" id="search-options">
<li [class.active_view]="Display('all')" (click)="docClick()">All</li>
<li [class.active_view]="Display('images')" (click)="imageClick()">Images</li>
<li [class.active_view]="Display('videos')" (click)="videoClick()">Videos</li>
<li [class.active_view]="Display('news')" (click)="newsClick()">News</li>
<li class="dropdown">
<a href="#" id="settings" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Settings
</a>
<ul class="dropdown-menu" aria-labelledby="settings" id="setting-dropdown">
<li routerLink="/preferences">Search settings</li>
<li data-toggle="modal" data-target="#customization">Customization</li>
</ul>
</li>
<li class="dropdown">
<a href="#" id="tools" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Tools
</a>
<ul class="dropdown-menu" aria-labelledby="tools" id="tool-dropdown">
<li (click)="filterByContext()">Context Ranking</li>
<li (click)="filterByDate()">Sort by Date</li>
<li data-toggle="modal" data-target="#myModal">Advanced Search</li>
</ul>
</li>
</ul>
After clicking on the link everything is handled by the functions which get executed on click event. All I want to do that is make that a link, so that user can open it in new tab and state of the app should not change at all. How that is possible? I have tried to do that using routing but things became more complicated. i also followed some answers from here Make a HTML link that does nothing (literally nothing) but they do not work. Please help. I have tried all the answers from there opening link in new tab just disturbs the state of URL.
Using will make the page scroll to the top.
Use javascript:void(0):
Clicking here does nothing
Or equivalently, use javascript:;:
Clicking here does nothing
Or, with HTML5, just omit the href attribute:
<a>Clicking here does nothing</a>
You can use event.preventDefault() to prevent the default action of the link from being taken.
Valid Link<br>
<button id='hitMe'>Disable link</button>
<br/>
<button id="enable">Enable link</button>
<script>
document.getElementById('hitMe').onclick = function() { // button click
document.querySelectorAll('a').forEach(a =>{
a.onclick = function(e){
e.preventDefault();
return false;
}
});
};
document.getElementById("enable").onclick = function(){
document.querySelectorAll('a').forEach(a =>{
a.onclick = null;
});
}
</script>
By clicking the button, no more links will be followed.
Like this you still have the hover destination preview. Like google.de etc...
document.getElementById('hitMe').onclick = function() { // button click
[...document.querySelectorAll('a')].forEach(function(el){
el.onclick = function( e ) { // all 'a'
return false;
}
});
};
Valid Link<br>
<button id='hitMe'>Disable link.</button>
use
javascript:;
as href attribute
and add
event.preventDefault()
onclick method.
Click me

How do I load id element when clicking url

I want to load content inside ID when i click on a url that defined like this : /route/#id.
What I have right now doesn't work when I'm switching between /route/#id1 and /route#id2. When I first click on the link it works. The id element show up. But when I switch to another url from the same page, the id element doesn't display. It just shows a blank page
urls
<li class="dropdown nav_about {$activeBrands}">BRANDS
<ul class='sub-menu'>
<li> link1 </li>
<li> link2 </li>
</ul>
</li>
content
<div id="link1" style="display:none;">
content
</div>
<div id="link2" style="display:none;">
content
</div>
script
<script>
$(function(){
var url = window.location.href;
console.log(url);
var urlId = url.match(/#.*/)[0];
showDiv(urlId);
});
function showDiv(option){
$(option).show();
}
</script>
You should use window.location.hash instead.
For a url
http://www.domain.com/somepage?#asf1234
the value of window.location.hash will be
#asf1234
Note that # is the first character

jQuery - using the same function (ToggleNav/Dropdown) on multiple ID's

I'm trying to make multiple dropdown menu's on my website and I am using this jQuery for this:
$(function() {
var pull = $('#pull');
menu = $('#nav');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
Here's the html part:
<nav class="container">
<a href="#" id="pull" style="display:block;">
<h3>Menu</h3>
</a>
<ul id="nav" style="display:none;">
<li>Pizza</li>
<li>Pasta</li>
<li>Burger</li>
<li>Specials</li>
<li>Drinks</li>
</ul>
</nav>
It works wonderful if I only have one drop down menu but as soon as I add another one, only one of them (doesn't matter if it's two, three or more then) is actually dropping down.
I gave every Menu it's own ID and copied the code every time and replaced the ID's but this doesn't work.
Already looked into this (using the same function of different events ) or this (Jquery - use the same function for multiple requests) and other threads but i can't figure out how to apply this on my code...
Here's my Jsfiddle on what I'm trying to do: https://jsfiddle.net/thwdyccr/2/
Use classes instead of ids, and then you can make the same code work for all cases (fiddle):
$(function () {
var pull = $('.pull');
$(pull).on('click', function (e) {
e.preventDefault();
var menu = $(this).next();
menu.slideToggle();
});
});
<nav class="container"> <a href="#" class="pull" style="display:block;">
<h3>Menu1</h3>
</a>
<ul class="nav" style="display:none;">
<li>Pizza
</li>
<li>Pasta
</li>
<li>Burger
</li>
<li>Specials
</li>
<li>Drinks
</li>
</ul>
</nav>
<nav class="container"> <a href="#" class="pull" style="display:block;">
<h3>Menu2</h3>
</a>
<ul class="nav" style="display:none;">
<li>Pizza
</li>
<li>Pasta
</li>
<li>Burger
</li>
<li>Specials
</li>
<li>Drinks
</li>
</ul>
</nav>
Try this:
https://jsfiddle.net/thwdyccr/5/
Rather than using IDs - consider using a class instead - this'll save you lots of duplication in your code (as essentially it's all doing the same thing).
You can specify the target selector (e.g. the element you want to show) by traversing your structure with .parent() .children() or .find()
If you're wondering why I am storing $(this) in var element - it is because the browser has to figure out what $(this) is each time you use it - so it's good practice to store it in a variable.
HTML
<nav class="container">
<a href="#" class="pull" style="display:block;">
<h3>Menu1</h3>
</a>
<ul class="nav" style="display:none;">
<li>Bear</li>
<li>Pasta</li>
<li>Burger</li>
<li>Specials</li>
<li>Drinks</li>
</ul>
</nav>
<nav class="container">
<a href="#" class="pull" style="display:block;">
<h3>Menu2</h3>
</a>
<ul class="nav" style="display:none;">
<li>Fish</li>
<li>Pasta</li>
<li>Burger</li>
<li>Specials</li>
<li>Drinks</li>
</ul>
</nav>
JS
$(function() {
$(".pull").click(function(e) {
e.preventDefault();
var element = $(this);
element.parent('nav.container').children("ul.nav").slideToggle();
});
});
You shouldn't use id's for pull. Here's an updated fiddle https://jsfiddle.net/thwdyccr/2/.
Try utilizing Attribute Starts With Selector [name^="value"] [id^=pull] , e.target.parentElement.nextElementSibling to select next ul to call .slideToggle() on
$(function() {
var pull = $("[id^=pull]")
, menu = $("[id^=nav]")
, menuHeight = menu.height();
pull.on("click", function(e) {
e.preventDefault();
$(e.target.parentElement.nextElementSibling).slideToggle();
});
});
jsfiddle https://jsfiddle.net/wpvok7gy/1/

How to change active class at each link click in jQuery?

I have an MVC app, where in the _Layout.cshtml file I have something like this:
<div class="collapse navbar-collapse">
<ul class="nav pull-right navbar-nav">
<li id="home" class="active"><a id="homeLink" href='#Url.Action("Index", "Home")'>Home</a></li>
<li id="about"><a id="aboutLink" href='#Url.Action("About", "Home")'>About Us</a></li>
<li><a href='#Url.Action("Services", "Home")'>Services</a></li>
<li><a href=''>Blog</a></li>
<li><a href='#Url.Action("Contact", "Home")'>Contact</a></li>
</ul>
</div>
So the point is that when the website starts, the first link is set to active, then after each link click I want to set that one's class to active. I guess I need to write some jQuery code, but I cannot seem to figure out the answer.
UPDATE:
<ul class="nav pull-right navbar-nav">
<li id="Home" class="active"><a href='#Url.Action("Index", "Home")'>Home</a></li>
<li id="About"><a href='#Url.Action("About", "Home")'>About Us</a></li>
<li id="Services"><a href='#Url.Action("Services", "Home")'>Services</a></li>
<li id="Blog"><a href=''>Blog</a></li>
<li id="Contact"><a href='#Url.Action("Contact", "Home")'>Contact</a></li>
</ul>
main.js
$(function () {
$('a').click(function () {
$(this).closest('ul').find('li').removeClass('active');
$('#' + '#ViewBag.Title').addClass('active');
});
});
Example views:
#{
ViewBag.Title = "Services";
}
#{
ViewBag.Title = "Contact";
}
The following script will add the active class
$('a').click(function(e) {
// uncomment the following line to prove it
// e.preventDefault();
$(this).closest('ul').find('li').removeClass('active');
$(this).closest('li').addClass('active');
})
however, since your clicking on a link you don't even see it because you immediately redirect to another page using the same layout where the active class applied to the first li element (the new view has no knowledge of what you did on this page).
Since you seem to be wanting to highlight the li element relating to the current page, one option would be to give your li elements an id attribute matching the ViewBag.Title property and use that to apply the class.
<div class="collapse navbar-collapse">
<ul class="nav pull-right navbar-nav">
<li id="home">#Html.ActionLink("Home", "Index", "Home")</li>
<li id="about">#Html.ActionLink("About Us", "About", "Home")</li>
<li id="services">#Html.ActionLink("Services", "Services", "Home")</li>
....
</ul>
</div>
and the script
$('#' + '#ViewBag.Title').addClass('active');
Then in the Index.cshtml view,
#{
ViewBag.Title = "Home"; // or "About" for About.cshtml, "Services" for Services.cshtl etc.
Layout = "~/Views/Shared_Layout.cshtml";
}
Assuming you aren't doing anything to alter the way the links fire (loading content with ajax), you can compare the href of the links to the current url to figure out which one should be active.
$('.navbar-nav ul').children().each(function() {
var link = $(this).find('a'); // or var link = $(this).children('a');
if (link.attr('href') == location.href) {
$(link).addClass('active');
return false;
}
});
All you'll need is to make sure the link href is formatted the same way it will appear in the url (relative vs absolute).

how to active parent ul li after page refresh or click on sub menu link

how do i keep selected tab active after page reload or refresh i have working on drop line navigation menu
function is working fine for parent ul li and also parent active when click on parent link
but problem is that when i click on sub menu link and redirect to another page then clicked parent ul li didn't active and every-time Home Tab active or highlight whenever page refresh or redirect to another page
for example i want like this
Account Menu is parent menu and child menu like user profile and user accounts
when i click user profile or user accounts script should active or highlight
Account Menu Tab Not Home Tab
Here Javascript
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function () {
$("li:first-child").addClass("active");
$('li').click(function () {
$('.secondary li').removeClass('active');
$(this).addClass('active');
});
})
});//]]>
</script>
Html Code
<div role="navigation" id="navPrimary">
<ul class="secondary">
<li >Home</li>
<li>Account Menu
<ul>
<li>OVERVIEW</li>
<li>EDIT PROFILE</li>
<li>MANAGE EMAILS</li>
<li>EDIT PASSWORD</li>
<li>CREDIT CARDS</li>
<li>BANK ACCOUNTS</li>
<li>CLOSE ACCOUNT</li>
<li>LOGOUT</li>
</ul>
</li>
<li>Payments Menu
<ul>
<li>OVERVIEW</li>
<li>EDIT PROFILE</li>
<li>MANAGE EMAILS</li>
<li>EDIT PASSWORD</li>
<li>CREDIT CARDS</li>
<li>BANK ACCOUNTS</li>
<li>CLOSE ACCOUNT</li>
<li>LOGOUT</li>
</ul>
</li>
<li>Request Money
<ul>
<li>Manage Invoices</li>
<li><a href="" >Request Money</a></li>
<li><a href="" >Create Invoice</a></li>
<li><a href="" >Invoice Settings</a></li>
</ul>
</li>
<li><a href="#" >Merchant Services</a></li>
<li><a href="#" >Products & Services</a></li>
</ul>
</div>
Updated Javascript but not working
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
$(document).ready(function () {
var index = Cookies.get('active');
$('.secondary').find('a').removeClass('active');
$(".secondary").find('a').eq(index).addClass('active');
$('.secondary').on('click', 'li a', function (e) {
e.preventDefault();
$('.secondary').find('a').removeClass('active');
$(this).addClass('active');
Cookies.set('active', $('.clearfix a').index(this));
});
});
}//]]>
</script>
You will definitely store somewhere the data, wich was the last active tab. If you want to do this on client side only, one solution can be the cookies. See here: How do I set/unset cookie with jQuery?
If you are using HTML5, then you can use web storage. See here.
If you are rendering your page by PHP, you can use $_SESSION variable for this. When user clicks a tab, you make an ajax request, and store the value of the active tab in a $_SESSION variable, but as i see, you want to do it on the client side.
UPDATE
Ok, i just created it for you.
First thing is to set an id for every a element in my example, to know, wich is that. You can do it some other way, but now this is the most simple.
Second is to download the jquery.cookie.js, and do not use the URL, store it locally.
Third, here could be a problem, if cookies are disabled on the client machine.
You need to do something like this:
HTML
<div role="navigation" id="navPrimary">
<ul class="secondary">
<li>Home</li>
<li>Account Menu
<ul>
<li>OVERVIEW</li>
</ul>
</li>
</ul>
</div>
CSS
.active {font-weight: bold; color: #F00}
JQUERY
ok, stacoverflow does not allow me to paste here a code but i loaded here the
https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js script also!
<script type='text/javascript'>
$(function() {
//$.removeCookie("active");
var activeMenu = $.cookie("active");
console.log(activeMenu);
if (typeof activeMenu === 'undefined') {
$("#home").addClass("active");
} else {
$('#' + activeMenu).addClass('active');
}
$('li a').click(function(e) {
e.preventDefault();
var listItems = $("#navPrimary li a");
listItems.each(function(idx, li) {
$(li).removeClass('active');
});
$(this).addClass('active');
var id = $(this).attr('id');
$.cookie("active", id);
});
})
</script>

Categories

Resources