Top bar not working in foundation 4.3.2 version? - javascript

in my previous project , i have used the foundation 4 open source. that time i have got a top bar navigation. but now am again trying new project with foundation. for that i have downloaded http://foundation.zurb.com/develop/download-f4.html that is foundation4.3.2 version. i have refereed the foundation 4.3.2 version css and js in my new project, but the top-bar not coming its showing like tree view without any effort of foundation ?
if i refer the foundation 4 , top - bar is working...
then
why Top-bar not working while i refereeing the foundation 4.3.2 version ?
HTML code
<html>
<head id="head2" runat="server">
<meta charset="UTF-8" />
<asp:ContentPlaceHolder ID="Title" runat="server">
<title>sample project</title>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>
<link href="../../Scripts/css/foundation.css" rel="Stylesheet" type="text/css" />
<script src="../../Scripts/js/foundation.min.js" type="text/javascript"></script>
<script src="../../Scripts/js/vendor/custom.modernizr.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="row">
<div class="large-12 columns">
<img src="../../Scripts/img/logo.png" />
</div>
</div>
<div class="row">
<div class="large-12 column">
<nav class="top-bar">
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown">Moderate</li>
<ul class="dropdown">
<li>Moderate Posts</li>
<li>New Post</li>
<li>Send E-mail</li>
</ul>
<li class="divider"></li>
<li class="has-dropdown">Options</li>
<ul class="dropdown">
<li>Statistics</li>
<li>Users</li>
<li>Change Password</li>
<li>Reports</li>
</ul>
<li class="divider"></li>
<li class="has-dropdown">Configuration</li>
<ul class="dropdown">
<li>Categories</li>
<li>Fields</li>
<li>Locations</li>
<li>Localities</li>
<li>E-mail Templates</li>
<li>Admin Users</li>
</ul>
</ul>
</section>
</nav>
</div>
</div>
<div class="row" >
<div class="large-12 columns ">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="row" >
<div class="large-12 columns ">
Copyright #2014
</div>
</div>
<script type="text/javascript">
document.write('<script src=' +
('__proto__' in {} ? '../../Scripts/js/vendor/zepto' : '../../Scripts/js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="../../Scripts/js/foundation.min.js" type="text/javascript"></script>
<script src="../../Scripts/js/foundation/foundation.topbar.js"></script>
<script type="text/javascript">
$(document).foundation();
function setLayout() {
winWid = $(window).width();
if (winWid > 750) {
$(".trd").each(function (index) {
ht = $(this).height();
$(this).parent().closest('.row').find('.advt').css('height', ht - 16 + "px");
})
}
}
$(window).resize(function () {
setTimeout("setLayout()", 1000);
});
setLayout()
</script>
</form>
</body>
</html>
Note: There is no error i found out at run time.. but my web page showing like tree view ( i used ul and li element) without any effort of foundation 4.3.2 version.
My web page should look like below image

The following should work:
<html>
<head id="head2" runat="server">
<meta charset="UTF-8" />
<asp:ContentPlaceHolder ID="Title" runat="server">
<title>sample project</title>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>
<link href="../../Scripts/css/foundation.css" rel="Stylesheet" type="text/css" />
<script src="../../Scripts/js/vendor/custom.modernizr.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="row">
<div class="large-12 columns">
<img src="../../Scripts/img/logo.png" />
</div>
</div>
<div class="row">
<div class="large-12 column">
<nav class="top-bar">
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown">Moderate
<ul class="dropdown">
<li>Moderate Posts</li>
<li>New Post</li>
<li>Send E-mail</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown">Options
<ul class="dropdown">
<li>Statistics</li>
<li>Users</li>
<li>Change Password</li>
<li>Reports</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown">Configuration
<ul class="dropdown">
<li>Categories</li>
<li>Fields</li>
<li>Locations</li>
<li>Localities</li>
<li>E-mail Templates</li>
<li>Admin Users</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
</div>
<div class="row">
<div class="large-12 columns ">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="row">
<div class="large-12 columns ">
Copyright #2014
</div>
</div>
<script type="text/javascript">
document.write('<script src=' +
('__proto__' in {} ? '../../Scripts/js/vendor/zepto' : '../../Scripts/js/vendor/jquery') +
'.js><\/script>');
</script>
<script src="../../Scripts/js/foundation.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).foundation();
function setLayout() {
winWid = $(window).width();
if (winWid > 750) {
$(".trd").each(function (index) {
ht = $(this).height();
$(this).parent().closest('.row').find('.advt').css('height', ht - 16 + "px");
})
}
}
$(window).resize(function () {
setTimeout("setLayout()", 1000);
});
setLayout()
</script>
</form>
</body>
</html>
I've done a few things here. First and foremost, I just formatted the code so it could be read easier. Second, I removed the call to foundation.min.js in the head. You're calling foundation.min.js at the foot of the body, and including it twice can cause confusion with naming variables. I also removed your call to foundation.topbar.js because this file is included in the minified script you've already included. Last I re-worked your dropdown menus so that Foundation could interpret them properly. Foundation expects to the dropdown menu to be within the parent li element. I also made the dropdown li text into anchors in accord with Foundation documentation.
Oh, and I added a semi-colon to the document.write() statement that includes jQuery/zepto.

This is not foundation 4.3.2 version problem. actually i have made some changes in foundation.css itself.. that made the problem for my web page. after i deleted changes made in the foundation.css then got the top-bar navigation.
So we dont make changes in the foundation.css itself.
better we can create customized css for our references.

Related

add separator listview jquery mobile

i have jquery mobile list view.
can anybody help me please, to customize this listview.
i want to customize the separator between list, so its will look like this
here is my code
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://demos.jquerymobile.com/1.2.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://demos.jquerymobile.com/1.2.1/js/jquery.mobile-1.2.1.js"></script>
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.2.1/css/themes/default/jquery.mobile-1.2.1.css" />
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.2.1/docs/_assets/css/jqm-docs.css"/>
<div data-role="page" id="mainn">
<div data-role="header" data-tap-toggle="false" data-theme='b'>
</div>
<div data-role="content">
<ul id="promoList" data-role="listview" >
<li>
<img src="airasia.jpg" >
<span class="ui-li-count">test 123</span>
</li>
<li>
<img src="d1380513326.jpg">
<span class="ui-li-count">test 124</span>
</li>
</ul>
</div>
</div>

Setting up Master page with a template in MVC-4 using aspx engine

Since, I'm new in MVC, I've a question on how to set up a master page in MVC-4 using a template that I already have in aspx engine (not razor). After a ton of research, somehow I could able to run a sample index page using the master page which is placed inside shared folder.
But the problem is that the CSS files and .js files for the master page are not being triggered. So, what I see after running page is not as it expected to be.
I tried putting the js and CSS files inside content folder and tried putting in shared folder as well, but still the style is not showing up.
Master page code is as follows:
<!DOCTYPE html>
<html lang="en">
<head id="Head1" runat="server">
<meta charset="utf-8" />
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic" rel="stylesheet" type="text/css">
<!-- js -->
<script src="js/jquery.min.js"></script>
<!-- //js -->
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="Princi_Gym Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<!-- hover-effects -->
<!-- //hover-effects -->
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000);
});
});
</script>
<!-- start-smoth-scrolling -->
<!--start-top-nav-script-->
<!--End-top-nav-script-->
</head>
<body>
<body style="">
<!-- header -->
<div class="header">
<div class="container">
<div class="header-top-left" id="home">
<ul>
<li class="activ">LAST NOTICE</li>
<li>Aliquam sit amet gravida ipsum,vitae scelerisque mi.Maecenas ullamcorper in
metus a ullamcorper.Sed dictum neque </li>
</ul>
</div>
<div class="header-top-right">
<p>Phone Number:<span> 043-234-3453</span></p>
</div>
<div class="clearfix"> </div>
<div class="head-logo">
<span> </span>
</div>
<div class="header-top">
<div class="navigation">
<span class="menu"></span>
<ul class="navig">
<li>Home</li>
<li class="plan active">CLASSES
<ul class="sub-nav sub">
<li>DROP ITEM1</li>
<li>DROP ITEM2</li>
</ul>
</li>
<li>PAGES</li>
<li>NEWS</li>
<li>GALLERY</li>
<li>TRAINERS</li>
<li>CONTACT</li>
<li>CONTACT</li>
<div class="clearfix"> </div>
</ul>
</div>
<div class="search">
<form>
<input type="text" placeholder="Type and search..." required=" ">
</form>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- script-for-menu -->
<script>
$("span.menu").click(function () {
$(" ul.navig").slideToggle("slow", function () {
});
});
</script>
<!-- script-for-menu -->
<!-- //header -->
<!-- banner -->
<!-- //banner -->
<!-- banner-bottom -->
<div class="banner-bottom">
<asp:ContentPlaceHolder ID="FeaturedContent" runat="server" />
<section class="content-wrapper main-content clear-fix">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© <%: DateTime.Now.Year %> - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
<%: Scripts.Render("~/bundles/jquery") %>
<asp:ContentPlaceHolder ID="ScriptsSection" runat="server" />
</div>
<!-- //banner-bottom -->
<!-- footer -->
<div class="footer">
<div class="container">
<div class="footer-icon footer-icon-top">
<img src="images/row.png" alt=" ">
</div>
<div class="footer-social">
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div class="footer-nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>NEWS</li>
<li>ARCHIVES</li>
<li>CONTACT</li>
</ul>
</div>
<p>Template by w3layouts</p>
</div>
</div>
<!-- //footer -->
<!-- here stars scrolling icon -->
<script type="text/javascript">
$(document).ready(function () {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!-- //here ends scrolling icon -->
<span id="toTopHover"></span>To Top</body>
<div id="body">
</body>
</html>
And the sample page code is as follows:
<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
Home Page - My ASP.NET MVC Application
</asp:Content>
<asp:Content ID="indexFeatured" ContentPlaceHolderID="FeaturedContent" runat="server">
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>Home Page.</h1>
<h2><%: ViewBag.Message %></h2>
</hgroup>
<p>
To learn more about ASP.NET MVC visit
http://asp.net/mvc.
The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET MVC.
If you have any questions about ASP.NET MVC visit
our forums.
</p>
</div>
</section>
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<h3>We suggest the following:</h3>
<ol class="round">
<li class="one">
<h5>Getting Started</h5>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and that gives you full control over markup
for enjoyable, agile development. ASP.NET MVC includes many features that enable
fast, TDD-friendly development for creating sophisticated applications that use
the latest web standards.
Learn more…
</li>
<li class="two">
<h5>Add NuGet packages and jump-start your coding</h5>
NuGet makes it easy to install and update free libraries and tools.
Learn more…
</li>
<li class="three">
<h5>Find Web Hosting</h5>
You can easily find a web hosting company that offers the right mix of features
and price for your applications.
Learn more…
</li>
</ol>
</asp:Content>
Any help will be greatly appreciated...

Conflict between jquery and bootstrap

I have a code where I am including jquery files and bootstrap files in the header.php. I am running into issues where if I include the jquery file before bootstrap.js file, it messes up the other tabs on my webpage and basically even if i click on the other tabs it does not navigate me.
I think there is a conflict between jquery and bootstrap. I am pasting my header.php file below for more reference.
header.php
<?php require_once "essentials.php";
//error_reporting(~0);
//ini_set('display_errors', 1);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--<style>{height:150px; width:1300px;}</style>-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="Public">
<title><?php echo $page_title?></title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="script_dbafactory.js?<?php echo rand(0,511);?>"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<!--<link href="css/style_header.css" rel="stylesheet">-->
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-4 column">
<img alt="logo" src="./images/source.png">
</div>
<div class="col-md-8 column dbf">
<h2>
DBA Factory
</h2>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="tabbable" id="tabs-775712">
<ul class="nav nav-tabs">
<li>
Home
</li>
<li>
Submit a project
</li>
<li>
All Projects
</li>
<li>
Innovative Ideas
</li>
<li>
Matchmaker
</li>
<li>
Meet the Team
</li>
<div class="dropdown">
<?php include "userlogin.php"; ?>
</div>
</ul>
</div>
</div>
</div>
</div>
</body>
<!--<script type="text/javascript">
//Script to implement tabs
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>-->
<script>
$.noConflict();
$(document).ready(function (){
$('.dropdown-toggle').dropdown();
$('#userlogin').dropdown('toggle');
});
</script>
Can someone please let me know how do i solve this issue? and how should i load all the js and css files to avoid any issues with the webpage.
Thanks
data-toggle="tab" for bootstrap means there has to have a [tab panel] for it, however, you only use it as nav, and it caused the problem.
Please read: http://getbootstrap.com/javascript/#tabs
Also, use js closure can more easier to avoid js conflict issue:
(function($){
....
})(jQuery);
Please check the code below, you can use WinMerge to compare the code with your own:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--<style>{height:150px; width:1300px;}</style>-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="Public">
<title><?php echo $page_title ?></title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<!--<link href="css/style_header.css" rel="stylesheet">-->
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-4 column">
</div>
<div class="col-md-8 column dbf">
<h2>
DBA Factory
</h2>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="tabbable" id="tabs-775712">
<ul class="nav nav-tabs">
<li>
Home
</li>
<li>
Submit a project
</li>
<li>
All Projects
</li>
<li>
Innovative Ideas
</li>
<li>
Matchmaker
</li>
<li>
Meet the Team
</li>
<li class="dropdown">
<a id="userlogin" role="button" data-toggle="dropdown" href="#">rdesai<span class="caret"</span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="userlogin">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Settings</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script>
(function($){
$(document).ready(function (){
$('.dropdown-toggle').dropdown();
$('#userlogin').dropdown('toggle');
});
})(jQuery);
</script>
</body>
</html>
Usually when i run into jquery and bootstrap conflicts, i just add this as the first line of my php file:
<script>jQuery.noConflict();</script>
This is to avoid conflicts with other libraries.
You can read more here: https://api.jquery.com/jQuery.noConflict/
Edit:
Or use
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
instead of 1.10.3

Kendo UI mobile drawer does not work properly because of # in url

I'm experiencing issues with the drawer in my asp.net mvc mobile application. After a lot of hassle (and possibly a few bugs in the asp.net mvc helpers) I decided to roll back to a javascript layout for my app.
The only problem I have is that I've implemented a drawer-menu that does not seem to work properly.
For some reason, Kendo generates a # in the middle of my url, causing the drawer to not show.
This is the url when it doesn't work:
http://localhost:55683/#/UnitDetails/Index/2
And here it is when it works:
http://localhost:55683/UnitDetails/Index/2#/
Here's my markup in my shared _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="#Url.Content("~/Content/kendo/2013.2.716/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2013.2.716/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/kendo/2013.2.716/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/2013.2.716/kendo.mobile.min.js"></script>
<link href="#Url.Content("~/Content/kendo/2013.2.716/kendo.dataviz.flat.min.css")" rel="stylesheet" type="text/css" />
</head>
<body>
#RenderBody()
<!--Main Layout -->
<div data-role="layout" data-id="mainLayout">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<div data-role="footer">
<div data-role="tabstrip">
<a data-icon="action" href="~/Logout">Logout</a>
</div>
</div>
</div>
</body>
</html>
And here's the Index.cshtml of my UnitDetails-view:
<!-- Drawer layout -->
<div data-role="layout" data-id="drawer-layout">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<span data-role="view-title"></span>
#*<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>*#
<a data-align="right" data-role="backbutton">Back</a>
</div>
</header>
</div>
<div id="drawer-home" data-role="view" data-layout="drawer-layout" data-title="Unit Details">
<!-- Content removed for readability -->
<div data-role="footer">
</div>
</div>
<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['drawer-home']">
<ul data-role="listview" data-type="group">
<li>Mailbox
<ul>
<li data-icon="inbox">Inbox</li>
</ul>
</li>
</div>
<script>
window.app = new kendo.mobile.Application(document.body, {
layout: "drawer-layout",
transition: "fade",
skin: "flat",
hideAddressBar: true
});
</script>
There was a bug with the kendo mobile drawer 2013.2.918 and was fixed with a later internal build. Try some debugging by removing the data-views attribute from the drawer. But this will cause the drawer to be displayed in all views via swipe.

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