How to add javascript to create UI pages

[lrossy]

Hello there to all of you,

I am trying to create a bit more dynamic UI page for my application and will like to use some javascript for it.   I have search the wiki and google for ideas on how to add the javascript code like using the UI Script include and have not had success.   Here is a sample code that I want to use and will like to know where I need to add the javascript code to make the UI page work.

The way I am building this homepage is using a single dynamic block.

I will greatly appreciate any input to get this to work.

Here is the code the java code is bold:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

@-webkit-keyframes fadeIn {

  from {

      opacity: 0;

  }

  to {

      opacity: 1;

  }

}

@keyframes fadeIn {

  from {

      opacity: 0;

  }

  to {

      opacity: 1;

  }

}

*, *:before, *:after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

html, body, main {

  height: 100%;

  width: 100%;

  color: white;

  font-size: 18px;

  font-weight: 400;

  font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', sans-serif;

  background-color: #008C9E;

}

header {

  position: absolute;

  top: 0;

  left: 0;

  width: 60%;

  text-align: center;

  opacity: 0;

  -webkit-animation: fadeIn ease-in 1;

                  animation: fadeIn ease-in 1;

  -webkit-animation-fill-mode: forwards;

                  animation-fill-mode: forwards;

  -webkit-animation-duration: .5s;

                  animation-duration: .5s;

}

header .title {

  text-transform: uppercase;

  font-size: 1.2em;

  border: 5px solid white;

  padding: 1em;

  opacity: 0;

  -webkit-animation: fadeIn ease-in 1;

                  animation: fadeIn ease-in 1;

  -webkit-animation-fill-mode: forwards;

                  animation-fill-mode: forwards;

  -webkit-animation-duration: .5s;

                  animation-duration: .5s;

  -webkit-animation-delay: 1s;

                  animation-delay: 1s;

}

nav {

  position: absolute;

  top: 0;

  right: 0;

  width: 40%;

  overflow-y: scroll;

  background-color: #F6F6F6;

}

nav ul li {

  opacity: 0;

  -webkit-transition: .5s opacity;

  transition: .5s opacity;

}

nav ul li.visible {

  opacity: 1;

}

nav li a {

  font-weight: 400;

  display: block;

  text-decoration: none;

  padding: 2em;

  border-bottom: 1px solid #D8D8D8;

  color: #343838;

  -webkit-transition: 0.2s ease;

  transition: 0.2s ease;

}

nav li a span {

  font-weight: 300;

  display: block;

  font-size: .7em;

  color: #D8D8D8;

  font-style: italic;

}

nav li a:hover {

  background-color: #005F6B;

  color: white;

}

nav footer {

  color: #343838;

  text-align: center;

  padding: 1em;

  font-size: 0.7em;

}

@media all and (max-width: 791px) {

  header {

      position: inherit;

      width: 100%;

      top: none;

      left: none;

  }

  header .title {

      border: none;

      padding: 4em;

  }

  nav {

      position: inherit;

      width: 100%;

      top: none;

      right: none;

  }

}

<main>

  <header class="billboard">

      <h1 class="title">Testing</h1>

  </header>

  <nav class="slide-nav">

      <ul>

          <li><a href="#">Home <span>Oh you like home?</span> </a></li>

          <li><a href="#">About <span>Lets talk about it.</span> </a></li>

          <li><a href="#">Clients <span>No one likes clients.</span> </a></li>

          <li><a href="#">Contact Us <span>But please don't.</span> </a></li>

          <li><a href="#">Portfolio <span>No one does that anymore?</span> </a></li>

          <li><a href="#">Haircuts <span>Do I need to get one?</span> </a></li>

          <li><a href="#">Cars <span>You can drive one.</span> </a></li>

          <li><a href="#">Owls <span>Are terrorifying.</span> </a></li>

      </ul>

      <footer>&copy; 2014 mattladner.com</footer>

  </nav>

</main>

javascript

//That junt needs to happen on load and window resize

