Szerző Téma: HTML5 / CSS / JQuery Probléma  (Megtekintve 5157 alkalommal)

Nem elérhető Szilárd

  • Emulation Expert
  • Elvetemült
  • *****
  • Hozzászólások: 659
  • Java / C# / Swift Developer
  • Op. Rendszer: OS X / iOS
HTML5 / CSS / JQuery Probléma
« Dátum: 2014 Március 01, 03:24:35 pm »
Sziasztok!

Egy idegesítő problémába ütköztem, aminél megpróbáltam nagyon sok mindent, hogy megfelelő formára faragjam, de egyszerűen nem jött össze.

A lényeg az, hogy egy ehhez hasonló megvalósításom van: http://www.thepetedesign.com/demos/fly_sidemenu_demo.html

A "Click here!" gomb megnyomása után előcsúszó bal oldali menüben viszont nem fix számú opció áll rendelkezésemre, tehát nem tudok előre meghatározni 1 méretet, ami megjeleníti az opciókat megfelelően.
Scroll-t egyszerűen sehogy nem tudtam szülni a bal oldali <ul>-re, tehát nem lehet görteni megfelelően, így egy jó pár menüpont elérhetetlen.

A kérdésem az lenne, hogy hogyan is lehetne azt megvalósítani, hogy vagy ez egész oldal scrollolható legyen lefele, vagy pedig csak kizárólag az a bizonyos <ul> legyen scrollolható.

Válaszaitokat előre is köszönöm!

Szilárd
Java / C# / Swift Programmer

Apple
----------
OS X / iOS User
iPhone 6 Plus
iPad Air 2
MacBook Pro 13" Retina

Nem elérhető Zoltan

  • Újonc
  • *
  • Hozzászólások: 46
Re:HTML5 / CSS / JQuery Probléma
« Válasz #1 Dátum: 2014 Március 03, 06:36:13 pm »
add hozza:

<style>
.sidemenu {height:100%; overflow:scroll}
/* Scrollbar eltuntetese webkites bongeszobol */
                 .sidemenu::-webkit-scrollbar { width: 0 !important }
</style>


esetleg  ha mozzilara is akarsz optimalizalni:
overflow: -moz-scrollbars-none;


http://fbe.am/rir


Nem elérhető Szilárd

  • Emulation Expert
  • Elvetemült
  • *****
  • Hozzászólások: 659
  • Java / C# / Swift Developer
  • Op. Rendszer: OS X / iOS
Re:HTML5 / CSS / JQuery Probléma
« Válasz #2 Dátum: 2014 Március 05, 12:29:55 pm »
Köszönöm a segítséget!

Még egy dolog lenne, ami után már órák óta keresgélek szinte semmi eredménnyel.
Ez pedig az lenne, hogy újra szeretnék tölteni egy <div>-et, de nem úgy, hogy kap egy response-t a submittól, hanem teljes mértékben újratölteni.

Lényegében egy bevásárlókosárról lenne szó, ami úgy néz ki, hogy van egy <div> ami jelzi azt, hogy hány termék van benne (és ezzel lehet megnyitni az addig "hidden" <div>-et), a "hidden" <div> pedig tartalmazza a termékeket táblázat formájában.

Ezektől teljesen függetlenül van egy form, amivel hozzá lehet adni egy vagy több terméket a listához. Na és itt jön a bökkenő, mert mikor hozzáadom a terméket a listához, akkor erről engem figyelmeztet is a response, hogy sikeres volt a hozzáadás, de a "hidden" <div>-em értelem szerűen nem frissül még, nekem pedig pont, hogy arra lenne szükségem, hogy az is frissüljön, így jelezze, hogy a tartalom is megváltozott.

Tehát maga a probléma valahogy így nézne ki egyszerűsítve:


KOSAR = URES

GOMB - TERMEK - DARAB
   |
   +----> GOMB_MEGNYOM;
                   |         |
                   |         +----> $_SESSION["TERMEKEK"] <= TERMEK_HOZZAADASA;
                   |         +----> $_SESSION["DARABOK"] <= DARAB_HOZZAADASA;
                   +------------> RESPONSE_KIIR; DIV_FRISSIT;
                                                   |                          |
                                                   |                          |
              FELH_ERTESITVE <===+                         +======> KOSAR = TERMEK (DARAB)


A fent modellezett dolgot természetesen újratöltés nélkül szeretném megvalósítani.
Java / C# / Swift Programmer

Apple
----------
OS X / iOS User
iPhone 6 Plus
iPad Air 2
MacBook Pro 13" Retina

Nem elérhető Zoltan

  • Újonc
  • *
  • Hozzászólások: 46
Re:HTML5 / CSS / JQuery Probléma
« Válasz #3 Dátum: 2014 Március 05, 01:59:04 pm »
ajanlok egy jo alternativat: http://simplecartjs.org/
nem kell feltalalni ujbol a kereket ;)

