» »

jquery in div-i

strani: « 1 2

mk818764 ::

Imam stran kjer je meni, da uporabnik lahko izbira kaj se mu prikaže.
Ko klikne nek gumb se mu prikaže vsebina diva. Ko klikne drugi gumb se mu pokaže druga vsebina, prva pa skrije.
Problem:
vsebine imam v divih. Ko se skrije prvi div in se pokaže drugi, je na mestu prvega diva prazen prostor, drugi div pa se pomakne za toliko vrstic koliko zaseda prvi div.

Jaz bi rad, da se različne vsebine prikažejo na istem mestu, torej verjetno bom rabil samo en div. Tu pa mam očitno zgrešeno logiko, da uporabljam več divov.

Kaka elegantna rešitev? Ali je je ta logika fuč, da mi jquery pokaže različne vsebine v različnih divih? v jquery sem novinec.

JayKay ::

malo kode bi lahko skopiral sem da vidimo, ali pa dal link vsaj ce je live
Frontend developer @ TUI Travel
IGLOO: very cool

mk818764 ::

nimam še nič konkretnega, le zamisel ki razvijam
Gumbi
<li><button id=test1>1.Skrij/pokaži</button></li>
<li><button id=test2>2.Skrij/pokaži</button></li>

script
<script type="text/javascript">
$("#test1").click(function () {
   $("#div1").toggle(1000);
   $("#div2").hide(500);
});

$("#test2").click(function () {
   $("#div2").toggle(1000);
   $("#div1").hide(500);
});
</script>

html
<div id="div1" style="display:none"><font color="red"> div 1 - Testiram če dela show - hide</font></div>
<br /><br /><div id="div2" style="display:none"><font color="blue">div 2 - Testiram če dela show - hide</font></div>

tomazic89 ::

Prazne vrstice se ti pojavljajo zaradi br/
To dvoje odstrani, in se bo prikazani div vedno pokazal na enakem mestu.
ker je div 'block level' element, bo po defaultu vsak v svoji vrstici, tako da br ni potreben (niti pa nikoli nista oba prikazana).

lp, Nejc


edit: svetujem ti uporabo Chrome brskalnika in desni klik na element ter 'inspect element'. Tam vidis dejansko strukturo htmlja. Enako lahko pregledujes tudi z Firebug dodatkom za Mozillo.

Zgodovina sprememb…

Matek ::

Logika z dvema divoma je pravilna. Če bi samo spreminjal vsebino enega, bi moral imeti neprikazano vsebino nekje v skripti, kar pa semantično ni najbolje. Za prazen prostor pa sta kriva line break elementa.
Bolje ispasti glup nego iz aviona.

JayKay ::

ce pustimo, da je zadeva non accessible (po defaultu s css skrita vsebina), pol so ti zgoraj odgovorili kje je problem
Frontend developer @ TUI Travel
IGLOO: very cool

mk818764 ::

Dela ko odstranim br značko. Hvala vam.
Še eno vprašanje
$("#test1").click(function () {
   $("#div2").hide(500);
   $("#div3").hide(500);
   $("#div1").toggle(1000);
});

se da kako drugače naret, da skrijem druge dive kot da kličem vsakega pa mu določim hide(tudi če ni odprt). Namreč, če maš veliki meni, nastane lahko iz tega klobasa.

steev ::

Obesi jim skupen klas gor. Npr. class="div".
$('.div').hide(500);

Samo morš spet na vsak gumb obesit event. Najbolje bi blo met div znotrej li-ja, zreven gumba. Pa bi lahko en event obesil na vse.
:|

mk818764 ::

JayKay je izjavil:

ce pustimo, da je zadeva non accessible (po defaultu s css skrita vsebina), pol so ti zgoraj odgovorili kje je problem


lahko še to malo pojasniš?

JayKay ::

tisti ki nimajo javascript vklopljenega te vsebine v divih nikdar ne bodo videli.
Frontend developer @ TUI Travel
IGLOO: very cool

