Twitterfeed加载到其iframe,然后消失

时间:2013-09-19 08:23:03

标签: javascript css iframe twitter

我有一个需要twitterfeed的项目。这通常适用于:

但是在这个项目中它加载然后立即消失。

HTML

<body>
<div class="gridContainer clearfix">
  <div id="TopBanner"><div class="LogoContainer"><img src="../../img/LayoutImage/LogoDeWitteHoeveMonochroom.png"></div></div>
  <div id="MainContent"><div class="ContentContainer"><h1>Social Media</h1><p>Natuurlijk kunt u de Witte Hoeve vinden op social media.</p>
  <p>Volg de Witte Hoeve op sociale media voor het laatste nieuws, nieuwe evenementen en acties.</p><div class="SocialContent"><!--<div class="Twitter"><a href="http://www.twitter.com/wittehoeve"target="_blank">&#xf099;</a></div><div class="Facebook"><a href="http://www.facebook.com/De-Witte-Hoeve" target="_blank">&#xf082;</a></div><div class="LinkedIn"><a href="#" target="_blank">&#xf08c;</a></div>-->
  <div class="TwitterExp"><a class="twitter-timeline" href="https://twitter.com/ICUMediaNet" data-widget-id="356770132908994560">Tweets van @ICUMediaNet</a>
<script type="text/javascript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  </div> 
</div>
    </div></div>
  <div id="ImageSlider">
    <div class="ImageSliderContainer">
        <div class="Slider">
        <ul class="rslides">
          <li>
            <img src="../../img/LayoutPhoto/DeWitteHoeveFront.jpg" />
            <p class="flex-caption">Hét feest- en vergadercentrum in Venray.</p>
          </li>
          <li>
            <img src="../../img/LayoutPhoto/FeestPubliek.jpg" />
            <p class="flex-caption">Voor uw onvergetelijke feest.</p>
          </li>
          <li>
            <img src="../../img/LayoutPhoto/KamerBed.jpg" />
            <p class="flex-caption">Luxe Hotelkamers voor een gezonde nachtrust.</p>
          </li>
        </ul>
        </div>
    </div>
    </div>
<div id="Menu">
        <div class="menu-button">Menu</div>
        <nav>
          <ul data-breakpoint="768" class="flexnav">
            <li><a href="../../" class="FirstLi"><span class="MenuIcon">&#8962;</span>Home</a></li>
            <li><a class="SubMenu"><span class="MenuIcon">&#128710;</span>Hotel</a>
              <ul>
                <li><a href="../../hotel/booking/"><span class="MenuIcon">&#128179;</span>Reserveren</a></li>
                <li><a href=""><span class="MenuIcon">&#9789;</span>Kamers</a></li>
                <li><a href=""><span class="MenuIcon">&#8505;</span>Algemene informatie</a></li>
              </ul>
            </li>
            <li><a class="SubMenu"><span class="MenuIcon">&#128227;</span>Evenementen</a>
              <ul>
                <li><a href=""><span class="MenuIcon">&#128101;</span>Trouwen</a></li>
                <li><a class="SubMenu"><span class="MenuIcon">&#128200;</span>Bedrijfsfeesten</a>
                  <ul>
                    <li><a href=""><span class="MenuIcon">&#59170;</span>Personeelsfeesten</a></li>
                    <li><a href=""><span class="MenuIcon">&#128266;</span>Productpresentaties</a></li>
                  </ul>
                </li>
                <li><a class="SubMenu"><span class="MenuIcon">&#128197;</span>Agenda</a>
                  <ul>
                    <li><a href=""><span class="MenuIcon">&#9835;</span>HoeveBlues</a></li>
                    <li><a href=""><span class="MenuIcon">&#59168;</span>Paranormale Beurs</a></li>
                    <li><a href=""><span class="MenuIcon">&#9835;</span>Dance Classics</a></li>
                    <li><a href=""><span class="MenuIcon">&#9835;</span>Sixties Night</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li><a class="SubMenu"><span class="MenuIcon">&#127748;</span>Zalen</a>
              <ul>
                <li><a href=""><span class="MenuIcon">&#128188;</span>Vergaderen</a></li>
                <li><a href=""><span class="MenuIcon">&#128214;</span>Seminars</a></li>
                <li><a href=""><span class="MenuIcon">&#127908;</span>Conferenties</a></li>
              </ul>
            </li>
            <li><a class="LastLi SubMenu"><span class="MenuIcon">&#128222;</span>Contact</a>
              <ul>
                <li><a href="../info/"><span class="MenuIcon">&#9993;</span>Contactgegevens</a></li>
                <li><a href="#"><span class="MenuIcon">&#59136;</span>Social Media</a></li>
                <li><a href="../route/"><span class="MenuIcon">&#59175;</span>Route</a></li>
              </ul>
            </li>
          </ul>
        </nav>
