Tohle je opravdu špatné řešení - zbytečně vytěžuješ procesor a zasekáš tím prohlížeč. Nevěřím, že nemůžeš použít setInterval.
Příspěvky odeslané z IP adresy 83.240.95.–
Skript vrácený ajaxem lze provést pomocí funkce eval(). To ovšem nedoporučuju, lepší je předat ajaxem jenom parametry a podle nich potom uzpůsobit skript.
Místo původního kódu, který vyhledává přesně zadaný řetězec, se dá jednoduše použít pseudotřída :contains.
$('td:contains(ahoj)')
Pokud chceš vyhledávat text bez ohledu na velikost písmen, tak si můžeš přidat vlastní pseudotřídu, nazvanou třeba icontains (insensitive contains).
$.expr[':'].icontains = function(a, i, m){
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
$('td:icontains(ahoj)')
Jako test abstraktního myšlení dobrý, ale hodil by se odkaz ;-). Zatím mi připadá jako nejjednodušší řešení dát vedle checkboxů místo textu komba. U nazaškrtnutého políčka bude kombo nepřístupné s defaultním textem po zaškrtnutí se kombo zpřístupní, takže si bude uživatel moct kdykoliv vybrat a nemusíš mít dva různé dialogy na jednu věc.
Kopírovat zdrojáky je sprostý a používat na tak jednoduchou věc komplexní plugin jako fancybox je zase neefektivní.
<!doctype html>
<html>
<head>
<title>
Opruz
</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
otravuj = function(url, obsah) {
$('body').app end([
'<div class="otravuj">',
' <div>',
' <a href="' + url + '">',
obsah,
' </a>',
' </div>',
'</div>'
].join('\n'));
var $otravuj = $('.otravuj');
$otravuj
.fadeIn(250)
.find('> div')
.css('top', ($(window).height() - $('> div', $otravuj).outerHeight()) / 2)
.find('> a')
.one('click', function() {
$otravuj.fadeOut(250);
});
};
$(function() {
$('input').one('click', function() {
otravuj('#', 'Vyhrál jsi milión!!!<br />Klepni sem!!!');
});
});
</script>
<style>
.otravuj {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
}
.otravuj > div {
position: relative;
margin: 0 auto;
width: 400px;
padding: 20px;
background: #ffffff;
-moz-box-shadow: 5px 5px 5px #555555;
-webkit-box-shadow: 5px 5px 5px #555555;
-o-box-shadow: 5px 5px 5px #555555;
box-shadow: 5px 5px 5px #555555;
}
.otravuj > div > a {
display: block;
padding: 10px;
text-align: center;
text-transform: uppercase;
line-height: 35px;
font-size: 20px;
font-weight: bold;
color: #ffffff;
background: #000000;
}
</style>
</head>
<body>
<input type="text" />
</body>
</html>
Zanořovat dva handlery pro událost ready do sebe nedává smysl, stejně jako parametr $ nebo vracení false. Selektor je neefektivní, prvky s id nepotřebují optimalizovat typem prvku, protože jsou unikátní. Ten kód by měl vypadat takhle:
$(function() {
$('#main-content').load('akce/adr_vypis.php');
});
Dalo by se to řešit více způsoby, třeba načítat ajaxem:
$(function() {
// Po načtení stránky načteš pole se slovy jako JSON řetězec z words.php
$.get('words.php', function(words) {
$('textarea').complete({
// a tady ho rozparsuješ zpátky do pole a předáš jako parametr funkci $.complete()
'words': $.parseJSON(words),
callback: function(words) {
...
}
});
});
...
});
V tom pluginu není ošetřený případ, kdy carousel nebude obsahovat žádnou položku. Pokud je carousel prázdný, tak by v něm měla být aspoň jedna prázdná položka:
<div class="boxPrislusenstvi">
<ul>
<li></li>
</ul>
</div>
Ovšem ideální by bylo ošetřit to přímo v pluginu:
(function($) {
$.fn.jCarouselLite = function(o) {
...
return this.each(function() {
if (!$('ul', this).length || !$('li', this).length)
return true;
...
});
};
...
})(jQuery);
Spusť to s nekomprimovanou verzí jCarouselu a pak sem dej tu hlášku znova i s verzí a číslem řádku. Taky by se hodil kód stránky - na první pohled to vypadá, že se pracuješ s prvkem, který buď neexistuje nebo se ho snažíš vybrat ještě před načtením stránky. Taky je dost možné, že máš špatnou strukturu toho carouselu, který se snažíš inicializovat. Vypisuje ti to v tom původním kódu nebo v tom upraveném?
Já bych to viděl nějak takhle:
<!doctype html>
<html>
<head>
<title>
Test
</title>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
(function($) {
$.fn.complete = function(params) {
params = $.extend({
words: [],
key: 9,
callback: $.noop
}, params);
var $area = this.keydown(function(event) {
if (event.which == params.key) {
var
value = $.trim($area.val()),
similar = [];
if (value) {
var text = value.split(' ').slice(-1)[0].toLowerCase();
$.each(params.words, function(id, word) {
if (
word.length > text.length &&
word.slice(0, text.length).toLowerCase() == text &&
$.inArray(text, similar) == -1
)
similar.push(word);
});
}
params.callback(similar.sort());
return false;
}
});
};
}(jQuery));
$(function() {
$('textarea').complete({
words: [
'Nula',
'Jedna',
'Dvě',
'Tři',
'Čtyři',
'Pět',
'Šest',
'Sedm',
'Osm',
'Devět',
'Deset',
'Jedenáct',
'Dvanáct',
'Třináct',
'Čtrnáct',
'Patnáct',
'Šestnáct',
'Sedmnáct',
'Osmnáct',
'Devatenáct',
'Dvacet'
],
callback: function(words) {
var $words = $('select').empty();
words.map(function(word) {
$words.append('<option>' + word + '</option>');
});
var $options = $('option', $words);
if ($options.length) {
$options.eq(0).attr('selected', true);
if ($options.length == 1)
$words.trigger('dblclick');
else
$words.show().focus();
}
}
});
$('select').bind({
dblclick: function() {
var
$area = $('textarea'),
$words = $('select'),
value = $.trim($area.val()),
last = value.split(' ').slice(-1)[0],
word = $words.val(),
lowerCase = $.inArray(last[0], 'aábcčdďeéfghiíjklmnňoópqrřsštťůúvwxyýzž') != -1;
word = word[0][lowerCase ? 'toLowerCase' : 'toUpperCase']() + word.slice(1);
value = value.slice(0, value.length - last.length) + word;
$area.val(value).focus();
},
keydown: function(event) {
switch(event.which) {
case 13:
$(this).trigger('dblclick');
break;
case 27:
$('textarea').focus();
break;
default:
return true;
}
return false;
},
blur: function() {
$(this).hide();
}
});
});
</script>
</head>
<style>
textarea, select {
width: 300px;
}
select {
display: none;
}
</style>
<body>
<textarea></textarea>
<br />
<select size="4"></select>
</body>
</html>
Místo selectu můžeš snadno použít nějaké vlastní menu pro výběr slov, ten select jsem tam dal pro ukázku.
Místo plácání jednoho pluginu přes druhý si to radši napiš sám a podobným problémům se vyhneš. V opačném případě je dobré hlídat, kterou verzi jQuery nebo jaké další doplňky ten který plugin vyžaduje/podporuje. Pokud plugin používá globální objekty nebo definuje nové funkce v jQuery, které jsou v konfliktu s ostatními pluginy, tak ti nezbyde než ho refaktorovat, obalit uzávěrem, atd. Vypisuje ti něco chybová konzola?
Jinak ten kód by podle mě měl vypadat takhle:
$(function() {
$(".boxPrislusenstvi").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 3,
circular: false
});
$('#slideshow').serialScroll({
items:'li',
prev:'#screen2 a.prev',
next:'#screen2 a.next',
axis:'x',
duration:500,
start: 0,
force:true,
step:1,
jump:false,
interval:false
});
$("a.fullSize").fancybox({
'hideOnContentClick': true,
'titleShow': true,
'overlayOpacity': 0.7,
'overlayColor': '#000'
});
});
I na té jiné platformě nejspíš budou všechny objekty vlastnostmi nějakého nadřazeného globální objektu, kdyžtak koukni do dokumentace.
<!doctype html>
<html>
<head>
<title>
Test
</title>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
$(function() {
$('select').change(function() {
$('input').val($(this).val());
});
});
</script>
</head>
<body>
<select>
<option>
123
</option>
<option>
456
</option>
<option>
789
</option>
</select>
<input type="text" />
</body>
</html>
Před načtením hodnot si tu označenou hodnotu ulož a po načtení ji zase nastav v callbacku.
Výhodnější by bylo využít toho, že objekt shop je vlastností objektu window:
core.mod[nazovObjektu] = window[nazovObjektu];
To se děje proto, že po odeslání formu se stránka načte znova. Aby se zobrazil posledně vybraný form i po refreshi, tak bys to musel ukládat do cookies:
// Práce s cookies
cookies = {
/**
* Nastaví cookie
*
* @param name Jméno
* @param value Hodnota
* @param expiration Počet dní pro uchování cookie(nepovinný)
*/
set: function(name, value, expiration) {
var date = new Date();
date.setDate(date.getDate() + expiration);
expiration = !expiration ? '' : ';expires=' + date.toUTCString();
document.cookie = name + '=' + escape(value) + expiration;
},
/**
* Vrací hodnotu cookie
*
* @param name Jméno
*/
get: function(name) {
if (document.cookie.length) {
var start = document.cookie.indexOf(name + '=');
if (start != -1) {
start += name.length + 1;
end = document.cookie.indexOf(';', start);
if (end == -1)
end = document.cookie.length;
return unescape(document.cookie.substring(start, end));
}
}
return null;
}
};
// Inicializace
$(function() {
$('#login')
.find('form')
.hide()
.eq(cookies.get('loginForm') || 0)
.show()
.end()
.find('.switch')
.click(function() {
var id = $(this)
.closest('form')
.slideUp()
.siblings()
.eq(0)
.slideDown()
.index();
cookies.set('loginForm', id);
return false;
});
});
To by šlo třeba nějak takhle:
<!doctype html>
<html>
<head>
<title></title>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<script
src="http://code.jquery.com/jquery-1.6.2.min.js"
type="text/javascript"
></script>
<script type="text/javascript">
$(function() {
$('#login .switch').click(function() {
$(this)
.closest('form')
.slideUp()
.siblings()
.slideDown();
return false;
});
});
</script>
<style type="text/css">
#login {
display: inline-block;
}
#login form:last-child {
display: none;
}
</style>
</head>
<body>
<div id="login">
<form>
<h2>
Register Form
</h2>
<div>
<label for="name">
Jméno:
</label>
<input
name="name"
type="text"
/>
</div>
<div>
<label for="password">
heslo:
</label>
<input
name="password"
type="text"
/>
</div>
<div>
<a
class="switch"
href="#"
>
Přepnout na Host Form
</a>
<input
type="submit"
value="Ok"
/>
</div>
</form>
<form>
<h2>
Host Form
</h2>
<div>
<label for="name">
Jméno:
</label>
<input
name="name"
type="text"
/>
</div>
<div>
<a
class="switch"
href="#"
>
Přepnout na Register Form
</a>
<input
type="submit"
value="Ok"
/>
</div>
</form>
</div>
</body>
</html>
Stylování formů jsem neřešil, to už si vygůgli .
To by bylo úplně nejlepší řešení.
Co jsem ti říkal o těch zkratkách v názvech? :-D
Jinak zjednodušeně řečeno po refreshi stránky "jedeš nanovo", proměnné se při přechodu mezi stránkami neuchovávají. Je možnost jejich hodnoty předávat v url nebo uchovávat v cookies - ty jsou dostupné i po refreshi a uchovávají se po dobu, kterou jim určíš. Vlož si do stránky tenhle jednoduchý skript na uložení/přečtení cookies:
cookies = {
/**
* Nastaví cookie
*
* @param name Jméno
* @param value Hodnota
* @param expiration Počet dní pro uchování cookie(nepovinný)
*/
set: function(name, value, expiration) {
var date = new Date();
date.setDate(date.getDate() + expiration);
expiration = !expiration ? '' : ';expires=' + date.toUTCString();
document.cookie = name + '=' + escape(value) + expiration;
},
/**
* Vrací hodnotu cookie
*
* @param name Jméno
*/
get: function(name) {
if (document.cookie.length) {
var start = document.cookie.indexOf(name + '=');
if (start != -1) {
start += name.length + 1;
end = document.cookie.indexOf(';', start);
if (end == -1)
end = document.cookie.length;
return unescape(document.cookie.substring(start, end));
}
}
return null;
}
};
Potom stačí na jedné stránce cookie uložit:
cookies.set('test', 123);
A na druhé přečíst:
alert(cookies.get('test'));
Zapisují se zdvojeně a jmenuje se to logické operátory. && znamená "a zároveň", || znamená "nebo". Jedním znakem se zapisují bitové operátory(&, |, ^), ty ale zatím k ničemu nepotřebueš.
http://www40.zippyshare.com/v/45914626/file.html
Moc jsem ti tam toho navíc nepřidával, spíš jsem to jenom zkulturnil a okomentoval. Soubor basic.css, ani obrázky jsi do toho archivu nepřibalil, takže jsem tagům img přidal atribut alt a do souboru basic.css jsem přidal základní styly, aby se s tím dalo pracovat.
Pár postřehů:
- Tabulkový layout frčel v roce 1995, pro rozmístění prvků na stránce používej prvky jako div, span, atd. Prvek table používej jenom pro tabulky.
- Atribut language u tagu script nemusíš používat.
- Na atribut style zapomeň, všechny styly zapisuj do souboru.
- Místo deseti funkcí, které jsou v podstatě stejné, stačí použít jedinou funkci s parametrem.
- Pokud na více místech v programu používáš nějaké číslo, u kterého je navíc pravděpodobné, že ho budeš v budoucnu chtít změnit - v tomhle případě třeba maximální délku textu - tak si ho ulož do proměnné a v programu jí používej místo toho čísla. Až jí budeš chtít změnit, tak to stačí udělat na jediném místě v kódu a nemusíš ho procházet celý.
- Někde jako uvozovky používáš ", jinde zase ' - vyber si jedny a ty používej všude.
- Názvy proměnných, funkcí, atd. měj buď v češtině nebo v angličtině, ale nemixuj to dohromady.
- Pro názvy nepoužívej zkratky jako zav, rovnou to pojmenuj jako zavorka.
- Dávej bacha na chybějící středníky - v některých prohlížečích ti to projde, jinde nemusí.
problém je, že není moc z čeho....samozřejmě knihy nějaké jsou, jednu mám (je tady na foru o tom diskuze), ale více mě pomohli moje otázky na všech možných programovacích forech než ta kniha...
Knihy se můžou hodit, ale nejvíc se toho naučíš vlastníma chybama a taky při vytváření programů, kde budeš muset řešit věci, se kterýma jsi ještě nepracoval. Když na ně narazíš příště, tak už je budeš umět použít nebo se podíváš do toho programu, kde jsi je použil minule. Jinak v podstatě všechno najdeš na Googlu, ale chce to dávat pozor na aktuálnost informací.
Byl bych moc rád, kdybyste se mi na to ještě jednou podíval, ale nemůže po vás chtít, abyste četl můj prasečinec
Nikdo učenej z nebe nespadl.
Každopádně já se bude té kalkulačce věnovat, dokud ji nedodělám.
Správnej přístup.
No k JQuery jsem se zatím nedostal
JQuery tam zas tolik není :-).
Jenom jsem moc nepochopil, proč jsou tam ty divy (myslím u každé řádky tlačítek)
Button je řádkový prvek, což znamená, že se skládají vedle sebe na řádek. Div je blokový prvek, což zase znamená, že každý div začíná na novém řádku. Takže jsou tam proto, aby se tlačítka rozdělila do řádků pod sebe, jako na normální kalkulačce. Kdyby tam nebyly, tak to bude jeden dlouhý řádek s tlačítky.
docela to chápu, ale nikdy bych něco takového nenapsal
Ale napsal. Taky jsem si to kdysi u spousty věcí říkal. Chce to jenom nevzdávat to a jak říkalo to hovado Lenin "Učit se, učit se, učit se".
začal jsem s JS zhruba před měsíce a zatím jsem nedokázal nic pořádného naprogramovat
Tak od někoho, kdo začal před měsícem, se nějaká mega aplikace ani neočekává. A taky v tom případě je ten můj příklad celkem přestřelený - večer kouknu i na ten tvůj původní kód a řeknu ti, co se tam dá vylepšit.
No tak s kódem pro kalkulačku na 900 řádků se asi ani nebudeme zabývat . Radši ti rovnou ukážu, jak by to podle mě mělo správně vypadat, je to na 200 řádků včetně html a komentářů. Cokoliv ti nebude jasný, tak se klidně ptej.
<!doctype html>
<html>
<head>
<title>
Kalkulačka
</title>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<script
src="http://code.jquery.com/jquery-1.6.2.min.js"
type="text/javascript"
></script>
</head>
<script type="text/javascript">
calc = {
// Skupiny tlačítek
groups: {
digit: '0123456789()',
operator: '+-*/',
dot: '.',
calculate: '=',
backspace: 'c',
reset: 'r'
},
// Zjistí, do které skupiny tlačítko patří
group: function(button) {
for (id in this.groups)
if (this.groups[id].indexOf(button) != -1)
return id;
},
// Zobrazí text na displayi nebo vrátí jeho hodnotu
display: function(text) {
if (typeof text != 'undefined')
this.$display.val(text);
else
text = this.$display.val();
return text;
},
// Přidá text na konec
add: function(button) {
var value = this.display();
if (value[0] == '=' || (this.group(button) == 'digit' && value == '0'))
value = '';
this.display(value + button);
this.last = $.trim(button);
},
// Umaže jeden znak
backspace: function() {
var value = $.trim(this.display());
if (value[0] == '=')
value = '';
else {
value = $.trim(value.slice(0, -1));
if (this.group(value[value.length - 1]) == 'operator')
value += ' ';
}
this.display(value || '0');
},
// Vynuluje display
reset: function() {
this.display('0');
},
// Provede výpočet
calculate: function() {
var value = this.display();
if (value[0] != '=')
try {
var calculation = String(eval(value));
this.display('= ' + calculation.replace('Infinity', 'nekonečno'));
}
catch(e) {
alert('Zadání nelze vypočítat.');
}
},
// Zpracování stisku tlačítka
press: function(button) {
group = this.group(button);
switch (group) {
// Čísla a závorky
case 'digit':
this.add(button);
break;
// Tečka
case 'dot':
var words = this.display().split(' ');
if (words[words.length - 1].indexOf('.') == -1)
this.add(button);
break;
// Operátory
case 'operator':
if (this.display()[0] != '=' && this.group(this.last) != 'operator')
this.add(' ' + button + ' ');
break;
// Backspace, reset, výpočet
case 'backspace':
case 'reset':
case 'calculate':
this[group]();
}
},
// inicializace
init: function() {
var self = this;
this.$display = $('#calc input');
this.reset();
// Stisknutí tlačítka
$('#calc button').click(function() {
self.press($(this).text());
});
// Obsluha kláves
$(document).keypress(function(e) {
var key = e.which;
switch (key) {
// Backspace
case 8: key = 99; break;
// Enter
case 13: key = 61;
}
self.press(String.fromCharCode(key).toLowerCase());
return false;
});
}
};
$(function() {
calc.init();
});
</script>
<style type="text/css">
#calc {
display: inline-block;
border: 1px outset #888888;
padding: 3px;
background: #DDDDDD;
}
#calc input {
width: 206px;
text-align: right;
}
#calc button {
width: 50px;
height: 50px;
}
#calc div + div {
margin-top: 4px;
}
</style>
<body>
<div id="calc">
<div>
<input
type="text"
readonly="readonly"
/>
</div>
<div>
<button>(</button>
<button>)</button>
<button>c</button>
<button>r</button>
</div>
<div>
<button>7</button>
<button>8</button>
<button>9</button>
<button>+</button>
</div>
<div>
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
</div>
<div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>*</button>
</div>
<div>
<button>0</button>
<button>.</button>
<button>=</button>
<button>/</button>
</div>
</div>
</body>
</html>
Sorry, the page (or document) you have requested is not available.
Jinak k tomu jinému řešení:
element.value += 'a';
priklad.value = priklad.value.substring(0, priklad.value.length - 1);
Zkusil jsem to v Chrome, Opeře a Firefoxu a všude to funguje. To by opravdu chtělo link na stránku nebo víc kódu.
To by mělo normálně fungovat. V jakým prohlížeči ti to dělá? Možná by se taky hodila větší ukázka kódu.
class=\"kategorie_select\"
Proč tam proboha cpeš ty lomítka?
$(".kategorie_select").children("option:selected")
Zbytečné volání funkce navíc, dá se to zapsat do selektoru:
$('.kategorie_select :selected')
$(".vyrobce_select option[value='"+vyrobce+"']")
Zkus proměnnou vyrobce ošetřit pomocí funkce $.trim() a pro výběr použít pseudotřídu :contains
$('.vyrobce_select option:contains(' + $.trim(vyrobce) + ')')
Všechny tyhle problémy za vás s přehledem vyřeší funkce eval():
var calculation = '2 * ((3 - 1) + 6 / 2)';
alert(eval(calculation));
U statické stránky s kalkulačkou je to buřt, jinak by se to hodilo ošetřit funkcí, která zkontroluje, jestli se řetězec skládá pouze z operátorů, čísel, mezer a závorek.
V případě html5 by to šlo třeba pomocí datových atributů:
js:
$('a').click(function() {
alert($(this).data('alert'));
});
html:
<a
href="stranka.html"
data-alert="test"
>
test
</a>
Pole se dá jednoduše klonovat pomocí funkce slice():
var
a = [1, 2, 3],
b = a.slice(0);
Dej tam href="#" a po klepnutí vracej false.
Nechal jsem ten odkaz projet validátorem:
Byte-Order Mark found in UTF-8 File.
Problém by mohl být v tom, že pokud je soubor uložený s BOM, tak PHP neumožní nastavit hlavičky.
Dělat kvůli IE druhou verzi webu mi nepřijde jako nejlepší řešení. Tohle vypadá, že IE nerozpozná soubor jako stránku a nabídne jeho uložení. Zkusil bych ten nápad s hlavičkou, akorát místo 'text/html' bych tam dal 'application/xhtml+xml'. Taky by mohl být problém s formátem souboru(ů) - v čem to upravuješ?
No a když už se srovnává s linuxem, tak by bylo škoda nezmínit WSH http://en.wikipedia.org/wiki/Windows_Script_Host. Ale jak už bylo řečeno, jako běžného uživatele tě neznalost příkazového řádku trápit nemusí.
lukáš: Neberte to nějak špatně, ale pod vámi bych pracovat nechtěl :-). Když dostanu úkol, ke kterému si potřebuju nastudovat něco nového, tak si čas strávený učením můžu započítat do hodin. A co se týče zapomenutého středníku - pokud dokážete napsat třeba tisíc řádků byť obyčejného textu(natož programu) bez jediného překlepu, tak jste u mě borec(v opačném případě jste dle vlastní logiky neschopný).
marpit: Za tu šablonu máš 4 body dolů. :-P
Vypadá to výborně, za mě 10/10. Akorát bych trochu upravil css:
#header p.nav-extra {
z-index: 16;
}
#header a.nav-extra {
height: 64px;
}
ul.navigation li a.fadeThis {
z-index: 0;
}
oprava:
$(function() {
$('img').each(function() {
$(this).wrap('<a href="' + $(this).attr('src') + '" rel="lightbox"></a>');
});
});
$('img').wrap('<a href="img/image-1.jpg" rel="lightbox"></a>');
Kobi: IETester je typický případ skvělého nápadu, který zabíjí neschopnost(lenost?) autora. Sám v něm někdy testuju stránky, ale když to po třetím refreshi spadne, tak to bych zabíjel.
Petr: Pokud ti nejde o IE6 a starší(většina rozumných zadavatelů už optimalizaci pro tenhle bordel nepožaduje), tak si vystačíš s IE8, v nástrojích si můžeš pohodlně přepnout na jádro IE7. Pro IE6 se mi osvědčil perfektní skript http://code.google.com/p/ie7-js/, který odstraňuje většinu problémů s vykreslováním.
$(this > ".pol_nfo > p").slideToggle("slow");
To ani fungovat nemůže, musel bys to zapsat takhle:
$(".pol_nfo > p", this).slideToggle("slow");
Čau. Tohle se dá v pohodě napsat v JS, osobně nevidím důvod, proč to dělat ve Flashi. Jinak tady máš manuál k ActionScriptu: http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3.
Pokud jsem tě správně pochopil, tak by to mohlo vypadat nějak takhle:
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html>
<head>
<meta
http-equiv = "content-type"
content = "text/html; charset = utf-8"
/>
<script
src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type = "text/javascript"
></script>
<script>
$.fn.scrollText = function(options) {
options = $.extend(
{
data: [],
delay: 3000,
speed: 250
},
options
);
var $container = $(this);
$.each(options.data, function(index, row) {
$container.append('<div>' + row + '</div>');
});
if (options.data.length < 2)
return;
setInterval(
function() {
var $row = $(':first', $container);
$row
.data({marginTop: $row.css('margin-top')})
.animate(
{marginTop: '-' + $row.outerHeight()},
{
duration: options.speed,
complete: function() {
$container.append($row.remove());
$row.css({marginTop: $row.data('marginTop')});
}
}
);
},
options.delay
);
};
$(function() {
$('.test').scrollText({
data: [
'První řádek.',
'Druhý řádek.',
'Třetí řádek.',
'Čtvrtý řádek.',
'Pátý řádek.'
]
});
});
</script>
<style>
.test {
min-width: 150px;
height: 55px;
background: #000000;
border: 3px solid #999999;
overflow: hidden;
color: #ffffff;
font-weight: bold;
text-transform: uppercase;
font-size: 18px;
text-align: center;
}
.test > div {
width: 100%;
height: 20px;
margin: 5px 5px 0;
}
</style>
</head>
<body>
<div class = "test"></div>
</body>
</html>
Oprava překlepu:
.test > div {
height: 20px;
}
Stačí trochu upravit CSS a bude to fungovat přesně tak, jak popisuješ:
.test {
height: 45px;
}
.text > div {
height: 20px;
}
No a data můžeš předat takhle:
$('.test').scrollText({
'data': data, // pole s řádky
delay: 3000 // prodleva mezi posuvy
});
Z tvojí ukázky sice nejde moc poznat, jak přesně chceš ten text posouvat, ale dalo by se to řešit třeba takhle:
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html>
<head>
<meta
http-equiv = "content-type"
content = "text/html; charset = utf-8"
/>
<script
src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type = "text/javascript"
></script>
<script>
$.fn.scrollText = function(options) {
options = $.extend(
{
data: [],
delay: 1000,
speed: 250
},
options
);
var $this = $(this);
$.each(options.data, function(index, row) {
$this.append('<div>' + row + '</div>');
});
if (options.data.length < 2)
return;
setInterval(
function() {
$(':first', $this).slideUp(
options.speed,
function() {
$this.append($(this).remove().show());
}
);
},
options.delay
);
};
$(function() {
$('.test').scrollText({
data: [
'První řádek.',
'Druhý řádek.',
'Třetí řádek.',
'Čtvrtý řádek.',
'Pátý řádek.'
]
});
});
</script>
<style>
.test {
padding: 5px;
min-width: 150px;
height: 19px;
background: #000000;
border: 3px solid #999999;
overflow: hidden;
color: #ffffff;
font-weight: bold;
text-transform: uppercase;
font-size: 18px;
text-align: center;
}
.test > div {
width: 100%;
height: 100%;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class = "test"></div>
</body>
</html>
#obsah {
width: 150px;
word-wrap: break-word;
}
word-wrap: break-word;
Mělo by to fungovat v IE a v prohlížečích, které podporují CSS3.
Čau. Já bych to viděl spíš nějak takhle:
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html>
<head>
<meta
http-equiv = "content/type"
content = "text/html; charset = utf-8"
/>
<script
src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type = "text/javascript"
></script>
<script>
$(function() {
var html = {
image:
'<div class="trida">\n' +
' <img src="obrazek" width="500" height="250" alt="" />\n' +
' <p>Lorem lipsum</p>\n' +
'</div>',
someText:
'<p>\n' +
' nejaky text\n' +
'</p>'
};
$('[class^=insert_]').click(function() {
var
options = $(this).attr('class').split('_'),
what = html[options[1]],
$where = $('#' + options[2]),
text = $where.val(),
text = text ? text + '\n' : text;
$where.val(text + what);
});
});
</script>
</head>
<body>
<textarea id = "target" rows = "15"></textarea>
<a class = "insert_image_target" href = "#">Vložit obrázek</a>
<a class = "insert_someText_target" href = "#">Vložit nějaký text</a>
</body>
</html>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html>
<head>
<meta
http-equiv = "content/type"
content = "text/html; charset = utf-8"
/>
<script
src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type = "text/javascript"
></script>
<script>
$(function() {
$('a').click(function() {
$('textarea').text(
'<html>\n' +
' <body>\n' +
' </body>\n' +
'</html>'
);
});
});
</script>
</head>
<body>
<textarea></textarea>
<a href="#">vložit</a>
</body>
</html>
neviem robiť so žiadnym grafickým programom
Tak to je zrovna u kodéra docela podstatný problém. Každý ti dá maximálně šablonu v PSD, v horším případě sloučené do jedné vrstvy třeba v png a už jsem jako předlohu dostal dokonce jpg s artefakty(8-( ). Do začátku toho nemusíš umět moc, stačí ti funkce jako výběr, ořez a pochopení práce s vrstvami v tom daném editoru. Další věc je, že používáš inline styly, to už je dneska opravdu mimo, styly radši vždycky umisťuj do zvláštního souboru. Jinak nechápu, proč používáš několik různých .css podle použitého rozlišení, velikosti fontů v procentech nebo třeba třídy pro určení unikátních prvků. Kombinace barev je taky docela divoká, i když na herním webu se to možná trochu ztratí. Je sice vidět, že princip chápeš, kód stránky taky vypadal docela logicky, ale asi to chce na sobě ještě nějakou dobu zapracovat.
Pokud chceš objekt při změně šířky opticky 'roztahovat do strany', tak se zároveň musí posouvat do leva o polovinu rozdílu mezi počáteční a konečnou šířkou:
$('div').animate(
{
width: '+=100',
left: '-=50'
},
1000
};
V tomhle případě to je asi pravda, tady to znamená ušetření pár řádků kódu. U větší stránky těch ušetřených řádků může být několik set a to už stojí za úvahu. Je to asi otázka osobních preferencí, ale já radši do stránky nalinkuju 20kB kódu navíc, když jí díky tomu budu mít hotovou za polovinu času. Samozřejmě nikomu nic nevnucuju, ovšem osobně už bych bez frameworku typu jQuery nic většího nezačínal.
Přesně tak, s jQuery by to mohlo vypadat takhle:
$('#obrazek').click(function() {
var obrazky = ['obrazek1.png', 'obrazek2.png'];
$(this).attr({src: obrazky[$('#prvek').toggle().is(':visible') ? 1 : 0]});
});
<img id = "obrazek" src = "obrazek1.png"></img>
<div id = "prvek" style = "display: none;"></div>
Samozřejmě to jde, doporučuju nastudovat jQuery funkci animate(http://api.jquery.com/animate) nebo se dá použít některý z mnoha pluginů(např.: http://tobia.github.com/CrossSlide).