HTML5 / CSS / JQuery Probléma

Indította Szilárd, 2014 március 01, 02:24:35 DÉLUTÁN

Előző téma - Következő téma

Szilárd

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

Zoltan

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


Szilárd

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

Zoltan

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
 

Szilárd

#4
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.
Java / C# / Swift Programmer

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

Zoltan

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>

Szilárd

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

Zoltan

tokeletes,  nem hiszem hogy  komoly problema lenne vele, kiveve ha nem  a magyar ebayt akarod megcsinalni :)

Archangel

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

Powered by EzPortal