Avatar

Speed Dial CSS (Features)

by Micha ⌂, Saturday, July 16, 2011, 20:50 (4639 days ago)

Hallo,

Opera (und auch andere Browser) bieten die Möglichkeit, favorisierte Websites schneller per Speed-Dial aufzurufen. In der Regel wird hierfür ein kleines Vorschaubild der Seite angezeigt. Etwas schöne wäre es ggf., wenn man die neuesten Einträge dort sehen könnte, oder?

Ich habe das mal testweise bei mir im Forum eingebaut. Nötig sind nur eine CSS und ein META-Tag im main-Template, damit das Vorschau-Fenster auch ab und zu mal nach neuen Einträgen sucht - also nicht statisch ist.

<meta http-equiv="preview-refresh" content="900" />

(Jede 1/4 Stunde soll also geprüft werden.)

Ferner habe ich eine CSS (media="(view-mode:minimized)") geschrieben, die nur noch die Site-Bar einblendet:

@charset 'utf-8';   
 
* {
 border: none;
 margin:0;
 padding:0;
}
 
#top, #content div, #content ul, #footer, #nav, #subnav, #sidebartoggle, #sidebar h3.sidebar {
 display: none;
 margin:0;
 padding:0;
}
 
html {
 color: #333;
 background: #fff;
 height: 100%;
 margin:0;
 padding:0;
 border:none;
}
 
body {
 margin:0;
 padding:0;
 border:none;
}
 
div#sidebar, div#sidebarcontent, div#latest-postings, ul#latest-postings-container {
 display: block;
 position: static;
}
 
div#sidebar  {
 margin-left: auto;
 margin-right: auto;
 
 width: 100%;
 font-size: 3.5em;
}
 
div#latest-postings h3 {
 font-size: 1em;
 text-align: center;
}
 
div#sidebarcontent, div#latest-postings, ul#latest-postings-container {
 width: 100%;
}

Was haltet Ihr (grundsätzlich) davon (http://forum.derletztekick.com/)?

Für mehr Infos: http://dev.opera.com/articles/view/opera-speed-dial-enhancements/

Gruß Micha

--
applied-geodesy.org - OpenSource Least-Squares Adjustment Software for Geodetic Sciences

Avatar

Speed Dial CSS

by Auge ⌂, Wednesday, July 27, 2011, 17:38 (4628 days ago) @ Micha

Hallo

Opera (und auch andere Browser) bieten die Möglichkeit, favorisierte Websites schneller per Speed-Dial aufzurufen. In der Regel wird hierfür ein kleines Vorschaubild der Seite angezeigt. Etwas schöne wäre es ggf., wenn man die neuesten Einträge dort sehen könnte, oder?

Ich habe das mal testweise bei mir im Forum eingebaut. Nötig sind nur eine CSS und ein META-Tag im main-Template, damit das Vorschau-Fenster auch ab und zu mal nach neuen Einträgen sucht - also nicht statisch ist.

<meta http-equiv="preview-refresh" content="900" />

(Jede 1/4 Stunde soll also geprüft werden.)

Das gilt dann aber auch für die Seite selbst, nicht nur für die Speed-Dial-Vorschau, oder? Wird das vom Opera-Browser generierte Bild eigentlich auch aktualisiert, wenn ich die Funktion offen lasse, ohne eine Seite zu laden?

Was haltet Ihr (grundsätzlich) davon (http://forum.derletztekick.com/)?

Ich hab' das mit Opera 11.50 ausprobiert. Bis auf die Darstellung (CSS) scheint es für Nutzer der Funktion gegenüber dem blanken Logo vorteilhaft, auch wenn auch nur ein Bild ausgegeben wird. Hoffentlich funktioniert das dann bei den Browsern aller Hersteller gleich. An der Stelle -zig Extrawürste zu braten, ist definitiv zu viel des Aufwands.

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!

Avatar

Speed Dial CSS

by Micha ⌂, Wednesday, July 27, 2011, 17:49 (4628 days ago) @ Auge

Hallo Auge,

Danke fürs Feedback!

<meta http-equiv="preview-refresh" content="900" />

(Jede 1/4 Stunde soll also geprüft werden.)

Das gilt dann aber auch für die Seite selbst, nicht nur für die Speed-Dial-Vorschau, oder?

Nein, der Meta-Tag gilt nur für die Speed Dial-Seite. Um Sicherzugehen, könnte er in zusätzlichen PHP-Code eingebunden werden:

if ($_SERVER['HTTP_X_PURPOSE'] == 'preview') {
    echo '<meta http-equiv="preview-refresh" content="900" />';
}

Grundsätzlich gehe ich davon aus, dass mit preview-refresh nur die Vorschau gemeint ist.

Wird das vom Opera-Browser generierte Bild eigentlich auch aktualisiert

Ja, sobald die (in meinem Fall) 900 Sekunden abgelaufen sind, wird das Bild neu geladen. Das kann man dann auch sehen, da kurz ein "Ajax"-Icon angezeigt wird.

Ich hab' das mit Opera 11.50 ausprobiert. Bis auf die Darstellung (CSS) scheint es für Nutzer der Funktion gegenüber dem blanken Logo vorteilhaft, auch wenn auch nur ein Bild ausgegeben wird.

Man könnte es mit einer Speed Dial Extension noch besser machen aber dann ist es deutlich mehr Aufwand und lohnt den Aufwand mMn. im Moment noch nicht.

An der Stelle -zig Extrawürste zu braten, ist definitiv zu viel des Aufwands.

ACK! Ich habe leider keinen Browser, der sowas auch kann. Zumindest wüsste ich nicht welchen.

Gruß Micha

--
applied-geodesy.org - OpenSource Least-Squares Adjustment Software for Geodetic Sciences

Avatar

Speed Dial CSS

by Auge ⌂, Wednesday, July 27, 2011, 19:18 (4628 days ago) @ Micha

Hallo Milo

<meta http-equiv="preview-refresh" content="900" />

(Jede 1/4 Stunde soll also geprüft werden.)

Das gilt dann aber auch für die Seite selbst, nicht nur für die Speed-Dial-Vorschau, oder?

Nein, der Meta-Tag gilt nur für die Speed Dial-Seite.

Tja, wenn man – hier: ich – richtig gucken würde, wäre das von vornherein klar gewesen (http-equiv="preview-refresh" vs. http-equiv="refresh").

... Um Sicherzugehen, könnte er in zusätzlichen PHP-Code eingebunden werden

Ich denke, das ist unnötig. Versteht der Browser den Attributwert preview-refresh nicht, ignoriert er ihn.

Grundsätzlich gehe ich davon aus, dass mit preview-refresh nur die Vorschau gemeint ist.

Wird das vom Opera-Browser generierte Bild eigentlich auch aktualisiert

Ja, sobald die (in meinem Fall) 900 Sekunden abgelaufen sind, wird das Bild neu geladen. Das kann man dann auch sehen, da kurz ein "Ajax"-Icon angezeigt wird.

So lange habe ich nicht gewartet, zumal in deinem Forum auch nicht im Minutentakt gepostet wird.

Ich hab' das mit Opera 11.50 ausprobiert. Bis auf die Darstellung (CSS) scheint es für Nutzer der Funktion gegenüber dem blanken Logo vorteilhaft, auch wenn auch nur ein Bild ausgegeben wird.

Man könnte es mit einer Speed Dial Extension noch besser machen aber dann ist es deutlich mehr Aufwand und lohnt den Aufwand mMn. im Moment noch nicht.

An der Stelle -zig Extrawürste zu braten, ist definitiv zu viel des Aufwands.

ACK! Ich habe leider keinen Browser, der sowas auch kann. Zumindest wüsste ich nicht welchen.

Im Firefox geht das über eines von mehreren Addons. Das werde ich gleich mal mit jenem antesten.

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!

Avatar

Speed Dial CSS

by Micha ⌂, Wednesday, July 27, 2011, 19:27 (4628 days ago) @ Auge

Hallo Auge,

Ich denke, das ist unnötig. Versteht der Browser den Attributwert preview-refresh nicht, ignoriert er ihn.

Ja, das denke ich auch und habe den Code direkt integriert.

So lange habe ich nicht gewartet, zumal in deinem Forum auch nicht im Minutentakt gepostet wird.

Ich hatte es vorher auf 15 Sekunden gestellt, da sah man es deutlich. Nachdem das funktionierte, habe ich den Wert angehoben. Ob 15min nun ideal sind, kann ich aber auch (noch) nicht sagen. Zumal ich die Speed Dial auch wirklich als solche benutze und diese nicht stundenlang anschaue...

Im Firefox geht das

..., wenn man einen hätte.

Das werde ich gleich mal mit jenem antesten.

Lass mich wissen, wies aussieht.

Schönen Abend
Micha

--
applied-geodesy.org - OpenSource Least-Squares Adjustment Software for Geodetic Sciences

Avatar

Speed Dial CSS

by Auge ⌂, Thursday, July 28, 2011, 02:36 (4628 days ago) @ Micha

Hallo Milo,

Im Firefox geht das

..., wenn man einen hätte.

Auch wenn man den nicht täglich benutzt, zum testen sollte er schon da sein. Oder benutzt du gar ein hyperexotisches OS, für den der nicht verfügbar ist? ;-)

Das werde ich gleich mal mit jenem antesten.

Lass mich wissen, wies aussieht.

Naja, nicht wirklich gut. Das generierte PNG ist beschissen skaliert und das CSS für die Preview wird ignoriert, also die normale Seite als Vorlage benutzt. Das mag ein anderes Addon aber anders handhaben, ich habe nur dieses eine getestet.

[image]

btw (mehr an Alex) Das Bild habe ich hier hochgeladen. Dabei ist mir etwas aufgefallen. Ich habe nach dem hochladen des Bilds zwar eine Erfolgsmeldung, aber keinen Link zur Liste der vorhandenen Bilder. Vor dem hochladen wird mir der angeboten, dann, wenn ich ihn nach dem hochladen des Bilds brauche, um mir eben jenes zum einbetten in das Posting auszuwählen, fehlt er.

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!

Avatar

Speed Dial CSS

by Micha ⌂, Thursday, July 28, 2011, 14:49 (4628 days ago) @ Auge
edited by Micha, Friday, July 29, 2011, 07:03

Hallo,

Oder benutzt du gar ein hyperexotisches OS, für den der nicht verfügbar ist? ;-)

