robsite

Rounded Corners - css-discuss

Lange Liste an Möglichkeiten, runde Ecken in Browsern zu bekommen.

Wird langsam mal Zeit, dass alle Browser CSS3's border-radius ohne proprietäres CSS verstehen.

· css, html ·

Ultraviolet Syntaxes

Kleine Notiz für mich, da ich das immer vergesse und es auch nicht auf Ultraviolets Website steht:

actionscript, active4d, active4d_html, active4d_ini, active4d_library, ada, antlr, apache, applescript, asp, asp_vb.net, bibtex, blog_html, blog_markdown, blog_text, blog_textile, build, bulletin_board, c++, c, cake, camlp4, cm, coldfusion, context_free, cs, css, css_experimental, csv, d, diff, dokuwiki, dot, doxygen, dylan, eiffel, erlang, f-script, fortran, fxscript, greasemonkey, gri, groovy, gtd, gtdalt, haml, haskell, html-asp, html, html_django, html_for_asp.net, html_mason, html_rails, html_tcl, icalendar, inform, ini, installer_distribution_script, io, java, javaproperties, javascript, javascript+prototype, javascript+prototype_bracketed, jquery_javascript, json, languagedefinition, latex, latex_beamer, latex_log, latex_memoir, lexflex, lighttpd, lilypond, lisp, literate_haskell, logo, logtalk, lua, m, macports_portfile, mail, makefile, man, markdown, mediawiki, mel, mips, mod_perl, modula-3, moinmoin, mootools, movable_type, multimarkdown, objective-c++, objective-c, ocaml, ocamllex, ocamlyacc, opengl, pascal, perl, php, plain_text, pmwiki, postscript, processing, prolog, property_list, python, python_django, qmake_project, qt_c++, quake3_config, r, r_console, ragel, rd_r_documentation, regexp, regular_expressions_oniguruma, regular_expressions_python, release_notes, remind, restructuredtext, rez, ruby, ruby_experimental, ruby_on_rails, s5, scheme, scilab, setext, shell-unix-generic, slate, smarty, sql, sql_rails, ssh-config, standard_ml, strings_file, subversion_commit_message, sweave, swig, tcl, template_toolkit, tex, tex_math, textile, tsv, twiki, txt2tags, vectorscript, xhtml_1.0, xml, xml_strict, xsl, yaml, yui_javascript

Das sind die verfügbaren Syntaxen in Ultraviolet. Erzeugt hiermit:

require 'rubygems'
require 'uv' 
File.open('/Users/rob/Desktop/syntaxes.txt', 'w') {|f| f.write(Uv.syntaxes.join(', '))}

Ultraviolet ist eine klasse Library zum highlighten von Syntax. Benutz ich zusammen mit tm_syntax_highlighting für die schicken Codeboxen hier im Blag. tm_syntax_highlighting wiederum liest die Farbdefinitionen von TextMate aus, wodurch der Code hier genauso chique aussieht wie in meinem Lieblingseditor. Har!

· rails, ruby, webdev ·

Pauli effect

Pauli was exceptional in this regard: it was said that he was such a good theorist that any experiments would self-destruct simply because he was in the vicinity.

· :D, wikipedia ·

Versteckte HTML-Elemente sind trotzdem markierbar + Lösung

Beim kopieren von Text aus der Wikipedia fiel mir auf, dass per display: none; versteckter Text trotzdem markiert und mitkopiert wird. Dort ists ein gutes Feature – hinter die Überschrift wird "aus Wikipedia, der freien Enzyklopädie" gepackt – aber oft nervts, wenn unsichtbares Zeug mitkopiert wird.

Firefox und IE machen das so, nur Safari/WebKit und Opera ignorieren versteckte Elemente. Beispiel:

Bitte markieren...

Versteckter Text. Wooo!

...und irgendwo reinkopieren. Z.B. hier:

<h1>Bitte markieren...</h1>
<p style="display: none;">Versteckter Text. Wooo!</p>
<h1>...und irgendwo reinkopieren. Z.B. hier:</h1>

