Ufak bir sorunum var :)

[l3oomerangg]

Merhabalar kolay gelsin. Ufak bir sorunum var yardımcı olursanız, sevinirim.

Şimdi bu adresteki bir takım kodları arakladım. Arakladığım kısım "Üye alımcı" "Üye al" yazan etkileşimli görsel olan kısım. Bu aldığım kısmı BBCode içerisine attım ve aslında çalıştırma konusunda bir sıkıntım yok. Gayet güzel çalıştırdım kodları fakat o adreste göreceğiniz gibi altı kesik noktalı olan kısımlara gelince bir takım bilgi pencereleri açılıyor. (Örneğin; "Örnek Öğrenci, III. Sınıf" yazısının üstüne gelince)

O pencereler tabii fareyi ilgili yerlerin üzerinden çekince kayboluyor normal olarak. Fakat benim BBCode ile foruma eklediğim kodlar, güzel çalışmasına rağmen o pencereler kapanmıyor ve fareye yapışıyor Ekranı tazelemeden de düzelmiyor maalesef. Umarım sıkıntıyı anlatabilmişimdir.

Buraya BBCode içeriğini atamıyorum, zira code tagları arasına alsam bile ve mesajı önizleme yapsam dahi "403 Forbidden" alıyorum

O kısımı ilgilendiren DIV yapısının kodlarını aldım BBCode'un içerisine attım. Ayrıca gerekli olan iki JavaScripti de BBCode da en üstte tanımladım. Ayrıca gerekli olan birkaç script yapısını da ekledim. Kodlar stil yapısını DIV in içindeki style bölümünden alsa da, stil yapısında çalışmayan bir takım kısımlar olduğu için DIV yapısı içerisindeki stil kısmını da yeni bir CSS dosyasına kaydedip, BBCode un başında onu da tamamladım.

Kısacası bayağı bir uğraştım ama o yapıyı forum üzerinde çalıştırmayı başardım. Kodlamadan anlamıyorum, deneme yanılmayla birşeyleri çözmeye çalışıyorum malum.

Fakat yukarıda bahsettiğim sorunu ne yaptıysam çözemedim. Aynı kodları gidip HTML kod deneme sitesine kopyaladım çalıştırdım bir sıkıntı yok. Ama forumda kullanırken bir sıkıntı var. Belki de forum CSS yapısıyla çakışan bir kısım vardır. Açıkçası çok anlamadığım için sallıyorum şu an

Derdimi ne kadar anlatabildim bilmiyorum ama sizce sorunumu nasıl çözebilirim ?

[Ati10]

script, css ve html ilişkilendirilmesinde id ve class değerlerinin de eşleştirilmesi önemli.
onmouseover, onmouseout özelliğinde sizin onmouseout kısmı işlevsiz görünüyor.
css kodunuz eksik veya script'ten kaynaklanan bir durum olabilir.

bu özelliklerin kullanımı ile ilgili olarak,
phpbb'de ajax user info eklentisinde kullanılan kodları inceleyebilirsiniz (phpbb 3.2.9 ve 3.3.0 versiyonunda çalışmıyor)
veya aşağıdaki linkler yardımcı olabilir:
https://codepen.io/nbalcom/pen/ozwqvb
https://www.w3schools.com/jsref/event_onmouseout.asp
https://www.w3schools.com/jquery/event_mouseout.asp

[Ati10]

bunu da deneyebilirsin:
css kodu:

Kod: Tümünü seç

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

html kodu:

Kod: Tümünü seç

<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="http://www.dynamicdrive.com/cssexamples/media/tree_thumb.jpg" /><br />Dynamic Drive</span></a><br />

kaynak:
dynamicdrive

[l3oomerangg]

Kod: Tümünü seç

<div class="referal_content-item_consumables-item"><img src="https://ru-wotp.wgcdn.co/dcont/fb/image/lable_h9tNGhx.png"> <span class="referal_item_consumable-title"> <a class="hover-t h-1">Yazı</a> </span>
<div class="hover-info h-1-info"><img style="max-width: 100%;" src="https://ru-wotp.wgcdn.co/dcont/fb/image/inscription_235.png">
<h3>Çelik Bağlar</h3>
<br>
<p><strong>Grup:</strong> Özel</p>
<p><strong>Harita:</strong> Herhangi biri</p>
<p><strong>Araçlar:</strong> Herhangi biri</p>
<p><strong>Tarihsel uygunluk:</strong> Tarihsel olmayan</p>
</div>
</div>

