Pomagalnik » Javascript http://www.pomagalnik.com Strokovnjak za digitalne medije. Thu, 02 Feb 2012 21:54:41 +0000 en hourly 1 http://wordpress.org/?v= Pomagalnik http://www.pomagalnik.com/feed-logo.png http://www.pomagalnik.com 48 48 Pomagalnik - http://www.pomagalnik.com Tubular – celozaslonski YouTube video za ozadje strani http://www.pomagalnik.com/javascript/tubular-celozaslonski-youtube-video-za-ozadje-strani/ http://www.pomagalnik.com/javascript/tubular-celozaslonski-youtube-video-za-ozadje-strani/#comments Mon, 12 Dec 2011 20:16:01 +0000 Jiga http://www.pomagalnik.com/?p=3932

Tubular je jQuery vtičnik, ki nam omogoča namestitev YouTube videa za ozadje spletne strani.

Uporaba je precej preprosta, saj znački body pripojimo YouTube video, tako da v določeno polje vstavimo video na podlagi njegovega IDja.

Koda za umestitev:

$('body').tubular('_VKW_M_uVjw','ime_polja');

Vir in dodatne informacije: http://www.seanmccambridge.com/tubular/

]]> http://www.pomagalnik.com/javascript/tubular-celozaslonski-youtube-video-za-ozadje-strani/feed/ 1 Min/max-width CSS3 Media Queries za IE 6-8 – Respond http://www.pomagalnik.com/javascript/minmax-width-css3-media-queries-za-ie-6-8-respond/ http://www.pomagalnik.com/javascript/minmax-width-css3-media-queries-za-ie-6-8-respond/#comments Sun, 18 Sep 2011 18:06:34 +0000 Jiga http://www.pomagalnik.com/?p=3810 "CSS3 Media Queries", ki se med drugim uporabljajo tudi v "Responsive Web Design-u" imajo eno veliko pomanjkljivost, in sicer to, da ne delujejo v Internet Explorerju (IE) 6,7 ali 8.

Zato moramo v teh primerih, kjer uporabljamo "CSS3 Media Queries" in želimo podporo tudi v IE 6-8 brskalnikih  uporabiti katero izmed alternativnih metod. Ena izmed teh metod je uporaba skripte Respond, ki jo je pripravil Scott Jehl.

Respond.js je hitra in "lahka" scripta, ki doda podporo za "CSS3 Media Queries" IE 6-8 in še nekaterim drugim brskalnikom. Scripto Respond.js in dodatne informacije o slednji lahko najdete na https://github.com/scottjehl/Respond.


Vir in dodatne informacije: https://github.com/scottjehl/Respond

]]> http://www.pomagalnik.com/javascript/minmax-width-css3-media-queries-za-ie-6-8-respond/feed/ 0 jQuery mobile framework – mobilna platforma http://www.pomagalnik.com/javascript/jquery-mobile-framework-mobilna-platforma/ http://www.pomagalnik.com/javascript/jquery-mobile-framework-mobilna-platforma/#comments Mon, 30 May 2011 04:30:28 +0000 Jiga http://www.pomagalnik.com/?p=3614

jQuery mobile je na dotik optimizirano spletno ogrodje za pametne mobilne telefone in tablične računalnike (Touch-Optimized Web Framework for Smartphones & Tablets). Ponuja nam enoten uporabniški vmesnik na vseh priljubljenih mobilnih napravah oziroma njihovih platformah.