$(window).on("resize", function () {

      //Measure some responsiveness

      var responsive_viewport = $(window).width();

      // if is larger than 791px

      if (responsive_viewport > 791) {

          //Let's make some stuff fullscreen

          $('.billboard, .slide-nav').css('height', window.innerHeight);

          //Let's center up that h1 and do some measuering

          jQuery.fn.center = function () {

              this.parent().css("position","absolute");

              var t = this.parent().css("top");

              var l = this.parent().css("left");

              this.css("position","absolute");

              this.css("top", ((this.parent().height() - this.outerHeight()) / 2) + this.parent().scrollTop() + "px");

              this.css("left", ((this.parent().width() - this.outerWidth()) / 2) + this.parent().scrollLeft() + "px");

              return this;

          }

          //Center that junt

          $("h1").center();

      }

}).resize(); //fire off that resize event cause desingers always be stretching windows and stuff

//Load those nav li's sequrntially for purdyness

window.onload = function() {

  var cars = document.querySelectorAll(".slide-nav ul li"), i = 1;

      Array.prototype.forEach.call(cars, function(car) {

      setTimeout(function(){ car.classList.add("visible") }, 100*i)

      i++;

  })

};

[Inactive_Us1474]

Hi Luis,

You can copy the below code and let me know if any change you require.

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<style>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

@-webkit-keyframes fadeIn {

  from {

      opacity: 0;

  }

  to {

      opacity: 1;

  }

}

@keyframes fadeIn {

  from {

      opacity: 0;

  }

  to {

      opacity: 1;

  }

}

*, *:before, *:after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

html, body, main {

  height: 100%;

  width: 100%;

  color: white;

  font-size: 18px;

  font-weight: 400;

  font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', sans-serif;

  background-color: #008C9E;

}

header {

  position: absolute;

  top: 0;

  left: 0;

  width: 60%;

  text-align: center;

  opacity: 0;

  -webkit-animation: fadeIn ease-in 1;

                  animation: fadeIn ease-in 1;

  -webkit-animation-fill-mode: forwards;

                  animation-fill-mode: forwards;

  -webkit-animation-duration: .5s;

                  animation-duration: .5s;

}

header .title {

  text-transform: uppercase;

  font-size: 1.2em;

  border: 5px solid white;

  padding: 1em;

  opacity: 0;

  -webkit-animation: fadeIn ease-in 1;

                  animation: fadeIn ease-in 1;

  -webkit-animation-fill-mode: forwards;

                  animation-fill-mode: forwards;

  -webkit-animation-duration: .5s;

                  animation-duration: .5s;

  -webkit-animation-delay: 1s;

                  animation-delay: 1s;

}

nav {

  position: absolute;

  top: 0;

  right: 0;

  width: 40%;

  overflow-y: scroll;

  background-color: #F6F6F6;

}

nav ul li {

  opacity: 0;

  -webkit-transition: .5s opacity;

  transition: .5s opacity;

}

nav ul li.visible {

  opacity: 1;

}

nav li a {

  font-weight: 400;

  display: block;

  text-decoration: none;

  padding: 2em;

  border-bottom: 1px solid #D8D8D8;

  color: #ffff;

  -webkit-transition: 0.2s ease;

  transition: 0.2s ease;

}

nav li a span {

  font-weight: 300;

  display: block;

  font-size: .7em;

  color: Blue;

  font-style: italic;

}

nav li a:hover {

  background-color: #005F6B;

  color: Yellow;

}

nav footer {

  color: #343838;

  text-align: center;

  padding: 1em;

  font-size: 0.7em;

}

@media all and (max-width: 791px) {

  header {

      position: inherit;

      width: 100%;

      top: none;

      left: none;

  }

  header .title {

      border: none;

      padding: 4em;

  }

  nav {

      position: inherit;

      width: 100%;

      top: none;

      right: none;

  }

}

  </style>

