We Keep Coding

Replace div content using jQuery

I have this code in header.html:
<nav role="navigation">
<ul class="nav">
<li><a id="home" href="index.html" class="current">home</a></li>
<li><a id="about" href="includes/test.html">about</a></li>
<li><a id="resources" href="#">resources</a></li>
<li><a id="archive" href="#">archives</a></li>
</ul>
</nav>
Now, everything seems fine until my index.html loads files from another folder to fill the divs with id="header", id="content" and id="footer" using:
$(function() {
$("#mainhead").load("templates/header.html");
$("#content").load("templates/content.html");
$("#footer").load("templates/footer.html");
});
My question is - How can I replace content in the div id="content" with the one from another HTML page that can be accessed by clicking a link in the nav menu?

Change the code that loads the navigation to this...
$("#mainhead").load("templates/header.html", function() {
$(this).find(".nav a").on("click", function(e) {
e.preventDefault(); // stop the link from firing as normal
$("#content").load(this.href); // load the file specified by the link
});
});
This will "ajaxify" the links in the header navigation, after it has loaded, so that the content div is loaded for each of the links, without having to navigate away from the page. Just make sure each header link has the correct href value for the content you want it to load.

Is this what you meant? This will load the content from header/content/footer pages and load in the appropriate div on click of home.
$("#home").click(function () {
$("#mainhead").load("templates/header.html", function (data) { $(this).html(data); });
$("#content").load("templates/content.html", function (data) { $(this).html(data); });
$("#footer").load("templates/footer.html", function (data) { $(this).html(data); });
});

$("#content").replace("old page","new page");
try this one.
or
$("#content").load(){
location.replace("your page");
}
or
var url = "Your url"; $(location).attr('href',url);

$("#div").html("Your content");

jQuery scrolling down on click of an item

I have a very long HTML page with content. What I am trying to achieve is when someone clicks a menu item in the header, the page should scroll down to an anchor element. I have try many things with no luck. I don't know JavaScript. This is what I tried:
_header.html.erb
<div class="header_pad">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>The Investors' Club</h1>
</ul>
<section class="top-bar-section">
<ul class="left">
<li><a id="result" href="#contact">Contact</a></li>
</ul>
</section>
</nav>
</div>
application.js
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
$("#result").click(function() {
scrollToAnchor('contact');
});
index.html.erb
<div id="contact">
<%= image_tag("contact_us.png", :alt => "Forex Investment Contact") %></br>
<p class="small-11 small-centered columns">
Skype is free and more convenient, give us a call or send us an email if you happen to have some questions. We will
be glad to hear from you.
</br>
<%= image_tag("skype.png", :alt => "skype") %> OR
<b>100forexinvestors#gmail.com</b>
</p>
</div>
Live page: https://infinite-oasis-2303.herokuapp.com
So I want it that when I click "Contact" in the header, it scrolls smoothly all the way down to the Contact anchor down below the page. Any help?
EDIT:
I got it to work with the js I posted as an answer. However. If I click on the back button and click another link, the animation doesn't work anymore till I reload the page. Looks like the javascript loads just once. How do I eliminate that?

Seems you have typo <a name"test"></a>. Try change it to <a name="test"></a>
EDIT
Since the question edited, this is the example for application.js:
$(document).ready(function() {
$('.top-bar-section a').click(function(e) {
e.stopPropagation();
var eid = $(this).attr('href');
var top = $(eid).offset().top;
$('html, body').animate({ scrollTop: top }, 'slow');
});
});
Make sure the anchor href and target id is equal. E.g: <a href="#contact"> for <div id="contact">

this might help,
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},500);
Pass "time" as the second argument to the animate function. It should navigate to the target location in that much amount of "time". Thus helping smooth transition.

OK. I got it to work with this piece of js:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 1200, 'swing', function () {
window.location.hash = target;
});
});
});

Unexpected behavior with mouseup

