We Keep Coding

Why I cant get to hidden article by putting url with hashname?

I have been looking for solution, but i don't find anything, that would suit me. I got a page with header and content divs. Content div is not visible. After clicking on item in nav menu, I want to hide header, and show chosen article. I achieved it, but when I try to get to article by url#name nothing happens.
"jsfiddle" wont be useful in this case, but i will paste it to show my code.
Is there different way to do it? Maybe somehow hide articles with code, then just change opacity, maybe use "addclass" from jquery? I don't really know, im mixed and stuck.
Thanks for help.
https://jsfiddle.net/edby86ta/8/

You can also do it in full css :
https://jsfiddle.net/edby86ta/11/
In this case, the hardest part is hiding it again. You'd have to have a "close" button directing to another (maybe nonexistant) anchor :
Close

You can apply very simple JS conditions to show and hide your articles based on the link, I`ve updated you JSfiddle.
https://jsfiddle.net/edby86ta/10/
$(function () {
//GET HASH FROM URL, CHECK IF ELEMENT EXISTS AND THEN SHOW IT
$(document).ready(function(){
var hash = window.location.hash;
if(hash.length){
$(hash).show();
}
})
$(".article-nav a").on("click", function () {
$(".main-article").hide();
console.log($(this).attr("id"));
$('#article-' + $(this).attr("id")).show();
});
});
article {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<ul class="article-nav">
<li><a id="1" href="#article-1">Article 01</a></li>
<li><a id="2" href="#article-2">Article 02</a></li>
</ul>
</nav>
</header>
<div id="content">
<article id="article-1" class="main-article">Article 01 Lorem ipsum</article>
<article id="article-2" class="main-article">Article 02 Lorem ipsum</article>
</div>
<footer></footer>
Advice: Be aware that the user can change the hash as he wants, injecting anything to your selector, you should check the hash before using it.

HTML + jquery - menu to change contents in the content DIV

I've been digging around on how to do it, but didn't find any solution which would fulfill my needs.
Got a basic layout of my page with menu on the left, separate div for header and a div in the middle where all the content should be displayed when one of the menu buttons is selected.
I'd like to change the content only of the "content" div dynamically without reloading the page when one of the menu buttons is pressed.
I've managed to do it as per below with jquery:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#nav ul li a').click(function(){
$('#main').load('contents.html #' + $(this).attr('href'));
return false;
});
});
The menu :
<nav id="nav">
<ul class="menu">
<li class="menu1"></li>
<li class="menu2"></li>
<li class="menu3"></li>
<li class="menu4"></li>
<li class="menu5"></li>
</ul>
</div>
</nav>
contents.html file sample:
<div id="menu1">
<h2>Menu1</h2>
<p>Menu1 page contents</p>
</div>
So when menu1 button is pressed I'm able to change the content of main div to reflect the relevant data - this works.
My questions are:
1) is this the correct way on how to do it ? If not what would you recommend ?
2)I want to display more advanced stuff not only text (e.g What if I want to have another jquery in the div-id="menu1" ? I've tried it and it didn't work.)
P.S - I'm just a beginner so maybe I've missed something basic - but couldn't fix it by myself.
Thanks in advance!
Peter

I think there are a number of ways to achieve what you want. It depends on the nature of the content you want to load.
If there isn't masses of it, you could load it all onto the page on page load within different div's and then just show and hide the relevant div when clicking the menu items. (have a look at twitter bootstrap for some implementations, things like tabbed browsing).
If you do just have text, you could use ajax to load in the data from an external file w3schools.com.
Alternatively as mentioned in a comment above, you could create a single page application using something like angular.js, knockout.js etc.
Hope that helps.

Changing listview dividers on the fly

I`m learning JQM and have a lot of questions. Not asking if not trying to do many things.
I have a listview element. When page is loaded it sets listview with autodivider alphabetically by name. When you click on the "category" navigation button it sets elements according to its category, grouping. All is fine there.
My problem is when trying to go back clicking on the "names" navigation button nothing changes. Please help.
Here is simplified sample: http://jsfiddle.net/smatisen/v382r874/
<div data-role="page" id="home">
<div data-role="header">
<h1>Test</h1>
<div data-role="navbar">
<ul>
<li>Name</li>
<li>Category</li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" class="todo-listview">
<li data-category="cat 1"><h2>Test Name 1</h2></li>
<li data-category="cat 2"><h2>Test Name 2</h2></li>
<li data-category="cat 1"><h2>Test Name 3</h2></li>
</ul>
</div>
</div>

In your jsFiddle code, when you click on the "Name" navigator button, the function that you have written called "showRecordsByName" is called. The code of that looks as follows:
function showRecordsByName()
{
$('.todo-listview').listview({
autodividers: true
});
$('.todo-listview').listview("refresh");
}
And ... that's all it does. It refreshes the listview with class ".todo-listview" but since the content of the list has not changed in any way, it remains exactly as it was before this code was executed.
Thank you for using jsFiddle, it makes examination much easier.

