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.
Related
I am downloading a file I create on the server on a button click as in the below code.
$(document).ready(function() {
$('#reportBtn').on('click', function() {
$('#loadingScreen').removeClass('hidden');
window.location = '/myApp/Home/GenerateReport';
setTimeout(function() {
$('#loadingScreen').addClass('hidden');
}, 20000);
});
});
It works fine and I know that ideally this should really be wrapped in an AJAX call and return a unique GUID and return the file that way - however I cant use that approach and I am just wondering is there a better way I should be detected when the file has downloaded so I can remove the loading gif better. I have hard coded the 20 seconds which I know isnt really correct - sometimes depending on the amount of data in the report it downloads in 10 seconds or it could take 30 seconds to download.
Is there a better approach I could use keeping the fundamental call to window.location the same - note this is an MVC call which returns a FileResult of return File(data, MediaTypeNames.Application.Octet, reportName);
Instead of this, you can try another approach for displaying a loading spinner i.e. during page load:
<script type="text/javascript">
$(function () {
$("#btnSubmit").click(function () {
var form = $("#frmCreate");
form.validate();
if (form.valid()) {
$("#loading").fadeIn();
var opts = {
lines: 12, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false // Whether to use hardware acceleration
};
var target = document.getElementById('loading');
var spinner = new Spinner(opts).spin(target);
}
});
});
</script>
<div id="loading">
<div id="loadingcontent">
<p id="loadingspinner">
Loading...
</p>
</div>
</div>
<style>
#loading {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.8);
z-index: 1000;
}
#loadingcontent {
display: table;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#loadingspinner {
display: table-cell;
vertical-align: middle;
width: 100%;
text-align: center;
font-size: larger;
padding-top: 80px;
}
</style>
Similarly you can also use some plugin in order to display loading spinner.
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.
I've been trying to find a way in order to create a slideshow and specify the timing between each picture. Then after the sequence, I want to display/reveal the home page.
I don't really have a lot of JavaScript experience so any help would be appreciated.
There are many ways to do it, here is one simple/basic example:
jQuery.fn.reverse = [].reverse; /* Just a helper */
var slideshowContainer = $('.slideshow');
var slideshowItems = slideshowContainer.find('.item').reverse();
var slideshowItemsTotal = slideshowItems.length;
slideshowItems.each(function(i) {
var thisItem = $(this);
setTimeout(function() {
thisItem.fadeOut(1000, function() {
thisItem.remove();
if( i+1==slideshowItemsTotal ) {
slideshowContainer.remove();
};
});
}, i*5000+4000);
});
* {
margin: 0 none;
box-sizing: border-box;
}
.slideshow {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.slideshow .item {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Page header</h1>
<p>Page content.</p>
<div class="slideshow">
<img class="item" src="http://placehold.it/800x600/00ff00/333" />
<img class="item" src="http://placehold.it/800x600/ff0000/111" />
</div>
Also on JSFiddle.
You should use setTimeout function to put timing between every function. Then change the pictures with functions to make it look like it is a slideshow.
Example: calls the function after 3 seconds to make an alert.
function myFunction() {
setTimeout(function(){ alert("Hello"); }, 3000);
}
You can find millions of examples on google for timing with JS.
Good luck
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;
}
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? :)