Nein, mit win7 schwimme ich wohl mit dem Strom. Kubuntu auf meiner alten Kiste fahre ich nur hoch, wenn ich meine Java-Programme mal teste oder etwas ausprobieren will. Auch dort habe ich keinen FF installiert. Meine Lebensgefährtin nutzt FF, sodass ich dann dort immer mal kucken kann ;-)

Naja, nicht wirklich gut.

Stimmt. Ich habe noch ein zweites ausprobiert mit dem selben Effekt. Ich vermute, die Extension kann mit diesem media-Type nichts anfangen und ignoriert diesen. Er ist aber zumindest zulässig.

Gruß Micha

--
applied-geodesy.org - OpenSource Least-Squares Adjustment Software for Geodetic Sciences

Avatar

Speed Dial CSS

by Auge ⌂, Friday, July 29, 2011, 11:08 (4627 days ago) @ Micha

Hallo Milo,

Naja, nicht wirklich gut.

Stimmt. Ich habe noch ein zweites ausprobiert mit dem selben Effekt. Ich vermute, die Extension kann mit diesem media-Type nichts anfangen und ignoriert diesen. Er ist aber zumindest zulässig.

Ob der Tatsache, dass ein AddOn die Fähigkeiten des Browsers nutzt, müssen wir wohl davon ausgehen, dass letzterem die entsprechenden Fähigkeiten abgehen. :-(

Sei's drum. Mir ist bei der Betrachtung deiner Konstruktion noch etwas in den Sinn gekommen. In dem Bild würde ich gerne den Autor und die Postingzeit anstatt der Zeit, die seit dem Posting vergangen ist, angezeigt bekommen. Das ist über CSS machbar.

Als Beispiel der Link zu deinem letzten Posting in diesem Thread:

<a href="index.php?id=6048" title="Milo, 28.07.2011, 16:49 (Features)"><span class="read">Speed Dial CSS</span><br>
vor 20 Stunden, 0 Minuten</a>

Der Text vor 20 Stunden, 0 Minuten bräuchte ein eigenes span, so dass man ihn ausblenden kann, dafür wird der Inhalt des Title-Attributs angezeigt. Dafür könnte, so es nicht für andere Zwecke genutzt wird, das span.read wegfallen.

Der Aufbau des Quelltexts kommt mir an der Stelle sowieso komisch vor. Der Link wird (untypisch) auf grau ohne Unterstrich getrimmt, um dem relevanten Teil die typische Auszeichnung zurückzugeben (blaue Schriftfarbe). Warum nicht umgekehrt, so dass der atypische Teil extra benannt wird.

Als Beispiel wieder der Link zu deinem letzten Posting dieses Threads:

<a href="index.php?id=6048" title="Milo, 28.07.2011, 16:49 (Features)">Speed Dial CSS<br>
<span class="since-posting">vor 20 Stunden, 0 Minuten</span></a>


(Klassenname willkürlich gewählt)

Damit wäre der Aufbau des HTML-Quelltextes auch automatisch für meine Idee geeignet. Das ist aber eine Sache, die Alex zu entscheiden hat (von der Wichtigkeit des Features ganz zu schweigen). :-)

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!