mk818764 ::

Aha, ok, to razumem. To je rešljivo na več načinov. Nekateri tudi uporabnikov neprijazni načini :D

alexa-lol ::

JayKay je izjavil:

tisti ki nimajo javascript vklopljenega te vsebine v divih nikdar ne bodo videli.


tiste, ki nimajo vklopljenega JS bi morali pretepst, obest, zadavt in zažgat. Cel sistem zjebejo.

Matek ::

Da ne kličeš hide-a vsakič za vse dive, lahko tistemu, ki ga prikažeš, s toggleClass nastaviš nek class. Recimo takole.

Drugače pa lahko dalje razmišljaš tudi o tem, kako bi lahko imel namesto ločene funkcije za vsak gumb eno skupno.
Bolje ispasti glup nego iz aviona.

Lion29 ::

kaj imajo BRji tle veze mi ni jasno?

ce skrijes div (jQuery hugh dodeli display: none ;) se mora skriti VSA vsebina notri v divu.. vkljucno z BRji in Pji in vsem kar je notri

font tag je deprecated ze zelo dolgo

tako kot je nekdo omenil, daj en skupen class gor ali pa jih ciljaj prek wrapperja

recimo primer s cimmanj markupa, ampak si malo omejen potem

JSFiddle


<ul id="tabs">
    <li><a href="#">Test 1</a></li>
    <li><a href="#">Test 2</a></li>
    <li><a href="#">Test 3</a></li>
</ul>

<div id="panel_wrapper">
    <div>div 1</div>
    <div>div 2</div>
    <div>div 3</div>
</div>

<script type="text/javascript">
$("#tabs a").click(function (e) {
    e.preventDefault();
    $("#panel_wrapper>div").hide(); //skrijemo vse dive (prvi nivo)
    var idx = $(this).closest('li').index(); //preverimo kateri menu smo kliknli po vrsti
    $("#panel_wrapper>div:eq("+idx+")").show(); //prikazemu ustrezni panel
});




pa se primer z dodatnim markupom, za boljse ciljanje in vecjo fleksibilnost

JSFiddle

<ul id="tabs">
    <li><a href="#" rel="div1">Test 1</a></li>
    <li><a href="#" rel="div2">Test 2</a></li>
    <li><a href="#" rel="div3">Test 3</a></li>
</ul>

<div id="panel_wrapper">
    <div id="div1" class="panel">div 1</div>
    <div id="div2" class="panel">div 2</div>
    <div id="div3" class="panel">div 3</div>
</div>

<script type="text/javascript">
$("#tabs a").click(function (e) {
    e.preventDefault();
    $("#panel_wrapper div.panel").hide(); //skrijemo vse s classom "panel"
    var rel = $(this).attr('rel'); //dobimo ven rel vrednost
    $("#panel_wrapper div#"+rel).show(); //prikazemu ustrezni panel
});



seveda lahko to pol obracas in kombiniras po zelji.... glej da bo tudi html koda cimbolj semanticna
Frontend UI/UX developer

Zgodovina sprememb…

  • spremenil: Lion29 ()

Matek ::

ce skrijes div (jQuery hugh dodeli display: none ;) se mora skriti VSA vsebina notri v divu.. vkljucno z BRji in Pji in vsem kar je notri
On je imel brje izven divov in so seveda ostali in ustvarjali "prazen prostor" :).
Bolje ispasti glup nego iz aviona.

Lion29 ::

Frontend UI/UX developer

Zgodovina sprememb…

  • spremenil: Lion29 ()

mk818764 ::

Hvala, bom uporabil zadeve, da bo boljše.
Sedaj še pa eno težjo(ko ste tolk prijazni :D )
ko kliknem nek div, recimo div 1 in mi pokaže vsebino, bi pa not bil še en gumbek(v tej vsebini) kjer bi mi pokazalo še dodatno vsebino. Kako prikaže pa ne vem, ker nisem glih dober v oblikovanju, še manj v jquery.
Mogoče v kakem novem okencu?. Kak slide navzdol, kaj pa vem.
Lion29 mas kako idejo, glede na to da si webdeveloper?

