Show a div when i move over a menu - javascript

I have an ASP.Net with C# application.I want to have a menu and when i am with the mouse on a menu i want to show a div where i have some informations:a title,and some other options on two columns .
I wrote a Javascript method from where I want to make visible the corresponding div ,but it doesn't find my div section (it's always null) .
Can somebody tell me what's the problem ?
Below is the code.
I am begginer in ASP.Net,Javascript.Do you know an other method,better , for doing that ?(with an example please if you have)
My asp.net page :
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Sales_Site.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Styles/Menu.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="menu" >
<ul id="main-nav">
<li>Books
<div class="main-nav-sectionBooks" style="width:400px;height:250px;border-color:Blue;display:none;visibility:hidden;">
<div class="main-nav-section-left" style="float:left;width:200px;height:100px">
Books Categories :
<ul><li>Subcateg1</li></ul>
<ul><li>Subcateg2</li></ul>
<ul><li>Subcateg3</li></ul>
</div>
<div class="main-nav-section-right" style="float:right;width:200px;height:100px"></div>
Test 123
</div>
</li>
<li>Music
<div class="main-nav-sectionMusic" runat="server" style="width:400px;height:250px;border-color:Blue;display:none;visibility:hidden;">
<div class="main-nav-section-left" style="float:left;width:200px;height:100px">
Music Categories :
<ul><li>Subcateg Music 1</li></ul>
<ul><li>Subcateg Music 2</li></ul>
<ul><li>Subcateg Music 3</li></ul>
</div>
<div class="main-nav-section-right" style="float:right;width:200px;height:100px"></div>
Test 123
</div>
</li>
<li>Clothing
<div class="main-nav-sectionClothing" runat="server" style="width:400px;height:250px;border-color:Blue;display:none;visibility:hidden;">
<div class="main-nav-section-left" style="float:left;width:200px;height:100px">
Clothing Categories :
<ul><li>Subcateg Clothing 1</li></ul>
<ul><li>Subcateg Clothing 2</li></ul>
<ul><li>Subcateg Clothing 3</li></ul>
</div>
<div class="main-nav-section-right" style="float:right;width:200px;height:100px"></div>
Test 123
</div>
</li>
</ul>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
<div class="footer">
</div>
</div>
<script type="text/javascript" language="javascript">
function Show(type) {
HideControl("main-nav-sectionBooks");
HideControl("main-nav-sectionMusic");
HideControl("main-nav-sectionClothing");
var ControlName = "main-nav-section" + type;
alert(ControlName);
var control = document.getElementById(ControlName);
if (control) {
control.style.display = 'block';
control.style.visibility = 'visible';
}
else
alert("null");
}
function HideControl(controlName) {
var control = document.getElementById(controlName);
if (control) {
control.style.display = 'none';
control.style.visibility = 'hidden';
}
}
</script>
</form>


I would just do this with CSS:
EXAMPLE
http://jsbin.com/oreqew/1/edit
HTML:
<div class="page">
<div class="header">
<div class="menu" >
<ul id="main-nav">
<li>Books
<div class="main-nav-sectionBooks" style="width:400px;height:250px;border:1px solid Blue;">
SOMETHING
</li>
</ul>
</div>
</div>
</div>
CSS:
.main-nav-sectionBooks{
display:none;
}
#main-nav li:hover div.main-nav-sectionBooks{
display:block;
}


Your problem is very simple, you do not have any "id" value with your elements, you have class attribute like class="main-nav-sectionBooks". if you add id attribute to your elements you will succeed.
Best Regards,


You should give the divs you want to show the ID isntead of class you did now.
<div class="main-nav-sectionClothing" runat="server" style...
to
<div id="main-nav-sectionClothing" runat="server" style...
That is because with your Javascript code you are trying to fetch an element of the page by id with getElementById().

Related

Jquery results in error every time function is used

