php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 14-03-2005, 09:45
deklarmart
 Junior Member
Links : Onlinestatus : deklarmart ist offline
Registriert seit: Sep 2002
Ort: # my_home.php - line 213 ;-)
Beiträge: 112
deklarmart ist zur Zeit noch ein unbeschriebenes Blatt
Standard JS Mischung aus Tooltip und Contextmenü

hallo zusammen.

kann mir gar nicht vorstellen das ich generell der erste mit dieser art von wunsch bin^^...
ich möchte eine mischung aus tool-tip und context menü programmieren.

- tooltip deswegen, weil eine ebene (ich denke mal, diese müsste ich dazu nehmen)
dynamisch auf jeder position der seite eingeblendet werden sollte

- und context menü, weil diese ebene links enthalten soll.

ich habe mal eine fotomontage gemacht, damit ihr wisst was ich meine:

also es geht um eine bilder-auflistung im "windows-arbeitsplatz-stil" neben
jeder grafik möchte ich einen kleinen button haben, über den man verschiedene
aktionen für das bild auswählen kann (bearbeiten, umbenennen, löschen) etc.



problem:
ich weiß das man div-layers nur mit statischen angaben (oben links vom monitor, oder?)
positionieren kann. das bringt mir aber nichts. bzw ich hab letztens gesehn,
das man seit neustem divs mit prozenz-angaben versehen kann? ist das ne neuerung von html 4.0 oder was?^^
(hab leider schon seit mehreren jahren nicht mehr wirklich mit html gearbeitet)

überlegung:
um mich wieder bissel ins thema rein zu lesen habe ich mal bei selfhtml reingeschaut.
dort gibt es eine nette demo zum auslesen von daten/angaben von allen elementen,
die auf einer HTML seite sind. (http://de.selfhtml.org/dhtml/beispie.../dhtmltest.htm)

fragen:
1) ist es möglich auf diese weise die position von meiner kleinen grauen
grafik (die das menü öffnet) abzufangen und dann mit diesen werten die
div-ebene zu positionieren, damit sie genau an der stelle des pfeil-bildes erscheint?

2) da ich mir eigentlich ziemlich sicher bin das ich nicht der erste sein kann, der soetwas
programmieren möchte: wie nennt man diese art von menü?
die suche bei google nach "tooltip" und "contextmenü" brachte für mich keine
brauchbaren beispiele/ergebnisse.

3) ist es überhaupt (generell) möglich, mein vorhaben annähernd umzusetzen?



wäre nett, wenn jemand etwas weiß, wo man weiter suchen kann bzw wie
man sowas nennt usw.

vielen dank soweit,
gruß dek*
__________________
GLORIA PERPETUA
Mit Zitat antworten
freelancermap.de - IT Projektvermittlung für Selbständige und Freiberufler
  #2 (permalink)  
Alt 14-03-2005, 09:53
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.764
Kropff befindet sich auf einem aufstrebenden Ast
Standard

du kannst mehrere divs verschachteln, also auch mit den positionen spielen.z.b.:
PHP-Code:
<div style="width: 90%; left: 5%; height: 90%; bottom:5%; border: 1px solid #f00">
<
div style="width: 100px; left: ;10px height: auto; top:10px; border: 1px solid #00f">bla bla</div>
</
div
schau dir das mal an, dann wirst du sicher eine lösung funden (ungetestet)
peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #3 (permalink)  
Alt 14-03-2005, 10:04
asp2php
 Banned
Links : Onlinestatus : asp2php ist offline
Registriert seit: Feb 2004
Beiträge: 11.745
asp2php ist zur Zeit noch ein unbeschriebenes Blatt
Standard

http://www.walterzorn.com/tooltip/tooltip_e.htm
Mit Zitat antworten
  #4 (permalink)  
Alt 14-03-2005, 10:23
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard Re: JS Mischung aus Tooltip und Contextmenü

Zitat:
Original geschrieben von deklarmart
ich weiß das man div-layers nur mit statischen angaben (oben links vom monitor, oder?) positionieren kann.
das ist kein "wissen", sondern schlichtweg blödsinn.

