Kako CSS-om targetirati aktivan JS hide-show link?

[DiVeRgEnT]

Imam malu hide-show JS skripticu:


function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}


Kad kliknem link na kojem pozivam ovu skriptu, on otvori DIV koji je po
defaultu skriven. Kad kliknem opet na taj link, DIV se sakrije. DIV
*nije* child element od linka.

E sad bih ja htio da a:active ne traje samo prilikom klika, nego da
traje dok god je taj DIV otvoren, a kad opet kliknem link i DIV se
zatvori, zelim da time i a:prestaje-biti-active.

Dakle, zelim stilizirati link, ali ne samo na trenutak klika, nego dok
god se taj link opet ne klikne.

Najbolje sto sam uspio izguglati je Jquery funcija koja dodaje class dok
se opet ne klikne na link.

$('.button').click(function(){
if($(this).hasClass('active')){
$(this).removeClass('active')
} else {
$(this).addClass('active')
}
});

Nije to lose, ali moze li to netko pretvoriti u javascript bez potrebe
za Jquerijem?

--
Od kolijevke, pa do groba, za ispiranje mozga je doba.

http://zavjere.net (forum) | http://zavjere.com (blog)

[DiVeRgEnT]

DiVeRgEnT wrote:
> Imam malu hide-show JS skripticu:
>
>
> function hideshow(which){
> if (!document.getElementById)
> return
> if (which.style.display=="block")
> which.style.display="none"
> else
> which.style.display="block"
> }

Promijenio sam kljucne rijeci pretrage u dodavanje i micanje klase na
click (umjesto forsiranje a:active stanja) i nasao 3-4 skriptice koje na
JSfiddle super rade, ali kod mene to ne radi. Mozda se kod kolje s ovim
gore show/hide kodom?

[DiVeRgEnT]

DiVeRgEnT wrote:
> DiVeRgEnT wrote:
>> Imam malu hide-show JS skripticu:
>>
>>
>> function hideshow(which){
>> if (!document.getElementById)
>> return
>> if (which.style.display=="block")
>> which.style.display="none"
>> else
>> which.style.display="block"
>> }
>
>
> Promijenio sam kljucne rijeci pretrage u dodavanje i micanje klase na
> click (umjesto forsiranje a:active stanja) i nasao 3-4 skriptice koje na
> JSfiddle super rade, ali kod mene to ne radi. Mozda se kod kolje s ovim
> gore show/hide kodom?

Pa da nastavim raspravu sam sa sobom...

Skuzio sam zasto ove toogle skriptice ne rade. Prvo, sve koje imaju
dolar ispred, to je sve JQuery. :-)

Drugo, ovo sto je cisti javascript, kod treba staviti ISPOD tih linkova.

E sad sam upogonio jos jednu bolju funkciju. Ne samo da dodaje i mice
class na onclick event istog linka, nego mice class i kad kliknem na
DRUGI link, a tom drugom dodaje class.

Znaci, kliknem na .link #prvi, on mu doda class .active. Kliknem na
.link #drugi, on linku 1 makne .active, a linku 2 doda .active.

function toggleItem(elem) {
for (var i = 0; i < elem.length; i++) {
elem[i].addEventListener("click", function(e) {
var current = this;
for (var i = 0; i < elem.length; i++) {
if (current != elem[i]) {
elem[i].classList.remove('active');
} else if (current.classList.contains('active') === true) {
current.classList.remove('active');
} else {
current.classList.add('active')
}
}
e.preventDefault();
});
};
}
toggleItem(document.querySelectorAll('.link'));

Super, ali sad ne radi ona gore show-hide funkcija. :-)

Pa tko se razumije, molim da mi spoji te dvije funkcije da mogu
istovremeno raditi. A bilo bi super da onda i show-hide radi istu stvar
- da ne moram kliknuti isti link da sakrije DIV, nego i ako kliknem i
drugi link da sakrije prvi div, a prikaže taj drugi.

[Bruno Babic]

On 21.3.2017. 21:37, DiVeRgEnT wrote:
> Nije to lose, ali moze li to netko pretvoriti u javascript bez potrebe
> za Jquerijem?

