3

I am trying to get the twitter bootstrap framework running on our SharePoint 2013 intranet page. When I'm editing the page, the code is working as expected. After saving the web part page, the functionality is not there any more. This example with the navigation bar below is losing the drop-down effect.

I tried both the embedded code functionality and the content script web part, the behaviour is the same.

The bootstrap.js, the jquery.js and optionally testing with html5shiv.js to enable IE for HTML5 are included with script tags in a custom master page:

<SharePoint:CssRegistration Name="/_catalogs/masterpage/sbit/bootstrap/css/bootstrap.css"     
runat="server" />
<!--[if IE 9]>
<script src="/_catalogs/masterpage/sbit/bootstrap/js/html5shiv.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="/_catalogs/masterpage/sbit/bootstrap/js/bootstrap.min.js"></script>

and my web part (embedded code) looks like:

<div class="navbar">
  <div class="navbar-inner">
     <ul class="nav" role="navigation">
        <li class="dropdown">
           <a class="dropdown-toggle" id="drop1" role="button" href="#" data-toggle="dropdown">Kunde 
              <b class="caret"></b></a>
           <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
              <li> 
                 <a tabindex="-1" href="http://google.de/" target="_blank">Bilder</a></li>
              <li> 
                 <a tabindex="-1" href="http://google.de/" target="_blank">Relevante Dokumente</a></li>
              <li class="divider">
              </li>
              <li> 
                 <a tabindex="-1" href="http://google.de/" target="_blank">IP- und Zugangsliste</a></li>
           </ul>
        </li>
        <li>
           <a href="#domaene">Domäne</a> </li>
        <li class="dropdown">
           <a class="dropdown-toggle" id="drop3" role="button" href="#" data-toggle="dropdown">Netzwerk 
              <b class="caret"></b></a>
           <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
              <li> 
                 <a tabindex="-1" href="#firewall">Firewall</a></li>
              <li> 
                 <a tabindex="-1" href="#switche">Switche</a></li>
              <li> 
                 <a tabindex="-1" href="#hosting">Webhosting</a></li>
           </ul>
        </li>
        <li class="dropdown">
           <a class="dropdown-toggle" id="drop4" role="button" href="#" data-toggle="dropdown">Dienste 
              <b class="caret"></b></a>
           <ul class="dropdown-menu" role="menu" aria-labelledby="drop4">
              <li> 
                 <a tabindex="-1" href="#">Antivirus</a></li>
              <li> 
                 <a tabindex="-1" href="#">Backup</a></li>
              <li> 
                 <a tabindex="-1" href="#">E-Mail</a></li>
              <li> 
                 <a tabindex="-1" href="#">FTP</a></li>
           </ul>
        </li>
        <li> 
           <a href="#">Software</a></li>
        <li class="dropdown">
           <a class="dropdown-toggle" id="drop5" role="button" href="#" data-toggle="dropdown">Peripherie 
              <b class="caret"></b></a>
           <ul class="dropdown-menu" role="menu" aria-labelledby="drop5">
              <li> 
                 <a tabindex="-1" href="#druckserver">Druckserver</a></li>
              <li> 
                 <a tabindex="-1" href="#etikettendrucker">Etikettendrucker</a></li>
           </ul>
        </li>
        <li class="dropdown">
           <a class="dropdown-toggle" id="drop5" role="button" href="#" data-toggle="dropdown">Dienstleister 
              <b class="caret"></b></a>
           <ul class="dropdown-menu" role="menu" aria-labelledby="drop5">
              <li> 
                 <a tabindex="-1" href="#bechtle">Bechtle</a></li>
           </ul>
        </li>
     </ul>
  </div>
</div>
  • Could please press F12 on your browser and see what error is there?That may help you out as to why the bootstrap effect is not coming. Thanks Bhism – BHISM NARAYAN Jan 22 '16 at 5:25
2

The thing that fixed it for me was my <script> where missing type="text/javascript" I am adding script inside a ContextEditor webpart. Once I added that to my code it started working.

  • Surprised you don't have more upvotes. This solved it for me. Thank you! – jjr2527 Apr 28 '14 at 11:33
1

It appears you could be running into trouble with your Intranet site trying to get out to the Internet site you list for the jquery-latest.js.

I would download that script, and upload it to SharePoint. Also, make sure the masterpage is checked in, as well as any other assets you added.

0

Add type="text/javascript" Works for me.

-1

If javascript works only in edit mode and after save javascript doesn't work, try add this row to oslo.master or seatle.master
SharePoint:ScriptLink ID="SPScriptLink" runat="server" LoadAfterUI="true" Localizable="false" Name="sp.js" /

This row has solved my similar problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.