Scrolling to and Opening a Div Using a onclick - javascript

I have this code:
<a onclick="$('a[href=\'#tab-customtab\']').trigger('click');">Enquire Now</a>
<div id="tab-customtab"></div>
This opens up the div #tab-customtab but does not scroll to it. Is there a way to scroll to the div onclick?


something like this?
function scrollToId(aid){
var aTag = $("div[id='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
source: https://stackoverflow.com/a/8579673/4356678


Try this, it makes you more reliable and dynamic.
$(document).ready(function() {
$(".menu").on("click",function(event) {
if ($(".toggleMenu").hasClass('active')) {
$(".toggleMenu").click();
}
$('html,body').animate({
scrollTop: $(this.hash).offset().top}, 500);
});
$(".chosen-select").chosen();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<header>
<nav>
<ul>
<li> First</li>
<li> Second</li>
<li> Third</li>
<li> Forth</li>
</ul>
</nav>
</header>
<section style="height:150px;width:100%;" id="div1">
<h2 style="text-center">First Div</h2>
</section>
<section style="height:150px;width:100%;" id="div2">
<h2 style="text-center">Second Div</h2>
</section>
<section style="height:150px;width:100%;" id="div3">
<h2 style="text-center">Third Div</h2>
</section>
<section style="height:150px;width:100%;" id="div4">
<h2 style="text-center">Forth Div</h2>
</section>

Related

JavaScript forces you to double click in order to get the drop down menu to open or close

<html><head>
<title>J.T.C.</title>
<meta charset="utf-16">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="assets/css/mainsd2B.css">
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- Scroll -->
<link href="https://fonts.googleapis.com/css?family=Heebo:460|Ramabhadra|Roboto" rel="stylesheet">
<!-- Adjust top of navbar -->
<script type="text/javascript">
var sw = document.getElementById('side-menu');
window.addEventListener('resize', function(event){
sw.style.width = '0px';
});
</script>
<script type="text/javascript">
var s = document.getElementById('side-menu');
function resizeFunction() {
s.style.display = 'none';
}
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
</script>
<script type="text/javascript">
// Reset Navbar top afer scroll
$(function () {
$(document).scroll(function () {
var $nav = $(".navbar-fixed-top");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
</script>
<script type="text/javascript">
//Control side-nav top position
$(function () {
$(document).scroll(function () {
var $nav1 = $(".side-nav-fixed-top");
$nav1.toggleClass('scrolled', $(this).scrollTop() > $nav1.height());
$nav1.visibility= "hidden";
});
});
</script>
<script type="text/javascript">
// Show Hide Navbar UL List
$(window).scroll(function(){
if($(document).scrollTop() > 200){//Here 200 may be not be exactly 200px
$('.side-nav').hide();
}
});
</script>
<style>
#media screen and (max-width: 927px) {
.navbar {
overflow: visible;
}
}
</style>
</head>
<body onresize="resizeFunction()" >
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header" class="alt">
<span class="logo"><img src="/assets/css/images/header46.jpg" alt=""></span>
</header>
<!-- Nav -->
<nav id="nav">
<div id="mainconm"><img src="/assets/css/images/mainltx.png" alt=""></div>
<ul>
<li>Home</li>
<li>Section One</li>
<li>Social
<ul>
<li>Section Two</li>
<li><a href="#third" class="" >Section Three</a></li>
</ul>
</li>
<li>Course
<ul>
<li>Section Four</li>
<li><a href="#fifth" class="" >Sections Five</a></li>
</ul>
</li>
</ul>
</li>
</nav>
<div id="sticky-anchor"></div>
<!-- class="navbar" -->
<nav class="navbar navbar-fixed-top" id="navigation" onscroll="navtotop()">
<span class="open-slide">
<button id="menu-box" onclick="toggle_visibility()"><svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="3"></path>
<path d="M0,14 30,14" stroke="#000" stroke-width="3"></path>
<path d="M0,23 30,23" stroke="#000" stroke-width="3"></path>
</svg></button>
</span>
<div id="side-menu" class="side-nav side-nav-fixed-top bg-primary" style="display: none; width: 0px;">
<span class="open-slide">
<div style="height:70px; width: 100%; background:rgb(6, 13, 19, 1)" >
<button id="menu-box" style=" background: #000; border-radius: 0;" onclick="toggle_visibility()"><svg width="30" height="30">
<path d="M0, 3 30,25" stroke="#fff" stroke-width="3"></path>
<path d="M0,25 60,-17" stroke="#fff" stroke-width="3"></path>
</svg>
</button>
</div>
</span>
Home
<a href="#first" class="slide" >Section One</a>
<a href="#second" class="slide" >Section Two</a>
<a href="#third" class="slide" >Section Three</a>
<a href="#forth" class="slide" >Section Four</a>
<a href="#fifth" class="slide" >Section Five</a>
<a href="#seventh" class="slide" >Section Six</a>
</div>
<div id="conm"><img src="assets/css/images/mainltx.png" alt=""></div>
</nav><div id="intro" style="position: absolute; z-index: 8000; top: 100px;"></div>
<!-- Main -->
<div id="main">
<!-- Introduction -->
<section class="main" style="padding-top: 20px !important;">
<div class="spotlight">
<div class="content">
<div id="largeicon" >
<span class="image"><img src="assets/css/images/homeimage.png" alt=""></span>
</div>
<div id="smallicon" class="alt">
<span class="logo"><img src="/assets/css/images/smallbanner.png" alt=""></span>
</div>
<header class="major">
<h3>Help us help you. Please take the surveys below.</h3>
</header>
<div style="float: clear;"></div>
</div>
</div>
</section>
<!-- First Section -->
<section id="first" class="main special">
<header class="major">
</header>
<div id="contact" class="sticky slide" >Contact Us</div>
<span class="image"><img style="width: 100%;" src="/assets/css/images/jb.png" alt=""></span>
<div id="coach" class="center-list">
</div>
<footer class="major">
</footer>
</section>
<!-- Second Section -->
<section id="second" class="main special apcol">
<header class="major">
<span class="image"><img style="width: 100%;" src="/assets/css/images/ps.png" alt=""></span>
<div class="center-list" style="margin-top: .05em;">
</div>
<footer class="major">
</footer>
</header></section>
<!-- Third Section -->
<section id="third" class="main special">
<header class="major">
</header>
<span class="image"><img style="width: 100%;" src="/assets/css/images/lt-icon.jpg" alt=""></span>
<div class="center-list">
</div>
<footer class="major">
</footer>
</section>
<!-- Forth Section -->
<section id="forth" class="main special">
<header class="major">
</header>
<span class="image"><img style="width: 100%;" src="/assets/css/images/cting.jpg" alt=""></span>
<div class="center-list">
</div>
<footer class="major">
</footer>
</section>
<!-- Fifth Section -->
<section id="fifth" class="main special inactive">
<header class="major">
</header>
<span class="image"><img style="width: 100%;" src="/assets/css/images/vt.jpg" alt=""></span>
<div class="center-list">
</div>
<footer class="major">
</footer>
</section>
</div>
<!-- Footer -->
<div id="seventh" class="inactive"></div>
<footer id="footer">
<section>
</section>
<section>
<dl class="alt">
</section>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script type="text/javascript">
// Toggle close with button
var s = document.getElementById('side-menu');
function toggle_visibility() {
if(s.style.width == '0px')
s.style.width = '300px';
else
s.style.width = '0px';
}
</script>
<script type="text/javascript">
// Smooth Scroll
$(document).ready(function() {
$('.slide').click(function() {
var link = $(this).attr('href');
$('html, body').animate({
scrollTop: $(link).offset().top}, 2000);
return false;
});
});
// toggle close ul after select from list
document.getElementById('side-menu').style.display = 'none';
document.getElementById('side-menu').style.width = '0';
$(function() {
$("button").click(function() {
$("#side-menu").show();
});
$("#side-menu a").on('click', function(e) {
e.stopPropagation();
$("#side-menu")
.show()
/* .siblings() */
.val($(this).html());
});
});
</script>
</body></html>
My issue is that I have to click twice in order to get the mobile drop down menu for the website to either open or close. I believe that the JavaScript and HTML is sufficient. I have not been able to modify this JavaScript so that it works properly. Nothing I have tried works. Any suggestions? I have simplified this HTML to the essentials

You have very shared very little information. Possible reason can be that s.style.width is not 0px on initiation. Thats why the first click makes it 0px and the second click opens it. Try adding s.style.width='0px' at the start of the script.

I deleted the JavaScript (// toggle close ul after select from list) that is the at the bottom of the codes since it was clashing with the javascript (// Toggle close with button), which is also located near the bottom. I then used another JavaScript similar to the JavaScript found in (// Toggle close with button) to toggle close ul after a selection is selected from the list. This solved the double clicking issue.

Javascript Scroll not working as expected

I am trying to implement a smooth scroll to another section from my navigation.
The following is the javascript function im using
:
<script type="text/javascript">
function goToByScroll(id){
// Reove "link" from the ID
// Scroll
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}
$("#nav > ul > li > a").click(function(e) {
// Prevent a page reload when a link is pressed
e.preventDefault();
// Call the scroll function
goToByScroll($(this).attr("id"));
});
</script>
My HTML is as following :
<div class="module-group right">
<div class="module left" id="nav">
<ul class="menu">
<li class="">
<a href="#">
Home
</a>
</li>
<li class="">
<a id="about" href="#">
About Us
</a>
</li>
</ul>
</div>
</div>
My section is as below :
<section id="about">
<div class="container" id="">
<div class="row" id="">
<div class="col-sm-12">
<h4 class="uppercase mb80">About Us</h4>
<div class="tabbed-content button-tabs vertical">
<ul class="tabs">
<li class="active">
<div class="tab-title">
<span>Introduction</span>
</div>
<div class="tab-content">
<h5 class="uppercase">Let's Talk about</h5>
<hr>
<p align="justify">
</p>
</div>
</li>
<li>
<div class="tab-title">
<span>History</span>
</div>
<div class="tab-content">
<h5 class="uppercase">Our footprints on the sands of time..</h5>
<hr>
<p align="justify">
</p>
</div>
</li>
<li>
<div class="tab-title">
<span>Mission</span>
</div>
<div class="tab-content">
<h5 class="uppercase">Our Mission</h5>
<hr>
<p align="justify">
</p>
</div>
</li>
<li>
<div class="tab-title">
<span>Vision</span>
</div>
<div class="tab-content">
<h5 class="uppercase">Our Vision</h5>
<hr>
<p align="justify">
</p>
</div>
</li>
</ul>
</div>
<!--end of button tabs-->
</div>
</div>
<!--end of row-->
</div>
<!--end of container-->
</section>
I am facing problems calling the jquery function. I looked up on other questions asked and tried implementing an answer previously given, however it doesnt seem to be working for me.

Change your nav link to About Us.
Then change the function call to goToByScroll($(this).attr("href"));

You can not have two elements with the same id. Use the href like it was intended.
About Us
and when you read the hsah of the clicked anchor
function goToByScroll(id){
$('html,body').animate({
scrollTop: $(id).offset().top},
'slow');
}
$("#nav > ul > li > a").click(function(e) {
e.preventDefault();
goToByScroll(this.hash);
});
basic example:
function goToByScroll(id) {
$('html,body').animate({
scrollTop: $(id).offset().top
},
'slow');
}
$("#nav > ul > li > a").click(function(e) {
e.preventDefault();
goToByScroll(this.hash);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav">
<ul>
<li> About Us </li>
</ul>
</div>
<div style="height:300px;">x</div>
<div style="height:300px;">x</div>
<div id="about" style="height:300px; border: 1px solid black;">ABOUT</div>
<div style="height:300px;">x</div>

Use href attribute to store the id you need to scroll to. Also don't forget to wrap javascript in $(document).ready() to make sure event handlers are attached after the page is ready.
Here's javascript:
$(document).ready(function() {
function goToByScroll(id){
$('html,body').animate({
scrollTop: $(id).offset().top
}, 'slow');
}
$("#nav > ul > li > a").click(function(e) {
e.preventDefault();
goToByScroll($(this).attr("href"));
});
});
And in HTML:
<li class="">
<a href="#about">
About Us
</a>
</li>

Jumping to sections of the page using only Jquery

I've just started to code, and am learning all there is to know about JQuery. I have a navbar with 'About' and 'What is this' anchors. The specific content for the respective anchors are in different sections of the page. If I click an anchor, say 'About', I want to jump to the 'About-content' section of the webpage. I have read of plugins which do this, but is there any way to do this simply using JQuery? I tried doing what was told in an answer to a similar question but it doesn't work.
HTML
<ul class="nav navbar-nav">
<li class="About"> About </li>
<li class="How-it-works"> How it works </li>
</ul>
......
......
<div class="About-content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<p> text text text </p>
</div>
</div>
</div>
</div>
JQuery
$(document).ready(function () {
$('.About').click(function (event) {
event.preventDefault();
$('body, html').animate({
scrollTop: $(".About-content").offset.top
}, 600);
})
}

Use the id attribute to your target div:
<div id="About-content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>text text text</p>
</div>
</div>
</div>
</div>
Set Nav link to the Div id:
<ul class="nav navbar-nav">
<li class="About"> About
</li>
<li class="How-it-works"> How it works
</li>
</ul>
Use the following simple jquery for smooth scroll:
$(document).ready(function() {
$(".About a").click(function() {
$('html, body').animate({
scrollTop: $("#About-content").offset().top
}, 2000);
});
});

Change your target .About-content to an #About-content
Change the href to #About-content
Remove e.preventDefault()
It should function without jQ/JS but if you add easing to your animation then it'd be useful.
$(document).ready(function() {
$('.About').click(function(event) {
$('body, html').animate({
scrollTop: $("#About-content").offset().top
}, 600);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
<li class="About"> About
</li>
<li class="How-it-works"> How it works
</li>
</ul>
<div style="height: 1000px;"></div>
<div id="About-content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>text text text</p>
</div>
</div>
</div>
</div>

Say you have an Nav like this ,
<ul class="nav navbar-nav">
<li class="About"> About </li>
<li class="How-it-works"> How it works </li>
</ul>
And assuming a div like what you have,
Some Content Here
$(document).ready(function(){
$(".navbar-nav a").on('click', function(event) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1000, function(){
window.location.hash = hash;
});
});
})
Will animate to the respective areas. Here hash holds the values after # from your <a>tags.
IMHO, its better to bind the click event on the .nav instead of binding with separate <a>'s.

Well i don't know about jquery. but you can do it more simply by bootstrap. Like this. It is called bootstrap scrollspy. If you like the answer please rate it. :)
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
<div class="container-fluid">
<div class="navbar-header">
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
</div>

Foundation off canvas won't work?

Alright, I followed all the instructions on the page, or so I thought, but I still can't get the Off Canvas to work in my Foundation?
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
<script>
$(document).foundation();
</script>
That's how I'm instructed to put it in, as per the website. http://foundation.zurb.com/docs/components/offcanvas.html
Or so I thought? Also
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>The Psychohistorians</li>
<li>...</li>
</ul>
</aside>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Users</label></li>
<li>Hari Seldon</li>
<li>...</li>
</ul>
</aside>
<section class="main-section">
<!-- content goes here -->
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
That's all done as per instructed?
What I end up with is the menu showing, but when I click on the button for the off canvas to pop, it doesn't pop?
EDIT
Alright, so I tried what you suggested, and it did pop. BUUUT rather than pop out from the side, it popped, shoving everything DOWN, and made this tiny scroll bar?
Alright, this was what it looked like, upon entering your code. THen...
When I clicked it, this happened...
See all that white space? The heading Welcome to Foundation is one mouse scroll down. See the little bitty scroll bar next to the popped menu? =/

Ok i got it.
Move $(document).foundation(); to onload in the body tag. Or at least put it last inside body tags. You can leave the .js references inside head tags. I did this way:
<html>
<head>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<link rel="stylesheet" href="css/foundation.css">
</head>
<body onload="$(document).foundation();">
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>The Psychohistorians</li>
<li>...</li>
</ul>
</aside>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Users</label></li>
<li>Hari Seldon</li>
<li>...</li>
</ul>
</aside>
<section class="main-section">
<!-- content goes here -->
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
</body>
I hope it works!
PD: It's really frustrating that i had 2 comments trying to correct my mistake, and zero answers trying to solve the question.

I would suggest copy and pasting all the following code into a brand new html page and checking it. Then you can either just build off it or figure out what the problem is on your old code.
Make sure that all the linked files (css and js) are getting loaded. You might need to change the paths on the example. It is absolutely essential to make sure they are getting accessed. Use your web browser inspector to see if your getting any 404 (not found) errors.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="css/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>The Psychohistorians</li>
<li>...</li>
</ul>
</aside>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Users</label></li>
<li>Hari Seldon</li>
<li>...</li>
</ul>
</aside>
<a class="exit-off-canvas"></a>
<div class="row">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="panel">
<h3>We’re stoked you want to try Foundation! </h3>
<p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
<p>Once you've exhausted the fun in this document, you should check out:</p>
<div class="row">
<div class="large-4 medium-4 columns">
<p>Foundation Documentation<br />Everything you need to know about using the framework.</p>
</div>
<div class="large-4 medium-4 columns">
<p>Foundation on Github<br />Latest code, issue reports, feature requests and more.</p>
</div>
<div class="large-4 medium-4 columns">
<p>#foundationzurb<br />Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>

just add this CSS code:
.inner-wrap {
min-height: 100vh;
}

Why isn't this JQuery code working on IE8 and IE9?

This function updates my content using the .load method from JQuery. The code works as intended on Google Chrome and Mozilla Firefox, but does not work at all in IE8 nor IE9.
Here is its content:
$(function(){
var newHash='';
$contentwrapper = $("#contentwrapper");
$("nav").delegate(".menuOptions", "click", function()
{
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function()
{
newHash = window.location.hash.substring(1);
$contentwrapper.load(newHash + " #contentcolumn");
setTimeout(TitleUpdater, 200);
});
});
function TitleUpdater()
{
top.document.title=$("#contentcolumn").attr("title");
}
I would like to know how to make this code compatible with Internet Explorer! Thank you.
Edit: On Firefox and Chrome, this code only replaces one big <div id="contentcolumn">...</div> and all the style around stays the same as it was before the script execution. While IE8 and IE9 just remove ALL my html code by <div id="contentcolumn">...</div> (it even writes over the head and body tags). This is really weird!
Here is index.html:
<!DOCTYPE html>
<html>
<head>
<title>Vladi Manaev</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/bagums.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<div id="maincontainer">
<div id="topsection">
<div id="banner"></div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<nav>
<a class="brand" href="">Bagums.com</a>
<ul class="nav">
<li class="dropdown">
Basic Tutorials<b class="caret"></b>
<ul class="dropdown-menu">
<li><a class="menuOptions" href="BasicTutorials/CTutorial.html" name="CTutorial">C</a></li>
<li><a class="menuOptions" href="BasicTutorials/CppTutorial.html" name="CppTutorial">C++</a></li>
<li><a class="menuOptions" href="BasicTutorials/CsharpTutorial.html" name="CsharpTutorial">C#</a></li>
<li><a class="menuOptions" href="BasicTutorials/JavaTutorial.html" name="JavaTutorial">Java</a></li>
<li><a class="menuOptions" href="BasicTutorials/OtherTutorials.html" name="OtherTutorials">Others</a></li>
</ul>
</li>
<li class="dropdown">
My Projects<b class="caret"></b>
<ul class="dropdown-menu">
<li><a class="menuOptions" href="MyProjects/CProject.html">C</a></li>
<li><a class="menuOptions" href="MyProjects/CppProject.html">C++</a></li>
<li><a class="menuOptions" href="MyProjects/CsharpProject.html">C#</a></li>
<li><a class="menuOptions" href="MyProjects/JavaProject.html">Java</a></li>
<li><a class="menuOptions" href="MyProjects/Others.html">Others</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li class="dropdown-toggle"><a class="menuOptions" href="OtherPages/Links.html">Links</a></li>
<li class="dropdown-toggle"><a class="menuOptions" href="OtherPages/Contact.html">Contact</a></li>
<li class="dropdown-toggle"><a class="menuOptions" href="OtherPages/About.html">About</a></li>
</ul>
</nav>
</div> <!-- container -->
</div> <!-- navbar-inner -->
</div><!-- navbar -->
</div><!-- topsection -->
<div id="contentwrapper">
<div id="contentcolumn" title="Vladi Manaev">
<div id="mainPostsTitle">Latest News</div>
<div class="postWrapper">
<div class="post">
<div class="postTitle"><div class="postTitleTxt">Third post on website</div></div>
<div class="postInfo"> Aug 4, 2012 # 7:23 pm</div>
<div class="postContent">
<p>
CONTENT
</p>
</div>
</div>
</div>
<div class="postWrapper">
<div class="post">
<div class="postTitle"><div class="postTitleTxt">Second post on website</div></div>
<div class="postInfo"> Aug 4, 2012 # 7:22 pm</div>
<div class="postContent">
<p>
CONTENT
</p>
</div>
</div>
</div>
<div class="postWrapper">
<div class="post">
<div class="postTitle"><div class="postTitleTxt">First post on website</div></div>
<div class="postInfo"> Aug 4, 2012 # 6:48 pm</div>
<div class="postContent">
<p>
CONTENT
</p>
</div>
</div>
</div>
</div><!-- contentcolumn -->
</div><!-- contentwrapper -->
<div id="footer">
<nav>
<div> Copyright © 2012 created by <a class="menuOptions" href="OtherPages/Contact.html"> Vladi Manaev</a></div>
</nav>
</div><!-- footer -->
</div><!-- maincontainer -->
<!-- Placed at the end of the document so the page load faster -->
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script type="text/javascript" src="scripts/bootstrap-dropdown.js"></script>
<script>
$(function(){
var newHash='';
$contentwrapper = $("#contentwrapper");
$("nav").delegate(".menuOptions", "click", function()
{
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function()
{
newHash = window.location.hash.substring(1);
$contentwrapper.load(newHash + " #contentcolumn");
setTimeout(TitleUpdater, 200);
});
});
function TitleUpdater()
{
top.document.title=$("#contentcolumn").attr("title");
}
</script>
</body>
</html>

When i changed my href to start with # like this:
<a class="menuOptions" href="#BasicTutorials/CTutorial.html" name="CTutorial">C</a>
...
It start working on IE as well!
My guess is that window.location.hash does not work on IE... and when i added "#" by hand it solved the problem.
Thanks everyone for trying to help !

Categories

Resources