website works in some browsers but not all - javascript

why would my website work on my phone but not on my computer i tried all IE chrome Fire fox and i cant seem to download an image from div but when i use my phone it works fine (chome only). what is happening? here is my website https://torcdesign.com/mom can someone help me find a solution for it to work in all browsers
var download = document.getElementById("download"),
result = document.getElementById("result");
function renderContent() {
html2canvas(document.getElementById("content"), {
allowTaint: true
}).then(function(canvas) {
result.appendChild(canvas);
download.style.display = "inline"; download.href = result.children[0].toDataURL();
});
}
function downloadImage() {
}
document.getElementById("button").onclick = renderContent;
download.onclick = downloadImage
#content {
position: absolute;
width: 300px;
height: 200px;
border: 5px solid red;
overflow: hidden;
}
#img1 {
width: 300px;
height: 200px;
position: absolute;
z-index: 5;
}
#img2 {
position: absolute;
z-index: 6;
width: 150px;
height: 190px;
}
#img3 {
position: absolute;
z-index: 7;
width: 200px;
height: 100px;
}
#download {
display: none;
}
<script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"></script>
<div id="content">
<img id="img1" src="https://torcdesign.com/shirts/brown.jpg">
<img id="img2" src="https://torcdesign.com/shirts/kiwi.jpg">
<img id="img3" src="https://torcdesign.com/shirts/lswhite.jpg">
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<input id="button" type="button" value="convert div to image"><br>
<h3>result:</h3>
<div id="result"></div>
<a id="download" download="my_image.png" href="#">Download image</a>

I think you may have to update most of your browsers. According to this reference the download attribute of the a tag is supported by different versions of different browsers.

Related

Trying to start/trigger an iframe with a JS game only when needed in my HTML5 page

I've learned the basic of HTML5, CSS and a little of JS.
I'm trying to make a site where I can show my projects and knowledge.
The thing is, I want to put 2 JS games that I made in the page, but I don't want them to load instantly with the page. so, I would like it to load only when I click on it.
The game: https://editor.p5js.org/snufupugos/full/jm8j5k5pC
How I got it on the page:
<section class="games"> <iframe src="https://editor.p5js.org/snufupugos/embed/jm8j5k5pC" class="freeway" title="Remake Freeway"></iframe> </section>
The CSS:
.freeway{
background-color:rgba(0, 0, 0, 0.1);
width: 500px;
height: 400px;
margin: 2em auto;
border: 2px solid #801edb;
border-radius: 50px;
border-width: thick;
padding: 5px 5px;
}
My first Idea was to use an image, and then the hover to transform to the iframe, but I think it is not possible since it did not work.
Anyway, can someone help me with this? Any Idea how to do it?
Thank you.
function start(){
document.getElementById("frame").src = "https://editor.p5js.org/snufupugos/embed/jm8j5k5pC";
document.getElementById("imgs").remove();
var news = document.createElement("img");
news.setAttribute('id', 'stop');
news.setAttribute('onclick', 'stop();');
news.setAttribute('class', 'button');
news.setAttribute('width', '25px');
news.setAttribute('src', 'data:image/png;base64,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');
var element1 = document.getElementById("top");
element1.appendChild(news);
}
function stop(){
document.getElementById("frame").src = "";
document.getElementById("stop").remove();
var neww = document.createElement("img");
neww.setAttribute('id', 'imgs');
neww.setAttribute('onclick', 'start();');
neww.setAttribute('class', 'button');
neww.setAttribute('src', 'data:image/png;base64,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');
var element = document.getElementById("center");
element.appendChild(neww);
}
.border{
width: 500px;
height: 400px;
margin: 2em auto;
position: relative;
z-index: 9999999999;
}
.freeway{
width: 500px;
height: 400px;
background-color:rgba(0, 0, 0, 0.1);
border: 2px solid #801edb;
border-radius: 50px;
border-width: thick;
}
.show{
display: block;
}
.container {
position: absolute;
text-align: center;
z-index: -1;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.button {
cursor: pointer;
border: none;
}
.top-right {
position: absolute;
top: 11px;
right: 40px;
}
<section class="games">
<div class="border">
<div class="container">
<iframe src="" id="frame" class="freeway"></iframe>
<div id="top" class="top-right"></div>
<div id="center" class="centered">
<img class="button" src="data:image/png;base64,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" onclick="start();" id="imgs"/>
</div>
</div>
</div>
</section>
<script>
window.addEventListener("keydown", function(e) {
// space and arrow keys
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
e.preventDefault();
}
}, false);
</script>
Try this!

