jquery problem in ie7

Peter Schermers 112 posts 134 karma points

May 23, 2012 @ 10:45

UI Questions

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:[email protected]">[email protected]</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...

Flag this post as spam?

jQuery problem in IE7