фев 182010

Дублиране на select полета във формуляр

програмиране Няма коментари »

След написах предната статия за дублиране на input полета, се сблъсках с по-сериозен проблем – дублиране на select полета. Разбира се можех да изброя опциите от select полето в javascript-а, но това изобщо не е добра идея. Още повече, че моите полета са 5-6 с по 10тина опции и се зареждат от базата. След още малко ровене стигнах до нещо, което е по-красиво от предното:

  1. function duplicate_select(parent_id, select_id) {
  2.  var parentDiv = document.getElementById(parent_id);
  3.  var obj = document.getElementById(select_id).cloneNode(true);
  4.  parentDiv.appendChild(obj);
  5. }

Любовта ми към javascript се задълбочава…


тагове: • • • • • • • • • • •
фев 092010

Запазване на въведените данни при динамично добавяне на полета към формуляр

програмиране Няма коментари »

Когато ми се наложи да пиша javascript, обикновено гледам да свърша възможно най-бързо и да се върна на приятелска PHP-територия. Затова когато трябваше да напиша динамично добавяне на input елементи, набързо написах първото, което ми хрумна:

  1. <div id="band_container'>
  2. <div class="label">Favourite band(s):</div>
  3. <div class="text-box"><input type="text" name="bands[]" /></div>
  4. <div class="add-button"><a onclick="add_band_input();">add another</a></div>
  5. <div class="clear"></div>
  6. </div>

и съответно в js-файла:

  1. function add_band_input() {
  2.  document.getElementById("band_container").innerHTML += '<div class="label">&nbsp;</div><div class="text-box"><input type="text" name="bands[]" /></div><div class="clear"></div>';
  3. }

Проработи и забравих за него. Няколко дни по-късно забелязах, че ако въведа нещо в input полето и след това натисна линка add another, въведеното от мен изчезва. Това беше проблем. След известно проучване – главно ровене из stackoverflow.com – намерих решение:

  1. function add_band_input() {
  2.  var parentDiv = document.getElementById("band_container");
  3.  var newDiv1 = document.createElement("div");
  4.  var newDiv2 = document.createElement("div");
  5.  var newDiv3 = document.createElement("div");
  6.  newDiv1.innerHTML = '<div class="label">&nbsp;</div>';
  7.  parentDiv.appendChild(newDiv1);
  8.  newDiv2.innerHTML = '<div class="text-box"><input type="text" name="bands[]" /></div>';
  9.  parentDiv.appendChild(newDiv2);
  10.  newDiv3.innerHTML = '<div class="clear"></div>';
  11.  parentDiv.appendChild(newDiv3);
  12. }

Оказа се, че като използвам DOM, кодът е не само по-красив, но и по-стабилен. Това някак ме накара да почувствам непозната до този момент близост с javascript.


тагове: • • • • •
сеп 162009

няма document без body

програмиране Няма коментари »

за който не знае, javascript функцията document.getElementById (както предполагам и всички започващи с document) не работи, ако не сте сложили body таг на файла. демонстрация можете да видите тук: http://dchakarov.com/document.php. двата линка дават различен резултат (в единия случай функцията не работи), а кодът им се различава само с един таг. ето сорс-кода на демото:

<?php if(isset($_GET["body"])): ?>
<?php if($_GET["body"] == 1): ?>
<body>
<div id=“test_div“></div>
<script>document.getElementById(’test_div’).innerHTML=’някакво съобщение!’</script>
</body>
<?php elseif($_GET["body"] == 0): ?>
<div id=“test_div“></div>
<script>document.getElementById(’test_div’).innerHTML=’някакво съобщение!’</script>
<?php endif ?>
<?php else: ?>
<a href=“?body=0″>без body таг</a> | <a href=“?body=1″>с body таг</a>
<?php endif ?>


тагове: • •
авг 152009

галерия с jquery

програмиране 1 коментар »

за един проект ми трябваше бързо да направя галерия от снимки. собственикът на сайта много беше харесал флаш-галерията, която видял еди-къде-си. до мен поръчката достигаше през посредник, което правеше нещата доста сложни. защо ли? ами защото не знам флаш. та обясних на посредника (което не беше особено лесно), че няма как да взема готова флаш галерия и „само малко тука промени 2-3 неща“, след като никога не съм виждал сорс на флаш-приложение. все пак се помири с идеята, че няма как да стане, а и не искаше да търси човек с флаш познания (сигурно защото проектът беше „за вчера“, а хората вземат доста пари за експресни поръчки). long story short (too late for that?), започнах да пиша галерията на html/jquery. първо порових в примерите (явно не достатъчно, понеже накрая дизайнерката ми каза, че jquery-gallery-demoимало готово решение) и като не намерих нищо, запретнах виртуални ръкави.

целта на задачата беше да има една централна снимка (текущата) и отдолу в една лента да има малки версии (thumbnails) на всички останали снимки в дадената галерия/категория, като се виждат само 3-4 от тях, а останалите се появяват, като се задържи мишката над лентата – ако я задържиш над лявата част, тръгват в едната посока, над дясната – в другата. (слагам screenshot, ако някой не ме е разбрал)

като всеки проект, който ползва jquery, първата работа е да се добави библиотеката.

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

след това зареждам адресите на картинките, които ще показвам на екрана в масив $images, който изглежда примерно така:

$images = array(
  1. array("img" => "p1.jpg", "thb" => "p1_t.jpg"),
  2. array("img" => "p2.jpg", "thb" => "p2_t.jpg"),
  3. array("img" => "p3.jpg", "thb" => "p3_t.jpg"),
  4. array("img" => "p4.jpg", "thb" => "p4_t.jpg"),
  5. array("img" => "p5.jpg", "thb" => "p5_t.jpg"),
  6. array("img" => "p6.jpg", "thb" => "p6_t.jpg"),
  7. array("img" => "p7.jpg", "thb" => "p7_t.jpg"),
  8. array("img" => "p8.jpg", "thb" => "p8_t.jpg"),
  9. );

във финалната версия този блок съм го заменил с обръщение към базата-данни, от където реално „зареждам“ картинките. след тези предварителни приготовления, можем да изведем и самите картинки:

  1. <div id="main_pic_container">
  2. <div id="main_pic"><img src="<?=$images[0]['img']?/>" /></div>
  3. </div>
  4. <br /><br />
  5. <div id="ths" class="pics">
  6. < ?php foreach($images as $id => $img): ?>
  7. <img style="top:0; left:<?=$id*128?/>px;" src="< ?=$img['thb']?>" />
  8. < ?php endforeach; ?>
  9. </div>

за улеснение за основна картинка ползвам първата от масива. Continue reading »


тагове: • • • • • • • • • •
© 2009 Dimitar Chakarov | Suffusion WordPress theme
Creative Commons License
Произведението ползва условията на Криейтив Комънс договор
preload