html object not displaying where it should on mobiles devices

html object not displaying where it should on mobiles devices - javascript

I'm working on a Flappy bird clone that works as well on mobile devices using service workers. I'm also learning new stuff about these techonologies.
Everything seemed to be working fine on desktop, but on mobile, the bottom pipes display a little higher than they should.
I'm using this meta viewport configuration:
HTML
<!DOCTYPE HTML>
<html>
<head>
<title> FLAPWAPP </title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div id="gamecanvas">
<div id="sky"></div>
<div id="playspace">
<div id="skylimit"></div>
<div id="bird" class="bird"></div>
</div>
<div id="land"></div>
</div>
<script>
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('sw.js')
.then(function() { console.log("Service Worker Registered"); });
}
</script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS
.pipe
{
position: absolute;
height: 100%;
z-index: 5;
width: 52px;
left: -100px;
animation: pipeAnimation 7500ms linear;
}
.pipe_upper
{
position: absolute;
top: 55px;
width: 52px;
background-image: url('../assets/pipe.png');
background-repeat: repeat-y;
background-position: center;
}
.pipe_upper:after
{
content: "";
position: absolute;
bottom: 0;
width: 52px;
height: 26px;
background-image: url('../assets/pipe-down.png');
}
.pipe_lower
{
position: absolute;
bottom: 0;
width: 52px;
background-image: url('../assets/pipe.png');
background-repeat: repeat-y;
background-position: center;
}
.pipe_lower:after
{
content: "";
position: absolute;
top: 0;
width: 52px;
height: 26px;
background-image: url('../assets/pipe-up.png');
}
What this could be? You can check the entire source code on my github: github

This is because android is base on linux. So some of your css code might has being ignored by the android. Find the code, and use the webkit on it.

The problem has been solved here: https://github.com/llucmk/FLAPWAPP/blob/master/js/main.js
There was a problem related to the javascript and the object position, not giving it's correct position with it.

Related

Why does my carousel rotate when the page loads, but then stops completely? [duplicate]

This question already has answers here:
Script Tag - async & defer
(12 answers)
Closed 8 days ago.
I am creating a full-stack application and for my hero page, I am working on adding a carousel that rotates images in the background.
So far I have created the HTML, CSS, and JavaScript files.
When the page loads, it rotates but then the carousel stops working and just stays on the first line.
I am not too sure if there is an error in my code but I would appreciate it if someone helped me out.
var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
function changeSlide() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].style.opacity = 1;
}
setInterval(changeSlide, 3000);
*{
margin: 0%;
padding: 0%;
}
/*------------------------------Hero Page---------------------------------*/
.carousel {
width: 100%;
height: 700px;
position: relative;
overflow: hidden;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide:first-child {
opacity: 1;
}
.slide-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
}
.slide-1 {
background-image: url(Images/derek-baumgartner-A7sfB4yKS7s-unsplash.jpg);
}
.slide-2 {
background-image: url(Images/andrew-bain-jO_Q3EY_T0E-unsplash.jpg);
}
.slide-3 {
background-image: url(Images/aaron-dowd-N7PDwky8doM-unsplash.jpg);
}
<!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">
<script src="practice.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="practice.css">
<title>Welcome to Washington State - Home Page</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<!------------Hero Page-------------->
<header>
<div class="carousel">
<div class="slide slide-1">
<div class="slide-content">Slide 1</div>
</div>
<div class="slide slide-2">
<div class="slide-content">Slide 2</div>
</div>
<div class="slide slide-3">
<div class="slide-content">Slide 3</div>
</div>
</div>
</header>
</body>

