Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [inny]jquery-problem z pojawiajacym sie tekstem
Forum PHP.pl > Forum > Po stronie przeglądarki
pollock
26.01.2010, 18:47:34
witam,
realizuje projekt strony na ktorej jest tlo rozciagajace sie na caly format strony.
Mam problem z tekstem i funkcja fadeIn ktora w tej konfiguracji nie chce zadzialac.
Jest to tylko przyklad ale jestem wobec niego bezsilny.
Podaje kod ktory nie dziala.

Prosze o pomoc.
Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Supersized - Full Screen Background/Slideshow jQuery Plugin</title>
<script src="jquery-1.4.min.js" type="text/javascript"></script>



  <script type="text/javascript">
    
     $(document).ready(function()
{
         // fade in content.
         $( '#content-wrapper' ).fadeIn("slow");        
});

    
    
     $(function(){
         $.fn.background.options = {  
             startwidth: 1024,  
             startheight: 768,
             minsize: .50,
             slideinterval: 5000  
         };
         $('#background').supersized();
     });





</script>
        

     <style type="text/css">
     #content-wrapper
{
     display:none;    
}


*{
             margin:0;
             padding:0;
             font:60px "Gotham Black", Arial, sans-serif;
             color:#FFF;
         }
         img{
             border:none;
         }
         body {
             overflow:hidden;/*Needed to eliminate scrollbars*/
         }
         #content{
             margin:0px auto;
             height:100px;
             width:100%;
             bottom:5%;
             background-color:#262626;
             border-top:3px solid #4F4F4F;
             border-bottom:3px solid #4F4F4F;
             position:absolute;
         }
         #contentframe{
             text-align:center;
         }
        
         /*Supersize Plugin Styles*/
         #supersize img, #supersize a{
             height:100%;
             width:100%;
             display:none;
         }
         #supersize .activeslide, #supersize .activeslide img{
             display:inline;
         }




     </style>
</head>

<body>

<div id="supersize">
     <a class="activeslide"><img src="spinka_web/images/background.jpg" name="supersize" id="supersize"=></a>
<div id="content-wrapper">
  
The page content goes here!
  
</div><!-- content-wrapper -->


</body>
</html>
Czadus
26.01.2010, 21:31:39
Co dokładnie chcesz osiągnąćquestionmark.gif Aby treść w znacznikach id="content-wrapper" pojawiała się niezależnie od pełnoekranowego tła??

Już na wstępie nie widzę dołączonej biblioteki supersized.js, to raz, dwa, po jej dołączeniu konsola zwraca błąd $.fn.background is undefined. Nie powinno tam być czasami $.fn.supersized questionmark.gif Wówczas konsola nie wyrzuca błędów.
pollock
26.01.2010, 21:40:56
tak -chce aby na pelnoekranowym tle pojawialy sie divy z obrazami jak i z tekstem.
Oczywiscie niezaleznie od tego tla.

Raczkuje w tematyce jquery do tej pory probowalem scriptaculous.

Dzieki za pomoc.
Czadus
26.01.2010, 22:09:59
Pobrałem ze strony http://buildinternet.com/project/supersized/ odpowiednie biblioteki i pliki. Korzystając z przykładu default.php, nieznacznie zmodyfikowałem go. Oto kod poniżej.

Zmiany dotyczą trzech miejsc. Zamiast
Kod
<script type="text/javascript">  
         $(function(){
             $.fn.supersized.options = {  
                 startwidth: 1024,  
                 startheight: 768,
                 minsize: .50,
                 slideinterval: 5000
             };
             $('#supersize').supersized();
         });
     </script>


jest
Kod
<script type="text/javascript">  
         $(function(){
             $.fn.supersized.options = {  
                 startwidth: 1024,  
                 startheight: 768,
                 minsize: .50,
                 slideinterval: 5000
             };
             $('#supersize').supersized();
            
             $('#myOwnContent').fadeIn(5000);
         });
     </script>


W css dodałem:
Kod
#myOwnContent{
             display: none;
             font-size: 30px;
             position: absolute;
             z-index: 30;
             color: #FF00FF;
         }


