How to use the following code to overlay the current canvas - javascript

I found this piece of code on this site and want to use it in my project. However I'm not sure how to change this so it doesn't push the contents off the page when opening the menu. Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
if( $(this).text()=="Open")
{
$(this).text("Hide");
}
else
{
$(this).text("Open");
}
$("#panel").slideToggle("fast");
});
});
</script>
<style>
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
width:90px;
height: 200px
}
</style>
</head>
<body>
<button id="flip">Open</button>
<div id="panel">Menu!</div>
</div>
<p>
Something else on the page
</body>
</html>

Related

Code works in JSfiddle, but stops on my webpage [duplicate]

This question already has answers here:
JSFiddle code not working in my own page
(3 answers)
Closed 5 years ago.
Sorry, not quite the same as previously asked versions of this. I've tried those solutions to no avail.
I have worked with some folks to iron out some issues with a snippet we were working on. Finally got it working on JSfiddle how we need it, but for whatever reason, it's not working on a plain HTML site. The content looks to load, but the preview doesnt work after choosing an image.
Here is the JSfiddle working here: http://jsfiddle.net/ELcf6/568/
Here is all of the code pieces compiled into a single page for testing. This is the example that seems to not work. Does JSfiddle inject any pre-requisites that I might be missing?
Any help in figuring this out would be greatly appreciated.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
var filetype = imageLoader.files[0].type;
var reader = new FileReader();
reader.onload = function (event) {
if(filetype.indexOf("image") > -1){
$('.uploader img').attr('src',event.target.result);
}else if(filetype.indexOf("video") > -1){
$('.uploader video')[0].src =reader.result;
}
}
reader.readAsDataURL(e.target.files[0]);
}
</script>
<style type="text/css">
.uploader {
position:relative;
overflow:hidden;
width:300px;
height:350px;
background:#f3f3f3;
border:2px dashed #e8e8e8;
}
#filePhoto{
position:absolute;
width:300px;
height:400px;
top:-50px;
left:0;
z-index:2;
opacity:0;
cursor:pointer;
}
.uploader img,.uploader video{
position:absolute;
width:302px;
height:352px;
top:-1px;
left:-1px;
z-index:1;
border:none;
object-fit:cover;
}
</style>
<title></title>
</head>
<body>
<div class="uploader" onclick="$('#filePhoto').click()">
click here or drag here your images for preview and set userprofile_picture data
<img src=""/>
<video></video>
<input type="file" name="userprofile_picture" id="filePhoto" />
</div>
</body>
</html>
Your script is running before the DOM has loaded and that's why you are getting the "Cannot read property 'addEventListener' of null" error.
Move the script so that it is just before the close of the body tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.uploader {
position:relative;
overflow:hidden;
width:300px;
height:350px;
background:#f3f3f3;
border:2px dashed #e8e8e8;
}
#filePhoto{
position:absolute;
width:300px;
height:400px;
top:-50px;
left:0;
z-index:2;
opacity:0;
cursor:pointer;
}
.uploader img,.uploader video{
position:absolute;
width:302px;
height:352px;
top:-1px;
left:-1px;
z-index:1;
border:none;
object-fit:cover;
}
</style>
<title></title>
</head>
<body>
<div class="uploader" onclick="$('#filePhoto').click()">
click here or drag here your images for preview and set userprofile_picture data
<img src=""/>
<video></video>
<input type="file" name="userprofile_picture" id="filePhoto" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
var filetype = imageLoader.files[0].type;
var reader = new FileReader();
reader.onload = function (event) {
if(filetype.indexOf("image") > -1){
$('.uploader img').attr('src',event.target.result);
}else if(filetype.indexOf("video") > -1){
$('.uploader video')[0].src =reader.result;
}
}
reader.readAsDataURL(e.target.files[0]);
}
</script>
</body>
</html>

Fade in/out doesn't work with an append div

