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

venkatiyer1 · ‎04-01-2016

Hi Luis,

you can create a UI script with the above block say with a name of your organizationname_custom.js

and then refer to it at the bottom of your dynamic content block using script tag.

Replace the oganizationname in the above Ui script file name with your organization or any other custom name of file.

lrossy · ‎04-01-2016

Hello Venkat,

Thanks for the reply. I tried this solution but it is still not working. I changed the API Name to testpage_3custom.jsdbx when creating the UI Script, and copied all the javascript code the UI Script box. Also it was asking to finish the script line i the dynamic block with a > or </> which I changed to <script> language="javacript" src="scripts/organizationname_custom.jsdbx?v=${gs.getProperty('glide.builddate')}" "</script>. The page is still not loading. Again this is done using one dynamic block which I have added the CSS and HTML code and call for the UI Script. Will greatly appreciate any other input.

Inactive_Us1474 · ‎04-01-2016

Hi,

You can also put these css and script code in style and javascript tags in UI page.

Hope it helps.

Thanks.

lrossy · ‎04-01-2016

Hello Akhil,

Thanks for your help. I tried your suggestion putting the css and script codes inside each on their <style> blocks. Also added the javascript inside <script> tags. I added all this code inside one dynamic block. The page is still not loading. Here is the coded as I made the changes. I will appreciate if you can tell me if I made a mistake entering the code.

Again thanks a lot for your help.

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

2014 mattladner.com

</footer>

$(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>"