jQuery mobile temelji na jQuery-ju(http://jquery.com/) in jQuery UI-ju(http://jqueryui.com/). jQuery mobile nam tako ponuja "lahko" kodo, postopno izboljšanje (Progressive enhancement), fleksibilnost in enostavno oblikovanje vmesnika.

jQuery mobile se trenutno nahaja v verziji 1.0 Alpha 4.1 in podpira naslednje platforme: iOS, Android, BlackBerry, Bada, Windows Phone, Palm webOS, Symbian in MeeGo.

http://jquerymobile.com/

Uporabne povezave na temo jQuery mobile:

]]> http://www.pomagalnik.com/javascript/jquery-mobile-framework-mobilna-platforma/feed/ 0 Enostavno menjavanje oglasov brez osveževanja strani – InnerFade with JQuery http://www.pomagalnik.com/javascript/enostavno-menjavanje-oglasov-brez-osvezevanja-strani-innerfade-with-jquery/ http://www.pomagalnik.com/javascript/enostavno-menjavanje-oglasov-brez-osvezevanja-strani-innerfade-with-jquery/#comments Sun, 22 May 2011 20:30:13 +0000 Jiga http://www.pomagalnik.com/?p=3597 Zelo uporaben "plugin", ki temelji na jQuery JavaScript knjižnici. Namenjen je enostavnemu "mehkemu" menjavanju elementov znotraj okvirja. Te elementi so lahko vse od seznamov, slik, povezav, oglasov, div polj, ...

Predvsem pa je uporaben pri menjavanju oglasov na sami strani. Ponovna osvežitev strani za menjavo oglasa tako ni več potrebna. Primere uporabe najdete na - http://medienfreunde.com/lab/innerfade/.

Vir: http://medienfreunde.com

]]> http://www.pomagalnik.com/javascript/enostavno-menjavanje-oglasov-brez-osvezevanja-strani-innerfade-with-jquery/feed/ 0 Aktivno vnosno polje ob prihodu na stran – active input field on page load http://www.pomagalnik.com/javascript/aktivno-vnosno-polje-ob-prihodu-na-stran-active-input-field-on-page-load/ http://www.pomagalnik.com/javascript/aktivno-vnosno-polje-ob-prihodu-na-stran-active-input-field-on-page-load/#comments Wed, 02 Feb 2011 05:38:01 +0000 Jiga http://www.pomagalnik.com/?p=3317 Vsi smo se že srečali z efektom, ki ga ima Google na prvi strani ob obisku strani - aktivno vnosno polje v katerega lahko nemudoma pišemo. Slednje lahko rešimo s pomočjo JavaScripta, ki ob prihodu na stran ali njeni osvežitvi aktivira vnosno polje. Za aktiviranje uporabimo JavaScript funkcijo focus().

Primer vnosne forme

<form action="search.php" method="GET">
<input type="text" id="aktivno_polje" />
<input type="button" value="Search" />
</form>

JavaScript je potrebno umestiti v HTML značko BODY.

<body onLoad="document.getElementById('aktivno_polje').focus();">

]]> http://www.pomagalnik.com/javascript/aktivno-vnosno-polje-ob-prihodu-na-stran-active-input-field-on-page-load/feed/ 0 Kako si ogledamo izvorno kodo strani na iPadu ali iPhonu? – iPad/iPhone View Source Bookmarklet http://www.pomagalnik.com/javascript/kako-si-ogledamo-izvorno-kodo-strani-na-ipadu-ali-iphonu-ipad-iphone-view-source-bookmarklet/ http://www.pomagalnik.com/javascript/kako-si-ogledamo-izvorno-kodo-strani-na-ipadu-ali-iphonu-ipad-iphone-view-source-bookmarklet/#comments Tue, 14 Dec 2010 05:14:57 +0000 Jiga http://www.pomagalnik.com/?p=3159

»Surfanje« na iPadu je zaradi svoje enostavnosti in mobilnosti super zadeva. Velikokrat pa naletimo na kakšno zanimivost, kjer si želimo ogledati izvorno kodo strani. Tu pa zaradi pomanjkanja desnega klika in opcij, ki jih ta prinaša to ni mogoče.

Pomagati si moramo z pomožnimi rešitvami, ki so lahko v obliki različnih aplikacij ali pa v obliki javascript funkcije, ki jo zapakiramo v obliki bližnjice(Bookmarklet). Spodaj napisano kodo si enostavno skopiramo v naše bližnjice in ko želimo ogled izvorne kode strani enostavno kliknemo na bližnjico.

Koda:

javascript:(function(){
var w = window.open('about:blank'),
s = w.document;
s.write('<!DOCTYPE html><html><head><title>Source of ' + location.href + '</title><meta name="viewport" content="width=device-width" /></head><body></body></html>');
s.close();
var pre = s.body.appendChild(s.createElement("pre"));
pre.style.overflow = 'auto';
pre.style.whiteSpace = 'pre-wrap';
pre.appendChild(s.createTextNode(document.documentElement.innerHTML));
})();

Inštalacija:

  • Izberite »Add Bookmark«
  • Poimenujte »Bookmark« po svojih željah - Shranite »Bookmark«
  • Prekopirajte celotno kodo iz datoteke - izvorna-koda-strani
  • Poiščite pripravljen »Bookmark« in ga uredite(edit)
  • Zamenjajte vsebino »Bookmarka« z novo kodo.
  • Shranite »Bookmark«

izvorna-koda-strani-iPadPrimer pogleda izvirne kode strani.

Vir: http://www.ravelrumba.com/blog/ipad-view-source-bookmarklet

]]> http://www.pomagalnik.com/javascript/kako-si-ogledamo-izvorno-kodo-strani-na-ipadu-ali-iphonu-ipad-iphone-view-source-bookmarklet/feed/ 0 Kako ozadje postane povezava – clickable background link http://www.pomagalnik.com/html/kako-ozadje-postane-povezava-clickable-background-link/ http://www.pomagalnik.com/html/kako-ozadje-postane-povezava-clickable-background-link/#comments Thu, 16 Sep 2010 15:11:51 +0000 Jiga http://www.pomagalnik.com/?p=2876 Kako ozadje postane povezava - clickable background link

Zadnje čase so pri različnih oglaševalskih akcijah vse popularnejša ozadja na katere je mogoče klikniti. Sliši se dokaj enostavno, ampak pri sami izvedbi se zgodba hitro zaplete.

Namreč povezavo je narediti precej težje, kot si mislimo. Obstaja več rešitev, najenostavnejša je, da naredimo ob vsaki strani razširljiva DIV polja na katera dodelimo povezavo. Veliko bolj elegantna rešitev pa je, da imamo eno DIV polje, ki povezava nanj pa umestimo celotno našo stran.

Problem slednje rešitve je, da postane celotna vsebina povezava, se pravi kar koli kliknemo (besedilo, ozadja, ...) se odpre povezava. Zato si moramo pomagati z Javascript kodo, ki preverja kam smo kliknili. Primer rešitve si lahko ogledate tu - ozadje povezava - background link.

Primer kode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kako ozadje postane povezava - clickable background link</title>
<style type="text/css">
<!--
html,body {
height:100%;
}
#fsbg {
background-color:#a3a3a2;
width:100%;
height:100%;
display:block;
border:0;
margin:0;
padding:0;
position:absolute;
top:0;
left:0;
}
#ccdiv {
background-color:#fff;
background:#FFF;
position:static;
width:850px;
margin:0 auto;
padding:30px;
}
-->
</style>
<script type="text/javascript">
function handleClick(ev) {
ev = ev || window.event;
if(ev.stopPropagation) {
ev.stopPropagation();
} else if('cancelBubble' in ev) {
ev.cancelBubble = true;
}
}
</script>

</head>
<body>
<div id="fsbg" style="cursor: pointer;" onclick="window.open('http://www.pomagalnik.com')">
<div id="ccdiv" style="cursor:auto;" onclick="handleClick(event);">
<h1>Kako ozadje postane povezava - clickable background link</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</body>
</html>

]]> http://www.pomagalnik.com/html/kako-ozadje-postane-povezava-clickable-background-link/feed/ 1 Zadnje verzije JavaScript knjižnic na enem mestu http://www.pomagalnik.com/javascript/zadnje-verzije-javascript-knjiznic-na-enem-mestu/ http://www.pomagalnik.com/javascript/zadnje-verzije-javascript-knjiznic-na-enem-mestu/#comments Fri, 09 Jul 2010 04:07:08 +0000 Jiga http://www.pomagalnik.com/?p=2615 ScriptSrc.net ima na enem mestu na voljo zadnje verzije različnih JavaScript knjižnic. Zbiramo lahko med jQuery, swfobject, Chrome Frame, MooTools, Ext JS, YUI, Prototype, Dojo ali pa Scriptaculous.

