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.
Related
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.
So, I run my church's website and I try to stay pretty basic in the coding, but we have seasonal pages that we add and remove from the website all the time so I get tired of changing the "simple" HTML code on every page for the nav bar. I have found where I can use PHP and have one code, like but is it possible to have the current page highlighted, i.e. on our website now, the current page name is bold and a different color.
I have also seen JS do this (Highlighting current page in the nav) but I don't really understand how to implement this, so if you think this could be the better route for me, and can help explain how to do it, that would be cool.
Any help would be great!
add an id attribute to the body tag of each of your pages, like this:
<body id="home"> <!-- this would be for your home page for example -->
...
<body id="about"> <!-- this would be for your about page... -->
add the same to the li tags of your nav, like this:
<li id="home">Home</li>
<li id="about">About</li>
then in the CSS file just do this:
body#home li#home, body#about li#about { // style of the active menu item }
At first I'm using JQuery Mobile. I have already investigated about loading HTML inside a div but I having some problems.
The main idea is that I have 3 differents menus (which are lists) and each one stored in a HTML file generated by the server. /Menu1.html, /Menu2.html, /Menu3.html. It has to be this way because menus could change dynamically.
So, the menus looks like this:
<ul>
<il><a href="whatever1> Option1 </a></li>
<ul>
<il><a href="whatever1> Option1.1 </a></li>
</ul>
<il><a href="whatever2> Option2 </a></li>
</ul>
I'm doing it this way:
<div id="menuview">
</div>
<script type="text/javascript">
$("#menuview").load("data/menu1.html");
</script>
And it is loading the list, right, but without css. So What I'm seeing is just the list and not a JQM linked list view like the demo here: http://demos.jquerymobile.com/1.4.0/listview/
If I copy the menu1.html inside the div manually it works perfectly.
I'm not just asking for a solution, maybe is there any better way to do this and I don't know it.
Thanks in advance!
When adding any items dynamically, you need to initialize them manually.
Inside each menu you have, add initialization function.
<ul>
<!-- elements -->
<script>
$(function () {
$("ul").listview();
});
</script>
</ul>
Note that nested listview is removed from jQM 1.4.
To create a nested listview, check this official demo.
I am using ASP.net and have a master page that utilizes navigation. My problem is when I click on a link it loads a different asp page, but the navigation tab doesn't switch to the clicked color,it reverts back to its original color. Since all the pages are loading the same, I can't just use CSS because the page is reloaded. Is there a way to write a javascript function that tells the page when it loads to display the hover color and keep it there? Since the only HTML I use is on the master page, I can't switch anything out. I'm sure there must be a way using nth-child but I can't figure it out. As for the code, a simple example is:
<div>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
So how would I get the 2nd link to switch to the hover color when loading the page?
It's been a while since I've played with asp, so I won't have the exact terms, but I can point you in the right direction.
First, in your master page, add unique ids to all of your nav links. This will make it trivial to access those links in your specific asp pages. It helps to do this because otherwise it's hard to select the link you want. jQuery such as $("div ul li:nth-child('2')") will select the second li that's a child of a ul that's a child of div, but that could happen anywhere on your page.
Once you have that, let's assume your nav panel looks like this:
<div>
<ul>
<li id="linkOne">One</li>
<li id="linkTwo">Two</li>
<li id="linkThree">Three</li>
</ul>
</div>
Then, in the page that loads when Two is clicked, you need to add a script with an onLoad handler that modifies the link:
<script>
document.onload = function() { $("#linkTwo").addClass("hover"); };
</script>
This will wait till the document loads (otherwise you may try changing an element that doesn't exist yet), then run a function that finds the specific element with the id "linkTwo" and adds the css class "hover" to it.
Obviously, this line will be different for each specific asp page - or something you can have your server-side logic calculate.
Your question is a little unclear. But if i understood right in your case i should use a specific css class that is loaded if you determine that you are on current page.
Something like this (i don't know asp, i will put a general example)
<div>
<ul>
<li <?php if($CurrentPage = 'One') {echo 'class="active"';} ?>>One</li>
<li <?php if($CurrentPage = 'Two') {echo 'class="active"';} ?> >Two</li>
<li <?php if($CurrentPage = 'Three') {echo 'class="active"';} ?>>Three</li>
</ul>
</div>
this will put a special class to your element. That class will have the hover color, and the problem is solved.
Hope you can adapt this to asp.
Use the following:
html code
<body>
<div>
<ul style="display:inline; background-color:lightgray; float:left">
<li style="margin:20px; display:inline-block" onclick="frames['target'].location.href='one.html'; toggle_bgcolor(this);">One</li>
<li style="margin:20px; display:inline-block" onclick="frames['target'].location.href='two.html'; toggle_bgcolor(this);">Two</li>
<li style="margin:20px; display:inline-block" onclick="frames['target'].location.href='three.html'; toggle_bgcolor(this);">Three</li>
</ul>
<iframe id="target"></iframe>
</div>
</body>
JS function
function toggle_bgcolor(elem)
{
for(var c=0; c<elem.parentNode.getElementsByTagName('li').length; c++)
{
elem.parentNode.getElementsByTagName('li')[c].style.backgroundColor='';
}
elem.style.backgroundColor='limegreen';
}
The JS-block for the onclick event in each <li> element will toggle the baclkground-color of each <li> element when another <li> is clicked.
Check this fiddle
I have 11 elements with long description of each element of them. I decided to display the elements on the sidebar and the description of each one of them will be displayed on the body directly when the user clicks on the element.
I came with a solution similar to this ONE
but the problem with this one is put the content (or description) inside the javascript code, and I want the description be on the HTML code to make it later on flexible for changes by the admin after putting the data including the description of these elements on the database instead of hard-coded style.
Therefore, how can I do that?
You can try this way
<div id="menu">
<ul>
<li id="a">item a
<div id="contentA" style="display:none">Description of item A</div>
</li>
<li id="b">item b
<div id="contentB" style="display:none">Description of item A</div>
</li>
</ul>
</div>
<div id="content"></div>
<script type="text/javascrip">
$(document).ready( function () {
$('#a').click(function() {
$('#content').html($('#contentA').html());
});
$('#b').click(function() {
$('#content').html($('#contentB').html());
});
});
<script>
I updated your example, it now uses hidden divs inside the clickable menu items, and on li click it finds the menu description and displays it.
This method does not depend on ids and degrades more gracefully (except if the client doesn't support JS but supports CSS display).
Your description is a bit unprecise, but if I get it right your could use IDs for the description text and fade them in/out with jQuery.
http://jsfiddle.net/PajFP/14/ (updated)