W body na końcu, po <div id="content">[....]</div>

wstawiłem <div id="myOwnContent">Jakas treść</div>

Czy o takie coś chodziło??
pollock
26.01.2010, 23:38:44
Chyba sie udalo.
Dzieki.
Ale sadze ze teraz mam sporo niepotrzebnego kodu ktory trzeba pousuwac.
Troche sie juz w tym gubie.

Jezeli mozesz to prosze spojrz na to i co ewentualnie mozna oczyscic.

Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Supersized - Full Screen Background/Slideshow jQuery Plugin</title>
<script src="file:///D|/jquery/query_site/jquery-1.4.min.js" type="text/javascript"></script>



   <script type="text/javascript">
    
      $(document).ready(function()
{
  
         $('#myOwnContent').fadeIn(5000);      
});

    
    
  $(function(){
              $.fn.supersized.options = {  
                  startwidth: 1024,  
                  startheight: 768,
                  minsize: .50,
                  slideinterval: 5000
              };
              $('#supersize').supersized();
            
              $('#myOwnContent').fadeIn(5000);
          });




</script>
        

      <style type="text/css">
  
  #myOwnContent{
     display: none;
     font-size: 30px;
     position: absolute;
     z-index: 30;
     color: #FF00FF;
     left: 218px;
     top: 117px;
          }
  
  
  
  #content-wrapper
{
      display:none;    
}


*{
              margin:0;
              padding:0;
              font:60px "Gotham Black", Arial, sans-serif;
              color:#FFF;
          }
          img{
              border:none;
          }
          body {
              overflow:hidden;/*Needed to eliminate scrollbars*/
          }
          #content{
              margin:0px auto;
              height:100px;
              width:100%;
              bottom:5%;
              background-color:#262626;
              border-top:3px solid #4F4F4F;
              border-bottom:3px solid #4F4F4F;
              position:absolute;
          }
          #contentframe{
              text-align:center;
          }
        
          /*Supersize Plugin Styles*/
          #supersize img, #supersize a{
              height:100%;
              width:100%;
              display:none;
          }
          #supersize .activeslide, #supersize .activeslide img{
              display:inline;
          }





      </style>
</head>

<body>


<div id="supersize">
      <a class="activeslide"><img src="spinka_web/images/background.jpg" name="supersize" width="1024" height="768" id="supersize"=></a>
<div id="content-wrapper"></div>
  
  
  
  <div id="myOwnContent">Jakas treść</div>
The page content goes here!
  
</div><!-- content-wrapper -->


</body>
</html>



Aha i jeszcze jedno- czy jest mozliwosc wplywania na warstwy
Chodzi mi o pojawianie sie tekstu ktory jest zawsze na gorze.
Czadus
27.01.2010, 06:53:00
1. Nie widzę dołączonej biblioteki supersized.js
2. $('#myOwnContent').fadeIn(5000); pojawia się dwukrotnie w kodzie, niepotrzebnie
3. wszystkie style css możesz przenieść do zewnętrznego pliku

Co do pozostałej części kodu, to już nie wiem, co dokładnie jest Ci potrzebne z aktualnie działającej wersji, a co nie.
pollock
27.01.2010, 10:01:35
Witam,
Wszystko dziala za wyjatkiem niepoprawnego wyswietlania tla.
W firefox jest ok natomiast pod IE pojawiaja sie scrolle oraz po prawej stronie bialy pasek.
Czyli tlo nie wypelnia calosci ekranu tak jak powinno byc.
Co jest nie tak?

Kod
<script src="javascript/jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="supersized.1.0.js"></script>


