Develop Reference

Updating CSS gradient using JS [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 days ago.
Improve this question
Please explain proper way to update a calculated style i.e. set in a CSS doc. document.body.style.background will take a color but not take a gradient. Example follows:
<button onclick="myFunction()">Set background</button>
<script>
function myFunction() {
foo = "#fedcba";
faa = "linear-gradient(45deg, #abcdef, #fedcba);";
document.body.style.background = faa; //foo works, faa doesn't work
}
</script>
I've tried many different iterations of the document.body.style.background and have read where some selectors are read only while others can be manipulated.
My present code: with comments added
Style from CSS file:
body {
background-color: #fedcba;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: sans-serif;
font-size: 1.2em;
background: -webkit-linear-gradient(315deg, #fedcba, #444);
background: -moz-linear-gradient(315deg, #fedcba, #444);
background: -o-linear-gradient(315deg, #fedcba, #444);
background: -ms-linear-gradient(315deg, #fedcba, #444);
background: linear-gradient(135deg, rgba(10, 100, 0, 100), rgba(200, 200, 200, 100));
background-repeat: no-repeat;
background-attachment: fixed;
}
function setGradient() {
const style = getComputedStyle(body); // reads the CSS for the body style
const background = style.background; //selects the background style
console.info("background: ", background); //writes the style to the console for trouble shooting
var prefix = getCssValuePrefix(); //gets browser prefix -o-, -moz-, -webkit-, -ms-
var orentation = slider; // a number from 0 to 360
var something = prefix + "linear-gradient(" + orentation + "deg, " + color1 + ", " + color2 +")";
//builds a string for the background :: here I have also tried color1.value and color2.value
console.info("setGradient before: ", something); //displays the gradient before being set
document.body.style.background = something; // should set the background to the new gradient
console.info("setGradient after: ", something); //shows that the variables are null
}
// the console returns: setGradient before: -webkit-linear-gradient(nulldeg, null, null)
//Pick and set Bkground colors and orentation
color1.addEventListener("color1", setGradient); //color1 from colorpicker input
color2.addEventListener("color2", setGradient); //color2 from colorpicker input
slider.oninput = setGradient(); //a number from 0-360 step 1 value 180

It's just a small typo. You need to remove the ; to make it a valid CSS value.
<button onclick="myFunction()">Set background</button>
<script>
function myFunction() {
let faa = "linear-gradient(45deg, #abcdef, #fedcba)";
document.body.style.background = faa;
}
</script>

How to constantly change the background image/color depending on the current time's day?

I've been trying to improve my website for a project in my college.
What exactly I'm trying to do is to change the background according to the time.
Imagine this scenario, changing the background color to a linear-gradient background image, according to a specific day time.
Example:
From 7am to 1pm, have this background:
background: linear-gradient(to bottom, yellow 0%, red 100%)
From 1pm to to 6pm, have this background:
background: linear-gradient(to bottom, #003366 0%, #000d1a 100%);
And, for the rest, have this background:
background: linear-gradient(to bottom, #000d1a 0%, #000000 100%);
All I have so far, that could help me figure out a way to do it on HTML using JavaScript, is this:
On HTML:
<script type=”text/javascript” src=”script.js”> </script>
var date=new Date();
var hour=data.getHours();
if (hour<13)
{
alert("Good Morning!");
}
else if (hour<18)
{
alert("Good Evening!");
}
else
{
alert("Good Night!");
}
(Used the commands "alert" as an example of what I could fit in it to change the background, which is the command I'm currently looking for)
I'd like to apologize for any wrong grammar or directory, or anything else I did wrong. Feel free to correct me on everything.
If someone could give me an example of a simple HTML syntax on html with the javascript code inside of it, not in another directory, that'd truly help! Either way, thank you for taking your time to help me out! =D
If everything goes as expected, I'll be posting my website here to share with everyone, I think it would be a good thing for people to see each others projects. In the project I'm currently working for, I'm responsible for the website development, which is going to be showing to the user the pros and cons of using a photovoltaic plate in a domestic/company area, also using a Solar Tracking device on it. In the website, we're going to have the results to everything related to it, I'll make sure to translate it from portuguese to english too.
Have a good day.

You could use a timeout to check the current time.
function VerifyTime(){
var hour=new Date().getHours();
if (hour<13)
{
alert("Good Morning!");
}
else if (hour<18)
{
alert("Good Evening!");
}
else
{
alert("Good Night!");
}
}
window.setTiemout(function(){VerifyTime()},<time>})
the time is expressed in milliseconds: 1 sec = 1000, i suggest you checking at each minute with 60000 or at every second with 1000

I think this is what you want to do:
var date = new Date();
var hour = date.getHours();
if (hour < 13) {
alert("Good Morning!");
document.body.classList.add('morning'); // Based on the current time, add a class to the document's body
} else if (hour < 18) {
alert("Good Evening!");
document.body.classList.add('evening');
} else {
alert("Good Night!");
document.body.classList.add('night');
}
.morning {
background-color: lightblue;
}
.evening {
background-color: orange;
}
.night {
background-color: black;
}
/** These colours are just examples, style them in the way you need them to be */

Just use CSS classes to display the background you want :
<style>
.morning{
background: morningColor;
}
.evening{
background: eveningColor;
}
.night{
background: nightColor;
}
</style>
Then replace your alert by adding the corresponding class:
<script>
var hour=new Date().getHours(); // get current hour value
var elem = document.body.getElementById(<your element id>); // you can trigger a specific element via id for example
if (hour<13){
elem.className += 'morning';
}
else if (hour<18){
elem.className += 'evening';
}
else{
elem.className += 'night';
}
</script>

webkit mask in javascript function on scroll

I'm trying to do this inside loadingisCompleted
$(window).scroll(function(){
if ($('body').hasClass('home')) {
if ($(window).scrollTop() > 0) {
$('#tol-header').css('-webkit-mask-image','-webkit-gradient(linear, center top, center bottom, color-stop(1.00, rgba(0, 0, 0, 0)), color-stop(0.00, rgba(19, 40, 39, 1)))');
} else {
$('#tol-header').css('background','transparent');
};
};
});
Purpose:
Default background: transparent
On scroll to be executed: -webkit-mask-image .....
No influence on the elements which are situated in the header.
My less file contains
#tol-header { background: transparent; }
The final result is that I have permanent "transparent" opacity on/over all elements (menus, logo, etc) in the header, no matter if I scroll or not, nothing in common with what I would like to get.
If I change the places of scrollTop - background: transparent; else - -webkit-mask .... It works perfect, as I background (without any influences on other elements; as I want), but ... it works even when I'm not scrolling and I'm at the top of the page.
Would be thankful if somebody can help.

I'm taking a stab at what you're wanting to do here as your question lacks a few key details.
I believe you want $('#tol-header').css('-webkit-mask-image', 'none') in the else as well so the webkit mask is removed again.

replace image with another for one second with javascript [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have an image that I want to replace with another (same image, but brighter color) to grab the attention of the user to it when he clicks on a certain button, just so he knows that it's there. So I want to replace the original pic with the other twice, for 1 second each, seperated by 1 second as well.
In other words, the user is on the page, he clicks on the button, the original dark image changes to the bright image for 1 second, then back to the dark image for 1 second, then the bright image for one second, and last comes back to the original dark one.
so: original--> replace it (1 sec) --> original(1 sec) --> replace it (1 sec)--> original
I know I have to use javascript for it, but I am very weak in javascript. can someone give me the code for it? Thanks

The below is a rough idea of one possible implementation, easily improved...the benefit being you only need one image.
Demo Fiddle
HTML
<img src='http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg' />
<button id='button'>Start 1 second!</button>
CSS
img {
height:100px;
width:100px;
}
jQuery
var interval;
function isEven(n) {
return isNumber(n) && (n % 2 == 0);
}
function isNumber(n) {
return n === parseFloat(n);
}
$('#button').on('click', function () {
var src = $('img').attr('src');
var alt = 'http://www.online-image-editor.com/styles/2013/images/example_image.png';
$('img').attr('src', alt);
var count = 0;
interval = setInterval(function () {
count++;
if (count == 4) {
clearInterval(interval);
return false;
}
isEven(count) ? $('img').attr('src', alt) : $('img').attr('src', src);
}, 1000);
});

Dryden is correct but we can at least point you in the right direction.
See http://www.w3schools.com/jsref/met_win_settimeout.asp
Combine that with a onclick function and document.getElementById("imageid").src="../img/imgname.png";
Magic.
If you can't get it working with that, post the code you are using.

In CSS you can use animation and specifities of box-model while you alternate padding and height/width to show background or not of img tag .
DEMO
basic coding :
<img src="http://lorempixel.com/300/200/nature/9" />
img { background:url(http://lorempixel.com/300/200/nature/6);
animation : 2s infinite blink;
}
#keyframes blink {
0%, 24.9%,75.1% ,100% {
heigh:0;
width:0;
padding:100px 150px
}
25%, 75% {
height:200px;
width:300px;
padding:0 0;
}
}

Html Country List with flags [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I am looking for a way to select and display a list of countries, preferably with flags. Any suggestions?
I started of by trying this jQuery plugin http://www.graphicpush.com/website-language-dropdown-with-jquery, but as the list of countries I have is quite large it turned out that the performance was really bad (too many http requests to images). Also the list is bulky when it is larger than 50 elements.

Just wanted to suggest a (imho) smarter way of doing the flags sprite.
The idea is to save the flags in a grid according to the country iso2 code.
1st letter -> vertical position
2nd letter -> horizontal position
Examples (for 16x11px flags + 4x4px spacing):
Austria = AT
A = 1 => vertically 1st row => y = (1-1)*(11+4) = 0
T = 20 => horizontally 20th column => x = (20-1)*(16+4) = 380
United States = US
U = 21 => vertically 21st row => y = (21-1)*(11+4) = 300
S = 19 => horizontally 19th column => x = (19-1)*(16+4) = 360
This way I can calculate the flag location with a very easy function on the client side without the need of 200+ extra style definitions.
Sample jQuery plugin:
(function($) {
// size = flag size + spacing
var default_size = {
w: 20,
h: 15
};
function calcPos(letter, size) {
return -(letter.toLowerCase().charCodeAt(0) - 97) * size;
}
$.fn.setFlagPosition = function(iso, size) {
size || (size = default_size);
return $(this).css('background-position',
[calcPos(iso[1], size.w), 'px ', calcPos(iso[0], size.h), 'px'].join(''));
};
})(jQuery);
Demo Usage:
$('.country i').setFlagPosition('es');
http://jsfiddle.net/roberkules/TxAhb/
And here my flag sprite:

Note from the future: jQuery UI autocomplete now supports custom
rendering by default, see
http://api.jqueryui.com/autocomplete/#method-_renderItem.
It's pretty easy. Things you need:
jQuery UI auto-complete
UI auto-complete html extension
A list of country names/codes
A CSS sprite with all flags
Remember, Google is your friend. Blend the ingredients well, carefully whisk some javascript in, and it's done - in 7 lines of code:
var countries = [["Argentina", "ar"], ...];
var countryNames = countries.map(function(country){
return {
label: '<div class="flag '+country[1].toLowerCase()+'">'+country[0]+'</div>',
value: country[0]
}
});
$('#country').autocomplete({
source: countryNames,
html: true
});
Here's this code in action

As mentioned by commenters, a CSS sprite is the proper solution here. Fortunately, there are many CSS sprites of flags freely available. This one looks pretty good.
We will have to tweak the dropdown code to accomodate that pre-made CSS sprite. I've gone ahead and done that for you. Here's a live demo.
languageswitcher.js
## -44,10 +44,11 ##
source.removeAttr("autocomplete");
var selected = source.find("option:selected");
var options = $("option", source);
- $("#country-select").append('<dl id="target" class="dropdown"></dl>')
- $("#target").append('<dt class="' + selected.val() + '"><span class="flag"></span><em>' + selected.text() + '</em></dt>')
- $("#target").append('<dd><ul></ul></dd>')
+ $("#country-select").append('<dl id="target" class="dropdown f16"></dl>')
+ $("#target").append('<dt><em class="flag ' + selected.val().toLowerCase() + '">' + selected.text() + '</em></dt>');
+ $("#target").append('<dd><ul></ul></dd>');
+ var $drop = $("#target dd ul");
options.each(function(){
- $("#target dd ul").append('<li class="' + $(this).val() + '"><span class="flag"></span><em>' + $(this).text() + '</em></li>');
+ $drop.append('<li><em class="flag ' + $(this).val().toLowerCase() + '">' + $(this).text() + '</em></li>');
});
}
languageswitcher.css
## -45,6 +45,8 ##
.dropdown dd { position: relative; }
+.dropdown ul { max-height:350px; overflow-y:auto; overflow-x:hidden; }
+
.dropdown a {
text-decoration: none;
outline: 0;
## -52,6 +54,7 ##
display: block;
width: 130px;
overflow: hidden;
+ white-space:nowrap;
}
.dropdown dt a {
## -107,23 +110,6 ##
padding: 2px 10px;
}
- .dropdown dd ul li a span,
- .dropdown dt a span {
- float: left;
- width: 16px;
- height: 11px;
- margin: 2px 6px 0 0;
- background-image: url(flags.png);
- background-repeat: no-repeat;
- cursor: pointer;
- }
-
- .us a span { background-position: 0 0 }
- .uk a span { background-position: -16px 0 }
- .fr a span { background-position: -32px 0 }
- .de a span { background-position: -48px 0 }
- .nl a span { background-position: -64px 0 }
-
.dropdown dd ul li a em,
.dropdown dt a em {
font-style: normal;
## -138,3 +124,5 ##
.dropdown dd ul li a:hover { background-color: rgba(255,255,255,.1); }
.dropdown dd ul li a:hover em { color: #fff; }
+
+.flag { padding-left:18px; }
The CSS changes I made were Q&D hacks; you'll probably want to spend some time polishing them. I removed all of the flag-specific stuff from languageswitcher.css since we're using flag16.css.
Also, if the country code doesn't exist in the CSS sprite, the flag shown will default to the
African Union's flag since it is the first image in the sprite. In the demo, several of the countries in my example list don't have a sprite image. Watch out for that.

Here's a file with the list of countries and links to their flags (some of the links might not be working though but most of them are)
Excel File

You can also use flags from http://www.famfamfam.com/lab/icons/flags/ and simply use CSS for positioning the appropriate flag.
----EDITED----
If i need to show flag of my country then i would do mapping from CSS like
<span class='np'></span>
.np {
background: url(./flags_preview_large.png) -172px -397px no-repeat;
width: 14px;
height: 20px;
}