Hi,
You have to either remove, float rule or change/remove below
rule: position:
fixed; if u remove float, also remove clear, z-index etc rules.
I removed the position: fixed; rule but that did not bring back the menu.
I can't remove the clear, z-index rules becuase that would break the design of the site. I want the content to scroll but not the menu.
I am getting some JavaScript errors when I run the site:
From jquery.1.8.3.js:
// Use this for any attribute in IE6/7 // This fixes almost every IE6/7 issue nodeHook = jQuery.valHooks.button = {
get: function(
elem, name ) {
var ret; ret = elem.getAttributeNode( name );
return ret && ( fixSpecified[ name ] ? ret.value !==
""
: ret.specified ) ?
ret.value : undefined;
},
set: function(
elem, value, name ) { // Set the existing or create a new attribute node
var ret = elem.getAttributeNode( name );
if ( !ret ) { ret = document.createAttribute( name );
elem.setAttributeNode( ret );
return ( ret.value = value +
""
); // <== this is highlighted in the compliler }
};
eric2820
Contributor
2777 Points
1161 Posts
My menu is in the View Source but not on the page!
Jan 21, 2013 08:38 PM|LINK
My _Layout.cshtml file looks like this:
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content( "~/Content/Site.css" )" rel="stylesheet" type="text/css" />
<script src="@Url.Content( "~/Scripts/jquery-1.8.3.js" )" type="text/javascript"></script>
<script src="@Url.Content( "~/Scripts/jquery.unobtrusive-ajax.js" )" type="text/javascript"></script>
<script src="@Url.Content( "~/Scripts/jquery.validate.js" )" type="text/javascript"></script>
<script src="@Url.Content( "~/Scripts/jquery.validate.unobtrusive.js" )" type="text/javascript"></script>
@if ( false )
{
<script src="@Url.Content( "~/Scripts/jQuery-1.8.3-vsdoc.js" )" type="text/javascript"></script>
<script src="@Url.Content( "~/Scripts/jquery.validate.vsdoc.js" )" type="text/javascript"></script>
}
</head>
<body style="background-image: url(/Content/Images/bookcase.bmp); background-attachment: fixed;">
<div class="header">
@{Html.RenderAction( "MemberInfo", "Nav" ); }
</div>
<div class="floating-menu">
@{ Html.RenderAction( "Nav", "Nav" ); }
</div>
<div class="content">
@{ Html.RenderAction( "Login", "Home" ); }
@RenderBody()
</div>
<div class="move-right-onlineUsers" id="onlineUsers">
<span style="text-decoration: underline;">Online Users List</span>
</div>
<div style="clear: both; height: 1px; margin-top: -1px;">
</div>
<div style="height: 2in; background-color: Transparent">
</div>
<script type="text/javascript">
$(document).ready( function () {
$("button").click(function () {
$("#onlineUsers").toggle();
});
})
</script>
</body>
</html>
The floating-menu css class is this:
div.floating-menu
{
clear: both;
background: #D8D8D8;
float: left;
border: 1px solid Black;
color: black;
padding: 10px 10px 10px 10px;
position: fixed;
text-align: center;
width: 200px;
z-index: 100;
}
This is the View Source file that proves that everything was generated.
<div style="text-align: center;">
<a href="/"><img src="../../Content/Images/Banner-1.jpg" alt="Find 4 and It's FREE" /></a>
<br />
<hr style="width: 90%" />
<br />
</div> </div>
<div class="floating-menu">
<h1>"Menu"</h1>
<p>
<h2><a href="/">Home</a></h2></p>
<p><h2><a href="/Home/Matrix">Matrix</a></h2></p>
<p><h2><a href="/Home/Products">Products</a></h2></p>
<p><h2><a href="/Home/Testimonials">Testimonials</a></h2></p>
<p><h2><a href="/Home/AboutUs">About Us</a></h2></p>
<p><h2><a href="/Home/Privacypolicy">Privacy Policy</a></h2></p>
<p><h2><a href="/Home/Blog">Blog</a></h2></p>
<p><h2><a href="/PassGenerator">Cypher</a></h2></p>
<p><h2><a href="/Join/Join">Join</a></h2></p>
<div style="text-align:center;">
<button id="close">Toggle Online Users List</button>
</div> </div>
<div class="content">
<form action="/Home/OnlineUsers" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#onlineUsers" id="form0" method="post">
<table>
<tr>
<td style="text-align: right; width: 85%;">
<span style="text-align: right;">We currently have <a data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#onlineUsers" href="/Home/OnlineUsers">0</a> user(s) logged in.</span>
</td>
<td style="text-align: center; border: 1 solid Black;">
<a href="/Account/Login">Login</a>
</td>
</tr>
</table>
<br />
<hr style="width: 90%" />
<br />
</form>
<h2>My-MSI.Net - Home</h2><br />
<table cellpadding="5" cellspacing="5" style="width: 560px; background: White; text-align: center; padding: 10px 10px 10px 10px;">
<tr>
<td colspan="2" style="font-weight: bold; font-family: 'Times New Roman', Verdana, 'Microsoft Sans Serif'; font-size: 28pt;">
<--! content deleted for brevity -->
</td>
</tr>
</table>
</div>
<div class="move-right-onlineUsers" id="onlineUsers">
<span style="text-decoration: underline;">Online Users List</span>
</div>
<div style="clear: both; height: 1px; margin-top: -1px;">
</div>
<div style="height: 2in; background-color: Transparent">
</div>
<script type="text/javascript">
$(document).ready( function () {
$("button").click(function () {
$("#onlineUsers").toggle();
});
})
</script>
</body>
</html>
I'm using IE 10 and the floating-menu is not displaying.
Question: What can I do to get the floating-menu to display without breaking the design of the site?
http://www.my-msi.net/Admin
blog
If a post helps you, please mark it as Ansered, thank-you.
raju dasa
Star
14410 Points
2451 Posts
Re: My menu is in the View Source but not on the page!
Jan 22, 2013 05:52 AM|LINK
Hi,
You have to either remove,
float rule or change/remove below rule:
position: fixed;
if u remove float, also remove clear, z-index etc rules.
rajudasa.blogspot.com || blog@opera
eric2820
Contributor
2777 Points
1161 Posts
Re: My menu is in the View Source but not on the page!
Jan 22, 2013 10:43 AM|LINK
I removed the position: fixed; rule but that did not bring back the menu.
I can't remove the clear, z-index rules becuase that would break the design of the site. I want the content to scroll but not the menu.
I am getting some JavaScript errors when I run the site:
From jquery.1.8.3.js:
// Use this for any attribute in IE6/7
// This fixes almost every IE6/7 issue
nodeHook = jQuery.valHooks.button = {
get: function( elem, name ) {
var ret;
ret = elem.getAttributeNode( name );
return ret && ( fixSpecified[ name ] ? ret.value !== "" : ret.specified ) ? ret.value : undefined;
},
set: function( elem, value, name ) {
// Set the existing or create a new attribute node
var ret = elem.getAttributeNode( name );
if ( !ret ) {
ret = document.createAttribute( name );
elem.setAttributeNode( ret );
return ( ret.value = value + "" ); // <== this is highlighted in the compliler
}
};
http://www.my-msi.net/Admin
blog
If a post helps you, please mark it as Ansered, thank-you.