How to get image size with jquery (Chrome, Safari...)

I am a jquery beginner and I need to get the height of an image by jquery.
This is the code I use:
$(document).ready(function ($) {
var height = $('#testor').height();
$('.slider-container').css("height", height);
});
This is the html code:
<div class="slider-container">
<button type="button" id="slider-left">Left</button>
<button type="button" id="slider-right">Right</button>
<div class="slider-image" ><img src="http://xxxx.jpg" class="alignnone size-medium wp-image-1558 testor" id="testor" /></div>
<div class="slider-image"><img src="http://xxx.jpg" class="alignnone size-medium wp-image-1557 testor" /></div>
<div class="slider-image"><img src="http://xxx.jpg" class="alignnone size-medium wp-image-1556 testor" /></div>
</div>
And the css:
.slider-image {
position: absolute;
width: 100%;
}
.slider-image img{
width: 100%;
height: auto;
}
.inline-block {
display: inline-block;
}
.slider-container {
position:relative;
width: 100%;
overflow: hidden;
}
#slider-left {
position: absolute;
top: 50%;
z-index: 1;
}
#slider-right {
position: absolute;
top: 50%;
right: 0;
z-index: 1;
}
It's working fine with Firefox and IE but not in Chrome and Safari.
I found out that it is a problem with webkitbrowser.
Often it is suggested to use $(window).load instead of $(document).ready but that also doesn't work.
Does anyone have an idea how to fix it. I tried for two days to find a solution and don't know what to do now.
Best reagards
Mythos
$(document).ready(function ($) {
var myimage = document.getElementById("testor");
var w = myimage.width;
var h = myimage.height;
//Assign the variable to your jquery css
$(".slider-container").css("height",h);
});
JSfiddle
Attach load event to <img> element at .ready(); call .height() within load event handler, as the element may not be fully loaded if .height() is called before load event completes and could return 0
.slider-image {
position: absolute;
width: 100%;
}
.slider-image img {
width: 100%;
height: auto;
}
.inline-block {
display: inline-block;
}
.slider-container {
position: relative;
width: 100%;
overflow: hidden;
}
#slider-left {
position: absolute;
top: 50%;
z-index: 1;
}
#slider-right {
position: absolute;
top: 50%;
right: 0;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
$(document).ready(function($) {
$('#testor').on("load", function() {
var height = $(this).height();
console.log(this.complete);
alert(height);
$('.slider-container').css("height", height);
console.log(".slider-container height:",
$('.slider-container').css("height"));
})
});
</script>
<div class="slider-container">
<button type="button" id="slider-left">Left</button>
<button type="button" id="slider-right">Right</button>
<div class="slider-image">
<img src="http://lorempixel.com/100/100/" class="alignnone size-medium wp-image-1558 testor" id="testor" />
</div>
<div class="slider-image">
<img src="" class="alignnone size-medium wp-image-1557 testor" />
</div>
<div class="slider-image">
<img src="" class="alignnone size-medium wp-image-1556 testor" />
</div>
</div>

Transitions with overlaps

