We Keep Coding

Spoltight script not working on the mobile version

I'm using a script to have a spotlight effect. In the web version it follows the cursor, in the mobile version should it remain static at the center of the page but when I try to fix it there something weird happen and it seems like it goes below something and it's visible only in the upper part of the website.
www.civitonia.com
CSS:
.spotlight {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
background-image: radial-gradient(circle at 50% 50%, transparent 160px, rgba(0, 0, 0, 0.85) 200px);
}
#media only screen and (min-width: 800px) {
.spotlight {
position: fixed;
background-image: radial-gradient(circle at 50% 50%, transparent 160px, rgba(0, 0, 0, 0) 200px);
}
}
Script:
<script>
window.addEventListener("DOMContentLoaded", ()=>{
const spotlight = document.querySelector('.spotlight');
let spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)';
//attach mousemove event listener if media query matches.
if (matchMedia('only screen and (min-width: 800px)').matches) {
window.addEventListener('mousemove', updateSpotlight);
function updateSpotlight(e) {
spotlight.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${spotlightSize}`;
}
} else {
spotlight.style.backgroundImage = `radial-gradient(circle at ${window.innerWidth/2}px ${window.innerHeight/2}px, ${spotlightSize}`;
}
});
</script>
HTML:
<div class="spotlight" style="background-image: radial-gradient(circle at 98.3559% 72.549%, transparent 160px, rgba(0, 0, 0, 0.85) 200px);"></div>
Could someone help me to keep the spotlight fixed (only in the mobile version) at the center of the page? the spotlight must remain the same in the web version (it keeps following the cursor as it does right now)

Why does my canvas background go blue even if I said to put the grid?

My teacher assigned me to make a snake game using javascript, html and css but i really don't get how to change the background on the game area. I'm a beginner so i know my code might be bad, sorry in advance.
#gameCanvas {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid black;
background-image:
linear-gradient(90deg, #333 30px, white 30px),
linear-gradient(90deg, white 30px, #333 30px),
linear-gradient(90deg, #333 30px, white 30px);
background-position: 0 0, 0 30px, 0 60px;
background-repeat: repeat-x;
background-size: 60px 30px, 60px 30px, 60px 30px;
margin: 15px auto;
border-radius: 12px;
background-size: repeat;
}
var gameCanvas = document.getElementById("gameCanvas");
var ctx = gameCanvas.getContext("2d");
function Canvas() {
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);
ctx.strokeRect(0, 0, gameCanvas.width, gameCanvas.height);
}
function drawFood() {
ctx.fillStyle = "red";
ctx.strokestyle = "darkred";
ctx.fillRect(foodX, foodY, 10, 10);
ctx.strokeRect(foodX, foodY, 10, 10);
}
function make_snake() {
snake.forEach(draw_snake)
}
function draw_snake(snakePart) {
ctx.fillStyle = "pink";
ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}
I'd like the gameCanvas background to be a grid that actually fits the snake but as you might see from the code, at the very beginning, when you refresh the page, you can see some kind of grid but it gets updated to a blue background and it doesn't even fit the whole canvas.

background color not working with img

I have an image that is within the div tag. This div has no background color, but I want to add a background color. but when I add background color are disappearing photos.
For example, cc into the div tag when I add background color within the div tag are disappearing photos
Codepen.io DEMO
HTML CODE
<div class="cc">
<div class="container">
<img src="http://lorempixel.com/1920/480/">
</div>
</div>
And CSS CODE:
body {
background: #000;
}
.container {
max-width: 1920px;
background-image: -moz-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
}
img {
max-width: 100%;
position: relative;
z-index: -1;
}
.cc {
width:100%;
height:100%;
padding:10px;
}

Digging through your CSS, I came across a z-index: -1. If you specify this, the image will be rendered behind all elements with a higher z-index. Thus it was hidden
EDIT:
Give your .img_400px400px (which has the gradient) a z-index: 1 and your .img_400px400px img a z-index: 2. Then your background color, gradient and image show. See this jsFiddle

How to create an triangle shape (fixed height, width=100%) with background

I have a graphic background, and I need to display a colored triangle in the top left corner (independing the resolution).
Can I create a triangle shaped element using only HTML/CSS/JS with width = 100% and height = 200px with background = red?
I can create it by IMG with width=100%, but I was hoping for a better solution than resizing an image.
The solution needs to be compatible with IE7+ and using browser's versions (more than 2%).
Thanks

Because you can't create a border which has a percentage, try using vw (viewer width) instead. So:
.triangle{
width: 0;
height: 0;
border-bottom: 600px solid blue;
border-left: 100vw solid transparent;
}

Vw units aren't supported by IE8, you will need to use a JS fallback for browsers that don't support these units.
Here is a jQuery script that sets the border-width according to the window size and adjusts it on window resize. Tested in IE8 (IE tester) :
$(document).ready(function() {
function triangle() {
var width = $('#wrap').width(),
border = width / 4;
$("#wrap .tr").css({
"border-left": border + "px solid #fff",
"border-bottom": border + "px solid transparent"
});
}
triangle();
$(window).on('resize', triangle);
});
body {
background: #fff;
}
#wrap {
position: relative;
min-height: 500px;
background: teal;
}
.tr {
position: absolute;
left: 0;
top: 0;
border-left: 200px solid #fff;
border-bottom: 200px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
<div class="tr"></div>
</div>

To expand on web-tiki's answer, I think this is actually what you're going for:
$(document).ready(function() {
function triangle() {
$("#wrap .tr").css({
"border-left": $('#wrap').width() + "px solid #fff",
"border-bottom": "200px solid transparent"
});
}
triangle();
$(window).on('resize', triangle);
});
body {
background: #fff;
}
#wrap {
position: relative;
min-height: 500px;
background: teal;
}
.tr {
position: absolute;
left: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
<div class="tr"></div>
</div>

I think it would be best to use background instead of borders:
.my-triangle {
width: 100%;
height: 200px;
background: linear-gradient(to left top, transparent 50%, red 50%);
}
<div class="my-triangle"></div>
Note that in order for it to be cross-browser compatible you will need to fiddle around with CSS prefixes, IE filters and SVG. (I don't readily have access to IE so I'll leave that one for you, but it would be something along these lines:)
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, transparent), color-stop(0.5, transparent), color-stop(0.5, #FF0000), color-stop(1, #FF0000));
background-image: -webkit-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -moz-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -ms-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -o-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: linear-gradient(to top left, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);

Just take a div element, give a class name 'triangle-topleft', and write the below given css
.triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
color of border-top would be the div's background color..Here it's red.
For more triangle structures, follow this link..
[http://css-tricks.com/examples/ShapesOfCSS/][1]

Writing innerHTML with imgPreview.js

I am working with an image preview jQuery plugin, aptly named imgPreview.js (by James Padolsey).
I have the plugin working great, but I have hit a wall when trying to write some HTML into the rendered Div.
The plugin targets the rel attribute when added to an <img /> and renders the URL.
Our usage is for a car shopping website, where the 'tooltip' will show a larger picture of the car.
I would like to modify the implementation to also show the Year, Make, Model, & Price all within the 'tooltip'. Presumably using jQuery .html()
HTML:
<ul>
<li>
<a href="#">
<img src="http://www.web2carz.com/images/thumbs/22/80/thumb_large_70364184.jpg"
rel="http://www.web2carz.com/images/articles/201205/bmw_bike_seats_1335883115_600x275.jpg" />
</a>
</li>
</ul>
CSS:
#imgPreview {
display:none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
box-shadow:0px 3px 15px rgba(0, 0, 0, 1);
padding: 15px 15px 30px;
z-index: 5;
border: 2px solid #D4D4D4;
background: #1a1a1a; /* Old browsers */
background: -moz-linear-gradient(top, #1a1a1a 0%, #1a1a1a 24%, #5e5e5e 50%, #1a1a1a 78%, #1a1a1a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1a1a1a), color-stop(24%,#1a1a1a), color-stop(50%,#5e5e5e), color-stop(78%,#1a1a1a), color-stop(100%,#1a1a1a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1a1a1a 0%,#1a1a1a 24%,#5e5e5e 50%,#1a1a1a 78%,#1a1a1a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1a1a1a 0%,#1a1a1a 24%,#5e5e5e 50%,#1a1a1a 78%,#1a1a1a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1a1a1a 0%,#1a1a1a 24%,#5e5e5e 50%,#1a1a1a 78%,#1a1a1a 100%); /* IE10+ */
background: linear-gradient(top, #1a1a1a 0%,#1a1a1a 24%,#5e5e5e 50%,#1a1a1a 78%,#1a1a1a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a1a1a', endColorstr='#1a1a1a',GradientType=0 ); /* IE6-9 */
}
#imgPreview img {
box-shadow:inset 0px 0px 10px rgba(0, 0, 0, 1);
border:1px solid #555;
}
#imgPreview span {
position:absolute;
bottom:0px;
left:0px;
color:#fff;
}
JavaScript:
jQuery(document).ready(function() {
// imgPreview
jQuery('#photo_lot .leftCol .photos ul li img').imgPreview({
srcAttr: 'rel',
containerID: 'imgPreview',
imgCSS: {
// Limit preview size:
height: 250
},
// When container is shown:
onShow: function(link){
// Animate link:
jQuery(link).stop().animate({opacity:0.4});
// Reset image:
jQuery('img', this).stop().css({opacity:0});
},
// When image has loaded:
onLoad: function(){
// Animate image
jQuery(this).animate({opacity:1}, 300);
},
// When container hides:
onHide: function(link){
// Animate link:
jQuery(link).stop().animate({opacity:1});
}
});
});
If I modify the onLoad to this:
// When image has loaded:
onLoad: function(){
// Animate image
jQuery(this).animate({opacity:1}, 300);
jQuery('#imgPreview').html("<span>Hello <b>World</b></span>");
},
Only the text loads, overriding the image.
I also have a jsfiddle set up which has the full plugin code added as well:
http://jsfiddle.net/QjJ4G/3/