Lion29 ::

po zelji... moznosti so neomejene... od slidanja dol, do fadeanja in... kot TIP, kot popup, etc, etc...po zelji

jaz ti priporocam za zacetek, da se sprehodis po kakih modernih straneh in si jih zberes v eno mapo... da bos mel za zgled... ko bos imel vse na kupu... si na list narisi nek wireframe, vse elemente in kaj moras prikazovat.... ko bos imel vse elemente zbrane, se pol odloci kako bos to prikazoval, da bo cimbolj jasno in preprosto za uporabo...

UI in UX je za vecinoma trial/fail, ce nimas vseh elementov jasno zbranih in jasnih idej v glavi...

skratka igraj se, preizkusaj najrazlicnejse stvari... ob tem se bos ucil in dobil neke izkusnje kaj "spila" in kaj ne
Frontend UI/UX developer

mk818764 ::

kaj pomeni tale vrstica?
$("#tabs a:eq(0)").trigger("click");

galu ::

Isto ko
$("#tabs a").eq(0).click(function(){});


le da pri tvoji kodi še moraš eno funkcijo pripeti
.bind("click",function(){});

k elementu.

edit: beeeh, podpičja, narekovaji, grammar faili...
Tako to gre.

Zgodovina sprememb…

  • spremenil: galu ()

Lion29 ::

mk818764 je izjavil:

kaj pomeni tale vrstica?
$("#tabs a:eq(0)").trigger("click");


pomeni, da sprozis (trig) event click, ki smo ga predhodno bindali...

torej poskrbimo da ko se stran nalozi sprozimo (umetno) klik na prvo link
Frontend UI/UX developer

mk818764 ::

aha...
nekaj sem opazil.
@Lion, uporabil sem tvojo funkcijo, s tem da sem spremenil v .toogle.
Če uporabim tvojo, tekst zgine v trenutku, in iz leve se "pripelje" novi.
Če uporabi, tisto kar sem jaz napisal zgoraj pa se tekst najprej "odpelje" v levo, nato iz leve "pripelje" novi.
Kako je možno če vedno uporabil .toggle() ?

Lion29 ::

pravilno je uporabit v tem primeru seveda SHOW

toggle je samo inverzna funkcija... če je prikazano se bo skril, če je skrito, se bo prikazalo... deluje pa čisto isto kot če bi poklical show ali hide...

zakaj se pa tebi "pripelje" pa nimam pojma (mogoče imaš v CSSjih kak transition) ... toggle (show/hide) samo prikaže in skrije, brez animacij
Frontend UI/UX developer

mk818764 ::

hm, našel "napako".
dodal sem vrednost v hide, pa zdaj se "odpelje".
$("#panel_wrapper>div").hide(500);

mk818764 ::

ugotovil sem kako bi naredil, toda tukaj manjka css, tako da zadeva ne špila kot bi morala
Accordion

po mojem manjka tale koda. naj kdo pove če se motim.
<link rel="stylesheet" href="/resources/demos/style.css" />

drugačepa je fanci ta zadeva

alexa-lol ::

ne vem točno kaj je težava... tm is View source skupiram v jsfiddle in dela
http://jsfiddle.net/zfqHv/1/

Drugače v style.css so samo za en tag lastnosti... je zdaj tako našitman da je link absoluten in dela.

mk818764 ::

ej, hvala ti za tole. Sicer še mi vedno ne dela, tako da očitno je napaka drugje. Bom jo že našel.

Mimogrede, če dam javascript v svoj fajl(recimo: jquery.php), mi zadeva ne špila, če pa vključim v stran pa dela.Pri drugih straneh kar sem delal, pa to ni problem. Ni mi jasno zakaj tu ne dela. Bi bla koda bolj pregledna.

