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.

Link positioning inside of div;

Okay below I have posted the script I'm using and the #targetDiv, Basically my problem is when I move the link that is currently contained within the #targetDiv outside of the div, The link no longer loads the page inside of the div, Is there a way I can move the link outside of the #targetDiv and still have it load the page contents inside of the div.
Script
$(function(){
$('#targetDiv').on('click', 'a', function(e){
e.preventDefault();// prevent browser from opening url
$('#targetDiv').load(this.href);
});
});
Div
<div id="targetDiv" class="collapse">
Load
</div>
The problem I have is that I want the load link to be outside of the target div however when I move it outside of the div it loads the main page not the content within the targetDiv.
What I'm trying to achieve;
Load
<div id="targetDiv" class="collapse">
</div>

Add a class to any links you want to use to load content
<a class="content-link" href="/page.php">Load</a>
And modify event listener accordingly so it handles both types of links
$(document).on('click', '.content-link, #targetDiv a',function(e){
e.preventDefault();// prevent browser from opening url
$('#targetDiv').load(this.href);
});

Try this:
$(function(){
$('#divLoad').click(function(e){
e.preventDefault();// prevent browser from opening url
$('#targetDiv').load(this.href);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="divLoad" href="/page.php">Load</a>
<div id="targetDiv" class="collapse">
</div>
You can also do this (more difficult to be precise):
$(function(){
var divLoad = $('#targetDiv').prev('a');
//alert(divLoad.attr('href') );
divLoad.click(function(e){
e.preventDefault();// prevent browser from opening url
$('#targetDiv').load(this.href);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="divLoad" href="/page.php">Load</a>
<div id="targetDiv" class="collapse">
</div>

Link to Other Page that open another tabs

I have 2 html page .. the first page is Header.html with 2 links (addressbook, mybook). My 2nd page is the Main-body.html has tabs with Addressbook and mybook. Since they are both different page, how can I manage to open the tabs using the links on the first page ..
example : header.html > (link)addressbook > main-body.html >(open tab addressbook)
header.html > (link)myorder > main-body.html > (open tab mybook)
using jquery ..

You can use hashchange event, and use hash to navigate directly to your content tab, like this:
$(function() {
// First hide all content element
$("#xxx,#yyy").hide();
$(window).on("hashchange", function(e){
// Hide all content elements
$("#xxx,#yyy").hide();
// Show only the desired element
$(location.hash).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
xxx
yyy
<p id="xxx">
xxx
</p>
<p id="yyy">
yyy
</p>

As I see, you would like to have a tabbed design on main-body.html. In this case I would use anchors:
<ul>
<li>Address Book</li>
<li>My Order</li>
<ul>
Then, you need to handle the achor with JavaScript. Depending on the value, you can show a different tab.

How to pass a javascript/jquery function from one html page to another

I have this page articles
In this page i have nav links on the left, and content loading on the right.
function showonlyone(thechosenone) {
$('div[name|="newboxes"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
my nav looks like this
<ul>
<li><a id="myHeader1" href="javascript:showonlyone('articles');" >ARTICLES</a></li>
<li><a id="myHeader1" href="javascript:showonlyone('whitepapers');" >WHITE PAPERS</a></li>
<li><a id="myHeader1" href="javascript:showonlyone('brochures');" >BROCHURES</a></li>
</ul>
and my content is in div like the following
<div id="articles" name="newboxes" style="display:none;">
<div id="whitepapers" name="newboxes" style="display:none;">
<div id="brochures" name="newboxes" style="display:none;">
Basically this page, is an interior page.
I have a home page, that i would like to have links to each section on, so the section i want shows up already so user doesn't have to click again.
Any idea how i do this?
Thank you for any help, and I apologize if i'm not using correct terminology.

if I well understood your question, on page "articles" just call showonlyone function
$(function() { // DOMready
showonlyone('articles');
});
and repeat this code for every internal page, changing the parameter

going by what i understand from your question is that..
u have links on home page..
when user clicks these links you want that particular section to be already opened when the interior page opens
like when user click "articles" then in the interior page the articles div should be visible
for this you will have to use hash tags in the following manner
on your home page..
provide the links with a hash tag like this
http://agencystudy.com/eic/microsites/microsites-02/articles.html#articles
then in your interior page in document ready event
$(document).ready(function(){
$(window.location.hash).show(200);
});

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.