Develop Reference

jQuery enter url and loads content into div

I don't know if i described the title correctly ...
Basically i have a jquery script that loads content when link is clicked.
I would like to know to say lets say i loaded /contents/about.php via jquery into the div i specified.
<li class="nav__item ">
<a class="header__link subdued" href="#home" data-target="contents/home">
<span class="complimentary push--left">Home</span>
</a>
</li>
<li class="nav__item ">
<a class="header__link subdued" href="#news" data-target="panel/admin/news/news">
<span class="complimentary push--left">News</span>
</a>
</li>
<li class="nav__item ">
<a class="header__link subdued" href="#/contents/about" data-target="contents/about">
<span class="complimentary push--left">About Us</span>
</a>
</li>
Is it possible for me to enter http://localhost/#/contents/about or even http://localhost/contents/about and it would as the same function as the jquery click load script.
Alternatively is there a simple way to have a back/forward setup in jquery content load?
script:
<script>
$(document).ready(function(){
var trigger = $('#nav ul li a'),
container = $('#wrapper');
trigger.on('click', function(){
var $this = $(this),
target = $this.data('target');
container.load(target + '.php');
return false;
});
});
</script>
Hope it makes sense.

jQuery:
$(document).ready(function(){
var cur = window.location.href;
var a = cur.split("/");
var pos = a.indexOf("#");
if(pos != -1){
var trigger = $('#nav ul li a');
var container = $('#wrapper');
target = a[pos+1]+""+a[pos+2];
container.load("http://localhost/"+ target + ".php");
return false;
}
});
Try this, if not useful then i will remove this, cause i don't understand what you want.

How to prevent auto scrolling when click tab

I'm working on a project and stuck on the tabs. No matter what I do the page scrolling down when I click a tab. This is my HTML:
<ul class="list">
<li class="tab1 active">
<i class="fa fa-external-link"></i>
Quick Reports
</li>
<li class="tab1">
<i class="fa fa-star-o"></i>
My Folders
</li>
<li class="tab1">
<i class="fa fa-folder-open-o"></i>
My Team Folders
</li>
<li class="tab1">
<i class="fa fa-files-o"></i>
Public Folders
</li>
</ul>
var open_tab = function() {
$('.tab1').each(function (i, tab) {
UTILS.addEvent(tab, 'click', function() {
$('.list li.active').removeClass('active');
$(this).addClass('active');
$('.active-panel').removeClass('active-panel');
var target_panel_selector = $(this).find('a').attr('href');
$(target_panel_selector).addClass('active-panel');
window.location.hash = target_panel_selector ;
});
});
};
And the style of .active-panel is display: block. I tried to use:
e.preventDefault();
or
tab.find('a').on('click', function(e){
alert("finally!!");
e.preventDefault();
});
and other stuff I found on the web but nope, not working.

<ul class="list">
<li class="tab1 active">
<i class="fa fa-external-link"></i>
<a data-href="#quick-reports" class="tab" href="javascript:void(0)">Quick Reports</a>
</li>
<li class="tab1">
<i class="fa fa-star-o"></i>
<a data-href="#my-folders" class="tab" href="javascript:void(0)">My Folders</a>
</li>
<li class="tab1">
<i class="fa fa-folder-open-o"></i>
<a data-href="#my-team-folders" class="tab" href="javascript:void(0)">My Team Folders</a>
</li>
<li class="tab1">
<i class="fa fa-files-o"></i>
<a data-href="#public-folders" class="tab" href="javascript:void(0)">Public Folders</a>
</li>
</ul>
<script>
function maketabActive($strElement)
{
$('.list li.active').removeClass('active');
$strElement.addClass('active');
$('.active-panel').removeClass('active-panel');
var target_panel_selector = $strElement.find('a').data('href');
$(target_panel_selector).addClass('active-panel');
// Save selected tab index in session stroage.So after page refresh active tab will be maintained
sessionStorage.setItem('selected-tab', $strElement.index());
}
$(document).ready(function () {
// Check if selected tab is stored in session stroage
if (sessionStorage.getItem('selected-tab'))
{
//Make tab active based on index got from session stroage
maketabActive($(".tab1:eq(" + sessionStorage.getItem('selected-tab') + ")"));
}
});
var open_tab = function () {
$('.tab1').each(function (i, tab) {
UTILS.addEvent(tab, 'click', function () {
maketabActive($(this));
});
});
};
</script>

I think that it's scrolling when you are setting the hash here
window.location.hash = target_panel_selector ;
Take a look at: https://stackoverflow.com/a/14690177/5612557

UPDATE
Try to add a return false into the click event and as suggest Diego change the hash method (but work only in a newer browser) like this:
var open_tab = function() {
$('.tab1').each(function (i, tab) {
UTILS.addEvent(tab, 'click', function() {
$('.list li.active').removeClass('active');
$(this).addClass('active');
$('.active-panel').removeClass('active-panel');
var target_panel_selector = $(this).find('a').attr('href');
$(target_panel_selector).addClass('active-panel');
//window.location.hash = target_panel_selector ;
if(history.pushState) {
history.pushState(null, null, target_panel_selector);
} else {
window.location.hash = target_panel_selector;
}
return false; // <-- add this line
});
});
};