I'm new at jquery and javascript so this might be a very simple question. I get an error that I cannot understand and it comes up every time a function is runned in my .js-file.
At the moment my .js-file simply has this as a way to find what the problem is:
$(document).ready(function(){
$(".title-link").css("color", "#ccc");
$('.title-link').click(function(){
var check = "I work";
alert(check);
});
});
The title-link changed color without any problem, so the .js-file is located by my HTML-file. I also have the latest CDN for my jquery in the HTML-file in script-tags.
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
How does it come that when I click an element with title-link class on my browser, the page just reloads - or crashes(?)? When inspecting the page, I see it switch from my .js-file to jquery.min.js:formatted after passing each row in my function and points to these rows below:
while ((o = i.handlers[n++]) && !u.isImmediatePropagationStopped())
u.rnamespace && !1 !== o.namespace && !u.rnamespace.test(o.namespace) || (u.handleObj = o,
u.data = o.data,
void 0 !== (r = ((S.event.special[o.origType] || {}).handle || o.handler).apply(i.elem, s)) && !1 === (u.result = r) && (u.preventDefault(),
u.stopPropagation()))
}
return c.postDispatch && c.postDispatch.call(this, u),
u.result
Why does this happen and what can I do to have my code run as intended? ATM I cannot use my javascript file due to the page reloading everytime a function has been used. Many thanks for any help
EDIT: this is the HTML-page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script type="text/javascript" src="./js/tentaJs.js"></script>
<link rel="stylesheet" href="./css/main.css">
<title>Tenta index</title>
</head>
<body>
<div class="container">
<header>
<div class="header-top">
<div class="loggavänster">
<h1>Kurslitt Lund</h1>
</div>
<nav class="navbar">
<li><a class="meny-link active"
href="index.html">Säljes</a></li>
<li><a class ="meny-link" href="buy.html">Köpes</a>
</li>
<li><a class = "meny-link"
href="annonce.html">Annonsera</a></li>
</nav>
</div>
<div class="logo">
<h1>Kurslitteratur köpes</h1>
</div>
</header>
<main>
<div class = "article">
<div class="article-container">
<img src="./images/bok.jpg" alt="bok">
<p>TITEL: titel </p>
<p>Pris:</p>
<p>ISBN:</p>
<p>Säljare:</p>
Tele: 00000000</p>
<p class = "comment-text">Kommentar från säljare: <br>
jag är en kommentar
</p>
</div>
</div>
<div class = "article">
<div class="article-container">
<img src="./images/bok.jpg" alt="bok">
<p>TITEL</p>
<p>Pris:</p>
<p>ISBN:</p>
<p>Säljare:</p>
Tele: 00000000</p>
</div>
</div>
<div class = "article">
<div class="article-container">
<img src="./images/bok.jpg" alt="bok">
<p>TITEL</p>
<p>Pris:</p>
<p>ISBN:</p>
<p>Säljare:</p>
Tele: 00000000</p>
</div>
</div>
</main>
<footer>
<p>Kurslitt i Lund;</p>
<p>Email: info#kil.se <br>
Tele: 00000000</p>
</footer>
</div>
</body>
</html>

$(document).ready(function(){
$(".title-link").css("color", "#ccc");
$('.title-link').click(function(e){
e.preventDefault();
var check = "I work";
alert(check);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<title>Tenta index</title>
</head>
<body>
<div class="container">
<header>
<div class="header-top">
<div class="loggavänster">
<h1>Kurslitt Lund</h1>
</div>
<nav class="navbar">
<li><a class="meny-link active"
href="index.html">Säljes</a></li>
<li><a class ="meny-link" href="buy.html">Köpes</a>
</li>
<li><a class = "meny-link"
href="annonce.html">Annonsera</a></li>
</nav>
</div>
<div class="logo">
<h1>Kurslitteratur köpes</h1>
</div>
</header>
<main>
<div class = "article">
<div class="article-container">
<img src="./images/bok.jpg" alt="bok">
<p>TITEL: titel </p>
<p>Pris:</p>
<p>ISBN:</p>
<p>Säljare:</p>
Tele: 00000000</p>
<p class = "comment-text">Kommentar från säljare: <br>
jag är en kommentar
</p>
</div>
</div>
<div class = "article">
<div class="article-container">
<img src="./images/bok.jpg" alt="bok">
<p>TITEL</p>
<p>Pris:</p>
<p>ISBN:</p>
<p>Säljare:</p>
Tele: 00000000</p>
</div>
</div>
<div class = "article">
<div class="article-container">
<img src="./images/bok.jpg" alt="bok">
<p>TITEL</p>
<p>Pris:</p>
<p>ISBN:</p>
<p>Säljare:</p>
Tele: 00000000</p>
</div>
</div>
</main>
<footer>
<p>Kurslitt i Lund;</p>
<p>Email: info#kil.se <br>
Tele: 00000000</p>
</footer>
</div>
</body>
</html>

JQuery | Takes Two Clicks to Hide Div Tag via Menu Bar

On my Contact page I have a link to show an email form, which right now is just a header. I want the email form to hide whenever a different "page" is clicked on; however, right now it takes two clicks to get rid of the form. The form should only be visible on the Contact Page. I made a small testcase to illustrate the problem.
My code works, but only after you click a menu twice. I need help making it so I click a link once and it disappears.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creighton Barbershop</title>
<link href="style/main.css" rel="stylesheet">
<script src="js/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$("nav ul li").on("click", "a",
function(){
if ($("#contact").is(":hidden")) {
$(".contact_form").slideUp().hide();
};
$("div.main").slideUp();
$("div" + $(this).attr("href")).slideToggle().show().end();
event.preventDefault();
});
$("#email_link").click(
function(){
$(".contact_form").slideToggle();
event.preventDefault();
});
});
</script>
</head>
<body>
<div id="container">
<nav>
<ul>
<li>Home</li>
<li><span class="word_space">About Us</span></li>
<li><span class="word_space">Contact Us</span></li>
<li>Cuts</li>
</ul>
</nav>
<hr>
<div class="content">
<div class="main" id="home">
<h1>Home</h1>
</div>
<div class="main" id="contact">
Email Us
</div>
<div class="contact_form">
<h1>Contact Form</h1>
</div>
<div class="main" id="cuts">
<h2>These are the various cuts that Rob Ecklos Specializes in./n/n</h2>
</div>
</div>
</div>
</body>
</html>

you have to change a little thing in your html
just move the contact_form div inside contact div
let code like this
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creighton Barbershop</title>
<link href="style/main.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("nav ul li").on("click", "a",
function(){
if ($("#contact").is(":hidden")) {
$(".contact_form").slideUp().hide();
};
$("div.main").slideUp();
$("div" + $(this).attr("href")).slideToggle().show().end();
event.preventDefault();
});
$("#email_link").click(
function(){
$(".contact_form").slideToggle();
event.preventDefault();
});
});
</script>
</head>
<body>
<div id="container">
<nav>
<ul>
<li>Home</li>
<li><span class="word_space">About Us</span></li>
<li><span class="word_space">Contact Us</span></li>
<li>Cuts</li>
</ul>
</nav>
<hr>
<div class="content">
<div class="main" id="home">
<h1>Home</h1>
</div>
<div class="main" id="contact">
Email Us
<div class="contact_form">
<h1>Contact Form</h1>
</div>
</div>
<div class="main" id="cuts">
<h2>These are the various cuts that Rob Ecklos Specializes in./n/n</h2>
</div>
</div>
</div>
</body>
</html>
then remove the if statement form your jquery
<script>
$(document).ready(function(){
$("nav ul li").on("click", "a",
function(){
$(".contact_form").slideUp().hide();
$("div.main").slideUp();
$("div" + $(this).attr("href")).slideToggle().show().end();
event.preventDefault();
});
$("#email_link").click(
function(){
$(".contact_form").slideToggle();
event.preventDefault();
});
});
</script>