The problem is that you are loading your script before the page has been created and the script is running as soon as it is loaded.
You can add defer to the script, like so:
<script src="practice.js" defer></script>
Or you can move the script to the end of the HTML.
Script Tag - async & defer would be a good source of information to read for this problem.
To make it easier to see your problem, I removed your images and simply set a background-color, height, and width in the CSS to see the slides and I reduced the delay in setInterval to 1500.
var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
function changeSlide() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].style.opacity = 1;
}
setInterval(changeSlide, 1500);
* {
margin: 0%;
padding: 0%;
}
/*------------------------------Hero Page---------------------------------*/
.carousel {
width: 100%;
height: 700px;
position: relative;
overflow: hidden;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide:first-child {
opacity: 1;
}
.slide-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
}
.slide-1 {
background-color: red;
height: 150px;
width: 200px;
}
.slide-2 {
background-color: green;
height: 150px;
width: 200px;
}
.slide-3 {
background-color: blue;
height: 150px;
width: 200px;
}
<!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">
<script src="practice.js" defer></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="practice.css">
<title>Welcome to Washington State - Home Page</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<!------------Hero Page-------------->
<header>
<div class="carousel">
<div class="slide slide-1">
<div class="slide-content">Slide 1</div>
</div>
<div class="slide slide-2">
<div class="slide-content">Slide 2</div>
</div>
<div class="slide slide-3">
<div class="slide-content">Slide 3</div>
</div>
</div>
</header>
</body>

Including a different image in SweetAlert2 popup message based on selection of a div after clicking a button