alexa-lol ::

ne vem zakaj bi dajal JavaScript v .php file... daš ga v .js

Recimo da daš tist skripto ( $(function() { ... }); ) v file script.js, ki se nahaja v istem direktoriju kot tale index.php oz. kakorkoli poimenuješ stvar potem dodaš namesto tistega med
<script />
tole
<script src="./script.js"></script>


Možno je tudi da ne dela ker ne daš zraven $( ... ); ker ta oklepaj pomeni, da se skripta izvrši ko je struktura strani narejena (DOM) -> http://stackoverflow.com/questions/3880... ob tem pa link do scripte podaš že ne začetku strani in potem se skripta navezuje na elemente, ki takrat še ne obstajao (zaporedno izvajanje in to), npr. tale $( "#accordion" )

mk818764 ::

alexa-lol je izjavil:

ne vem točno kaj je težava... tm is View source skupiram v jsfiddle in dela
http://jsfiddle.net/zfqHv/1/

Drugače v style.css so samo za en tag lastnosti... je zdaj tako našitman da je link absoluten in dela.


Mučim se tule ko hočem, da mi polje z tekstom odpre na velikost, ki je prilagojena tekstu. Pa mi nekako ne grata. Če popravim fajl .css tako, da dam height: 100% naredi povečano polje, dočim če imam 1 vrstico je dost praznega, če mam preveč teksta pa je okno premalo. height:auto ne deluje.

Hvala vsem za nasvete.

alexa-lol ::

am.. ena izmed teh skript, ki jih kličeš nastavi velikost okvirčka na 84px.
Probaj da za to skripto script.js dodaš neko skripto, ki spremeni to lastnost
nekaj takega
$(function() { 
    $('.ui-accordion-content').each(function() {
        $(this).css('height','auto');
    });
});


oz. lahko dodaš čisto pred konec script.js tole (brez $(function() { ... }) )

PS. imaš na linku updatano verzijo http://jsfiddle.net/zfqHv/2/

Zgodovina sprememb…

mk818764 ::

Hvala, zdaj mi vse dela kot želim. še dost se bom moral naučit tega css, toda na primerih se res lahko dost naučiš.

alexa-lol ::

No tukaj ni bil problem CSS ampak ena JS skripta, ki glede na ne vem kakšne paramtere vskamu tagu s classom "ui-acordion-content" doda neko višino, da lepše zgleda "baje".

Za tako "detektivsko" delo je najbolši Chrome kjer daš "Preglej element" in točno vidiš kater stil je na element pripet in vse živo zraven, ker teh 84px se ne nahaja v nobeni .css mapi ampak ta skripta dinamično zgenerira to višino glede ne neke parametre in pripne elementu.

mk818764 ::

No, vem da je vse na googlu, toda nedelja je :D
Znam naret kako poslat mail preko obrazca iz s pomočjo php.
Toda v jquery je lahko to lepše narejeno, brez osveževanja strani

sendmail.php deluje, to ni problem
obrazce imam tudi narete.

Kako pa naredim del z jquery, da pošljem podatke na sendmail.php ?
Kako vključim zadevo v obrazec?
preverjanja email in ostalega ne rabim.

Če se komu ljubi, drugačee bom pa jutri googlal.

Pa lepo nedeljo :)

Lion29 ::

ja pa kaj si mislis? da bomo podpirali tvojo lenobo?
raje si 2x napisal, da bi lahko pogooglal namesto da bi dejansko googlal :(

jQuery API docs
jQuery UI API docs

Kako začeti
jQuery za popolne začetnike - VIDEO tutoriali
jQuery tztoriali za začetnike


Submit A Form Without Page Refresh using jQuery
25 jQuery Tutorials for Creating and Working with Forms

upam, da sem potesil tvojega trola
Frontend UI/UX developer

alexa-lol ::

$.ajax({ ... }); -> http://api.jquery.com/jQuery.ajax/

$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});

