Hi Luis,
The code looks perfect. Just put jquery tag also:
<script>https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
Screenshot attached.
Hope it helps.
Hello Venkat,
Originally you mention to do a UI script and now you said to copy the macro code. Forgive my ignorance but I am getting to know how to develop in ServiceNow and specially getting java to work on it. I will appreciate if you can clarify what is it that I need to create to get this to work. Here is the UI Script that I created per your suggestion.
Pretty much I grabbed all the javascript and added into the UI Script and the API named is test3_custom. I l left the CSS and the HTML code alone as it shows on previous comment I made. The only thing I did was to remove all the javascript from the main code in the dynamic block and added the script tag <script> language="javacript" src="scripts/testpage_3custom.jsdbx?v=${gs.getProperty('glide.builddate')}"</script> Let me know what I am not adding to this code. I will really appreciate it.
Hello Venkat,
Thanks again for the help. I am still not able to see the page as it should. I corrected the open and close brackets
(......
<footer>
| 2014 mattladner.com |
</footer>
<script></script>;
"</j:jelly>")
and made sure that the name of the UI script is the same as the tag in the main code in the dynamic block.
After that I go to the Content Management Pages and created a new page and added the dynamic block content and still cannot see the page as Akhil showed.
See screenshot. Again I appreciate your help.
Hello Venkat ,
I tried your suggestion, using the link to see if the script got downloaded, instead I got a 404 error page. I checked the UI Script and all looks good after removing the semi colon after the script bracket. Also checked the main code in the dynamic block and all looks good to me. Here is the main code that I typed in the dynamic block:
<?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">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>
</nav>
</main>
<script></script>
<footer>
${AMP}copy; 2014 mattladner.com
</footer>
"</j:jelly>"
---------------------------------------------------------
UI Script code:
//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++;
})
};
Will greatly appreciate your advice.
