HTML lista újrarendezése javascripttel

ScreenShot

Szép ez a kép itt bal oldalt. Nemde? Talán nem, de nem is az a lényeg, hanem a funkció. Lehet nem tűnik értelmesnek egy html listában az elemeket össze vissza mozgatni. De ha például ezekben a listákban egy űrlap szövegmezői vannak, amiknek számít a sorrendje ( tömbös megvalósítás ), akkor máris értelmét nyeri. De most a cikkben a mozgatás megvalósítására fogok koncentrálni.

JavaScript DOM manipuláló metódusokkal lehet mozgatni különböző csomópontokat szinte bárhova. De arra, hogy több lista elemet két irányba is mozgathatóvá tegyünk, két lehetőség adódna.

  • Egy függvényt írunk, ami paraméterként kapja meg a mozgatandó elem azonosítóját és a mozgási irányokat.
  • Módosítjuk HTMLLIElement osztályt. Konkrétan felveszünk moveUp() és moveDown() metódusokat a html "li" elemekhez.
  1. Osztalyneve.prototype.fuggveny = function()
  2. {
  3.      //ide a műveletek
  4. }

Én az utóbbit választottam. Előnye, hogy onnantól kezdve bármilyen lista elemet az adott listában könnyedén egy metódushívással eggyel lejjebb, vagy feljebb lehet mozgatni. A megoldásomban csak 1 lépést, de módosítható volna, hogy paraméterként átadható legyen a lépések száma. Ezt már az olvasóra bízom. Többszöri hívással is előidézhető ugyanez.

Megosztás/Mentés

Javascript karakterszámláló text inputok-hoz

Ez már egy viszonylag régen írt script, csak a napokban rájöttem, hogy ide még nem töltöttem fel. Mire is jó? Természetesen szerveroldali ellenőrzés mellett, plusz kényelmi funkcióként beépíthető ilyen számláló szöveges beviteli mezőkhöz űrlapoknál. Így a felhasználó gépelés közben is tudja, hány karaktert írhat még. Iwiw-en is ilyent lehet látni a privát üzenet küldésnél például.

A függvény ennyi lenne:

  1. function ccounter_func(msginputId,ccounter_inputId,max,addevent)
  2. {
  3.         var msginput = document.getElementById(msginputId);
  4.         var ccounter_input = document.getElementById(ccounter_inputId);
  5.         var msglen = msginput.value.length;
  6.  
  7.         ccounter_input.value = (msglen > 0) ? max - msglen : max;
  8.  
  9.         if(msglen > max) {
  10.                 alert("Üzenet max hossza: "+max);
  11.                 msginput.value = msginput.value.substring(0,max);
  12.                 ccounter_input.value=0;
  13.         }
  14.         if (addevent)
  15.         {
  16.                 msginput.onkeyup = function() { ccounter_func(msginputId,ccounter_inputId,max); }
  17.         }
  18. }
Megosztás/Mentés

A tripla F - Élet a neten: Fejlődés, Félelem és Felelőtlenség

Computer

Bizony már nem azt a világot éljük, ahol minden papír alapú volt. Amióta van számítógép és internet, azóta minden afelé tart, hogy "elonlineosodjunk". Tetszik vagy sem, de már az ismerkedés sem a régi. A kapcsolattartás a barátokkal. Nem lett még mindenki netzombi. Félreértés ne essék. De tény, hogy sokan internet nélkül már el sem tudnák képzelni az életüket. Van, amihez tényleg szükséges, mert ma már egyszerűen nincsen más módja. De van, ami csak megszokás lett. Mert egyszerűbb otthon végezni a kényelmes(!?) székünkből. Vajon mi is megváltozunk, vagy csak a technika? Ugyanúgy viselkedünk az online világban, mint a valóságban? Van-e okunk félni tőle? Mire kell vigyázni? Ezekre a kérdésekre keresem többek közt a választ ebben a posztban.

Megosztás/Mentés

HTML blink felváltása okosabb javascripttel

Kék lámpa

