| Autor |
Nachricht |
friederikchen
Threadersteller
Dabei seit: 26.11.2001
Ort: Burgau
Alter: 50
Geschlecht: 
|
Verfasst Mi 08.09.2010 16:53
Titel Stop im Floating Menu einbauen |
  |
|
Habe ein Riesenproblem.
Bin gerade am Programmieren einer Webseite mit einem Floating Menu am linken Rand - siehe hier: Kunden-Template.
Leider macht das Menü aber keinen Stop beim Footer.
Hier mal die Javascript:
| Code: | // JavaScript Document
<!--
var floatingMenuId = 'floatdiv';
var floatingMenu =
{
targetX: 142,
targetY: 271,
hasInner: typeof(window.innerWidth) == 'number',
hasElement: typeof(document.documentElement) == 'object'
&& typeof(document.documentElement.clientWidth) == 'number',
menu:
document.getElementById
? document.getElementById(floatingMenuId)
: document.all
? document.all[floatingMenuId]
: document.layers[floatingMenuId]
};
floatingMenu.move = function ()
{
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)
{
floatingMenu.shiftX +=
floatingMenu.hasElement
? de.clientWidth
: 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
? de.clientHeight
: document.body.clientHeight;
}
}
}
floatingMenu.calculateCornerX = function()
{
if (floatingMenu.targetX != 'center')
return floatingMenu.shiftX + floatingMenu.targetX;
var width = parseInt(floatingMenu.menu.offsetWidth);
var cornerX =
floatingMenu.hasElement
? (floatingMenu.hasInner
? pageXOffset
: document.documentElement.scrollLeft) +
(document.documentElement.clientWidth - width)/2
: document.body.scrollLeft +
(document.body.clientWidth - width)/2;
return cornerX;
};
floatingMenu.calculateCornerY = function()
{
if (floatingMenu.targetY != 'center')
return floatingMenu.shiftY + floatingMenu.targetY;
var height = parseInt(floatingMenu.menu.offsetHeight);
// Handle Opera 8 problems
var clientHeight =
floatingMenu.hasElement && floatingMenu.hasInner
&& document.documentElement.clientHeight
> window.innerHeight
? window.innerHeight
: document.documentElement.clientHeight
var cornerY =
floatingMenu.hasElement
? (floatingMenu.hasInner
? pageYOffset
: document.documentElement.scrollTop) +
(clientHeight - height)/2
: document.body.scrollTop +
(document.body.clientHeight - height)/2;
return cornerY;
};
floatingMenu.doFloat = function()
{
// Check if reference to menu was lost due
// to ajax manipuations
if (!floatingMenu.menu)
{
menu = document.getElementById
? document.getElementById(floatingMenuId)
: document.all
? document.all[floatingMenuId]
: document.layers[floatingMenuId];
initSecondary();
}
var stepX, stepY;
floatingMenu.computeShifts();
var cornerX = floatingMenu.calculateCornerX();
var stepX = (cornerX - floatingMenu.nextX) * .07;
if (Math.abs(stepX) < .5)
{
stepX = cornerX - floatingMenu.nextX;
}
var cornerY = floatingMenu.calculateCornerY();
var stepY = (cornerY - floatingMenu.nextY) * .07;
if (Math.abs(stepY) < .5)
{
stepY = cornerY - floatingMenu.nextY;
}
if (Math.abs(stepX) > 0 ||
Math.abs(stepY) > 0)
{
floatingMenu.nextX += stepX;
floatingMenu.nextY += stepY;
floatingMenu.move();
}
setTimeout('floatingMenu.doFloat()', 20);
};
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.calculateCornerX();
floatingMenu.nextY = floatingMenu.calculateCornerY();
floatingMenu.move();
}
if (document.layers)
floatingMenu.addEvent(window, 'onload', floatingMenu.init);
else
{
floatingMenu.init();
floatingMenu.addEvent(window, 'onload',
floatingMenu.initSecondary);
}
//-->
|
Kann mir jemand damit helfen? Das Floating Menu soll oberhalb dem Footer stehenbleiben. Zerbreche mir schon den ganzen Nachmittag darüber den Kopf...
Danke schon jetzt!!!
|
|
| |
   |
 |