is(':visible') checks the display property of an element, you can use css method.
//Check the visiblity of #contact and hide accordangly
if ($("#contact").css('visibility') === 'hidden') {
$(".contact_form").slideUp().hide();
}

How to hide div present in master page on dashboard page load in asp.net?

I have a master page in which i have a div like
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="NGO_MS.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div class="container">
<div>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-collapse collapse " id="menu">
<ul class="nav navbar-nav navbar-right alert-success">
<li class="active">Home</li>
</ul>
</div>
</div>
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="container" style="background-color: white">
<div>
<div style="float: left; color: green">
</div>
<div style="float: right; color: green">
</div>
</div>
</div>
</body>
</html>
In dashboard.aspx i want to hide div with id menu which is present in master page.. some thing like this ..
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="dashboard.aspx.cs" MasterPageFile="~/Site.master" Inherits="NGO_MS.dashboard" %>
<%# Register TagPrefix="UC_LeftMenu" TagName="LeftMenu" Src="UserControls/UC_LeftMenu.ascx" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript">
$(document).ready(function () {
$('#menu').hide();
});
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<form runat="server" ID="Form1">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="col-md-10">
<UC_LeftMenu:LeftMenu ID="LeftMenu" runat="server" />
<div class="col-md-9">
<%--dashboard content will go here --%>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</asp:Content>
How can I fix this its not working. Thankyou :)
I am using update panel in dashboard but this update panel is not wrapping div with id menu. How i can resolve this.

You need ScriptManager if you want to call pageLoad.
<asp:ScriptManager runat="server" ID="ScriptManager1" />
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function pageLoad() {
$('#menu').hide();
}
</script>
Since you are using jQuery, you can use the following -
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#menu').hide();
});
</script>
Another Approach using Server Side Code
You can create Menu as Server Control, and access it from dashboard codebehind.
Site.Master
<div class="container">
<div>
<div class="navbar navbar-default" role="navigation">
<asp:Panel runat="server" ID="MenuPanel"
CssClass="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right alert-success">
<li class="active">Home</li>
</ul>
</asp:Panel>
</div>
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
Site.Master.cs
public partial class Site : System.Web.UI.MasterPage
{
public bool MenuPanelVisible
{
set { MenuPanel.Visible = value; }
}
}
dashboard.aspx.cs
public partial class dashboard : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
var master = Master as Site;
if (master != null)
{
master.MenuPanelVisible = false;
}
}
}

You need to put your pageLoad functionality in the jQuery document ready handler so it executes after the DOM has loaded.
It should look something like this:
<script type="text/javascript">
$(document).ready(function() {
$('#menu').hide();
});
</script>

