I just started to experiment with Fast Average Color package. I would like to get average colour of an image in my project directory. So I set up the simplest possible index.html file and an image. This is my whole code:
<!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>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
position: fixed;
top: 50px;
left: 100px;
}
</style>
<body>
<h1>TEXT</h1>
<div class="image-container">
<img src="image.jpg" crossorigin="anonymous" />
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<script src="https://unpkg.com/fast-average-color/dist/index.browser.min.js"></script>
<script>
window.addEventListener('load', function() {
const fac = new FastAverageColor();
const container = document.querySelector('.image-container');
const color = fac.getColor(container.querySelector('img'));
container.style.backgroundColor = color.rgba;
container.style.color = color.isDark ? '#fff' : '#000';
console.log(color);
}, false);
</script>
</body>
</html>
When I add crossorigin='anonymous' to the image, I get this error:
Error: FastAverageColor: incorrect sizes for resource "file:///C:/Users/admin/Desktop/q/image.jpg"
When I don't add it, I get CORS error:
Error: FastAverageColor: security error (CORS) for resource file:///C:/Users/admin/Desktop/q/image.jpg.
I was expecting to receive any colour at first try, but I can't even set it up. Could anybody here help me with any advices what can I do to receive the average colour of an image? Have a nice day everyone!
Related
I have my 2 divs placed side by side like this using a CSS grid:
And I like it to be this way, however... if the user was to change the width to something smaller, my page becomes like this:
I don't really like the image being that small, so I was wondering how to make the divs stacked only if the image ends up being like that.
Here is my current code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home Page</title>
</head>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="static/css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Fira+Sans&family=Poppins&display=swap" rel="stylesheet">
<body>
<div class="header">
<button><img src="static/img/book.png" width="50px"></button>
<div class="on-right">
<button><img src="static/img/book.png" width="50px"></button>
<button><img src="static/img/calendar.png" width="50px"></button>
<button><img src="static/img/controller.png" width="50px"></button>
</div>
</div>
<div class="grid-container">
<div class="grid-child purple" style="padding-left: 25px;">
<div style="height: 100%">
<h1 style="font-family: 'Fira Sans', sans-serif; color: #ffac1c;">My Website!</h1>
<h2 style="font-family: 'Poppins', sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Magna fringilla urna porttitor rhoncus dolor purus non enim. Purus ut faucibus pulvinar elementum integer enim.</h2>
<h3 style="font-family: 'Fira Sans', sans-serif; color: #ffac1c;">Download the iOS app for free today!</h3>
</div>
</div>
<div class="grid-child green">
<img src="static/img/phone.png" width="50%">
</div>
</div>
</body>
</html>
body {
margin: 0;
}
.header {
top: 0;
padding: 20px;
background: #ffac1c;
color: white;
font-size: 30px;
}
.on-right {
float: right;
}
button {
border: none;
outline: none;
background: none;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 100px;
}
#media rule is made for this.
#media only screen and (max-width: 1000px) {
.grid-container {
grid-template-columns: 1fr; /* just one column */
}
}
Adjust the max-width to the value you prefer.
You can try using auto-fill with grid so it dynamically changes if it is smaller, e.g:
grid-template-columns: repeat(auto-fill, minmax(800px, 1fr));
to your '.grid-container'
You can edit the "800px" part and adjust it to your need
The 'autofill' option makes sure it takes the available space without changing the width of the items (changing the width of the items will be 'auto-fit'), and the 'minmax' specifies the minimum and maximum widths, so 800px will be where it breaks into a stack, and it takes up '1fr'. You can change the '1fr' to be '0.7fr' to make it smaller.
I have a php website, I have a background image of a road, and 2 images of a character, when the user scrolls, I want the images to change till the section is over, such that it looks like the character is moving.
I did the following code in jQuery:
$(document).ready(function() {
$(window).on("scroll", function() {
console.log($(this).scrollTop())
<?php for($i=30;$i<=2500;$i++){ ?>
if($(this).scrollTop() >= <?=$i?>){
// set to new image
$(".bgimg img").attr("src","char1.png");
} else {
//back to default
$(".bgimg img").attr("src","char2.png");
}
<?php } ?>
})
})
.bgimg {
background-image: url('road.png');
height: 2500px;
background-size:cover;
width:50%
}
<div class="container" style="text-align: -webkit-center;">
<div class="row">
<p>This is a test </p>
</div>
<div class="row bgimg" >
<img src="char1.png" id="chara">
</div>
</div>
however it doesn't work. Can anyone please tell me what is wrong?
Thanks in advance
I don't know if this can answer because I'm not sure I understood what you want but here are examples that may be able to help you (without PHP loop)
<script>
$(function(){
$(window).on("scroll", function() {
if($(this).scrollTop()>30) $(".bgimg img").attr("src","char2.png");
else $(".bgimg img").attr("src","char1.png");
});
});
</script>
With the script above the image changes with the threshold of 30
--------------------------------------------------------------------------------------------------------
With the script below the image changes alternately as the user "scrolls" the page.
With the following HTML code
<div id="characterDiv"><img id="characterImage" src="char1.png"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
With a long text page to have a high enough window
</p>
With this CSS
<style type="text/css">
html { font-family:Arial; font-size: 0.9em; }
p { width: 50%; text-align: justify; }
#characterDiv {
position: fixed;
right: 50%;
top: 50%;
width: 8em;
margin-top: -2.5em;
}
</style>
And this JQuery Script (without PHP Loop but with Mathematics)
<script>
$(function(){
$(window).on("scroll", function() {
let pitch = 150;
// Display for Test
console.log($(this).scrollTop()+' -> '+(Math.round($(this).scrollTop()/pitch))%2);
// This calculation gives alternately 0 or 1
if((Math.round($(this).scrollTop()/pitch))%2==0) $("#characterImage").attr("src","char2.png");
else $("#characterImage").attr("src","char1.png");
});
});
</script>
So I'm working on a project for changing theme of the website and I added a transition on the * selector for colors and background-colors so that they change smoothly
but the color of text is changing slower than background color of body !
const html = document.querySelector("html")
lightThemeButton = document.querySelector(".light-theme-button")
darkThemeButton = document.querySelector(".dark-theme-button")
lightThemeButton.addEventListener("click", () => {
html.style.colorScheme = "light"
})
darkThemeButton.addEventListener("click", () => {
html.style.colorScheme = "dark"
})
*,
*::before,
*::after {
transition: background-color 250ms ease, color 250ms ease;
}
.container {
width: 100%;
max-width: 1000px;
margin: auto;
}
<!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" />
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
<title>Transition</title>
</head>
<body>
<div class="container">
<section>
<h1>Hello World</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa cum
quia assumenda similique in eveniet porro beatae hic? Saepe, earum?
</p>
</section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem et
nostrum ab nesciunt iusto dolore inventore expedita eveniet ullam maxime
a excepturi blanditiis aliquid earum alias ex, saepe est modi.
</p>
<div class="theme-button-wraper">
<button class="light-theme-button">Light</button>
<button class="dark-theme-button">Dark</button>
</div>
</div>
</body>
</html>
I tried this also by add two classes with custom properties like --body-bg: #111 but the text transition is still slower than the transition in background color
Consider a higher specificity alternative in your CSS to create a smoother transition. The * (all) selector is great for targeting every element on the page but due to your background transition happening to the whole HTML document you need to target the parent before anything else which is why you are seeing a delay of just a few milliseconds. By using :root or HTML as your selector you should get the expected result. Run the code snippet below to see if that resolves your issue, hope it helps!
const html = document.querySelector("html")
lightThemeButton = document.querySelector(".light-theme-button")
darkThemeButton = document.querySelector(".dark-theme-button")
lightThemeButton.addEventListener("click", () => {
html.style.colorScheme = "light"
})
darkThemeButton.addEventListener("click", () => {
html.style.colorScheme = "dark"
})
:root {
transition: all 0.25s ease-out;
}
.container {
width: 100%;
max-width: 1000px;
margin: auto;
}
<!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" />
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
<title>Transition</title>
</head>
<body>
<div class="container">
<section>
<h1>Hello World</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa cum
quia assumenda similique in eveniet porro beatae hic? Saepe, earum?
</p>
</section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem et
nostrum ab nesciunt iusto dolore inventore expedita eveniet ullam maxime
a excepturi blanditiis aliquid earum alias ex, saepe est modi.
</p>
<div class="theme-button-wraper">
<button class="light-theme-button">Light</button>
<button class="dark-theme-button">Dark</button>
</div>
</div>
</body>
</html>
Additional documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/:root
I'm using the embed twitch service on my website but I don't know how to resize it as I want.
this is actually the website https://imgur.com/a/sYrzLH9,
this is the html:
<!--twitch: https://dev.twitch.tv/docs/embed/everything-->
<div class="twitch-stream">
<!-- Add a placeholder for the Twitch embed -->
<div id="twitch-embed"></div>
<!-- Load the Twitch embed script -->
<script src="https://embed.twitch.tv/embed/v1.js"></script>
<!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
<script type="text/javascript" class="twitch-stream-script">
new Twitch.Embed("twitch-embed", {
width: "100%",
height: "100%",
theme: "dark",
channel: "Monstercat",
// only needed if your site is also embedded on embed.example.com and othersite.example.com
parent: ["embed.example.com", "othersite.example.com"]
});
</script>
</div>
and the css:
.twitch-stream {
position: relative;
float: right;
right: 0.5vw;
top: 1vh;
}
.twitch-stream-script {
position: relative;
top: 100vh;
max-width: 65%;
max-height: 90vh;
}
as you can see i have the pic on the left and it occupies the 35% of the page and i would like if the streaming occupies the rest of it (65%).
How do I do that?
I thought about styling, via css, the script but i can't do it (it is actually in the code but, with or without it doesn't change anything)
You should bound your twitch in a div and css on it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#avatar_wrapper {
width: 35%;
display: inline-block;
}
#twitch_wrapper {
width: 65%;
display: inline-block;
float: right;
}
.clear {
clear: both;
}
</style>
<!-- Load the Twitch embed script -->
<script src="https://embed.twitch.tv/embed/v1.js"></script>
</head>
<body>
<div id="container">
<div id="avatar_wrapper">
your image here
</div>
<div id="twitch_wrapper">
<!--twitch: https://dev.twitch.tv/docs/embed/everything-->
<div class="twitch-stream">
<!-- Add a placeholder for the Twitch embed -->
<div id="twitch-embed"></div>
<!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
<script type="text/javascript" class="twitch-stream-script">
new Twitch.Embed("twitch-embed", {
width: "100%",
height: "100%",
theme: "dark",
channel: "Monstercat",
// only needed if your site is also embedded on embed.example.com and othersite.example.com
parent: ["embed.example.com", "othersite.example.com"]
});
</script>
</div>
</div>
<div class="clear"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, facere harum maiores molestias mollitia neque officia pariatur, quidem rem repellat sint voluptas? Atque, libero magnam maiores modi molestias omnis tempore?</p>
</div>
</body>
</html>
I am trying to use the jQuery UI Modal Dialog widget on ASP.NET Web Pages site. However, when I use the following code, I end up with a dialog with the close icon (x) underneath the title text rather than inline with it, and the resize icon on the left side of the dialog, above the buttons, rather than the bottom right-hand corner, where it should be.
You can see an example of what I am talking about here:
http://www.cutrategamer.com/app/sandbox
Here is the source code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link href="Styles/start/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
return false;
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function () { $(this).addClass('ui-state-hover'); },
function () { $(this).removeClass('ui-state-hover'); }
);
});
</script>
<!-- Adding jquery UI stuff -->
<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>
</head>
<body>
<!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
<h2 class="demoHeaders">Dialog</h2>
<p><span class="ui-icon ui-icon-newwin"></span>Open Dialog</p>
<!-- ui-dialog -->
<div id="dialog" title="Dialog Title">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Can anyone tell me what I need to do in order to fix this widget?
Your custom jQuery UI CSS file (jquery-ui-1.8.18.custom.css) does not include the jQuery Dialog CSS, so there is a bunch of missing code. You'll need to rebuild it again and include jQuery Dialog when building it.