So, i've been searching in everywhere for a resolution to my problem, but i think i've tried everything but my code is not working at all.
I'm trying to put some text of a txt file in a iframe, and it's actually reading it, but, when i try to change the css, appears the message in the title: "The character encoding of a framed document was not declared."
This is my code:
<!DOCTYPE html>
<html lang = "pt">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
h1{
position: absolute;
left:85px;
top:0px;
}
.LOGO{
position: absolute;
width:70px;
height:70px;
z-index: 2;
}
.portugal{
position: absolute;
top: 65px;
left: 0px;
width:auto;
height:auto;
z-index: 1;
}
.PT01{
position: relative;
top: 438px;
left:560px;
width:20px;
height:20px;
z-index: 3;
}
</style>
</head>
<body>
<script>
var x = document.getElementsByTagName("PT01");
if(x.id == 'PT01'){
$("#div1").css("border-style","none");
$("#div1").css("position",'relative');
$("#div1").css("top",'315px');
$("#div1").css("left",'535px');
$("#div1").css("width",'auto');
$("#div1").css("height",'auto');
$("#div1").css("zIndex",'4');
}
</script>
<img class = "LOGO" src = "http://www.chronopost.pt/sites/all/themes/custom/quimera/favicon.ico"/> <h1> Informações Package Chronopost </h1>
<img class = "portugal" src = "http://s2.thingpic.com/images/HV/9N2YRDXBuosfkppy9Jut8Tvx.png"/>
<img class = "PT01" name = "PT01" src = "http://www.chronopost.pt/sites/all/themes/custom/quimera/favicon.ico"/>
<iframe id='div1' src = "PT01.txt">
</iframe>
</body>
</html>
I hope you can help me with this! I'm just a student and i'm trying to learn more.
Thank you!
Possible duplicate here
You can try this, add this between your iframe tag:
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
Related
I am new to html and css and recently I started making a canvas game. I wish to have an image and align it in the centre of the canvas with HTML. I used the 'position: Absolute' property and could at least put it on the canvas but when I used the 'text-align: centre' property, my position property stopped working and came below the canvas.
So I wanted to know, how I can centre my image on the canvas.
CSS
#startgameimg{
text-align:center;
width: 50px;
display:block;
margin:auto;
position: absolute;
cursor: pointer;
}
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>GAME</title>
<link href = "style.css" rel = "stylesheet">
</head>
<body>
<div style = "text-align: center;">
<canvas
id = "canvas"
height = "560"
width = "800"
style = "border:5px solid rgb(33, 8, 61)"
>Your Browser is Not Supported</canvas>
<div id = 'start'>
<img src = "play.png" alt = "" id = "startgameimg"/>
</div>
</div>
<script src = "script.js" ></script>
</body>
</html>
Please Note: I went through about 5 to 6 Stack Overflow questions regarding the same topic but couldn't find any solution
#startgameimg{
text-align:center;
width: auto;
display:block;
margin:auto;
position: absolute;
cursor: pointer;
top:50%;
left:50%;
transform:translate(-50%, -50%)
}
<div style = "text-align: center; position: reletive">
<canvas
id = "canvas"
height = "560"
width = "800"
style = "border:5px solid rgb(33, 8, 61)"
>Your Browser is Not Supported</canvas>
<div id = 'start'>
<img src = "play.png" alt = "MY IMG" id = "startgameimg"/>
</div>
</div>
I have created a small program with a spinner. Once the url completely loads in the iframe, then the spinner is supposed to disapear. I can get the page to load but I cannot get the spinner to disappear.
Here is my javascript code(I am not sure if the style.display='none' line is valid:
var overlay = document.getElementById("overlay");
window.addEventListener('load', function(){
overlay.style.display = 'none';
})
Here is my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Spinner</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="overlay">
<div class="spinner"></div>
</div>
<iframe width="1120" height="630" src="https://tommcfarlin.com/check-if- a-page-is-in-an-iframe/" frameborder="0" allowfullscreen></iframe>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
Here is my CSS code:
body{
width: 100%;
height: 100%;
overflow: hidden;
}
.spinner{
width: 80px;
height: 80px;
border: 2px solid #f3f3f3;
border-top:3px solid #f25a41;
border-radius: 100%;
position: absolute;
top:0;
bottom:0;
left:0;
right: 0;
margin: auto;
animation: spin 1s infinite linear;
}
#keyframes spin {
from{
transform: rotate(0deg);
}to{
transform: rotate(360deg);
}
}
#overlay{
height:100%;
width:100%;
background:rgba(0, 0, 0, .8);
position:fixed;
left:0;
top:0;
}
I think my issue is in the Javascript but please correct me if I am wrong here.
I have also included a screen print showing that the page is loaded in the background but the spinner is still there.
Thanks in Advance.
I think your script didn't load to your html code so try to change your html code to that code:-
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Spinner</title>
<link rel="stylesheet" href="main.css">
<script>
window.onload = function(){
var overlay = document.getElementById("overlay");
overlay.style.display = 'none';
};
<script>
</head>
<body>
<div id="overlay">
<div class="spinner"></div>
</div>
<iframe width="1120" height="630"
src="https://tommcfarlin.com/check-if- a-page-is-in-
an-iframe/" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Your JS is fine. I am not sure what the exact error is I tried the same on my pc and it seems to work fine. I would suggest you put your script just before the end of body tag or after the end of the overlay div because HTML loads and parses by line, if JS does not find your overlay div it throws an exception and the code breaks.
I have been attempting to have a tab in my cordova app in which a map is shown. I want users to be able to pinch to zoom in and out of the image and pan. I used the latest iScroll build and I wasn't able to get anything to work correctly. I have recently come across this demo
http://lab.cubiq.org/iscroll/examples/zoom/
Which does exactly what I want my app to do and works in my phone's browser. However, when I copied the iscroll.js and source of this demo and pasted it into my app to test it through cordova, I was not able to zoom on my android phone or ios emulator, only pan around. I have achieved the same on the page I actually want to apply this to:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', {
zoom:true,
onBeforeScrollStart:null,
zoomMin:0.25,
zoomStart:0.5,
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<style type="text/css">
html {
-ms-touch-action: none;
}
body {
overflow: hidden;
}
#wrapper {
position: absolute;
z-index: 1;
top: 3px;
bottom: 3px;
left: 3px;
right: 3px;
background: #ccc;
overflow: auto;
}
#scroller {
position:relative;
background: #ccc;
/*-webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:725px;
padding:0;
}
img {
-webkit-transform:translate3d(0,0,0);
}
</style>
</head>
<body Onload="loaded()">
<ons-screen>
<ons-navigator title="Map">
<div id="wrapper">
<div id="scroller">
<!--<iframe src="thing.html" style="width:100%; height:100%"></iframe>-->
<img src="img/map.png"></img>
</ons-page>
</div>
</ons-navigator>
</ons-screen>
</body>
<!--<script src="js/hammer.min.js"></script>
<script src="js/myLogic.js"></script>-->
</html>
If anyone can help me figure out why this works in browser, but not when translated to native code, or how to make it work, I will be forever in your debt.
I have am image on my page and i am changing its image source with java script.
All I need is to change this image with some beautiful sliding effect.
What I want is when i click on a button to change the image, the first image should disappear and another one should show in some some decent way (not like a jerk or blink)
You can put second image behind the first one, and then make fadeout() efect on the first image.
use this code
$(".firstimage_classname").fadeout();
$(".secondimage_classname").fadeIn();
you can give time interval as well.
otherwise try
$(".firstimage_classname").slideUp();
$(".secondimage_classname").fadeIn();
Try This Code
$(".YourClassSelector").fadeIn(1000).delay(2000).fadeOut(2000, function () {
var $next = $(this).attr('src','http://abc.com/logo.png');
});
Hope it would helps you.
Enjoy
Here you go example code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Srtict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.front{
width: 300px;
height: 300px;
position: absolute;
left: 10px;
top: 10px;
z-index: 10;
}
.back{
width: 300px;
height: 300px;
position: absolute;
left: 10px;
top: 10px;
z-index: 1;
}
</style>
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="style_lte6.css" /> <![endif]-->
</head>
<body>
<div id="content">
<img src="1.jpg" class="front" />
</div>
<script type="text/javascript">
$(function(){
$('.front').click(function(){
$('#content').append('<img src="2.jpg" class="back" />');
$(this).fadeOut(500, function(){
$('.front').remove();
$('.back').addClass('front').removeClass('back');
});
});
});
</script>
</body>
</html>
HI
i am using
<input type="file">
it has different UI on IE, Firefox, Chrome and Safari
i want something that can generate same UI on all 4 browser.
Is this possible?
http://pixelmatrixdesign.com/uniform/
Uniform will allow you to easily skin the input element for uploads.
Many browsers (at least recent versions of Firefox) don't allow you to type a filename any more, as a security precaution. You can only select a file graphically. I believe Chrome is the same way.
What sort of UI are you talking about? If you mean another way to select a file... I don't think there's another way (also a security precaution).
this did the work for me :)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
div.fileinputs {
position: relative;
}
img.fakefile, input.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}</style>
<script type="text/javascript">
function HandleFileButtonClick()
{
document.getElementById("xyz").value =document.getElementById("abc").value;
}
</script>
</head>
<body>
<div class="fileinputs">
<input type="file" id="abc" class="file" onchange="HandleFileButtonClick();" />
<input type="text" id="xyz" class="fakefile" />
<img src="browse button.bmp" class="fakefile" style="position: absolute; left: 150; top: 0" width="61" height="22"/>
</div>
</body>
</html>