jquery problem in ie7

Peter Schermers 112 posts 134 karma points

May 23, 2012 @ 10:45

jQuery problem in IE7

Since I'm a newbie to both Umbraco and jQuery, I was really proud I managed to develop some simple but useful scripts using jQuery in Umbraco. I just thought everything was working fine until I tested my Umbraco website in IE7. Though it all works perfectly in IE8, IE7 has this little issue I can't figure out:

I put some jQuery on some paragraphs in the main contentfield, but everytime I click the tab in the navbar to load this page, the main contentfield suddenly includes not only these adjusted paragraphs but the content of the footer too. As soon as I refresh the page, everything is solved and looks great again.

So what am I to do? I mean, should I insert a 'double refresh' on this page or something?

I hope you guys can help me out, thanks in advance!

Copy Link

Paul Blair 466 posts 731 karma points

May 23, 2012 @ 11:47

A double refresh will only mask the error - better to try and resolve it. Any chance of a URL to problem page or including the script that is having the problem

Copy Link

Peter Schermers 112 posts 134 karma points

May 23, 2012 @ 11:56

<!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" xml:lang="en">

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="title" content="<umbraco:Item field="metaTitle" runat="server" />" />

  <meta name="keywords" content="<umbraco:Item field="metaKeywords" runat="server" />" />

  <meta name="description" content="<umbraco:Item field="metaDescription" runat="server" />" />

  <title>Heli Aviation</title>

  <script src="/js/script.js"></script>

  <asp:ContentPlaceHolder ID="stylesheet" runat="server"></asp:ContentPlaceHolder>

  <![if !IE]>

    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css" />

  <![endif]>

  <style>

    body {

      padding-top: 151px; /* to make the container go all the way to the bottom of the topbar */

  </style>

  <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->

  <!--[if lt IE 9]>

    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

    <link rel="stylesheet" href="/css/ie.css" />

  <![endif]-->

</head>

<body onload="menuSlider.init('nav','slide')">

  <div class="navbar navbar-fixed-top">

    <div class="navbar-inner">

      <div class="container">

        <a class="brand" href="/home.aspx">

          <img src="/img/logo.png"/>

        </a>

        <div class="nav-slide">

          <umbraco:Macro Alias="NavigationRazor" runat="server" />

          <div class="slide-location">

            <div id="slide">

              <!-- -->

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

  <div class="bg">

    <div class="row-fluid total">

      <hr />

      <div class="span">

        <div class="span empty"></div>

        <div class="span overlay"></div>

      </div>

      <div class="span span-content">

        <div class="container contentveld">

          <div class="fs">

            <img src="/img/fs_home.png">

          </div>

          <div class="container-fluid container1">

            <div class="row-fluid row1">

              <div class="span8 contentlinks">

                <div class="span8border">

                  <asp:ContentPlaceHolder ID="contentlinks" runat="server"></asp:ContentPlaceHolder>

                </div>

              </div>

              <div class="span4 contentrechts">

                <div class="rechts">

                  <asp:ContentPlaceHolder ID="contentrechts" runat="server"></asp:ContentPlaceHolder>

                </div>

              </div>

            </div>

            <div class="sitemap">

              <div class="social-media">

                <p>Volg ons op:</p>

                <a href="http://www.facebook.com"><img src="/img/sm_facebook.png" /></a>

                <a href="http://www.twitter.com"><img src="/img/sm_twitter.png" /></a>

                <a href="http://www.linked-in.com"><img src="/img/sm_linkedin.png" /></a>

              </div>

              <div class="snel-contact">

                <p>Wesselseweg 132 | 3770 RL Kootwijkerbroek | The Netherlands | T: +31(0)6 1663 1884 | F: +31(0)342 441 060 | E: <a href="mailto:info@heliaviation.nl">info@heliaviation.nl</a>

                </p>

              </div>

            </div>

          </div>

        </div>

        <div class="footer">

          <hr />

        </div>

      </div>

    </div>

  </div>

  <!-- /container -->

  <!-- Le javascript

  ================================================== -->

  <!-- Placed at the end of the document so the pages load faster -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

  <script src="/js/bootstrap-button.js"></script>

  <script>

    $(document).ready(function() {

      var liwidth = 0;

      var correctie = 6;

      $('#nav > li').each(function() {

        liwidth += $(this).width();

});

      var slide = parseInt(liwidth - correctie);

      $('.slide-location').css('padding-right', slide + 'px');

// START TROUBLEMAKER:

var charCount = 300;

$('.span8border > span').each(function() {

var niUrl = $(this).find('a').attr('href');

$(this).find('p').each(function (){

$(this).replaceWith(function() {

var niSliced = $(this).text().slice(0, charCount);

return '<p>'+ niSliced +'... <br /><a href="'+ niUrl +'">Lees meer</a></p>';

});

$(this).find('h6').each(function() {

$(this).replaceWith(function() {

var niSliced = $(this).text().slice(0, -8);

return '<h6>'+ niSliced +'</h6>';

});

$(this).find('p:not(:first)').remove();

$(this).find('a:last').remove();

});

// END TROUBLEMAKER

      $('#nav > li:not(:last)').each(function() {

        var tabs = $(this).text();

        var links = $(this).children('a').attr('href');

        $('.sitemap').append('<a href="' + links + '">' + $.trim(tabs) + '</a>&nbsp;&nbsp;|&nbsp;&nbsp;');

});

      $('#nav > li:last').each(function() {

        var tabs = $(this).text();

        var links = $(this).children('a').attr('href');

        $('.sitemap').append('<a href="' + links + '">' + $.trim(tabs) + '</a>');

});

});

  </script>

</body>

</html>

Copy Link

Peter Schermers 112 posts 134 karma points

May 23, 2012 @ 11:57

Okay, hope this makes it all a bit clearer....

Copy Link

Peter Schermers 112 posts 134 karma points

May 23, 2012 @ 12:16

This is how it shows up BEFORE refreshing IE7:

And this is how it SHOULD be (and how it's shown after refreshing):

Copy Link

Peter Schermers 112 posts 134 karma points

Sep 18, 2012 @ 08:43

I just don't use IE7 anymore so instead I'll be using IE8+.

Problem solved ;-)

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

jQuery problem in IE7