تسجيل الدخول | التسجيل | الأسئلة المتكررة
Anonymous

Fenster Einblendung im mit div hide/show funktioniert net ..

+ إضافة رد

2 مشاركة صفحة 1 من 1


Fenster Einblendung im mit div hide/show funktioniert net ..

بواسطة alumnius » الأربعاء يونيو 19, 2013 11:35 am

Hallo auch,

bin neu hier und habe ein Problem mit der hide div unhiide Funktion in Kombination der Einblendung eines separatem Div Fensters beim Maus-hoover auf einem Link.

Derzeit habe ich einen Menü Punkt in der Kopfzeile.
Wenn man mit der Maus drüber fährt, erscheint ein CSS formatiertes Login Fenster,

worin man sich an der Seite anmelden kann.
Beim Klick auf den Menü Punkt erscheint ein kleines separat über die Seite gelagertes Fenster.
Wo man seine Zugangsdaten angibt. Optional kann man sich neu registrieren.

Jetzt wollte ich abhängig vom Login Status, also login Status Variable auslesen zwei

verschiedene Kopfmenü Zeilen einblenden.
Dazu nutze ich von Javascript die if else Funktion mit ein Div versteken oder darstellen.
Das scheint zu funktionieren, da abhängig von Login Status ein das erste oder zweite Menü dargestellen.

Nur klappt nur beim ersten Kopfmenü das Login Fenster auf und bei der zweiten Kopfzeile nicht.

Versteh die Welt nicht mehr.

Hier der Code:

HTML


<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
{module_contentholder,49618}
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title></title>
<script

src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript"

src="https://use.typekit.com/gxw4mke.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<!--[if lt IE 9]><script type="text/javascript" src="/js/html5.js"></script>
<![endif]-->
<link href="/StyleSheets/common-s2.css" type="text/css" rel="stylesheet" />
<link href="/StyleSheets/default-s2.css" type="text/css" rel="stylesheet" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="/stylesheets/style.css" />
<script src="/js/login2.js"></script>
<!-- HEADER-->
<div class="header">
<div class="head-cols1">
<div class="head-cols1-4">
<img alt="" src="/images/Logo.gif" />
</div>
<!-- ende head-cols1-4-->
<div class="nowrap2" style="display: none;" id="hiddenDiv2">
<div class="head-cols3-3">
<li><a href="/jobs">Jobs</a></li>
<tb> &nbsp;</tb>
<div id="container-2">
<!-- Login Starts Here -->
<div id="loginContainer">
<a id="loginButton" href="#"><span>Login</span><em></em></a>
<div id="loginBox">
<fieldset id="body">
<div class="secure-login">
<div id="clear-font-styles">
<div id="loginheadtext">
F&uuml;r den Zugang bitte anmelden oder <a

href="/registrieren">registrieren.
</a><br />
<div class="leertab1em">
<form id="loginForm" name="catseczoneform55164" onsubmit="return

checkWholeForm55164(this)" method="post"

action="https://gmbh.xyz.com/ZoneProcess.aspx?ZoneID=7560&amp;Referrer=

{module_siteUrl,true,true}&amp;OID={module_oid}&amp;OTYPE=

{module_otype}">
<div class="form">
<div class="item"><label for="SZUsername">Benutzername</label><br />
<input type="text" maxlength="255" id="SZUsername" name="Username"

class="cat_textbox_small" /></div>
<div id="clear-font-styles">
<div class="item"><label for="SZPassword">Kennwort</label><br />
<input type="password" maxlength="255" id="SZPassword"

name="Password" class="cat_textbox_small" /></div>
<div class="leertab1em">
<div class="item"><a href="/registrieren"><input type="submit"

value="Anmelden" class="cat_button" /> </a>
<div class="leertab1em">
<div id="keeplogin">
<div id="nowrap-set">
<div class="item"><label for="RememberMe">Angemeldet bleiben :

</label><input type="checkbox" id="RememberMe" name="RememberMe"

/></div>
<div id="nowrap-delete">
<div class="leertab1em">
<a href="/_System/SystemPages/PasswordRetrieveRequest">Password

vergessen ?</a><br />
</div>
</div>
<script src="/CatalystScripts/ValidationFunctions.js"

type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function checkWholeForm55164(theForm){var why = "";if (theForm.Username)

why += isEmpty(theForm.Username.value, "Benutzername");if

(theForm.Password) why += isEmpty(theForm.Password.value, "Kennwort");if

(why != ""){alert(why);return false;}theForm.submit();return false;}
//]]>
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<!-- Login Ends Here -->
</div>
</div>
<!-- ende div class="head-cols3-3 -->
<div class="head-cols2-3">
<tb> &nbsp;</tb>
<li><a href=" /files/fernwartung.exe">Fernwartung </a><img alt=""

