|
|
|
|
![]() ![]() |
Jun 15 2008, 09:28 PM
Post
#1
|
|
|
Member [Level 1] ![]() ![]() ![]() ![]() Group: [HOSTED] Posts: 62 Joined: 7-May 08 From: richmond, va Member No.: 61,838 |
ok im not sure where or how to really ask this... but you can find an example at http://www.demonoid.com
the ad that is on the right side scrolls with you basically to the bottom of the page. I know they use an iframe but can you show me how that works or what makes it do that? i tried to copy the source and css but it did not work.. any advice? |
|
|
|
Jun 17 2008, 08:59 AM
Post
#2
|
|
|
Member [Level 1] ![]() ![]() ![]() ![]() Group: [HOSTED] Posts: 53 Joined: 12-June 08 From: Netherlands Member No.: 63,541 |
2 years ago I was looking for this to but then a friend and I made a script (he knew javascript).
First we made a div box: CODE <div id="floatdiv" style=" position:absolute; width:200px;height:50px;left:0px;top:0px; padding:16px;background:#FFFFFF; border:2px solid #2266AA"> !!CONENT HERE!! </div> Then after the div box code: CODE <script type="text/javascript"><!-- var floatingMenuId = 'floatdiv'; var floatingMenu = { targetX: -250, targetY: 10, hasInner: typeof(window.innerWidth) == 'number', hasElement: document.documentElement && document.documentElement.clientWidth, menu: document.getElementById ? document.getElementById(floatingMenuId) : document.all ? document.all[floatingMenuId] : document.layers[floatingMenuId] }; floatingMenu.move = function () { if (document.layers) { floatingMenu.menu.left = floatingMenu.nextX; floatingMenu.menu.top = floatingMenu.nextY; } else { floatingMenu.menu.style.left = floatingMenu.nextX + 'px'; floatingMenu.menu.style.top = floatingMenu.nextY + 'px'; } } floatingMenu.computeShifts = function () { var de = document.documentElement; floatingMenu.shiftX = floatingMenu.hasInner ? pageXOffset : floatingMenu.hasElement ? de.scrollLeft : document.body.scrollLeft; if (floatingMenu.targetX < 0) { if (floatingMenu.hasElement && floatingMenu.hasInner) { // Handle Opera 8 problems floatingMenu.shiftX += de.clientWidth > window.innerWidth ? window.innerWidth : de.clientWidth } else { floatingMenu.shiftX += floatingMenu.hasElement ? de.clientWidth : floatingMenu.hasInner ? window.innerWidth : document.body.clientWidth; } } floatingMenu.shiftY = floatingMenu.hasInner ? pageYOffset : floatingMenu.hasElement ? de.scrollTop : document.body.scrollTop; if (floatingMenu.targetY < 0) { if (floatingMenu.hasElement && floatingMenu.hasInner) { // Handle Opera 8 problems floatingMenu.shiftY += de.clientHeight > window.innerHeight ? window.innerHeight : de.clientHeight } else { floatingMenu.shiftY += floatingMenu.hasElement ? document.documentElement.clientHeight : floatingMenu.hasInner ? window.innerHeight : document.body.clientHeight; } } } floatingMenu.doFloat = function() { var stepX, stepY; floatingMenu.computeShifts(); stepX = (floatingMenu.shiftX + floatingMenu.targetX - floatingMenu.nextX) * .07; if (Math.abs(stepX) < .5) { stepX = floatingMenu.shiftX + floatingMenu.targetX - floatingMenu.nextX; } stepY = (floatingMenu.shiftY + floatingMenu.targetY - floatingMenu.nextY) * .07; if (Math.abs(stepY) < .5) { stepY = floatingMenu.shiftY + floatingMenu.targetY - floatingMenu.nextY; } if (Math.abs(stepX) > 0 || Math.abs(stepY) > 0) { floatingMenu.nextX += stepX; floatingMenu.nextY += stepY; floatingMenu.move(); } setTimeout('floatingMenu.doFloat()', 20); }; // addEvent designed by Aaron Moore floatingMenu.addEvent = function(element, listener, handler) { if(typeof element[listener] != 'function' || typeof element[listener + '_num'] == 'undefined') { element[listener + '_num'] = 0; if (typeof element[listener] == 'function') { element[listener + 0] = element[listener]; element[listener + '_num']++; } element[listener] = function(e) { var r = true; e = (e) ? e : window.event; for(var i = element[listener + '_num'] -1; i >= 0; i--) { if(element[listener + i](e) == false) r = false; } return r; } } //if handler is not already stored, assign it for(var i = 0; i < element[listener + '_num']; i++) if(element[listener + i] == handler) return; element[listener + element[listener + '_num']] = handler; element[listener + '_num']++; }; floatingMenu.init = function() { floatingMenu.initSecondary(); floatingMenu.doFloat(); }; // Some browsers init scrollbars only after // full document load. floatingMenu.initSecondary = function() { floatingMenu.computeShifts(); floatingMenu.nextX = floatingMenu.shiftX + floatingMenu.targetX; floatingMenu.nextY = floatingMenu.shiftY + floatingMenu.targetY; floatingMenu.move(); } if (document.layers) floatingMenu.addEvent(window, 'onload', floatingMenu.init); else { floatingMenu.init(); floatingMenu.addEvent(window, 'onload', floatingMenu.initSecondary); } //--></script> The target_x and target_y variables represent the desired distance from the top left corner of the menu to the window borders. Positive values mean distance from left and top border and negative - from right and bottom. I hope this is wat you where looking fore. Some parts of the code where note made by me or my friend, those where code snippets found on the web. |
|
|
|
Jun 17 2008, 09:46 PM
Post
#3
|
|
|
Member [Level 1] ![]() ![]() ![]() ![]() Group: [HOSTED] Posts: 62 Joined: 7-May 08 From: richmond, va Member No.: 61,838 |
oh wow... that may be it. i dont know anything about javascript so it may take me a while to try and get it up, but i will let you know how it goes! thanks!
|
|
|
|
Jun 18 2008, 08:08 AM
Post
#4
|
|
|
Member [Level 1] ![]() ![]() ![]() ![]() Group: [HOSTED] Posts: 53 Joined: 12-June 08 From: Netherlands Member No.: 63,541 |
No problem, It is copy & paste ready, you only have to put in some content in the div box.
|
|
|
|
Jun 18 2008, 02:54 PM
Post
#5
|
|
|
Super Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: [HOSTED] Posts: 275 Joined: 2-June 07 From: U to the S to the A (but i'm haitian) Member No.: 44,040 |
funny LOL i'm actualy doing this same thing for a website.
an easy way to do is is using fixed positioning this the HTML code CODE <div id="nomove" >stay where you at</div> <div id="other">this moves balsjshs hskhgdgd dghjdhg hgdghdghdgdhgd dhgdhgd dh</div> this is the CSS and lets keep #nomove to left foreever and 50px from top CODE #nomove { position:fixed; left:0; top:50px;
} |
|
|
|
Jun 18 2008, 05:11 PM
Post
#6
|
|
|
Member [Level 1] ![]() ![]() ![]() ![]() Group: [HOSTED] Posts: 62 Joined: 7-May 08 From: richmond, va Member No.: 61,838 |
hey etycto... i will try that as well...
I have a test one that im trying... http://www.theidoctor.org/test1.html this is the test of oxida's script... the idea is exactly what i need but it does not work like it should. http://www.theidoctor.org/test2.html any suggestions? This post has been edited by jjaenagle: Jun 18 2008, 09:07 PM |
|
|
|
Jun 19 2008, 06:18 PM
Post
#7
|
|
|
Member [Level 1] ![]() ![]() ![]() ![]() Group: [HOSTED] Posts: 53 Joined: 12-June 08 From: Netherlands Member No.: 63,541 |
hmm thats weard, because I used the same way you are yousing it,
But give me some time and i will look for a fix |
|
|
|
Jun 19 2008, 06:22 PM
Post
#8
|
|
|
Super Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: Members Posts: 221 Joined: 2-August 07 From: Ontario, Canada Member No.: 47,468 |
thanx etycto that was very helpful.
|
|
|
|