Fredyy's Blog

Hi,

hier habe ich eine Codeabschnitt für euch, mit dem ihr per jQuery zu einer ausgewählten Stelle auf einer Seite scrollen könnt, ihr müsst nur eine bestimmtes Objekt auswählen und schon scrollt die Seite hoch oder runter zu dieser Stelle.

jQuery.fn.autoscroll = function(selector) {
  $('html,body').animate(
    {scrollTop: $(selector).offset().top},
    500
  );
}

//So  scrollt ihr zum Objekt mit der ID "beispiel":
$('#beispiel').autoscroll();

Sehr hilfreich, wenn man die Sprünge bei Anchor Links etwas sanfter mag

Gruß,
Fredyy

Hi,

Hier ist ein Codeschnipsel, mit dem ihr in Tweets, die ihr auf eurer Seite habt die Links für Hashtags und ähnliches verlinken könnt:

Die Funktion:

$.fn.tweetify = function() {
        this.each(function() {
                $(this).html(
                        $(this).html()
                                .replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>')
                                .replace(/(^|\s)#(\w+)/g,'$1<a href="http://search.twitter.com/search?q=%23$2">#$2</a>')
                                .replace(/(^|\s)@(\w+)/g,'$1<a href="http://twitter.com/$2">@$2</a>')
                );
        });
        return $(this);
}

Anwendung (sichtbar einfach):

$("p").tweetify();

Und so sieht dann das Ergebnis aus:

Vorher:
<p>@fredyywhv habe das Tutorial gelesen: http://www.fredyy.de/blog/2010/12/jquery-tweetify-text/ #titter</p>

Nachher:
<p><a href="http://twitter.com/fredyywhv">@fredyywhv</a> habe das Tutorial gelesen:
<a href="http://www.fredyy.de/blog/2010/12/jquery-tweetify-text/">http://www.fredyy.de/blog/2010/12/jquery-tweetify-text/</a>
<a href="http://search.twitter.com/search?q=%23twitter">#twitter</a></p>

Ich poste euch die Tage noch die PHP Version der Funktion, falls ihr das ganze schon Serverseitig erledigen wollt.

Gruß,
Fredyy

Hi,

da das früher häufig genutzte target=”_Blank” in keiner einigermaßen zeitgemäßen HTML Spezifikation vorkommt hat man häufig das Problem, dass externe Links sich im selben Fenster öffnen und der Besucher ihrer Homepage, sie ganz verlässt.

Doch danke jQuery gibt es eine Möglichkeit, ihren Quelltext valide zu lassen und trotzdem externe Links in einem neuen Fenster zu öffnen und gleichzeitig alle externen Links zu kennzeichnen.

Erklärung:
Externe Links werden automatisch mit einem target=”_blank” und der CSS-Klasse “extern” versehen. Dabei wird über einen Attribut-Selektor gefiltert, ob der Link mit dem http:// Prefix versehen ist. Zusätzlich wird über den :not – Selektor die eigene Domain von der Regel ausgenommen.

$(function () {
    $('a[href~="http://"]:not([href~="http://www.fredyy.de/"])').attr({target: "_blank"}).addClass("extern");
});

a.extern {
    padding-right: 10px;
    background: url(linkout.gif) no-repeat 100% 50%;
}

Auf meiner Homepage, wo ich Hilfe bei PC Problemen und Ähnliches anbiete könnt ihr euch das Skript in Aktion ansehen.

Gruß,
Fredyy

Hi,

Mit diesem Codeschnipsel könnt ihr z.b einen Teil eures Formulars erst einblenden, wenn eine bestimmte Checkbox angeklickt wurde.
Ich habe es gerade auf meiner Hompage für das Kontaktformular verwendet.

    <script type="text/javascript" src="jquery-latest.pack.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){

        //div mit der id "extra" versteken
       $("#extra").css("display","none");

        // beim klick auf die checkbox mit id "checkme" was machen
       $("#checkme").click(function(){

        // wenn ausgewählt
        if ($("#checkme").is(":checked"))
        {
            //das versteckte div zeigen
            $("#extra").show("fast");
        }
        else
        {
            //andernfalls verstecken
            $("#extra").hide("fast");
        }
      });

    });
     </script>