Phonegap hates my blinking message - javascript

i'm new here ^^ Can you help me?
I've developed a very easy phonegap code-app.- First step: I've written this two lines in the cmd:
phonegap create Test
bower install bootstrap (this adds bootstrap and jquery).
- Second step: I've edited the content of index.html, index.js and I've written:
window.onload = function() {blink()};
function blink() {
$("#logo").fadeOut(500);
$("#logo").fadeIn(500);
$("#logo").fadeOut(500);
$("#logo").fadeIn(500);
window.setTimeout(link,2050);
}
function link(){
window.open("../www/otherpage.html","_self");
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components\bootstrap\dist\css\bootstrap.min.css">
<script src="bower_components\jquery\dist\jquery.min.js"></script>
<script src="bower_components\bootstrap\dist\js\bootstrap.min.js"></script>
<script src="/www/js/index.js"></script>
<style>
body {
font: 20px sans-serif;
line-height: 1.8;
color: #f5f6f7;
background-color: #0068ff;
}
p {font-size: 16px;}
.margin {margin-bottom: 40px;}
.bg-1 {
background-color: #0068ff;
color: #FFFFFF;
}
</style>
</head>
<body>
<!-- First Container -->
<div class="container-fluid bg-1 text-center">
<center><h1>This is a Title<br>Hello!</h1><div id="logo">Blinking message</div></center>
</div>
</body>
</html>
- Third step: I've written in the cmd:
phonegap build android
- Fourth step: I've tested the apk in my tablet and my phone, but the message doesn't blink and the page doesn't goes on by linking me to the other html page. What's wrong?Thanks!!!

Related

Cannot remove the svelte default "Hello World" from the page

EDIT: It turns out it was only an issue on my computer, but an explanation would still be helpful if you have one. Thanks again!
I am attempting to create a development page for a website I am working on, and have a blank index.html page that redirects you to the development page. This all works as intended. I am using svelte to make things easier in future, however, when I deploy it, the svelte "Hello World" that shows up upon creating a new svelte project keeps appearing on top of the development page HTML. The odd thing about this is that it only happens when I deploy it, not when I load up the static HTML, not when I load up a local server. It doesn't even show up if I don't use a custom domain name. I am using cloudflare pages and cloudflare to redirect the domain name to the cloudflare page. My domain is registered with GoDaddy, if that at all matters.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Book Planet UK</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/public/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
app.js
window.onload = function() {
window.location.replace("under-construction/under-construction.html");
}
under-construction/under-construction.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Book Planet UK</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='under-construction.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
<script src="under-construction.js"></script>
<div class="overlay">
<h1 class="title">Book Planet UK is currently undergoing development.</h1>
<span class="title">We are hoping to be back by 2023, so hold tight until then! 🚀️</span>
<br>
<button onclick="location.href = '/public/staff/index.html';">Staff Login</button>
</div>
</body>
</html>
under-construction/under-construction.css
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
* {
background-image: url("https://webgradients.com/public/webgradients_png/008%20Rainy%20Ashville.png");
}
.title {
background: transparent;
font-family: 'Roboto', sans-serif;
padding-top: 20px;
padding-left: 5%;
padding-right: 5%;
}
.overlay {
background: rgba(240, 248, 255, 0.375);
border-radius: 10px;
padding-left: 5%;
padding-right: 5%;
width: auto;
max-width: max-content;
height: auto;
}
button {
background: transparent;
font-family: 'Roboto', sans-serif;
width: 20%;
height: 35px;
color: #242024;
border: 2px solid #242024;
border-width: 2px;
margin-left: 5%;
align-items: center;
border-radius: 3px;
margin-top: 25px;
margin-bottom: 25px;
transition: 0.25s ease;
}
button:hover {
transform: scale(1.05);
cursor: pointer;
}
src/app.svelte
<script lang="ts">
</script>
<main>
</main>
<style>
</style>
The non-custom-domain website is deployed at https://book-planet-uk.pages.dev/.
The domain is https://bookplanetuk.co.uk/. I get the feeling that this may be a "its on my machine" kinda thing, so let me know if it doesn't appear for you on the domain. I have restarted my computer just to check.
Thank you in advance for any and all help!
Your code is linked via the path /build/bundle.js, this looks like the path will remain the same, even if the code changes. That can easily lead to caching issues, where browsers will not get a newer version of the code.
To prevent this, build systems often add a hash to the file name or to a query string, so the URL will be different and the browser will get the new file. Would recommend doing something along those lines.
(This also applies to other resources like CSS.)
Remove the reference to bundle.js.

How to change background from static jpg to animated gif picture, but only after script done

Theres full html code.
Hope somebody help me with it. Please.
Need to change background image to another one, but only when Curves script be doned.
Trying to find answer by google, but cant.
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<style>
body {
background: #141414 url(Wallpaper.jpg);
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
<script src="Modernizr/modernizr-2.0.6.js"></script>
<script type="text/javascript">
Theres some script things
<title>HTML5 Canvas Generative Art</title>
<style type="text/css">
body {background-color:#141414; overflow: hidden;}
#caption {position:absolute; width:1360px; text-align:center; top:688px; z-index:1}
canvas {}
#displayCanvas {position:absolute; top:0px; left:0px; z-index:0;}
div {}
#container {width:1360px; height:688px; margin:auto;}
</style>
</head>
<body>
<div id="container">
<canvas id="displayCanvas" width="1360px" height="688">
Your browser does not support HTML5 canvas.
</canvas>
</div>
</body>
</html>
full html code in Drive Google:
link
Place your code at the bottom of your document. And any external js files you're loading, put them above the below script tag. That should work for you.
<script type="text/javascript">
// window.onload will ensure the document is fully loaded before running the below script
window.onload = (event) => {
// Your other scripts you'd like to execute before changing the background
// Code to change background
document.body.style.background = "url('new_image.gif')";
};
</script>
Update:
Your mark up is not properly created. Keeping the tags consistent and putting the relevant tags within head and body is a good practice. Refer to the code below.
// window.onload will ensure the document is fully loaded before running the below script
window.onload = (event) => {
// Your other scripts you'd like to execute before changing the background
// Code to change background
document.body.style.background = "url('https://i.imgur.com/cCqp22b.gif')";
};
body {
background: #141414 url(Wallpaper.jpg);
}
body {
background - color: #141414;
overflow: hidden;
}
# caption {
position: absolute;
width: 1360 px;
text - align: center;
top: 688 px;
z - index: 1
}
canvas {}
# displayCanvas {
position: absolute;
top: 0 px;
left: 0 px;
z - index: 0;
}
div {}
# container {
width: 1360 px;
height: 688 px;
margin: auto;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Canvas</title>
<script src="Modernizr/modernizr-2.0.6.js"></script>
</head>
<body>
<p>...</p>
<div id="container">
<canvas id="displayCanvas" width="1360px" height="688">Your browser does not support HTML5 canvas.
</canvas>
</div>
</body>
</html>
You can set the style.background property using JavaScript after the script is loaded.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("paper.gif");
background-color: #cccccc;
}
</style>
</head>
<body>
<!--Load some script here-->
<script>
setTimeout(()=>document.body.style.background = "url('https://i.pinimg.com/originals/f4/52/a2/f452a2f4b634b3011e065da8eaf0a5c3.gif')",1500);//simulate waiting
</script>
</body>
</html>