Zitat:
bzw ich hab letztens gesehn, das man seit neustem divs mit prozenz-angaben versehen kann? ist das ne neuerung von html 4.0 oder was?
das hat mit HTML so gut wie gar nichts zu tun.
CSS ist das stichwort - und da möchtest du dich u.a. mit den verschiedenen möglichkeiten für position beschäftigen.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #5 (permalink)  
Alt 15-03-2005, 12:36
deklarmart
 Junior Member
Links : Onlinestatus : deklarmart ist offline
Registriert seit: Sep 2002
Ort: # my_home.php - line 213 ;-)
Beiträge: 112
deklarmart ist zur Zeit noch ein unbeschriebenes Blatt
Standard

entschuldigung! ok, das ist natürlich eine feine sache, das die positionierung
ab dem eltern-element funktioniert! hat die sache sehr vereinfacht, und ich
habs im grunde auch schon fertig.

nur eine kleinigkeit ist da noch: leider werden die eingeblendeten ebenen nicht
über die andern elemente der html seitegelegt, sondern schieben sich
irgendwie dazwischen! ich dachte erst, das hat mit dem z-index zu tun und
hab dann diverse einstellungen vorgenommen... aber das interessiert die ebene
nicht!

hier das beispiel:
http://www.zir-con.de/web-tmp/demo.html

öffnet sich die ebene, verschieben sich die anderen elemente nach unten! egal
ob ich z-index 2, 100 oder -1 angebe! woran liegt das?

html-code:
Code:
<script language="javascript">

last_id='0';

function getMenu(id) {
	if (document.getElementById('menu' + id).style.display == 'none') {
		document.getElementById('menu' + last_id).style.display = 'none';
		document.getElementById('menu' + id).style.display = '';
	} else {
		document.getElementById('menu' + id).style.display = 'none';
	}
	last_id=id;
}

</script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<br><br><div id="menu0"></div>

<div name="menubutton">
  <img src="pfeil.jpg" width="20" height="10" border="0" onclick="getMenu(1);" style="cursor: hand;">
  <div id="menu1" style="position: relative; top: 0px; width: 200px; height: 100px; z-index: -1;
    background-color: blue; display: none;">asd</div>
</div>
<br>blablabla<br><br>
<div name="menubutton">
  <img src="pfeil.jpg" width="20" height="10" border="0" onclick="getMenu(2);" style="cursor: hand;">
  <div id="menu2" style="position: relative; top: 0px; width: 200px; height: 100px; z-index: 2;
    background-color: blue; display: none;">asd</div>
</div>
<hr>
__________________
GLORIA PERPETUA

