lostyazilim
tr.link

JS ile Makale Büyütme

11 Mesajlar 2.307 Okunma
acebozum
tr.link

Croizer Croizer Thank you Jobs Banlı Kullanıcı
  • Üyelik 13.10.2018
  • Yaş/Cinsiyet 34 / E
  • Meslek PHP Developer
  • Konum Ankara
  • Ad Soyad F** S**
  • Mesajlar 57
  • Beğeniler 38 / 7
  • Ticaret 0, (%0)
Merhabalar

Web sitelerinde fotoğraflara tıkladığınızda bunu size büyük bir şekilde gösteriyor.
Yeni sekmede değil büyütme olayı. Bunu blogumda makaleme uygulamak istiyorum. Blogumu div load sistemiyle yaptım. Makalenin olduğu kısım sayfanın 3te 2sini kaplıyor. Makalenin bir yerinde büyüt butonu koymak istiyorum. Aynı fotoğrafı tam ekran yapar gibi makaleyi tam ekran yapmalı. Sonra kapat işaretiyle kapatmalı.

Makaledeki büyüt butonuna tıklayınca aşağıdaki gibi bir görüntü oluşsun istiyorum.




Sanırım basit bir kodu var. Nette araştırdım bulamadım. Paylaşırsanız sevinirim.
 

 

elektronikssl
webimgo

dnaz dnaz Back to Front End Kullanıcı
  • Üyelik 02.06.2016
  • Yaş/Cinsiyet 41 / E
  • Meslek Software
  • Konum Adana
  • Ad Soyad K** A**
  • Mesajlar 704
  • Beğeniler 101 / 147
  • Ticaret 34, (%100)
Kodun basit olduğunu nasıl anladınız ?
 

 

Croizer Croizer Thank you Jobs Banlı Kullanıcı
  • Üyelik 13.10.2018
  • Yaş/Cinsiyet 34 / E
  • Meslek PHP Developer
  • Konum Ankara
  • Ad Soyad F** S**
  • Mesajlar 57
  • Beğeniler 38 / 7
  • Ticaret 0, (%0)

dnaz adlı üyeden alıntı

Kodun basit olduğunu nasıl anladınız ?




Post ve get işlemlerini 4-5 satır kodla hallediyoruz. Böyle bir şey daha önce karşıma çıkmadı sadece bir tahmin muhtemelen dökümanı alıp aynı fotoğraf gibi ekrana basan bir kodu var. Çok uzun bir şey olduğunu zannetmiyorum. Emin olduğum tek şey bu forumda herşeye karşı bir tepki var. Mesela o soruyu bana sormak yerine kodu yazamasanız bile en azından bir ipucu verebilirdiniz. Googlede şu kelimelerle arat dökümanlara ulaşırsın diye. Veya başka bir örnek.
 

 

ozmencelik ozmencelik Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 03.01.2016
  • Yaş/Cinsiyet 39 / E
  • Meslek .Net Developer - İng Öğretmeni
  • Konum İzmir
  • Ad Soyad Ö** Ç**
  • Mesajlar 339
  • Beğeniler 39 / 160
  • Ticaret 0, (%0)
Kodlamayı öğrenmek basit - algoritmasını kurmak basit AMA YAPILAN HİÇ BİR İŞ HAFİFE ALINACAK KADAR BASİT YADA KOLAY DEĞİL AKSİ TAKTİRDE HERKES YAPARDI.

Yazılım konusunda her hangi bir işi yaptırmak için sorulan sorularda "basit" kelimesinide kullananıda çok itici bulmuşumdur.

Yani belkide soru mantığınızı ve yaklaşımınızı düzeltmeniz lazım

Sorunuza gelirsek eğer doğru anladıysam şöyle bir arama işini görecektir : https://www.google.com/search?client=safari&rls=en&q=javascript+paragraf+b%C3%BCy%C3%BCtme&ie=UTF-8&oe=UTF-8
Croizer

kişi bu mesajı beğendi.

wmaraci
wmaraci

Croizer Croizer Thank you Jobs Banlı Kullanıcı
  • Üyelik 13.10.2018
  • Yaş/Cinsiyet 34 / E
  • Meslek PHP Developer
  • Konum Ankara
  • Ad Soyad F** S**
  • Mesajlar 57
  • Beğeniler 38 / 7
  • Ticaret 0, (%0)
ozmencelik

