Animierte navigations Tweet sprünge

WordPress update : Als sehr nützliches javascript snippet für Animierte jquery scroll navigation. Um Tweets zu Sub Seiten zu teilen oder zu twittern können wir nun die Blogurl +  #Anker verwenden. Blogpost werden gerne etwas zu lange da sie oft  ergänzt werden und eventuell als ganzes nicht von jedem gelesen werden. Um auf einen ausschnitt im blogpost sich beziehen zu können hilft dieses jquery animation.

Um einen  Tweeten zu einem SubTitel zu tweeten benötigt man eine sub url zur unter headline des Artikels ein Anker IDs auf der Seite. In diesem Fall soll gleich nach dem laden der Seite auf die entsprechenden Refernze url  hinunter gescrollt werden.

 Somit wird es wesentlich interessanter mehrfache Tweets zu einem Thema zu den Sub header des selben Posts zu versenden.  

Gleiche technik funktioniert natürlich auch für Facebook shares mit dem einen Nachteil das Sie nicht gezählt werden da FB Sie als neue Url sieht.

Markierung der Tweet Subtitel 

Die jeweiligen sprungstellen werden mit IDs im WordPress html editor gekenzeichnet z.B

<a id=”zwei” >  Hier ist der Untertitel <a>  

 Der Twitter link zum subtitel hat dan folgendes format  http://www.MeinBlog.at/TITEL#zwei

Man kann natürlich beliebig viele subtitel als Sprung Adressen einbauen 

Ein Beispiel hier am Blog für einen Tweet sprung die IDs sind mit ID=”eins”  – fünf gekenzeichnet können beliebig gewählt werden.

Social Video Livestream

Social Video Livestream

Folgendes Script kommt in den wordpress <head>  

// Scroll to ID position Ref: http://bit.ly/Resmmx
jQuery(function() {

function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).{3,4}$/,'')
.replace(/\/$/,'');
}

var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');

// Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
jQuery('a').each(function() {

// Ensure it's a same-page link
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {

// Ensure target exists
var $target = $(this.hash), target = this.hash;
if (target) {

// Find Top location of target
//var targetOffset = $target.offset().top;
var targetOffset = $target.offset().top - 140;
jQuery(this).click(function(event) {

// Prevent jump-down
event.preventDefault();

// Animate to target
jQuery(scrollElem).animate({scrollTop: targetOffset}, 1000, function() {

// Set hash in URL after animation successful
location.hash = target;

});
});
}
}

});

// Use the first element that is "scrollable" (cross-browser fix?)
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
jQueryscrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
jQueryscrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
jQueryscrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}

});

 

Parameter :

Scroll geschwindigtkeit  : 

// Animate to target  hier auf 1000

Abstand vom oberen Bild rand : 

// Find Top location of target  -140 in diesem Beispiel

Inzwischen gibt es auch ein jquery Plugin SMOTH SCROLL Ariel Flesler’s

 Ref: http://bit.ly/Resmmx   by Karl Swedberg

SAY HELLO

avatar
  Subscribe  
Notify of