Aslında herşey buradaki kodlarda bitiyor sanırım. Buradaki Div class içerisindeki h-1 ve h-1-info kısmı css de yok mesela. Yani bunların kullanım şeklini bilmiyorum. Nasıl ekleyeceğimi falanda bilmiyorum. Bir de BBCode içerisine eklemem lazım.


Bir de BBCode eklediğim kodları tam olarak w3scholls.com da ki Trying Editör'de test ettiğimde bu sorun yok. Eğer kod yapısında bir eksiklik varsa orada da aynı sorun olması gerekmez mi ?

[Ati10]

paylaştığın kodlarda div'lerin bağlantılı olduğu birkaç css kodu var. bu kodlar kısmen javascript içinde de olabilir.
benim yukarıda verdiğim scriptsiz çözüm.
önerim:
yukarıdaki css kodunu common.css sonuna ekle. (orijinal phpbb dosyalarında değişiklik yapmak istersen- ben yapmıyorum prensip olarak)
bbcode kısmına da şu şekilde eklenirse çalışır sanırım:

Kod: Tümünü seç

<a class="thumbnail" href="#thumb">{SIMPLETEXT}<span><img src="http://www.dynamicdrive.com/cssexamples/media/tree_thumb.jpg" /><br />{SIMPLETEXT}</span></a><br />

not: koddaki internet adresini veya resim kullanmayacaksn ilgili kısmı değiştirebilir veya silebilirsin.

[Ati10]

düzeltme:
flate-style temsında
flat.css dosyasının sonuna:

Kod: Tümünü seç

/* begin onmouseover info */
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
position: absolute;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}
/* en onmouseover */

ykp bbcode :
bbcode kullanımı:

Kod: Tümünü seç

[onmouse={URL}]{TEXT}[/onmouse]

html kullanımı:

Kod: Tümünü seç

<a class="thumbnail" href="#thumb">{TEXT}<span><img src="{URL}" /><br />{TEXT}</span></a><br />

yardım:

Kod: Tümünü seç

Yardım: [onmouse=resim URL]onmouseover açıklama[/onmouse]

not: Test edildi. bu tür bir bbcode script veya css kodları ile olabilir, bu kullanım şekli scriptsiz olduğu için sıkıntı oluşturmaz.

[l3oomerangg]

Atilla bey ben BBCode ile sadece resmin üzerine gelince bir bilgi penceresi çıkması olayını yapmaya çalışmıyorum. O bahsettiğim bölümün genelini BBCode içerisine gömmem lazım. Burada kodları paylaşamıyorum zira forum izin vermiyor. Fakat verdiğiniz kodları bu genel kodun ilgili yerlerini değiştirmeye çalışarak deneyeceğim. Birbirini etkileyen çok kısım var o yüzden beceremeyebilirim ama deneyeceğim en azından.

Bu arada mümkün olduğu kadar orjinal CSS dosyalarını bozmamaya çalışıyorum. Bunun için ya BBCode içerisinde tanımladığım özel CSS ye link veriyorum veya temaların stylesheet.css leri üzerinden import veriyorum.

Verdiğiniz bilgiler için teşekkür ederim, biraz daha kurcalayayım bakayım başarabilecek miyim

Hımm bir de yüzeysel olarak baktığım zaman bu kod sanırım sadece resmin üzerine gelince çalışıyor. Normalde bendeki kısım resmin altındaki yazının üstüne gelince çalışıyordu ama benim için bu da olur ama işte doğru yerde doğru kodu kullanmam gerek, bakalım becerebilecek miyim

[Ati10]

Verdiğiniz bilgiler için teşekkür ederim, biraz daha kurcalayayım bakayım başarabilecek miyim

Hımm bir de yüzeysel olarak baktığım zaman bu kod sanırım sadece resmin üzerine gelince çalışıyor. Normalde bendeki kısım resmin altındaki yazının üstüne gelince çalışıyordu ama benim için bu da olur ama işte doğru yerde doğru kodu kullanmam gerek, bakalım becerebilecek miyim

hayır metnin üzerine gelince çalışıyor.
bundan sonrası kolay.
html kodunda bunu alıp:

Kod: Tümünü seç

<img src="{URL}" /><br />

ilk

Kod: Tümünü seç

{TEXT}

önüne koyduğunuz zaman, resmin üzerine gelince popup bilgi görünür.

[l3oomerangg]

Birşeyler yaptım, şimdilik fena gitmiyor. Neredeyse baştan sona kodları inceliyorum ve bazı yerleri düzeltiyorum. Bayağı vakit alacak istediğim hale getirmek. Verdiğin kodlar işime yaradı. Bir takım sıkıntılar var ama en son haline getireyim, sonra zaten normal forumda deneyeceğim... Teşekkürler tekrardan...