ha magad szeretned megoldani kell  egy click handler a gombra 
http://api.jquery.com/click/
kell egy ajax async call
https://api.jquery.com/jQuery.ajax/
  -ami hozzaadja a sessionhoz a kulonfele dolgokat
  -es ha sikeres akkor  a visszateres erteket bedobjuk a hidden divbe
 

Nem elérhető Szilárd

  • Emulation Expert
  • Elvetemült
  • *****
  • Hozzászólások: 659
  • Java / C# / Swift Developer
  • Op. Rendszer: OS X / iOS
Re:HTML5 / CSS / JQuery Probléma
« Válasz #4 Dátum: 2014 Március 05, 02:43:41 pm »
Köszönöm a linket, de ezesetben saját megvalósítást szeretnék eszközölni.

A form submittal semmi gondom nincsen, kizárólag annyi a probléma, hogy:
Kód: (javascript) [Kijelölés]
function processForm(form) {
   $.ajax({
      type: 'POST',
      url: "/cart/cart.php",
      data: $(form).serialize(),
      success: function(data) {
         $(".message-box").html(data).hide().fadeIn(500);
         $(".message-box").delay(1600).fadeOut("slow");
      }
   });
}

A success részhez nem tudom mit kell írjak ahhoz, hogy a divem refresheljen, vagy esetleg utána milyen call-t kéne kiadnom.
Tehát a session-höz megtörténik a hozzáadás gond nélkül, de ahhoz, hogy lássam a változásokat, mindig frissítenem kell a honlapomat. Ezt szeretném megoldani úgy, hogy dinamikusan történjen, az oldal frissítése nélkül.

Tehát lényegében egy frissítésről lenne szó, nem a régi content újjal való lecseréléséről.
« Utoljára szerkesztve: 2014 Március 05, 02:46:39 pm írta Szilárd »
Java / C# / Swift Programmer

Apple
----------
OS X / iOS User
iPhone 6 Plus
iPad Air 2
MacBook Pro 13" Retina

Nem elérhető Zoltan

  • Újonc
  • *
  • Hozzászólások: 46
Re:HTML5 / CSS / JQuery Probléma
« Válasz #5 Dátum: 2014 Március 05, 03:07:29 pm »
Ha jol ertem van egy  hidden dived amibe vannak a  cuccok amit akar vasarolni a user, es szeretned ezt  frissiteni:

- vagy ugyesen lokalisan  frissited, szoval  ha sikeres volt a  cart.php visszaterese akkor generalsz bele egy ujabb tabla reszt es beleilleszted a targyat, es db-ot

- vagy a visszateresi erteket  irod bele egy divbe pl:
cart.php  visszater azzal az ertekkel hogy   
<table>
<tr>
<td> 12 darab</td>
<td> Wc kefe</td>
<td> 500Ft/db</td>
</tr>
</table>

Nem elérhető Szilárd

  • Emulation Expert
  • Elvetemült
  • *****
  • Hozzászólások: 659
  • Java / C# / Swift Developer
  • Op. Rendszer: OS X / iOS
Re:HTML5 / CSS / JQuery Probléma
« Válasz #6 Dátum: 2014 Március 05, 03:20:38 pm »
Egy teljesen egyszerű dolog lett végül a megoldás, ami kicsit fapados, de a célnak megfelel.
Van 2 független fájlom: fajl1.php, fajl2.php
A "fajl1.php" meghívja a hozzáadásos dolgot, megtörténik az array bővítése az új termékkel, majd success esetén közvetíti a response-t az user felé. Ezután pedig az adott div tartalmát (tegyük fel, hogy a div osztálya .cart-content) frissíti úgy, hogy:
Kód: (javascript) [Kijelölés]
$(".cart-content").load("fajl2.php .cart-content");
Természetesen ez a success blokkban történik meg.
Ha esetleg ez webfejlesztő szemmel kicsit durva megoldás, akkor szívesen várok javaslatokat, hogy mit és hogyan lehetne ezen improvolni. :)

Mindenesetre köszönöm a segítséget, és az időt, amit rám szántál!

Szilárd
Java / C# / Swift Programmer

Apple
----------
OS X / iOS User
iPhone 6 Plus
iPad Air 2
MacBook Pro 13" Retina

Nem elérhető Zoltan

  • Újonc
  • *
  • Hozzászólások: 46
Re:HTML5 / CSS / JQuery Probléma
« Válasz #7 Dátum: 2014 Március 05, 04:42:28 pm »
tokeletes,  nem hiszem hogy  komoly problema lenne vele, kiveve ha nem  a magyar ebayt akarod megcsinalni :)

Nem elérhető Archangel

  • Kezdő
  • **
  • Hozzászólások: 83
  • Op. Rendszer: W8.1x64
Re:HTML5 / CSS / JQuery Probléma
« Válasz #8 Dátum: 2014 Március 24, 02:40:03 am »
Rossz megoldás nincs, csak kevésbé effektív.

A célnak 100%-ban megfelel, szóval teljesen oké :D
JS-t elég nehéz összeegyeztetni phpval, szóval bőven jó lesz ez

 

Sitemap 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27