Tried the best I could and did some research, I still couldn't figure it out.
My goal is to create an easy coded lightbox for a part of my final examination website that im working on.
Please need help with this annoying problem of mine, would be very appreciated!
$(document).ready(function () {
$('button').click(function() {
$('body').append(' <div id="lb-shadow"><p id="lb-x">[ x ]</p></div> ');
$('body').append(' <div id="lb-container"></div> ');
$('#lb-shadow').fadeIn(6000 );
$('#lb-container').fadeIn(6000);
$('#lb-shadow').click(function(){
$('#lb-container').fadeOut(6000);
$('#lb-shadow').fadeOut(6000);
$('#lb-container').detach();
$('#lb-shadow').detach();
});
});
});
#lb-btn{
position:absolute;
outline:0;
border:0;
padding:5px 10px;
cursor:pointer;
background-color:black;
}
#lb-btn p{
padding:5px;
color:#ccc;
border:1px solid white;
}
#lb-shadow{
position:absolute;
left:0;
right:0;
height:100%;
width:100%;
background-color:rgba(0, 0, 0, 0.7);
}
#lb-x{
color:#ccc;
text-transform:uppercase;
float:right;
margin:15px;
cursor:pointer;
transition: ease .3s;
}
#lb-x:hover{
color:white;
}
#lb-container{
position:absolute;
height:400px;
width:600px;
left:calc(50% - 300px);
top:calc(50% - 200px);
background-color:white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min hemsida</title>
<link rel="stylesheet" type="text/css" href="css/cindex.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/cindex.js"></script>
</head>
<body>
<button id="lb-btn"><p> Login / Register </p></button>
</body>
</html>
If the problem is the click handler, try attaching the event listener globally like so, this way should work even if the element is created after the listener. (Otherwise the duplicate comment on your question should solve the issue)
$(document).ready(function () {
$(document).on('click', '#lb-shadow', function(){
$('#lb-container').fadeOut(6000);
$('#lb-shadow').fadeOut(6000);
$('#lb-container').detach();
$('#lb-shadow').detach();
});
$('button').click(function() {
$('body').append('<div id="lb-shadow"><p id="lb-x">[ x ]</p></div>');
$('body').append('<div id="lb-container"></div>');
$('#lb-shadow').fadeIn(6000);
$('#lb-container').fadeIn(6000);
});
});
I solved it!
I just added display:block on the lb-container and lb-shadow. Apperently the fade effects trigger it automatically and I did cut down my js code aswell.
$(document).ready(function () {
$('button').click(function() {
$('body').append(' <div id="lb-shadow"><p id="lb-x">[ x ]</p></div> ');
$('body').append(' <div id="lb-container"></div> ');
$('#lb-shadow').fadeIn();
$('#lb-container').fadeIn();
$('#lb-shadow').click(function(){
$('#lb-container').fadeOut();
$('#lb-shadow').fadeOut();
});
});
});

How to use styles on content that has been generated by JS

I'm trying to change the color of the .box div(s) in the :hover selector, I can only get this to work when I put an !important flag next to the CSS rule. Is there a cleaner way of doing this?
<!DOCTYPE html>
<html>
<head>
<style id="styles" type="text/css">
.box:hover {
background-color:blue;
}
</style>
</head>
<body onload="init()">
<script type="text/javascript">
function init() {
for (var i=0;i<500;i++) {
document.body.innerHTML += "<div class='box' style='display:block;width:100px;height:100px;background-color:red;float:left;'></div>";
}
}
</script>
</body>
</html>
Styles defined in the style="..." attribute have higher specificity than anything defined in stylesheets.
You should instead define your styles like this:
<style>
.box {
display:block;
width:100px;
height:100px;
background-color:red;
display:inline-block; /* better than float:left for your usage */
}
.box:hover {background-color:blue}
</style>
You should also never use += with .innerHTML.
for( var i=0; i<500; i++) {
document.body.appendChild(document.createElement('div')).className = "box";
}
Don't use the styles in inline.. Try like below...
<!DOCTYPE html>
<html>
<head>
<style id="styles" type="text/css">
.box{
display:block;
width:100px;
height:100px;
background-color:red;
float:left;
}
.box:hover {
background-color:blue;
}
</style>
</head>
<body onload="init()">
<h1>HELLO!</h1>
<script type="text/javascript">
function init() {
for (var i=0;i<500;i++) {
document.body.innerHTML += "<div class='box'></div>";
}
var content = document.getElementById('styles').innerHTML;
document.getElementById('styles').innerHTML = content;
}
</script>
</body>
</html>
Note: when you apply a style from script it can be only overwritten by using !important.