A blink html tag-gel lehetne villogtatni egy szöveget, de igazából csak firefox-ban működik. És csak a láthatóságot kapcsolta be illetve ki időközönként. Mint mindenre, erre is lehet manapság rengeteg megoldást találni a neten javascripttel. Írtam egyet én is, ami gyakorlatilag bármilyen CSS tulajdonságát képes váltogatni a kiválasztott elemnek. Lehet id és osztály alapján kiválasztani az elemeket. Ezen kívül, ha osztálynév alapján lett megjelölve a villogtatandó tartalom, lehet szűkíteni az elemek listáját egy adott csomópont elemeire. ID ugyebár egy oldalon egyedi kell legyen, így ott nem is lenne sok értelme csomópontra korlátozni. Illetve egy elemre több különböző "blink" is alkalmazható. Majd le is állíthatók.


Megosztás/Mentés

Skype 4.2 rendszertálcára helyezése windows 7-ben

skype logó

Skype és MSN és egyéb IM kliensek a rendszer tálcán figyelnek. Triviális. Vagy mégsem? Úgy néz ki ma már annyira mégsem. Nem tudom, ki, hogy van vele, de én jobban szeretem, ha ezek a kliensek nem foglalják az egyéb programok elöl a tálcámat. Valamikor még a régi szép időkben, emlékszem, hogy ez megoldható volt. Még windows 7-ben is. Majd egyszer csak feltűnt, hogy a régi idők elmúltak. Rákerestem a problémára, és kiderült, hogy a 4.2 -es verziótól a skype-ot már nem lehet a háttérbe helyezni a rendszer tálcára. Ami csak azért érdekes, mert így valóban a bezárás és a minimalizálás ugyanazt jelenti. És csak egy külön arra szolgáló "Skype bezárása" opcióval lehet eltüntetni, aminél még ráadásul megerősítést is kér. Nagyon kényelmes, mit ne mondjak.


Megosztás/Mentés

Kép beillesztése JTabbedPane-re

JTabbedPane 2. füle

Épp ma kérdezte valaki, hogy hogyan tud képet beilleszteni java-ban JTabbedPane egyik fülére. Nem gyakran használok mostanában Java-t, gondoltam nem lehet olyan nehéz. Utánanéztem. Megkérdeztem egy barátomat is. Keress Google a neve a fickónak. Ikonokról volt leginkább szó és amik nem arról szóltak, azokkal sem nagyon jelent meg a kép, csak pár pixelen. Mint kiderült, egy metódus hívás kellett volna csak, ahol beállítom a méreteket. Készítettem egy példa programot. Mivel a szemléltetési célon kívül értelmetlen a program, futtatható állományt nem mellékelek, csak a forráskódokat.

Megosztás/Mentés

Űrlapadatok helyes backslashelése PHP-vel

Alap, hogy ha PHP-ben SQL adatbázisba viszünk fel adatokat, akkor ha az egy űrlapról érkezik, esetleg url-ből, vagy bármi nem megbízható helyről, akkor mindenképp le kell védeni bizonyos káros karaktereket. Ezek jellemzően az idézőjelek. Ugyanis az SQL forráskódban is a karakterláncokat idézőjelek közé tesszük. Ha ellenőrzés nélkül bekerülhet egy aposztróf a szövegbe, akkor az lezárja a karakterláncot és utána sok csúnya dolgot lehet művelni, amibe nem megyek bele. Aki kíváncsi rá, írja be a google keresőbe, hogy sql injection. Na most ennek elkerülésére mysql-hez létezik a mysql_real_escape_string függvény. Nagyjából hasonló, mint az addslashes. Abban mindenesetre mindkettő közös, hogy az idézőjelek elé \ jelet tesz.

Megosztás/Mentés

Keresés és találatok kiemelése a szövegben

Kiemelő

A keresés megvalósítása még viszonylag egyszerű és kézenfekvő feladat annak, aki kicsit ért az SQL-hez. Feltéve persze, hogy a keresendő információt is SQL adatbázisban tárolja. De biztos mindenki látott már olyant, hogy a találatok ki voltak emelve valamilyen színes háttérrel. Erre írok egy nem tökéletes, de használható megoldást. Amiből már el lehet indulni egy komolyabb felé is.


A keresés még rendben van általában. De az ember szereti látni, hogy amire rákeresett, az mégis a talált szövegben hol van. Lehet persze a böngésző beépített kereső funkcióját is használni, ami firefox-ban a CTRL+F billentyű kombinációval is elérhető, de megspórolhatunk a felhasználónak ennyi többletmunkát.