I think something similar to this question was answered in the past. However, I read a number of StackOverflow posts and still couldn't solve the issue. Probably, that is because I don't have a good understanding of jQuery yet and can't apply basic concepts to what I need to solve. So, I would greatly appreciate if you could help me solve this issue. Thanks!
Right now, what happens is the following:
1. When clicking a button in the middle, five circles show up.
2. When you click a circle, a popup message made with SweetAlert2 shows up.
3. When clicking the "ok" button in the popup message, the message is closed and you can see that the circle's background was changed to light orange.
What I want to do : show a different image(https://s25.postimg.cc/kw0l49gz3/original.png) in the popup message when clicking a circle with the text "okay".
Note: I assigned "options" class for all circles and different id for each circle. The id for a circle with the text "okay" is "option5".
$(document).ready(function() {
$('#test').click(function(){
$(".options:hidden").fadeIn()
.on("click", function(){
$(this).css("background", "#F3C78D");
})
.on("click", function(){
swal({
title: 'Sweet!',
text: 'Modal with a custom image.',
imageUrl: 'https://unsplash.it/400/200',
imageWidth: 400,
imageHeight: 200,
imageAlt: 'Custom image',
animation: false
})
// swal({
// title: 'Sweet!',
// text: 'Modal with a custom image.',
// imageUrl: 'https://s25.postimg.cc/kw0l49gz3/original.png',
// imageWidth: 400,
// imageHeight: 200,
// imageAlt: 'Custom image',
// animation: false
// })
});
});
});
body{
font-family: 'Poor Story', sans-serif;
}
#test{
cursor: pointer;
display: block;
text-align: center;
position: absolute;
display: flex;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.options {
background: #f7f7f5;
display: none;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
border-radius: 50%;
border-style: solid;
border-color: #F3C78D;
width: 60px;
height: 60px;
font-size: 12px;
}
.options span {
color: #000000;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#option1{
transform: translate(-100%, -150%);
}
#option2{
transform: translate(-160%, -40%);
}
#option3{
transform: translate(-50%, 50%);
}
#option4{
transform: translate(60%, -40%);
}
#option5{
transform: translate(15%, -150%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4.1.x -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- [Google Fonts] To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document. -->
<!-- <link href="https://fonts.googleapis.com/css?family=Sunflower:300" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
<!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script type="text/javascript" src="index.js"></script>
<!-- sweetalert2 -->
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7.12.15/dist/sweetalert2.all.min.js"></script>
<!-- CSS -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2#7.12.15/dist/sweetalert2.min.css'>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-outline-success" id="test">test</button>
<div class="options" id="option1"><span>Hello<br>World</span></div>
<div class="options" id="option2"><span>Goodbye</span></div>
<div class="options" id="option3"><span>How<br>are<br>you?</span></div>
<div class="options" id="option4"><span>Fine</span></div>
<div class="options" id="option5"><span>Okay</span></div>
</div>
</body>
</html>

You can use data-attribute to define the image link inside the element and then you can easily use it within the JS code. You can also do the same with the other parameter.
$(document).ready(function() {
$('#test').click(function(){
$(".options:hidden").fadeIn()
.on("click", function(){
$(this).css("background", "#F3C78D");
})
.on("click", function(){
var url=$(this).attr('data-img');
swal({
title: 'Sweet!',
text: 'Modal with a custom image.',
imageUrl: url,
imageWidth: 400,
imageHeight: 200,
imageAlt: 'Custom image',
animation: false
})
});
});
});
body{
font-family: 'Poor Story', sans-serif;
}
#test{
cursor: pointer;
display: block;
text-align: center;
position: absolute;
display: flex;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.options {
background: #f7f7f5;
display: none;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
border-radius: 50%;
border-style: solid;
border-color: #F3C78D;
width: 60px;
height: 60px;
font-size: 12px;
}
.options span {
color: #000000;
text-align: center;
vertical-align: middle;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#option1{
transform: translate(-100%, -150%);
}
#option2{
transform: translate(-160%, -40%);
}
#option3{
transform: translate(-50%, 50%);
}
#option4{
transform: translate(60%, -40%);
}
#option5{
transform: translate(15%, -150%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4.1.x -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- [Google Fonts] To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document. -->
<!-- <link href="https://fonts.googleapis.com/css?family=Sunflower:300" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
<!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script type="text/javascript" src="index.js"></script>
<!-- sweetalert2 -->
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#7.12.15/dist/sweetalert2.all.min.js"></script>
<!-- CSS -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2#7.12.15/dist/sweetalert2.min.css'>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-outline-success" id="test">test</button>
<div class="options" data-img="https://unsplash.it/400/200" id="option1"><span>Hello<br>World</span></div>
<div class="options" data-img="https://unsplash.it/400/200" id="option2"><span>Goodbye</span></div>
<div class="options" data-img="https://unsplash.it/400/200" id="option3"><span>How<br>are<br>you?</span></div>
<div class="options" data-img="https://unsplash.it/400/200" id="option4"><span>Fine</span></div>
<div class="options" data-img="https://s25.postimg.cc/kw0l49gz3/original.png" id="option5"><span>Okay</span></div>
</div>
</body>
</html>

CSS breaks on reload mobile

I'm not very skilled at CSS. I have website that has 4 stylesheets and 3 JS files-using Bootstrap 4 and jQuery. When I deployed it on live and refresh the page, all was working fine.
However, when I go to website from mobile, it works fine the first time but when I refresh, all the CSS and HTML is broken (this usually happens after 1st or 2nd refresh). After it is broken, I refresh it once or twice, it fixes the issue. I searched about it and some say it is happening because of using relative positioning and floating, but when I commented out those lines from my CSS files, I still have the same problem. Does anyone have any idea about how to fix this issue?
index html
**
<!DOCTYPE html>
<html lang="en">
<head>
<title>Landor App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<style></style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/fonts.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/intro.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/home.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/video.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/modals.css" type="text/css"/>
</head>
<body>
<!--INTRO PAGE-->
<div id="intro-page" class="container-fluid" style="display: none">
<div class="row intro-header">
<div class="col-12"><img id="landor-worldmark"></div>
</div>
<div class="row intro-text">
<div class="intro-text col-12">
<h3>Hi Andrew,</h3><br>
<h3>We can't wait to welcome you to Landor London.
Until then please take a few minutes
<span style="white-space: nowrap;">(3, to be exact)to explore more about us...</span></h3><br>
<h3>Regards,</h3>
<h3>Peter</h3><br><br>
<span id="enter-button">Enter</span>
</div>
</div>
<div class="intro-footer row">
<div class="col-12"><img class="img-fluid intro-boat"></img></div>
</div>
</div>
intro.css
html {
height: 100%;
}
.intro-text{
font-family: "apercuBold";
}
#intro-page{
padding-left: 20px;
padding-right: 20px;
}
body {
background-color:black;
}
.container-fluid{
padding-right: 10px;
padding-left: 10px;
}
.intro-text{
position: relative;
top: 5%;
}
#enter-button{
font-family: "timeposRegular";
text-decoration: underline;
font-size: 150%;
cursor: pointer;
position: relative;
top: 20%;
}
.intro-header{
padding-top: 3%;
}
.intro-text{
padding-top: 50px;
padding-bottom: 50px;
}
#landor-worldmark{
content:url("../assets/Landor_Logo.png");
width: 120px;
height: 30px;
}
.intro-boat{
content:url("../assets/boat2.png");
max-width: 400px;
height: auto;
float:right;
}
#media screen and (max-width: 450px) {
.intro-text > h3{
font-size: 100%;
}
.intro-text{
font-size: 100%;
line-height: 1.4;
padding-top: 30px;
padding-bottom: 30px;
}
#enter-button{
font-size: 100%;
}
.intro-boat{
max-width: 200px;
height: auto;
float:right;
}
.intro-header{
padding-top: 5%;
}
}
#media screen and (max-width: 350px) {
.intro-text > h4{
font-size: 90%;
}
.intro-text{
font-size: 94%;
line-height: 1.1;
padding-top: 30px;
padding-bottom: 30px;
}
#enter-button{
font-size: 94%;
}
.intro-boat{
max-width: 200px;
height: auto;
}
.intro-header{
padding-top: 5%;
}
}
.intro-footer{
position: fixed;
bottom: 10%;
width: 100%;
}
**