Benutzer 95541
Account gelöscht
Ort: -
|
Verfasst Do 09.09.2010 23:38
Titel
|
|
|
|
ohne die Lösung zu kennen: auf einem kleinen Bildschirm / Netbook wird links alles unter den Menüpunkten verdeckt, vielleicht solltest du das beachten!
|
|
| |
|
|
|
Anzeige
|
|
|
DerM
Dabei seit: 18.01.2009
Ort: -
Alter: 42
Geschlecht: 
|
|
| |
|
|
friederikchen
Threadersteller
Dabei seit: 26.11.2001
Ort: Burgau
Alter: 50
Geschlecht:
|
Verfasst Mo 13.09.2010 09:47
Titel
|
|
|
Danke DerM für Deine Antwort.
Habe den Wrapper um das ganze Gerüst herumgebaut, doch leider negativ, das Floating Menu läuft trotzdem über das Ende hinaus und noch viel weiter...
Ich denke, dass man vielleicht im JavaScript eine Eingabe machen muss, doch leider bin ich echt überfragt.
Es ist zum Verzweifeln... 
|
|
| |
|
|
Net Works
Dabei seit: 11.09.2010
Ort: Neustadt
Alter: -
Geschlecht: -
|
Verfasst Di 14.09.2010 19:12
Titel
|
|
|
Huhu,
du wunderst Dich aber nicht darüber, dass wenn folgendes eintrifft:
Höhe der Box (Abstand oben + menü+Werbung) Höher als Browserfenster
--> ein Scrollbalken rechts erscheint, den man runterscrollen kann
--> Die Box wird beim runterscrollen per JS wieder soweit runtergedrückt, dass der durch CSS und JS-Konfigurierte Abstand (gehört ja zur Boxgröße) wieder eingehalten ist
--> Scrollbalken erscheint rechts, weil die Box nicht ins Fenster passt
... usw.
Ansonsten
http://www.thingsforall.de/karnatz/
Lösche ich nat. wieder sobald Problem gelöst.
Gruß
Lars
|
|
| |
|
|
Net Works
Dabei seit: 11.09.2010
Ort: Neustadt
Alter: -
Geschlecht: -
|
Verfasst Di 14.09.2010 20:59
Titel
|
|
|
Die Lösung kam mir auf dem Weg zum Abendessen - man sollte eben nicht mit leerem Magen versuchen, Probleme zu verstehen 
Ich hab das Javascript mal um die Werte
nwScrollAt = 200; // Scrollen ab
und
nwScrollMax = 400; // nicht mehr scrollen ab
erweitert.
Ausserdem beim floatdiv das top durch padding-top geändert, das ist cooler
Kannst Dir die benötigten Dateien von meinem Server herunterladen und vlt. Bescheid geben, ob Dein Problem gelöst ist.
Grüße
Lars
P.S.: OH, aber Achtung - ich habe die DW-Template Markups gelöscht, also den Quellcode von der index.html vlt nicht unbedingt für Deinen nehmen. Geänderte Dateien sind die
- script/floating.js
- css/sidebar.css
und im HTML-Code die CSS-Deklaration für #floatdiv entfernen und den Wrapper auch wieder weg
Zuletzt bearbeitet von Net Works am Di 14.09.2010 21:14, insgesamt 3-mal bearbeitet
|
|
| |
|
|
friederikchen
Threadersteller
Dabei seit: 26.11.2001
Ort: Burgau
Alter: 50
Geschlecht:
|
Verfasst Mi 15.09.2010 09:00
Titel Jetzt gehts... |
|
|
Ein dickes Dankeschön an Dich Net Works!!!
Hab die Korrekturen vorgenommen und jetzt funzt alles einwandfrei. Crossbrowsercheck ebenfalls ohne Fehler überstanden im IE, Firefox, Opera und Safari.
Nochmals vielen, vielen herzlichen Dank... 
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
css floating problem
Floating mit Javascript
Zentrieren von floating DIVs
[CSS] Floating DIV und Hintergrund anderer DIVs
Mehrere divs im einem gesamt-div und ein floating Problem
CSS Menu
|
|
Willkommen auf dem Portal für Mediengestalter
