I have a clock in my projet inserted in a div and it's really important to me that it is rendered "inline".
Indeed, the AM/PM cell is right next to it and I'd like it to move as clock gets shorter (ie. 11:11 instead of 22:22).
So i set its property to display: inline; like this :
.time{
display: inline;
position: relative;
cursor: pointer;
z-index: 1;
font-size: 50pt;
}
The same goes for the am/pm element :
.ampm{
display: inline;
cursor: pointer;
position: relative;
z-index: 1;
font-size: 18pt;
top: -40px;
}
This is the HTML file :
<div class="timeDate">
<div class="hour"><div id="time" class="time"></div><div id="ampm" class="ampm"></div></div>
<div id="date" class="date"></div>
</div>
and at least, the Javascript piece of code that keeps update it:
setInterval('checkTime()', 1000);
function checkTime(){
currentTime = new Date();
_minutes = currentTime.getMinutes();
_hours = currentTime.getHours();
_day = currentTime.getDay();
_date = currentTime.getDate();
_month = currentTime.getMonth();
time.innerHTML = _hours + ":" + _minutes;
ampm.innerHTML = ampmValue;
}
It works fine with display: block;
Plus, when i add seconds I can see it updates, but only like, 2 times out of 10.
Do you have an idea of why, and how could I fix that ?
Thanks in advance !
Here is a link to my project (Chrome ONLY) : http://acemond.free.fr/FEZAcetheme/BETA/FEZ_Lockscreen_1.2-3.theme/LockBackground.html
It's meant to work locally so load the page entierly, then reload (you'll keep cache)
Hmm ok... Kinda found a way out...
if(mode12h) time.innerHTML = _hours + ":" + _minutes + "<sup><font size='5'>" + ampmValue + "</font></sup>";
else time.innerHTML = _hours + ":" + _minutes;
It seems simple but the issue with that piece of code is that the .click function assignated to the clock wouldn't work fine any more.
So I added an empty control that is above all this in order to receive the clicks.
It works, no idea why.
EDIT: found an even BETTER way to do that:
hours.innerHTML = _hours + ":" + _minutes + "<span class='ampm'>" + ampmValue + "</span>";
with associated CSS:
.ampm{
position: absolute;
z-index: 1;
height: 75px;
text-align: center;
width: 40spx;
font-size: 20pt;
}
I did this before, but it prvented the .click function to work correcty just as i said. But now it works well with the panel i added above that manages the click.
Could it be as simple as adding:
var time = document.getElementById('time');
var ampm = document.getElementById('ampm')`
before doing
time.innerHTML = _hours + ":" + _minutes;
ampm.innerHTML = ampmValue;
Ok, this code works for me: http://jsfiddle.net/3xyYh/1/
setInterval(checkTime, 1000);
Removed the quotes around the checkTime call but maybe that's not the problem either? However this is working fine for me with display: inline.
You should apply the display: inline; to your parent element .timeDate
Edit:
Okay! I've seen your clock, and I found something on that is: You should give float to your element. See below:
.ampm {
cursor: pointer;
display: inline;
float: right;
font-size: 18pt;
margin-top: 0;
position: relative;
z-index: 1;
top: 20px;
right: 2px;
}
.time {
cursor: pointer;
display: inline;
float: left;
font-size: 45pt;
position: relative;
z-index: 1;
}
Related
I'm having a problem to keep an animation running "smooth" each time a new line of text is added.
The main problem here is that I want the speed of the animation to be constant, no matter how many lines are added. In order to do so the code is recalculating the speed each time a new line is added.
The problem is that when this happens the whole block of text "Jumps".
I was thinking that maybe the whole method I'm using wont give me the result I'm looking for so the question is.
Is there a fix or better alternative to achieve this?
I have a codepen with the example (Each time you press any key a new line will be added so we can simulate the behavior)
https://codepen.io/MrAmericanMike/pen/GeyZJg
Thanks a lot.
let marqueeContainer = document.getElementById("marqueeContainer");
let marqueeText = document.createElement("p");
marqueeContainer.appendChild(marqueeText);
document.addEventListener("keydown", addText);
let wordCount = 1;
function addText(){
let things = ['Rock', 'Paper', 'Scissor'];
let thing = wordCount + " - " + things[Math.floor(Math.random()*things.length)];
marqueeText.innerHTML += thing + "<br/>";
calcSpeed(50);
wordCount++;
}
function calcSpeed(speed) {
// Time = Distance/Speed
var spanSelector = document.querySelector('#marqueeContainer p');
var spanLength = spanSelector.offsetHeight;
var timeTaken = spanLength / speed;
spanSelector.style.animationDuration = timeTaken + "s";
}
#marqueeContainer {
position: fixed;
top: 0px;
left: 0px;
width: 800px;
height: 200px;
z-index: 999;
background-color: rgba(0, 0, 33, 0.5);
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
text-align: center;
}
#marqueeContainer p {
display: inline-block;
padding-top: 200px;
animation: marqueeContainer linear infinite;
color: #FFFFFF;
}
#keyframes marqueeContainer {
0% { transform: translate(0, 0); }
100% { transform: translate(0, -105%); }
}
<div id="marqueeContainer"></div>
How can I have the time variable's contents displayed as the content property in my CSS?
JavaScript:
function clock(){
var d = new Date();
var hour = d.getHours();
var min = d.getMinutes();
var time = hour + ":" + min;
}
CSS:
.screen{
position: absolute;
height: 75%;
width: 75%;
background: #98E8EE;
top: 11.5%;
left: 12.5%;
}
.screen::after{
color: #F9F5F4;
font-size: 40px;
content: ;
font-family: Arial;
margin-left: 36.5px;
top: 20px;
position: relative
}
You can use CSS-Variables.
Can I use: http://caniuse.com/css-variables/embed
Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
const updateTime = () => {
var d = new Date();
var hour = d.getHours();
var min = d.getMinutes();
var second = d.getSeconds();
var time = `${hour}:${min}:${second}`;
// set CSS variable
document.documentElement.style.setProperty(`--text`, `'${time}'`);
}
// initial call
updateTime();
// interval to update time
setInterval(updateTime, 1000);
:root {
--text: '----';
}
.container {
position: absolute;
height: 75%;
width: 75%;
background: #98E8EE;
top: 11.5%;
left: 12.5%;
}
.container::after {
content: var(--text);
color: #F9F5F4;
font-size: 40px;
content: ;
font-family: Arial;
margin-left: 36.5px;
top: 20px;
position: relative
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="container"></div>
</body>
</html>
I'm not sure wether that's the best way to achieve what you want to do, as you could also use a container element and change its content directly:
const screenContentElement = document.getElementById('screen__content');
function pad(value) {
const str = value + '';
return str.length === 2 ? str : '0' + str;
}
function clock(){
var d = new Date();
return pad(d.getHours())
+ ':' + pad(d.getMinutes())
+ ':' + pad(d.getSeconds());
}
setInterval(() => {
screenContentElement.innerText = clock();
}, 1000);
#screen {
font-family: Arial, sans-serif;
position: relative;
height: 100%;
width: 100%;
background: #98E8EE;
text-align: center;
padding: 2rem 0;
}
#screen__content {
color: #F9F5F4;
font-size: 40px;
}
<div id="screen" class="screen">
<span id="screen__content"></span>
</div>
However, regarding the code you provided, to dynamically change the value of a content property in a CSS pseudo-element you can use the attr() CSS function together with a data-* attribute:
const screenElement = document.getElementById('screen');
function pad(value) {
const str = value + '';
return str.length === 2 ? str : '0' + str;
}
function clock(){
var d = new Date();
return pad(d.getHours())
+ ':' + pad(d.getMinutes())
+ ':' + pad(d.getSeconds());
}
setInterval(() => {
screenElement.dataset.time = clock();
}, 1000);
#screen {
font-family: Arial, sans-serif;
position: relative;
height: 100%;
width: 100%;
background: #98E8EE;
text-align: center;
padding: 2rem 0;
}
#screen::before {
color: #F9F5F4;
font-size: 40px;
content: attr(data-time);
}
<div id="screen"></div>
You can use jquery to add in the content to your element
If you want to use the value of time in some css property then you can simple do that using javascript/jquery :
$("#SomeId or .SomeCLass").css("PropertyName",time);
Instead of adding a javascript value to your CSS (impossible), you can change your CSS value with javascript.
For example, you can use jQuery library and do changes in your html or CSS, according to the value.
Not sure what you're going for, but if you want the value of time to appear on your page, formatted using your css, maybe this?
document.write( '<p class="screen">' + time + '</p> );
Or this?
var timeDiv = document.createElement('div');
timeDiv.classList.add('screen');
document.body.appendChild(timeDiv);
Just guessing. Usually CSS defines how things are formatted, so I'm not sure what you're asking.
Below is code I'm using to make an ad appear once a day. I want to switch it to appear once every 5 minutes. I thought changing the value of 1 in the script to 0.004 (if 1 = a day, .004 = about 5 minutes), but it doesn't seem to be working properly. Does anyone have any ideas? Thanks!
<style>
#donationad {
position: fixed;
bottom: 0;
left: 40px;
width: 250px;
height: 150px;
z-index: 999;
display: none;
}
#donationad.hide {
display: none;
}
.closebutton {
position: relative;
top: 20px;
left: 230px;
cursor: pointer;
}
.closebutton img {
width: 30px;
height: auto;
opacity: 1.0;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.closebutton').click(function() {
$("#donationad").toggleClass("hide");
});
});
</script>
<div id="donationad">
<div class="closebutton"> <img src="http://www.dbknews.com/pb/resources/assets/img/modal_close_button.png"> </div>
<img src="https://s3.amazonaws.com/wapopartners.com/dbknews-wp/wp-content/uploads/2016/12/24020402/DBK-Donate250x150.jpg">
</div>
<script type="text/javascript">
var cookie = document.cookie;
if (cookie.indexOf('visited=', 0) == -1) {
var expiration = new Date();
expiration.setDate(expiration.getDate() + 1);
document.cookie = 'visited=1;expires=' + expiration + ';path=/';
var element = document.getElementById('donationad');
element.style.display = 'block';
}
</script>
Date.setDate sets the day of the month, not the "date". Confusing? Yes.
What you want is something different entirely.
document.cookie = 'visited=1;max-age=300;path=/';
// 300 is 5 minutes in seconds
This creates a cookie that can only live 5 minutes and you don't need to deal with date at all. You will lose old versions of IE, which will treat the cookie as temporary.
I'm trying to give my text a background colour, simple enough but I have come into some difficulty.
Here's my html
<div class="hero_text">Screen Shot</div>
I needed to break this apart so that if there was a space, then the next word go onto a new line.
Here's my jquery
jQuery(document).ready(function($) {
$('.hero_text').html(function(index, text) {
return text.replace(' ', '<br>');
});
});
Here's my css
.hero_text {
color: #FFF;
text-align: right;
background: green;
padding-left: 5px;
font-size: 30px;
display: inline;
float: right;
padding-right: 9px;
clear: both;
position: fixed;
right: 0;
bottom: 30%;
line-height: 30px;
}
Here's an image of what I'm getting at the moment
And here is what i'm trying to achieve
Notice the pink has got a little bit of padding to the left and right of the word but as the words are different length then the pink should be smaller and larger depending on the word?
Thanks
One approach, using jQuery to manipulate the HTML, is:
$('.hero_text').html(function (i,oldHTML){
return oldHTML.replace(/\b([a-zA-Z]+)\b/g,'<span>$1</span>');
});
Coupled with the additional CSS:
.hero_text span {
background-color: green;
float: right;
clear: right;
}
JS Fiddle demo.
http://jsfiddle.net/S6sfu/
This is one without java script, will this do?
HTML
<div class="hero_text">Screen</div>
<div class="hero_text">Shot</div>
<div class="hero_text">A quick message</div>
CSS
.hero_text {
color: #FFF;
text-align: right;
background: green;
padding-left: 5px;
font-size: 30px;
display: inline;
float: right;
padding-right: 9px;
clear: both;
right: 0;
bottom: 30%;
line-height: 30px;
}
You can split up the text into an array and than add the spans as you want. Somewhat like this:
jQuery(document).ready(function($) {
var textArray= $('.hero_text').html().split(' ');
$('.hero_text').html('<span style="background: green;">'+textArray[0]+'</span><br>'+'<span style="background: green;">'+textArray[1]+'</span>');
});
Check out the following url: http://css-tricks.com/multi-line-padded-text/
Nearly all possible methods are supplied there.
If you don't have access to the html you could move the contents of the div to a span:
(Which is a VERY bad idea to begin with)
var $node = $('.hero_text');
var text = $node.innerHtml();
var $span = $('<span class="hero_text"></span>');
$span.appendTo($node.parent());
$node.remove();
See if this helps. I have updated the javascript in your code.http://jsfiddle.net
var text_arr = $('.hero_text').text().split(' ');
$('.hero_text').html('');
for(i=0; i< text_arr.length; i++)
{
$('.hero_text').append('<span class="text'+i+' clearfix">'+ text_arr[i] +'</span>');
}
If you dont have access to div or the css ,
this is the solution you can consider :
UPDATED
jsfiddle : http://jsfiddle.net/P5LNx/7/
jQuery(document).ready(function ($) {
$('.hero_text').html(function (index, text) {
var bgcolor = $(this).css('background');
$(this).css('background', 'transparent');
var txt = text.split(' ');
var content = '<span style="background: ' + bgcolor + ';position:relative;">' + txt[0] + '</span><br>';
content += '<span style="background: ' + bgcolor + ';">' + txt[1] + '</span>';
return content;
});
});
Steps :
Removed background of the div.
Added 2 <span> with same background as div
To <span>s, added your words (1 in each)
I am trying to create a roll-in / roll-out slideshow in jQuery/JavaScript.
My problem is, that it needs to be repeated. And right now when it's starting over, the pictures doesnt come from the right side anymore :(
The reason for which I have created the slideLeft function, is that afterwards I need to create 2 functions, where the user can interrupt the slideshow manually pressing a left or right button.
This is what I've got:
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<div style='background: #c4c4c4; border: 1px solid #7b7b7b; height: 220px; overflow: hidden; padding: 5px; position: absolute; width: 590px;'>
<div id='slider-image-1' style='left: 5px; background: red; height: 216px; padding: 2px; position: absolute; top: 5px; width: 586px;'></div>
<div id='slider-image-2' style='left: 600px; background: yellow; height: 216px; padding: 2px; position: absolute; top: 5px; width: 586px;'></div>
<div id='slider-image-3' style='left: 600px; background: green; height: 216px; padding: 2px; position: absolute; top: 5px; width: 586px;'></div>
<div id='slider-image-4' style='left: 600px; background: blue; height: 216px; padding: 2px; position: absolute; top: 5px; width: 586px;'></div>
</div>
<script type='text/javascript'>
$(document).ready(function() {
var amount = 0;
var nextamount = 1;
setInterval(function() {
amount++;
nextamount++;
if (nextamount === 5) nextamount = 1;
if (amount === 5) amount = 1;
slideLeft(amount, nextamount);
}, 2000);
});
function slideLeft(i, j) {
var $theItem = $('#slider-image-' + i);
$theItem.animate({
left: parseInt($theItem.css('left'), 10) == 5 ? -$theItem.outerWidth() : 5
}, 500);
var $theItem = $('#slider-image-' + j);
$theItem.animate({
left: parseInt($theItem.css('left'), 10) == 5 ? $theItem.outerWidth() + 10 : 5
}, 500);
};
</script>
You need to prepare element, which is going to roll in, to be on the right.
function slideLeft(i, j) {
var $theItem = $('#slider-image-' + i);
$theItem.animate({
left: parseInt($theItem.css('left'), 10) == 5 ? -$theItem.outerWidth() : 5
}, 500);
var $theItem = $('#slider-image-' + j);
$theItem.css('left', '600px'); // moves in item to the right before animation
$theItem.animate({
left: parseInt($theItem.css('left'), 10) == 5 ? $theItem.outerWidth() + 10 : 5
}, 500);
};
I think you've tried it with your parseInt, but it doesn't work, so you can get rid of it.
function slideLeft(i, j) {
var $outItem = $('#slider-image-' + i);
$outItem.animate({ left: -$outItem.outerWidth() }, 500);
var $inItem = $('#slider-image-' + j);
$inItem.css('left', '600px');
$inItem.animate({ left: 5 }, 500);
}
I have made something like this before, i dont know if this will help you, what i did was:
Add a copy of the first slide in the end of the collection of images/slides. Then, when you are showing the last "real" image and it will look like you are scrolling to the first image (but that is just a copy of the first image), and then when the animation is done you can position it with the default "left" css value. If you want it to scroll both ways, you can do the same with a copy of the last image/slide before the first image, but then you'll have to start the slider with a offset.
its a bit hard to explain, do you get the point? :)