<script type="text/javascript">
    
      $(document).ready(function()
{
  
        $('#apDiv2').fadeIn(5000);      
});      
      
      
      $(document).ready(function()
{
  
        $('#apDiv1').fadeIn(5000);      
});
      $(document).ready(function()
{
  
        $('#apDiv6').fadeIn(5000);      
});

       $(document).ready(function()
{
  
        $('#apDiv4').fadeIn(5000);      
});

       $(document).ready(function()
{
  
        $('#apDiv5').fadeIn(5000);      
});


      $(document).ready(function()
{
  
        $('#apDiv8').fadeIn(5000);      
});


      $(document).ready(function()
{
  
        $('#apDiv7').fadeIn(5000);      
});


      $(document).ready(function()
{
  
        $('#apDiv10').fadeIn(5000);      
});

      $(document).ready(function()
{
  
        $('#apDiv9').fadeIn(5000);      
});

       $(document).ready(function()
{
  
        $('#apDiv11').fadeIn(5000);      
});

$(function(){
             $.fn.supersized.options = {  
                 startwidth: 1024,  
                 startheight: 768,
                 minsize: .50,
                 slideinterval: 5000
             };
             $('#supersize').supersized();
            
      
         });
</script>
        

     <style type="text/css">




#content-wrapper
{
     display:none;    
}


*{
             margin:0;
             padding:0;
             font:60px "Gotham Black", Arial, sans-serif;
             color:#FFF;
         }
         img{
             border:none;
         }
         body {
             overflow:hidden;/*Needed to eliminate scrollbars*/
         }
         #content{
             margin:0px auto;
             height:100px;
             width:100%;
             bottom:5%;
             background-color:#262626;
             border-top:3px solid #4F4F4F;
             border-bottom:3px solid #4F4F4F;
             position:absolute;
         }
         #contentframe{
             text-align:center;
         }
        
         /*Supersize Plugin Styles*/
         #supersize img, #supersize a{
             height:100%;
             width:100%;
             display:none;
         }
         #supersize .activeslide, #supersize .activeslide img{
             display:inline;
         }





     #apDiv1 {
    display:none;
    position:absolute;
    left:922px;
    top:250px;
    width:264px;
    height:328px;
    z-index:31;
}
  
}
#apDiv10 {
    display:none;
    position:absolute;
    left:646px;
    top:298px;
    width:354px;
    height:340px;
    z-index:40;
}
     .style4 {
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
}

#apDiv11 {
    display:none;
    position:absolute;
    left:634px;
    top:268px;
    width:354px;
    height:69px;
    z-index:40;
}
.style16 {
    font-size: 22px
}
.style18 {font-size: 16px}
     </style>
</head>

<body>
<div id="apDiv1"><img src="images/frame1.gif" width="196" height="235" /></div>
<div id="apDiv2"><img src="images/frame3.gif" width="236" height="292" /></div>
<div id="apDiv4"><img src="images/frame7.gif" width="208" height="169" /></div>
<div id="apDiv5"><img src="images/frame5.gif" width="216" height="184" /></div>
<div id="apDiv6"><img src="images/frame2.gif" width="348" height="244" /></div>
<div id="apDiv7"><img src="images/frame8 copy2.gif" width="278" height="346" /></div>
<div id="apDiv8"><img src="images/frameadres2.gif" width="453" height="209" /></div>
<div class="style4" id="apDiv9">ul.1 Maja 16/2D, 75-800 Koszalin, tel: 607 964 813</div>
<div class="none" id="apDiv10">
  <div align="left">
    <p class="style12">
    <ul>
      <li class="style18">kolczyki</li>
      <li class="style18">korale</li>
      <li class="style18">pierścionki</li>
      <li class="style18">bransoletki</li>
      <li class="style18">biżuteria z kamieni<br />
      naturalnych</li>
      <li class="style18">paski</li>
      <li class="style18">klipsy</li>
      <li class="style18">ozdoby do włosów</li>
      <li class="style18">broszki</li>
    </ul>
    <p class="style18">&nbsp;</p>
  </div>
</div>

<div class="style16" id="apDiv11">Asortyment:</div>

<div id="supersize">
    <a class="activeslide" ><img  src="images/background.jpg"/></a>
    <a href="http://interfacelift.com/wallpaper_beta/details/1787/eye_on_the_world.html"><img src="images/lense.jpg"/></a>
</div>
</body>
</html>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.