Ufak bir sorunum var :)

Phpbb bilgi alışverişi

Moderatör: kaptangula

Cevapla
l3oomerangg
Yeni Üye
Mesajlar: 25
Kayıt: 07 Oca 2020, 23:05

Ufak bir sorunum var :)

Mesaj gönderen 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 ?

Kullanıcı avatarı
Ati10
Admin
Admin
Mesajlar: 929
Kayıt: 12 Eki 2006, 01:48
Konum: burhaniye
İletişim:

Re: Ufak bir sorunum var :)

Mesaj gönderen 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

Kullanıcı avatarı
Ati10
Admin
Admin
Mesajlar: 929
Kayıt: 12 Eki 2006, 01:48
Konum: burhaniye
İletişim:

Re: Ufak bir sorunum var :)

Mesaj gönderen 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
Yeni Üye
Mesajlar: 25
Kayıt: 07 Oca 2020, 23:05

Re: Ufak bir sorunum var :)

Mesaj gönderen 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 ?

Kullanıcı avatarı
Ati10
Admin
Admin
Mesajlar: 929
Kayıt: 12 Eki 2006, 01:48
Konum: burhaniye
İletişim:

Re: Ufak bir sorunum var :)

Mesaj gönderen 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.

Kullanıcı avatarı
Ati10
Admin
Admin
Mesajlar: 929
Kayıt: 12 Eki 2006, 01:48
Konum: burhaniye
İletişim:

Re: Ufak bir sorunum var :)

Mesaj gönderen 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
Yeni Üye
Mesajlar: 25
Kayıt: 07 Oca 2020, 23:05

Re: Ufak bir sorunum var :)

Mesaj gönderen 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 :)

Kullanıcı avatarı
Ati10
Admin
Admin
Mesajlar: 929
Kayıt: 12 Eki 2006, 01:48
Konum: burhaniye
İletişim:

Re: Ufak bir sorunum var :)

Mesaj gönderen Ati10 »

l3oomerangg yazdı:
26 Oca 2020, 14:25
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
Yeni Üye
Mesajlar: 25
Kayıt: 07 Oca 2020, 23:05

Re: Ufak bir sorunum var :)

Mesaj gönderen 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...

Cevapla
Disable

“PhpBB Tartışma/Araştırma” sayfasına dön