So I am making a weather widget for the iPhone and was wondering how to be able to be able to 'scroll' to another page per se. What should I include in order to be able to scroll to the right? How do I make it so I'll be able to scroll sideways? I've already tried doubling the width but nothing happened... Please be as detailed as possible :) Thank you!
<html>
<title>Forecast</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<meta name="viewport" content="width=320, height=583, initial-scale=1, maximum-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<span id="time" style="position:absolute;
width: 320px;
height: 200px;
left: -209
text-align: center;
z-index: +4;
top: 22.5px;
font-family: HelveticaNeue-UltraLight;
color:white;
font-size: 41px;
font-weight: 100;">
</span>
<span id="dates" style="position: absolute;
top: 27px;
width: 320px;
height: 60px;
left: -17px;
text-align:right;
font-family:HelveticaNeue-Light;
font-weight:100;
font-size: 17px;
color: white;">
</span>
<span id="dattes" style="
position: absolute;
top: 47px;
width: 320px;
left: -17px;
height: 60px;
text-align:right;
font-family:HelveticaNeue-Light;
font-weight:100;
font-size: 17px;
color: white;
">
</span>
</body>
</html>
I made little demo that works in computer browser and mobile too..
DEMO: http://mediakuu.fi/mobile_demo/
Add this to your html header to prevent user resizing your site:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
To make things work smooth and easy:
Use this plugin (hammer.js) http://eightmedia.github.io/hammer.js/ to get user gestures.
Use this plugin (jquery.transit) http://ricostacruz.com/jquery.transit/ to create smooth movement
Full source:
<!DOCTYPE html>
<html>
<head>
<title>MOBILE SCROLL DEMO</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style type="text/css">
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#wrapper {
position: absolute;
left: 0px;
top: 0px;
}
.section {
position: absolute;
top: 0px;
}
#section1 {
background: #226633;
}
#section2 {
background: #992211;
}
#section3 {
background: #773344;
}
#section4 {
background: #993344;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/jquery.hammer.min.js"></script>
<script src="js/jquery.transit.min.js"></script>
<script>
$(document).ready(function() {
var
ww = 0,
wh = 0,
current_x = 0,
current_section = 0,
new_section = 0,
$wrapper = $('#wrapper');
function resizeElements() {
// Get window dimensions
ww = $(window).width();
wh = $(window).height();
// Resize sections to match window size
$(".section").css({
width : ww + 'px',
height : wh + 'px'
});
$(".section").each(function(ind) {
$(this).css({
'left': (ind * ww) + 'px'
});
});
}
// Check for window resize (user changing device orientation)..
$(window).bind('resize orientationchange', function() {
resizeElements();
});
// Resize elements once document loaded
resizeElements();
// Use plugin called hammer.js to get touch gestures
$wrapper.hammer().on("dragright dragleft dragend", function(ev) {
switch(ev.type) {
case "dragleft":
case "dragright":
//User is dragging horizontally, calculate current x from section index
current_x = 0 - (ww * current_section);
// Use transit plugin to move wrapper with CSS3 animation
$wrapper.transition({
x : current_x + parseInt(ev.gesture.deltaX)
}, 0, 'linear');
break;
case "dragend":
// User released finger. Check if dragged
// over 30% of screenwidth or if user made quick swipe..
// deltaX can be > 0 or < 0 so use abs to get positive value
if ((Math.abs(ev.gesture.deltaX) / ww) > 0.3 || ev.gesture.velocityX > 1.5) {
// Scroll to next or previous section
new_section = (ev.gesture.deltaX > 0 ? current_section - 1 : current_section + 1);
// If scrolling over section index.. scroll back to old..
if (new_section < 0 || new_section > $('.section').length-1)
new_section = current_section;
} else {
// Not scrolled that much.. animate back to old section
new_section = current_section;
}
// Calculate section x position
current_x = 0 - (ww * new_section);
// Animate wrapper to new position.. animation length 400 millisecods
// with "linear" easing..
$wrapper.transition({
x : current_x
}, 400, 'linear', function() {
// Set new section as current when animation
// completes
current_section = new_section;
});
break;
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="section" id="section1">
<p>section1</p>
</div>
<div class="section" id="section2">
<p>section2</p>
</div>
<div class="section" id="section3">
<p>section3</p>
</div>
<div class="section" id="section4">
<p>section4</p>
</div>
</div>
</body>
</html>
Related
I'm making a blurry loading effect. My background image has a z-index of -1 and my loading text has no z-index. Everything works except my loading text, I can't see it loading and stand out from my background image...
Does anybody know what's wrong? it'd be kind of you to help! Thank you so much!
This is my JS:
const loadText = document.querySelector('.loading-text')
const bg = document.querySelector('.bg')
let load = 0
let int = setInterval(blurring, 30)
const scale = (num, in_min, in_max, out_min, out_max) => {
return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
}
function blurring() {
load++
if (load > 99) {
clearInterval(int)
}
loadText.innerText = `${load}%`
loadText.style.opacity = scale(load, 0, 100, 1, 0)
bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`
}
This is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blurry Loading</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="bg">
<div class="loading-text">
0%
</div>
</section>
<script src="script.js"></script>
</body>
</html>
This is my CSS:
* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.bg {
background: url('z.jpg') no-repeat center center/cover;
position: absolute;
top: -30px;
left: -30px;
width: calc(100vw + 60px);
height: calc(100vw + 60px);
z-index: -1;
filter: blur(0px)
}
.loading-text {
padding: 50% 50%;
font-size: 50px;
color: #fff;
It's actually visible, but very poorly because you're putting blur filter on bg element and everything inside (that includes your loading-text). Just put your loading-text outside.
This problem is occurring because loading-text is inside bg. So when the blur effect is applied to bg it automatically gets applied to loading-text as well. So the loading percentage is being rendered, but it's blurred into the background image and therefore not visible.
One solution is to have two elements within your bg element. These elements would not be nested and therefore any style applied to either element would not affect the other element. The first element would show the background image and the second element would show the loading text.
Here is a way to do that using your code, but I've removed anything that isn't necessary to achieve this effect:
const loadText = document.querySelector('.loading-text')
const bg = document.querySelector('.bg-image')
let load = 0
let int = setInterval(blurring, 30)
const scale = (num, in_min, in_max, out_min, out_max) => {
return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
}
function blurring() {
load++
if (load > 99) {
clearInterval(int)
}
loadText.innerText = `${load}%`
loadText.style.opacity = scale(load, 0, 100, 1, 0)
bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`
}
.bg,
.bg-image {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 190px;
}
.bg-image {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/200px-FullMoon2010.jpg');
filter: blur(30px);
}
.loading-text {
color: #fff;
font: normal 32px serif;
text-align: center;
line-height: 190px;
}
<!DOCTYPE html>
<html lang="en">
<body>
<section class="bg">
<div class="bg-image">
</div>
<div class="loading-text">
0%
</div>
</section>
</body>
</html>
I want to make a loading animation for my webpage which will take 8-10 sec to load using JavaScript or Ajax(Which I don't know)
The loading animation is a progress bar
Which I want to stop for every 1 sec for increment of 10% eg( https://codepen.io/gustitammam/pen/RRXGdj )
Bootstrap is not welcomed and I don't want text and percentage on it
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="D:\PORTFOLIO\master.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.js" integrity="sha512-qsjFwnCEe/k1YLJDkiRqDgKb+Eq+35xdoeptV7qfI7P6G/kajIF0R6d/9SiOxSkU/aNmHzuipOEYaTUHCJUIeQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js" integrity="sha512-oHBLR38hkpOtf4dW75gdfO7VhEKg2fsitvHZYHZjObc4BPKou2PGenyxA5ZJ8CCqWytBx5wpiSqwVEBy84b7tw==" crossorigin="anonymous"></script>
</head>
<body>
<div id="myprogress">
<div id="mybar">
<span id="incvalue">1%</span>
</div>
</div>
<br> <button onclick="move()">ClickMe</button>
<script>
const move = () => {
var elem = document.getElementById("mybar");
var width = 1;
var id = setInterval(frame, 10)
function frame(){
if(width >= 100){
clearInterval(id);
}else{
width++;
elem.style.width = width + "%";
document.getElementById("incvalue").innerHTML = width + "%";
}
}
}
</script>
</body>
</html>
CSS
html{
scroll-behavior: smooth;
}
body{
background: #181818;
color: #f4eee8;
}
#myprogress{
width: 45%;
background: #181818;
margin: auto;
}
#mybar{
width: 1%;
background: white;
color: white;
text-align: center;
}
In the example you cited, you can just comment out the JS lines where the following fields are set:
.attr and .text
Regarding your desire to omit Bootstrap, however, you are not asking a simple technical question but proposing that somebody write a whole program fragment for you, which is generally not the intended purpose of Stack overflow.
Actually I didn't do it but I don't know his Stack ID so #0_0#1045(From Discord)
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="D:\PORTFOLIO\master.css">
</head>
<body>
<h3>Dynamic Progress Bar</h3>
<p>Running progress bar from 0% to 100% in 10 seconds</p>
<div class="progress">
<div class="current-progress">
</div>
</div>
</div>
<script src="master.js"></script>
</body>
</html>
CSS
html{
scroll-behavior: smooth;
}
body{
background: #181818;
color: #f4eee8;
height: 100vh;
width: 100vw;
}
.progress {
position: relative;
margin-top: 20px;
height: 20px;
width: 700px;
background-color: #181818;
}
.current-progress {
height: 100%;
width: 0%;
background-color: white;
text-align: center;
transition: all 0.3s;
}
JS
let progressValue = 0;
const progressBar = document.querySelector(".current-progress");
progressBar.style.width = `${progressValue}%`;
const timer = setInterval(() => {
if (progressValue < 100) {
progressValue += 10;
progressBar.style.width = `${progressValue}%`;
}
if (progressValue === 100) {
clearInterval(timer);
}
}, 1000);
Finally Solved!!!
I want to implement a vertical resizable div such that it increases height in certain fixed intervals. I don't want to use any libraries and looking for plain JS implementation. Here is jquery version: https://jqueryui.com/resizable/#snap-to-grid
This code works good but increases height by one pixel on each mousemove (vertically).
When I try to increase height by 10, the height increases but the mouse pointer does not stick to the base of div..,
https://plnkr.co/edit/3VesixHE2B7N46f8N7Bg?p=preview
const divElement = document.querySelector('.ns-resize');
const element = document.querySelector('.resizable');
let original_height = parseFloat(getComputedStyle(element, null).getPropertyValue('height').replace('px', ''));
let original_Y = element.getBoundingClientRect().top;
divElement.onmousedown = function(mouseDownEvent) {
mouseDownEvent.preventDefault();
var original_mouse_y = mouseDownEvent.pageY;
document.addEventListener('mousemove', resize);
document.addEventListener('mouseup', stopResize);
function resize(mouseUpEvent) {
//cmp.increment = cmp.increment + 15;
const height = original_height + (mouseUpEvent.pageY - original_mouse_y);
if (height > 15 && height < 900) {
mouseUpEvent.pageY = mouseUpEvent.pageY ;
element.style.height = height + 'px';
divElement.innerHTML = element.style.height;
}
}
function stopResize() {
document.removeEventListener('mousemove', resize)
}
}
/* Styles go here */
.resizable {
width: 100px;
height : 100px;
border:1px solid red;
position: absolute;
}
.container {
position : relative;
}
.ns-resize {
position: absolute;
bottom: 0px;
cursor: ns-resize;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="resizable">
<div class="ns-resize">
<span> </span>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
}
I could increase height by one pixel on every mousemove event, but what I really want is to increase by 10px each time.
As indicated in my comment, CSS already has a resize property you can use to make an element resizable. The only thing you need to do after a resize, is round the current height to the nearest 10px.
document.querySelector( '.resizable' ).addEventListener( 'mouseup', event => {
const current_height = parseInt( event.target.style.height, 10 );
event.target.style.height = Math.round( current_height / 10 ) * 10 + 'px';
console.log( `changed height from ${ current_height }px to ${ event.target.style.height }` );
});
.resizable {
border: 1px solid red;
height: 100px;
overflow: hidden;
resize: vertical;
width: 100px;
}
<div class="resizable"></div>
Only mighty want to add a check now to not run the function when something else inside the div is clicked.
This is the link to the website: http://codepen.io/zabielski/pen/MyoBaY/
I am following the instructions and code from this website to try and get a similar scrolling parallax effect. Below is my HTML, CSS and JavaScript code (basically just copying but with my own images and stuff).
<!DOCTYPE html>
<html lang="en">
<!--Meta equiv for the whole web page to be emulated into IE straight from the chrome styling, If this is not done, then the whole webpage is green instead of the gray and orange and the text on the opage is shoved onto the far left side of the page.-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7"/>
<!--Link to Favicon-->
<link rel="shortcut icon" type="image/x-icon" href="Favicon/Ulearn.ico">
<!--Links to CSS style sheet-->
<link rel="stylesheet" type="text/css" href="CSS style sheets/Main style sheet.css">
<link rel="stylesheet" type="text/css" href="CSS style sheets/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="CSS style sheets/animate.min.css">
<!--Links to JavaScript external sheets-->
<script type="text/javascript" src="JavaScript sheets/Main javascript.js"></script>
<script type="text/javascript" src="JavaScript sheets/jquery-2.2.3.js"></script>
<head>
<span class="header">Physics Level 3</span>
<!--Meta and links to make sure the webpage is dynamic-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
</head>
<body>
<div id='hero'>
<div class='layer-1 layer' data-depth='0.20' data-type='parallax'></div>
<div class='layer-2 layer' data-depth='0.50' data-type='parallax'></div>
<div class='layer-3 layer' data-depth='0.80' data-type='parallax'></div>
<div class='layer-4 layer' data-depth='1.00' data-type='parallax'></div>
</div>
<div id="content">
</div>
</body>
</html>
#hero {
height: 1000px;
overflow: hidden;
position: relative;
}
.header {
background-color: white;
border-style: solid;
border-width: 0px;
position: absolute;
text-align: left;
left: 1%;
top: 2.4%;
width: 97%;
padding-top: 1%;
padding-bottom: 1%;
padding-left: 0.7%;
padding-right: 0.2%;
z-index: 1;
}
.layer {
background-position: center;
background-size: auto;
width: 100%;
height: 800px;
position: fixed;
z-index: -1;
}
.layer-1 {
background-image: url("background-last.jpg");
}
.layer-2 {
background-image: url("background-middle.png");
background-repeat: no-repeat;
background-position: center;
}
.layer-3 {
background-image: url("background-top.png");
background-repeat: no-repeat;
}
.layer-4 {
background-image: url("background-verytop.png");
}
(function () {
window.addEventListener('scroll', function (event) {
var depth, i, layer, layers, len, movement, topDistance, translate3d;
topDistance = this.pageYOffset;
layers = document.querySelectorAll('[data-type=\'parallax\']');
for (i = 0, len = layers.length; i < len; i++) {
if (window.CP.shouldStopExecution(1)) {
break;
}
layer = layers[i];
depth = layer.getAttribute('data-depth');
movement = -(topDistance * depth);
translate3d = 'translate3d(0, ' + movement + 'px, 0)';
layer.style['-webkit-transform'] = translate3d;
layer.style['-moz-transform'] = translate3d;
layer.style['-ms-transform'] = translate3d;
layer.style['-o-transform'] = translate3d;
layer.style.transform = translate3d;
}
window.CP.exitedLoop(1);
});
}.call(this));
You cant just copy and paste all off the contents, you must format it - the code was specially compiled.
Here's the formatted RAW page:
<html class="animated fadeIn">
<head>
<script src="//assets.codepen.io/assets/editor/live/console_runner-d0a557e5cb67f9cd9bbb9673355c7e8e.js"></script><script src="//assets.codepen.io/assets/editor/live/events_runner-21174b4c7273cfddc124acb0876792e0.js"></script><script src="//assets.codepen.io/assets/editor/live/css_live_reload_init-7618a0de08795409d8f6c9ef6805f7b2.js"></script>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<link rel="canonical" href="http://codepen.io/zabielski/pen/MyoBaY/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet" type="text/css">
<link rel="stylesheet prefetch" href="//codepen.io/assets/reset/normalize.css">
<link rel="stylesheet prefetch" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet prefetch" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css">
<style class="cp-pen-styles">body {
padding: 0;
margin: 0;
background-color: #130d0a;
font-family: 'Playfair Display', serif;
color: #fff;
}
#hero {
height: 800px;
overflow: hidden;
position: relative;
}
#content {
background-color: #130d0a;
}
.layer {
background-position: bottom center;
background-size: auto;
background-repeat: no-repeat;
width: 100%;
height: 800px;
position: fixed;
z-index: -1;
}
#hero-mobile {
display: none;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/full_illustration.png") no-repeat center bottom/cover;
height: 320px;
}
.first-section {
padding: 50px 0 20px 0;
}
.text-header {
font-size: 50px;
text-align: center;
}
h1 {
line-height: 120%;
margin-bottom: 30px;
}
p {
color: #ede0d5;
font-size: 18px;
line-height: 150%;
}
#hero, .layer {
min-height: 800px;
}
.layer-bg {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_bg.jpg");
}
.layer-1 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_03.png\a ");
background-position: left bottom;
}
.layer-2 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_02.png");
}
.layer-3 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_man.png\a ");
background-position: right bottom;
}
.layer-4 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_01.png\a ");
}
.layer-overlay {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_overlay.png\a ");
}
#media only screen and (max-width: 768px) {
#hero {
display: none;
}
#hero-mobile {
display: block;
}
}
.tutorial-link {
color: #fff;
font-size: 18px;
text-decoration: underline;
}
.tutorial-link:hover {
color: #ede0d5;
}
</style>
</head>
<body>
<div id="hero">
<div class="layer-bg layer" data-depth="0.10" data-type="parallax"></div>
<div class="layer-1 layer" data-depth="0.20" data-type="parallax"></div>
<div class="layer-2 layer" data-depth="0.50" data-type="parallax"></div>
<div class="layer-3 layer" data-depth="0.80" data-type="parallax"></div>
<div class="layer-overlay layer" data-depth="0.85" data-type="parallax"></div>
<div class="layer-4 layer" data-depth="1.00" data-type="parallax"></div>
</div>
<div id="hero-mobile"></div>
<div id="content">
<div class="container">
<section class="first-section">
<div class="row">
<div class="col-sm-6">
<h1>You cannot hide the soul. Through all his unearthly tattooings, I thought I saw the traces of a simple honest heart.</h1>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<p>And besides all this, there was a certain lofty bearing about the Pagan, which even his uncouthness could not altogether maim. He looked like a man who had never cringed and never had had a creditor. Whether it was, too, that his head being shaved, his forehead was drawn out in freer and brighter relief, and looked more expansive than it otherwise would, this I will not venture to decide; but certain it was his head was phrenologically an excellent one.</p>
<p>It may seem ridiculous, but it reminded me of General Washington's head, as seen in the popular busts of him. It had the same long regularly graded retreating slope from above the brows, which were likewise very projecting, like two long promontories thickly wooded on top. Queequeg was George Washington cannibalistically developed.</p>
<p>Whilst I was thus closely scanning him, half-pretending meanwhile to be looking out at the storm from the casement, he never heeded my presence, never troubled himself with so much as a single glance; but appeared wholly occupied with counting the pages of the marvellous book. Considering how sociably we had been sleeping together the night previous, and especially considering the affectionate arm I had found thrown over me upon waking in the morning, I thought this indifference of his very strange. But savages are strange beings; at times you do not know exactly how to take them.</p>
</div>
<div class="col-sm-6">
<p>At first they are overawing; their calm self-collectedness of simplicity seems a Socratic wisdom. I had noticed also that Queequeg never consorted at all, or but very little, with the other seamen in the inn. He made no advances whatever; appeared to have no desire to enlarge the circle of his acquaintances. All this struck me as mighty singular; yet, upon second thoughts, there was something almost sublime in it. Here was a man some twenty thousand miles from home, by the way of Cape Horn, that is—which was the only way he could get there—thrown among people as strange to him as though he were in the planet Jupiter; and yet he seemed entirely at his ease; preserving the utmost serenity; content with his own companionship; always equal to himself.</p>
<p>Here was a man some twenty thousand miles from home, by the way of Cape Horn, that is—which was the only way he could get there—thrown among people as strange to him as though he were in the planet Jupiter; and yet he seemed entirely at his ease; preserving the utmost serenity; content with his own companionship; always equal to himself. Surely this was a touch of fine philosophy; though no doubt he had never heard there was such a thing as that.</p>
<a class="tutorial-link" href="https://medium.com/#PatrykZabielski/how-to-make-multi-layered-parallax-illustration-with-css-javascript-2b56883c3f27">
Learn how to create this parallax effect
</a>
</div>
</div>
</section>
</div>
</div>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1"></script>
<script>(function () {
window.addEventListener('scroll', function (event) {
var depth, i, layer, layers, len, movement, topDistance, translate3d;
topDistance = this.pageYOffset;
layers = document.querySelectorAll('[data-type=\'parallax\']');
for (i = 0, len = layers.length; i < len; i++) {
if (window.CP.shouldStopExecution(1)) {
break;
}
layer = layers[i];
depth = layer.getAttribute('data-depth');
movement = -(topDistance * depth);
translate3d = 'translate3d(0, ' + movement + 'px, 0)';
layer.style['-webkit-transform'] = translate3d;
layer.style['-moz-transform'] = translate3d;
layer.style['-ms-transform'] = translate3d;
layer.style['-o-transform'] = translate3d;
layer.style.transform = translate3d;
}
window.CP.exitedLoop(1);
});
}.call(this));
//# sourceURL=pen.js
</script>
</body>
</html>
I am using the jquery UI to create a floating window. I am able to create window. But I am having trouble in making it floating. I want that the window should be in top right corner of the "body". (now you can see its on right but at bottom) and I also want to make it moving. When I will scroll the page the window should also scroll along with it. e.g. http://manos.malihu.gr/tuts/jquery-floating-menu.html
Here is the code what I have done so far.
Please find the code on http://jsfiddle.net/z8rW6/1/
Javascript Code:
$(document).ready(function(){
$("#dialog").dialog();
var $parent = $('#body');
var windowHeight = $(window).height();
var parentAbsoluteTop = $parent.offset().top;
var parentAbsoluteBottom = parentAbsoluteTop + $parent.height();
var topStop = parentAbsoluteTop + $( ".selector" ).dialog( "option", "height" );
$('#dialog').dialog({ width: 300,height: 600 }).dialog('widget').position({
my: 'right top',
at: 'right top',
of: $('#body')
});
$(window).scroll(function(event) {
var windowBottom = $(window).scrollTop() + windowHeight;
if (windowBottom < topStop)
$('.selector').dialog({ dialogClass: 'myPosition1' });
else if (windowBottom >= topStop && windowBottom <= parentAbsoluteBottom)
$('.selector').dialog({ dialogClass: 'myPosition2' });
else
$('.selector').dialog({ dialogClass: 'myPosition3' });
})
CSS Code:
#page{
width:800px;
margin:0 auto;
}
.myPosition1 {
position: 'absolute',
top: '0px',
bottom: 'auto',
Right: '0'
}
.myPosition2 {
position: 'fixed',
top: 'auto',
bottom: 'auto',
Right: '0'
}
.myPosition3 {
position: 'absolute',
top: 'auto',
bottom: '0px',
Right: '0'
}
#header{
border:1px solid blue;
height:15px;
margin:8px;
}
#body{
border:1px solid blue;
height:5600px;
margin:8px;
position: relative;
}
#footer{
border:1px solid blue;
height:15px;
margin:8px;
}
h1,h2{
padding:16px;
}
#debug {
position: fixed;
bottom: 0;
right: 0;
height: 100px;
width: 100px;
color: red;
}
Html Code:
<html>
<head>
<LINK href="css/style.css" rel="stylesheet" type="text/css">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src='javascript/behaviour.js'></script>
</head>
<body style="font-size:62.5%;">
<div id="page">
<div id="header"><h1>header</h1></div>
<div id="body" >
<h1>content top -> when scrolling up the box should STOP here (at the line right above this text)</h1>
<div id="dialog" title="Detailed FeedBack">I'm in a dialog </div>
<span style="position: absolute; bottom: 0; ">content bottom -> when scrolling down the box should STOP here (at the line right below this text)</span>
</div>
<div id="footer"><h1>footer</h1></div>
<div id="debug"></div>
</div>
</body>
</html>
:) All of these answers are great ways to handle the question you technically asked... how to do it with jQuery. However - it is far easier to do it with very simple CSS.
Example:
<head>
<style type="text/css">
.myDialog {
padding: 5px 10px;
background: yellow;
border: 1px solid #999;
position: fixed; /* This is the magic - stays during scroll. */
top: 0; right: 0; /* These coordinates are now in
relation to the first parent
with non-static positioning (body) */
}
.hidden {
display: none;
}
</style>
</head>
<body>
<!-- The rest of your page -->
<!-- Put your dialog at the end of the body (or the beginning)
This way you don't have to worry about it getting hung up
within the positioning boxes of any other elements -->
<div class="myDialog hidden">
This is my dialog content!
</div>
</body>
<script type="text/javascript" language="javascript">
// Now you can just toggle on and off the "hidden"
// class to make the dialog hide/show.
$('#SomeButton').bind('click', function (ev) {
$('.myDialog').toggleClass('hidden');
});
</script>
The exact same principles can be applied to your Modal dialog to make it move with the scrolling of the page, and that sort of thing.
For a working example of the above, take a look at this jsFiddle: http://jsfiddle.net/WSZXL/
This should work with your HTML, though you should increase #footer's height (like to 400px) in your CSS to be able to confirm that it works :
var $d;
$(document).ready(function(){
var dlg_width = 300;
var dlg_height = 200;
var dlg_offset_x = $("#page").width() - dlg_width + 100;
var dlg_margin_top = $("#header").outerHeight(true); // includeMargins=true
var dlg_margin_bottom = $("#footer").outerHeight(true); // includeMargins=true
$d = $('#dialog').dialog({
width: dlg_width,
height: dlg_height,
position: [dlg_offset_x, dlg_margin_top]
});
$(window).bind('scroll', function(evt){
var scrollTop = $(window).scrollTop();
var bottom = $(document).height() - scrollTop;
$d.dialog("option", {"position": [
dlg_offset_x,
((dlg_margin_top - scrollTop > 0) ?
dlg_margin_top - scrollTop :
((bottom - dlg_height > dlg_margin_bottom) ?
0 :
bottom - dlg_height - dlg_margin_bottom
)
)
]});
});
});
You can see it live here : http://jsfiddle.net/5TFQy/10/
Note that there are some quircks though:
dialog sticks to the right of the viewport, when it should stick to the right of the #body. Did I miss something, or is it a limitation of dialog()?
dlg_margin_bottom = $("#footer").outerHeight(true) isn't enough of a value to pixel-perfectly honour your bottom-blue-line requirement. #body's margin and border sizes should certainly be added. Tried to keep it simple not to complicated.
I hope this will help you:
http://jsfiddle.net/lytican/UxZKH/2/