This code is displaying vertical tabs with vertical text and content. Toggle is not working properly, when I click on second tab, first content is also displaying. Can anyone help me to get the content of individual tabs? Here I have mentioned html, css and javascript code. Is it possible in Jquery? Can anyone mention the details?
<main id="main">
<section id="portfolio">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4">
<div class="vtab">
<div class="col-xs-3">
<ul class="nav nav-tabs tabs-left vertical-text">
<li class="active">Home
</li>
<li>Profile</li>
</ul>
</div>
<div class="col-xs-9">
<div class="tab-content">
<div id="left" >
<div>
<ul id="tree1" >
<li id="li2">News
<ul>
<li>Company Maintenance</li>
<li>Employees
<ul>
<li>Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
<li id="li2">Sites
<ul>
<li>Company Maintenance</li>
<li>Employees
<ul>
<li>Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="tab-pane" id="profile-v">Profile Tab.</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript">
$.fn.extend({
treed: function (o) {
var openedClass = 'glyphicon-minus-sign';
var closedClass = 'glyphicon-plus-sign';
if (typeof o != 'undefined'){
if (typeof o.openedClass != 'undefined'){
openedClass = o.openedClass;
}
if (typeof o.closedClass != 'undefined'){
closedClass = o.closedClass;
}
};
var tree = $(this);
tree.addClass("tree");
tree.find('li').has("ul").each(function () {
var branch = $(this); //li with children ul
branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
branch.addClass('branch');
branch.on('click', function (e) {
if (this == e.target) {
var icon = $(this).children('i:first');
icon.toggleClass(openedClass + " " + closedClass);
$(this).children().children().toggle();
}
})
branch.children().children().toggle();
});
tree.find('.branch .indicator').each(function(){
$(this).on('click', function () {
$(this).closest('li').click();
});
});
tree.find('.branch>a').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
tree.find('.branch>button').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
}
});
$('#tree1').treed();
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"
rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js">
</script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-
combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-
bootstrap/2.3.2/js/bootstrap.min.js"></script>
You forgot both import of jQuery (JSfiddle console raised that error) and Boostrap classes (tab-pane) and ids (the content of the href of the a tag) on tabs panels.
Here the right code:
jQuery Script from CDN:
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
Here the right panel code:
<section id="portfolio">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4">
<div class="vtab">
<div class="col-xs-3">
<hr/>
<ul class="nav nav-tabs tabs-left vertical-text">
<li class="active">Home</li>
<li>Profile</li>
</ul>
</div>
<div class="col-xs-9">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane" id="home-v">Home Tab.</div>
<div class="tab-pane" id="profile-v">Profile Tab.</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</section>
I simplified the code inside the Home panel in order not to post a big piece of code, which was not relevant.
Hope this helps!
Working codepen link with full code.
Related
I have a one page website which i am trying to convert to VueJs. In this website i have Header component with some kind of a menu and dropdown menu with multiple choices.
This is the HTML:
<header class="header">
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-4 col-8 d-flex flex-center">
<div class="logo">
<img src="images/logo.png" alt="Logo">
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-8 col-4">
<div class="menu-toggle">
<span></span>
</div>
<div class="main-menu">
<div class="nav-menu text-right">
<ul>
<li class="active">Home</li>
<li>About us</li>
<li class="menu-dropdwon">
Products
<ul>
<li>Management</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
This is the js:
/*----- Menu Toggle Start ----- */
$(".menu-toggle").on("click", function(){
$(this).toggleClass("active");
$(".main-menu").slideToggle();
$(".nav-menu > ul ul").slideUp(200);
$("li.menu-dropdwon a").removeClass("active");
});
/*----- Menu Toggle End ----- */
/*----- Submenu Drop Down Start ----- */
$("li.menu-dropdwon a").on("click", function() {
if ( $(window).width() < 1025 ){
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(this).siblings(".nav-menu > ul ul").slideUp(200);
} else {
$("li.menu-dropdwon a").removeClass("active");
$(this).addClass("active");
$(".menu-in").slideUp(200);
$(this).siblings(".nav-menu > ul ul").slideDown(200);
};
};
});
/*----- Submenu Drop Down End ----- */
Basically i need to convert this to VueJS component but i am not sure how.
Here is a part of the solution, you can implement the second method handleSubMenuClick.
Note that you must install vue-slide-toggle
<template>
<div>
<div
#click="handleClickMenu"
:class="{ active: isActive }"
class="menu-toggle"
>
<span>Menu</span>
</div>
<SlideToggle :open="isActive">
<div class="main-menu">
<div class="nav-menu text-right">
<ul>
<li class="active">Home</li>
<li>About us</li>
<li class="menu-dropdwon">
Products
<ul>
<li>Management</li>
</ul>
</li>
</ul>
</div>
</div>
</SlideToggle>
</div>
</template>
<script>
import { VueSlideToggle } from "vue-slide-toggle";
export default {
name: "Menu",
components: {
SlideToggle: VueSlideToggle,
},
data() {
return {
isActive: false,
};
},
methods: {
handleClickMenu() {
this.isActive = !this.isActive;
const element = this.$el.querySelector("li.menu-dropdwon a");
if (element) {
element.classList.remove("active");
}
},
},
};
</script>
I try to use pagination for the nav tabs.i have 2 nav tabs first one is home and the second one is profile.intally the home tab will be active for that pagination works fine on click of the profile tab the pagination with table has to come.but here its not coming proper.
Here is my code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<div class="container">
<div class="row">
<div class="col-md-11 col-sm-12 wf-tab">
<!-- 2nd tab -->
<div class="tabbable-panel" style="margin-top: 10px;">
<div>
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab_default_1" data-toggle="tab" class="">
home </a>
</li>
<li>
profile
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_default_1">
<div>
<!-- 1st -->
<table>
<tbody id="myTable">
<tr>
<td><div>1 </div></td>
</tr>
<tr>
<td><div>2 </div></td>
</tr>
<tr>
<td><div>3</div></td>
</tr>
<tr>
<td><div>4</div></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12 text-center">
<ul class="pagination" id="myPager"></ul>
</div>
</div>
<div class="tab-pane" id="tab_default_3">
<div>
<!-- 2ndt -->
<table>
<tbody id="secondTable">
<tr>
<td><div>1 </div></td>
</tr>
<tr>
<td><div>2 </div></td>
</tr>
<tr>
<td><div>3</div></td>
</tr>
<tr>
<td><div>4</div></td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12 text-center">
<ul class="pagination" id="secondPager"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Script:
$.fn.pageMe = function(opts){
var $this = this,
defaults = {
perPage: 7,
showPrevNext: false,
hidePageNumbers: false
},
settings = $.extend(defaults, opts);
var listElement = $this;
var perPage = settings.perPage;
var children = listElement.children();
var pager = $('.pager');
if (typeof settings.childSelector!="undefined") {
children = listElement.find(settings.childSelector);
}
if (typeof settings.pagerSelector!="undefined") {
pager = $(settings.pagerSelector);
}
var numItems = children.size();
var numPages = Math.ceil(numItems/perPage);
pager.data("curr",0);
if (settings.showPrevNext){
$('<li>«</li>').appendTo(pager);
}
var curr = 0;
while(numPages > curr && (settings.hidePageNumbers==false)){
$('<li>'+(curr+1)+'</li>').appendTo(pager);
curr++;
}
if (settings.showPrevNext){
$('<li>»</li>').appendTo(pager);
}
pager.find('.page_link:first').addClass('active');
pager.find('.prev_link').hide();
if (numPages<=1) {
pager.find('.next_link').hide();
}
pager.children().eq(1).addClass("active");
children.hide();
children.slice(0, perPage).show();
pager.find('li .page_link').click(function(){
var clickedPage = $(this).html().valueOf()-1;
goTo(clickedPage,perPage);
return false;
});
pager.find('li .prev_link').click(function(){
previous();
return false;
});
pager.find('li .next_link').click(function(){
next();
return false;
});
function previous(){
var goToPage = parseInt(pager.data("curr")) - 1;
goTo(goToPage);
}
function next(){
goToPage = parseInt(pager.data("curr")) + 1;
goTo(goToPage);
}
function goTo(page){
var startAt = page * perPage,
endOn = startAt + perPage;
children.css('display','none').slice(startAt, endOn).show();
if (page>=1) {
pager.find('.prev_link').show();
}
else {
pager.find('.prev_link').hide();
}
if (page<(numPages-1)) {
pager.find('.next_link').show();
}
else {
pager.find('.next_link').hide();
}
pager.data("curr",page);
pager.children().removeClass("active");
pager.children().eq(page+1).addClass("active");
}
};
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
alert(target);
if(target=="#tab_default_3"){
$('#secondTable').pageMe({pagerSelector:'#secondPager',showPrevNext:true,hidePageNumbers:false,perPage:2});
}
else if(target==="#tab_default_1"){
alert("===");
}
});
$(document).ready(function(){
$('#myTable').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:2});
});
For the home tab its working fine but when i click on the profile tab the paginations display again if i click home tab and then on profile the pagination increases.how to solve this can anyone suggest me how to do.
Use Simple and easy concept by using below code
$(document).ready(function(){
$('.next').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.previous').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<!-- tabs -->
<div class="col-md-3 col-sm-3">
<ul class="nav nav-tabs nav-stacked nav-alternate">
<li class="active">
Tab- 1
</li>
<li>
Tab - 2
</li>
<li>
Tab - 3
</li>
</ul>
</div>
<!-- tabs content -->
<div class="col-md-9 col-sm-9">
<div class="tab-content tab-stacked nav-alternate">
<div id="tab_1" class="tab-pane active">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 1</p>
</div>
</div>
<ul class="pager">
<li class="next"><a class="radius-0" href="#" data-toggle="tab">Next →</a></li>
</ul>
</div>
<div id="tab_2" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 2</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
<li class="next"><a class="radius-0" href="#">Next →</a></li>
</ul>
</div>
<div id="tab_3" class="tab-pane">
<div class="panel panel-default">
<div class="panel-body">
<p>Some Text Tab 3</p>
</div>
</div>
<ul class="pager">
<li class="previous"><a class="radius-0" href="#">← Previous</a></li>
</ul>
</div>
</div>
</div>
I am using MVC application.
After loading web page, In tree view how to show expand and collapse of child/ node. If first child is expanded then if we click on second child first child should be collapsed and so on.
Please find below tree view structure. when I run the web page is displaying with below tree structure.
Company Maintenance
-Employees
-Employee Details
Name
Permanent Address
Present Address
Technologies
-Reports
Report1
Report2
Report3
-Employee Maint.
CSE
IT
ECE
CSE
Human Resources
I am using jquery and html to display above tree view.
and the Index.CSHTML code is as follows.
Here all the details are in hard-coded only. No backend data. Every thing return in Index.cshtml only.
<body>
<table>
<tr>
<td style="width: 30%">
<ul id="tree1">
<li>
TECH
<ul>
<li class="active"><a data-toggle="pill" href="#compmain">Company Maintenance</a></li>
<li>Employees
<ul>
<li>Employee Details
<ul>
<li><a data-toggle="pill" href="#name">Name </a></li>
<li><a data-toggle="pill" href="#peraddr">Perminent Address</a></li>
<li><a data-toggle="pill" href="#presaddr">Present Address </a></li>
<li><a data-toggle="pill" href="#tech">Technologies</a></li>
</ul>
</li>
<li>Reports
<ul>
<li><a data-toggle="pill" href="#report1">Report1 </a></li>
<li><a data-toggle="pill" href="#report1">Report2 </a></li>
<li><a data-toggle="pill" href="#report1">Report3 </a></li>
</ul>
</li>
<li>Department
<ul>
<li><a data-toggle="pill" href="#cse">CSE </a></li>
<li><a data-toggle="pill" href="#it">IT </a></li>
<li><a data-toggle="pill" href="#eee">EEE</a></li>
<li><a data-toggle="pill" href="#ece">ECE</a></li>
</ul>
</li>
</ul>
</li>
<li><a data-toggle="pill" href="#hrinfor">Human Resources</a></li>
</ul>
</li>
</ul>
</td>
<td>
<div class="tab-content">
<div id="compmain" class="tab-pane fade in active">
<h3>Details</h3>
<p>Company Maintainence infor</p>
</div>
<div id="name" class="tab-pane fade">
<h3>Details</h3>
<p>Name of the Employee</p>
</div>
<div id="peraddr" class="tab-pane fade">
<h3>Details</h3>
<p>Perminent Address</p>
</div>
<div id="presaddr" class="tab-pane fade">
<h3>Details</h3>
<p>Present Address</p>
</div>
<div id="report1" class="tab-pane fade">
<h3>Details</h3>
<p>Report 1</p>
</div>
<div id="report2" class="tab-pane fade">
<h3>Details</h3>
<p>Report 2</p>
</div>
<div id="report3" class="tab-pane fade">
<h3>Details</h3>
<p>Report 3</p>
</div>
<div id="cse" class="tab-pane fade">
<h3>Details</h3>
<p>CSE</p>
</div>
<div id="it" class="tab-pane fade">
<h3>Details</h3>
<p>IT</p>
</div>
<div id="ece" class="tab-pane fade">
<h3>Details</h3>
<p>ECE</p>
</div>
<div id="eee" class="tab-pane fade">
<h3>Details</h3>
<p>EEE</p>
</div>
<div id="hrinfor" class="tab-pane fade">
<h3>Details</h3>
<p>List of HR Resources</p>
</div>
</div>
</td>
</tr>
</table>
</body>
This is Controller action method
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
Please find below code. This is the code I am using to display tree view.
<head>
<link rel="stylesheet"
href="https://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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<script type="text/javascript">
$.fn.extend({
treed: function (o) {
var openedClass = 'glyphicon-minus-sign';
var closedClass = 'glyphicon-plus-sign';
if (typeof o != 'undefined') {
if (typeof o.openedClass != 'undefined') {
openedClass = o.openedClass;
}
if (typeof o.closedClass != 'undefined') {
closedClass = o.closedClass;
}
};
//initialize each of the top levels
var tree = $(this);
tree.addClass("tree");
tree.find('li').has("ul").each(function () {
var branch = $(this); //li with children ul
branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
branch.addClass('branch');
branch.on('click', function (e) {
if (this == e.target) {
var icon = $(this).children('i:first');
icon.toggleClass(openedClass + " " + closedClass);
$(this).children().children().toggle();
}
})
branch.children().children().toggle();
});
//fire event from the dynamically added icon
tree.find('.branch .indicator').each(function () {
$(this).on('click', function () {
$(this).closest('li').click();
});
});
//fire event to open branch if the li contains an anchor instead of text
tree.find('.branch>a').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
//fire event to open branch if the li contains a button instead of text
tree.find('.branch>button').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
}
});
//Initialization of treeviews
$('#tree1').treed({openedClass : 'glyphicon-folder-open', closedClass : 'glyphicon-folder-close'});
$('#tree1 .branch').each(function () {
var icon = $(this).children('i:first');
icon.toggleClass('glyphicon-folder-open glyphicon-folder-close');
$(this).children().children().toggle();
$('#tree1').nestable('collapseAll');
});
</script>
I recommend you to take a look at https://github.com/mar10/fancytree
I am trying to make the bootstrap tabnavigation as a slideshow like switching the tabs automatically and I want to reset the timer when user click the navigation buttons, but here it is not working please help me to fix the problem in this script. I tried it here jsfiddle
tabSlideshowSetup('#slideshowOne');
tabSlideshowSetup('#slideshowTwo');
function tabSlideshowSetup(parent) {
var toime = 0;
var tabs = $(parent).children('.dot-nav > li');
var tabsPagenationDots = $(parent).children('.dot-nav > li > a');
function imgFunc(){
var active = tabs.filter('.active'),
next = active.next('li'),
toClick = next.length ? next.find('a') : tabs.eq(0).find('a');
toClick.trigger('click');
clearInterval(toime);
toime=setInterval(imgFunc, 18000);
}
toime=setInterval(imgFunc, 18000);
tabsPagenationDots.click(function(){
clearInterval(toime);
toime=setInterval(imgFunc, 18000);
});
}
Html code is here:,
<div id="slideshowOne" class="row-fluid">
<div class="tab-content row-fluid" id="testimonial-section">
<div class="row-fluid tab-pane active" id="ttta">
<p class="testimonial-detail">Anand Lunia, <small> India Quotient Founder, Angel Investor </small></p>
</div>
<div class="row-fluid tab-pane" id="tttb">
<p class="testimonial-detail">Raghu Dixit, <small>Renowned Musician </small></p>
</div>
<div class="row-fluid tab-pane" id="tttc">
<p class="testimonial-detail">Surekha Pillai, <small>Communications Consultant </small></p>
</div>
</div>
<ul class="nav nav-tabs dot-nav" id="testimonial_tab">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
<div id="slideshowTwo" class="row-fluid">
<div class="tab-content row-fluid" id="testimonial-section">
<div class="row-fluid tab-pane active" id="ttta">
<p class="testimonial-detail">Anand Lunia, <small> India Quotient Founder, Angel Investor </small></p>
</div>
<div class="row-fluid tab-pane" id="tttb">
<p class="testimonial-detail">Raghu Dixit, <small>Renowned Musician </small></p>
</div>
<div class="row-fluid tab-pane" id="tttc">
<p class="testimonial-detail">Surekha Pillai, <small>Communications Consultant </small></p>
</div>
</div>
<ul class="nav nav-tabs dot-nav" id="testimonial_tab">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
jsFiddle Demo
tabsPagenationDots.click(function () {
clearInterval(toime);
toime = setInterval(imgFunc, 3000);
tabsBox.hide();
var index = tabsPagenationDots.index(this);
tabsBox.eq(index).show();
});
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 !