<main>

  <header class="billboard">

      <h1 class="title">Testing</h1>

  </header>

  <nav class="slide-nav">

      <ul>

          <li><a href="#">Home <span>Oh you like home?</span> </a></li>

          <li><a href="#">About <span>Lets talk about it.</span> </a></li>

          <li><a href="#">Clients <span>No one likes clients.</span> </a></li>

          <li><a href="#">Contact Us <span>But please don't.</span> </a></li>

          <li><a href="#">Portfolio <span>No one does that anymore?</span> </a></li>

          <li><a href="#">Haircuts <span>Do I need to get one?</span> </a></li>

          <li><a href="#">Cars <span>You can drive one.</span> </a></li>

          <li><a href="#">Owls <span>Are terrorifying.</span> </a></li>

      </ul>

      <footer> 2014 mattladner.com</footer>

  </nav>

  </main>

<script>https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

    <script>//That junt needs to happen on load and window resize

$(window).on("resize", function () {

      //Measure some responsiveness

      var responsive_viewport = $(window).width();

      // if is larger than 791px

      if (responsive_viewport > 791) {

          //Let's make some stuff fullscreen

          $('.billboard, .slide-nav').css('height', window.innerHeight);

          //Let's center up that h1 and do some measuering

          jQuery.fn.center = function () {

              this.parent().css("position","absolute");

              var t = this.parent().css("top");

              var l = this.parent().css("left");

              this.css("position","absolute");

              this.css("top", ((this.parent().height() - this.outerHeight()) / 2) + this.parent().scrollTop() + "px");

              this.css("left", ((this.parent().width() - this.outerWidth()) / 2) + this.parent().scrollLeft() + "px");

              return this;

          }

          //Center that junt

          $("h1").center();

      }

}).resize(); //fire off that resize event cause desingers always be stretching windows and stuff

//Load those nav li's sequrntially for purdyness

window.onload = function() {

  var cars = document.querySelectorAll(".slide-nav ul li"), i = 1;

      Array.prototype.forEach.call(cars, function(car) {

      setTimeout(function(){ car.classList.add("visible") }, 100*i)

      i++;

  })

};

  </script>

</j:jelly>

[lrossy]

Hey Akhil,

We are making progress.   The script with the changes you sent worked partially.   I said that because the main part to the left doesnt show,   Here is the screenshot. Again making lots of progress.   I tried changing the layout and this is the best it shows (using minimalistic aproach layout).   What could be not making the whole page to load?   Again thanks a lot for your help.

[lrossy]

Hello Akhil,

I looked through the code and saw a few things that were changed, like the colors to the backgrounds and had those changed to their original color.   I checked it again and went to the page I created using content management and tried to view the page and it is still missing the main blue background and white letters in the center.   Not sure what else I am missing, but will certainly appreciate your input.   Here is the code with the changes I made.

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<style>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

@-webkit-keyframes fadeIn {

  from {

      opacity: 0;

  }

  to {

      opacity: 1;

  }

}

@keyframes fadeIn {

  from {

      opacity: 0;

  }

  to {

      opacity: 1;

  }

}

*, *:before, *:after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

  html, body, main {

  height: 100%;

  width: 100%;

  color: white;

  font-size: 18px;

  font-weight: 400;

  font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', sans-serif;

  background-color: #008C9E;

}

header {

  position: absolute;

  top: 0;

  left: 0;

  width: 60%;

  text-align: center;

  opacity: 0;

  -webkit-animation: fadeIn ease-in 1;

                  animation: fadeIn ease-in 1;

  -webkit-animation-fill-mode: forwards;

                  animation-fill-mode: forwards;

  -webkit-animation-duration: .5s;

                  animation-duration: .5s;

}

header .title {

  text-transform: uppercase;

  font-size: 1.2em;

  border: 5px solid white;

  padding: 1em;

  opacity: 0;

  -webkit-animation: fadeIn ease-in 1;

                  animation: fadeIn ease-in 1;

  -webkit-animation-fill-mode: forwards;

                  animation-fill-mode: forwards;

  -webkit-animation-duration: .5s;

                  animation-duration: .5s;

  -webkit-animation-delay: 1s;

                  animation-delay: 1s;

}

  nav {

  position: absolute;

  top: 0;

  right: 0;

  width: 40%;

  overflow-y: scroll;

  background-color: #F6F6F6;

}