Ja ti preporucam da koristis JQuery jer je to (IMHO) nesto najbolje sto
se dogodilo JavaScriptu u posljednje vrijeme.

--
bbabic(a)globalnet.hr
2b||!2b?

[DiVeRgEnT]

Bruno Babic wrote:
> On 21.3.2017. 21:37, DiVeRgEnT wrote:
>> Nije to lose, ali moze li to netko pretvoriti u javascript bez potrebe
>> za Jquerijem?
>
> Ja ti preporucam da koristis JQuery jer je to (IMHO) nesto najbolje sto
> se dogodilo JavaScriptu u posljednje vrijeme.

Pa jesam neki dan polomio zifce cijelu noc zasto mi ne radi onaj CSS3
efekat, pa se na kraju ispostavilo zato sto pozivam JQuery za neke druge
potrebe?

[Bruno Babic]

On 22.3.2017. 13:50, DiVeRgEnT wrote:
>> Ja ti preporucam da koristis JQuery jer je to (IMHO) nesto najbolje sto
>> se dogodilo JavaScriptu u posljednje vrijeme.
>
> Pa jesam neki dan polomio zifce cijelu noc zasto mi ne radi onaj CSS3
> efekat, pa se na kraju ispostavilo zato sto pozivam JQuery za neke druge
> potrebe?

Za pocetak ti napravi novu jednostavnu stranicu koja ti radi samo
zeljeni efekt sa jQueryjem i tek onda kada si zadovoljan rezultatom
pokusaj to ukomponirati u postojeci projekt jer ovako nikada ne mozes
biti siguran sto ti pravi probleme.

Napravi si neki file u kojem ces drzati sve inicijalne funkcije:
-- main.js begin --
jQuery(function () {

// tu pises sve jQuery funkcije

});
-- main.js end --

Zatim negdje u HTML-u ubacis taj main.js file:
<script src="/js/main.js"></script>

Nakon toga, u main.js dodajes sto ti treba, u stilu:
jQuery("#hide").click(function(){
jQuery("p").hide();
});

jQuery("#show").click(function(){
jQuery("p").show();
});

P.S. W3 schools ima puno primjera za jQuery.

--
bbabic(a)globalnet.hr
2b||!2b?

[DiVeRgEnT]

Bruno Babic wrote:
> P.S. W3 schools ima puno primjera za jQuery.

Aj dobro. Istina, nije kriva bila jQuery biblioteka, nego smooth scroll
funkcija iz te biblioteke.

Uglavnom, kako sate gubim guglajuci potrebne funkcije, pa onda jos sate
na modifikacijama, pa kad mi nista ne uspije jos sate ovdje na Usenetu,
rekoh, mozda ti savjet i nije los, bolje da potrosim par sati, pa nesto
bar pametno i naucim. Evo, nije jos ni 2 ujutro, a ja tokom veceri

1) vecerao
2) naucio jQuery u opsegu prezentiranom na w3 schools
3) oddrijemao, jer sam krepan, cijelu noc za kompom, a cijelo popodne
proljetni radovi oko kuce
3) nocna vecera uz jednu seriju
4) sa 6 linija koda implementirao sve sto sam trebao

:-)

Kazes, nemoj dati prosjaku ribu da se najede, nego mu daj stap i nauci
ga pecati. ;-)

Ok, hvala.

[DiVeRgEnT]

DiVeRgEnT wrote:
> 4) sa 6 linija koda implementirao sve sto sam trebao

Dodao sam jos neke didja midje. Sad mi ne radi kako treba ovaj dio funkcije:

if ($(this).is(':visible')) {
$(".link").not(".selected").toggleClass("not-selected");
}

Znaci klikom na .link otvara se neki div i taj link dobiva klasu .selected.

Ja sad hocu gornjim kodom da u isto vrijeme svi drugi linkovi dobiju
klasu .not-selected. Pa kako klikam pojedine linkove, selektirani
dobivaju klasu .selected, a neselekitrani .not-selected.