za data daš pa tole.. http://api.jquery.com/serialize/ kar ti form nekak obdela.

Potem ta request na serverju handlas pa tkole
$lastnost = $_POST['abc'], kjer je abc menda tist name pri inputu oz, če ni name je pa value.

mk818764 ::

no, ne se jezit, saj bom poguglal. Samo se mi danes ne ljubi, priznam, len sem.
Bom pa vseeeno še vprašal nekaj.
Sem si potegnil dol js fajle, tiste z code.jquery.com. Nikol ne ves daj crkne povezava do tja. Pa mi c chromu lepo zadeva špila v IE pa ne.

mk818764 ::

no, danes se cel dan mučim z nečim, kar v php-ju deluje brez problema od šuba.
kaj delam narobe?
$(function(){

	$("#submit-button").click(function(){
		
		$("#loading").fadeIn(100).show();
		
		var from = $("#from").val();
		var subject = $("#subject").val();
		var content = $("#content").val();
		
		var mydata = "from=" + from + "&subject=" + subject + "&content=" + content;
		
		if(from == ""){
			
			$("#error-from").fadeIn(700).show();
			$("#loading").fadeOut(100).hide();
			
		}else if(subject == ""){
			
			$("#error-subject").fadeIn(700).show();
			$("#loading").fadeOut(100).hide();
			
		}else if(content == ""){
			
			$("#error-content").fadeIn(700).show();
			$("#loading").fadeOut(100).hide();
			
		}else{
		
			$.ajax({
				type: "POST",
				url: "send.php",
				data: mydata,
				success: function(){
					
					$("#loading").fadeOut(100).hide();
					$("#form").fadeOut(100).hide();
					$('#message-sent').fadeIn(500).show();
				}
			});
			
		}
		
	});	
	
});

drugi fajl v php
<?php
$to = "mojmail@gmail.com";
$from = $_REQUEST['from'];
$message = $_REQUEST['content'];
$subject = $_REQUEST['subject'];
$header = "From: <".$from.">" ."\r\n";

mail($to, $subject, $message, $header);
?>


pa še obrazec
<div id="form">
   <p> Your e-mail:
        <input type="text" style="background-color: #F2EBAE;" size="30" maxlength="40" name="from" />
      </p>
      <p>
        Subject:&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="text" style="background-color: #F2EBAE;" size="30" maxlength="50" name="subject" />
        </p>
      <p>Message:<br />
            <textarea rows="10" cols="50" wrap="physical" name="content"></textarea>
            <br /><br />
			<center>
            <input type="button" id="submit-button" value="Send message" />
        </p>
</div>
	<div style="display: none;" id="loading"><img src="slike/loading.gif" /><h2>Sending..</h2></div>
	<div style="display: none;" id="message-sent"><h1>Message sent!</h1></div>


Zakaj ne špila zadeva?
na indexu mam vklječeno
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Zgodovina sprememb…

  • spremenil: mk818764 ()

Lion29 ::

in kje imas obrazec?

<form>
?

predlagam, da se prvo naucis osnove HTMLja in potem postopoma nadgrajujes
Frontend UI/UX developer

mk818764 ::

Saj pa mam polja poimenovana in od tam dobim podatke.

Lion29 ::

to sploh nima veze... nauci se osnov (semanticni elementi) pol gres lahko naprej...


v tvojem primeru:
var mydata = "from=" + from + "&subject=" + subject + "&content=" + content;


