Terve
Kirjoitin sivulleni tälläisen pätkän koodia
$(function() {
$("#login").hide();
$("#loginlink").click(function(e) {
e.preventDefault();
$("#login").slideToggle(200);
});
});Nyt ei kumminkaan tapahdu mitään. Jos vaihdan slideToggle-funktion paikalle togglen niin alkaa toimia. Missä vika, kun slideToggle ei toimi? #login on form-elementti koodissa.
Itse sain toimimaan JS Binin kautta kun testasin: http://jsbin.com/afapen/2/edit#preview
Jeps, mutta jostain syystä se ei silti aukea omalla sivullani.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="styles.css" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/custom.js"></script> <!-- Tämä sisältää aloitusviestissä olevan koodin -->
<title></title>
</head>
<body>
<div id="document">
<div id="header">
<div id="headercontent">
<span id="logo">
...
</span>
<ul class="menu">
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
<div style="float: right;">
<a href="#" id="loginlink" style="float: right">kirjautuminen</a>
<form id="login" method="POST">
<p>
<input id="username" type="text" placeholder="Käyttäjätunnus" required>
<input id="password" type="password" placeholder="Salasana" required>
</p>
<p>
<input type="submit" id="submit" value="Kirjaudu">
</p>
</form>
</div>
</div>
</div>
...Nähtävästi toimi taas hienosti noitten sisennyksien kopioiminen Netbeansistä...
Mitenköhän muuten tuon formin saisi aukeamaan muun sivuston päälle, eikä sitä, että se työntää muut elementit alta pois? z-index ei auttanut (toimiiko se vain saman elementin sisässä olevien elementtien kanssa?) ja position: absolute laittaa sen väärään reunaan linkkiin nähden. Haluttu tulos näyttäisi tältä.
Macro kirjoitti:
Jeps, mutta jostain syystä se ei silti aukea omalla sivullani.
Sisältääkö custom.js jotain muuta myös? Omilla sivuillani toimii edelleen, myös ylläolevan lähdekoodisi kautta.
Macro kirjoitti:
Mitenköhän muuten tuon formin saisi aukeamaan muun sivuston päälle, eikä sitä, että se työntää muut elementit alta pois? z-index ei auttanut (toimiiko se vain saman elementin sisässä olevien elementtien kanssa?) ja position: absolute laittaa sen väärään reunaan linkkiin nähden. Haluttu tulos näyttäisi tältä.
Pistäpäs sivustos CSS-tiedosto johonkin näkyville.
form#login {
position: relative;
z-index: 200;
}Edit: voisi toimia paremmin, jos pistäisit #login-elementin divin sisään (<div id="login">)
<form>
custom.js sisältää myös nämä koodit.
$("#img1, #img2, #img3").hide();
$("#img1, #img2, #img3").css({marginLeft: "-500px"})
$("#img3").animate({
opacity: "show",
marginLeft: "0px"
}, 600, "easein", function() {
$("#img2").animate({
opacity: "show",
marginLeft: "0px"
}, 600, "easein", function() {
$("#img1").animate({
opacity: "show",
marginLeft: "0px"
}, 600, "easein");
});
});
$(".menu").lavaLamp({
fx: "backout",
speed: 500,
click: function(event, menuItem) {
return false;
}
});Lisäksi tonne HTML-koodiin tulee Lavalamp- ja Easing-pluginit.
CSS-tiedostoa voi tutkia vaikka täällä.
Kokeilin myös mitä ehdotit muokkauksen jälkeen, mutta ei sekään auttanut. Sen aukeamiseen sivun päälle ei auttanut myöskään tuo CSS-koodisi.
custom.js-tiedostossa on tässä jokin vika (täytynee tutkia tarkemmin..):
$(".menu").lavaLamp({
fx: "backout",
speed: 500,
click: function(event, menuItem) {
return false;
}
});Ai? Kyllä se tekee sen mitä sen kuuluukin eikä se vaikuta muun sivun toimintaan.
Macro kirjoitti:
Ai? Kyllä se tekee sen mitä sen kuuluukin eikä se vaikuta muun sivun toimintaan.
Mutta kun sen jälkeen ei toimi tuo login-elementin slideToggle:
Jos nuo on näin siellä custom.js:ssä:
$(".menu").lavaLamp({
fx: "backout",
speed: 500,
click: function(event, menuItem) {
return false;
}
});
$(function() {
$("#login").hide();
$("#loginlink").click(function(e) {
e.preventDefault();
$("#login").slideToggle(200);
});
});Ei mulla kyllä ilman sitäkään slideToggle toimi. Sen pitää olla kyllä kanssa tuolla $(function(){:n sisällä.
Mulla toimii, esimerkit: http://ilmera.net/scripts/jquery-slidetoggle.html, http://ilmera.net/scripts/custom.js.
Strange. http://macrostests.host56.com/testi/ :/
En voi kumminkaan tehdä noin kuin sulla on tossa tiedostossa, kun sillon muut toiminnot lakkaavat toimimasta...
Macro kirjoitti:
Strange. http://macrostests.host56.com/testi/ :/
En voi kumminkaan tehdä noin kuin sulla on tossa tiedostossa, kun sillon muut toiminnot lakkaavat toimimasta...
Kopsasin tuolta sivuiltasi suoraan custom.js:n lähdekoodin ja toimii.
Nähtävästi se ei tykkää Easing-pluginista. Mistäs moinen viha Easingiä kohtaan?
Macro kirjoitti:
Nähtävästi se ei tykkää Easing-pluginista. Mistäs moinen viha Easingiä kohtaan?
Huomasin saman, täytyy katsoa jos keksisin jonkin syyn. Alkaa meikäläisellä kyllä kohta taidot loppua.. :|
Nähtävästi jQueryn dokumentaatiossa käsiteltiin tämäkin asia. slideTogglelle piti antaa toiseksi parametriksi linear.
Boksi aukeaa ja sulkeutuu kumminkin väärässä paikassa. Sen pitäisi lähteä suoraan tuosta linkin alta. Lisäksi se aukeaa väärään paikkaan. Oikea paikka olisi täällä.
Macro kirjoitti:
Boksi aukeaa ja sulkeutuu kumminkin väärässä paikassa. Sen pitäisi lähteä suoraan tuosta linkin alta. Lisäksi se aukeaa väärään paikkaan. Oikea paikka olisi täällä.
Purkkaviritelmä:
form#login {
position: absolute;
z-index: 1000;
top: 55px;
right: 450px;
}Jees, jotain tollasta virittelin sinne. Formi ei silti aukea kivasti, kun se liukuu samalla sivun yläreunasta oikeaan kohtaansa kun se muuten aukeaa.
Aihe on jo aika vanha, joten et voi enää vastata siihen.