- sziku69: Fűzzük össze a szavakat :)
- skoda12: Webshopos átverések
- GoodSpeed: iPadOS 26 A Liquid Glass varázsa
- sellerbuyer: Nem veszélytelen a RAM duplázás de vajon megéri?
- eBay-es kütyük kis pénzért
- Elektromos rásegítésű kerékpárok
- sziku69: Szólánc.
- gerner1
- pusszycat: JEYI - okos, színes, interaktív, ssd külső ház.
- Luck Dragon: Asszociációs játék. :)
Új hozzászólás Aktív témák
-
Male
nagyúr
Igazából nem értem, hogy lehetne ezzel bármi problémát is okozni. Oké, elküldheti máshová a választ, de ezzel mit ér el? Semmi olyan infó nem megy ki, amit eltérítés nélkül nem tudna megszerezni, hiszen a saját gépére menne különben
Köszi a linkeket, elolvasom, hátha abból kiderül
-
-
Lacces
őstag
és Karma, köszönöm, akkor majd megnézem a kódját. Igazság szerint a hibámra majd még várom a többiek válaszát
.Még egy kérdés, egy select tartalmát, hogyan tudom lekérdezni? (lehet az is rossz nálam)
Egyébként itt jönne egy kérdésem mindenkinek. Gondolkoztam ezen a Jquery használaton, hogy ha egy weboldalt szeretnék minden fajta eszközön megjeleníteni ( mobil, ipad, pc ), akkor én észrevettem, hogy sajnos nem mindenhol működik a jquery.
Nekem ipadem nincs, de egyik haverom mutatta, hogy ha egy dropdown féle menüszerkezetet írtam meg jquery-vel, és az az ipad-jén nem műxik...
És van erről leírás, hogy a jquery mely eszközökre érhető el? Esetleg érdemes használni az új jquery mobil könyvtárat inkább? (ez amúgy pc-s böngészökön is jól működik?) -
Jim-Y
veterán
Szerintem erre tökéletesen jól használható a JQuery autocomplete plugin. Én ezt arra használtam, hogy:
-van egy jstree az oldalon, és meg kell valósítani a keresést benne
-raktam egy input fieldet a fa fölé, ha 3 karaktert beírok, akkor egy script megnézi az adatbázisban, hogy a 3 betűhöz található e egyezés a fabeli elemekre, ha igen, akkor a találatokat egy autocomplete mezőben jeleníti meg az input field alatt.
Tehát ha beírom, hogy abb, akkor ha van abba,abbrakadabra stb a fában, akkor csak azokat listázza.Gondolom egy ilyen működés neked is jó lenne nem? A pluginnek át lehet adni egy adatszerkezetet, amit az input field alatt megjelenít.
-
Karma
félisten
Én nagy ívben kerülném, hacsak nincs konkrétan a cross-domain requestekre szükség, és a jQuery beépített támogatása nem elég... Modern böngészőkben meg semmi szükség JSONP-vel kockáztatni.
Lacces: A kódodat nem olvastam, de a funkcionalitás amit szeretnél az "autocomplete" névre hallgat, és a jQuery UI-ban van is erre beépített komponens.
-
Lacces
őstag
Sziasztok!
Van egy kis problémám, nem tudom hogyan valósítsam meg... / vagy mit rontok el.
Ötlet: Van egy input text mező, és egy select mező, amelyben értékek vannak. És egy gépelés alapján történő listázást szeretnék. (passz, hogy hívják ezt angolul)
Ha az input mezőbe elkezdek írni például: ab, akkor a select mezőbe csak az ab-val kezdődőek jelenjen meg: például Abba, abból stb.
Felmerült bennem, hogy magamtól megírom jquery-ben, egyrészt tanulni, mert már nagyon régen írtam jquery-t... Csak hát nem működik.function searchProject(){
// input text mező, bevitel. "kereső kifejezés"
var search = $('#searchProject').val();
// ez most használaton kívül, de itt nem más, mint a select mezőben lévő
// optionok values és text értékét akartam volna beolvasni.
var values = $('#projectlist>option').each(function() { return $(this).val();});
var texts = $('#projectlist>option').each(function() { return $(this).text();});
// ez egy másik módszer az option-ok beolvasására egy tömbre.
var options = $('#projectlist').attr('options');
// select mezőről készítek egy "backup"-ot
var backup = $('#projectlist').html();
// a kereső kifejezést méretének lekérdezése
var size = search.size();
if( size > 0){
// option-ok eltávolítása
$('#projectlist option').remove();
// options tömbön végig megyek
for( var index in options)
// ha a kereső kifejezés megegyezik az adott option subtextjével,
// akkor töltse fel a select mezőt.
if( search == index.text().substring(0,size) )
$('#projectlist option').append('<option value=' + index.val() +'>' + index.text() + '</option>');
}
}Miket ronthattam el? Hogyan érdemes megcsinálni? Vagy ha erre a megvalósításra egy oldalt is ajánlotok (tényleg nem jut eszembe a neve ennek... biztos valami auto..) Hadd tanuljak belőle
<input id="searchProject" type="text" onkeyup="searchProject()" />
-
#892
Male
nagyúr
Sk8erPeter
#889
Male
nagyúr
válasz
Sk8erPeter
#889
üzenetére
Ok, most tovább kellett lépnem (átmenetileg mindegy, hogy van egy ugrás), de majd visszatérek rá, aztán akkor bedobom akkor.
Addig is, ha már .getJSON a téma, erre valóban szükség van szerintetek: katt ?
-
Frigo
őstag
-
papa019
senior tag
Ha a fenti Jsont-t feldolgozó szkriptet kicserélem erre:
$.getJSON(json_file_path, function(data) {
$.each(data, function(key, val) {
var polygon, polygon_points = google.maps.geometry.encoding.decodePath(val.points);
polygon = new google.maps.polygon({
paths: polygon_points,
strokeColor: "#daa520",
strokeOpacity: 1,
strokeWeight: 1,
fillColor: "#daa520",
fillOpacity: 0.4
});
polygon.setMap(map);
});
});, akkor miért írja az alábbi hibát a firebug?
TypeError: google.maps.geometry is undefined
Ugyanebben a fájlban van a polygon lementése is, ott a
google.maps.geometry.encoding.encodePath(points)
függvényt használom és tökéletesen működik.
-
#889
Sk8erPeter
nagyúr
papa019
#887
Sk8erPeter
nagyúr
Kiadhatnál esetleg egy
header('Content-type: application/json');
fejlécet PHP-vel (lásd ezt), hogy korrekt legyen a dolog.
Bár a .getJSON() eleve JSON-ként próbálja parse-olni a kapott adatot, ha nincs vele validitási probléma, vagy nincs valami plusz elcseszett header beállítva, akkor jól kellene működnie.(#888) papa019: ja, ez így működőképes.
(#882) Male : nehéz így konkrétumot mondani kód nélkül, tök esetfüggő lehet a dolog, hogy hogyan érdemes megoldani. Ha van egy konkrét kódot, aminél elakadtál, átalakításra szorulna, esetleg megmutathatnád, felrakhatnád jsFiddle-re, ÉS AKKOR JÓL SZANASZÉJJELCINCÁLJUK ÉS SZÉTFIKÁZZUK.
Na jó, nem, szóval segítünk. 
===
(#886) Karma : hádeizéhozé
Nem kell azon a kódon semmit átalakítania, hogy tömböt kapjon JSON-ben, mert eleve azt kap, miután json_encode()-olta ilyen formátumra, ahogy látható is.
Szóval jól csinálta.
-
papa019
senior tag
Sorry a double-postért, közben azt már sikerült megoldani, hogy kiírjam egy jquery dialogba az adatokat:
function dialog_load(){
$("#get_informations").dialog({
title: 'Adatok',
width: 500,
height: 500,
modal: true,
resizable: true,
draggable: false,
show: "slide"
});
}
function load_data(){
var json_file_path = '/ajaxLoad.php';
$.getJSON(json_file_path, function(data) {
var items = [];
$('#get_informations').html("");
$.each(data, function(key, val) {
items.push('<li id="' + key + '">' + val.id + ',' + val.name + ',' + val.description + ',' + val.address + ',' + val.wikipedia + ',' + val.points + ',' + val.category + ',' + val.parent_area + ',' + val.parent_has_parent + '</li>');
});
$('<ul/>', {
'class': 'my-new-list',
html: items.join('')
}).appendTo('#get_informations');
});
}Majd át kell őket pakolni változókba és már majdnem kész is az adatok betöltése.
-
papa019
senior tag
Közben elkezdtem nézegetni a hivatalos dokumentációt.
Addig eljutottam, hogy [object Object] a kimenet, ha minden dolognak az id-jét és a nevét írom ki, lassan sikerülni fog remélhetőleg.
Már csak azt nem tudom, hogy a php-ben hogyan tudom átírni, hogy a visszaadott adat típusa json legyen és ne text/html...
-
Karma
félisten
Hat ez a callback ranezesre egy folder nevu tagban kotoraszik
At kene irnod ugy, hogy a data egy tomb (nem objektum), es abban a megfelelo dolgokat kotorod ki.Tegyel a callbackbe egy breakpointot es mindenre feny derul.
Meg hasznalj Chrome-ot, a Developer Toolst benne, es abban a Network fulet. -
papa019
senior tag
Jelenleg így generálom a JSON-t (ajaxLoad.php):
$result = $DB->prepare("SELECT * FROM places");
$result->execute();
$result->setFetchMode(PDO::FETCH_ASSOC);
while($row = $result->fetch())
{
$rows[]=$row;
}
//var_dump($rows);
echo json_encode($rows, JSON_UNESCAPED_UNICODE);A jelenlegi adatbázis alapján pontosan ezt az adatot generálja (nem tudom, hogy ez szabványos JSON formátum-e, nekem annak tűnik):
[{"id":"1","name":"a","description":"a","address":"a","wikipedia":"a","points":"","category":"62","parent_area":"7","parent_has_parent":"1"},
{"id":"2","name":"123213","description":"123123","address":"123","wikipedia":"123123","points":"","category":"70","parent_area":"0","parent_has_parent":"0"},
{"id":"4","name":"as","description":"as","address":"as","wikipedia":"as","points":"","category":"69","parent_area":"0","parent_has_parent":"1"},
{"id":"5","name":"asd","description":"asd","address":"asd","wikipedia":"asd","points":"","category":"70","parent_area":"4","parent_has_parent":"0"},
{"id":"6","name":"asfd","description":"asd","address":"sad","wikipedia":"asd","points":"","category":"70","parent_area":"4","parent_has_parent":"0"},
{"id":"7","name":"asfd","description":"asd","address":"asd","wikipedia":"sad","points":"","category":"70","parent_area":"4","parent_has_parent":"0"},
{"id":"8","name":"asfd","description":"asd","address":"asd","wikipedia":"sad","points":"","category":"62","parent_area":"4","parent_has_parent":"0"},
{"id":"9","name":"1","description":"1","address":"1","wikipedia":"1","points":"","category":"68","parent_area":"1","parent_has_parent":"0"},
{"id":"10","name":"1","description":"1","address":"1","wikipedia":"1","points":"","category":"70","parent_area":"9","parent_has_parent":"0"},
{"id":"11","name":"1","description":"1","address":"1","wikipedia":"1","points":"","category":"69","parent_area":"1","parent_has_parent":"0"},
{"id":"12","name":"1","description":"1","address":"1","wikipedia":"1","points":"","category":"69","parent_area":"9","parent_has_parent":"0"},
{"id":"13","name":"1","description":"2","address":"34","wikipedia":"4","points":"","category":"70","parent_area":"4","parent_has_parent":"1"},
{"id":"14","name":"1","description":"11","address":"1","wikipedia":"1","points":"","category":"70","parent_area":"4","parent_has_parent":"0"},
{"id":"15","name":"1","description":"11","address":"1","wikipedia":"1","points":"","category":"62","parent_area":"1","parent_has_parent":"1"},
{"id":"16","name":"","description":"","address":"","wikipedia":"","points":"","category":"70","parent_area":"1","parent_has_parent":"1"}]És jelenleg mint gyors "megoldás", megpróbáltam Sk8erPeter kolléga korábbi kódját használni a feldolgozásra (pár hónapja segített egy másik json fájl feldolgozásában):
$.getJSON(json_file_path, function(data) {
var items = [],
list_html = '';
$.each(data.folder, function(key, val) {
var list_item_actual = '',
list_inner = {};
list_item_actual += '<li id="' + id + '">' + '<u><b>' + name + '</b></u>' + '<u><b>' + description + '</b></u>' + ',<br />' + 'address: ' + address + ',<br />' + 'wikipedia: ' + wikipedia + ',<br />' + 'points: ' + points + ',<br />' + 'cat: ' + category + ',<br />' + 'parent: ' + parent_area + ',<br />' + 'par: ' + parent_has_parent + ',<br />';
list_inner = $('<ul/>', {
'id': 'my-polygon-list-' + key,
'class': 'my-polygon-list',
html: list_items_inner.join('')
});
list_item_actual += list_inner.html();
list_item_actual += '</li>';
items.push(list_item_actual);
});
list_html = $('<ul/>', {
'id': 'my-location-list',
'class': 'my-new-list',
html: items.join('')
});
$('#get_informations').html(list_html.html());
});Szinte biztos voltam benne, hogy nem fog működni itt, de azért próba szerencse alapon megpróbáltam.
-
-
#883
papa019
senior tag
Sk8erPeter
#881
papa019
senior tag
válasz
Sk8erPeter
#881
üzenetére
A getJSON() függvénnyel kapcsolatban kérdezném azt, hogy:
Egy php fájl generálja válaszként a json fájlt. A php a szerver gyökerében van, míg a js fájl a js mappában. Olyat tudok csinálni valahogy, hogy a js fájlban a Json fájl elérési útjára a könyvtárszerkezetben felette lévő könyvtárra mutatok vissza? -
#882
Male
nagyúr
Sk8erPeter
#881
Male
nagyúr
válasz
Sk8erPeter
#881
üzenetére
Igen, az nem oldja meg, ahogy látom. Végülis akkor mi lehet a megoldás? A defferred.done() megoldja, ahogy írtam (a success részre rakva, és aminél fontos, hogy az animáció lefutása után történjen csak meg, azt ennek a callbackjébe pakolva), vagy az rossz irány?
-
#881
Sk8erPeter
nagyúr
papa019
#880
Sk8erPeter
nagyúr
Szívesen!
"A !DOCTYPE nekem egyébként csak sima html-nek van beállítva."
Szóval akkor HTML5-ös a DOCTYPE.===
(#879) Male : viszont akkor az játszik, amit Karma mondott, és ebben az esetben nem biztos, hogy hasznát fogod venni a BlockUI-nak, mert úgy tűnik, alapvetően nem a felhasználói interakciókat akarod átmenetileg ellehetetleníteni. -
#880
papa019
senior tag
Sk8erPeter
#877
papa019
senior tag
válasz
Sk8erPeter
#877
üzenetére
Köszönöm szépen.
Közben egyébként átalakítottam és tettem bele <div> tageket, így már működik az accordion is. Viszont a <select> helyeken azért nem raktam <option>-öket, mert azokat php echo (ajax) segítségével illesztem be.
Ezentúl használom majd a validátort aktívan.
A !DOCTYPE nekem egyébként csak sima html-nek van beállítva. -
#879
Male
nagyúr
Sk8erPeter
#874
Male
nagyúr
válasz
Sk8erPeter
#874
üzenetére
Igen, ez lenne a lényeg, tehát ahhoz hogy jól és szépen működjön amit kitaláltam, az animációnak le kell futnia, mielőtt a success részen lévő kód beír valamit a választól függően.
(Egyébként igen, a kattintgatás teljesen mindegy, mert az animáció kezdete után már semmi nincs, amire kattintani tudna)
Köszönöm a linket, megnézegetem, kipróbálom!
-
#878
Sk8erPeter
nagyúr
Karma
#875
Sk8erPeter
nagyúr
Jaja, persze, a BlockUI alapvetően a felhasználói interakciókat "blokkolja" adott elem(ek)en belül, szóval attól még a kódok a háttérben ugyanúgy érvényre jutnak. Igazából azért linkeltem neki, mert lehet, hogy ezzel is meg tudja oldani részben a problémát (bár jobban belegondolva valószínű, hogy nem a klattyogásokat akarja elkerülni).
-
#877
Sk8erPeter
nagyúr
papa019
#876
Sk8erPeter
nagyúr
Legfőképp attól függ, hogy "hibás"-e, hogy milyen DOCTYPE-pal validálod.
Pl. az XHTML Strict 1.0-val 26 validációs hiba jön elő, ami ilyen kis mennyiségű kódnál elég sok.Felraktam ide a kódot, amit kipróbálhatsz validátorban, és ami invalid (26 hiba):
http://pastebin.com/SViFGdMjJó is, hogy pont ilyen kódot mellékeltél: érdekes megfigyelni, hogy amint a formon belüli összes tartalmat egyetlen árva <div>-be beraktam, máris a 26-ból összesen 6 hiba lett.
20-szal kevesebb hiba. Asszem ez elég bizonyíték arra, hogy pont, hogy jól jön formon belül is egy div.
Lényegében a kóddal alátámasztottad az előző mondókámat.Felraktam ide a valid változatot, 0 hibával:
http://pastebin.com/8f4sMB5pÉrdemes megnézni a változtatásokat, hogy milyen attribútumok nem léteznek, meg hogyan lehet javítani az invalid kódot. Az oldaladat meg alkalmanként érdemes validátorral ellenőrizni SZERINTEM.
Egyébként van, aki amellett kardoskodik, hogy a validációs hibákat le kell sz@rni, de ezzel nem értek egyet, mert a validációval sok hiba forrása is kiderülhet, plusz az invalid kód könnyen vezethet oda, hogy a JavaScript-kódok sem működnek helyesen, valamint sok esetben bizonyos böngészőkben (még véletlenül sem akarom említeni az IE-t) megjelenítési hibákat is okozhatnak a helytelen HTML-kódok. Nekem sokszor jött már jól, amikor ötletem nem volt már, hogy a JS-kódom miért nem működik - ráküldtem a validátort, és kiderült, hogy egy elem zárótagjét rossz helyre raktam, és ez megbolondította a kódot (ez egy eset a sok közül). -
#876
papa019
senior tag
Sk8erPeter
#872
papa019
senior tag
válasz
Sk8erPeter
#872
üzenetére
Uppsz.
Akkor félreinformáltak. A hsz-ed utolsó része egyébként érdekes számomra, mert akkor a mostani formom gondolom hibás, bár működni működik:
<div id="box_place" style="display:none;">
<p class="validateTips">Minden mezõt ki kell tölteni!</p>
<form id="add_place_form">
<label for="name">Név:</label>
<input type="text" name="name" required="required" id="name" class="text ui-widget-content ui-corner-all" />
<br />
<label for="description">Leírás</label>
<br />
<textarea name="description" required="required" id="description" value="" class="text ui-widget-content ui-corner-all" cols="50" rows="6" style="resize:none"></textarea>
<br />
<label for="address">Cím:</label>
<input type="text" name="address" required="required" id="address" value="" class="text ui-widget-content ui-corner-all" />
<br />
<label for="wikipedia">Wikipédia link:</label>
<input type="text" name="wikipedia" id="wikipedia" value="" class="text ui-widget-content ui-corner-all" />
<br />
<label for="category">Kategória:</label><br />
<select name="category" class="category" style="width:350px;" >
</select><br />
<label for="parent_area">Szülõ terület:</label><br />
<select name="parent_area" class="parent_area" style="width:350px;" >
</select>
</form>
</div> -
Karma
félisten
Azt nem lehet értelmesen megoldani, hogy semmi se történjen amíg az animációk folynak. A callbackkel nem blokkoló várakozást érsz el, tehát amíg az animálás megy, szabadon fut a JS motor. Mindössze leírhatod, hogy mi történjen amikor vége.
Egyébként ez az alapja annak, hogy láncot alakíts ki az események között - szerintem ezt szeretnéd végcélként
-, mindössze az áhított eszköz nem jó.Apropó BlockUI: ez se a szó szigorú értelmében blokkol, csak elegánsan letakarja a felületet, hogy a felhasználó ne tudjon semmire se rányomni. Ilyen megoldást lehet csinálni, de a világot leállítani nem. (És még mindig, szerintem nem is akarod azt, csak azt hiszed
) -
#874
Sk8erPeter
nagyúr
Male
#869
Sk8erPeter
nagyúr
Karma már leírta előttem a lényeget. Érdemes lenne átgondolni, hogy biztos jól közelíted-e meg a kérdést, és hogyan is tudnád elkerülni az animáció megvárását. Végső esetben muszájból meg lehet oldani az animáció bizonyos időre történő beállítását ('slow', 'fast' helyett milliszekundumban megadott időre, pl. 600), majd ennyi idő utánra időzíteni egy függvény lefutását setTimeOut()-tal, de esélyes, hogy ez nem túl szép megoldást fog eredményezni.
Akkor végül is annyi a lényeg, hogy az animáció előtt elindítasz egy AJAX-os kérést, futtatod az animációt, közben AJAX-szal pedig lehet, hogy már rég megkaptad a választ, de az animáció még mindig fut, és nem akarod, hogy ez "félbeszakadjon", mert mondjuk kicseréled az adott elemet az AJAX-os kommunikáció eredményeként kapott válasz feldolgozása során?Hátha ez segít (saját megoldások helyett javasolnám ezt inkább):
jQuery BlockUI Plugin
Próbálgasd ki a demókat! -
Male
nagyúr
Kb jól sejted, az pedig egyáltalán nem gond ebben az esetben, ha addig megfagy az oldal, hiszen addig ne is tegyen vele semmit a felhasználó.
Most ezt komolyan nem is lehet megoldani?
(A deferred.done()-t meg tudom hívni a success részen, és ha az oda szánt részt a deferred.done() callbackjébe teszem, akkor végülis elértem a "szinkronitást", amit akartam, hiszen a successbe szánt rész csak akkor fut le, amikor az animáció már végzett. Már ha jól értem a működését.)
-
#872
Sk8erPeter
nagyúr
papa019
#871
Sk8erPeter
nagyúr
"de ha jól tudom, akkor formokban nem lehet a html kódban div."
Ezt kitől hallottad? Ez egy nagyon téves információ! Az elég durva lenne, ha nem lehetne <div> a formon belül.
Mutatok egy példát, próbáld ki, hogy ezt validálod itt:http://validator.w3.org/#validate_by_input
XHTML 1.0 Strict valid dokumentum:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="hu" xml:lang="hu">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Blabla</title>
</head>
<body>
<form action="">
<div>
<div> blablabla
</div>
<div>
<input type="text" />
</div>
<div> blablabla
</div>
</div>
</form>
</body>
</html>Látható, hogy több divet is beleraktam a formba, az eredmény mégis "This document was successfully checked as XHTML 1.0 Strict!". Pedig az XHTML 1.0 Strict elég kényes bármiféle validációs hibára.
A lényeg tehát az, hogy semmi baj nincs a dives felosztással! Használd nyugodtan, formon belül is. Sőt! Amennyiben nem raksz a <form>-on belülre egy "wrappert", akkor validációs hibába is fogsz futni!Példa:
.....
<form action="">
<input type="text" />
</form>
.....A ..... helyére a korábbi kódot kell berakni, ha validálni akarod, ennek eredménye egy validációs hiba:
"Line 9, Column 28: document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag"
Tehát kell az a <div>, vagy az itt felsorolt elemek valamelyike. -
#871
papa019
senior tag
Sk8erPeter
#867
papa019
senior tag
válasz
Sk8erPeter
#867
üzenetére
Az egyetlen problémám az, hogy például a Tools oldalon a Scrollablehez is div tagekkel kell szétválasztani az egyes wizard oldalakat, de ha jól tudom, akkor formokban nem lehet a html kódban div.
Tegnap már meg tudtam volna valósítani a dolgot az accordionnal, de ahhoz is div felosztás kell.
-
Karma
félisten
"Tehát hogy ebből a függvényből csak akkor térjen vissza, ha már az egész animáció lefutott."
Ha jól kapisgálom, akkor szinkronná akarod tenni az animációt, azaz blokkoljon addig amíg be nem fejeződik... Na ezt felejtsd el, nem lehetséges, és káros is lenne (lefagy a böngészőtab).
A deferred.done() is csak annyit változtatna a helyzeten, hogy ha többmindent animálsz egy függvényhívással, akkor nem elemenként hívódik meg a callback, hanem csak egyszer, amikor az összes animáció befejeződött. De az aszinkronitás nem változik.
-
#869
Male
nagyúr
Sk8erPeter
#868
Male
nagyúr
válasz
Sk8erPeter
#868
üzenetére
Köszi!
(Egyébként valóban ronda volt, máskor rendezetten szoktam alapból is írni a kódokat)Most kezdtem a jQuery-t, nem tudtam, hogy az felesleges itt már... köszi!
A kettőskereszt... igen, az kimaradt
Igen, azzal egyszerű lenne, csak nem tudom egyelőre megoldani. ajaxForm-ot használok, aminél van egy beforeSubmit rész, ezzel hívom meg a fenti függvényt, és azt akartam elérni, hogy mielőtt elküldi, fusson le az animáció. Igazából a lényeg nem is az lenne, hogy a küldés előtt lefusson, hanem hogy a küldés előtt elkezdődjön, és mire a szervertől megjön a válasz (ajaxForm success része elindul) addigra biztosan a végére is érjen.
Közben mondjuk már látom, hogy esetleg a deferred.done()-nal is meg lehet csinálni ha a success részben ezt használom... hát van még mit tanulnom a témában, viszont érdekelne, hogy mivel lehet megoldani az eredeti problémát, ha már így előjött. Tehát hogy ebből a függvényből csak akkor térjen vissza, ha már az egész animáció lefutott. -
#868
Sk8erPeter
nagyúr
Male
#866
Sk8erPeter
nagyúr
Hát ez a kód ebben a formában igen ocsmány.
Itt tudod szépíteni:
http://jsbeautifier.org/Eredménye:
function akarmi() {
var kesz = false;
if (document.getElementById('iderakd')) {
$('#iderakd').fadeIn('fast', function () {
$('#iderakdmasik').html('MOSTMINDEGY');
$('#iderakdmasik').fadeIn('slow');
kesz = true;
alert('Lefutottam');
});
}
return kesz;
}Felesleges a document.getElementById, ha már jQuery-t használsz.
document.getElementById('iderakd')
HELYETT
$('#iderakd')A kód érdemi részére: szerintem módosítanod kéne a gondolatmenetedet, és épp, hogy a callback-hez kötni azt a függvényt, amit abban az esetben kell meghívni, ha az animáció kész van, mert itt a függvény azonnal visszatér (de ezt látod is), a callback tulajdonképpen aszinkron módon ettől függetlenül végrehajtódik.
Mi a cél? -
#867
Sk8erPeter
nagyúr
papa019
#856
Sk8erPeter
nagyúr
Ez egy egész jó kis pluginnek tűnik, nem ismertem, kösz.
A multi-step wizardot pedig még akár jQuery UI Tabs segítségével is könnyen megoldhatod, vagy a jQuery Tools oldalán egyből látható Scrollable plugin segítségével.
-
Male
nagyúr
Szerintetek ez a függvény miért ad vissza false-ot, majd jeleníti meg utána az alert ablakban, hogy Lefutottam? (tehát az if ágba belép, de nem várja meg, hogy végezzen, hanem rögtön visszadobja, hogy false, aztán még fut tovább)
function akarmi(){
var kesz = false;
if(document.getElementById('iderakd')){
$('#iderakd').fadeIn('fast',function(){$('#iderakdmasik').html('MOSTMINDEGY');$('#iderakdmasik').fadeIn('slow');kesz = true;alert('Lefutottam');});
}
return kesz;
}..illetve hogy a fenébe csináljam meg akkor, hogy várja meg a fadeIn-ek befejeződését?
(Nem egészen ezt a kódot használom, de alapvetően ez lenne, és a lényeg, hogy ami meghívja ezt az akarmi() függvényt, az csak egy true-t kapjon vissza, MIUTÁN lefutott a teljes animáció, vagy false-ot, ha valamiért nem fut le... de semmiképpen se kezdje el, adjon vissza false-ot, majd fusson le, ahogy most csinálja.)
-
papa019
senior tag
Tökéletesen működik, köszönöm.
Step-by-Step dialog boxhoz nem tudtok valami jó tutorialt?
Nekem egy formhoz kellene, minden oldalon lenne mondjuk 2-3 szövegdoboz és egy next gomb, majd az utolsó oldalon a mentés. Még nem igazán találtam olyan megoldást, ami egy form esetén jó. -
Karma
félisten
Oké, így könnyű: a .load függvény aszinkron, azonnal visszatér, és majd valamikor a jövőben kitöltődik a lista. Amikor a következő sor (.chosen) lefut, még az üres elemet használja fel.
Használd a .load callback függvényét a plugin meghívására.
-
papa019
senior tag
Ez van a függvényemben:
function country_load(){
$('.country').load("country_load.php");
$('.country').chosen({no_results_text: "No results matched"});
});Ez a php:
<?php
include 'config.php';
$result = $DB->query("SELECT * FROM categories");
//echo '<option selected="selected">-- Válassz kategóriát --</option>';
$result->setFetchMode(PDO::FETCH_ASSOC);
while($row = $result->fetch())
{
$id=$row['id'];
$category=$row['name'];
echo '<option value="'.$id.'">'.$category.'</option>';
}
$DB = NULL;
?>Ez a form ide kapcsolódó része:
<label for="country">Ország:</label>
<select data-placeholder="Válassz országot" name="country" class="country" style="width:350px;" ></select><br /> -
papa019
senior tag
Beleütköztem egy problémába a pluginnal:
Ha a html kódban elhelyezek option-öket a selectben, akkor tökéletesen működik, viszont én ajax-al hívok meg egy php fájlt, aminek a segítségével az adatbázisból megkapott adatokat írom ki így:
echo '<option value="'.$id.'">'.$category.'</option>';
Viszont ebben az esetben a kereső mezőben nem jelenik meg semmilyen lehetőség, azt írja, hogy nincs választható érték. Ha kikommentezem a chosen-t, akkor megint jó.
Arra figyeltem, hogy az ajax hívás után helyezem el a függvényben a
$('.country').chosen({no_results_text: "No results matched"});
sort.
Valakinek van valami ötlete? -
-
papa019
senior tag
Valaki tudna segíteni, hogy ezt hogy kell beilleszteni a kódomba?
Írja, hogy töltsem le az appot, de vannak benne .coffee fájlok. Illetve a telepítését sem értem...
Vagy csak simán fogom a chosen mappában a chosen.jquery.min.js fájlt és includeolom az index.php fájlomban és utána már használható a chosen() függvény?Ha esetleg valaki használt már ilyet, vagy tud egyszerűbb megoldást erre a funkcióra, az kérem segítsen.
-
#855
papa019
senior tag
Sk8erPeter
#854
papa019
senior tag
válasz
Sk8erPeter
#854
üzenetére
Felcseréltem az ajax után a } és a ) zárójelet...
Most fut minden, de a legördülő listákban nincs elem...Mostmár jó minden.
A $(".city") jelölést is elrontottam, a pont helyett #-t raktam... -
papa019
senior tag
Sziasztok!
Ez alapján a tutorial alapján csináltam meg egy legördülő listát.
Viszont a második legördülő listához ugye kell az itt is szereplő change() függvény, de ha ezt beillesztem a kódba, akkor az egész oldal nem töltődik be.
Ha kikommentezem a function tartalmát, akkor is ugyanez van, így arra gyanakszom, hogy valami a change sorával lehet.Valami ötletetek van a hibára?
-
#852
Sk8erPeter
nagyúr
TonTomika
#851
Sk8erPeter
nagyúr
válasz
TonTomika
#851
üzenetére
Itt felesleges az .on() használata, legalábbis úgy tűnik, nem fogod AJAX-szal bővítgetni a menüdet...
Csak feleslegesen erőforrás-zabáló. Elég click eseményre feliratkozni.A CSS-részt rendesen túlbonyolítottad, változtattam rajta, mondjuk tudom, hogy így elb@szódott a betűtípus, de azt már nem volt kedvem visszacsinálni.
Mindenesetre a selectorokat egyszerűbben is meg lehet adni, pl. a link színénél durván bonyolítottad, sokszor megadva ugyanazt a színt, miközben általánosabban is lehet.Magát a nyitogatós kódot az .on() részen kívül nem néztem át, lehet-e egyszerűsíteni.
Én itt most kihagytam a fenébe a highlight-os szarakodást, tök felesleges.Megmutatom, pl. szerveroldalon hogy lehetne megoldani, hogy eleve nyitva legyen, úgy, hogy belegenerálod az <ul>-be az active-list class-t, a linkhez meg pl. az active-link class-t. Ezeknek meg meg van adva, hogy eleve nyitva legyenek.
Most egyelőre itt meghagytam azt, hogy JS-sel tünteted el a többit. Egyszerűen úgy, hogy .not()-tal kizártam azokat, amik nem rendelkeznek az active-list class-szal.
A lényeg: a projekt1 az aktív oldal az enteriőrtervezésen belül, ez eleve nyitva van. -
#851
TonTomika
aktív tag
Sk8erPeter
#849
TonTomika
aktív tag
válasz
Sk8erPeter
#849
üzenetére
Erről a jsFiddle-el még nem hallottam, de feldobtam most oda, így megnézhetitek:
[link]A highlight-al adom meg neki a sötétszürke színt és ez alapján gondoltam kiszűrni, hogy annak az <li>-nek akinek van ilyen classa, annak a parentje legyen nyitva.
Azt, hogy szerveroldalon ezt hogyan rendeljem hozzá, hogy eleve nyitva maradjanak, meg végképp nem tudom, örülök hogy eddig sikerült megoldanom.
De úgy érzem hogy most már csak kb egy-két sor hiányzik ebből a kódból hogy működjön.
-
#850
Speeedfire
félisten
Sk8erPeter
#847
Speeedfire
félisten
válasz
Sk8erPeter
#847
üzenetére
Jogos. Úgy néz ki erre már nem is gondoltam.
-
#849
Sk8erPeter
nagyúr
TonTomika
#848
Sk8erPeter
nagyúr
válasz
TonTomika
#848
üzenetére
Ja jó, felfogtam, mi kéne, most látom a belinkelt oldaladat.
"Mert a jQueryt azt nem igazán ismerem és nem tudtam, hogy ezzel is lehet a href attribútumot vizsgálni. "
JavaScripttel mindent lehet "vizsgálni", és mivel a jQuery tulajdonképpen a legtöbb JavaScriptes művelet köré épít egy "wrappert", ezáltal egyszerűbbé téve a használatát, ezért jQuery-vel is mindent lehet "vizsgálni".Igazából mi értelme a "highlight" class-odnak, ha semmit nem csinálsz vele?
Ha jól értem, itt valami olyasmit csinálsz, hogy hozzáadod az aktív elemhez, meg minden szülőelemhez is... bár ezt nem így csinálnám, de ha már így van, akkor a highlight class-nak adhatnál egy display:block tulajdonságot, hogy eleve nyitva legyen. Vagy hasonló. Mondjuk akkor már másképp kéne elnevezni...
Igazából azt szokták jelezni, hogy melyik MENÜPONT aktív, nem szokás a szülőknek is megadni az aktív tulajdonságra jellemző osztályt.
Lényeg, hogy amikor lekéred az oldalt, akkor a menühöz szerveroldalon kéne hozzácsapni azt a tulajdonságot, amitől nyitva maradnak ezek a menük.Esetleg feltölthetnéd jsFiddle-re a kódot, akkor tuti több kedvünk lesz szórakozni vele.
-
#848
TonTomika
aktív tag
Speeedfire
#846
TonTomika
aktív tag
válasz
Speeedfire
#846
üzenetére
Mert a jQueryt azt nem igazán ismerem és nem tudtam, hogy ezzel is lehet a href attribútumot vizsgálni.
Most már szépen kiadja a színezést, az almenükben és az al-almenükben is.
A teljes kód:$(document).ready(function(){
var str = location.href.toLowerCase();
$("ul.nav li a").each(function() {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("li.highlight").removeClass("highlight");
$(this).parent().addClass("highlight");
}
});
$("li.highlight").parents().each(function(){
if ($(this).is("li")){
$(this).addClass("highlight");
}
});
});
(function(){
$('ul.nav li ul').hide();
$('ul.nav a').on('click', function(e){
if ($(this).siblings('ul').size() > 0){
var links_parent = $(this).parent(),
other_menu = links_parent.siblings('li').children('ul'),
submenu = $(this).siblings('ul');
other_menu.slideUp('200');
submenu.slideToggle('200');
e.preventDefault();
}
});
})();Most már csak az hiányzik, hogy a .highlight class-al rendelkező elemeket az aloldal betöltése után kibontsa a megfelelő helyen, de az istennek sem akar összejönni.
Elméletben annyi, hogy miután hideolja az elementeket, kiválasztom a .highlight class elemek parent ul-jét és megmondom nekik hogy .slideOpen(); nem?
Sorry ha kicsit kuszán írtam le a dolgokat...
-
#847
Sk8erPeter
nagyúr
Speeedfire
#846
Sk8erPeter
nagyúr
válasz
Speeedfire
#846
üzenetére
Itt leírtam, miért kell PHP, hogy ne bohóckodjon JavaScripttel, hogy kiderítse, melyiket is kéne megjelölni aktív menüpontként.
"Elvileg ha megvan csinálva az ul li ul li szerkezet akkor a parent is aktív lesz."
He?
Mitől lenne aktív attól, hogy a gyerekelemben van egy "active" class mondjuk?Amúgy amiket írsz, az ide-oda kattintgatós módszernél, hogy kattintáskor leszedje a class-t, hozzáadja, stb., ahhoz az kell, hogy AJAX-szal jelenítse meg a tartalmakat. Én nem láttam ilyen utalást a hsz.-eiben, bár lehet, hogy volt, én már annyira nem bírtam követni az egészet.
-
#846
Speeedfire
félisten
TonTomika
#845
Speeedfire
félisten
válasz
TonTomika
#845
üzenetére
Ehhez miért kell php? Elvileg ha megvan csinálva az ul li ul li szerkezet akkor a parent is aktív lesz.
Illetve ha így css-el nem megy akkor inkább maradj a jquery mellett szerintem.
Ha children amire kattintasz akkor a parent-nak adj egy addclass-ot, ha nem akkor csak annak. Illetve ha már elkattintasz akkor az előzőnek egy removeclass. Gondolom valami jó kis jquery-t írtál rá, nem néztem meg. De szerintem simán beágyazható ez a plusz kód. -
TonTomika
aktív tag
Sziasztok, újra itt.
Jelenleg ott tart a menü, hogy kattintásra szépen lenyílik, és ha egy másik menüt kattintok akkor összezáródik, valamint nem veszi hivatkozásnak azokat a menüpontokat, aminek még van almenüje.
Most már csak azt kell megoldani, hogy az aktív menü, tehát mondjuk referenciák > enteriőrtervezés > projekt2 hivatkozás aktív, ez az aloldal van megnyitva, akkor ez az elem, illetve a felette lévő kettő, kapja meg az active class-t hogy láthatóan ki legyen emelve.
Említettétek, hogy php-val oldjam meg az active class beszúrását, ez odáig oké, hogy egy változóban már letároltam az adott oldal url-jéből a fájlnevet (kiterjesztés nélkül, mert a hivatkozások is kiterjesztés nélkül vannak).
Én onnan indultam el, hogy a html <a href="#"> linket kéne egy if függvénnyel összevetnem a változóban letárolt fájlnevet, és ha true; akkor beírja hogy class="active" ha pedig false; akkor nem ír be semmit. Ezek után pedig jQueryben gondoltam valami úton-módon az ő parent elementjeinek is egy active class-t adni.
De hogyan csinálok az egyedi href elementből egy olyan általánosított változót, amit mindegyik menüpontnál tudok alkalmazni?
Van-e esetleg egyszerűbb megoldás?
-
#843
Sk8erPeter
nagyúr
TonTomika
#842
-
#842
TonTomika
aktív tag
Sk8erPeter
#841
TonTomika
aktív tag
válasz
Sk8erPeter
#841
üzenetére
Van hozzá admin felület is, direkt azért lett így csinálva, mert ő nem akar kódokban meg ftp-n turkálni. Így van egy felület, amin fel tudja tölteni a képeket, amiket megcímkéz a projektjei nevével, az adatok bekerülnek az adatbázisba a fájl pedig egy mappába.
Projektet is így hoz létre, kiválasztja, hogy melyik referencia kategóriába szeretné betenni, beírja a nevét és elmenti. A háttérben némi adat szintén eltárolódik az adatbázisban, illetve egy template.php fájlt duplikál, elmenti az adott névre és beszúr egy sort a megfelelő helyre (így kiegészítve a mysql lekérdezést). Tehát így létrejönnek fizikálisan is az adott aloldalak. A feltöltött képek is szépen mappában rendezve helyezkednek el az ftp-n.
Szöveges tartalom nem kerül feltöltésre, (ami van az fix, nem változó tartalom lesz) csak a képeket kell menedzselni meg a menüpontokat hozzá.
Külön kérésre beépítettem még neki egy backup modult (erre kerestem sample-t), így egy gombnyomással tudja backupolni az admin felületben az egész ftp+sql tartalmat ami egy adott mappában zippelve tárolódik az ftp-n illetve le is tudja menteni ezt.
Az oldalnak a dizájn szempontjából elég sok megkötése van, szóval ebből kifolyólag nem is nagyon fog változni. Külön kikötés volt, hogy úgy kell mindent megoldani, hogy nem jelenhet meg sehol a scrollbar (ugye ez ablakméretfüggő, de a legtöbb monitoron nem fog megjelenni), ne kelljen görgetni sehol, és legyen az egész nagyon minimál, flash pedig teljes mértékben kizárva (ezt én is így gondolom). Szóval ez egy ilyen közös kialakítás volt, az elején én is wp-ben gondolkodtam, de aztán ez elvetésre került.
Elmondta pontosan, hogy mit akar és hogy akar, ezt kellett megoldani a lehető legegyszerűbb formában. Természetesen amikor ezt így megbeszéltük hogy nem lesz görgetés, mondtam, hogy akkor minden méret és karakterszám FIX, és ez így lesz egy oldal, bővíteni nem igazán lehet.Jó ez a superfish, már csak azt kell megoldanom, hogy a menüpontok kattintásra nyíljanak, ne hoverre, és ne mellette jelenjen meg, hanem alatta egy kicsit behúzva. Még egyébként ezt néztem, csak ez nem három szintes menü.
-
#841
Sk8erPeter
nagyúr
TonTomika
#840
Sk8erPeter
nagyúr
válasz
TonTomika
#840
üzenetére
"Ez a kódrészlet csak egy teszt egyébként, azért van így kódolva, egyébként nem BASIC örökség, csak hirtelen ez így egyszerűbbnek tűnt."
Ha most kezded az érdemi kódolgatást, akkor tényleg szokj le róla még időben, hogy ilyen változóneveket használj, még tesztnek sem alkalmas, mert lehet, hogy később szeretnéd ezt a tesztet továbbfejlesztgetni, aztán már fingod nem lesz róla, hogy milyen változó mi a francot csinál."Ki kell, hogy ábrándítsalak, ez most egy valódi vevőnek szánt honlap, ám azért is nem választottam CMS-t mert nagyon egyszerű felületre van szüksége, csak képfeltöltésre a megfelelő projekt menüpontjába, ahol egy nivo slider váltogatja a képeket. A WordPresst ismerem és szeretem is, de ehhez a projekthez túl soknak gondoltam, aztán lehet hogy kicsit megszívattam magamat."
Na, akkor ezt még most, az elején még egyszer gondold át.
Úgyis tuti, hogy az lesz, hogy a vevő majd rájön idővel, hogy akar admin-felületet is, rájön, hogy hoppá, mégis kéne egy plusz valami bele, aztán még valami, és akkor eljutsz oda, hogy döngeted a fejed a falba, hogy a francért nem használtál inkább CMS-t már az elején. Egy normális hosztingnál el kell, hogy bírja megfelelő tempóval az amúgy erőforrás-igényes CMS-t is.
A másik: nehogy már 2012-ben FTP-vel feltöltött fájlokat olvasson be a scripted egy könyvtárból, aztán azt listázza ki agyatlanul sorrendben...
Már ilyen pluginek vannak, mint a Plupload, amivel szépen lehet egyszerre sok fájlt feltölteni, és ezt lekezelheted PHP-vel, feltöltheted az elérési utakat adatbázisba, stb... de tuti, hogy van erre valami Wordpress-modul is (Drupalban van, tuti, hogy WP-ben is van).Ha ez most egy vevőnek szánt honlap, nem hiszem, hogy az ő weboldalát kéne ujjgyakorlatnak használni.
-
TonTomika
aktív tag
Huhh srácok, köszi a sok jó választ.
Megpróbálok szépen sorban válaszolni mindenre.
Az első gondolatom nekem is az volt, hogy keresek egy már megírt scriptet a menüre, találtam is egyet, csak nem vált be, nem tudtam rendesen ráhúzni az én menümre. Viszont ez a Superfish jónak tűnik, ezt mindenképpen megnézem!
Ez a kódrészlet csak egy teszt egyébként, azért van így kódolva, egyébként nem BASIC örökség, csak hirtelen ez így egyszerűbbnek tűnt. Ki kell, hogy ábrándítsalak, ez most egy valódi vevőnek szánt honlap, ám azért is nem választottam CMS-t mert nagyon egyszerű felületre van szüksége, csak képfeltöltésre a megfelelő projekt menüpontjába, ahol egy nivo slider váltogatja a képeket. A WordPresst ismerem és szeretem is, de ehhez a projekthez túl soknak gondoltam, aztán lehet hogy kicsit megszívattam magamat.
Ezen kívül még elég sok megkötés volt, ezért gondoltam hogy egyszerűbb egy kis sajátot írni, főleg úgy hogy szerettem volna gyakorolni a php-t. De ezzel nem is volt probléma, csak a jQueryvel szívok mindíg.
Ez class dolog nem is értem, hogy miért nem jutott eszembe, tényleg teljesen egyértelmű, ezt benéztem.
Nem frameset, annyi az egész, hogy minden aloldal egy php include-al meghívja az azonos oldal elemeket.
A menüt sima html-ben írtam meg, kivéve csak a változó <li> elementnél van egy mysql_fech_array függvény. Ez az adott kategóriához tartozó projektnevű linkeket generálja le, tehát pl csak az enteriőrtervezéshez használtakat.
Apropó, találtam a tutsplus.com-on egy olyat, hogy jQuery 30days ingyenes videós tananyag. Ezt lehet hogy érdemes lenne végigtolnom...
Köszönöm még egyszer a jótanácsokat!
-
#839
Sk8erPeter
nagyúr
TonTomika
#835
Sk8erPeter
nagyúr
válasz
TonTomika
#835
üzenetére
Karma és martonx tök jól leírták a lényeget - többek közt amit én is nagyon hangsúlyoznék: ne gányolj, és soha többé ne használj ilyen semmitmondó fos változóneveket, mert normális fejlesztőnek az ilyentől széjjelnyílik az agya, aztán szíve szerint utolsó leheletéig ütné azt, aki ilyet csinált.
Még valami:
van ez a kódrészleted:
$("body div#nav ul ul#szolgaltatasok")
Mivel itt egyedi azonosítók tartoznak ezekhez a DOM-elemekhez, tökéletesen felesleges ilyen rohadt hosszú selectort írni. Elég ennyi:
$("ul#szolgaltatasok")
vagy akár az ul-t is lehagyhatod, bár ez még nem árthat, mert legalább egyértelművé teszi, hogy itt egy listáról van szó.
Ezenkívül egy kissé általánosabban kéne megírnod a kódjaidat, nem "bedrótozni" az egyes menüelemekhez tartozó viselkedést. De asszem hasonlót már leírt Karma is. A lényeg, hogy tényleg legyenek class-aid, és azok megléte vagy nem léte szerint viselkedjenek az elemek."A feladat, hogy mindegyik aktuális menüpont ahol éppen jár az ember highlightolva legyen."
Ezt gyorsan felejtsd el, hogy ilyen window.location.pathname-hez hasonló hülyeségekkel szívatod magadat, feltételezem, itt egy NEM AJAX-szal legenerálódó menüről van szó - az aktív menüpontot jelző class-t normális esetben szerveroldali nyelvvel (pl. PHP-vel) szokták belegenerálni az adott menüpontba.
Tehát ha mondjuk van egy <ul> listád, akkor pl. a "rolunk" oldalon van egy "active" (vagy épp "highlighted" class, mint ez:
<ul>
<li><a href="/XYZ">XYZ</a></li>
<li class="highlighted"><a href="/rolunk">Rólunk</a></li>
....
</ul>Remélem érthető így.
Ami még fontos, és amire martonx is célzott: a lenyíló menük problémáját már előtted megoldották mások, úgy, hogy agyontesztelték mindenféle böngészőben, úgyhogy tényleg ne most találd fel a spanyolviaszt.
Ajánlott plugin lenyíló menüs macerára: Superfish.
jQuery-alapú, egyszerű, faszányos. -
Karma
félisten
Kiegészítendő az előzött egy kicsit, a menük nyitott/csukott állapotát is praktikus egy classal jelölni, így egy tök egyszerű hasClass hívással meg tudod állapítani, hogy egy adott elejű milyen állapotban van.
Másrészt a példakódom nem jó, mert a kattintott elem tűnik el, pedig az csak a fejléc (amiknek mindig láthatónak kellene maradnia. Így a valódi megoldás kicsit bonyolultabb, de mobilról nem mennék bele, bocs.
Amúgy legördülő menükről nemrég szólt a topik már egyszer, elég részletesen.
martonx: jaja tényleg, meg is akartam említeni
A CMS-re a "DB-ből dinamikusan letöltött aloldalak" miatt gondoltam főleg. -
martonx
veterán
-
Karma
félisten
válasz
TonTomika
#835
üzenetére
Végre egy kis élet a topikban.
Hát, az első gondolatom az volt a sorok olvasása közben, hogy téged is elkapott a Not Invented Here (NIH) szindróma - azaz inkább megírod puszta kézzel azt, amire a CMS-eket már mióta feltalálták. Egy kicsit remélem, hogy ez valami ujjgyakorlat, és nem egy valódi vevőnek szánt valódi oldal.
Ömleszteném inkább a további gondolataimat, sok mindenre benne lesz a válasz:
1) Változónevek! $-ral hagyományosan a jQuery által bewrappelt objektumokat szokás jelölni, a sima stringekhez nem annyira pálya. Másrészt nem kell spórolni a betűkkel, az "$a", "$c" és egyéb szutykolás helyett rendes, beszédes neveket használj, és akkor talán olvasható marad a kód két nap múlva is. Nekünk meg azonnal.
BASIC programozó voltál ezelőtt?
2) Ez a rész:
if($c == $a) {
$("body div#nav ul li#1 a").css('color', '#494949');
}Nem csak a c és a olvashatatlan változók miatt rossz. Nem illik (más szóval elítélendő baromság) a JS kódba beleraknod a konkrét CSS stíluselemeket, használj egy új classt hozzá; a színt meg a külső CSS fájlodban definiáld ehhez a classhoz.
Eztán használd az addClass(), removeClass(), toggleClass() jQuery függvények megfelelőjét a kiemeléshez.
3) Nem nehéz elérni, hogy az azonos szinten lévő többi elem becsukódjon, csak használnod kéne a HTML-ben a classokat a különböző szintek csoportosításához.
Pl.:
$(".main-menu-item.submenu").click(function() {
var $item = $(this);
$item.slideDown(0.1).siblings(".submenu").slideUp(0.1);
});Nem teszteltem, csak ideírtam fejből.
4) Dinamikus változók... Minden dinamikus a JavaScriptben bizonyos szempontból. A DOM fa bármikor változhat, ezért lehet a jQuery segítségével megadott feltételek alapján keresni. Például az aktuális menüelemnek adsz egy "highlighted" nevű classt (lásd 2. pont), akkor a $(".highlighted") selector visszaadja ezt az elemet, bármikor.
Ugye hogy értelmetlen közvetlenül a színeket állítgatni?
5) Egyébként mondogatod ezt a dinamikus jelzőt, de használható infó nem jött át.
Mikor is történik ez a DB elérés? Az oldal generálásakor a PHP (vagy más backend) végzi el, így a lejövő oldal igazából statikus; vagy AJAX hívásokkal töltöd le a menüelemeket az oldal betöltődése után? (Utóbbi esetben: miért?)
Egyáltalán ha rákattintasz egy linkre, akkor az újratölti az oldalt? Vagy új ablak? iframe? Vagy sikerült framesetet használni 2012-ben? (Brrrrrrrrr)
Ezek a kérdések elég fontosak, mert más megoldási lehetőségeket lehet az esetekben csinálni...
6) Egyébként ha tényleg dinamikus, akkor az .on() függvény segítségével tudsz eseménykezelőket rendelni a HTML elemek egy csoportjához - már előre, azelőtt, hogy ténylegesen létrejöttek volna. Nagy királyság. De nem biztos, hogy neked ez tényleg kell...
Szóval összegezve az biztos, hogy meg kellene barátkoznod a HTML-ben classok fogalmával, és sürgetőlegesen alkalmaznod a problémára.
-
TonTomika
aktív tag
Sziasztok!
Egy olyan problémám lenne, hogy dolgozok egy oldalon és kell készítenem egy 3 szintes menüt, aminek a referencia része dinamikus, mysqlből kéri le az adott menü fájlnevét amit meghív.
Minden oldal 4 szekcióra van bontva, ami ugyan az mindegyik oldalon a tartalmi részt kivéve. (Header, sidebar, content, footer.) A menü a sidebarban van és a következőképpen néz ki:
főoldal
rólunk
szolgáltatások
enteriőrtervezés
enteriőr styling
stb...
referenciák
enteriőr tervezés
ide jönnek az adatbázisból lekért projektek linkjei szépen sorban
enteriőr styling
ide jönnek az adatbázisból lekért projektek linkjei szépen sorban
arculattervezés
itt nincsen egyéb menü, az arculattervezés maga a link
kapcsolat
blogA feladat, hogy mindegyik aktuális menüpont ahol éppen jár az ember highlightolva legyen. Ezt a főbb menüpontoknál, illetve a szolgáltatásoknál megoldottam.
$a = window.location.pathname
$c = "/rolunk";
$e = "/enteriortervezes"
if($c == $a) {
$("body div#nav ul li#1 a").css('color', '#494949');
}...és így tovább, a szolgáltatások meg ugye egy lenyíló menü, és amikor megnyitja az ember, a betöltés után újra összezáródik, ezért kiegészítettem így:
if($e == $a) {
$("body div#nav ul ul#szolgaltatasok").slideDown(0.1);
$(this).attr('display', 'block');
$("body div#nav ul li#3").css('color', '#494949');
$("body div#nav ul ul#szolgaltatasok li#32 a").css('color', '#494949');
}Alap esetben minden lenyíló menü display: block; értékkel rendelkezik.
Amit nem tudtam megoldani:
- ha a szolgáltatások után a referenciákat nyitja le valaki, akkor a szolgáltatások záródjon össze
- ugyan így ha a referenciákon belül az almenüket is lenyitják, akkor a felette lévő almenü záródjon össze (ezek nem képeznek külön aloldalakat, csak a projektek)
- ha megnyitnak egy projektet, akkor ott legyen nyitva a menü és legyen highlightolvaÉn azon a gondolatmeneten indultam el, hogy itt is checkolni kéne első körben, hogy melyik aloldal van megnyitva, és az alapján megadni az instrukciókat, viszont ez ugye dinamikus, és nem tudom, hogy jQuerybe, hogyan vigyem bele a dinamikus változókat.
Egyáltalán jó gondolatmeneten indultam el? Lenyíló dobozokon kívül mást még nem nagyon csináltam jQueryben, szenvedek ezzel már egy ideje, remélem, hogy sikerült érthetően leírnom a problémámat.
Előre is köszönöm, ha tud segíteni valaki!
-
#832
Sk8erPeter
nagyúr
Speeedfire
#831
Sk8erPeter
nagyúr
válasz
Speeedfire
#831
üzenetére
Pedig hasznos.
Szerk.: ugyanitt külső CSS-fájlt is be tudsz tölteni, nem csak JavaScript-fájlt. -
#831
Speeedfire
félisten
Sk8erPeter
#830
Speeedfire
félisten
válasz
Sk8erPeter
#830
üzenetére
Na, ez a ficsőrt sem láttam még.
-
#830
Sk8erPeter
nagyúr
Speeedfire
#829
Sk8erPeter
nagyúr
válasz
Speeedfire
#829
üzenetére
Szívesen!
"Manage Resources" fül:
[link] -
#829
Speeedfire
félisten
Sk8erPeter
#827
Speeedfire
félisten
válasz
Sk8erPeter
#827
üzenetére
Itt ebben te hol hívod meg ezt a plugint? Csak, mert nem látom.
Köszi a kódot, jó kis plugin ez.
-
#828
Sk8erPeter
nagyúr
Karma
#826
Sk8erPeter
nagyúr
Látom itt is írta egy csávó, hogy "remember jsFiddle is just an Alpha version", akkor ezé'.
Azért fasza, hogy ezt használjuk debug céljára. -
#827
Sk8erPeter
nagyúr
Speeedfire
#823
Sk8erPeter
nagyúr
válasz
Speeedfire
#823
üzenetére
Nem bírtam ki, és írtam neked egy komplett példát.
Szerintem elég jól szemlélteti.
A jQuery Form Pluginben van egy .clearFields() metódus, azt használtam fel.
Az egyik esetben tagektől teszem függővé, hogy egy adott wrapperen belül melyik mezőket kell törölni, a másik esetben azt használom fel, hogy adtam mindegyik fieldnek egy class-t, így ezt az attribútumot felhasználva végzem a resetelést (itt a HTML5-ös data attribútumot is felhasználtam az egyszerűség kedvéért):http://jsfiddle.net/Sk8erPeter/eQ7ky/
Remélem így már tiszta.
-
#826
Karma
félisten
Sk8erPeter
#822
Karma
félisten
válasz
Sk8erPeter
#822
üzenetére
Ránéztem a developer toolsszal hogy mi lehet, úgy tűnik a JSLintben van valami bug, a 3306-os sornál. Az ott lévő szerkezet nincs is benne a GitHubon aktuális JSLint kódban, úgyhogy valószínűleg régebbi változat, és nem nekünk kell megfejteni
-
szmegma
aktív tag
Sziasztok.
jQuery-vel frissitem az adatbazisomat es van benne egy szazalek kijelzo a success functionban:
...
success: function(){
var szazalek = (100/max)*id;
$(".szamol").html(id);
$(".szazalek").html(Math.ceil(szazalek));
$(".entry_bar").css({ width: szazalek+"%" });
}
...Ez a szazalek classu divbe irja ki, hogy eppen hany szazalek kesz a teljesbol. Am az a baj, hogy ha Math.ceil(szazalek) formaban irom, akkor felkerekiti a szazalekot, igy a 0.19%-ot is 1%-nak irja.
Ha Math.ceil() nelkul irom, akkor pedig olyan szamsort general, hogy nem latom a veget.A keredesem, hogyan lehetne megadni, hogy mondjuk ket tizedesig mutassa?
Pl. igy gondolom: 12.48%Koszonom.
-
#822
Sk8erPeter
nagyúr
Sk8erPeter
#821
Sk8erPeter
nagyúr
válasz
Sk8erPeter
#821
üzenetére
Lejárt a szerk. idő, az előbbi kódban igazából a második feltétel
myLinks.hasOwnProperty("href")
akart lenni.
Ahogy itt látható:
http://jsfiddle.net/Sk8erPeter/zWDpV/2/ -
#821
Sk8erPeter
nagyúr
Karma
#819
Sk8erPeter
nagyúr
Igen, igazából itt nem is igazán indokolt ennek az iterációnak a használata, de hirtelen elsőre az jutott eszembe, és tulajdonképpen így, a tömb teljes ismeretében úgy gondoltam, hogy nagyjából most mindegy, mit használok - de egyébként igazad van, előfordul olyan objektum, ahol hülyeségek jöhetnek ki belőle még akkor is, ha látszólag ismered az objektum teljes szerkezetét. Előfordult már, hogy bejártam egy szerveroldalon legenerált objektumot ilyen módon, és baromságok jöttek ki belőle.
Mondjuk akár debuggoláshoz ez még jól is jöhet.Az megint másik kérdés, hogy ez egy sima tömb, és itt van egy elvárt struktúra, tehát max. akkor jönnek ki belőle baromságok, ha valamit elcseszek a kódban. Az ellen meg a sima indexelt for ciklus sem véd meg. Tehát itt lényegében szerintem tényleg mindegy, mivel járom be.
Viszont mivel már találkoztam egy párszor ezzel a hibaüzenettel, úgy gondoltam, már érdemes rákérdezni, mi a franc baja van ezzel. De igazából úgy tűnik, erre nem jöttünk rá.
Legalábbis a hibaüzenet ebben a formában értelmetlen és valótlan, meg számomra legalábbis semmit nem árul el arról, hogy mégis konkrétan mi a rossz benne. Miért kellene a "first" property-t állítani? Honnan jön ez? (Költői kérdések! De ha van rájuk válasz, szívesen fogadom. )DE érdekes, hogy amennyiben így írom:
var i = 0;
for (i in myLinks) {
....
}...akkor ez előző hibaüzenet megszűnik, jön az újabb:
"The body of a for in should be wrapped in an if statement to filter unwanted properties from the prototype."
(Most ebben nem ez utóbbi hibaüzenet az érdekes, hanem hogy megszűnt a korábbi parája a "first" property-vel!)És a megoldás:
var i = 0;
for (i in myLinks) {
if (myLinks.hasOwnProperty("text") && myLinks.hasOwnProperty("text")) {
...........
}
}Miért nem rinyál, ha deklarálok neki a cikluson kívül egy i változót?
Ja, amúgy azt előbb elfelejtettem írni, hogy bocs, hogy ide írtam a kérdésem, igazából nem egy jQuery-téma (szóval OFF), de a sima JavaScript topicban kevésbé látlak Titeket (ahova igazából ez való; bár igaz, mondjuk Te épp szoktál ott is aktívkodni), ezért írtam ide.
-
#820
martonx
veterán
Speeedfire
#815
martonx
veterán
válasz
Speeedfire
#815
üzenetére
Viszont mindegyik megoldás szimpla html és javascript ismereteket feltételez, meg némi józan paraszti észt. Kár ilyen apróságok miatt a jquery topik-ot teleszemetelni.
-
#819
Karma
félisten
Sk8erPeter
#818
Karma
félisten
válasz
Sk8erPeter
#818
üzenetére
Nem tudom miért nem eszi meg a JSLint, de azért van egy alapvető baj ezzel a foreach iterálással: veszélyes, ha nem ismered pontosan az objektumot/tömböt, amin iterálsz. A hasOwnProperty függvény egy részétől megment, de ha mondjuk van egy fekete doboz jellegű kód (amit mondjuk más nemzet gyermekei nemzettek), ami belekotor az Array prototípusba, akkor vicces eredmények jöhetnek ki.
Tömböt ezért én inkább indexelve szoktam bejárni.
-
#818
Sk8erPeter
nagyúr
Sk8erPeter
nagyúr
Hali!
Most én is kérdeznék egy apróságot JSLinttel kapcsolatban.
Itt beszéltünk egy problémáról, a megoldást belinkeltem jsFiddle-ön, JSLint sír:
"Cannot set property 'first' of undefined"
konkrétan ezért:
for (var i in myLinks) {
....
}A var i-re rinyál. Tudtommal ezzel az iterálással alapvetően nincs baj, de nem vágom, miért jelzi, hogy ez így nem jó.
Már máskor is találkoztam ezzel a dologgal, de hogy ezt miért jelzi rossznak, arra még nem jöttem rá. -
#816
Jim-Y
veterán
Speeedfire
#813
Jim-Y
veterán
válasz
Speeedfire
#813
üzenetére
-
-
#814
martonx
veterán
Speeedfire
#813
martonx
veterán
válasz
Speeedfire
#813
üzenetére
Kapásból van pár öteletem erre. Annyira bagatell a kérdés, hogy fél perc gondolkodás után biztosan neked is eszedbe jut legalább 1 megoldási lehetőség, így inkább meghagyom neked a ráeszmélés élményét.
-
#813
Speeedfire
félisten
Speeedfire
félisten
Adott egy form, 2 részre van osztva.
Ha az első rész ki van töltve akkor jelenik meg a 2. része. Viszont a 2. résznél megjelenik egy nullázó gomb.<input id="resetform" class="bal" type="button" name="reset_form" value="Nulláz" onclick="this.form.reset();" >
Ez mind szép és jó, de így nullázza az első részt is, ami nem jó, mert akkor a 2. rész eltűnik ismét. Nem lehet adni valami kivételt a resetnek?
-
#812
Sk8erPeter
nagyúr
vakondka
#811
Sk8erPeter
nagyúr
válasz
vakondka
#811
üzenetére
Ez pont azt a problémát oldaná meg.
"Kreál" egy hashchange eventet, amire aztán úgy iratkozol fel a különböző függvényekkel, ahogy csak akarsz. Szóval martonx kommentje jogos, legyen hash mindenképp AJAX-ozás esetén (amennyiben oldalakat töltögetsz be adott divbe, nálad épp ez a helyzet), így könyvjelzőzhető is.
A hash akár lehet a tartalom URL-je is. Jó esetben ezek az AJAX-szal betöltött oldalak elérhetők AJAX használata nélkül is, tehát pl.:
http://example.com/foo/bar#!/some/blabla
ÉS
http://example.com/some/blabla
is működik.
Persze ez nagyon igényfüggő, de szerintem kiindulópontnak teljesen jó. -
vakondka
őstag
Igen, erre én is gondoltam, csak azon gondolkodom kellene valami rendszer hogy mi legyen a hash...
Egyébként már csak egy eseménykezelő kellene ami érzékeli hogy a visszagombra kattintottak, majd a content divbe betölti azt az url-t ami a böngészőben van.
Ugyanis jelenleg már minden kattintás mutatja a megfelelő teljes url-t a böngészőben
és a vissza gomb szépen visszalép az előző linkre, de csak kiírja.
Le kellene kezelni magát az eseményt valahogyan... -
#809
vakondka
őstag
Sk8erPeter
#808
vakondka
őstag
válasz
Sk8erPeter
#808
üzenetére
Szia,
De pont ez a gondom, hogy nálam nincs hash sehol sem, csak sima url...
az url betöltődése helyett a lecserélődik a tartalom div. -
#807
vakondka
őstag
Speeedfire
#806
vakondka
őstag
válasz
Speeedfire
#806
üzenetére
Van valakinek tapasztalata hogy ajaxos oldalnál hogyan kell kezelni a history-t?
Konkrétan azt szeretném, hogy működjön a böngésző vissza gombja.Ennyi van jelenleg ami betölti az oldalt és beteszi a böngészőbe az aktuális url-t:
(nem hasheket használok, hanem sima URL-t)$("body").on("click", "a[href*='-c-'], a[href*='-p-'], a[href*='extra_info_pages.php'], a[href*='create_account.php'], a[href*='specials.php']", function(e) {
var a_href = $(this).attr('href');
var content = $('#column_content');
var breadcrumb = $('#breadcrumb');
e.preventDefault();
content.fadeToggle();
content.load(a_href +' #column_content', function(){
breadcrumb.load(a_href +' #breadcrumb');
var title = $("h1:first").text();
$(document).attr('title',title);
//State = History.getState();
History.pushState(null, null, a_href);
}); -
#806
Speeedfire
félisten
Sk8erPeter
#805
Speeedfire
félisten
válasz
Sk8erPeter
#805
üzenetére
Arra értettem, hogy ő állítja elő a linket a képből.
Nagyon sokan még erre sem képesek. Nézd meg, hogy sokan itt a PH!-n is, hogy linkelnek, pedig egyszerűen van itt is megoldva. -
#805
Sk8erPeter
nagyúr
Speeedfire
#804
Sk8erPeter
nagyúr
válasz
Speeedfire
#804
üzenetére
"Az, hogy túl sok mindent enged meg a felhasználónak.
"
Vazze, remélem viccelsz, akkor korlátozni kell a jogait...
Többek közt:CKFinder: [Defining Access Control]............
elFinder: [Simple file permissions control]
-
#804
Speeedfire
félisten
Sk8erPeter
#803
Speeedfire
félisten
válasz
Sk8erPeter
#803
üzenetére
Az, hogy túl sok mindent enged meg a felhasználónak.
Az IMCE nekem is nagyon bejött Drupal alatt, de az meg nincs sajnos csak drupalra. Anno a fejlesztőnek is írtam, de nem tervezi sima rendszerre is megírni.
-
#803
Sk8erPeter
nagyúr
Speeedfire
#802
Sk8erPeter
nagyúr
válasz
Speeedfire
#802
üzenetére
Hmm, elvileg fizetős. "ez sem a legjobb" - mi a baj vele?
Itt van egy ingyenes, nem tudom, ez milyen.
Amúgy nekem azért nem tűnt fel eddig, hogy a CKFindernek csak fizetős konstrukciója van, mert én mást használtam. Drupalhoz az IMCE-t, aminek mondjuk sajnos nem találtam általános oldalakhoz használható filemenedzserét (a Drupalos változatot 216968 felhasználó használja, nem szar ).Szerk.: vagy elFinder, eXtplorer, vagy ez
Szerk. 2: sőt, inkább csakis elFinder.
Most látom, ennek van fasza CKEditor beépülője: [Configure CKEditor to use the elFinder file manager]. -
#802
Speeedfire
félisten
Sk8erPeter
#801
Speeedfire
félisten
válasz
Sk8erPeter
#801
üzenetére
Ez a ckfinder fizetős vagy nem?
Amúgy ez sem a legjobb, láttam már. -
#801
Sk8erPeter
nagyúr
Speeedfire
#800
Sk8erPeter
nagyúr
válasz
Speeedfire
#800
üzenetére
Amúgy ötlet:
CKFinder
Ez a CKEditorhoz tartozó kiegészítő, AJAX-os fileböngésző, így az előzőleg feltöltött képeket könnyű vele beszúrni a szövegmezőbe, aztán testreszabni a CKEditorral.
Ha jogosultságok kellenek adott képekhez, akkor lehetne akár könyvtárszintű jogosultság is, ha a legegyszerűbbre gondolunk (pl. a felhasználókhoz saját könyvtárak tartoznak).
.
Na jó, nem, szóval segítünk. 
At kene irnod ugy, hogy a data egy tomb (nem objektum), es abban a megfelelo dolgokat kotorod ki.
A $(".city") jelölést is elrontottam, a pont helyett #-t raktam... 
![;]](http://cdn.rios.hu/dl/s/v1.gif)
Új hozzászólás Aktív témák
Hirdetés
- Hobby elektronika
- Motorolaj, hajtóműolaj, hűtőfolyadék, adalékok és szűrők topikja
- Kodi és kiegészítői magyar nyelvű online tartalmakhoz (Linux, Windows)
- Melyik tápegységet vegyem?
- iPhone topik
- Két nap múlva itt a Xiaomi 17, van egy pár hivatalos fotó is róla
- Samsung Galaxy S24 Ultra - ha működik, ne változtass!
- Telekom otthoni szolgáltatások (TV, internet, telefon)
- Akciókamerák
- Androidos tablet topic
- További aktív témák...
- Bontatlan E olvasó..
- Samsung Galaxy A53 5G 128GB, Kártyafüggetlen, 1 Év Garanciával
- A/C klima, with all pipes and remote
- iPhone 16 PRO 256GB fekete titán gyönyörű ISTYLE számla! Akku:99%! November 14-ig Apple garancia!
- Újszerű Lenovo Thinkpad T16 gen2 (13.gen Core I7 32Gb DDR5 1 Tb SSD) MAGYAR laptop 2 év garancia!!
- HIBÁTLAN iPhone 15 Pro 128GB Natural -1 ÉV GARANCIA - Kártyafüggetlen, MS3501, 90% Akkumulátor
- Clevo 1060 6GB Mxm 3.1 laptop videó kártya ingyen házhoz szálitással
- Gamer PC- Számítógép! Csere-Beszámítás! I7 4790K / 16GB DDR3 / RX 5700XT 8GB / 512GB SSD
- Xiaomi Redmi Note 10 Pro 128GB, Kártyafüggetlen, 1 Év Garanciával
- BESZÁMÍTÁS! ASUS H610M i5 12400F 16GB DDR4 1TB SSD RTX 4060 8GB Rampage Shiva Cooler Master 650W
Állásajánlatok
Cég: CAMERA-PRO Hungary Kft.
Város: Budapest
Cég: PCMENTOR SZERVIZ KFT.
Város: Budapest