jQuery sliding to remove div bar

Ok so I wanted to practice some jQuery and to do it I thought I would make the animation that Jay-Z uses on his new album commercials, he has a bar over his name and it slides left while also disappearing. On top of that I wanted the text to fadeOut, fadeIn, and then fadeOut again to give it a flashing effect before it disappeared. Can someone help me with this :l, I got the layout done but the jQuery just wont work..
<!DOCTYPE html>
<html lang="en">
<head>
<title>Magna Carta</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#bar').delay(800).css('padding-left', 0+'px');
$('#main p').fadeOut('slow' function(){
$('#main p').fadeIn('slow' function(){
$('#main p').fadeOut('slow');
});
});
});
</script>
<style type="text/css">
body {
background-color:#f2f2f2;
margin:0px;
padding:0px;
}
#main {
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-150px 0 0 -150px;
text-align:center;
}
#main p {
font-family:Admisi Display SSi;
font-size:64px;
}
#bar {
padding-left:180px;
height:25px;
background-color:black;
position:absolute;
z-index:2;
margin-top:87px;
margin-left:61px;
}
</style>
</head>
<body>
<div id="main">
<center>
<div id="bar"></div>
</center>
<p>JAY-Z</p>
</div>
</body>
</html>
You need to use the animate function here (before you were just setting the padding-left to 0, which happens immediately) and you have to fix your fadeOut and fadeIn callback functions:
$(document).ready(function () {
$('#bar').delay(800).animate({
'padding-left':0
}, 1000, function () {
// Animation complete.
$('#bar').delay(800).css('padding-left', 0 + 'px');
$('#main p').fadeOut('slow', function () {
$('#main p').fadeIn('slow', function () {
$('#main p').fadeOut('slow');
});
});
});
});
Demo: http://jsfiddle.net/BjBry/1/

Why won't my canvas draw?

My canvas element isnt working right. It wont draw a rectangle. Please help me diagnose the problem. I don't know where the problem is, is it my css, javascript, or html? Did I set up everything right because I got no errors when i ran my debugger and put it on a server?
index.html
<!DOCTYPE html>
<html>
<head>
<title>Paco Developement</title>
<link rel="stylesheet" href="style.css" />
<script src="game.js"></script>
</head>
<body>
<canvas id="canvasBg" height="500" width="800"></canvas>
<canvas id="character" height="500" width="800"></canvas>
</body>
</html>
style.css
* {
padding:0px;
margin:0px;
}
header, section, footer, aside, nav, article, figure, hgroup{
display:block;
}
body {
background:#BADA55;
width:100%;
height:100%;
}
#canvasBg {
display:block;
background:#fff;
margin:100px auto 0px;
}
#character {
display:block;
margin:-500px auto 0px;
}
game.js
var canvasBg = document.getElementById('canvasBg');
var bgCtx = canvasBg.getContext("2d");
document.addEventListener('load',drawRect,false);
function drawRect(){
bgCtx.fillStyle="#FF0000";
bgCtx.fillRect(0,0,150,75);
}
Live Demo
Change document to window for your event listener and it should work for you.
window.addEventListener('load',drawRect,false);

Categories

Resources