nav ul li {

  opacity: 0;

  -webkit-transition: .5s opacity;

  transition: .5s opacity;

}

nav ul li.visible {

  opacity: 1;

}

nav li a {

  font-weight: 400;

  display: block;

  text-decoration: none;

  padding: 2em;

  border-bottom: 1px solid #D8D8D8;

  color: #343838;

  -webkit-transition: 0.2s ease;

  transition: 0.2s ease;

}

nav li a span {

  font-weight: 300;

  display: block;

  font-size: .7em;

  color: #D8D8D8;

  font-style: italic;

}

nav li a:hover {

  background-color: #005F6B;

  color: white;

}

nav footer {

  color: #343838;

  text-align: center;

  padding: 1em;

  font-size: 0.7em;

}

  @media all and (max-width: 791px) {

  header {

      position: inherit;

      width: 100%;

      top: none;

      left: none;

  }

  header .title {

      border: none;

      padding: 4em;

  }

      nav {

      position: inherit;

      width: 100%;

      top: none;

      right: none;

  }

}

</style>

<main>

  <header class="billboard">

      <h1 class="title">Testing3B</h1>

  </header>

  <nav class="slide-nav">

      <ul>

          <li><a href="#">Home <span>Oh you like home?</span> </a></li>

          <li><a href="#">About <span>Lets talk about it.</span> </a></li>

          <li><a href="#">Clients <span>No one likes clients.</span> </a></li>

          <li><a href="#">Contact Us <span>But please don't.</span> </a></li>

          <li><a href="#">Portfolio <span>No one does that anymore?</span> </a></li>

          <li><a href="#">Haircuts <span>Do I need to get one?</span> </a></li>

          <li><a href="#">Cars <span>You can drive one.</span> </a></li>

          <li><a href="#">Owls <span>Are terrorifying.</span> </a></li>

      </ul>

      <footer> ${AMP}copy; 2014 mattladner.com</footer>

  </nav>

</main>

  <script>https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

    <script>

//That junt needs to happen on load and window resize

$(window).on("resize", function () {

          //Measure some responsiveness

      var responsive_viewport = $(window).width();

        // if is larger than 791px

      if (responsive_viewport > 791) {

          //Let's make some stuff fullscreen

          $('.billboard, .slide-nav').css('height', window.innerHeight);

          //Let's center up that h1 and do some measuering

          jQuery.fn.center = function () {

              this.parent().css("position","absolute");

              var t = this.parent().css("top");

              var l = this.parent().css("left");

                  this.css("position","absolute");

              this.css("top", ((this.parent().height() - this.outerHeight()) / 2) + this.parent().scrollTop() + "px");

              this.css("left", ((this.parent().width() - this.outerWidth()) / 2) + this.parent().scrollLeft() + "px");

              return this;

          }

              //Center that junt

          $("h1").center();

      }

}).resize(); //fire off that resize event cause desingers always be stretching windows and stuff

  //Load those nav li's sequrntially for purdyness

window.onload = function() {

  var cars = document.querySelectorAll(".slide-nav ul li"), i = 1;

      Array.prototype.forEach.call(cars, function(car) {

      setTimeout(function(){ car.classList.add("visible") }, 100*i)

      i++;

  })

};

</script>

</j:jelly>

[Manjul Katare]

Hi Luis,

If i'm using jQuery anywhere in the UI Page, I use "$j" in place of "$".

To try with I went to https://<instance-name>.service-now.com/problem_list.do

Then opened a browser console and typed : $('a').hide( );   and it did NOT work.

But when I try $j('a').hide( ); it worked!!!!!!!!!!!

Hope it helps!

-Manjul

[lrossy]

Success.   Thanks a lot for all of your help.   I tried Akhil's way of getting javascript to work and finally with some changes I got to show the main color on the main area.

The height and width was at 100% and I just reduced them to 0% and the blue color showed.

Here it is:

Again thanks for the help to all of you.