Um das zu verhindern reicht es nicht, das Element einfach wegzuschieben:

<style type="text/css" media="screen">
  /* Bringt nix: */
  .hidden { 
      display: none;
      position: absolute;
      bottom: -1000px; /* Nach rechts unten aus dem */
      right: -1000px;  /* Browser schieben */
  }
</style>
<h1>Bitte markieren...</h1>
<p class="hidden">Versteckter Text</p>
<p>...und irgendwo reinkopieren. Z.B. hier:</p>

Es wird weiter mitkopiert... Beim markieren kommts also nicht auf die angezeigte Position im Browser sondern auf die Stelle im HTML-Code an.

Man könnte es komplett aus dem DOM löschen, aber dann würde man auch alle Events verlieren und könnte das Element danach nicht wieder sichtbar machen.

Besser ist es, wenn man nur den Inhalt löscht, damit es nix zum markieren gibt. Um ihn später wiederherstellen zu können, muss man ihn sich nur irgendwo merken. jQuery hat dazu die praktische data()-Methode, mit der man beliebige Daten an Elemente hängen kann:

$('div').data('mein key', 'meine tollen daten');
alert($('div').data('mein key')); // -> "meine tollen daten"

Das ganze als kleines jQuery-Plugin:

// Inhalt der Elemente merken, löschen und verstecken.
// So können sie nicht mehr markiert werden.
// Ersatz für hide()
$.fn.vanish = function(options) {
  $(this).data("hidden_content", $(this).html()).html("").hide();
}
// Inhalt wiederherstellen, Element anzeigen.
// Ersatz für show()
$.fn.appear = function(options) {
  $(this).html($(this).data("hidden_content")).removeData("hidden_content").show();
}

Aufruf:

$(function() {
  // Versteckt alle Elemente mit class = "hidden"
  $('.hidden').each(function(i) {
    $(this).vanish();
  })  
  // Zeigt sie nach Button-Click wieder an
  $('#show_data').click(function() {
    $('.hidden').each(function(i) {
      $(this).appear();
    })
  })          
})

Nun wird der versteckte Text nicht mitkopiert. Beispiel:

Bitte markieren...

Wirklich versteckter Text mit weiteren Elementen drin

...und irgendwo reinkopieren.

Auch wirklich versteckt


<script type="text/javascript" charset="utf-8">
  
  // Inhalt der Elemente merken, löschen und verstecken.
  // So können sie nicht mehr markiert werden.
  // Ersatz für hide()
  $.fn.vanish = function(options) {
    $(this).data("hidden_content", $(this).html()).html("").hide();
  }

  // Inhalt wiederherstellen, Element anzeigen.
  // Ersatz für show()
  $.fn.appear = function(options) {
    $(this).html($(this).data("hidden_content")).removeData("hidden_content").show();
  }

  $(function() {

    // Am Anfang alle Elemente mit class="hidden" verstecken
    $('.hidden').each(function(i) {
      $(this).vanish();
    })  
    
    // Nach Button-Click wiederherstellen und anzeigen
    $('#show_data').click(function() {
      $('.hidden').each(function(i) {
        $(this).appear();
      })
    });
           
  });  

</script>
<h1>Bitte markieren...</h1>
<p class="hidden">
  Wirklich <b>verste<i>ck</i>ter</b> Text mit
  <em style="font-weight: bold;">weiteren Elementen drin</em>
</p>
<h1>...und irgendwo reinkopieren.</h1>
<p class="hidden">Auch wirklich versteckt</p>
<button id="show_data">Show hidden data</button><br />
<textarea rows="10" cols="60"></textarea>

Vielleicht eine Lösung für ein Problem, das nicht existiert, aber ich denke es ist nützlich für Seiten mit viel verstecktem Inhalt, der nur auf Klick erscheint und beim markieren/kopieren nicht stören soll.

· css, html, javascript, webdesign ·
Mastodon