We Keep Coding

How to move to another page and then to a certain section of the page using a Javascript method

I have 3 files:
mainPage.html
starter.html
Landing.js
When I click on the div in starter.html I want to move to mainPage.html and then to the Menu section of this page
starter.html code:
<li> <div onclick="onBackToMenu()">Back to menu</div></li>
landing.js code:
function onBackToMenu() {
window.location.href = "../mainPage.html";
document.getElementById("Menu").scrollIntoView();
}
mainPage.html: (partial code)
<!-- Menu section -->
<span class="anchor-offset" id="Menu"></span>
<div class ="section" >
<div class ="sectionHeadings">
<h1>Menu/Products</h1>
<div class="menu">
<div class="starter" onclick="location.href='pages/starter.html';">
<h3 class="menu-heading starter-heading">Starters</h3>
</div>
When I click on the div then it does take me to mainPage.html, but it doesnt want to take me to the Menu section with id of Menu.
Please help

Since you have an id on that section already ==> <span class="anchor-offset" id="Menu"></span> pass the id at the end of your href like this: window.location.href = "../mainPage.html#Menu"; this will a direct you to that section when the new page loads.
function onBackToMenu() {
window.location.href = "../mainPage.html#Menu";
document.getElementById("Menu").scrollIntoView();
}

No javascript is necessary. It's better practice and better for accessibility to use an anchor element (<a>) with an href element to create a hyperlink to the new page with a fragment identifier for the section you want to scroll to.
In your case, just change the list item in starter.html to:
<li>Back to menu</li>
This will navigate a user to the menu section of the new page.

How to load a html page from href into a div by clicking a Li inside a menu?

i have a ul menu
<ul>
<li>
rules
</li>
<li>
Service
</li>
</ul>
and i want when the user press on a tag the html page load on <div id=result> that i have in bottom of this page.
i try that with jquery as i found but the html in href load on new tab there is my code:
<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(funtction(){
$("#rules").click(function()
$('#result').load(rules.html);
});
$("#service").click(function(){
$('#result').load(service.html);
})
});
</script>

Read up .load() | jQuery API Documentation
You need to pass the paths of HTML files as string.
Replace
$('#result').load(rules.html);
with
$('#result').load('../folder/rules.html');
EDIT:
In response to your comment, try this:
$("#rules").click(function(event)
$('#result').load('../folder/rules.html');
event.preventDefault(); // so that the event does not bubble up
});

Targeting anchor tag to div tag in same page

I have menu with anchor tag, on click of menu link I want to open a new jsp page into a div tag on the same as tag.
My jsp file:
<ul>
<li>Music</li>
<li>Dance</li>
</ul>
<div class="main-container" id="div_displayfrom">
</div>
Please help....Thanks in advance!!

If you want to use jQuery then you can do this:
<ul id='mainTabs'>
<li>Music</li>
<li>Dance</li>
</ul>
then you can do this in jQuery:
$('#mainTabs a').click(function(e){
e.preventDefault();
$('#div_displayfrom').load(this.getAttribute('href'));
});

Try this:
Use .load() function to load the page contents into specified div.
$('ul > li > a').click(function(){
$('#div_displayfrom').load($(this).attr('href'));
return false;
});

The short answer is that you cannot.
The behaviour you describe is that of an iframe, not a div.
You could fake it by using JavaScript (Ajax) to fetch the content and then put the fetched HTML in the div (but you would have to account for stylesheets, scripts, different URLs that relative URLs in the document will be resolved against, etc). jQuery has a load method to help with this.

The target attribute specifies where to open the linked document.Following are the valid attribute values,
_blank - Opens the linked document in a new window or tab
_self - Opens the linked document in the same frame as it was clicked (this is default)
_parent - Opens the linked document in the parent frame
_top - Opens the linked document in the full body of the window framename Opens the linked document in a named frame
See How do I load an HTML page in a <div> using JavaScript? to load the page in the div.

try like this:
<ul>
<li>Music</li>
....
</ul>
<div class="main-container" id="div_displayfrom">

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.

jQuery UI Tabs loading specific link within tab

I want to load only links within a certain div inside the tab, otherwise it should just go to the actual link.
Current the code i use loads all links inside the content in the same tab
<script type="text/javascript">
$(function(){
$('#tabs').tabs({
load: function(event, ui) {
$('a', ui.panel).click(function() {
var tabId=$('#tabs').tabs('option', 'selected');
$('#tabs').tabs("url", tabId, this.href).tabs("load",tabId);
return false;
});
}
});
});
</script>
Tab Page
<div id="sresults" style="width: 520px">
<div id="tabs">
<ul>
<li>Songs</li>
<li>Albums</li>
<li>Videos</li>
<li>Entire Blog</li>
</ul>
</div>
</div>
And then heres the page inside the tab
<div id="content">
My links
</div>
<div id="navi">Next Page
</div>
I want the links inside the navi div to load within the tab, but all links outside should go to the actual link

I'm guessing you only want to load the navigation links inside the tab.
If so, just replace
$('a', ui.panel).click(function() {
With
$('#navi a', ui.panel).click(function() {
Although, I suggest you use a class to select your navigation div instead of using an id because you might end up with duplicate ids, which could cause problems later on.