Megosztás/Mentés

MySQL kis- és nagybetűk megkülönböztetése

mysql logo

Tudjuk vagy sem, de MySQL-ben a mező választott karakterkészletétől függ, hogy kereséskor egy WHERE feltételben számít-e a kis- és nagybetűk különbsége. Elsőre lehet nem tűnik fontosnak ez a kérdés. De cseppet sem mindegy, hogy egy loginrendszernél például ugyanannak számít-e Bela és bela. Ugyanakkor egy jelszónál ( amit egyébként nem nagyon szokás hashelés nélkül tárolni ) pedig fontos, hogy különbözzön 123ABC és 123aBc. Most nem tudok jobb példát mondani. De akkor milyen karakterkészletet válasszunk? Erről fogok írni pár szót.


Megosztás/Mentés

Word dokumentumok összefűzése C# -ban

MergeDoc

Gondoltam egyet, és összedobtam egy programot C# -ban, ami összefűz tetszőleges számú és formátumú word dokumentumot. Nem rég szükségem is lett volna egy ilyenre, de ehelyett egyenként tallóztam be egy új dokumentumból a beillesztendő fájlokat. Lehet, lett volna más megoldás, de már mindegy. A program futtatható exe fájlja és a forráskódja is letölthető a következő linken:



Forráskód és EXE fájl

A program fő része gyakorlatilag a következő:

  1. using System;
  2. using System.Windows.Forms;
  3. using Word = Microsoft.Office.Interop.Word;
  4.  
  5. namespace MergeDoc
  6. {
  7.     public partial class Form1 : Form
  8.     {
  9.         OpenFileDialog ofd = new OpenFileDialog();
  10.         public Form1()
  11.         {
  12.             InitializeComponent();
  13.  
  14.         }
  15.  
  16.         private void browseBtn_Click(object sender, EventArgs e)
  17.         {
  18.             ofd.Multiselect = true;
  19.             ofd.Title = "Jelöld ki az összefűzendő dokumentumokat";
  20.             String filter = "Word 93-2007 (*.doc,*.docx)|*.doc; *.docx|Word 97-2003 (*.doc)|*.doc|Word 2007 (*.docx)|*.docx";
  21.             ofd.Filter = filter;
  22.          
  23.             if (ofd.ShowDialog() == DialogResult.OK)
  24.             {
  25.                 openedDocs.Items.Clear();
  26.                 foreach (String filename in ofd.FileNames)
  27.                 {
  28.                     openedDocs.Items.Add(filename);
  29.                 }
  30.             }
  31.         }
  32.  
  33.         private void saveBtn_Click(object sender, EventArgs e)
  34.         {
  35.             Word.ApplicationClass wordApp = new Word.ApplicationClass();
  36.             object visible = false;
  37.             object doctype = Word.WdNewDocumentType.wdNewBlankDocument;
  38.             object docformat = Word.WdOriginalFormat.wdOriginalDocumentFormat;
  39.             object missing = System.Reflection.Missing.Value;
  40.  
  41.             Word.Document outdoc = wordApp.Documents.Add(missing, missing, doctype, visible);
  42.             foreach (String filename in openedDocs.Items)
  43.             {
  44.                 object file = filename;
  45.                 try
  46.                 {
  47.                     outdoc.ActiveWindow.Selection.InsertFile(filename);
  48.                 }
  49.                 catch (System.Runtime.InteropServices.COMException ex)
  50.                 {
  51.                     MessageBox.Show(ex.Message);
  52.                 }
  53.             }
  54.             try
  55.             {
  56.                 wordApp.Documents.Close();
  57.             }
  58.             catch (System.Runtime.InteropServices.COMException)
  59.             {
  60.  
  61.             }
  62.             finally
  63.             {
  64.                 wordApp.Quit();
  65.             }
  66.         }
  67.  
  68.     }
  69. }

Én nem állítom, hogy tökéletes, de a célnak megfelelt. Egy nap majd talán írok jobbat. Addig is akit érdekel, használja kedvére.

Tesztelve Microsoft Office 2007 mellett lett Windows 7 rendszerben.
A project Visual Studio 2010 -ben készült de .NET 3.5 verzióra állítva.

Megosztás/Mentés