meescorollend en versleepbaar iframe - Softwareontwikkeling

donderdag 3 februari 2005 13:25

Acties:

Topicstarter

Ik plaatse net al het volgende berichtje: heeyz mensen ff n vraagje
Ik wil binnen m'n website een beetje table-lookalike achtig iets maken dat meescrollt naar beneden, waarbinnen ik kan scrollen en dat draggable is. Is dit sowieso mogelijk?? Zo ja, hoe?
Ik neem aan dat ik een div of iframe moet gebruiken maar ik heb met beiden weinig tot geen ervaring.

Als antwoord hierop kreeg ik dat ik een beetje te makkelijk deed en dat ik op dynamic drive moest kijken.

OK! Heb ik gedaan. Ik heb wel het één en ander gevonden maar nergens was er een combo van de gevraagde dingen.

De beste die ik vond was deze:

code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 2</title>
</head>

<body>
<!--Scrollable iframe script- By Dynamic Drive-->
<!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->
<!--This credit MUST stay intact for use-->

<iframe id="datamain" src="external.htm" width=150 height=150 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no></iframe>

<layer visibility=hide>
<div style="width:150px;" align="right">
<a href="#" onMouseover="scrollspeed=-2" onMouseout="scrollspeed=0">Up</a> | <a href="#" onMouseover="scrollspeed=2" onMouseout="scrollspeed=0">Down</a>
</div>
</layer>
</body>

</html>

Weet iemand waar ik kan vinden wat, of kan iemand mij vertellen wat, ik eraan toevoegen moet om dit ding iig versleepbaar te maken en liefst ook meescrollend met de pagina. Of kan dat misschien helemaal niet?
Alvast bedankt!

(blokkeer m nu alsjeblieft niet want ik kom er zelf echt nie uit..)

[ Voor 14% gewijzigd door NeORay op 03-02-2005 13:27 ]

donderdag 3 februari 2005 13:32

Acties:

André

Analytics dude

Het versleepbaar maken kan wel maar is moeilijk om zelf te maken. En wat bedoel je met meescrollen met de pagina?

/edit:
Volgens mij heb ik je nu door: jij wil dat dat iframe over je pagina heen zweeft zeg maar? Zoiets kun je beter met een layer doen.

[ Voor 39% gewijzigd door André op 03-02-2005 13:39 ]

donderdag 3 februari 2005 13:36

Acties:

LoeiOrdinair

To Infinity and Beyond

Gathering of Tweakers is géén helpdesk waar je al je huis-, tuin-, en keukenprobleempjes kwijt kunt, maar een forum voor en door de serieuze hobbyist. We verwachten dat je zelf moeite doet voordat je bij ons aanklopt, je dit in je topicstart duidelijk laat merken en dat je respect toont voor de andere gebruikers en het forum. Doe dus zelf research en laat duidelijk merken dat je dat gedaan hebt. Lijkt Gathering of Tweakers je te hoog gegrepen, dan is BeginnersWeb een mooi en goed alternatief.

uit de FAQ

Als je je script post met de foutmelding kunnen we even voor je kijken. Maar op deze manier gaat het je denk ik niet lukken.

[ Voor 11% gewijzigd door LoeiOrdinair op 03-02-2005 13:37 ]

donderdag 3 februari 2005 13:38

Acties:

1st_Ro

2 seconden google werk op "draggable div":

http://www.codelifter.com/main/javascript/dragablelayer.html

ipv tekst gooi je er een iFrame in en klaar is meneer/mevrouw ...

Eigenlijk ben ik veel te lief voor dit forum

donderdag 3 februari 2005 13:41

Acties:

NeORay

Topicstarter

1st_Ro schreef op donderdag 03 februari 2005 @ 13:38:
2 seconden google werk op "draggable div":

http://www.codelifter.com/main/javascript/dragablelayer.html

ipv tekst gooi je er een iFrame in en klaar is meneer/mevrouw ...

Eigenlijk ben ik veel te lief voor dit forum

Dat script had ik ook al maar hoe kun je binnen die div scrollen?

donderdag 3 februari 2005 13:43

Acties:

André

Analytics dude

mp-tje schreef op donderdag 03 februari 2005 @ 13:41:
[...]

Dat script had ik ook al maar hoe kun je binnen die div scrollen?

Door die div een vaste hoogte te geven en de overflow-y op scroll te zetten

donderdag 3 februari 2005 13:58

Acties:

NeORay

Topicstarter