I found solution by adding hide and show elements on button click events and clonin listview with different class name. Not sure if this is elegant, but it is working. http://jsfiddle.net/smatisen/v382r874/2/
$(document).on('click', '#setTableOrder', function(event) {
console.log("DEBUG - SetTableOrder clicked");
$('.byNamelistview').closest('.ui-listview').hide();
$('.todo-listview').closest('.ui-listview').show();
showRecordsByCat();
});

All you need to do is modify the autodividersSelector on the show records by name function to get the first letter of the text:
function showRecordsByName(){
$('.todo-listview').listview({
autodividers: true,
autodividersSelector: function (li) {
var out = li.text().charAt(0);
return out;
}
});
$('.todo-listview').listview("refresh");
}
Updated FIDDLE

How to make links between external pages in the main page dynamically using jQuery?

I have 3 external pages (inicio.php, perfil.php and produtos.php). And I would like them to appear dynamically and respective in #contaMenuEsq as I click in the "li".
I would like to use jQuery because my intention is to use fadeIn and fadeOut effects when navigating between these 3 links.
index.php
<div id="contaMenuDir">
<div id="contaMenuOpcoes">
<ul>
<li id='inicio'>Inicio</li>
<li id='perfil'>Perfil</li>
<li id='produtos'>Produtos</li>
</ul>
</div>
</div>
<div id="contaMenuEsq"></div>
Thank for your help in advance.

Have you checked out jQuery .load() and fadeIn?
$('#contaMenuDir').on('click','li',function(){
var text = this.attr('id');
$('#contaMenuEsq').load(text+'.php',function(){
//run fade here
});
});
I suggest you read about get() instead. It gives you more control over the actions after dynamically loading the content.

Change DIV based on clicked TAB

I am doing a leaderboard for a website we are working on.
Essentially, we have a div with this months winner for location A
Below we have ajax tabs, where user can click tabs which relate to locations, like :
Location A
Location B
etc etc
So by default, when page loads, tab A is open. And the div above we need to give a matching ID, because...
I want as the user clicks tab B for the div above to change, with different DIV ID. So basically we can change content in the div based on the tab the user clicks.
So the content div is like:
<div id="???"> content goes here </div>
The tabs are like:
<ul class="tabs">
<li><span class="stateTab">NSW</span></li>
<li><span class="stateTab">QLD</span></li>
<li><span class="stateTab">VIC</span></li>
<li><span class="stateTab">SA</span></li>
<li><span class="stateTab">WA</span></li>
<li><span class="stateTab">ACT</span></li>
<li><span class="stateTab">NT</span></li>
<li><span class="stateTab">TAS</span></li>
<li><span class="stateTab">AUSTRALIA</span></li>
</ul>
So if user clicks #tab2 then a different DIV loads into the div id="???" .
I think its fairly simple, just cannot figure it out. I realise I possibly have to set all the divs up, like so:
<div id="tab1"> content goes here </div>
<div id="tab2"> content goes here </div>
<div id="tab2"> content goes here </div>
And set visibility hidden to the divs.. any help appreciated.
*** ADDED INFO *******
The tabs, onclick ( presently ) display content from dataTables.
So obviously when we click on tab1, the content below the tabs , shows the content fetched from our dataTables, in a div with id1
The issue now is, with wanting to change the content ABOVE the tabs aswell as the content BELOW the tabs... the 2 id's are conflicting, and one shows and one hides...
The TABS also change content below them, presumably we need to chain the id actions somehow, to get two sets of content to change in harmony

Set it up the way you planned in HTML adding style="display: none" to each div except the one you want to show by default. Then add to you javascript (at the bottom, or in $(function(){ //Document ready });
$('.tabs a').click(function(){
$('div[id^=tab]').hide();
$(this.href).show();
return false;
}
);
As for your Update, you can change your divs to have a class instead of an id. Like
Content Above 1
Content Above 2
Tabs
<div class="tab1 tabContent">Content Below 1</div>
<div class="tab2 tabContent">Content Below 2</div>
Then you can change the javascript:
$('.tabs a').click(function(){
$('div.tabContent').hide();
$('div.'+this.href).show();
return false;
}
);
You'll also need to remove the hashes from your anchors, so the href becomes "tab1" instead of "#tab1"

You could use jQuery to do this: http://jsfiddle.net/YQdQm/
Not sure if this meets your requirements exactly (also, haven't yet tested on IE).
var tabs = $('div[id^=tab]');
tabs.hide();
$('#tab1').show();
$('.tabs a').click(function () {
var tab_id = $(this).attr('href');
tabs.hide();
$(tab_id).show();
});

I would suggest use existing tab control from jquery UI
however if not you will need markup like that
<div class='tabs'>
<ul>
<li data-id='tab1'>tab 1</li>
....
</ul>
<div id='tab1'></div>
<div id='tab2' class='expanded'></div>
...
</div>
and code
$('.tabs ul li').bind('click',function() {
var id = $(this).data('id');
$('.tabs div').removeClass('expanded');
$('#'+id).addClass('expanded');
});

I know this is a bit brute force, but I like to do it this way:
JS:
function hidetabs(){
$("#tab1").hide();
$("#tab2").hide();
//And so on
}
function shobwtab(id){
$("#"+id).show();
hidetabs();
}
HTML:
<li><span class="stateTab">NSW</span></li>
Of course you could also add click listeners in your docready function to run the functions instead of using onClick.