Medjutim, ovako kako sam napisao kod, stvarno se kod izvrsi ispravno,
ali samo pri kliku na prvi link. Ako ga ne kliknem ponovno i time ugasim
funkciju (zatvorim div), nego kliknem neki drugi link, onda se klasa
.not-selected tugla, znaci ugasi na SVIM neselektiranim linkovima. Pa
pri slijedecem kliku upali na svim neselektiranim linkovima, itd.

addClass ce samo nadodavati. Znaci moram dodavati i brisati, ali ne
tuglati. Probao sam i ovako:

if ($(this).is(':visible')) {
$(".link").not(".selected").addClass("not-selected");
$(".link").filter(".selected").removeClass("not-selected");
}

Ima potencijala, ali ni to bas ne funkcionira kako treba; tek na svaki
drugi-treci klik dodje u stanje koje zelim. :-)

[DiVeRgEnT]

DiVeRgEnT wrote:
> if ($(this).is(':visible')) {
> $(".link").not(".selected").addClass("not-selected");
> $(".link").filter(".selected").removeClass("not-selected");
> }
>
> Ima potencijala, ali ni to bas ne funkcionira kako treba; tek na svaki
> drugi-treci klik dodje u stanje koje zelim. :-)

Ma kita, ovaj if mi se kolje s tuglanjem klase select koji vise ne radi
kako treba. Evo cijele funkcije:

$(document).ready(function () {
var $targets = $(".div");
$(".link").click(function () {
$(this).toggleClass("selected");
var $target = $($(this).data("target")).fadeToggle("slow");
$targets.not($target).hide();

if ($(this).is(':visible')) {
$(".link").not(".selected").addClass("not-selected");
$(".link").filter(".selected").removeClass("not-selected");
}

});
});

[DiVeRgEnT]

DiVeRgEnT wrote:
> DiVeRgEnT wrote:
>> if ($(this).is(':visible')) {
>> $(".link").not(".selected").addClass("not-selected");
>> $(".link").filter(".selected").removeClass("not-selected");
>> }
>>
>> Ima potencijala, ali ni to bas ne funkcionira kako treba; tek na svaki
>> drugi-treci klik dodje u stanje koje zelim. :-)
>
>
> Ma kita, ovaj if mi se kolje s tuglanjem klase select koji vise ne radi
> kako treba. Evo cijele funkcije:

Hehehe... Pocetak druge veceri programiranja u jQuery-ju i gle:

$(this).addClass("selected").removeClass("not-selected").siblings().removeClass("selected");
$(this).siblings().addClass("not-selected");

Radi ko vurica.

Oh, I'm a mean jQuery motherfucker! :-)

[Bruno Babic]

On 23.3.2017. 19:53, DiVeRgEnT wrote:
> Oh, I'm a mean jQuery motherfucker! :-)

Uskoro ces se zapitati zasto si uopce ikada programirao JavaScript bez
jQueryja :)

--
bbabic(a)globalnet.hr
2b||!2b?

[DiVeRgEnT]

Bruno Babic wrote:
> On 23.3.2017. 19:53, DiVeRgEnT wrote:
>> Oh, I'm a mean jQuery motherfucker! :-)
>
> Uskoro ces se zapitati zasto si uopce ikada programirao JavaScript bez
> jQueryja :)

Dapace, uskoro cu reci joj kak sam pametan sto nikad nisam naucio ni
pola linije koda javascripta, a sad s par linija jQuery-a radim cuda. ;-)

A ima li tako neko cudo s PHP-om sto se nauci za jednu noc? Jer sam
njega u vise navrata ucio, pa nesto i naucio, ali sve do neke niske
razine primjene...

[Bruno Babic]

On 24.3.2017. 12:01, DiVeRgEnT wrote:
> A ima li tako neko cudo s PHP-om sto se nauci za jednu noc? Jer sam
> njega u vise navrata ucio, pa nesto i naucio, ali sve do neke niske
> razine primjene...

Nema nista sto bi bilo pandan jQueryju, ali imas razne frameworke koji
ti vise-manje omogucju nesto brzi development i manje zaje*ancije sa
bazama podataka.

--
bbabic(a)globalnet.hr
2b||!2b?