Answered
Slide of pages
Hello everyone, I am new. I ask you a hand and I wanted to know if I can do dreamweaver with page transition. I'll show you a link like that, can you do it?
osgood_ ha scritto
I assume you mean your initial page doesn't scroll down?
Change the 'onepage' css to as below:
.onepage {
position: absolute;
top: 0;
height: 100vh;
width: 100wv;
font-family: "Courier New", Courier, monospace;
font-size: 24px;
}
Also relocate the header <div> to be outside (above) the 'onepage' <div>
Then change the 'header' css to as below, otherwise when the panels scroll you will have no way of getting back to the original navigation without reloading the page.
.header {
background-color: #FF9900;
margin: 0px;
height: 50px;
width: 100%;
position: fixed;
z-index: 2000;
}
Unfortunately all your panels will be as long as the longest panel of information as that is what the browser sees and gets its min-depth from that. This will cause issues on pages that are short as the default color background will show when you scroll down, so you will have to change that.
Here I am, I solved the problems. Because I have not seen well for overflow-x: hidden; because I had set without -x ... Excuse me so much.
osgood_ ha scritto
You will need to amend the jQuery script like below, hiding the 'onepage' panel when a navigation item is clicked and adding the appropriate background panel color to the 'body' tag - (.home and .mappa are shown below).
<script>
$(document).ready(function(){
// MAIN NAVIGATION
$('.navigation a').css('cursor' , 'pointer').click(function(){
$('.onepage').hide();
$('.close').css({'right' : '-100%', 'transition' : '1.5s'});
var navItem = $(this).attr('navItem');
$(navItem).css({'right' : '0', 'transition' : '1s'});
if(navItem === ".home") {
$('body').css('background-color' , '#00FF00');
}
else if (navItem === ".mappa") {
$('body').css('background-color' , '#FF6600');
}
});
// CLOSE ALL PANELS
$('.logo').css('cursor' , 'pointer').click(function(){
$('.onepage').show();
$('body').css('background-color' , '#FF0000');
$('.close').css({'right' : '-100%', 'transition' : '1.5s'});
});
});
</script>
Then for JQuery concerns you've changed, it's perfect. Then I changed every menu with colors so you do not see for the initial page, perfect. A question if you can start the home page with green color? I would like to open immediately on HOME with color of green? Because I tried to open on web and page appears the color of white. I wanted directly on HOME with color of green, is it possible?
teodoro8590 wrote
I would like to open immediately on HOME with color of green? Because I tried to open on web and page appears the color of white. I wanted directly on HOME with color of green, is it possible?
You can start on 'Home':
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Deaf Cruise 2018</title>
<style>
body {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
margin: 0px;
overflow-x: hidden;
background-color: green;
}
* {
box-sizing: border-box;
}
.header {
background-color: #FF9900;
margin: 0px;
height: 50px;
width: 100%;
position: fixed;
z-index: 2000;
}
.logo {
font-family: "Comic Sans MS", cursive;
font-size: 28px;
color: #FFFFFF;
margin: 0px;
float: left;
height: 50px;
width: 20%;
font-style: oblique;
border: solid 2px #000000;
}
.navigation {
display: flex;
justify-content: flex-end;
border: solid 2px #000000;
width: 70%;
float: right;
text-align: center;
padding-top: 20px;
}
.navigation a {
font-size: 18px;
color: #FFFFFF;
text-decoration: none;
padding: 0 15px;
}
.home {
position: absolute;
top: 0;
height: 100vh;
width: 100%;
padding: 40px 100px;
}
.info,
.mappa,
.programma,
.hotel,
.biglietti,
.contatti {
position: absolute;
min-height: 100%;
top: 0;
width: 100%;
z-index: 10;
right: -100%;
padding: 40px 100px;
}
.home {
background-color: green;
}
.info {
background-color: pink;
}
.mappa {
background-color: #FF6600;
}
.programma {
background-color: #FF00FF;
}
.hotel {
background-color: #3366FF;
}
.biglietti {
background-color: #990000;
}
.contatti {
background-color: #00FFFF;
}
</style>
</head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
// MAIN NAVIGATION
$('.navigation a').css('cursor' , 'pointer').click(function(){
$('.close').css({'right' : '-100%', 'transition' : '1.5s'});
var navItem = $(this).attr('navItem');
if(navItem === ".home") {
$('.home').show();
$('body').css('background-color' , 'green');
}
else {
$('.home').hide();
$(navItem).css({'right' : '0', 'transition' : '1s'});
if(navItem === ".info") {
$('body').css('background-color' , '#ffc0cb');
}
else if(navItem === ".mappa") {
$('body').css('background-color' , '#FF6600');
}
else if(navItem === ".programma") {
$('body').css('background-color' , '#ff00ff');
}
else if(navItem === ".hotel") {
$('body').css('background-color' , '#3366ff');
}
else if(navItem === ".biglietti") {
$('body').css('background-color' , '#990000');
}
else if(navItem === ".contatti") {
$('body').css('background-color' , '#00FFFF');
}
}
});
// CLOSE ALL PANELS
$('.logo').css('cursor' , 'pointer').click(function(){
$('body').css('background-color' , 'green');
$('.home').show();
$('.close').css({'right' : '-100%', 'transition' : '1.5s'});
});
});
</script>
<body>
<div class="header">
<div class="logo">Deaf Cruise 2018</div>
<nav class="navigation">
<a href="#" navitem=".home">Home</a>
<a href="#" navitem=".info">Info</a>
<a href="#" navitem=".mappa">Mappa</a>
<a href="#" navitem=".programma">Programma</a>
<a href="#" navitem=".hotel">Hotel</a>
<a href="#" navitem=".biglietti">Biglietti</a>
<a href="#" navitem=".contatti">Contatti</a>
</nav>
</div>
<!-- end header -->
<div class="home">
<h2>HOME</h2>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
<p>Home Home Home Home Home Home Home</p>
</div>
<!-- end home -->
<section class="info close">
<h2>INFO</h2>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
<p>Info Info Info Info Info Info Info</p>
</section>
<!-- end info -->
<section class="mappa close">
<h2>MAPPA</h2>
<p>PROVA MAPPA PROVA MAPPA PROVA MAPPA</p>
</section>
<section class="programma close">
<h2>PROGRAMMA</h2>
<p>PROVA PROGRAMMA PROVA PROGRAMMA PROVA PROGRAMMA</p>
</section>
<section class="hotel close">
<h2>HOTEL</h2>
<p>PROVA HOTEL PROVA HOTEL PROVA HOTEL</p>
</section>
<section class="biglietti close">
<h2>BIGLIETTI</h2>
<p>PROVA BIGLIETTI PROVA BIGLIETTI PROVA BIGLIETTI</p>
</section>
<section class="contatti close">
<h2>CONTATTI</h2>
<p>PROVA CONTATTI PROVA CONTATTI PROVA CONTATTI</p>
</section>
</body>
</html>
AdChoices