waar moet die overflow y dan ergens komen?? (of waar zou die ergens moeten staan want ik zie m niet)

[ Voor 41% gewijzigd door NeORay op 03-02-2005 13:59 ]

donderdag 3 februari 2005 13:58

Acties:

André

Analytics dude

In de style van die div

donderdag 3 februari 2005 14:04

Acties:

NeORay

Topicstarter

ik zie alleen div id en td style dus geen div style. Dus hoe en waar moet k het nou plaatsen?

donderdag 3 februari 2005 14:06

Acties:

NeORay

Topicstarter

wat ik nu heb:

code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript1.2">

// Script Source: CodeLifter.com
// Copyright 2003
// Do not remove this header

isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isHot=false;

function ddInit(e){
  topDog=isIE ? "BODY" : "HTML";
  whichDog=isIE ? document.all.theLayer : document.getElementById("theLayer");  
  hotDog=isIE ? event.srcElement : e.target;  
  while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog){
    hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
  }  
  if (hotDog.id=="titleBar"){
    offsetx=isIE ? event.clientX : e.clientX;
    offsety=isIE ? event.clientY : e.clientY;
    nowX=parseInt(whichDog.style.left);
    nowY=parseInt(whichDog.style.top);
    ddEnabled=true;
    document.onmousemove=dd;
  }
}

function dd(e){
  if (!ddEnabled) return;
  whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx; 
  whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
  return false;  
}

function ddN4(whatDog){
  if (!isN4) return;
  N4=eval(whatDog);
  N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
  N4.onmousedown=function(e){
    N4.captureEvents(Event.MOUSEMOVE);
    N4x=e.x;
    N4y=e.y;
  }
  N4.onmousemove=function(e){
    if (isHot){
      N4.moveBy(e.x-N4x,e.y-N4y);
      return false;
    }
  }
  N4.onmouseup=function(){
    N4.releaseEvents(Event.MOUSEMOVE);
  }
}

function hideMe(){
  if (isIE||isNN) whichDog.style.visibility="hidden";
  else if (isN4) document.theLayer.visibility="hide";
}

function showMe(){
  if (isIE||isNN) whichDog.style.visibility="visible";
  else if (isN4) document.theLayer.visibility="show";
}

document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<!-- BEGIN FLOATING LAYER CODE //-->
<div id="theLayer" style="position:absolute;width:250px; height: 300;left:100;top:100;visibility:visible; border: 1px none #000000; height: 300"> 
  <table border="0" width="250" height="300" bgcolor="#424242" cellspacing="0" cellpadding="5">
<tr>
<td width="100%">
        <table border="0" width="100%" cellspacing="0" cellpadding="0" height="156">
          <tr>
  <td id="titleBar" style="cursor:move" width="100%">
  <ilayer width="100%" onSelectStart="return false">
  <layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(theLayer)" onMouseout="isHot=false">
  <font face="Arial" color="#FFFFFF">Layer Title</font>
  </layer>
  </ilayer>
  </td>
  <td style="cursor:hand" valign="top">
  <a href="#" onClick="hideMe();return false"><font color=#ffffff size=2 face=arial  style="text-decoration:none">X</font></a>
  </td>
  </tr>
  <tr>
            <td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2" nowrap height="300"> 
              <!-- PLACE YOUR CONTENT HERE //-->
              <p>This is where your content goes.<br>
                It can be any html code or text.<br>
                Remember to feed the reindeer.<br>
                Avoid chewable giblet curtains.</p>
              <p>dfhgfh</p>
              <p>hgfgh</p>
              <p>gfgfhdx</p>
              <p>gfhfh</p>
              <p>gfhfdh</p>
              <p>fghfghfgh</p>
              <p>gfhfgh</p>
              <p>gfhfghfg</p>
              <p>ghfhfghfg</p>
              <p>gfhfgh</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p> 
                <!-- END OF CONTENT AREA //-->
              </p>
            </td>
  </tr>
  </table> 
</td>
</tr>
</table>
</div>
<!-- END FLOATING LAYER CODE //--> 


</body>
</html>

[ Voor 18% gewijzigd door NeORay op 03-02-2005 14:07 ]

donderdag 3 februari 2005 14:08

Acties:

André

Analytics dude

code:

1	<div id="theLayer" style="position:absolute; width:250px; height:300px; left:100px; top:100px; visibility:visible; border: 1px none #000000; overflow-y: scroll;">

donderdag 3 februari 2005 14:11

Acties: