tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
  • 1 Beitrag von javaDeveloper2011
ERLEDIGT
JA
ANTWORTEN
6
ZUGRIFFE
323
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. #1
    Asteria Asteria ist offline Mitglied Bronze
    Registriert seit
    May 2011
    Beiträge
    45
    Hallo zusammen !

    Ich brauche euch mal wieder "
    Unzwar habe ich das title-Attribut mithilfe von CSS ein
    wenig hübscher gestaltet, also farblich an meine Seite
    angepasst und mit einem border versehen.
    Nichts weltbewegendes also

    Allerdings verwende ich das Ganze vor allem
    innerhalb eines Frames... und die Hälfte des titles,
    also des Wortes, dass ich damit angezeigt haben möchte,
    verschwindet leider, wenn der Frame endet..

    Nun meine Frage.. wie bekomme ich es hin,
    dass der title von einem Frame in den nächsten
    auch überlappt und das Wort nicht einfach
    abgebrochen wird.. ?!

    Danke schonmal im Voraus !
    Und schönen Abend noch !


    PS: position: absolute; und z-index:1000; hat keinen Effekt gezeigt (
     

  2. #2
    Avatar von DrEvil
    DrEvil DrEvil ist offline Mitglied Gold
    Registriert seit
    Apr 2004
    Beiträge
    101
    Öhm. Ich würde fast sagen, dass geht nicht. Der z-Index bezieht sich ja auf die Ebenen innerhalb einer Seite. Mit dem Frame zerteilst du ja aber das Bildschirmfenster, der z-Index hat da ja gar keinen Effekt mehr.

    Musst du denn unbedingt Frames nutzen? Das sollte man ja eigentlich vermeiden - aber das wirst du bestimmt wissen.

    P.S.: Aber magst du mal bitte deine CSS posten, mich würde nämlich interessieren, wie du das title-Attribut formatiert hast. Dachte immer, das geht nicht.
     
    Auch wenn ich wüsste, dass morgen die Welt unterginge, würde ich heute noch einen Apfelbaum pflanzen. - M.L.King -

  3. #3
    Asteria Asteria ist offline Mitglied Bronze
    Registriert seit
    May 2011
    Beiträge
    45
    Das ist die Scriptfile dafür..

    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
    
    var qTipTag = "img,div,span";
    var qTipX = 0;
    var qTipY = 15;
     
    tooltip = {
      name : "qTip",
      offsetX : qTipX,
      offsetY : qTipY,
      tip : null
    }
     
    tooltip.init = function () {
            var tipNameSpaceURI = "http://www.w3.org/1999/xhtml";
            if(!tipContainerID){ var tipContainerID = "qTip";}
            var tipContainer = document.getElementById(tipContainerID);
     
            if(!tipContainer) {
              tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div");
                    tipContainer.setAttribute("id", tipContainerID);
              document.getElementsByTagName("body").item(0).appendChild(tipContainer);
            }
     
            if (!document.getElementById) return;
            this.tip = document.getElementById (this.name);
            if (this.tip) document.onmousemove = function (evt) {tooltip.move (evt)};
     
            var a, sTitle, elements;
     
            var elementList = qTipTag.split(",");
            for(var j = 0; j < elementList.length; j++)
            {
                    elements = document.getElementsByTagName(elementList[j]);
                    if(elements)
                    {
                            for (var i = 0; i < elements.length; i ++)
                            {
                                    a = elements[i];
                                    sTitle = a.getAttribute("title");
                                    if(sTitle)
                                    {
                                            a.setAttribute("tiptitle", sTitle);
                                            a.removeAttribute("title");
                                            a.removeAttribute("alt");
                                            a.onmouseover = function() {tooltip.show(this.getAttribute('tiptitle'))};
                                            a.onmouseout = function() {tooltip.hide()};
                                    }
                            }
                    }
            }
    }
     
    tooltip.move = function (evt) {
            var x=0, y=0;
            if (document.all) {//IE
                    x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
                    y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
                    x += window.event.clientX;
                    y += window.event.clientY;
     
            } else {//Good Browsers
                    x = evt.pageX;
                    y = evt.pageY;
            }
            this.tip.style.left = (x + this.offsetX) + "px";
            this.tip.style.top = (y + this.offsetY) + "px";
    }
     
    tooltip.show = function (text) {
            if (!this.tip) return;
            this.tip.innerHTML = text;
            this.tip.style.display = "block";
    }
     
    tooltip.hide = function () {
            if (!this.tip) return;
            this.tip.innerHTML = "";
            this.tip.style.display = "none";
    }
     
    window.onload = function () {
            tooltip.init ();
    }




    Und hier die CSS dazu..

    Code css:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    
    div#qTip {
     padding: 3px;
     border: 1px solid #000000;
     border-right-width: 2px;
     border-bottom-width: 2px;
     display: none;
     background: #603100;
     color: #FFFFFF;
     font: bold 0.75em Times New Roman, Georgia, Arial, Courier ;
     text-align: left;
     position: absolute;
     z-index: 1000;
    }
     
    #qTipAdd {
     color: #FFFFFF;
     font: bold 0.75em Times New Roman, Georgia, Arial, Courier ;
                     }



    Sehr ärgerlich, dass das nicht geht.. :-/
    Ich weiß zwar, dass Frames eher unglücklich sind,
    wüsste aber keine Ersatzlösung. Der Inhalt des Frames
    muss alle 30 Sekunden automatisch aktualisiert werden,
    wenn ich das ohne Frames mache, betrifft das die ganze
    Seite.. ist nicht gerade Traffic-sparend :o
    ..aber wenn du ne Idee hast für ne andere Lösung,
    würd' ich die sehr gern hören !
     

  4. #4
    Avatar von DrEvil
    DrEvil DrEvil ist offline Mitglied Gold
    Registriert seit
    Apr 2004
    Beiträge
    101
    Moin.
    Erstmal danke für die Codes - du formatierst dabei aber nicht das title-Attribut mit CSS, sondern fragst den Inhalt mittels JavaScript ab, um ihn dann in einem separaten div auszugeben. Das is nen bisschen mehr als "ich habe das title-Attribut mittels CSS ein wenig hübscher gemacht"...

    Zu deinem eigentlichen Problem:
    Wie gesagt, ich bin mir recht sicher, dass du dein Anliegen nicht lösen kannst, wenn du Frames benutzt.
    Man kann aber auch einzelne Bereiche einer Seite aktualisieren, ohne alles neu zu laden.

    Sowas kann man u.a. über JavaScript bzw. jQuery realisieren. Was man in deinem Fall jetzt genau machen müsste, hängt davon ab, was da aktualisiert werden muss.
     
    Auch wenn ich wüsste, dass morgen die Welt unterginge, würde ich heute noch einen Apfelbaum pflanzen. - M.L.King -

  5. #5
    Asteria Asteria ist offline Mitglied Bronze
    Registriert seit
    May 2011
    Beiträge
    45
    Planänderung:
    Kann ich den JavaScript vielleicht irgendwie anpassen,
    damit sobald der Tooltip den Framerahmen erreicht,
    das Wort im title-Attribut zerlegt wird,
    und in zwei Zeilen getrennt dargestellt wird?!
     

  6. #6
    Avatar von javaDeveloper2011
    javaDeveloper2011 javaDeveloper2011 ist offline Mitglied Brokat
    Registriert seit
    Feb 2011
    Beiträge
    445
    Blog-Einträge
    5
    Hallo,

    du kennst wahrscheinlich jQuery!?
    Damit lassen sich auch gestylte Tooltips wunderbar realisieren.
    zum Demo oder 2. geeignetes Plugin

    javaDerveloper2011
    Asteria bedankt sich. 

  7. #7
    Asteria Asteria ist offline Mitglied Bronze
    Registriert seit
    May 2011
    Beiträge
    45
    Super Tipp !
    Danke vielmals. So hab ich mir das vorgestellt
     

Ähnliche Themen

  1. Eintrag in ListBox an oberster Stelle
    Von Angelika_25 im Forum .NET Café
    Antworten: 7
    Letzter Beitrag: 05.06.09, 17:45
  2. Oberster DIV erweitert seinen Rand nicht.
    Von Veränderung im Forum CSS
    Antworten: 4
    Letzter Beitrag: 01.09.08, 11:17
  3. Oberster Layer + Hintergrund dunkler
    Von thespecialx im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 21.03.06, 20:36
  4. Oberster Layer + Hintergrund dunkler
    Von thespecialx im Forum CSS
    Antworten: 0
    Letzter Beitrag: 21.03.06, 19:53
  5. Antworten: 1
    Letzter Beitrag: 15.06.02, 17:48