Löysin täältä ohjeen popupin tekemiseen php:llä ja sen liikuttelun javalla.
Oon aina aikasemmin yrittänyt vältellä javaa nettihommissa, joten en oikeen osaa sitä käyttää ja nyt en saa tuon divin liikutusta toimimaan.
Mihin väliin tuo java scripti pitää lisätä että toimii?
<html>
<head>
<style type='text/css'>
<!--
#popup {
position: absolute;
top: 100px;
left: 240px;
width: 200px;
border: solid #888 8px;
background: #eee;
z-index: 10;
}
div.top {
height: 20px;
text-align: right;
border-bottom: solid #888 4px;
background: #f6f6f6;
}
div.bottom {
height: 300px;
padding: 10px;
overflow: auto;
}
div.top span {
border-left: solid #888 4px;
padding: 5px;
}
-->
</style>
</head>
<body>
<p><a href="<?php print $_SERVER['PHP_SELF'];?>?show=true">avaa popup</a></p>
<p>
<?php include("../lorem.txt");?>
</p>
<?php
if(isset($_GET['show']) && $_GET['show']=="true") {
print "<div id='popup'>";
print "<div class='top'><span><a href='".$_SERVER['PHP_SELF']."?show=false'>X</a></span></div>";
print "<div class='bottom'>";
include("../lorem.txt");
print "</div>";
print "</div>";
} // if
?>
</body>
</html><script type='text/javascript'>
<!--
N = (document.all) ? 0 : 1;
var ob;
var over = false;
function MD(e) {
if(over) {
if(N) {
ob = document.getElementById("popup");
X=e.layerX;
Y=e.layerY;
return false;
} else {
ob = document.getElementById("popup");
ob = ob.style;
X=event.offsetX;
Y=event.offsetY;
} // else
} // if
} // funktio
function MM(e) {
if(ob) {
if(N) {
ob.style.top = e.pageY-Y;
ob.style.left = e.pageX-X;
} else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
} // else
} // if
} // funktio
function MU() {
ob = null;
} // funktio
if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
} // if
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
-->
</script>Java/java script ja javascript ovat eri asioita.
Javascript kannattaa tunkea head-tagiin.
Tuokos nytten on javascript?
Yritin laittaa head tagiin niinkuin muistelin, mutta ei toiminut.
jideko kirjoitti:
<script type='text/javascript'>
Pitää olla:
<script language='javascript' type='text/javascript'>
Pekka Mansikka kirjoitti:
jideko kirjoitti:
<script type='text/javascript'>
Pitää olla:
<script language='javascript' type='text/javascript'>
Ja vielä parempi ois olla " tuon ':n tilalla :P
Pekka Mansikka kirjoitti:
jideko kirjoitti:
<script type='text/javascript'>
Pitää olla:
<script language='javascript' type='text/javascript'>
Eiköhän missä tahansa vähänkään modernimmassa selaimessa pelkkä type-attribuutti riitä. Yleensä kylläkin (X)HTML:ssä on tapana käyttää lainausmerkkejä hipsujen asemesta (edit: kuten tejeez viitisentoista sekuntia sitten sanoi grr).
Tuosta varsinaisesta javascript-koodista pari sanaa.
Minä en tuosta löydä pixeli-lukemia,johon tuota "popup"-tekstiä siirrettäisiin.Minä tekisin vaikka tällaiset muuttujat:
var maxX=150;
var maxY=200;
Toisaalta funktiokutsut:
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
eikö nuo ole vähän puutteelliset? Tuntuisi siltä, että siihen kuuluu kaarisulkeet.......
En saa toimimaan.
Mihinkäs nuo muuttujat pitäisi laittaa??
Tällähetkellä koodi näyttää tältä.
<html>
<head>
<script language='javascript' type='text/javascript'>
N = (document.all) ? 0 : 1;
var ob;
var over = false;
function MD(e) {
if(over) {
if(N) {
ob = document.getElementById("popup");
X=e.layerX;
Y=e.layerY;
return false;
} else {
ob = document.getElementById("popup");
ob = ob.style;
X=event.offsetX;
Y=event.offsetY;
} // else
} // if
} // funktio
function MM(e) {
if(ob) {
if(N) {
ob.style.top = e.pageY-Y;
ob.style.left = e.pageX-X;
} else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
} // else
} // if
} // funktio
function MU() {
ob = null;
} // funktio
if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
} // if
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
</script>
<style type='text/css'>
#popup {
width: 200px;
border: solid #888 8px;
background: #eee;
z-index: 10;
}
div.top {
height: 20px;
text-align: right;
border-bottom: solid #888 4px;
background: #f6f6f6;
}
div.bottom {
height: 300px;
padding: 10px;
overflow: auto;
}
div.top span {
border-left: solid #888 4px;
padding: 5px;
}
</style>
</head>
<body>
<p><a href="<?php print $_SERVER['PHP_SELF'];?>?show=true">avaa popup</a></p>
<p>
<?php include("lorem.txt");?>
</p>
<?php
if(isset($_GET['show']) && $_GET['show']=="true") {
print "<div id=\"popup\">";
print "<div class='top'><span><a href='".$_SERVER['PHP_SELF']."?show=false'>X</a></span></div>";
print "<div class='bottom'>";
include("lorem.txt");
print "</div>";
print "</div>";
} // if
?>
</body>
</html>Lisättäköön vielä, ettet sinä tuota popuppia PHP:llä tee, vaan JavaScriptillä. Muistathan antaa myös JavaScriptittömän version palvelustasi kävijöille? :) Itse ongelmaa en aio auttaa, koska haettu lopputulos sotii ajatusmaailmaani vastaan enkä edes osaa JavaScriptiä ;)
En minäkään JavaScriptin huippuja ole.
Näin jälkeenpäin ajatellen saattaa olla, että tuossa ei tarvita mitään noita pikselimäärityksiä, vaan tarkoitus on siirtää tuota popuppia hiiren painike alaspainettuna (kuten tavallista window.open-ikkunaakin).
MasaVista kirjoitti:
Lisättäköön vielä, ettet sinä tuota popuppia PHP:llä tee, vaan JavaScriptillä. Muistathan antaa myös JavaScriptittömän version palvelustasi kävijöille? :) Itse ongelmaa en aio auttaa, koska haettu lopputulos sotii ajatusmaailmaani vastaan enkä edes osaa JavaScriptiä ;)
Eihän tuossa popuppia JS:llä tehdä vaan ihan PHP + div + CSS -yhdistelmällä. JS:llä vain mahdollistetaan sen liikuttelu.
Itse ongelmaan en jaksa edes perehtyä, sillä Olga on tuolla tehnyt kyllä niin selkeät esimerkit, että on omaa avuttomuutta, jos ei saa toimimaan:
https://www.ohjelmointiputka.net/keskustelu/6026-popup-ikkunat-ja-tulevaisuus
MasaVista kirjoitti:
Muistathan antaa myös JavaScriptittömän version palvelustasi kävijöille?
Tämä tulisi pelkästään omaan projektiin, niin ei tuollakaan olisi niin väliä.
ajv kirjoitti:
Itse ongelmaan en jaksa edes perehtyä, sillä Olga on tuolla tehnyt kyllä niin selkeät esimerkit, että on omaa avuttomuutta, jos ei saa toimimaan:
https://www.ohjelmointiputka.net/keskustelu/6026-popup-ikkunat-ja-tulevaisuus
Kyllähän mä popupin saan toimimaan mutta en tuota JS:ssää, johon ei Olgagaan antanut neuvoja.
Eli ongelmana on pelkästään että en saa liikutettua sitä diviä.
En ole testannut, onko vaikutusta noilla funktionimillä.
"Virallisen" ohjeen mukaan ne kuuluisivat olla
onMouseDown
onMouseMove => joissakin Netscapessa onMouseOver
onMouseUp
siis ei pelkin pienin kirjaimin.
En jaksa testailla tuota..............
jideko kirjoitti:
Kyllähän mä popupin saan toimimaan mutta en tuota JS:ssää, johon ei Olgagaan antanut neuvoja.
Eli ongelmana on pelkästään että en saa liikutettua sitä diviä.
No kyllä se ainakin tuolla esimerkissä liikkuu.
Ratkaisu lienee tässä:
<div id='popup' class='popup'> <div class='top' onmouseover='over=true;' onmouseout='over=false;'>
ajv kirjoitti:
on omaa avuttomuutta, jos ei saa toimimaan
No niin taisi olla. Tyhmänä en ollut tuota lukenut tarkemmin ja hoksannut tuota esimerkkisivua. Ja sieltähän se ratkaisu löytyi, jonka myös Pekka kertoi.
Kiitoksia kuitenkin kaikille jotka näitte vaivaa.
Aihe on jo aika vanha, joten et voi enää vastata siihen.