Avatar

Speed Dial CSS

by Micha ⌂, Friday, July 29, 2011, 14:53 (4627 days ago) @ Auge

Hi Auge,

mir ging es erst einmal ums grundsätzliche. Das man es nachher noch schöner oder informativer gestalten kann, ist klar. Hierzu muss es aber erstmal den nötigen Anklang finden. Die Einstiegshürde ist gering, wenn man wenig anpassen oder ändern muss. Daran orientiert sich daher mein Beispiel.

Gruß Micha

--
applied-geodesy.org - OpenSource Least-Squares Adjustment Software for Geodetic Sciences

Avatar

Speed Dial CSS

by Auge ⌂, Friday, July 29, 2011, 16:53 (4627 days ago) @ Micha

Hallo Milo,

mir ging es erst einmal ums grundsätzliche. Das man es nachher noch schöner oder informativer gestalten kann, ist klar.

Das ist klar.

Hierzu muss es aber erstmal den nötigen Anklang finden.

Solange das nur Opera auf diese durchaus attraktive Weise unterstützt, ist es nicht weit her mit dem Anklang. Zudem beschränkt sich der Anwenderkreis, auch wenn das alle wichtigen Browser könnten, weiter auf die Leute, die Speed-Dial benutzen. Für die ist es aber eine deutliche Verbesserung zu Logo oder unlesbarer Miniansicht der normalen Seite.

Tschö, Auge

--
Trenne niemals Müll, denn er hat nur eine Silbe!

Speed Dial CSS

by afasdf, Thursday, December 08, 2011, 02:19 (4495 days ago) @ Auge

 
var Dialog = function(){
 
 // 默认参数
 this.defaults = {
  container:   null,   // string   弹处层内容的id
  isOverlay:   true,   // boolean  是否添加遮罩层
  fixed:       true,   // boolean   是否静止定位
  follow:      null,   // string/object   是否跟随自定义元素来定位
  followX:     0,    // number    相对于自定义元素的X坐标的偏移
  followY:     0,    // number    相对于自定义元素的Y坐标的偏移
  autoClose:   0,    // number    自动关闭弹出层的时间
  callback:    null   // function    关闭弹出层执行的回调函数
 };
 
};
 

RSS Feed of thread