When I click on the menu, the menu shows up, but when the pointer is moved away from the menu, it hides after 2-5 seconds.
I want the menu to toggle when clicked, and explicitly hide when I click anywhere else on the page, as seen on this demo.
this fiddle
My code is as follows:
$(document).ready(function() {
$(".MyAccount").click(function() {
var X = $(this).attr('id');
if (X == 1) {
$(".submenu").hide();
$(this).attr('id', '0');
} else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Mouseup textarea false
$(".submenu").mouseup(function() {
return false
});
$(".myaccount").mouseup(function() {
return false
});
//Textarea without editing.
$(document).mouseup(function() {
$(".submenu").hide();
$(".MyAccount").attr('id', '');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="MyAllMenu" style='margin: 50px'>
<div class="MyMenu">
<a class="MyAccount">
<span>My Settings</span>
</a>
<div class="submenu" style="display: none;">
<ul class="AllMenuList">
<li>
Dashboard
</li>
<li>
Profile
</li>
<li>
Settings
</li>
<li>
Send Feedback
</li>
<li>
Sign Out
</li>
</ul>
</div>
</div>
</div>

check on FIDDLE . onclick hide/show menu working now . i have added not(".myaccount",".submenu") to mouse up event of document.
$(document).ready(function() {
$(".MyAccount").click(function () {
var X = $(this).attr('id');
if (X == '1') {
$(".submenu").hide();
$(this).attr('id', '0');
}
else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Textarea without editing.
$(document).not(".myaccount",".submenu").mouseup(function () {
$(".submenu").hide();
$(".MyAccount").attr('id', '');
});
});

The problem was that i have a dictionary application that reads any text from the page on hover, and when disabling this feature, every thing works as it should be.
I didn't notice that because I tried on two computers and it happened that i was using this app on both of them.

JS are crashing after jquery load function

I tried to load my content with the jQuery load function into index.html's content area. I succeeded with that, but my Javascript isn't working. I want to call it on each click of my menu's elements. Is it possible?
click here to see the page
menu:
<div id="nav" class="section group">
<div id="menu" class="col span_9_of_12">
<ul id="navmenu">
<li>Hakkımda</li>
<li>Portfolyo</li>
<li>İletişim</li>
<li>Fotoğraflar</li>
</ul>
</div>
load function:
$(document).ready(function() {
$('#content').load($('#navmenu li a:last').attr('href'));
var hash = window.location.hash.substr(1);
var href = $('#navmenu li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#navmenu li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('slow',loadContent);
$('#load').remove();
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('slow',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('slow');
}
return false;
});
});

UPDATE: My original answer no longer applies. OP changed the page implementation and question completely since I answered.
But as I stated in a comment below, The easytabs documentation states that the tab element and the panel divs must all be inside the container div.
<div id="tab-container" class="tab-container">
<ul class='etabs'>
<li class='tab'>Hakkımda</li>
<li class='tab'>Portfolyo</li>
<li class='tab'>Fotoğraflar</li>
<li class='tab'>İletişim</li>
</ul>
<div id="hakkimda">
...
</div>
<div id="portfolyo">
...
</div>
<div id="iletisim">
...
</div>
<div id="fotograflar">
...
</div>
</div>

Rather than adding script inline, do this
$( "#jqc_content" ).load( "content/aboutme.html", function() {
carouselfn(); // call your carousel invocation function here
});
From documentation
Callback Function
If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed

I fixed it finally. It's all about the html structure.

Apply to function to multiple elements

HTML:
<div class="container-fluid">
<div class="sidebar">
<ul class="pills">
<li id="l1"><a id="link1">Lesson 1</a></li> <hr>
<li id="l2"><a href="#" >Lesson 2</a></li> <hr>
<li id="l3"><a href="#" >Lesson 3</a></li> <hr>
</ul>
<div class="span16" id="target">
</div>
Javascript:
$('#l1').click(function(){
$('#target').fadeOut('fast', function(){
$('#target').load("lesson/lesson1.html", function(){
$('#target').fadeIn('slow');
});
});
});
I have 5 links within my webpage, I was wondering if there was anyway to make this one piece of code instead of copy + pasting it multiple times.

$('a.AjaxLink').click(function(){
var url = this.href;
$('#target').fadeOut('fast')
.load(url, function(){ $(this).stop(true, false).fadeIn('slow'); });
});
return false;
});
This code handles the click event for all <a>s with a class of AjaxLink.
In the click handler, it grabs the href, fades out your #target, and performs the AJAX load.
When the AJAX load finishes, it stops the animation (in case the AJAX was faster than the fade), then fades it back in.
Finally, it tells the browser not to take the default action (navigating to the page) by returning false.

Use class instead of id. Select elements using class.
Also you can use .each() method

You could do this with a new jQuery method. Given this HTML:
<a class="hello" href="#">Hello</a>
<a class="goodbye" href="#">Goodbye</a>
<div id="target"></div>
You'd use this code:
jQuery.fn.switchTarget = function( target, href ) {
var $target = $(target);
this.bind( 'click', function(e) {
e.preventDefault();
$target.fadeOut('fast', function() {
$target.load( href, function() {
$target.fadeIn('slow');
});
});
});
return this;
};
$('.hello').switchTarget( '#target', 'hello.html' );
$('.goodbye').switchTarget( '#target', 'goodbye.html' );