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.
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 Akhil,
Here is the complete code inside the dynamic block. Please let me know what I am missing to get it to work as you did. After I copy all the CSS and HTML inside one style block, also added the javascript inside scrip brackets and added the jquery tag.
<?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;
}
}
<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>
<footer>
2014 mattladner.com
</footer>
</style>
<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>
<script>https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
"</j:jelly>"
Lastly I went to the Content Management Pages and created a new page and added the content, dynamic block. Tried to previewed it and it doesn't show as you did. Screenshot shows page as a blank page. I will greatly appreciate your input.
Hello again Akhil,
I was able to get the color on the main area by adding padding to it on the body of the page. However I cannot make it look even throughout the area. If I add a big size padding the page will get bigger and you will see a lot of the blue color way below the area needed. This is how it shows with 5.9em of padding.
this is with 13.2em of padding.
How can I get the whole main body to get the color? Is it selecting a specific layout?
thanks a lot.