check your HTML. if i am not mistaken, the ID will not be generated to HTML 1:1.
also currently your JS will not be executed... on the other hand you can define server-sided code too:
<script language="C#" runat="server" type="text/c#">
public void Page_Load(object sender, EventArgs e){
//hide the menu here
}
</script>
alternatively you could even do the following:
<div id="menu" onload="this.visibility=hidden;"></div>

javascript for create tabs

I have a function in Javascript like this :
!function($) {
function add_tab(num, name){
var $newDiv = $("<div class='tab-pane' />")
.attr("id", "tab_"+name)
.html("Content " + name);
//.html("<div class='row'>");
$("#graphTabsContent").append($newDiv);
var $newLi = $("<li/>");
if(num==0){
$newLi.attr("class", "active");
}
var $newA = $("<a data-toggle='tab' />")
.attr("href", "#tab_"+name)
.html(name);
$newLi.append($newA);
$("#ul_tabs").append($newLi);
};
function update_graph_tabs(){
$.getJSON("call/json/get_role", {}, function(roles) {
$("#ul_tabs").empty();
$("#graphTabsContent").empty();
$.each(roles, function (key, role){
add_tab(key, role);
});
});
}
// Run
update_graph_tabs();
}(jQuery);
this function get the data from JSON and after it create tabs tabbable, in my HTML like this(http://getbootstrap.com/2.3.2/components.html#navs).
this is my HTML code :
<div class="row">
<div class="span3">
<div class="dropdown">
<select class="selectpicker btn-warning" id="groupe" data-style="btn-primary">
<option value="">Awaiting data...</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="span4"><div id="reportingContainer"></div></div>
<div class="span8">
<div id="dashboard">
<div id="combochart"></div>
<div id="control"></div>
</div>
</div>
</div>
<div class="tabbable" >
<ul id="ul_tabs" class="nav nav-tabs">
</ul>
<div class="tab-content" id="graphTabsContent">
</div>
</div>
Now, I want in every tab it to show me one chart that I code. For example, in my HTML O have this code that create one piechart and one combochart in my page but it is not in my tabs.

This may help you:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Basic Tab Based Navigation Example</title>
<meta name="description" content="Twitter Bootstrap Basic Tab Based Navigation Example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav nav-tabs">
<li class="active">
Home </li>
<li>Tutorials</li>
<li>Practice Editor </li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
</html>
- See more at: http://www.w3resource.com/twitter-bootstrap/nav-tabs-and-pills-tutorial.php#sthash.a9cP7aDC.dpuf
Source: W3Resource

jQuery - CSS class being applied but not taking effect

I'm applying a CSS class using .addClass when a tab is selected and it is also adding the class to the parents parent tab. The class is being added but the CSS doesn't seem to be taking effect of the parents parent class (apologies if that sounds awkward).
CSS:
.selectedTab{
color:#234 !important;
background-color:white !important;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Visit Northern Ireland</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="js/common.js"></script>
<script src="js/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/accordion.css">
<link rel="stylesheet" type="text/css" href="css/armagh.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
<div id="centeredPane">
<nav>
<ul id="css-tabs">
<li>Home</li>
<li>Activities
<div class="subnav" id="activitiesLink">
Co. Armagh
Co. Antrim
Co. Down
Co. Fermanagh
Co. Londonderry
Co. Tyrone
</div>
</li>
<li>Restaurants
<div class="subnav" id="restaurantLink">
Indian
Tapas
American
Italian
</div>
</li>
<li>Game</li>
</ul>
</nav>
<div class="content" id="home">home</div>
<div class="content" id="armagh">armagh</div>
<div class="content" id="antrim">antrim</div>
<div class="content" id="down">down</div>
<div class="content" id="fermanagh">fermanagh</div>
<div class="content" id="londonderry">londonderry</div>
<div class="content" id="tryone">tyrone</div>
<div class="content" id="indian">indian</div>
<div class="content" id="tapas">tapas</div>
<div class="content" id="american">american</div>
<div class="content" id="italian">italian</div>
<div class="content" id="game">game</div>
<footer>For more information visit Discover Northern Ireland</footer>
</div>
</body>
</html>
jQuery:
$('.contentLinks').click(function() {
$(this).addClass("selectedTab");
$('a').not(this).removeClass("selectedTab");
//var is_element_li = $(this).parent().parent().get(0).tagName.is("li");
var is_element_li = $(this).parent().parent().is("li");
if(is_element_li){
$(this).parent().parent().addClass("selectedTab");
}
var nameAttribute = $(this).attr('name');
nameAttribute = "#"+ nameAttribute;
$(nameAttribute).show();
$('div.content').not(nameAttribute).hide();
});
How can I get the style to apply?

You need to add the selectedTab class to your anchor element, instead of the the li element:
$(this).parent().parent().children("a").addClass("selectedTab");

Categories

Resources