Geändert von deklarmart (16-03-2005 um 13:13 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 15-03-2005, 15:51
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Original geschrieben von deklarmart
woran liegt das?
das könnte dir vielleicht jemand sagen, der weiß, was deine funktion getMenu() macht ...
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #7 (permalink)  
Alt 16-03-2005, 12:19
deklarmart
 Junior Member
Links : Onlinestatus : deklarmart ist offline
Registriert seit: Sep 2002
Ort: # my_home.php - line 213 ;-)
Beiträge: 112
deklarmart ist zur Zeit noch ein unbeschriebenes Blatt
Standard

die funktion ändert eigentlich nur die "display" eigenschaft. ich dachte,
das es daran nicht liegen kann, daher hatte ich die weggelassen! aber
um den zusammen hang zu sehen ist es natürlich sinnvoller die auch zu
posten, sorry. hab es nachgeholt: oben steht nun auch die funktion!
__________________
GLORIA PERPETUA
Mit Zitat antworten
  #8 (permalink)  
Alt 16-03-2005, 12:56
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

und was ist display ...?

laut selfhtml: "display (Anzeigeart bzw. Nichtanzeige ohne Platzhalter)"

also wird, wenn das element ausgeblendet ist, kein platz dafür reserviert - und wenn es eingeblendet wird, nimmt sich das element den notwendigen platz.

folge: nachfolgende elemente verschieben sich nach unten.

"alternative" wäre visibility statt display - das ist nichtanzeige mit platzhalter. dann würde der platz für das element immer reserviert, auch wenn es nicht angezeigt wird.
nachfolgende elemente halten dann gleich den nötigen abstand ein - allerdings gibt das leere flächen an der stelle, wo das element nicht eingeblendet ist.


die wirkliche alternative: die tooltipps per absoluter positionierung aus dem elementfluss nehmen, so dass sie beim einblenden über display dann "über" den nachfolgenden elementen erscheinen, so dass diese sich nicht mehr verschieben.
dabei berücksichtigen, dass absolute positionierung sich durchaus relativ verhält - relativ zu den koordinaten des nächsthöheren vorfahrenelementes mit einem vom default static abweichenden wert für position.




p.s.:
Zitat:
hab es nachgeholt: oben steht nun auch die funktion!
dann bitte jetzt noch den scrollbalken beseitigen!
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #9 (permalink)  
Alt 16-03-2005, 13:25
deklarmart
 Junior Member
Links : Onlinestatus : deklarmart ist offline
Registriert seit: Sep 2002
Ort: # my_home.php - line 213 ;-)
Beiträge: 112
deklarmart ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Zitat:
Original geschrieben von wahsaga
die wirkliche alternative: die tooltipps per absoluter positionierung aus dem elementfluss nehmen, so dass sie beim einblenden über display dann "über" den nachfolgenden elementen erscheinen, so dass diese sich nicht mehr verschieben.
dabei berücksichtigen, dass absolute positionierung sich durchaus relativ verhält - relativ zu den koordinaten des nächsthöheren vorfahrenelementes mit einem vom default static abweichenden wert für position.

hm, das versteh ich nicht ganz! also ich soll die tooltip-ebenen aus dem
"element-fluss" rausnehmen, indem ich die zB gleich ALLE hinter <body> schreibe?
(also aus dem '<div name="menubutton">' rausnehmen)?

wenn ich das so mache, stimmt die positionierung ja nicht mehr, da die
tooltip-ebenen nun den body als elternelement haben und nun von oben
links aus positioniert werden. wie soll ich an die positionsdaten vom "menubutton"
kommen? oder war dein vorschlag anders gemeint?!

(ich hoffe ich hab mein problem so halbwegs verständlich ausgedrückt^^)
__________________
GLORIA PERPETUA
Mit Zitat antworten
  #10 (permalink)  
Alt 16-03-2005, 13:29
asp2php
 Banned
Links : Onlinestatus : asp2php ist offline
Registriert seit: Feb 2004
Beiträge: 11.745
asp2php ist zur Zeit noch ein unbeschriebenes Blatt
Standard

http://www.css4you.de/position.html
http://www.css4you.de/example/position_relative.html
Mit Zitat antworten
  #11 (permalink)  
Alt 16-03-2005, 13:32
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Original geschrieben von deklarmart
oder war dein vorschlag anders gemeint?!
mein vorschlag war so gemeint, wie fast immer:

lerne mit den techniken, die du verwenden willst, halbwegs sicher umzugehen - so dass du gegebene tipps auch umsetzen kannst, ohne dass man dir alles bis ins kleinste vorkauen muss.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #12 (permalink)  
Alt 16-03-2005, 14:21
deklarmart
 Junior Member
Links : Onlinestatus : deklarmart ist offline
Registriert seit: Sep 2002
Ort: # my_home.php - line 213 ;-)
Beiträge: 112
deklarmart ist zur Zeit noch ein unbeschriebenes Blatt
Standard

danke auch! mehr als selfhtml zu studieren und versuchen zu verstehen
kann ich nicht! wozu ist denn so ein forum da? ich hab halt paar fragen
zum thema ebenen und positionierung und peil das nicht zu 100 prozent!
schuldigung!

es sind ja nur kleine fehler! ich kann mir selfhtml 1000 mal durchlesen und
finde die lösung nicht! das resultiert sicherlich nicht aus dummheit, sondern
daraus, dass ich nicht die erfahrung damit habe da ich nicht den ganzen tag mit
html/css arbeite. jeder lernt das mal (gerade aus fehlern), aber halt nur wenn man ein wenig
hilfe beim suchen seiner fehler bekommt.



[...]


aber trotzdem danke für die links, ich bin dabei zu kapieren wie das alles
so ca. funktioniert. nur das problem mit der reihenfolge mit übereinander
liegenden objekten hab ich noch! ich hab mir in selfhtml übrigens auch schon
zig-mal alles zum thema "z-index" durchgelesen und ausprobiert!
selbst wenn ich in das <img src...> tag ein 'style="z-index:1"' schreibe
und die divs mit einem z-index von 3 oder so belege, ist das bild
noch on-top! waurm?!
(kann man hier sehen --> http://www.zir-con.de/web-tmp/demo.html )

Code:
<style type="text/css"><!--
.menubar {
  position: absolute;
  top: 16px;
  width: 200px;
  height: 100px;
  background-color: #efefef;
}
// --></style>
<div name="menubutton" style="position: absolute;">
  <div id="menu1" class="menubar" style="display: none;">asd</div>
  <img src="pfeil.jpg" width="20" height="10" border="0" onclick="getMenu(1);" style="cursor: hand;">
</div>
<br>blablabla<br><br>
<div name="menubutton" style="position: absolute;">
  <div id="menu2" class="menubar" style="display: none;">asd</div>
  <img src="pfeil.jpg" width="20" height="10" border="0" onclick="getMenu(2);" style="cursor: hand;">
</div><br>
<hr>
__________________
GLORIA PERPETUA
Mit Zitat antworten
  #13 (permalink)  
Alt 16-03-2005, 14:24
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Original geschrieben von deklarmart
selbst wenn ich in das <img src...> tag ein 'style="z-index:1"' schreibe
und die divs mit einem z-index von 3 oder so belege, ist das bild
noch on-top! waurm?!
(kann man hier sehen --> http://www.zir-con.de/web-tmp/demo.html )
von einem z-index kann ich da weit und breit nichts entdecken.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #14 (permalink)  
Alt 16-03-2005, 14:28
deklarmart
 Junior Member
Links : Onlinestatus : deklarmart ist offline
Registriert seit: Sep 2002
Ort: # my_home.php - line 213 ;-)
Beiträge: 112
deklarmart ist zur Zeit noch ein unbeschriebenes Blatt
Standard

hatte ich auch wieder rausgenommen, da es nicht funktioniert hat.
(EGAL wo ich es hingeschrieben habe und wie ich die ebenen geordnet
habe. das bild war wie gesagt IMMER on-top)
__________________
GLORIA PERPETUA
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

PHP Marktplatz-Software
PHP Marktplatz-SoftwareEs hat sich viel getan! Die neue Version 7.5.9 unserer PHP Marktplatz-Software ebiz-trader steht ab sofort zur Verfügung.

28.10.2019 | Berni

Die RIGID-FLEX-Technologie
Die RIGID-FLEX-TechnologieDie sogenannte "Flexible Elektronik" , oftmals auch als "Flexible Schaltungen" bezeichnet, ist eine zeitgemäße Technologie zum Montieren von elektronischen Schaltungen.

06.12.2018 | Berni


 

Aktuelle PHP Scripte

SMT

Server Monitoring & Management Tool Das SMT wurde von einem Administrator für Administratoren entwickelt, es vereinfacht den Alltag in der klassischen Administration und Verwaltung. Mit dem SMT kannst Du alle Deine Server & Dienste verwalten und überwach

04.09.2020 palle_1977 | Kategorie: PHP
numaeks Web-Farbmixer

Die RGB-Farben lassen sich hier auf unterschiedliche Weise mischen. Zur Einstellung werden auch die Dreh- und Schieberegler mit Canvas verwendet. Gespeichert werden die Farben in einem Cookie.

04.09.2020 numaek | Kategorie: JAVASCRIPT/ Tools
phplinX-Erotikportal 4 ansehen phplinX-Erotikportal 4

Erweiterbares Portal speziell für Erotik mit den Modulen Webkatalog, Bannermanagement und Kleinanzeigenmarkt. Sämtliche Module können über einen einzigen Adminbereich verwaltet werden.

18.06.2020 Cosinus14 | Kategorie: PHP/ Anzeigenmarkt
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 18:10 Uhr.