meescorollend en versleepbaar iframe

Pagina: 1
Acties:
  • 46 views sinds 30-01-2008

  • NeORay
  • Registratie: September 2004
  • Laatst online: 13-05 12:52
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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 ]


  • André
  • Registratie: Maart 2002
  • Laatst online: 11-05 16:42

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 ]


  • LoeiOrdinair
  • Registratie: Maart 2004
  • Laatst online: 10:25

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 ]


  • 1st_Ro
  • Registratie: December 2002
  • Laatst online: 07-01-2022
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 O-)

  • NeORay
  • Registratie: September 2004
  • Laatst online: 13-05 12:52
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 O-)
Dat script had ik ook al maar hoe kun je binnen die div scrollen?

  • André
  • Registratie: Maart 2002
  • Laatst online: 11-05 16:42

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 :)

  • NeORay
  • Registratie: September 2004
  • Laatst online: 13-05 12:52
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 ]


  • André
  • Registratie: Maart 2002
  • Laatst online: 11-05 16:42

André

Analytics dude

In de style van die div :)

  • NeORay
  • Registratie: September 2004
  • Laatst online: 13-05 12:52
ik zie alleen div id en td style dus geen div style. Dus hoe en waar moet k het nou plaatsen?

  • NeORay
  • Registratie: September 2004
  • Laatst online: 13-05 12:52
wat ik nu heb:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<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 ]


  • André
  • Registratie: Maart 2002
  • Laatst online: 11-05 16:42

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;">

  • NeORay
  • Registratie: September 2004
  • Laatst online: 13-05 12:52
nu werkt t wel idd!!! :) _/-\o_

  • NeORay
  • Registratie: September 2004
  • Laatst online: 13-05 12:52
is het nu ook nog mogelijk die div mee te laten scrollen met de rest van de pagina of is dat te gecompliceerd?

  • André
  • Registratie: Maart 2002
  • Laatst online: 11-05 16:42

André

Analytics dude

Ja, dat is mogelijk:

2 seconden en 1ste hit op google:
http://www.echoecho.com/toolfloatinglayer.htm

  • Willem
  • Registratie: Februari 2001
  • Laatst online: 23:38
McVirusS in "meescrollende, scrollende en draggable d..."

Veel succes nog. Topic openen na slotje doen we hier niet.

Motor (of auto) onderhoud bijhouden

Pagina: 1

Dit topic is gesloten.