src="/images/Fernwartung.jpg" style="border: 0px none;" /></li>
<tb> &nbsp;</tb>
<!-- ende div class="head-cols2-3 -->
</div>
<div class="head-cols1-3">
<li>
<a>Sprache </a>
<a href="/index.htm"><img alt="" src="/images/small/Germany-sm.gif"

style="border: 0px none;" /></a>
</a>
</li>
</div>
</div>
<!-- ende div class="head-cols1-3 -->
<div class="nowrap2" style="display: none;" id="hiddenDiv">
<div class="head-cols3-3">
<li><a href="/jobs">Jobs</a></li>
<tb> &nbsp;</tb>
<div id="container-3">
<!-- Login Starts Here -->
<div id="loginContainer2">
<a href="/myaccount">My Account</a>
<div id="loginBox">
<fieldset id="body">
<div class="secure-login">
<div id="clear-font-styles">
<div id="loginheadtext">
F&uuml;r den Zugang bitte anmelden oder <a

href="/registrieren">registrieren.
</a><br />
<div class="leertab1em">
<div class="item"><label for="SZUsername">Benutzername</label><br />
<input type="text" maxlength="255" id="SZUsername" name="Username"

class="cat_textbox_small" /></div>
<div id="clear-font-styles">
<div class="item"><label for="SZPassword">Kennwort</label><br />
<input type="password" maxlength="255" id="SZPassword" name="Password"

class="cat_textbox_small" /></div>
<div class="leertab1em">
<div class="item"><a href="/registrieren"><input type="submit"

value="Anmelden" class="cat_button" /> </a>
<div class="leertab1em">
<div id="keeplogin">
<div id="nowrap-set">
<div class="item"><label for="RememberMe">Angemeldet bleiben:

</label><input type="checkbox" id="RememberMe" name="RememberMe"

/></div>
<div id="nowrap-delete">
<div class="leertab1em">
<a href="/_System/SystemPages/PasswordRetrieveRequest">Password

vergessen ?</a><br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<!-- Login Ends Here -->
</div>
</div>
<!-- ende div class="head-cols3-3 -->
<div class="head-cols2-3">
<tb> &nbsp;</tb>
<li><a href=" /files/fernwartung.exe">Fernwartung </a><img alt=""

src="/images/Fernwartung.jpg" style="border: 0px none;" /></li>
<tb> &nbsp;</tb>
<!-- ende div class="head-cols2-3 -->
</div>
<div class="head-cols1-3">
<li>
<a>Sprache </a>
<a href="/index.htm"><img alt="" src="/images/small/Germany-sm.gif"

style="border: 0px none;" /></a>
</li>
</div>
</div>
</div>
<!-- ende div class="head-cols1-3 -->
<ul class="head-cols2-4c">
{module_whosloggedin}
</ul>
<ul class="head-cols2-4b">
<li><a href="/index.htm">Home</a></li>
<li><a href="/dienstleistungen">Dienstleistungen</a></li>
<li><a href="/kontakt">Kontakt</a> </li>
</ul>
<!-- ende ul class="head-cols2-4b-->
</div>
<!-- ende div class="head-cols1 -->
<!--MAIN AREA -->
<div class="main">
<section class="content">
{tag_pagecontent}
<!-- <div class="clear"></div> -->
</section>
</div>
<!-- FOOTER -->
<div class="footer">
<div class="fuss">
<!-- Anfang <div class="fuss"> -->
<br />
<br />
<ul id="LogoPlatzhalter">
<li><a><img alt="" src="/images/small/Logo.gif" /></a> </li>
<ul id="Inhalt">
<li><strong>Inhalt</strong></li>
<li><a href="/index.htm"><img alt="" src="/images/Pfeil-rechts-

klein.jpg" style="border: 0px none;" />Home</a></li>
<li><a href="/dienstleistungen"><img alt="" src="/images/Pfeil-rechts-

klein.jpg" style="border: 0px none;" />Dienstleistung</a></li>
<li><a href="/kontakt"><img alt="" src="/images/Pfeil-rechts-klein.jpg"

style="border: 0px none;" />Kontakt</a></li>
</ul>
</ul>
<ul id="Dienstleistungen">
<li><strong>Dienstleistungen</strong></li>
<li><a href="/netzwerktechnik"><img alt="" src="/images/Pfeil-rechts-

klein.jpg" style="border: 0px none;" />Netzwerktechnik</a></li>
<li><a href="/webservice"><img alt="" style="border: 0px none;"

src="/images/Pfeil-rechts-klein.jpg" />Webservice</a></li>
</ul>
<ul id="Produkte">
<li><strong>Produkte</strong></li>
<li><a href="/server"><img alt="" src="/images/Pfeil-rechts-klein.jpg"

style="border: 0px none;" />Server</a></li>
<li><a href="/telefone"><img alt="" style="border: 0px none;"

src="/images/Pfeil-rechts-klein.jpg" />Telefone</a></li>
</ul>
<ul id="Service">
<li><strong>Services</strong></li>
<li><a href="/fernwartung"><img alt="" style="border: 0px none;"

src="/images/Pfeil-rechts-klein.jpg" />Fernwartung</a></li>
<li><a href="/kundenbereich"><img alt="" style="border: 0px none;"

src="/images/Pfeil-rechts-klein.jpg" />Kunden Bereich</a></li>
</ul>
<ul id="Kontakt">
<li>
<p><strong>Kontakt</strong> </p>
</li>
<li>
<p>GmbH &amp; Co. KG </p>
</li>
<li>
<p>Stra&szlig;e 1 </p>
</li>
<li>
<p>Köln </p>
</li>
<li>
<p>Telefon: 0221- 123456</p>
</li>
<li>
<p>Fax: 0221- 123456 </p>
</li>
<li>
<p><a href="mailto:info@gmbh.de?subject=Kunden-Email von der GmbH

Seite">E-Mail: info(at)gmbh.de </a></p>
</li>
</ul>
<!-- ende ul kontakt -->
</div>
<!-- ende ul class fuss -->
<div class="leertab2em"></div>
<div class="fuss-fuss">
<ul class="fuss-fuss-li">
<a>&copy; Copyright 2013 GmbH &amp; Co. KG. Alle Rechte

vorbehalten.</a>
</ul>
<!-- ende ul class fuss-fuss-li -->
<ul class="fuss-fuss-re"><a>
</a><a href="/kontakt">Mail</a>
<a href="/impressum">Impressum</a>
<a title="AGB" href="/agb">AGB</a>
<a title="Disclaimer" href="/Disclaimer">Disclaimer</a>
</ul>
<!-- ende ul class fuss-fuss-re -->
</div>
<!-- ende div class fuss-fuss -->
<!-- ende <div class="fuss"> -->
</div>
<script type="text/javascript">
var loggedin = "{module_isloggedin}";
if (loggedin == 1)
document.getElementById("hiddenDiv").style.display = "inline";
else
document.getElementById("hiddenDiv2").style.display = "inline";
</script>
</body>
</html>

Und hier der CSS Style:
/* html,body{width:100%;height:100%;padding:0;margin:0;
}*/

a { text-decoration:none }
.secure-login { background:#F4F2EF; }
.container { width:262px; margin:0 auto; padding-top:200px; }

#bar { width:100%; height:35px; padding:15px 0; background:url

(../images/bar.png) repeat-x; }
#container-2 { width:960px; margin:0 auto; }
/*#container-2 { width:960px; margin:0 auto; } */
/*-------LOGIN STARTS HERE -------*/
#container-3 { width:960px; margin:0 auto; }
/* Login Container (default to float:right) */

#keeplogin {
font-size:0.9em;
}
#nowrap-set {
white-space:nowrap;
/* vertical-align: baseline ;*/ }
#nowrap-delete { white-space: normal;
}
#loginContainer {
position:relative;
float:right;
/* font-size:12px;*/
}

#loginContainer2 {
position:relative;
float:right;
/* font-size:12px;*/
}

#loginContainer2 a:link { font-size:0.8em;
color:#1d1d1d; text-decoration:none; padding: 0 0 0 0}

/* Login Button */
#loginButton {
display:inline-block;
float:right;
/* background:#d2e0ea url(../images/login/buttonbg.png) repeat-x;
border:1px solid #899caa;
border-radius:3px;
-moz-border-radius:3px;*/
position:relative;
z-index:30;
cursor:pointer;
}

/* Login Button Text */
#loginButton span {
/*
color:#445058;
font-size:1.4em;
font-size:14px;
font-weight:bold;
font-size:14px; */
font-size:0.8em;
text-shadow:1px 1px #fff;
/* padding:7px 29px 9px 10px;
background:url(../images/login/loginArrow.png) no-repeat 53px 7px;*/
display:block
}

#loginButton:hover {
/* background:url(../images/login/buttonbgHover.png) repeat-x;*/
}

/* Login Box */
#loginBox {
position:absolute;
/* width:10px; Breite der Box die Herunerklappt neu definiert.

War vorher nicht def.
verändert aber nicht die Breite sondern nur die Position unter dem Login

Button.*/
top:26px;
right:0;
display:none;
z-index:29;
}

/* If the Login Button has been clicked */
#loginheadtext {
font-weight:normal; text-align: left;
}
#loginheadtext a:hover {
font-weight:bold; color:#0066BC;
}