Z enostavnim klikom na izbrano knjižnico si celotno povezavo do knjižnice shranimo, potrebno jo je samo še prilepiti. Na voljo imamo tudi kratek »info« o posamezni knjižnici.

scriptsrc.net

]]> http://www.pomagalnik.com/javascript/zadnje-verzije-javascript-knjiznic-na-enem-mestu/feed/ 0 Enostavno združevanje JavaScript datotek – JMerge http://www.pomagalnik.com/javascript/enostavno-zdruzevanje-javascript-datotek-jmerge/ http://www.pomagalnik.com/javascript/enostavno-zdruzevanje-javascript-datotek-jmerge/#comments Thu, 10 Jun 2010 23:39:58 +0000 Jiga http://www.pomagalnik.com/?p=2493 Ob vse večji pomembnosti »Web Performance Optimization-a« (WPO) oziroma hitrejšega nalaganja strani je pametno združiti vse JavaScript datoteke, ki jih spletno mesto uporablja. Tako dosežemo manj HTTP zahtev in posledično hitrejše nalaganje.

JMerge

JMerge je enostavna spletna aplikacija, ki nam združi vse JavaScript datoteke. V označeno polje enostavno vnesemo svoj URL naslov.

Aplikacija nato sama poišče vse JavaScript datoteke in jih prikaže v seznamu. S klikom na povezavo lahko datoteke enostavno odstranjujemo iz seznama. Za generiranje skupne datoteke je potrebno samo še pritisniti gumb »Combine them!«. Rezultata je skupna JavaScript datoteka.

http://demo.lateralcode.com/jmerge/

Vir: http://www.lateralcode.com/combine-javascript-jmerge/

]]> http://www.pomagalnik.com/javascript/enostavno-zdruzevanje-javascript-datotek-jmerge/feed/ 0 Kako naredimo stran občutljivo na čas? http://www.pomagalnik.com/html/kako-naredimo-stran-obcutljivo-na-cas/ http://www.pomagalnik.com/html/kako-naredimo-stran-obcutljivo-na-cas/#comments Fri, 30 Apr 2010 04:56:22 +0000 Jiga http://www.pomagalnik.com/?p=2292 dan-noc

Stran občutljivo na čas lahko naredimo na več načinov. Ogledali si bomo primer, kjer se za preverjanje časa uporablja Javascipt koda in na podlagi tega vklopi CSS datoteko s stili.

Primer kode:

<script type="text/javascript">
<!-- Begin
var datetoday = new Date();
var thehour = datetoday.getHours();

if ((thehour > 7) && (thehour < 19))
{
document.write("<link rel='stylesheet' type='text/css' href='dan.css'>");
}
else
{
document.write("<link rel='stylesheet' type='text/css' href='noc.css'>");
}
// End -->
</script>
<noscript>
<link rel="stylesheet" href="dan.css" type="text/css">
</noscript>

Opis kode:
Javascript kodo moramo dodati v glavo HTML datoteke. V prvem delu določimo spremenljivke katerim dodelimo trenuten čas. Nadaljujemo z IF zanko, kjer vklopimo določen CSS stil na podlagi ure. Če je ura večja od 7. ure in manjša od 19. ure se vklopi CSS stil »dan«. Drugače se vklopi CSS stil »noc«.
V primeru, če uporabnik nima podprtega Javasripta pa se vklopi alternativni CSS stil.

Prenesi kodo - Pomagalnik-JS_dan_noc

Ostali podobni primeri za časovno občutljivo stran:

]]> http://www.pomagalnik.com/html/kako-naredimo-stran-obcutljivo-na-cas/feed/ 0