| Yazar |
Mesaj |
-
kutsalsoz
Acemi Üye
|
 09.06.2017, 18:39 (UTC)
Mesaj konusu: javascriptte üzerine tıklanınca açılan div ya |
|
|
mesela şöle bir örnek verirsem bir yazının üzerini tıklayınca altına div kutusu açıcak tekrardan aynı yazıyı tıklayınca div kutusu kaybolucak bunu nasıl yapabilirim ? uğraştım ama dışarıyı tıklayınca kayboluyor ben dışarı tıklayınca kaybolsun istemiyorum sadece aynı yeri tıklayınca (yani yazıyı) kaybolsun istiyorum yardım ederseniz sevinirim
En son kutsalsoz tarafından 09.06.2017 18:41:01 tarihinde değiştirildi, toplam 1 kere değiştirildi
|
|
|
↑
|
|
 |
-
okanizm
Uzman Üye
|
10.06.2017, 17:00 (UTC)
Mesaj konusu: |
|
|
.html
Kod: <div class="css-toggle">CSS ile Gizle/Göster
<span>Bu eleman <b>.css-toogle</b>'ın içerisinde olması gerek</span>
</div>
.css
Kod: .css-toggle{
color:white;
background-color:tomato;
}
.css-toggle:hover span{display:block;}
.css-toggle span{
display:none;
color:#111;
}
js kullanarak yapmak isterseniz
.html
Kod: <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="js-toggle">jQuery ile Gizle/Göster
<span>Bu elemanın nerede olduğunun önemi yok.</span>
</div>
.js
Kod: .js-toggle{
color:white;
background-color:CornflowerBlue;
}
.js-toggle span{
display:none;
color:#111;
}
$(".js-toggle, .js-toggle span").on("mouseenter", function() {
$(".js-toggle span").css( "display", "block" );
}).on("mouseleave", function() {
$(".js-toggle span").css( "display", "none" );
});
[/code] ______________  Google Play Developer |
|
|
↑
|
|
|
-
kutsalsoz
Acemi Üye
|
10.06.2017, 17:09 (UTC)
Mesaj konusu: |
|
|
okanizm yazmış: .html
Kod: <div class="css-toggle">CSS ile Gizle/Göster
<span>Bu eleman <b>.css-toogle</b>'ın içerisinde olması gerek</span>
</div>
.css
Kod: .css-toggle{
color:white;
background-color:tomato;
}
.css-toggle:hover span{display:block;}
.css-toggle span{
display:none;
color:#111;
}
js kullanarak yapmak isterseniz
.html
Kod: <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="js-toggle">jQuery ile Gizle/Göster
<span>Bu elemanın nerede olduğunun önemi yok.</span>
</div>
.js
Kod: .js-toggle{
color:white;
background-color:CornflowerBlue;
}
.js-toggle span{
display:none;
color:#111;
}
$(".js-toggle, .js-toggle span").on("mouseenter", function() {
$(".js-toggle span").css( "display", "block" );
}).on("mouseleave", function() {
$(".js-toggle span").css( "display", "none" );
});
[/code]
bu senin yazdığın jquery kodu bana sadece javascript lazım  |
|
|
↑
|
|
|
-
okanizm
Uzman Üye
|
11.06.2017, 15:50 (UTC)
Mesaj konusu: |
|
|
kutsalsoz yazmış:
bu senin yazdığın jquery kodu bana sadece javascript lazım
@kutsalsoz
jquery bir javascript framework'üdür. Javascripti kolaylaştırmak adına derlenen bir kütüphane yani. Html için hazırlanmış bootstrap gibi düşün.
Jquery css ile yapamazsan diye verdiğim örnekti. İlk örnek css daha kolay. ______________ Google Play Developer
En son okanizm tarafından 11.06.2017 15:51:36 tarihinde değiştirildi, toplam 1 kere değiştirildi
|
|
|
↑
|
|
|
-
kutsalsoz
Acemi Üye
|
11.06.2017, 17:08 (UTC)
Mesaj konusu: |
|
|
okanizm yazmış: kutsalsoz yazmış:
bu senin yazdığın jquery kodu bana sadece javascript lazım
@kutsalsoz
jquery bir javascript framework'üdür. Javascripti kolaylaştırmak adına derlenen bir kütüphane yani. Html için hazırlanmış bootstrap gibi düşün.
Jquery css ile yapamazsan diye verdiğim örnekti. İlk örnek css daha kolay.
okancım jquerynin neden kullanıldığını biliyorum senden sadece javascript kodunu istememin sebebi javascripti daha yeni öğreniyorum daha yeni başladım bişiler yapmaya çalışıyorum örneklerle o yüzden sizden yardım almak istiyorum bildiklerinizi aktarırsanız sevinirim yani sadece javascript kodlarıyla jquery kullanmadan yazabilirsem benim için iyi olcak enazından işin mantığını kavramış olucam ve sonra jquerye geçicem |
|
|
↑
|
|
|
-
okanizm
Uzman Üye
|
11.06.2017, 19:51 (UTC)
Mesaj konusu: |
|
|
Karşındaki insanın yaşını bilmeden cığım lı konuşmamalısın. Ben senin arkadaşın dahi değilim.
İlk yazdığından js hakkında hiçbir şey bilmediğini düşünerek hazır kod verdim. Daha sonra ki yazdıklarından aslında bu konu hakkında ön bilgi sahibi olduğunu ancak işin içinden çıkamadığını bir noktada tıkandığını anladım. Genelde bu tür sorunlarda, yazabildiğiniz mevcut örneği buraya ekleyerek, bu şekilde yaptım ama olmadı tarzında sorarsanız, sizin nerede yanlış veya hatalı bir kullanım yaptığınız daha çabuk ortaya çıkar. Sorun daha hızlı çözüme kavuşur. Ortada bir örnek yok biz de müneccim değiliz. ______________ Google Play Developer |
|
|
↑
|
|
|
-
kutsalsoz
Acemi Üye
|
11.06.2017, 20:55 (UTC)
Mesaj konusu: |
|
|
okanizm yazmış: Karşındaki insanın yaşını bilmeden cığım lı konuşmamalısın. Ben senin arkadaşın dahi değilim.
İlk yazdığından js hakkında hiçbir şey bilmediğini düşünerek hazır kod verdim. Daha sonra ki yazdıklarından aslında bu konu hakkında ön bilgi sahibi olduğunu ancak işin içinden çıkamadığını bir noktada tıkandığını anladım. Genelde bu tür sorunlarda, yazabildiğiniz mevcut örneği buraya ekleyerek, bu şekilde yaptım ama olmadı tarzında sorarsanız, sizin nerede yanlış veya hatalı bir kullanım yaptığınız daha çabuk ortaya çıkar. Sorun daha hızlı çözüme kavuşur. Ortada bir örnek yok biz de müneccim değiliz.
bana bak bana düzgün konuş tamammı madem müneccin yok ozaman muhallebi çocukları gibi al ödevini ders çalış tamammı annen sana süt içirsin yat yatağı uykun gelmiştir şimdi senin.. |
|
|
↑
|
|
|
-
biryaziatolyesi
Uzman Üye
|
11.06.2017, 21:58 (UTC)
Mesaj konusu: |
|
|
kutsalsoz yazmış: okanizm yazmış: Karşındaki insanın yaşını bilmeden cığım lı konuşmamalısın. Ben senin arkadaşın dahi değilim.
İlk yazdığından js hakkında hiçbir şey bilmediğini düşünerek hazır kod verdim. Daha sonra ki yazdıklarından aslında bu konu hakkında ön bilgi sahibi olduğunu ancak işin içinden çıkamadığını bir noktada tıkandığını anladım. Genelde bu tür sorunlarda, yazabildiğiniz mevcut örneği buraya ekleyerek, bu şekilde yaptım ama olmadı tarzında sorarsanız, sizin nerede yanlış veya hatalı bir kullanım yaptığınız daha çabuk ortaya çıkar. Sorun daha hızlı çözüme kavuşur. Ortada bir örnek yok biz de müneccim değiliz.
bana bak bana düzgün konuş tamammı madem müneccin yok ozaman muhallebi çocukları gibi al ödevini ders çalış tamammı annen sana süt içirsin yat yatağı uykun gelmiştir şimdi senin..
Karşındaki evli baklı bir adam  ______________ 
Bundan sonra hep yek, hep tek başıma
|
|
|
↑
|
|
|
-
kutsalsoz
Acemi Üye
|
12.06.2017, 10:17 (UTC)
Mesaj konusu: |
|
|
Alıntı: Karşındaki evli baklı bir adam
olabilir bende evliyim |
|
|
↑
|
|
|
-
slobada
Bedava-Sitem Bağımlısı
|
13.06.2017, 08:20 (UTC)
Mesaj konusu: |
|
|
Merhaba, Javascript ile içeriği gösterip gizlemek için içeriğin display tanımlamaları ile oynamak gerekiyor. JQuery'de olduğu gibi oldukça basit şekilde yazılmasa da, yine de kolaylıkla ve türlü türlü şekillerde yazılabileceğini söyleyebilirim.
Yöntem 1
Bir buton ile içeriği gösterir, başka bir buton ile gizlersiniz. Bunun için 2 ayrı fonksiyon tanımlar ve 2 ayrı buton ile bu fonksiyonları çağırırsınız. Örnek bir kod yazacak olursam:
Kod: <button onclick="acma()">Göster</button>
<button onclick="kapama()">Gizle</button>
<div id="slobada" style="display:none"> Burada içerikler var. </div>
<script type="text/javascript">
var s = document.getElementById('slobada').style;
function acma() {
s.display = 'block';
}
function kapama() {
s.display = 'none';
}
</script>
Yöntem 2
Tek bir buton ile içeriği hem gösterir hem gizlersiniz. Bunun için içeriğin görünürlük tanımına göre IF ve ELSE kullanarak bir fonksiyon yazar ve bir buton ile bu fonksiyonu çağırırsınız. Yine örnek bir kod yazacak olursam:
Kod: <script type="text/javascript">
function slobada() {
var s = document.getElementById('mord').style;
if (s.display === 'none') {
s.display = 'block';
} else {
s.display = 'none';
}
}
</script>
<button onclick="slobada()"> İçeriği Göster / Gizle </button>
<div id="mord"> Burada içerikler yer alıyor. </div>
Bu örnekler üzerinden kodlamanın mantığını kavrayabilirsiniz ve benzer kodlamaları farklı şekillerde de hazırlayabilirsiniz, ben sadece 2 örnek verdim. Ayrıca butonlar yerine A metin seçicisini de kullanabilirsiniz. İyi çalışmalar. ______________  |
|
|
↑
|
|
|
-
kutsalsoz
Acemi Üye
|
13.06.2017, 11:40 (UTC)
Mesaj konusu: |
|
|
slobada yazmış: Merhaba, Javascript ile içeriği gösterip gizlemek için içeriğin display tanımlamaları ile oynamak gerekiyor. JQuery'de olduğu gibi oldukça basit şekilde yazılmasa da, yine de kolaylıkla ve türlü türlü şekillerde yazılabileceğini söyleyebilirim.
Yöntem 1
Bir buton ile içeriği gösterir, başka bir buton ile gizlersiniz. Bunun için 2 ayrı fonksiyon tanımlar ve 2 ayrı buton ile bu fonksiyonları çağırırsınız. Örnek bir kod yazacak olursam:
Kod: <button onclick="acma()">Göster</button>
<button onclick="kapama()">Gizle</button>
<div id="slobada" style="display:none"> Burada içerikler var. </div>
<script type="text/javascript">
var s = document.getElementById('slobada').style;
function acma() {
s.display = 'block';
}
function kapama() {
s.display = 'none';
}
</script>
Yöntem 2
Tek bir buton ile içeriği hem gösterir hem gizlersiniz. Bunun için içeriğin görünürlük tanımına göre IF ve ELSE kullanarak bir fonksiyon yazar ve bir buton ile bu fonksiyonu çağırırsınız. Yine örnek bir kod yazacak olursam:
Kod: <script type="text/javascript">
function slobada() {
var s = document.getElementById('mord').style;
if (s.display === 'none') {
s.display = 'block';
} else {
s.display = 'none';
}
}
</script>
<button onclick="slobada()"> İçeriği Göster / Gizle </button>
<div id="mord"> Burada içerikler yer alıyor. </div>
Bu örnekler üzerinden kodlamanın mantığını kavrayabilirsiniz ve benzer kodlamaları farklı şekillerde de hazırlayabilirsiniz, ben sadece 2 örnek verdim. Ayrıca butonlar yerine A metin seçicisini de kullanabilirsiniz. İyi çalışmalar.
merhaba çok teşekkür ederim if in içerisine bu kodu neden koydunuz s.display === 'none',
bide şöle bir kod yazmışsınız;var s = document.getElementById('slobada').style; burdaki style'in yanına neden display koymadınız ayrıca şu koda bakacak olursak; s.display === 'none'... s değişkeninin neye kesin eşitmi olduğunu sölüyor biraz açıklarsanız sevinirim |
|
|
↑
|
|
|
-
slobada
Bedava-Sitem Bağımlısı
|
13.06.2017, 13:27 (UTC)
Mesaj konusu: |
|
|
Merhaba, sorularınızın cevapları temel JS bilgileridir. Öğrenme azmi içinde olduğunuzu görüyorum, çok temel düzeyde bilgiler olsa da size faydalı olması için biraz açayım...
s kısaltmasında .style'ın yanına display koymadım, çünkü sözdizimi bu şekildedir, eğer oraya display ekleseydim kodlama Syntax Error verirdi. Sözdizimi kuralı şudur:
textObject.value veya textObject.value = text
Diğer sorunuza gelince;
=== işareti bir karşılaştırma operatörüdür, değer ve tür karşılaştırması yapar. Burada kod için gerekli olan tür karşılaştırmasını sadece 3 eşittir operatörü yaptığı için kodlamada onu kullandım. Bu konuda daha detaylı bilgi için JavaScript Operatörler konusunu detaylı araştırıp incelemenizi tavsiye ederim.
Diğer sorunuza gelince;
Normal HTML ve CSS kodlamada #mord için herhangi bir display tanımı yok. O zaman neden ben JS içinde display === none diye bir karşılaştırmalı sözdizimi kullandım? Bu tamamen IF ve ELSE'in birlikte çalışma mantığı ile ilgili... Kodu Türkçeleştirip söylersem döngünün mantığını daha iyi anlayabilirsiniz. Bu script şu anlama geliyor:
Eğer Mord'un Display değeri ve türü None'ye eşitse, Block olarak değiştir. Eşit değilse, None olarak ayarla. Yani daha basit haliyle; Gizliyse Göster, Değilse Gizle
Umarım bu cevaplar size biraz yardımcı olmuştur. Aklınıza takılan bir şey olursa yine sorabilirsiniz. İyi çalışmalar. ______________ |
|
|
↑
|
|
|
-
kutsalsoz
Acemi Üye
|
13.06.2017, 19:49 (UTC)
Mesaj konusu: |
|
|
slobada yazmış: Merhaba, sorularınızın cevapları temel JS bilgileridir. Öğrenme azmi içinde olduğunuzu görüyorum, çok temel düzeyde bilgiler olsa da size faydalı olması için biraz açayım...
s kısaltmasında .style'ın yanına display koymadım, çünkü sözdizimi bu şekildedir, eğer oraya display ekleseydim kodlama Syntax Error verirdi. Sözdizimi kuralı şudur:
textObject.value veya textObject.value = text
Diğer sorunuza gelince;
=== işareti bir karşılaştırma operatörüdür, değer ve tür karşılaştırması yapar. Burada kod için gerekli olan tür karşılaştırmasını sadece 3 eşittir operatörü yaptığı için kodlamada onu kullandım. Bu konuda daha detaylı bilgi için JavaScript Operatörler konusunu detaylı araştırıp incelemenizi tavsiye ederim.
Diğer sorunuza gelince;
Normal HTML ve CSS kodlamada #mord için herhangi bir display tanımı yok. O zaman neden ben JS içinde display === none diye bir karşılaştırmalı sözdizimi kullandım? Bu tamamen IF ve ELSE'in birlikte çalışma mantığı ile ilgili... Kodu Türkçeleştirip söylersem döngünün mantığını daha iyi anlayabilirsiniz. Bu script şu anlama geliyor:
Eğer Mord'un Display değeri ve türü None'ye eşitse, Block olarak değiştir. Eşit değilse, None olarak ayarla. Yani daha basit haliyle; Gizliyse Göster, Değilse Gizle
Umarım bu cevaplar size biraz yardımcı olmuştur. Aklınıza takılan bir şey olursa yine sorabilirsiniz. İyi çalışmalar.
sorumun cevabının yarısını anladım  aklıma takılan bir konu daha var şu kodda;var s = document.getElementById('mord').style; ----style'in yerine .value kullansak kod çalışırmı ? çünkü #mordu tanıtıyorsun yani orda .style koymanızın nedeni sanırsam divin sitilinin none olmuşluğunu tanıtıyorsunuz anladığım kadarıyla işin mantığını çözmeye çalışıyorum o yüzden soruyorum sizin dediğin şeyleri okudum bilgim var bu konu hakkında javascriptin kitabını aldım okuyorum fakat daha düzenli ifadeler konusuna geldim dizileri bitirdim seviyem nedir bilmiyorum ama bu seviyemde böle bir program yazabilirmiyim bilmiyorum bana yardımcı olmanız beni çok memnun etti tekrardan teşekkür ederim bu konu hakkında yorumlarınızı bekliyorum sorumun cevabını alırsam sevinirim teşekkür ederim |
|
|
↑
|
|
|
|
aklıma takılan bir konu daha var şu kodda;var s = document.getElementById('mord').style; ----style'in yerine .value kullansak kod çalışırmı ? çünkü #mordu tanıtıyorsun yani orda .style koymanızın nedeni sanırsam divin sitilinin none olmuşluğunu tanıtıyorsunuz anladığım kadarıyla işin mantığını çözmeye çalışıyorum o yüzden soruyorum sizin dediğin şeyleri okudum bilgim var bu konu hakkında javascriptin kitabını aldım okuyorum fakat daha düzenli ifadeler konusuna geldim dizileri bitirdim seviyem nedir bilmiyorum ama bu seviyemde böle bir program yazabilirmiyim bilmiyorum