burakkggul | Geleceği Yazanlar

Burak

Ankara

19/07/2017 tarihinden beri üye

Arkadaş Ekle

90 GY Puanı

42K GY Sırası

Kişisel Sayfaları

İlgi Alanları

Mobil Programlama Android

2 Rozet

1 Sertifika

1 Soru Sordu

2 Cevap Verdi

0 Blog Yazısı

0 Etiket Takibi

Hakkında

Daha Fazla Gör

İş Tecrubesi

Kullanıcıya ait İş tecrübesi bilgisi bulunmamaktadır.

Eğitim Geçmişi

Tunceli Üniversitesi

| Aralık 2020 - Aralık 2020

Sertifikalar & Başarılar

GY Sertifikaları (1)

Web Programlama 101 Sertifikası

Veriliş Tarihi: Temmuz 2017

Diğer Sertifikaları (0)

Kullanıcıya ait sertifika bulunmamaktadır.

Test Sonuçları (0)

Kullanıcıya ait test sonucu bulunmamaktadır.

Dil Becerileri

Etiket Takipleri (0)

Son Forum Aktiviteleri

Tümünü Gör

Soruları (1)

Cevapları (2)

Bootstrap İle Boyu duyarlı hale nasıl getirebilirim ?

Merhabalar,

Öncelikle herkese kolay gelsin çok uzatmadan hemen soruma geçiyorum.

Ben bir asansör projesi hazırlıyorum ve bootstrap ile ilgili bir sıkıntı yaşıyorum bootstrap ta container, row ve col-xs-12 yi tanımlayıp içerisine asansörümü yerleştirdim. Tabiki takdir edersiniz ki genişlik responsive oldu o konuda bir sıkıntı yok fakat pencere küçültüldüğünde boyda herhangi bir küçülme olmuyor bunu nasıl sağlayabilirim ? Değerli cevaplarınız için şimdiden teşekkürler.

6 yıl 9 ay önce yanıtladın

html css twitter-bootstrap-3 javascript web-programlama

2 Cevap | 189 Görüntüleme

Tümünü Gör

BUTONLARA SES EKLEME

20 Temmuz 2017 tarihinde cevaplandı

buton web programlama html yardim site css js web-programlama

2 Cevap|323 Görüntüleme

Sitenizi bootstrap ile oluşturup daha sonrasında Oktay beyin verdiği linkten ses ekleyebilirsiniz. Buton görünümleri gayet hoş olacaktır.http://getbootstrap.com

Bootstrap İle Boyu duyarlı hale nasıl getirebilirim ?

20 Temmuz 2017 tarihinde cevaplandı

html css twitter-bootstrap-3 javascript web-programlama

2 Cevap|189 Görüntüleme

Mehmet Bey cevabınız için teşekkürler. Sorunumu Boostrap ile değil de javascript ile çözme yolunu tercih ettim. Kodları da daha sonra bu konuda problem yaşayan arkadaşlar için yazacağım. Bu arada bu asansör imaj değil divlerle oluşturdum. Yinede çok teşekkürler cevabınız için.

Burada yazan kodlar asansörün yüksekliğe göre duyarlı hale gelmesi için. Eğer anlaşılmayan bie yer olursa soran arakadaşlara detaylı bir şekilde anlatabilirim.

 $( window ).resize(function() {
 var yuk = $(window).height();
 var boslukyuk=yuk-15;
 var katyuk = yuk/11;
 var kat10= (katyuk/2);                  
 var  kat9=(katyuk+kat10);
 var kat8=(katyuk+kat9);
 var kat7=(katyuk+kat8);
 var kat6=(katyuk+kat7);
 var kat5=(katyuk+kat6);
 var kat4=(katyuk+kat5);
 var kat3=(katyuk+kat4);
 var kat2=(katyuk+kat3);
 var kat1=(katyuk+kat2);
 var kat0=(katyuk+kat1);
 var  up9= kat9;
 var  up8= kat8;
 var  up7= kat7;
 var  up6= kat6;
 var  up5= kat5;
 var  up4= kat4;
 var  up3= kat3;
 var  up2= kat2;
 var  up1= kat1;
var call0up=kat0;
 var call1up=up1;
 var call2up=up2;
 var call3up=up3;
 var call4up=up4;
 var call5up=up5;
 var call6up=up6;
 var call7up=up7;
 var call8up=up8;
 var call9up=up9;
 var call1down=kat1;
 var call2down=kat2;
 var call3down=kat3;
 var call4down=kat4;
 var call5down=kat5;
 var call6down=kat6;
 var call7down=kat7;
 var call8down=kat8;
 var call9down=kat9;
 var call10down=kat10;
 if(yuk< 400){
	 alert("Eğer pencerenin yüksekliğini bu denli düşürürseniz hareketini düzgün gözlemleyemeyeceksiniz.");
 }
 
 $("#bina").css("height",yuk);
$ ("#bosluk").css("height",boslukyuk);
$("#call0up").css("top",call0up);
$("#call1up").css("top",call1up);
$("#call2up").css("top",call2up);
$("#call3up").css("top",call3up);
$("#call4up").css("top",call4up);
$("#call5up").css("top",call5up);
$("#call6up").css("top",call6up);
$("#call7up").css("top",call7up);
$("#call8up").css("top",call8up);
$("#call9up").css("top",call9up);
$("#call1down").css("top",call1down);
$("#call2down").css("top",call2down);
$("#call3down").css("top",call3down);
$("#call4down").css("top",call4down);
$("#call5down").css("top",call5down);
$("#call6down").css("top",call6down);
$("#call7down").css("top",call7down);
$("#call8down").css("top",call8down);
$("#call9down").css("top",call9down);
$("#call10down").css("top",call10down);
});