So I have two divs which are overlapping, set by my CSS as shown below.
HTML:
<body onLoad="present();">
<div class="pre-wrap">
<img src="images/logo.png" id="logo" alt="Pre Logo" style="display: table; margin: 0 auto;" />
</div>
<div class="wrap">
<p>Test</p>
</div>
</body>
CSS:
.pre-wrap {
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
background-color: red;
visibility: visible;
}
.wrap {
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
background-color: black;
visibility: hidden;
}
I would like, when the body has loaded, a function to load which does the following: Fades in the image found in the div .pre-wrap, after displaying it for a few seconds, it will fade the image out and the div .pre-wrap will have it's visibility set to hidden. The second div .wrap will then fade in all of its contents.
I tried some simple JS but didn't achieve what I was after.
This question I would say is unique because it has overlapping divs which need visibilities being changed. Please note the overlapping already works, it's just the javascript fading that needs doing.
I tried the following JS which is very simple and works on other projects I've done however it doesn't on this one.
function present() {
$("#logo").fadeIn(3000);
}
Here is my code. I removed the property visibility in the css. And set the display of #logo to none. The attribute onload in the body is no longer needed.
var fadeTime = 3000; // Time for fading
var waitingTime = 5000; // Time how long image is visible
$(window).ready(function(){
$("#logo").fadeIn(fadeTime);
setTimeout(function(){
$(".pre-wrap").fadeOut(fadeTime);
$(".wrap").delay(fadeTime).fadeIn(fadeTime);
},fadeTime+waitingTime);
});
.pre-wrap, .wrap{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 700px;
width: 900px;
opacity: 1.0;
margin: auto;
}
.pre-wrap {
background-color: red;
}
.wrap {
background-color: black;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pre-wrap">
<img src="images/logo.png" id="logo" alt="Pre Logo" style="display: none; margin: 0 auto;" />
</div>
<div class="wrap">
<p>Test</p>
</div>

How to make a overlay fit in another image

I currently have working system where you check the checkboxes it overlays the image however, the problem I am having is getting the image postioned inside the computer screen so it's not on the very edge. Cany Anyone help with this?
<html><head>
<style>
.overlay {
display: none;
position: absolute;
}
.right {
position: absolute;
right: 0px;
width: 300px;
border:3px solid #8AC007;
padding: 10px;
}
#map {
position: relative;
right: -780px;
width: 452px;
height: 344px;
background: url(BLANK-COMPUTER-SCREEN.png);
}
#station_A { top: 5px; left: 85px }
#station_B { top: 150px; left: 180px }
.hover { color: green }
</style>
<div id="map" >
<span id="station_A" class="overlay"><img style="background:url(/BLANK-COMPUTER-SCREEN.PNG)" src="/tn_WhiskersPrinceworkup.png" /></span>
<span id="station_B" class="overlay">Highlight image here.</span>
</div>
<p>
<h2>Choose a Shirt</h2>
<form>
<input type="checkbox" name="image" value="station_A">Station Alfa<br>
<input type="checkbox" name="image" value="station_B">Station Beta
<input type="checkbox" name="image" value="bandanna" id="checkbox1">Bandanna
</form>
</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("input[type='checkbox']").change(function () {
var state = $(this).val();
$("#" + state).toggleClass("overlay");
});
$('#checkbox1').change(function () {
if (this.checked) $('#map').fadeIn('slow');
else $('#map').fadeOut('slow');
});
});
</script>
Fiddle is here.
you need to set the position:absolute to your #station_A and #station_b instead of .overlay, because you use .overlay to toggle in jQuery, so it will loose the property.
here is a snippet:
$(document).ready(function() {
$("input[type='checkbox']").change(function() {
var state = $(this).val();
$("#" + state).toggleClass("overlay");
});
$('#checkbox1').change(function() {
if (this.checked) $('#map').fadeIn('slow');
else $('#map').fadeOut('slow');
});
});
.overlay {
display: none;
}
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #8AC007;
padding: 10px;
}
#map {
position: relative;
/*right: -780px; removed for demo purposes */
width: 452px;
height: 344px;
background: url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png) no-repeat;
}
#station_A {
top: 8%; /* whatever you like */
left: 5%; /* whatever you like */
position: absolute;
}
#station_B {
top: 45%; /* whatever you like */
left: 15%; /* whatever you like */
position: absolute
}
.hover {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="map">
<span id="station_A" class="overlay"><img style="background:url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png)" src="//lorempixel.com/270/240" /></span>
<span id="station_B" class="overlay">Highlight image here.</span>
</div>
<p>
<h2>Choose a Shirt</h2>
<form>
<input type="checkbox" name="image" value="station_A">Station Alfa
<br>
<input type="checkbox" name="image" value="station_B">Station Beta
<input type="checkbox" name="image" value="bandanna" id="checkbox1" />Bandanna
</form>
</p>
The issue was due to a z-index problem I moved the image to the front and the button works fine now after this css change.
#VneckTshirtImage
{
left: 138px;
top: 457px;
position: absolute;
width: 118px;
height: 174px;
z-index:28;
}

IE 9, 10: div structure and events

I have a not so complicated <div> structure, which breaks event handlers in IE < 11 (other major browsers like Chrome and Firefox are working).
<div id="container">
<div id="layer">
<div id="layer1">
<img src="http://sopos.org/olli/blindbild.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" />
</div>
</div>
<div id="controls">
<div id="controller"></div>
<input id="slider" type="range" />
</div>
<div id="thumbnailer">
<img src="http://sopos.org/olli/blindbild-thumb.png" />
<div id="viewArea"></div>
</div>
</div>
These are the registered event handlers:
$(function () {
var stopPropagation = function (e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
}
$('#controller').on('mousedown', function (e) {
console.log('controller mousedown');
});
$('#controls').on('mousewheel', function (e) {
console.log('controls mousewheel');
stopPropagation(e);
return false;
});
$('#thumbnailer').on('click', function (e) {
console.log('thumbnailer clicked');
});
$('#viewArea').on('click', function (e) {
console.log('viewarea click');
stopPropagation(e);
return false;
});
$('#viewArea').on('mousedown', function (e) {
console.log('viewarea mousedown');
stopPropagation(e);
return false;
});
$('#slider').on('change', function (e) {
console.log('slider change');
stopPropagation(e);
return false;
});
});
The main problem seems to be CSS positioning and sizing:
#layer {
position: absolute;
top: -175.813008130081px;
left: -578.615px;
width: 1421px;
height: 875px;
}
#layer1, #layer1 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#controls {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#thumbnailer {
background-color: rgba(150, 150, 150, 0.7);
border: 1px solid rgb(150, 150, 150);
position: absolute;
bottom: 15px;
right: 10px;
width: 200px;
height: 123px;
}
#thumbnailer img {
width: 100%;
height: 100%;
}
#viewArea {
position: absolute;
top: 25px;
left: 81px;
border: 1px solid #f00;
width: 56%;
height: 56%;
}
#controller {
width: 100%;
height: 100%;
}
#slider {
position: absolute;
bottom: 10px;
left: 200px;
}
In IE < 11, any click or mousedown on viewArea remains unhandled; instead, an event on thumbnailer is fired. Similarily, the mousewheel event on controls and the mousedown on controller don't get handled. The mousewheel event get's fired when the cursor is over the slider element, though.
This strange behaviour seems to be rooted in the size of the two images. However, my application needs to display bigger images in a relative small container (hence overflow: hidden set).
I created a fiddle for that.
The problem seems to be that IE < 11 doesn't trigger events on empty <div>. Adding a transparent <img> to the div solves the problem:
<div id="container">
<div id="layer">
<div id="layer1">
<img src="http://sopos.org/olli/blindbild.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" />
</div>
</div>
<div id="controls">
<div id="controller">
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="width:100%; height:100%;">
</div>
<input id="slider" type="range" />
</div>
<div id="thumbnailer">
<img src="http://sopos.org/olli/blindbild-thumb.png" />
<div id="viewArea">
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="width:100%; height:100%;">
</div>
</div>
</div>

Categories