I just pulled out my phone and went to the site, and used the Browser tools phone emulator option (i don't know if that's what it's called) and it looks just fine on reload. Maybe try restarting your phone or clearing cache.
Is it because you are tilting your phone and switching the view from horizontal and vertical (That still shouldn't change anything)

After a whole day, I finally solved this problem by adding "?" at the end of my stylesheets paths on the link tag. It's a caching issue, although I disabled caching, for some reason it did not work. Now I refreshed the page > 10 times and never experienced any problem! I think, because of the question mark, when it is loading the CSS, first it's checking to see if there is another version available which prevents it from fetching from the cache completely.

Drag to change value

Any tips on how I can make it possible to drag the div .handle across the div .slider and get a value when doing so? Thanks in advance.
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Drag to see price</title>
<meta name="description" content="En interaktiv genomgång av Brackets.">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="slider"></div>
<div class="handle"></div>
</body>
</html>
CSS
.slider{
background-color: black;
width: 500px;
height: 15px;
}
.handle{
background-color: red;
position:absolute;
left: 12px;
top: -0px;
width: 56px;
margin-left: -10px;
height: 32px;
z-index: 3;
cursor: pointer;
}

If you're only catering to IE9 and earlier, consider simply using the HTML5 input:
$("#test").on("input change",function(){
$("#bleh").text($(this).val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test" type="range"/>
<p id="bleh"></p>
Else, you probably have to implement your own solution or use something like Modernizr

DIV overlay with parallax effect

I'm about to redesign my website, and i want to make it more interesting vit some parralax effect. So here's my idea: I want 3 boxes, which overlay each other (and make the 2. and 3. box blurry, but it doesn't matter now). I would put it to the top of the site. So here's the parallax thing: I want it to move with the scrolling, something like this:
PICTURE
I tried to search for it, or code it by myself, but i failed :(
Has anybody got some cool stuff to do this?

Definetely this is your page:
http://stephband.info/jparallax/
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="author" content="" />
<meta name="description" content="" />
<title>jQuery.parallax</title>
<script>document.documentElement.className = 'js';</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<!-- Force latest IE rendering engine & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Make IE recognise HTML5 elements for styling -->
<!--[if lte IE 8]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<noscript>
<strong>Warning!</strong>
Your browser does not support HTML5 so some elements on this page are simulated using JScript. Unfortunately your browser has JScript disabled. Please enable it in order to display this page.
</noscript>
<![endif]-->
<!-- Disable image toolbar in IE6 -->
<!--[if lte IE 6]><meta http-equiv="imagetoolbar" content="no" /><![endif]-->
<link rel="icon" type="image/png" href="images/favicon.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" type="text/css" href="http://stephband.info/css/template.min.css" />
<link rel="stylesheet" type="text/css" href="http://stephband.info/css/template.theme.min.css" />
<link rel="stylesheet" type="text/css" href="http://stephband.info/css/site.layout.css" />
<link rel="stylesheet" type="text/css" href="http://stephband.info/css/docs.classes.css" />
<link rel="stylesheet" type="text/css" href="http://stephband.info/css/demos.theme.css" />
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" href="http://stephband.info/css/template.layout.32em.css" media="all" />
<link rel="stylesheet" href="http://stephband.info/css/template.layout.48em.css" media="all" />
<![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="http://stephband.infocss/template.ie.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="http://stephband.infocss/template.ie8.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="http://stephband.infocss/template.ie7.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" href="http://stephband.infocss/template.ie6.css" /><![endif]-->
<link rel="stylesheet" href="../css/jquery.parallax.css" />
<style type="text/css" media="screen, projection">
#wrapper {
width: 60em;
}
.button {
background: #2f3134;
float: left;
position: relative;
width: 60px; height: 60px;
margin: 3.2em 3.2em 0 0;
}
#viewport {
float: left; position: relative; background: #2f3134;
width: 60px; height: 60px; margin: 6.4em 3.2em 0 2.4em;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
#mouseport {
float: left; position: relative; background: #2f3134;
width: 60px; height: 60px; margin: 6.4em 3.2em 0 0;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
.layer_1 { position: absolute; width: 45px; height: 45px; z-index: 101; }
.layer_2 { position: absolute; width: 48px; height: 48px; z-index: 102; }
.layer_3 { position: absolute; width: 52px; height: 52px; z-index: 103; }
.layer_4 { position: absolute; width: 58px; height: 58px; z-index: 104; }
.layer_5 { position: absolute; width: 67px; height: 67px; z-index: 105; }
.layer_6 { position: absolute; width: 80px; height: 80px; z-index: 106; }
.tl, .tr, .bl, .br {
width: 11px; height: 11px;
}
.tl { background: url('http://stephband.info/images/corner_dark_tl.png'); }
.tr { background: url('http://stephband.info/images/corner_dark_tr.png'); }
.bl { background: url('http://stephband.info/images/corner_dark_bl.png'); }
.br { background: url('http://stephband.info/images/corner_dark_br.png'); }
</style>
</head>
<body>
<header class="site_header" id="page_header">
<div class="site_wrap wrap">
<a class="logo_thumb thumb" href="http://stephband.info" title="stephband" rel="index">
<h1>stephband.info</h1>
</a>
</div>
</header>
<div class="site_wrap wrap">
<h2>jParallax Demos next</h2>
<div id="wrapper" class="clear">
<div id="viewport">
<!-- Parallax layers -->
<img src="http://webdev.stephband.info/jparallax/images/parallax_button/1.png" alt="" class="layer_1"/>
<img src="http://webdev.stephband.info/jparallax/images/parallax_button/2.png" alt="" class="layer_2"/>
<img src="http://webdev.stephband.info/jparallax/images/parallax_button/3.png" alt="" class="layer_3"/>
<img src="http://webdev.stephband.info/jparallax/images/parallax_button/4.png" alt="" class="layer_4"/>
<img src="http://webdev.stephband.info/jparallax/images/parallax_button/5.png" alt="" class="layer_5"/>
<img src="http://webdev.stephband.info/jparallax/images/parallax_button/6.png" alt="" class="layer_6"/>
</div>
<div id="mouseport"></div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="../js/jquery.parallax.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
// Set up parallax layers
jQuery("#viewport>img").parallax(
{ mouseport: jQuery("#mouseport") }, // Options
{ xparallax: '6px', yparallax: '6px' }, // Layer 1
{ xparallax: '12px', yparallax: '12px' }, // Layer 2
{ xparallax: '30px', yparallax: '30px' }, // Layer 3
{ xparallax: '54px', yparallax: '54px' }, // Layer 4
{ xparallax: '84px', yparallax: '84px' }, // Layer 5
{ xparallax: '120px', yparallax: '120px' } // Layer 6
);
});
</script>
</body>
</html>
Hope this encourages your creativity!

We Keep Coding

JavaScript is the programming language of the Web.

html object not displaying where it should on mobiles devices - javascript

This is because android is base on linux. So some of your css code might has being ignored by the android. Find the code, and use the webkit on it.

The problem has been solved here: https://github.com/llucmk/FLAPWAPP/blob/master/js/main.js There was a problem related to the javascript and the object position, not giving it's correct position with it.

Related

Why does my carousel rotate when the page loads, but then stops completely? [duplicate]

Including a different image in SweetAlert2 popup message based on selection of a div after clicking a button

CSS breaks on reload mobile

Drag to change value

DIV overlay with parallax effect

Categories

Resources