How to add javascript to create UI pages

lrossy · ‎04-01-2016

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>

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

</header>

<ul>

<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>

</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 · ‎04-01-2016

Hi Luis,

The code looks perfect. Just put jquery tag also:

Screenshot attached.

Hope it helps.

View solution in original post

Inactive_Us1474 · ‎04-04-2016

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>

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

</header>

<ul>

<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>

$(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 · ‎04-04-2016

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 · ‎04-05-2016

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>

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

</header>

<ul>

<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>

//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 · ‎04-01-2016

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 · ‎04-08-2016

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.