I am trying to set up a image to a canvas but I am not able to do it. I am not able to find any mistake. The canvas comes up on the inspect element but the image is not setting up.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="CSS/styling.css">
<script src="JavaScript/setImage.js"></script>-->
</head>
<body>
<canvas id="canvas" style="color: #0cff15; -webkit-background-image: url(/cheque.jpg)" ></canvas>
</body>
</html>
You don't style a canvas element like a div. You have to get its context via javascript and draw into it. Search for "mdn canvas" for documentation and read a bit.
You can set background image using css and you should give width and height property as well. Please see my demo below.
#canvas{
color: #0cff15;
background-image: url("http://www.backgroundsy.com/file/dust-background.jpg");
-webkit-background-image: url("http://www.backgroundsy.com/file/dust-background.jpg");
border:1px solid black;
width:500px;
height:500px;
}
<canvas id="canvas"></canvas>
Related
I am trying to add CSS property inside the Air-Table iframe but CSS didn't reflect.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe class="airtable-embed" id="calender" src="https://airtable.com/embed/shriqTxajodBzOTYb?backgroundColor=teal&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#calender').on('load', function() {
$("iframe").contents().find("#embedBottomBarContainer").css("display", "none");
});
});
</script>
If I remember correctly, you can only affect the Style of the IFrame if it comes from the same Server as your Website because of the same-origin policy.
So that's probably the problem. You're trying to change the Style of a not same-origin IFrame
I am trying print my page automatically using jQuery.But problem is red dot circle appear.So how to remove them ?3
This is my html file look like
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
Hello From Other side
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
window.onload = function () {
window.print();
}
</script>
</body>
</html>
So i want to remove that red dot circle part like url name and title Name.
Please Try this from this link How to remove the URL from the printing page?
<style media="print">
#page {
size: auto;
margin: 0;
}
</style>
its a browser default behaviour. you should unchecked the header checkbox
Just started with GSAP Tweenmax, but i ran in some issues. Probably it's a stupid mistake i made, but i can't figure it out.
When i run this code on Codepen it works, but when i run it from my webserver it doesn't do anything.
HTML:
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!--CDN links for TweenLite, CSSPlugin, and EasePack-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="./js/main-test.js"></script>
<style>
#svg{position: absolute;}
</style>
</head>
<body>
<div id="svg"><p>testtesttesttest</p></div>
</body>
</html>
And this is the js:
var anim = document.getElementById('svg');
TweenMax.to(anim, 2, {left:"100px"})
Can someone please tell me what i'm doing wrong?
Thank you,
Michael
I already found the issue, i loaded the js script in the header.
The only thing i needed to do was to replace the script at the end of the html file so it could find the 'id' of the div to animate.
So I am developing my first responsive full width image slider in JQuery.
I've been working with JQuery before but never image sliders so I am not sure if its my code that is corrupt or if its the cycle2 that is playing a game with me.
So the issue I am having is that when I open my webpage to see the slider itself its not showing the pictures. I am leaning against the idea of the cycle2 file being outdated or something but I cant know for sure unless someone who uses it alot can confirm it.
To me my code looks perfect, I cant find any issues since it is such a short code.
Here is what my issue looks like http://imgur.com/3QUUbpc
And here is the source code for my file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script type="text/javascript src="C:\Users\user\Desktop\Development\Full Width Slider Varga\js\jquery.js"></script>
<script type="text/javascript src="C:\Users\user\Desktop\Development\Full Width Slider Varga\js\jquery.cycle2.min.js"></script>
</head>
<body>
<div class="cycle-slideshow">
<img src="C:\Users\User\Desktop\Development\Full WIdth Slider Varga\images\Untitled.png">
<img src="C:\Users\User\Desktop\Development\Full WIdth Slider Varga\images\wp.png">
<img src="C:\Users\User\Desktop\Development\Full WIdth Slider Varga\images\wp2.png">
</div>
</body>
</html>
Try this code out:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
</head>
<body>
<div class="cycle-slideshow">
<img src="images/Untitled.png">
<img src="images/wp.png">
<img src="images/wp2.png">
</div>
</body>
</html>
https://jsfiddle.net/1qjgwz31/
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div style="background-image: url('images1.jpg');width:800;height:300;border:1px solid black">
<iframe scrolling="auto" allowtransparency="true" name="main" style="width:100%;height:90%;"> </iframe>
</div>
</BODY>
</HTML>
I need to add background image to iframe. so i tried to add background image to iframe but i cant .. so i did it using div tag as above.
Its works properly in firefox but not in IE. Please help me if u known this
You can with background-image in css
iframe{
background:url(http://www.hindsightfishing.com/images/waves_bg.jpg) no-repeat left top
}
Demo here http://jsfiddle.net/9tndk/