Hocam günümüzde hemen hemen her paket ve plugin internette mevcut ve bunlarla alakalı bir dünya makale var. Yani kısacası yok yok.

Orada basitliği belirtirken sanırım kelimesini kullandım. Çünkü ben programa birden fazla iş yaptırtmıcam. Bana sadece bir olayı gerçekleştirecek. Bu tamamen benim düşüncem yalnışta olabilir.

Yardımınız için teşekkürler. O arama makalede bulunan yazıların boyutunu ayarlıyor. Makaleyi tam sayfa yapmalı fotoğrafı büyütür gibi.
 

 

Abdullahx Abdullahx MW Aracı Kullanıcı
  • Üyelik 03.04.2019
  • Yaş/Cinsiyet 29 / E
  • Meslek .
  • Konum Trabzon
  • Ad Soyad A** K**
  • Mesajlar 905
  • Beğeniler 393 / 395
  • Ticaret 3, (%100)
https://getbootstrap.com/docs/4.0/components/modal/#scrolling-long-content

Örnek görüntüye pek benzemesi ama şöyle bir mantık olur mu
Croizer

kişi bu mesajı beğendi.


Croizer Croizer Thank you Jobs Banlı Kullanıcı
  • Üyelik 13.10.2018
  • Yaş/Cinsiyet 34 / E
  • Meslek PHP Developer
  • Konum Ankara
  • Ad Soyad F** S**
  • Mesajlar 57
  • Beğeniler 38 / 7
  • Ticaret 0, (%0)
Abdullahx teşekkür ederim kardeşim aradığım şey bu. Kodları düzenleyip herkesin anlayacağı bir şekilde burada paylaşacağım. Benden sonra konuya girenlere faydamız olsun...
Abdullahx

kişi bu mesajı beğendi.

sworks sworks WordPress Kullanıcı
  • Üyelik 28.02.2018
  • Yaş/Cinsiyet 29 / E
  • Meslek Freelancer
  • Konum Diğer
  • Ad Soyad A** K**
  • Mesajlar 3292
  • Beğeniler 1797 / 1799
  • Ticaret 20, (%100)
Burada basit derken “codepen gibi sitelerde bolca bulunan hazır bir kod” denilmek istenmiş sanki. O yüzden gerilmeye gerek yok bence. Mesajında ücretli destek istiyorum diyen birisi aynı cümlede basit bir iş dediği zaman tepkiler çok haklı oluyor ona katılırım. :)

Kodu paylaşınca ben de incelemek isterim henüz yeni yeni javascript alanına yoğunlaşmaya başladım.
Croizer

kişi bu mesajı beğendi.

Croizer Croizer Thank you Jobs Banlı Kullanıcı
  • Üyelik 13.10.2018
  • Yaş/Cinsiyet 34 / E
  • Meslek PHP Developer
  • Konum Ankara
  • Ad Soyad F** S**
  • Mesajlar 57
  • Beğeniler 38 / 7
  • Ticaret 0, (%0)
sworks tamda dediğin gibi. Benimde dediğim gibi. Arkadaşın verdiği linke girersen 2 satır js koduyla yapılıyor bu işlem. Forumda genel olarak herkeste bir stres var. Gerilime bencede gerek yok.
 

 

Croizer Croizer Thank you Jobs Banlı Kullanıcı
  • Üyelik 13.10.2018
  • Yaş/Cinsiyet 34 / E
  • Meslek PHP Developer
  • Konum Ankara
  • Ad Soyad F** S**
  • Mesajlar 57
  • Beğeniler 38 / 7
  • Ticaret 0, (%0)
Bootstrap İçin









Makale Büyütme



















<script></script>
<script></script>
<script></script>








Divi bootstrap ile istediğiniz boyutta özelleştirebilirsiniz.


Normal Html İçin

HTML










CSS


#modal {
display: none;
background-color: rgb(255, 255, 255);
}
#modal.open {
display: block;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 2px solid black;
padding: 20px;
}
#modal.open:not(:focus-within) {
background-color: rgb(255, 255, 254);
transition: background-color 0.01s ease;
}




JS

button.onclick = () => {
modal.classList.toggle("open");
}

modal.addEventListener('transitionend', (e) => {
document.querySelector("#firstinput").focus();
});






CSS istediğiniz stili verebilirsiniz.

Bu kodu boş bir html sayfasına ekleyin ve butona basın. :)
sworks Abdullahx

kişi bu mesajı beğendi.

wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al