You may try
event.stopPropagation();

Add/Remove class based on active URL

My HTML code looks like this:
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<ul class="nav side-menu">
<li>
<a>
<i class="fa fa-home"></i>home
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu" style="display: none">
<li>
Dashboard
</li>
<li>
dashbord2
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-edit"></i>form
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu" style="display: none">
<li>
general form
</li>
<li>
form validation
</li>
</ul>
</li>
</ul>
</div>
</div>
to add/remove class based on current url, i am using this:
$(function () {
var url = window.location.href;
$('#sidebar-menu a[href="' + url + '"]').parent('li').addClass('current-page');
$('#sidebar-menu a').filter(function () {
return this.href == url;
}).parent('li').addClass('current-page').parent('ul').slideDown().parent().addClass('active');
});
It works, but when i click this link
dashbord2
the class="current-page" doesn't change to current path url
How i fix this?

Your issue arises from the page not being reloaded when you click on the link with hash in it, while your code only executes on page load, or dom ready to be exact. The solution is to whether use window's hashchange event (not supported in < IE8) or, like #sirrocco mentioned, use click event with setTimeout to detect the change of hash:
function setCurrentMenuPage() {
var url = window.location.href;
var anchors = $('#sidebar-menu a');
anchors.parent('li').removeClass('current-page');
anchors.filter(function () {
return this.href == url;
}).parent('li').addClass('current-page').parent('ul').slideDown().parent().addClass('active');
}
$(function () {
setCurrentMenuPage();
$('#sidebar-menu a').on('click', function (e) {
if ($(this).attr('href').indexOf("#") >= 0) {
setTimeout(function () {
setCurrentMenuPage();
}, 100);
}
});
});
Hope that helps.

jquery mobile dynamically extended listview doesn't work

I've got a menu as listview in JQM. On every page it hould be normal, only on one of the it gets extended by 2 items. Now, I've been searching through Internet and nothing works. Things I've tried:
-location.reload()
-trigger('create')
-$("#menuList").listview().listview('refresh');
-$("#menuList").create;
-child.create
and maybe some more. Here's the code:
DOM
<div id="menu" data-role="panel" data-display="push">
<center>
<br />
<ul id="menuList" data-role="listview">
<li><a data-rel="close" href="index" class="ui-btn">Home</a></li>
<li><a data-rel="close" href="providers" class="ui-btn">providers</a></li>
<li><a data-rel="close" href="seekers" class="ui-btn">seekers</a></li>
<li><a data-rel="close" href="add" class="ui-btn">add</a></li>
<li><a data-rel="close" href="logout" class="ui-btn">logout</a></li>
</ul>
</center>
JS:
$( document ).delegate("#providers", "pagebeforeshow", function() {
function addMenuButtons()
{
var ul = $("#menuList");
//var hr = document.createElement("hr");
//ul.append(hr);
for( var i in buttons )
{
var name = buttons[i].split(',');
/*var a = document.createElement("a");
a.setAttribute("data-rel","popup");
a.className = "ui-btn ui-corner-all ui-shadow" ;
a.id = name[1]+"Button";
a.href = "#"+name[1];
a.innerHTML = name[0] ;
var li = document.createElement("li");
li.appendChild(a);
ul.append(li);*/
//a.create;
$("#menuList").html( $("#menuList").html()+"<li><a data-rel='popup' class='ui-btn ui-corner-all ui-shadow' id='"+name[1]+"+Button' href='#"+ name[1] +"'>"+ name[0] +"</a></li>" );
}
//$("#menuList").trigger('create');
$("#menuList").listview();//.listview('refresh',true);
}
addMenuButtons();
});
buttons- object I made, doesn't matter here. Any ideas on this?? I keep failing trying fix this. When I F5 the page, the menu updates correctly...

Use .enhanceWithin() on the parent of the changed widget.
$('.parent').enhanceWithin();
Ref:
.enhanceWithin()

How to hide menu with javascript

I found this code on the web and i need help figuring out how to make is so when i click on one of the li elements the menu hides. Thanks.
http://jsfiddle.net/E4Zgj/203/
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';
}
<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>

Try this:
var nav = document.getElementById('navigation_list');
function toggleNav(e) {
nav.classList.toggle('expanded');
e.preventDefault();
}
document
.getElementById('navigation')
.getElementsByClassName('menu_button')[0]
.onclick = toggleNav;
nav.onclick = toggleNav;
Note I have removed the inline event listener in your html, and attached it using JS instead.
Demo

Your fiddle is using MooTools, not sure if that is the library you're using or not but this is what you need to do in jQuery. I don't know MooTools:
$(function() {
$('#navigation_list a').on('click', function(e) {
e.preventDefault();
toggleNav();
});
});