zgradis query string...

 $.ajax({
                type: "POST",
                url: "send.php",
                data: mydata,


tukaj pa za data dolocis objekt, ki pa je v bistvu query string

torej naredi tako:

 $.ajax({
                type: "POST",
                url: "send.php",
                data: {
                   from: from,
                   subject: subject,
                   content: content
                },...


ce pa zelis poslati kot get, pa lahko pustis data prazno... in dodas v url

 $.ajax({
                type: "GET",
                url: "send.php?"+mydata,
               ...


to bi lahko delalo tudi kot POST seveda, glede na to, da v PHPju lovis $_REQUEST

pa priporocam ti, da poimenujes spremenljivke drugace kot fielde:

recimo:


var from_data = $("#from").val();
var subject_data = $("#subject").val();
var content_data = $("#content").val();

$.ajax({
                type: "POST",
                url: "send.php",
                data: {
                   from: from_data,
                   subject: subject_data,
                   content: content_data
                },...
Frontend UI/UX developer

mk818764 ::

koliko vidim si ti samo spremenil od moje kode
   from: from_data,
                   subject: subject_data,
                   content: content_data

jaz sem pa pač vse skupaj poslal v data:mydata.

Lion29 ::

zelo slabo vidis

preberi si se enkrat vsako besedo po vrsti
Frontend UI/UX developer

mk818764 ::

berem spreminjam...edino kar že celi čas dosežem je da mi pošlje mail brez podatkov. vsa tri polja so prazna, tako da vse piše unknown...kot da ne bi send.php dobil podatkov.

Lion29 ::

no, dej postaj na jsfiddle, tocno kaj mas
Frontend UI/UX developer

mk818764 ::

upam, da sem uredu naredo.

http://jsfiddle.net/2uTAH/2/

Lion29 ::

zato ker nimas na input fieldih nastimant ID ampak samo NAME atribut

zamenjaj name z id tako kot tle in ti bo delalo
Frontend UI/UX developer

mk818764 ::

ej, hvala ti, deluje. 1000x hvala! Ne bi sam najdo napake.

Maš pivo v dobrem!

mk818764 ::

malo še bom gnjavil...
eno stvar še samo moram naret.
mam menu kateri deluje preko jquery-ja
Zgleda takole
<ul id="tabs">
	<li><a href="#" rel="div1"><span>izbor 1</span></a></li>
    	<li><a href="#" rel="div2"><span>izbor 2</span></a></li>
	<li><a href="#" rel="div3"><span>izbor 3</span></a></li>
  	</ul>

Rad bi naredil da izbrani tab(menu gumb) ostane pobarvan drugače.
Nekaj sem brskal, pa ne najdem nič pametnega.

Zgodovina sprememb…

  • spremenil: mk818764 ()

Lion29 ::

v cssju anredis

#tabs li.selected{
    background:#880000; color: #fff;
}


in pol v jQueryju das... ko je li.a click

$('#tabs li a').click(function(e){
e.preventDefault();
$('#tabs>li').removeClass('selected');
$(this).closest('li').addClass('selected');
});
Frontend UI/UX developer

mk818764 ::

Ziher se da to kako združit z kodo ki je na začetku teme:
$("#tabs a").click(function (e) {
    e.preventDefault(); //preprecimo izvajanje default obnasanja
    
    $("#panel_wrapper>div").hide(500); //skrijemo vse dive (prvi nivo)
    var idx = $(this).closest('li').index(); //preverimo kateri menu smo kliknli po vrsti
    $("#panel_wrapper>div:eq("+idx+")").toggle(1000); //prikazemu ustrezni panel
});
$("#tabs a:eq(0)").trigger("click");
strani: « 1 2


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 423 24 25 26 )

Oddelek: Izdelava spletišč
1295160742 (11395) Tody
»

[JavaScript] Spreminjanje ozadja

Oddelek: Programiranje
7218 (162) Cvenemir
»

CSS - DIV - Brez Tabele

Oddelek: Izdelava spletišč
23821 (524) jernejp
»

javascript jquey slidshow + dodatek (kako?)

Oddelek: Izdelava spletišč
6245 (182) frudi
»

JavaScript + fade

Oddelek: Izdelava spletišč
161012 (647) arjan_t

Več podobnih tem