#loginheadtext a:link {
font-weight:normal; color:#0066BC; text-decoration:none;
}
#loginheadtext a:visited {
font-weight:normal; color:#0066BC; text-decoration:underline;
}


#clear-font-styles {
font-weight:normal;

}

/* If the Login Button has been clicked */
#loginButton.active {
border-radius:3px 3px 0 0;
}

#loginButton.active span {
background-position:3px -76px;
}

/* A Line added to overlap the border */
#loginButton.active em {
position:absolute;
width:100%;
/* Testweise die Preite von 100% auf 100px geändert.
Keine Auswirkung auf die Box Breite*/
height:1px;
/* Background Farbe gelöscht. background:#d2e0ea;
Das ändert die Farbe des Unterstrich unter dem Login Button.*/
bottom:-1px;
}

/* Login Form */
#loginForm {
width:100%;
/* width:248px; */
margin-top:-1px;
/* border-right: 1px solid #899caa;
border-bottom: 1px solid #899caa;
border:1px solid #899caa;
border-radius:3px 0 3px 3px;
-moz-border-radius:3px 0 3px 3px;
background:#d2e0ea;
padding:6px;*/
padding:0;
}

#loginForm fieldset {
margin:0 0 12px 0;
display:block;
border:0;
padding:0;
}

fieldset#body {
font-size:0.8em;
background:#F4F2EF;
border-radius:3px;
-moz-border-radius:3px;
padding:10px 13px;
margin:0;
}

#loginForm #checkbox {
width:10px;
margin:1px 9px 0 0;
float:left;
padding:0;
/* border:1 #333 thick;*/
/* *margin:-3px 9px 0 0; /* IE7 Fix */
}

/* Original
#loginForm #checkbox {
width:auto;
margin:1px 9px 0 0;
float:left;
padding:0;
border:0;
*margin:-3px 9px 0 0; /* IE7 Fix */ */

#body label {
color:#3a454d;
margin:9px 0 0 0;
display:block;
float:left;
}

#loginForm #body fieldset label {
display:block;
float:none;
margin:0 0 6px 0;
}

/* Default Input */
#loginForm input {
border:1px solid #899caa;
border-radius:3px;
-moz-border-radius:3px;
color:#3a454d;
font-weight:bold;
padding:8px 8px;
box-shadow:inset 0px 1px 3px #bbb;
-webkit-box-shadow:inset 0px 1px 3px #bbb;
-moz-box-shadow:inset 0px 1px 3px #bbb;
font-size:12px;
}

#loginForm input-re {
width:10%;
border:1px solid #899caa;
border-radius:3px;
-moz-border-radius:3px;
color:#3a454d;
font-weight:bold;
padding:8px 8px;
box-shadow:inset 0px 1px 3px #bbb;
-webkit-box-shadow:inset 0px 1px 3px #bbb;
-moz-box-shadow:inset 0px 1px 3px #bbb;
font-size:12px;
}
/* Default Input
#loginForm input {
width:92%;
border:1px solid #899caa;
border-radius:3px;
-moz-border-radius:3px;
color:#3a454d;
font-weight:bold;
padding:8px 8px;
box-shadow:inset 0px 1px 3px #bbb;
-webkit-box-shadow:inset 0px 1px 3px #bbb;
-moz-box-shadow:inset 0px 1px 3px #bbb;
font-size:12px;
}*/

/* Sign In Button */
#loginForm #login {
width:auto;
float:left;
background:#339cdf url(../images/login/loginbuttonbg.png) repeat-x;
color:#fff;
padding:7px 10px 8px 10px;
text-shadow:0px -1px #278db8;
border:1px solid #339cdf;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
margin:0 12px 0 0;
cursor:pointer;
*padding:7px 2px 8px 2px; /* IE7 Fix */
}

/* Forgot your password */
#loginForm span {
text-align:center;
display:block;
padding:7px 0 4px 0;
}

#loginForm span a {
color:#3a454d;
text-shadow:1px 1px #fff;
font-size:12px;
}

input:focus {
outline:none;
}

.cat_textbox_small {
width: 120px;
}
صورة العضو الشخصية

alumnius

  • مشاركات: 1
  • اشترك في: الأربعاء يونيو 19, 2013 11:29 am

Re: Fenster Einblendung im mit div hide/show funktioniert ne

بواسطة XainPro » السبت يونيو 22, 2013 6:56 am

sollten Sie versuchen, diese einfache jQuery-Plugin, um Login-Formular in einem Modell box zeigen diese Verbindung überprüfen.
http://buckwilson.me/lightboxme/
صورة العضو الشخصية

XainPro

  • مشاركات: 3933
  • اشترك في: الجمعة فبراير 17, 2012 8:10 pm


+ إضافة رد

صفحة 1 من 1