Aşağıda yazan kodlar ise html5 ile oluşturduğum div lerin kodları.

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
  <style>
body {
	background-image: url("https://i.hizliresim.com/WQqm7E.gif");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	user-select: none
}
#bina {
	position: relative;
	left: -20px;
	top: 0px;
	width: 130px;
	background: #ecaf2f;
	height: 640px;
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid #ecaf2f;
	border-radius: 15px;
	padding-bottom: 30px;
}
#gostergekenar {
	width: 42px;
	height: 20px;
	background: #000;
	position: absolute;
	left: 28px;
	top: -1px;
	background-color: #000;
}
#gosterge {
	width: 10px;
	height: 10px;
	background-color: #000;
}
#gosterge {
	width: 30px;
	height: 18px;
	background: #808080;
	position: relative;
	left: 6px;
	top: 1px;
	color: #000;
	font-family: Symbol;
	font-weight: bold;
}
#bosluk {
	background: #AAA;
	width: 50px;
	height: 610px;
	top: 20px;
	margin: 0 auto;
	position: relative;
}
#asansorboslugu {
	position: absolute;
	height: 60px;
	width: 50px;
	bottom: 0px;
	background-color: #000;
}
#asansor {
	background-image: url("https://i.hizliresim.com/G0ma9v.jpg");
	height: 60px;
	overflow: hidden;
	width: 50px;
	position: absolute;
	background-size: 100% 100%;
}
#sagkapi {
	width: 50%;
	height: 60px;
	background-color: #918B8B;
	float: right;
	overflow: hidden;
}
#solkapi {
	width: 50%;
	height: 60px;
	background-color: #918B8B;
	float: left;
	overflow: hidden;
}
#call0up {
	top: 590px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call1up {
	top: 530px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call1down {
	top: 530px;
	height: 15px;
	width: 15px;
	right: 21px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call2up {
	top:475px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call2down {
	top: 475px;
	height: 15px;
	width: 15px;
	right: 21px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call3up {
	top: 420px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call3down {
	top: 420px;
	height: 15px;
	width: 15px;
	right: 21px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call4up {
	top: 365px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call4down {
	top: 365px;
	height: 15px;
	width: 15px;
	right: 21px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call5up {
	 top: 310px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call5down {
	 top: 310px;
	height: 15px;
	width: 15px;
	right: 21px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call6up {
	top: 255px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call6down {
	top: 255px;
	height: 15px;
	width: 15px;
	right: 21px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call7up {
	top: 200px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call7down {
	top: 200px;
	height: 15px;
	width: 15px;
	right: 21px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call8up {
	top: 145px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call8down {
	top: 145px;
	height: 15px;
	width: 15px;
	right: 21px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call9up {
	top: 90px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call9down {
	top: 90px;
	height: 15px;
	width: 15px;
	right: 21px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
#call10down {
	top: 40px;
	height: 15px;
	width: 15px;
	right: 3px;
	position: absolute;
	z-index: 1;
	border: 1px solid #00a3e4;
	border-radius: 50%;
}
.up {
	background-image: url("https://i.hizliresim.com/y36g0M.png");
	height: 30px;
	overflow: hidden;
	width: 30px;
	position: absolute;
	background-size: 100% 100%;
}
.down {
	background-image: url("https://i.hizliresim.com/6XadJk.png");
	height: 30px;
	overflow: hidden;
	width: 30px;
	position: absolute;
	background-size: 100% 100%;
}
.down:hover {
	filter: grayscale(80%);
}
.up:hover {
	filter: grayscale(80%);
}
.down:active {
	transform: translateY(2px);
}
.up:active {
	transform: translateY(2px);
}
#canvas #katsecimi ul li:active {
	transform: translateY(2px);
}
</style>
   
    <link rel="shortcut icon" href="/images/tiga.png"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Asansör Denemesi</title>
    </head>
    <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <div id="bina">
            <div id="gostergekenar">
              <div class="abc" id="gosterge" > 0 - </div>
            </div>
            <div id="call1up" class="up"></div>
            <div id="call2up" class="up"></div>
            <div id="call3up" class="up"></div>
            <div id="call4up" class="up"></div>
            <div id="call5up" class="up"></div>
            <div id="call6up" class="up"></div>
            <div id="call7up" class="up"></div>
            <div id="call8up" class="up"></div>
            <div id="call9up" class="up"></div>
            <div id="call0up" class="up"></div>
            <div id="call1down" class="down"></div>
            <div id="call2down" class="down"></div>
            <div id="call3down" class="down"></div>
            <div id="call4down" class="down"></div>
            <div id="call5down" class="down"></div>
            <div id="call6down" class="down"></div>
            <div id="call7down" class="down"></div>
            <div id="call8down" class="down"></div>
            <div id="call9down" class="down"></div>
            <div id="call10down" class="down"></div>
            <div id="bosluk">
              <div id="asansorboslugu">
                <div id="asansor">
                  <div id="sagkapi"></div>
                  <div id="solkapi"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

Kolay Gelsin.

Tümünü Gör