Aloin tässä tekemään uutta ulkoasu, kuvilla. Nyt minulla on muutama kuva, mitä painamalla tiettyyn kohtaan pitäisi ilmestyä kuvallinen laatikko, jossa on tekstiä. Tätä laatikkoa pitäisi pystyä myös siirtämään.
Esimerkkinä vasen alareuna "Habbo" -kuva http://habborator.org
Koitin tuolta noita JS tiedostoja tonkia, mutta oli kaikki kirjoitettu putkeen, niin en viitsinyt saada selvää niin suurista tiedostoista.
Ps. Tässä pitää myös olla se "Close" kohta, kuten tuolla Habboratorissa.
css määrite display voisi olla oikea hakusana. Esimerkiksi js koodin avulla toteutettu yksinkertainen koodi.
<!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" lang="fi" xml:lang="fi">
<head>
<title>Display</title>
<script type="text/javascript">
function muutaTilaa(elementti){
nakyvilla = document.getElementById(elementti);
if(nakyvilla.style.display == 'block'){
nakyvilla.style.display = 'none';
}else{
nakyvilla.style.display = 'block';
}
}
</script>
</head>
<body>
<a href="javascript:muutaTilaa('piilossa')">Muuta</a>
<div id="piilossa" style="display: block;">
<p>Tekstiä</p>
</div>
</body>
</html>Kiitos avusta. Nyt pitäisi saada vielä se siirtely mahdollisuus. Jos sivussa on kolme diviä: yläosa, keskiosa ja alaosa, niin miten saan niin, että kun yläosa-divistä ottaa kiinni, niin tätä voi siirtää?
Javascriptillä. Kannattaa ehkä tutustua johonkin valmiiseen kirjastoon, esim. jQuery ennemmin kuin alkaa ihan alusta asti itse tekemään. (tai no riippuu tietysti tekeekö vaan tekemisen vuoksi vai pitääkö saada jotain aikaseksikin)
<script>
var dragapproved=false
var minrestore=0
var initialwidth,initialheight
var ie5=document.all&&document.getElementById
var ns6=document.getElementById&&!document.all
function iecompattest(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function drag_drop(e){
if (ie5&&dragapproved&&event.button==1){
document.getElementById("dwindow").style.left=tempx+event.clientX-offsetx+"px"
document.getElementById("dwindow").style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
document.getElementById("dwindow").style.left=tempx+e.clientX-offsetx+"px"
document.getElementById("dwindow").style.top=tempy+e.clientY-offsety+"px"
}
}
function initializedrag(e){
offsetx=ie5? event.clientX : e.clientX
offsety=ie5? event.clientY : e.clientY
document.getElementById("dwindowcontent").style.display="none"
tempx=parseInt(document.getElementById("dwindow").style.left)
tempy=parseInt(document.getElementById("dwindow").style.top)
dragapproved=true
document.getElementById("dwindow").onmousemove=drag_drop
}
function loadwindow(url,width,height){
if (!ie5&&!ns6)
window.open(url,"","width=width,height=height,scrollbars=1")
else{
document.getElementById("dwindow").style.display=''
document.getElementById("dwindow").style.width=initialwidth=width+"px"
document.getElementById("dwindow").style.height=initialheight=height+"px"
document.getElementById("dwindow").style.left="30px"
document.getElementById("dwindow").style.top=ns6? window.pageYOffset*1+30+"px" : iecompattest().scrollTop*1+30+"px"
document.getElementById("cframe").src=url
}
}
function closeit(){
document.getElementById("dwindow").style.display="none"
}
function stopdrag(){
dragapproved=false;
document.getElementById("dwindow").onmousemove=null;
document.getElementById("dwindowcontent").style.display=""
}
</script>
<div id="dwindow" style="position:absolute;cursor:move;display:none" onMousedown="initializedrag(event)" onMouseup="stopdrag()" onSelectStart="return false">
<div align="right" style="background-color:navy"><img src="close.gif" onClick="closeit()"></div>
<div id="dwindowcontent" style="height:100%">
<iframe id="cframe" src="" width=100% height=100%></iframe>
</div>
</div>
<script>
if (ns6) window.onload=new Function('loadwindow("testi.html",400,400)')
else
loadwindow("testi.html",400,400)
</script>Tälläisen löysin, mutta se ei toimi ihan halutulla tavalla. Tämä hakee toisen sivun, ja näyttää tässä ikkunassa, kun sen pitäisi näyttää esimerkiksi teksti, mikä on johonkin diviin kirjoitettu. Toinen huonopuoli on se, että sisältö häviää, kun tätä koittaa siirtää.
Googletappas drag and drop javascript, niin löytyy muutamiakin esimerkkejä.
Jotain tälläistä siis etsit: http://highslide.com/#examples ?
Olisiko tästä apuja.
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
N = (document.all) ? 0 : 1;
var ob;
function MD(e) {
if (N) {
ob = document.layers[e.target.name];
X=e.x;
Y=e.y;
return false;
}
else {
ob = event.srcElement.parentElement.style;
X=event.offsetX;
Y=event.offsetY;
}
}
function MM(e) {
if (ob) {
if (N) {
ob.moveTo((e.pageX-X), (e.pageY-Y));
}
else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelTop = event.clientY-Y + document.body.scrollTop;
return false;
}
}
}
function MU() {
ob = null;
}
if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
// End -->
</script>
</HEAD>
<BODY>
<div id="p" style="position:absolute;left:50;top:300;">
<img src=../pics/pata.gif name="p">
</div>
<div id="r" style="position:absolute;left:50;top:350;">
<img src=../pics/ruutu.gif name="r">
</div>
<div id="c" style="position:absolute;left:100;top:300;">
<img src=../pics/risti.gif name="c">
</div>
<div id="h" style="position:absolute;left:100;top:350;">
<img src=../pics/hertta.gif name="h">
</div>
<div id="a" style="position:absolute;left:50;top:200;">
<img src=../pics/pa.gif name="a">
</div>
<div id="b" style="position:absolute;left:50;top:250;">
<img src=../pics/ru.gif name="b">
</div>
<div id="d" style="position:absolute;left:100;top:200;">
<img src=../pics/ri.gif name="d">
</div>
<div id="e" style="position:absolute;left:100;top:250;">
<img src=../pics/he.gif name="e">
</div>
<div id="x" style="position:absolute;left:50;top:100;">
<img src=../pics/pa.gif name="a">
</div>
<div id="y" style="position:absolute;left:50;top:150;">
<img src=../pics/ru.gif name="b">
</div>
<div id="z" style="position:absolute;left:100;top:100;">
<img src=../pics/ri.gif name="d">
</div>
<div id="q" style="position:absolute;left:100;top:150;">
<img src=../pics/he.gif name="e">
</div>
klikkaa jotakin maata, vedä ja pudota haluamaasi paikkaan.<br>
Käytäthän IE 7 selainta.MIB kirjoitti:
Nyt pitäisi saada vielä se siirtely mahdollisuus. Jos sivussa on kolme diviä: yläosa, keskiosa ja alaosa, niin miten saan niin, että kun yläosa-divistä ottaa kiinni, niin tätä voi siirtää?
jQuerystä tuli mieleen sortable:
<html>
<head>
<title>jQuery UI Sortable</title>
<script type="application/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="application/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="application/javascript">
$(function() {
$("body").sortable({ opacity: 0.6 });
});
</script>
<style type="text/css">
.box {
background-color: lightgrey;
outline: grey dotted thin;
margin: 1em;
}
</style>
</head>
<body>
<div class="box" id="header">
<h1>Header</h1>
<p>Foo</p>
</div>
<div class="box" id="content">
<p>Content</p>
</div>
<div class="box" id="footer">
<span>Footer</span>
</div>
</body>
</html>Tälläisen löysin, ja vähän muokkasin:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Javascript Drag and Drop Example.</title>
<style type="text/css">
<!--
.vidFrame { position: absolute; display: none; background-color: #ffdead; border: 1px solid #ffffff; width: 60%; height: 40%;}
a:link { color: white; text-decoration: none;}
a:visited { color: white; text-decoration: none;}
a:hover { color: white; text-decoration: none;}
a:href { color: white; text-decoration: none;}
body { background-color: black; }
.move { cursor: move;}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function moveHandler(e){
if (e == null) { e = window.event }
if (e.button<=1&&dragOK){
savedTarget.style.left=e.clientX-dragXoffset+'px';
savedTarget.style.top=e.clientY-dragYoffset+'px';
return false;
}
}
function dragHandler(e){
var htype='-moz-grabbing';
if (e == null) { e = window.event; htype='move';}
var target = e.target != null ? e.target : e.srcElement;
orgCursor=target.style.cursor;
if (target.className=="vidFrame") {
savedTarget=target;
target.style.cursor=htype;
dragOK=true;
dragXoffset=e.clientX-parseInt(vidPaneID.style.left);
dragYoffset=e.clientY-parseInt(vidPaneID.style.top);
document.onmousemove=moveHandler;
document.onmouseup=cleanup;
return false;
}
}
function avaa(vidId) {
if (vidPaneID.style.display=='block') {
vidPaneID.style.display='none';
vidPaneID.innerHTML='';
} else {
vidPaneID.style.display='block';
vidPaneID.innerHTML='<table cellspacing="0" cellpadding="0" width="100%" class="move" onmousedown="dragHandler(e)"><tr width="100%"><td bgcolor="navy" width="100%"><div style="float: right;"><a href="javascript:avaa()">Sulje</a> </div></td></tr></table>';
var vidstring ='MoiMoi';
vidPaneID.innerHTML+=vidstring;
}
}
function cleanup(e) {
document.onmousemove=null;
document.onmouseup=null;
savedTarget.style.cursor=orgCursor;
dragOK=false;
}
document.onmousedown=dragHandler;
//-->
</script>
</head>
<body>
<A HREF="javascript:avaa()">Avaa ikkuna tästä!</A>
<div id='vidPane' class='vidFrame'></div>
<script language="JavaScript" type="text/javascript">
<!--
var savedTarget=null; // The target layer (effectively vidPane)
var orgCursor=null; // The original Cursor (mouse) Style so we can restore it
var dragOK=false; // True if we're allowed to move the element under mouse
var dragXoffset=0; // How much we've moved the element on the horozontal
var dragYoffset=0; // How much we've moved the element on the verticle
vidPaneID = document.getElementById('vidPane'); // Our movable layer
vidPaneID.style.top='50px'; // Starting location horozontal
vidPaneID.style.left='50px'; // Starting location verticle
//-->
</script>
</body>
</html>Nyt vain on sellainen ongelma, että pitäisi saada tehtyä niin, että vain tuosta navyn värisestä tablesta voisi siirtää koko höskää. En ole siinä onnistunut.
Aihe on jo aika vanha, joten et voi enää vastata siihen.