Can't get Bootstrap features to work in UI Pages

[yundlu316]

votefavorite

I'm creating a UI Page and am testing out possible site layout ideas from Codepen. The page I'm testing out uses jquery for a cool hero sliding feature upon hover and I've also included our team's Bootstrap inverse navbar. I used Bootstrap CDN from getbootstrap.com, but the Bootstrap navbar features don't seem to work (i.e. the dropdown doesn't work and when the screen size is minimized, the hamburger button won't expand). I've read about noConflict, but am unsure if that's the issue and how to properly use it. For kicks, I added jQuery.noConflict(); within <script> tags and the hamburger icon actually worked, but the navbar dropdown still didn't work and the hero images hover feature stopped working as well. Here is my code (the code works perfectly in JSFiddle though):   Edit fiddle - JSFiddle Any suggestions are greatly appreciated!

[yundlu316]

Thanks Prithviaj!   What is the exact definition of a Scoped Application?   Is it just an app that's not global?

[ChrisBurks]

David,

As mentioned previously ServiceNow already includes Bootstrap by default but they also include jquery. Instead of bringing in your own jquery lib have you tried with theirs first?

Notice the difference between your script with jquery and using ServiceNow's jquery

Yours:

$l = $('.left');

$r = $('.right');

$l.mouseenter(function() {

  $('.container').addClass('left-is-hovered');

}).mouseleave(function() {

  $('.container').removeClass('left-is-hovered');

});

$r.mouseenter(function() {

  $('.container').addClass('right-is-hovered');

}).mouseleave(function() {

  $('.container').removeClass('right-is-hovered');

});

ServiceNow

$l = $j('.left');

$r = $j('.right');

$l.mouseenter(function() {

  $j('.container').addClass('left-is-hovered');

}).mouseleave(function() {

  $j('.container').removeClass('left-is-hovered');

});

$r.mouseenter(function() {

  $j('.container').addClass('right-is-hovered');

}).mouseleave(function() {

  $j('.container').removeClass('right-is-hovered');

});

If you didn't notice the difference it's "$" vs "$j".

As a side note this will also work without bringing in your Bootstrap file too.

View here: screencast

[prithvirajchaud]

Hi,

Yes scoped applications are application which are not global.

For further queries check the following link. http://wiki.servicenow.com/index.php?title=Application_Scope#gsc.tab=0

Thanks