Üye Girişi
Bağlan Google+ ile Bağlan Facebook ile Bağlan
Yeni Kayıt
Tüm Forumlar
  • Tüm Forumlar
  • Web Tasarım - Programlama
  • Yazılım Geliştirme
  • Asp / Asp.NET
  • Bu Konuda
Şimdi Ara

jQuyery ile hide & show metodundaki sorunum

Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Daha Fazla
Bu Konudaki Kullanıcılar: Daha Az
2 Misafir - 2 Masaüstü
5 sn
8
Cevap
0
Favori
331
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
Konuya Özel
0 oy
Öne Çıkar
Cevapla
Sayfa: 1
Giriş
Mesaj
  • Merhaba arkadaşlar,

    http://cemcakarmimarlik.com/ bu siteye ilk girdiğinizde karşınıza C harfli bir logo, ardından Cem Çakar Mimarlık logosu ve ardından asıl ana sayfa çıkıyor. Asıl ana sayfada menüler yer alıyor. Fakat Asıl ana sayfa açılırken aşağıdan yukarı çıkarken parça parça oluşuyor. Ben bunun direkt olduğu gibi yukarı çıkmasını istiyorum. Asıl ekrandaki menüler veri tabanından dönerek oluşuyor. Bu konuda yardımcı olabilecek birileri var mı?

    jQuery kodlarım:

    <script>

    var allImages;
    var imgCount;
    var current = 0;

    $(document).ready(function ($) {
    allImages = $(".slideWrapper img");
    $('.slideWrapper1').hide();
    imgCount = allImages.length;

    setInterval(slide, 2000);
    });

    function slide() {

    if (current == (imgCount - 1)) {


    current = 0;
    }
    else {
    current++;
    allImages.eq(current).fadeIn(2000);
    pause();
    }
    $('.slideWrapper').hide(3000);
    $('.slideWrapper1').show(3000);
    }
    </script>

    Css kodlarım : .slideWrapper= logoların yüklenmesi, .slideWrapper1 = menülerin yüklenmesi durumu

    .slideWrapper {position: relative; width: 830px;height:650px;margin: 0 auto;float:center;}
    .slideWrapper img {position: absolute;top: 0;left: 0;display: none;}
    .slideWrapper img:nth-child(1) {display: block;}


    .slideWrapper1 {width: 840px;height: 550px;margin: 0 auto; }
    .slideWrapper1 li {position:relative; color:#fff;}
    .slideWrapper1 li ul { display:none; left:0; position:absolute; top:130px;z-index: 999; }
    .slideWrapper1 ul li a{ display:block;margin:0px; padding:0px 20px 0px 0px; text-decoration:none;color:#000; }
    .slideWrapper1 ul li a:hover { }
    .slideWrapper1 li:hover ul { display:block; }







  • $(".slideWrapper1").width(840); // bu satırı ekle
    $('.slideWrapper1').show(3000);

    Şeklinde dener misin?

    Eğer olmazsa

    allImages.eq(current).fadeIn(2000); // bu satırı ve allImages ile alakalı herşeyi sil.
    .slideWrapper img {position: absolute;top: 0;left: 0;display: none;} //display:none kaldır



    < Bu mesaj bu kişi tarafından değiştirildi -w K- -- 1 Temmuz 2015; 13:47:03 >
    < Bu ileti mini sürüm kullanılarak atıldı >
  • İlgini teşekkürler fakat sorun yine çözülmedi :(
  • Tüm ufak resimlere display:none vermişsin, onları fadeIn ile gösterirken yavaş yavaş beliriyorlar, sorun bundan kaynaklı. Onun yerine sadece onu kaplayan div'e ver display:none. O resimlere hiç kod yazma.

    < Bu ileti mini sürüm kullanılarak atıldı >
  • Displaylari kaldrıdığımda sayfa bozuluyor. Menülerin olduğu div "slideWrapper1" bu. Bunu gösterirken bozuk geliyor. Bunda da zaten herhangi bir display:none yok :(

    Bu sayfa tarafı:
    <script>

    var allImages;
    var imgCount;
    var current = 0;

    $(document).ready(function ($) {
    allImages = $(".slideWrapper img");
    $('.slideWrapper1').hide();
    imgCount = allImages.length;

    setInterval(slide, 2000);
    });

    function slide() {

    if (current == (imgCount - 1)) {


    current = 0;
    }
    else {
    current++;
    allImages.eq(current).fadeIn(2000);
    pause();
    }
    $('.slideWrapper').hide(3000);

    $('.slideWrapper1').show(3000);
    }
    </script>

    <%
    end if
    %>
    <script>
    $(document).ready(function() {
    $('.photos img').css('opacity', 0.4);

    $('.photos li').hover(
    function(){
    $(this).find('img').stop().fadeTo('slow', 1);
    },
    function(){
    $(this).find('img').stop().fadeTo('slow', 0.4);
    });

    });
    </script>
    </head>
    <!-- #include file="baglanti.asp"-->
    <body align="center">
    <%
    if Session("intro") = false then
    %>
    <div class="slideWrapper">
    <img src="/cemcakar/cc.png" width="830px" height="650px" />
    <img src="/cemcakar/cemcakar.png" width="830px" height="650px" />
    </div>

    <%
    Session("intro") = true
    Session.Timeout = 5
    end if
    %>
    <%if Session("intro")=true then %>
    <div style="float:right"><img src="cemcakar/cc.png" width="130px" height="100px"></div>
    <br><br><br><br><br>
    <%sql1="select * from menuler where id='1'"
    set sorgu1=Baglanti.execute(sql1) %>
    <%sql2="select * from menuler where id='2'"
    set sorgu2=Baglanti.execute(sql2) %>
    <%sql3="select * from menuler where id='3'"
    set sorgu3=Baglanti.execute(sql3) %>
    <%sql4="select * from menuler where id='4'"
    set sorgu4=Baglanti.execute(sql4) %>
    <%sql5="select * from menuler where id='5'"
    set sorgu5=Baglanti.execute(sql5) %>
    <%sql="select * from ekip order by ekip asc"
    set sorgu=Baglanti.execute(sql) %>

    <div class="slideWrapper1">

    <center>
    <br><br><br><br><br><br><br><br><br><br>
    <ul class="photos">

    <li style="height:133px"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=107514632&url=<%=sorgu1("YOL")%>" data-href="<%=sorgu1("YOL")%>"><img src="<%=sorgu1("RESIM")%>" alt="Poppy" width="150px" height="112px"/><br><font style="color:#fff;"><%=sorgu1("MENU")%></font></a></li>

    <li style="height:133px"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=107514632&url=#" data-href="#"><img src="cemcakar/ekip.png" alt="Poppy" width="150px" height="112px"/><br><font style="color:#fff;">Ekip</font></a>
    <ul>
    <%

    if sorgu.eof and sorgu.bof then
    else
    do while not sorgu.eof
    %>
    <a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=107514632&url=projeekibi.asp?KatId=<%=sorgu("ID")%>" data-href="projeekibi.asp?KatId=<%=sorgu("ID")%>"><li class="sayfa" style="width:109px; border:1px solid #fff;padding:10px 5px 10px 5px;-webkit-border-radius:6px;"><%=sorgu("ekip")%></li></a>
    <%
    sorgu.movenext
    loop
    end if
    %>
    </ul>
    </li>

    <li style="height:133px"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=107514632&url=<%=sorgu3("YOL")%>" data-href="<%=sorgu3("YOL")%>"><img src="<%=sorgu3("RESIM")%>" alt="Poppy" width="110px" height="112px"/><br><font style="color:#fff;"><%=sorgu3("MENU")%></font></a></li>

    <li style="height:133px"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=107514632&url=<%=sorgu4("YOL")%>" data-href="<%=sorgu4("YOL")%>"><img src="<%=sorgu4("RESIM")%>" alt="Poppy" width="157px" height="112px"/><br><font style="color:#fff;"><%=sorgu4("MENU")%></font></a></li>

    <li style="height:133px"><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=107514632&url=<%=sorgu5("YOL")%>" data-href="<%=sorgu5("YOL")%>"><img src="<%=sorgu5("RESIM")%>" alt="Poppy" width="110px" height="112px"/><br><font style="color:#fff;"><%=sorgu5("MENU")%></font></a></li>

    </ul>
    </center>
    </div>

    Bu da css tarafı:
    .slideWrapper {position: relative; width: 830px;height:650px;margin: 0 auto;float:center;}
    .slideWrapper img {position: absolute;top: 0;left: 0;display: none;}
    .slideWrapper img:nth-child(1) {display: block;}

    .text-center {text-align:center;}
    .photos{margin: 0 auto;}
    .photos li{ float:left;display: block; position: relative; list-style-type: none; margin: 0 auto;}
    .photos1{ margin: 0 auto;}
    .photos1 li{ float:left;display: block; position: relative; list-style-type: none; margin: 0 auto;}
    .slideWrapper1 {width: 840px;height: 550px;margin: 0 auto; }
    .slideWrapper1 li {position:relative; color:#fff;}
    .slideWrapper1 li ul { display:none; left:0; position:absolute; top:130px;z-index: 999; }
    .slideWrapper1 ul li a{ display:block;margin:0px; padding:0px 20px 0px 0px; text-decoration:none;color:#000; }
    .slideWrapper1 ul li a:hover { }
    .slideWrapper1 li:hover ul { display:block; }




  • Başka fikri olan yok mu :(
  • Parça parça oluşmuyor, alt alta sıralanmış olarak gelip yukarı çıktıkça yan yana geliyor,
    photos a ilk başta bir width değeri atarmısın, belki bu sorunu çözer. ben baktığımda 840 oluyor son noktasında ona göre bir ayarla bakalım ne olacak.

    Olmadı benden bir tavsiye
    ul li nin default gelen yapısı gereği resimlerin alt alta oluşturuluyor olabilir, en kolayı bir div içine yerleştir tek tek

    <div> bu div hepsini içine alacak olan container div in olsun .
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </div>

    kodlarına baktığımda çok boş <br> var kurtul onlardan bu kadar css yazıp boşluk için br kullanılmaz :)
    kaynağını düzgün paylaşırsan belki daha kolay yardımcı olabiliriz sonuçta senin kodların asp ile yazılmış bizde senin asp lerinin karşılığı yok.
    • Yapay Zeka’dan İlgili Konular
    Cheat Engine ile aynı işlevi gören program?
    10 yıl önce açıldı
    Oyunlarda tek tık ile translate yapabilen program ScreenTranslator
    4 yıl önce açıldı
    A Quiet Place: The Road Ahead için hile veya trainer var mı?
    3 ay önce açıldı
    Daha Fazla Göster
  • İlginize teşekkür ederim arkadaşlar,
    fakat söylemlerinizi uyguladığımda hep farklı bir sorunla karşılaştım o da hep benim acemiliğim (<br>) lerden anlaşılacağı üzere :)
    default sayfada
    $('.slideWrapper1').show(3000); bu satırı aşağıdaki gibi düzenlediğimde sorunum çözülmüş oldu her ne hikmetse.

    $('.slideWrapper1').show();
    $('.slideWrapper1').fadein(3000);


    Çok sağolun.
    • 
Sayfa: 1

Benzer içerikler

- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.
Hizmet kalitesi için çerezleri kullanabiliriz. DH’ye girerek kullanım izni vermiş sayılırsınız.
Anladım Veri Politikamız