</div>
<div id="Footer">
  <div id="FooterOne"><div class="FooterContent">Gasstraat 5<br>5801CT Venray<br>T: <a href="tel://+31-478-581626">0478-581626</a><br>F: <a href="tel://+31-478-511944">0478-511944</a><br>E: <a href="mailto:info@dewittehoeve.com">info@dewittehoeve.com</a></div></div>
  <div id="FooterTwo"><span class="FooterSocialTwitter"><a href="http://twitter.com/wittehoeve" target="_blank">&#xf099;</a></span><span class="FooterSocialFacebook"><a href="http://www.facebook.com/De-Witte-Hoeve" target="_blank">&#xf082;</a></span><span class="FooterSocialLinkedin"><a href="#" target="_blank">&#xf08c;</a></span></div>
  <div id="FooterThree"><div class="Copyright">&copy; 2013 de Witte Hoeve</div></div>
  <p>&nbsp;</p></div>
</div>
<script src="../../Jscripts/respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="../../Jscripts/jquery.backstretch.js"></script>
<script src="../../Jscripts/responsiveslides.min.js"></script>
<script src="../../Jscripts/jquery.flexnav.js"></script>
<script type="text/javascript">
onresize=onload=function() {
    if ($(window).width() < 1024) {
        $("#MainContent").insertAfter($("#ImageSlider"));
        $("#Menu").insertBefore($("#TopBanner"));
    } else {
        $("#MainContent").insertBefore($("#ImageSlider"));
        $("#Menu").insertBefore($("#Footer"));
    }
};
</script>
<script type="text/javascript">
    jQuery(document).ready(function($) {

                $(".flexnav").flexNav();
            });
</script>
<script type="text/javascript">
$(".rslides").responsiveSlides({
  auto: true,            
  speed: 500,             
  timeout: 4000,         
  pager: false,          
  nav: false,          
  random: false,          
  pause: false,         
  pauseControls: false,   
  prevText: "Previous",   
  nextText: "Next",      
  maxwidth: "",           
  navContainer: "",       
  manualControls: "",     
  namespace: "rslides",   
  before: function(){},   
  after: function(){}    
});
</script>
<script type="text/javascript">
  $.backstretch([
      "../../img/LayoutPhoto/KamerBackground.jpg"
    , "../../img/LayoutPhoto/PoortBackground.jpg"
    , "../../img/LayoutPhoto/GangBackground.jpg"
    , "../../img/LayoutPhoto/ChampagneBackground.jpg"
  ], {duration: 4500, fade: 800});
</script>
</body>

CSS

.SocialContent {
    display: block;
    color: #222222;
    background-color: #FFFFFF;
    -khtml-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.twitter-timeline {
    display: block;
    max-width: 100%;
}

有谁熟悉这个问题?

我发现打破twitterfeed的脚本是:

 <script type="text/javascript">
onresize=onload=function() {
    if ($(window).width() < 1024) {
        $("#MainContent").insertAfter($("#ImageSlider"));
        $("#Menu").insertBefore($("#TopBanner"));
    } else {
        $("#MainContent").insertBefore($("#ImageSlider"));
        $("#Menu").insertBefore($("#Footer"));
    }
};
</script>

这当然是我写的唯一脚本&#34;完全&#34;从头开始。任何人都可以看到我的错误吗?

编辑I:我添加了HTML的其余部分 编辑II:我发现了有问题的脚本,但仍希望拥有它的功能。

0 个答案:

没有答案