My site structure is more or less this:
HOME - PAGE1 - PAGE2 - PAGE3.
What I would realize is a site with transition like "a mobile app" between pages, where you click on a button then the new page slide in. Now I'm looking on how to realize that, if using AJAX (that load the page and slide it but I don't know AJAX) or use a plugin (but I can't find anything).
Another alternative is create a single page and then moving into that (would be great find a plugin to do that) but the pages are big so my site will became heavy.
Does anyone have an idea how help me?
Thanks guys!
ps: the site is developed ONLY for tablet and smartphones
there are many ways to implement what you wanted, below i will show you one of them. (example at the bottom of the answer)
you hide the content outside of the screen, and slide it when page loads:
HTML:
<div class="content_div">
<p class="title">HOME</p>
page 1
</div>
CSS:
body{
overflow:hidden;
}
.content_div {
box-shadow:0 0 10px;
border:10px solid black;
height:800px;
left:-1000px;
width:100%;
-webkit-animation:slide_in 800ms ease-out forwards;
position:absolute;
box-sizing:border-box;
}
.title{
font-size:50px;
text-align:center;
}
.nav{
margin-left:20px;
}
#-webkit-keyframes slide_in{
0% {
left:-1000px;
}
100% {
left:0px;
}
}
now when you click a link, you intercept the click using a custom handler, prevent the default redirection, execute a "slide out" animation and once the animation is done, you redirect manually:
the function inside .promise().done() will be executed as soon as all animations on the object are done:
$(function(){
$(".nav").on("click",function(ev){
ev.preventDefault();
$(".content_div").animate({
"margin-left":$(".content_div").width() +100
}).promise().done(function(){
window.location="http://jsfiddle.net/TheBanana/27o989vy/embedded/result/";
});
});
});
here is a Live Example
implement this on every page in your website, and you should have sliding transitions.
change the transitions if you would like a different animation.
NOTE: in jsfiddle it will be a bit messed up because it will open itself inside itself, but on your website it will work as needed.
UPDATE FOR AJAX:
if you would like to avoid the disappearing of pages while window relocates to a new page, you need to load the content from the new page dynamically instead of changing location.
you can do that using plain ajax, or you can use jQuery's ajax extension .load(), it does the same ajax behind the scenes:
$(".nav_waitforajax").on("click", function (ev) {
ev.preventDefault();
$(".content_div").animate({
"margin-left": $(".content_div").width() + 100
}).promise().done(function () {
$(".content_div").load("/three", function () {
$(".content_div").animate({
"margin-left": 0
});
});
});
});
Ajax Example
UPDATE 2: delegated handlers for dynamic content:
//monitors a `mouseover` event on every element inside `.content_div`
//which fits the selector of "*" (everything)
$(".content_div").on("mouseover","*",function(){
$(this).css({
"background":"red"
});
});
Delegates Example
Related
I am trying to create a website using JavaScript. I need to programm it in such a way, that when you open the website, you directly get to the bottom of the page (without clicking anything). That means, the page moves itself automatically downwards.
How can I get this done?
Use window.scrollTo() function
window.scrollTo(0,document.body.scrollHeight);
Here's a good answer:
how to automatically scroll down a html page?
Including a live demo: http://jsfiddle.net/ThinkingStiff/DG8yR/
Script:
function top() {
document.getElementById( 'top' ).scrollIntoView();
};
function bottom() {
document.getElementById( 'bottom' ).scrollIntoView();
window.setTimeout( function () { top(); }, 2000 );
};
bottom();
Html:
<div id="top">top</div>
<div id="bottom">bottom</div>
CSS:
#top {
border: 1px solid black;
height: 3000px;
}
#bottom {
border: 1px solid red;
}
Enjoy :)
Call This function on a component or page that you want the particular behaviour. This function will scroll to the bottom of the page. There won't be any scrolling effect without the css for smooth scroll. I have shown how to specify the css for the scrolling effect below, incase you require the scroll behaviour.
function scrollToPageBottom() {
window.scrollTo(0, document.body.scrollHeight);
}
If you require the scroll behaviour:
Here, I'm specifying the scroll behaviour on the root itself. You can target specific containers as per your requirement
*{
scroll-behavior: smooth;
}
P.S: This question has many answers already posted but I am sharing
this because no one talks about the css scroll behaviour which some
users may require. This answer is specific to the question where the
OP wants to scroll to the bottom of the page without any user action
when a page or component is opened or rendered but also specifyiuing the CSS for scroll behaviour if a user requires it.
I'm using Cordova, Kendo ui, and leafletjs maps in an android app. What I want to do when I open a particular view is get a div to appear, wait three seconds, and then hide the div. This should be simple, but no matter the length of time I put in the timeout the div always appears and disappears immediately. I tried using Jquery show and hide at first, but then read that adding and removing classes is better with Phonegap.
js:
utils.hideLoading(); // calls kendo hideLoading function
$("#myDiv").removeClass( "opacityOff" );
$("#myDiv").addClass( "opacityOn" );
setTimeout(function(){
$("#myDiv").removeClass( "opacityOn" );
$("#myDiv").addClass( "opacityOff" );
}, 3000);
css:
#myDiv.opacityOff{
display:none;
opacity:0;
}
#myDiv.opacityOn{
display:block;
opacity:1;
}
#myDiv{
width: 11em;
height: 11em;
position: relative;
margin: 50% auto 0 auto;
margin: 32vh auto 0 auto;
background-color:#000000;
border-radius:50%;
}
Why would setTimeout be executing this anonymous function immediately?
I'm thinking this has something to do with leaflet re renders, but I don't understand it well enough to be sure.
Fixed this by just adding z-index:999; to my OpacityOn class. This was confusing for me because the div appeared for a second, and I thought that if z-index was the problem that it wouldn't appear at all. It looks like when leaflet maps redrew itself it gave itself a higher z-index. Don't fully understand why, if someone else with more knowledge of leaflet would like to clarify feel free.
I have searched through StackOverflow posts and various forums, but cannot find an answer. I have found answers for similar questions, but nothing breaks it down quite enough for me to understand. I understand a good deal of PHP and HTML, but am having difficulty with scripts.
How can I click on a link, get the href (or what do I need?), have it fade out the current content, find the content I'm trying to load (href or whatever in the link) and load it, then fade it in?
My previous problems with random bits of code I've tried:
While going from page to page if another link was clicked while loading, it would only partially fade the second page in.
Each link had to have it's own script to direct it there. Could never figure out how to make it get the href of the link clicked.
Examples were so complicated I couldn't modify them to what I needed exactly. I need to understand the process of it.
Something like:
$('.link').on('click', function(){
$('.content').fadeOut().load('/path/to/script', function() {
$(this).fadeIn();
});
});
The key to this to use a HTML page or PHP script which can return the content you want. You might want to retrieve the URL from another element or hard-code it into your script - your call. For more information about how load() works, visit jQuery's documentation.
I actually developed something just like this some time ago.
The trick (or a trick) is to wrap your page an an iframe, and on the parent window, have a div element that fades into view when a page is requested, and fades out when the page loads.
The parent window looks like this:
<!DOCTYPE html>
<html>
<head>
<title>< Page1 ></title>
<style>
html, body{
font-family:helvetica;
}
#fade, iframe {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
border-width:0px;
z-index:-1;
opacity:0;
color:#AAA;
background-color:#FFF;
-webkit-transition: opacity 300ms;
-moz-transition: opacity 300ms;
-o-transition: opacity 300ms;
}
iframe {
opacity:1;
z-index:1;
background-color:#FFF;
}
</style>
</head>
<body>
<div id="fade">
<h1>Loadin..</h1>
</div>
<iframe src="p1.html"></iframe>
<script>
var fade = document.getElementById("fade");
var iframe = document.getElementsByTagName("iframe")[0];
var t = null;
addEventListener("message", function(e) {
if(t!=null)clearTimeout(t);
fade.style.zIndex = "2";
t=setTimeout(function(){
fade.style.opacity = "1";
},0);
}, true);
iframe.addEventListener("load", function() {
if(t!=null)clearTimeout(t);
t=setTimeout(function(){
fade.style.opacity = "0";
},0);
document.title = iframe.contentWindow.document.title;
t=setTimeout(function(){
fade.style.zIndex = "-1";
},300);
}, true);
</script>
</body>
</html>
And the subpages would each have the following code:
<script>
function go() {
window.parent.postMessage("showLoadScreen", "*");
}
</script>
somepage.html
This code is a little different in that the fader doesn't pop up unless the requested resource is taking awhile to load. But, you get the idea.
Since the iframe only exists for visual purposes, it shouldn't cause any major problems. However, note that this code uses HTML5's postMessage API, and you may want to tweak it a bit.
I'm using queryloader on my website (link). For some reason the main page appears during one second before queryloader does its job (progress bar to load images before showing the website).
I assume that this is due to the fact that the page is loaded before the queryloader script is loaded but don’t know how to fix this. For the moment the code is in the
$(document).ready as suggested on the queryloader2 website and I’m calling the script (located in js/scripts.js) in my head tags.
$(document).ready(function () {
$("body").queryLoader2();
$('.activity-title a').click(function() {
var region = $(this).attr('data-region');
$('.textzone:visible').fadeOut(2000, function () {
$('#' + region).fadeIn(2000);
});
return false;
});
});
Sorry to bring up an old thread, but just for anyone facing this problem, here's my fix..
i added an overlay div right after the Body tag opening
<div id="preloader"></div>
And added this CSS
#preloader {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff; /* change if the mask should have another color then white */
z-index:99; /* makes sure it stays on top */
}
and added the onLoadComplete: hidePreLoader to the QueryLoader options
Then on that function just hide the overlay once done.
function hidePreLoader() {
$("#preloader").hide();
}
That would be pretty much it, hope it helps someone out there :)
How to produce frameless window in HTML5, JavaScript, please?
I searched the web and found mostly links to use libraries. I wish to develop my own frameless window from scratch, without using a third party library.
By frameless window I mean a window having no frames, no status bar, no default minimize button, no default close button, no roll bars... It looks like a standalone image with painted close button.
Would be anybody so kind and provide me with ideas or code that will be accepted by most of the browsers?
EXAMPLE:
As few of you asked, what exactly I mean, I found a very nice example at Rapidshare. There is a large blue/orange button in the middle of the screen saying Upload. Just press it, please, and a frameless window appears.
The window represents exactly what I am trying to achieve. I have seen it many times, when displaying enlarged images, or prompting for login information, etc.. I like the animation associated with displaying that window too.
just for quicks to show the concept ..
create two divs directly under body
<div id="backmask"></div>
<div id="contentwindow"></div>
<!-- somewhere else in your page -->
click me
css for these ( roughly )
<style type="text/css">
#backmask {
display:block;
width:100%;
height:100%;
background-color:black;
position:absolute; top:0; left:0;
z-index:1000;
display:none;
opacity:0.7;
filter:alpha(opacity=70);
}
#contentwindow {
display:block;
width:800px;
height:600px;
background-color:white;
position:absolute; top:50px; left:50px;
z-index:1001;
display:none;
}
.bodywithwinOpenClass { overflow:hidden; width:100%; height:100%; }
</style>
and then ( im using jquery for quicks )
<script type="text/javascript">
$(".showinwindow").click( function(e) {
/* we don't want the visitor to leave, stop the normal action */
e.preventDefault();
/* get what to show */
var contenttoload = $(this).attr.("href");
/* set the body up */
$("body").addClass("bodywithwinOpenClass");
/* show wins and masker */
$("#backmask").css("display","block");
$("#contentwindow").css("display","block");
/* load the content */
$("#contentwindow").load(contenttoload);
});
</script>
this was just typed in directly and not ran, contains no candy ( for positioning etc ) hope it explains the concept behind all the pluggins etc you will find
the reverse is needed to "close" it
no frames
That's your decision to use (i)frames in your document or not
no scroll bars
With CSS you can suppress scroll bars, or build a layout which resizes exactly to the window size
no status bar, no minimize, no close, no roll bars...
That is possible with chrome-feature descriptors when creating a popup with window.open. Yet, you will not be able to create unclosable windows, hiding the close buttons also requires some privileges.
You seem to want a fullscreen application. Have you considered using the new fullscreen API?
http://www.codelifter.com/main/javascript/amazingframelesspopup1.html <-- pretty much covers all you can do - you can't launch a chromeless browser window from a web page.
What are you trying to achieve?
That's easy enough - it's not a window - it's actually a div on the page floating over the rest of the page content - there are plenty of ways to do it with a framework like jQuery.
Tutorial
Essentially all you need is a hidden positioned div with a high z-index and a bit of script to show/hide it:
<div id="popup" style="z-index:1000;display:none;position:absolute;top:100px;left:100px;">Some content</div>
<button onclick="document.getElementById('popup').style.display='block';">Open</button>
<button onclick="document.getElementById('popup').style.display='none';">Close</button>