<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>blog.mogosanu.ro &#187; .html</title>
	<atom:link href="http://blog.mogosanu.ro/category/html/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.mogosanu.ro</link>
	<description>the tutorial blog</description>
	<lastBuildDate>Sat, 03 Apr 2010 07:26:32 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Go to top of Page animat cu jQuery</title>
		<link>http://blog.mogosanu.ro/css/go-to-top-of-page-animat-cu-jquery/</link>
		<comments>http://blog.mogosanu.ro/css/go-to-top-of-page-animat-cu-jquery/#comments</comments>
		<pubDate>Fri, 23 Oct 2009 16:44:54 +0000</pubDate>
		<dc:creator>bogdanmogo</dc:creator>
				<category><![CDATA[.css {}]]></category>
		<category><![CDATA[.html]]></category>
		<category><![CDATA[wordpress]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[scroller]]></category>

		<guid isPermaLink="false">http://blog.mogosanu.ro/?p=118</guid>
		<description><![CDATA[Plecand de la scriptul dezvoltat de Ariel Flesler pentru a face smooth scroll pe o pagina, am construit un plugin pentru Wordpress, care sa faca acelasi lucru.
Pluginul poate fi customizat prin intermediul paginii de administrare, unde ii putem schimba interfata .css, dar si viteza de fading sau la ce height minim sa apara.
Instalare
Descarcam arhiva pluginului [...]]]></description>
			<content:encoded><![CDATA[<p>Plecand de la scriptul dezvoltat de <a href="http://flesler.blogspot.com" target="_blank">Ariel Flesler</a> pentru a face <a href="http://flesler.blogspot.com/2007/10/jqueryscrollto.html" target="_blank">smooth scroll</a> pe o pagina, am construit un plugin pentru <a href="http://blog.mogosanu.ro/tag/wordpress/">Wordpress</a>, care sa faca acelasi lucru.</p>
<p>Pluginul poate fi customizat prin intermediul paginii de administrare, unde ii putem schimba interfata <a href="http://blog.mogosanu.ro/tag/css/">.css</a>, dar si viteza de fading sau la ce height minim sa apara.</p>
<h2>Instalare</h2>
<p>Descarcam arhiva pluginului de <a href="http://www.divshare.com/download/9021771-715" target="_blank">aici</a> si plasam fisierele in directorul <strong>/wp-contents/plugins/.</strong></p>
<p>In lista de pluginuri vom gasi item-ul &#8220;<strong>Smooth GoToTop&#8221;</strong>, care trebuie activat.</p>
<h2><img class="aligncenter size-full wp-image-130" title="plugins_list" src="http://blog.mogosanu.ro/wp-content/uploads/2009/10/plugins_list.jpg" alt="plugins_list" width="617" height="246" /></h2>
<h2>Administrare</h2>
<p>Pentru adaptarea temei pluginului la blogul tau vom folosi pagina de administrare. Pluginul se va gasi in <strong>Settings &gt; Smooth GoToTop</strong>.</p>
<p><img class="aligncenter size-full wp-image-131" title="smoothgototop" src="http://blog.mogosanu.ro/wp-content/uploads/2009/10/smoothgototop.jpg" alt="smoothgototop" width="617" height="474" />Selectarea unei teme de culori pentru text si background se poate face prin apasarea label-urilor din dreptul campurilor <strong>Text</strong> sau <strong>Background</strong>. Pentru stabilirea pozitiei pe ecran si a distantei fata de margini se folosesc campurile <strong>Position</strong> si <strong>Padding.</strong></p>
<h2>Configurarea in modul avansat</h2>
<p>Pentru a configura distanta minima dupa care sa apara butonul de GoToTop, deschidem fisierul /<strong>jquery.top.js</strong> si mergem la <strong>linia 32</strong>.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">................
$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
                   $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#top-link'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">topLink</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
&nbsp;
                       min<span style="color: #339933;">:</span> <span style="color: #CC0000;">400</span><span style="color: #339933;">,</span> <span style="color: #006600; font-style: italic;">// inaltimea minima dupa care sa apara butonul de GoToTop</span>
                       fadeSpeed<span style="color: #339933;">:</span> <span style="color: #CC0000;">500</span> <span style="color: #006600; font-style: italic;">// viteza de fading</span>
&nbsp;
                   <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
....</pre></div></div>

<p>Daca dorim sa schimbam dimensiunea fontului sau chiar fontul o putem face modificand cateva linii in fisierul /<strong>gototop.php</strong>, incepand cu <strong>linia 45</strong>.</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#top-link</span>   <span style="color: #00AA00;">&#123;</span>
&nbsp;
                   <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
                   <span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">fixed</span><span style="color: #00AA00;">;</span>
                   <span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
                   <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
                   <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">18px</span><span style="color: #00AA00;">;</span>
                   <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#000000</span><span style="color: #00AA00;">;</span>
                   <span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span> arial<span style="color: #00AA00;">;</span>
                   <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">11px</span><span style="color: #00AA00;">;</span>
                   <span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span><span style="color: #993333;">bold</span><span style="color: #00AA00;">;</span>
                   <span style="color: #000000; font-weight: bold;">text-decoration</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
                   <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#90FF00</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
&nbsp;
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<h2 style="text-align: center;"><a href="http://www.divshare.com/download/9021771-715" target="_blank">Descarca plugin</a></h2>
<p style="text-align: left;">Pluginul poate fi vazut <a title="United Music Romania" href="http://unitedmusic.ro" target="_blank">aici</a>.</p>
<p style="text-align: left;">Astept comentarii si bug-uri&#8230;.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.mogosanu.ro/css/go-to-top-of-page-animat-cu-jquery/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
	</channel>
</rss>