full page image with animated transition

I am trying to make a fade in- fade out transition between two pages with full screen images. Currently I'm trying to achieve this with the swup plugin.
I can achieve a new full screen image on each page by setting a class on every html, like:
<!DOCTYPE html>
<html lang="en" class="home_bg">
<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">
<link rel="stylesheet" href="style.css">
<title>Home</title>
</head>
<body>
<nav>
Home
About
</nav>
</body>
</html>
And css:
*{
margin: 0;
padding: 0;
}
.home_bg {
background: url(img/landscape.jpg) no-repeat center center fixed;
background-size: cover;
}
.about_bg {
background: url(img/ocean.jpg) no-repeat center center fixed;
background-size: cover;
}
nav{
font-size: 24px;
}
Html for the transition:
<!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">
<script defer src="node_modules/swup/dist/swup.min.js"></script>
<script defer src="script.js"></script>
<link rel="stylesheet" href="style.css">
<title>Home</title>
</head>
<body>
<nav>
Home
About
</nav>
<main id="swup" class="transition-fade">
<h1>This is home</h1>
</main>
</body>
</html>
And the css:
*{
margin: 0;
padding: 0;
}
nav{
font-size: 24px;
}
.transition-fade{
opacity: 1;
transition: 500ms;
}
html.is-animating .transition-fade {
opacity: 0;
}
There is also one line js for the transition:
const swup = new Swup();
My problem is I can't seem to get these two to work together. I either get the full image pages OR the transition, not the full image pages WITH transition. The problem seems to lie in the fact that the image has to be within the "swup". But every time I try to put my image there, I lose control over its size and proportions, even if I give it a class of its own.
Now I have tried about a zillion things and I have tried to google this for a few days but no luck. I have only been working with html, css and js with this. Should I be looking elsewhere?
Any help here is highly appreciated.
Thanks
I finally managed to solve this. It may not be the best solution, so if you have a better one, please let us know.
I added this html-part below the navigationbar:
<main id="swup" class="transition-fade">
<div class="background-parent">
<div class="background-home"></div>
</div>
</main>
And in the css:
.background-home {
width: 100%;
height: 100%;
background: url(img/landscape.jpg) no-repeat center center fixed;
background-size: cover;
}

Is it possible to force set cursor col-resize with pure css

I have an issue with CSS property cursor on Windows operation system.
It seems that "col-resize" tries to invert the color of cursor depending on background.
The problem appears with gray color because one makes the cursor invisible.
.test {
cursor: col-resize;
background: gray;
width: 100px;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class='test'>
</div>
</body>
</html>

What is preventing my JavaScript from modifying the iframe?

There is an example here where he inserts an iframe where the height of the iframe is changed to be the height of the inserted content. He explains the trick here.
However when I try and do it with my Bootstrap example, then something is preventing the JavaScript from modifying the iframe. height is never added to the iframe.
Question
Can someone see why height isn't added to the iframe, as it is done in the original example?
I am using this as iframe content
wget http://www.456bereastreet.com/lab/iframe-height/iframe-content.html
and my html is
<!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">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
iframe {
width:100%;
margin:0 0 1em;
border:0;
}
#external-frame {min-height:800px;}
body {
padding-top: 70px;
}
.container .jumbotron {
background-color: #ffffff;
padding-right: 0px;
padding-left: 0px;
height: 100%;
margin:0 auto;
}
</style>
<script>
window.onload = function () {
setIframeHeight(document.getElementById('external-frame'));
};
</script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<iframe src="iframe-content.html" frameborder="0" id="external-frame"></iframe>
</div>
</div>
</body>
</html>
This feels too obvious, but it really looks like you just didn't define setIframeHeight or include any script that defines it.
If you want to call a function, obviously you need to have that function.
That's the function, copied from the page you linked to:
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};
Paste it in your script tag and you should be good to go.

Categories

Resources