Подскажите, как корректно отобразить вкладку в Фейсбуке

Syndicate221 · November 6, 2011

Здравствуйте!

Помогите пожалуйста понять, что я делаю не так.

Есть приложение называется Static HTML, в которое можно вставлять HTML код.

Есть шаблон, который специально предназначен для такой вкладки, т.к. размеры подогнаны под 520 на 800 пикселей. Style.css и изображения храняться на гугл сайтс (т.к. в фейсбуке требуется HTTPS соединение)

вставляю в приложение, HTML код файла index.html в котором прописаны ссылки на стайл ксс и ссылки на изображение.

Нажимаю просмотреть и...в файрфоксе отображается корректно, а в опере, хроме, ослике все расползается. Не знаю в чем причина. подскажите.

Это же участь постигла и слайдер, который я пытаюсь вставить здесь

Вот ссылка на вкладку которая отображает шаблон.

вот сам код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Business Group | We Care About Your Business</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="https://sites.google.com/site/biznesshablon/style.css" type="text/css" media="screen"/>


<script type="text/javascript" src="https://sites.google.com/site/biznesshablon/jquery.min.js"></script>
</head>
<body>
  <div id="wrap">
    <div id="top_wrap">
      <div id="logo"><a href="index.html"><img src="https://sites.google.com/site/biznesshablon/logo.png" width="224" height="46" border="0" alt="" /></a></div>
      <div id="like"><img src="https://sites.google.com/site/biznesshablon/like.png" width="58" height="37" border="0" alt="" /></div>
      <div class="clear"></div>
    </div>
    <div id="cc_menu" class="cc_menu">
      <div class="cc_item" style="z-index:4;">
        <img src="https://sites.google.com/site/biznesshablon/1.jpg" alt="image" style="top:0px" />
        <span class="cc_title">About Us</span>
        <div class="cc_submenu">
          <ul style="height:151px">
            <li class="cc_content_1">About Us</li>
          </ul>
        </div>
      </div>
      <div class="cc_item service" style="z-index:3">
        <img src="https://sites.google.com/site/biznesshablon/2.jpg" alt="image" />
        <span class="cc_title">Services</span>
        <div class="cc_submenu">
          <ul>
            <li class="cc_content_2">Services</li>
          </ul>
        </div>
      </div>
      <div class="cc_item products" style="z-index:2;">
        <img src="https://sites.google.com/site/biznesshablon/3.jpg" alt="image" />
        <span class="cc_title">Products</span>
        <div class="cc_submenu">
          <ul>
            <li class="cc_content_3">Products</li>
          </ul>
        </div>
      </div>
      <div class="cc_item contacts" style="z-index:1;">
        <img src="https://sites.google.com/site/biznesshablon/4.jpg" alt="image" />
        <span class="cc_title">Contacts</span>
        <div class="cc_submenu">
          <ul>
            <li class="cc_content_4">Contacts</li>
          </ul>
        </div>
      </div>

      <div id="cc_content" class="cc_content">
        <span id="cc_back" class="cc_back"><< Go back</span>
        <div class="cc_content_1">
          <h1>About Us</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet laoreet nisi. Maecenas augue metus, vestibulum sed tristique vel, ullamcorper quis quam. Suspendisse ligula nulla, adipiscing eu vestibulum sit amet, tristique sit amet nisi.</p>
          <p>Curabitur gravida imperdiet facilisis. Vestibulum ullamcorper bibendum orci nec tempus. Curabitur suscipit, orci at interdum vehicula, sem felis ultricies orci, vel fermentum quam tortor ac nibh. Nunc felis leo, pharetra vitae porta ac, volutpat a mauris. Curabitur aliquam feugiat ligula non ornare.</p>
          <p>Curabitur metus metus, mollis ac sollicitudin sed, hendrerit ut augue. Phasellus mi leo, lobortis et malesuada sit amet, tempor vitae est.</p>
          <p>Maecenas augue metus, vestibulum sed tristique vel, ullamcorper quis quam. Suspendisse ligula nulla, adipiscing eu vestibulum sit amet, tristique sit amet nisi.</p>
          <p>Gravida imperdiet facilisis. Vestibulum ullamcorper bibendum orci nec tempus. Curabitur suscipit, orci at interdum vehCurabitur aliquam feugiat ligula non ornare. Curabitur metus metus, mollis ac sollicitudin sed, hendrerit ut augue. Phasellus mi leo, lobortis et malesuada sit amet, tempor vitae est</p>        
        </div>
        <div class="cc_content_2">
          <h1 style="border-bottom:1px #bced21 solid">services</h1>
          <p>Consectetur adipiscing elit. Fusce sit amet laoreet nisi. Maecenas augue metus, vestibulum sed tristique vel, ullamcorper quis quam. Suspendisse ligula nulla, adipiscing eu vestibulum sit amet, tristique sit amet nisi. </p>
          <ul style="padding:14px 0 24px 0">
            <li>>> Curabitur gravida imperdiet facilisis</li>
            <li>>> Vestibulum ullamcorper bibendum orci nec</li> 
            <li>>> Tempusorci at interdum vehicula</li>
            <li>>> Sem felis ultricies orci, vel fermentum quam</li>
            <li>>> Tortor ac nibpharetra vitae porta acolutpat</li> 
            <li>>> Maurisurabitur aliquam feugiat ligula non ornare</li>            
          </ul>          
          <p>Curabitur metus metus, mollis ac sollicitudin sed, hendrerit ut augue. Phasellus mi leo, lobortis et malesuada sit amet, tempor vitae est. Maecenas augue metus, vestibulum sed tristique vel, ullamcorper quis quam. Suspendisse ligula nulla, adipiscing eu vestibulum sit amet, tristique sit amet nisi.</p>
          <p>Gravida imperdiet facilisis. Vestibulum ullamcorper bibendum orci nec tempus. Curabitur suscipit, orci at interdum vehCurabitur aliquam feugiat ligula non ornare. Curabitur metus metus, mollis ac sollicitudin sed, hendrerit ut augue. Phasellus mi leo, lobortis et malesuada sit amet, tempor vitae est.</p>          
        </div>
        <div class="cc_content_3">
          <h1 style="border-bottom:1px #ffaa13 solid">products</h1>
          <p>Consectetur adipiscing elit. Fusce sit amet laoreet nisi. Maecenas augue metus, vestibulum sed tristique vel, ullamcorper quis quam. Suspendisse ligula nulla, adipiscing eu vestibulum sit amet, tristique sit amet nisi.</p>
          <ul style="padding-bottom:9px; color:#ffaa13">
            <li>>> Sem felis ultricies orci, vel fermentum quam</li>
            <li>>> Tortor ac nibpharetra vitae porta acolutpat</li> 
            <li>>> Maurisurabitur aliquam feugiat ligula non ornare</li>            
          </ul>        
          <p>Curabitur metus metus, mollis ac sollicitudin sed, hendrerit ut augue. Phasellus mi leo, lobortis et malesuada sit amet, tempor vitae est. Maecenas augue metus, vestibulum sed tristique vel, ullamcorper quis quam. Suspendisse ligula nulla, adipiscing eu vestibulum sit amet, tristique sit amet nisi. Gravida imperdiet facilisis. Vestibulum ullamcorper bibendum orci nec tempus. Curabitur suscipit, orci at interdum vehCurabitur aliquam feugiat ligula non ornare. Curabitur metus metus, mollis ac sollicitudin sed, hendrerit ut augue. Phasellus mi leo, lobortis et malesuada sit amet, tempor vitae est. Suspendisse ligula nulla, adipiscing eu vestibulum sit amet, tristique sit amet nisi.</p>  
          <ul style="color:#ffaa13">
            <li>>> Felis ultricies orci, vel fermentum quam</li>
            <li>>> Tortor ac nibpharetra vitae porta acolutpat </li> 
            <li>>> Maurisurabitur aliquam feugiat ligula non</li>            
          </ul>          
        </div>
        <div class="cc_content_4" style="padding-right:10px">
          <h1 style="border-bottom:1px #e71e1e solid">Contacts</h1>
          <p>Fusce sit amet laoreet nisi. Maecenas augue metus, vestibulum sed tristique vel, ullamcorper quis quam. Suspendisse ligula.</p>
          <img src="https://sites.google.com/site/biznesshablon/map.jpg" width="349" height="172" alt="" style="padding:5px; background:#FFFFFF; border:1px #d4d4d4 solid" />
          <div id="contacts_info" style="display:block">
            <table cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td height="122" width="169">
                  9087 Marmora Road,<br />
                  Glasgow, D04 89GR.<br />
                  Tel.: +1 989 585 5895<br />
                  FAX: +1 533 566 8763<br />
                  <a href="mailto:mail@demolink.org">mail@demolink.org</a>
                </td>
                <td>
                  9087 Marmora Road,<br />
                  Glasgow, D04 89GR.<br />
                  Tel.: +1 989 585 5895<br />
                  FAX: +1 533 566 8763<br />
                  <a href="mailto:mail@demolink.org">mail@demolink.org</a>
                </td>
              </tr>
            </table>
          </div>
          <p style="padding-right:15px">Vestibulum ullamcorper bibendum orci nec tempus. Curabitur suscipit, orci at interdum vehCurabitur aliquam feugiat ligula non ornare. Curabitur metus metus, mollis ac sollicitudin sed, hendrerit ut augue. Phasellus mi leo, lobortis et malesuada sit amet, </p>
        </div>                
      </div>
    </div>
    <div id="footer_text">© 2011 Business Group<span>Design by <a href="http://www.facebooktemplates2u.com/" target="_blank">Facebook Templates</a></span></div>
    <div id="social">
      <ul>
        <li><a href="#"><img src="https://sites.google.com/site/biznesshablon/icon1.png" width="22" height="22" alt="" /></a></li>
        <li><a href="#"><img src="https://sites.google.com/site/biznesshablon/icon2.png" width="22" height="22" alt="" /></a></li>
        <li><a href="#"><img src="https://sites.google.com/site/biznesshablon/icon3.png" width="22" height="22" alt="" /></a></li>
        <li><a href="#"><img src="https://sites.google.com/site/biznesshablon/icon4.png" width="22" height="22" alt="" /></a></li>
      </ul>
    </div>
    <div class="clear"></div>    
    <script type="text/javascript">
      $(function() {
        //all the menu items
        var $items     = $('#cc_menu .cc_item');
        //number of menu items
        var cnt_items  = $items.length;
        //if menu is expanded then folded is true
        var folded    = false;
        //timeout to trigger the mouseenter event on the menu items
        var menu_time;
        /**
        bind the mouseenter, mouseleave to each item:
        - shows / hides image and submenu
        bind the click event to the list elements (submenu):
        - hides all items except the clicked one, 
        and shows the content for that item
        */
        $items.unbind('mouseenter')
            .bind('mouseenter',m_enter)
            .unbind('mouseleave')
            .bind('mouseleave',m_leave)
            .find('.cc_submenu > ul > li')
            .bind('click',function(){
          var $li_e = $(this);
              //if the menu is already folded,
              //just replace the content
          if(folded){
            hideContent();
            showContent($li_e.attr('class'));
          }  
              else //fold and show the content
            fold($li_e);
        });

        /**
        mouseenter function for the items
        the timeout is used to prevent this event 
        to trigger if the user moves the mouse with 
        a considerable speed through the menu items
        */
        function m_enter(){
          var $this   = $(this);
          clearTimeout(menu_time);
          menu_time   = setTimeout(function(){
          //img
          $this.find('img').stop().animate({'top':'0px'},400);
          //cc_submenu ul
          $this.find('.cc_submenu > ul').stop().animate({'height':'151px'},400);
          },200);
        }

        //mouseleave function for the items
        function m_leave(){
          var $this = $(this);
          clearTimeout(menu_time);
          //img
          $this.find('img').stop().animate({'top':'-700px'},400);
          //cc_submenu ul
          $this.find('.cc_submenu > ul').stop().animate({'height':'0px'},400);
        }

        //back to menu button - unfolds the menu
        $('#cc_back').bind('click',unfold);

        /**
        hides all the menu items except the clicked one
        after that, the content is shown
        */
        function fold($li_e){
          var $item    = $li_e.closest('.cc_item');

          var d = 100;
          var step = 0;
          $items.unbind('mouseenter mouseleave');
          $items.not($item).each(function(){
            var $item = $(this);
            $item.stop().animate({
              'marginLeft':'-130px'
            },d += 200,function(){
              ++step;
              if(step == cnt_items-1){
                folded = true;
                showContent($li_e.attr('class'));
              }  
            });
          });
        }

        /**
        shows all the menu items 
        also hides any item's image / submenu 
        that might be displayed
        */
        function unfold(){
          $('#cc_content').stop().animate({'left':'-140px'},600,function(){
            var d = 100;
            var step = 0;
          $items.each(function(){
              var $item = $(this);

              $item.find('img')
                 .stop()
                 .animate({'top':'-700px'},200)
                 .andSelf()
                 .find('.cc_submenu > ul')
                 .stop()
                 .animate({'height':'0px'},200);

              $item.stop().animate({
              'marginLeft':'0px'
              },d += 200,function(){
                ++step;
                if(step == cnt_items-1){
                  folded = false;
                  $items.unbind('mouseenter')
                      .bind('mouseenter',m_enter)
                      .unbind('mouseleave')
                      .bind('mouseleave',m_leave);

                  hideContent();
                }      
              });
            });
          });
        }

        //function to show the content
        function showContent(idx){
          $('#cc_content').stop().animate({'left':'130px'},200,function(){
            $(this).find('.'+idx).fadeIn();
          });
        }

        //function to hide the content
        function hideContent(){
          $('#cc_content').find('div').hide();
        }
      });
    </script>
  </div>
  </div>
</body>
</html>

Sign In

Подскажите, как корректно отобразить вкладку в Фейсбуке

Question

Syndicate221

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information