Known Participant

Answered

Slide of pages

Forum|Forum|8 years ago
January 25, 2018
4 replies
1636 views

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?

http://demos.webspeaks.in/backbone-page-transitions/

This topic has been closed for replies.

Correct answer osgood_

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>

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

$(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="logo">Deaf Cruise 2018</div>

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

</div>

</section>

<h2>MAPPA</h2>

<p>PROVA MAPPA PROVA MAPPA PROVA MAPPA</p>

</section>

<h2>PROGRAMMA</h2>

<p>PROVA PROGRAMMA PROVA PROGRAMMA PROVA PROGRAMMA</p>

</section>

<h2>HOTEL</h2>

<p>PROVA HOTEL PROVA HOTEL PROVA HOTEL</p>

</section>

<h2>BIGLIETTI</h2>

<p>PROVA BIGLIETTI PROVA BIGLIETTI PROVA BIGLIETTI</p>

</section>

<h2>CONTATTI</h2>

<p>PROVA CONTATTI PROVA CONTATTI PROVA CONTATTI</p>

</section>

</body>

</html>

teodoro8590Author

Known Participant

I want to ask a simple question about setting up on tablets and smartphones, is it enough just on CSS? Or should I also do Jquery?

teodoro8590Author

Known Participant

I fixed some things on the menu and others in the section. There are some problems.

1) In the menu I have set as right but it does not work. Then I can not set for space between words.

2) Then to click each menu works only once, example when I open the HOME PAGE, I clicked INFO, it works well, then I clicked Map works well, but when the page of INFO or MAP or PROGRAM or ... I would like to click back that is HOME PAGE not fuction. Perhaps one of you can explain to me only once, then the rest of the rest I'll take care of it.

3) When I clicked a menu and it works well the transition but it does not cover a DIV where I wrote TEXT TEXT TEXT ... I want it to be covered as a new page.

4) One answer for the code of SECTION can not enlarge height? Why do I have to put more videos or longer text? Because I tried height, I can not.

Anyway I copied the codes I made and I glued here, can you see where I have something wrong?

Thank you...

<!DOCTYPE html>

<html>

<head>

<title>Deaf Cruise 2018</title>

</head>

<body>

<div class="logo">Deaf Cruise 2018</div>

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

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

</div>

<p>PROVA HOME PAGE PROVA HOME PAGE PROVA HOME PAGE</p>

</section>

<p>PROVA INFO PROVA INFO PROVA INFO</p>

</section>

<h2>MAPPA</h2>

<p>PROVA MAPPA PROVA MAPPA PROVA MAPPA</p>

</section>

<h2>PROGRAMMA</h2>

<p>PROVA PROGRAMMA PROVA PROGRAMMA PROVA PROGRAMMA</p>

</section>

<h2>HOTEL</h2>

<p>PROVA HOTEL PROVA HOTEL PROVA HOTEL</p>

</section>

<h2>BIGLIETTI</h2>

<p>PROVA BIGLIETTI PROVA BIGLIETTI PROVA BIGLIETTI</p>

</section>

<h2>CONTATTI</h2>

<p>PROVA CONTATTI PROVA CONTATTI PROVA CONTATTI</p>

</section>

</body>

</html>

@charset "UTF-8";

body {

font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

margin: 0px;

background-color:#FF0000;

}

* {

box-sizing: border-box;

}

.header {

background-color: #FF9900;

margin: 0px;

height: 50px;

width: 100%;

position: absolute;

}

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

}

.close_navitem {

font-size: 40px;

color: #FFFFFF;

display: none;

position: absolute;

z-index: 100;

right: 30px;

top: 20px;

}

.navigation {

display: flex;

border: solid 2px #000000;

width: 70%;

float: right;

text-align: center;

padding-top: 20px;

}

.navigation a {

font-size: 18px;

color: #FFFFFF;

text-decoration: none;

}

.home,

.info,

.mappa,

.programma,

.hotel,

.biglietti,

.contatti {

position:fixed;

height: 100%;

width: 100%;

z-index: 10;

right: -100%;

padding: 40px 100px;

}

.home {

background-color: #00FF00;

padding-top: 100px;

background-position: 30px;

}

.info {

background-color: #FF0000;

}

.mappa {

background-color: #FF6600;

}

.programma {

background-color: #FF00FF;

}

.hotel {

background-color: #3366FF;

}

.biglietti {

background-color: #990000;

}

.contatti {

background-color: #00FFFF;

}

.onepage {

font-family: "Courier New", Courier, monospace;

font-size: 24px;

padding-top: 50px;

}

section {

margin-top: 50px;

height: 1000px;

}

// JavaScript Document

$(document).ready(function(){

// MAIN NAVIGATION

$('.navigation a').css('cursor' , 'pointer').click(function(){

$('.close_navItem').show();

var navItem = $(this).attr('navItem');

$(navItem).css({'right' : '0', 'transition' : '1s'});

});

// CLOSE NAVITEM

$('.close_navItem').css('cursor' , 'pointer').click(function(){

$('.close').css({'right' : '-100%', 'transition' : '1.5s'});

});

thank you...

O

osgood_

Legend

Here is the new code. Explanation is below the code.

<!DOCTYPE html>

<html>

<head>

<title>Deaf Cruise 2018</title>

<style>

body {

font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

margin: 0px;

background-color:#FF0000;

}

* {

box-sizing: border-box;

}

.header {

background-color: #FF9900;

margin: 0px;

height: 50px;

width: 100%;

position: absolute;

}

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

}

.onepage {

position: fixed;

height: 100vh;

width: 100wv;

font-family: "Courier New", Courier, monospace;

font-size: 24px;

}

.home,

.info,

.mappa,

.programma,

.hotel,

.biglietti,

.contatti {

position:fixed;

height: 100%;

width: 100%;

z-index: 10;

right: -100%;

padding: 40px 100px;

}

.home {

background-color: #00FF00;

padding-top: 100px;

background-position: 30px;

}

.info {

background-color: #FF0000;

}

.mappa {

background-color: #FF6600;

}

.programma {

background-color: #FF00FF;

}

.hotel {

background-color: #3366FF;

}

.biglietti {

background-color: #990000;

}

.contatti {

background-color: #00FFFF;

}

section {

margin-top: 50px;

height: 1000px;

}

</style>

</head>

$(document).ready(function(){

// MAIN NAVIGATION

$('.navigation a').css('cursor' , 'pointer').click(function(){

$('.close').css({'right' : '-100%', 'transition' : '1.5s'});

var navItem = $(this).attr('navItem');

$(navItem).css({'right' : '0', 'transition' : '1s'});

});

// CLOSE ALL PANELS

$('.logo').css('cursor' , 'pointer').click(function(){

$('.close').css({'right' : '-100%', 'transition' : '1.5s'});

});

</script>

<body>

<div class="logo">Deaf Cruise 2018</div>

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

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT

</div>

<p>PROVA HOME PAGE PROVA HOME PAGE PROVA HOME PAGE</p>

</section>

<p>PROVA INFO PROVA INFO PROVA INFO</p>

</section>

<h2>MAPPA</h2>

<p>PROVA MAPPA PROVA MAPPA PROVA MAPPA</p>

</section>

<h2>PROGRAMMA</h2>

<p>PROVA PROGRAMMA PROVA PROGRAMMA PROVA PROGRAMMA</p>

</section>

<h2>HOTEL</h2>

<p>PROVA HOTEL PROVA HOTEL PROVA HOTEL</p>

</section>

<h2>BIGLIETTI</h2>

<p>PROVA BIGLIETTI PROVA BIGLIETTI PROVA BIGLIETTI</p>

</section>

<h2>CONTATTI</h2>

<p>PROVA CONTATTI PROVA CONTATTI PROVA CONTATTI</p>

</section>

</body>

</html>

EXPLANATION

The onepage <div> now wraps the <header></header> container.

Header code is here.

</header>

</div>

The .onepage css has been set to position: fixed; height: 100vh; and width: 100vw; Position fixed takes it out of the normal html workflow so the other panels can sit over the top of it. Without setting its position the .onepage panel just pushed the other panels down.

.onepage {

position: fixed;

height: 100vh;

width: 100wv;

font-family: "Courier New", Courier, monospace;

font-size: 24px;

}

As you are not using the 'close' navigation/panel X item and jquery the function and <div> has been removed and the panels now close by moving the line of jquery below, to the 'navigation a' jquery function:

$('.close').css({'right' : '-100%', 'transition' : '1.5s'});

All panels are closed when the logo is clicked on which is evoked by the below jquery:

// CLOSE ALL PANELS

$('.logo').css('cursor' , 'pointer').click(function(){

$('.close').css({'right' : '-100%', 'transition' : '1.5s'});

});

To set the menu items to the right the line justify-content: flex-end; has been added to the naviagtion css:

.navigation {

display: flex;

justify-content: flex-end;

border: solid 2px #000000;

width: 70%;

float: right;

text-align: center;

padding-top: 20px;

}

teodoro8590Author

Known Participant

Excellent explanation.

One thing is missing to set height of the <section> I can not, I have already written height: 1000px; then I wrote longer text and did not scroll down. It always stops on the screen. Why?

Then I forgot to ask you something for the transition effects where can I change? On JavaScript or CSS?

Then you can select one of the menus with different transition, example MAP comes from the right with transition and TICKETS comes from below with transition? So where do I have to write? On JavaScript or CSS?

O

osgood_

Legend

teodoro8590 wrote
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?
http://demos.webspeaks.in/backbone-page-transitions/

The demo code below is probably going to be of more help to you as the one you have linked to uses a lot of advanced scripting to get stuff onto the page.

<!DOCTYPE html>

<html>

<head>

<title>jQuery Page Transitions</title>

<style>

body {

margin: 0;

font-family: helvetica, verdana, sans-serif;

}

* {

box-sizing: border-box;

}

.navigation {

display: flex;

justify-content: center;

align-items: center;

position: fixed;

height: 100vh;

width: 100vw;

background-color: #0099ff;

}

.navigation a {

text-decoration: none;

color: #fff;

font-size: 40px;

padding: 0 30px;

}

.close_navItem {

position: absolute;

right: 30px;

top: 20px;

z-index: 100;

font-size: 40px;

color: #fff;

display: none;

}

.home, .profile, .friends {

position: fixed;

height: 100vh;

width: 100vw;

z-index: 10;

right: -100%;

padding: 40px 100px;

}

.home {

background-color: #e6ac00;

}

.profile {

background-color: #00b3b3;

}

.friends {

background-color: #b84dff;

}

.home h2, .profile h2, .friends h2 {

text-align: center;

font-size: 40px;

font-weight: 400;

color: #fff;

}

.home p, .profile p, .friends p {

text-align: center;

line-height: 30px;

}

</style>

</head>

crossorigin="anonymous"></script>

$(document).ready(function(){

// MAIN NAVIGATION

$('.navigation a').css('cursor' , 'pointer').click(function(){

$('.close_navItem').show();

var navItem = $(this).attr('navItem');

$(navItem).css({'right' : '0', 'transition' : '2s'});

});

// CLOSE NAVITEM

$('.close_navItem').css('cursor' , 'pointer').click(function(){

$('.close').css({'right' : '-100%', 'transition' : '1.5s'});

});

</script>

<body>

<a href="#" navItem=".profile">Profile</a>

<a href="#" navItem=".friends">Friends</a>

</nav>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>

<h2>Profile</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>

<h2>Friends</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>

</body>

</html>

teodoro8590Author

Known Participant

Great. I do not know how to thank you. It was what I wanted. Anyway, I'm preparing to make a site that I have to add the menu and other things. If there are problems and I write here ok? Thanks again.

Thanks again ...

BenPleysier

Community Expert

If you have a look at the CSS of the page that you referred to, you will find

/**
* Our transition classes
*/
.slideInOut {
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
    transition: transform 0.3s ease, opacity 0.3s ease;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}
.slideInOut.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slideUpDown {
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
    transition: transform 0.3s ease, opacity 0.3s ease;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}
.slideUpDown.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
/**
* Our transition classes End
*/

In other words, it is not Dreamweaver that does that, it is coding that does that. Dreamweaver is merely a tool that will help you to produce the code. Having said that, it is best that you learn HTML and CSS first.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

teodoro8590Author

Known Participant

In fact I had worked html and css then I stopped long ago for this. Maybe I have the next days to do the HTML and CSS course.

Thanks

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded