Timer for slideshow - how to pause timer - timer
im new to jscript and iv looked around and have seen a few ideas for pausing the images within a slideshow, but i just cannot code it correctly... If anybody would like to help myself and the many others who would benefit from a simple workaround, Please feel obliged to input you expertise. Thank you. Bunny
here's the script...
(function() {
'use strict';
var preloads=[],c,
d=document,di=d.getElementById('dynamic-image'),
dh=d.getElementById('dynamic-href'),
url=[
'linkmywebsite.ml','chatmagbingo.com','ilkestonwebdesign.com','ipost.com','happypetsuk.com','www.linkmywebsite.co.uk','fireworksnottingham.co.uk','www.linkmywebsite.co.uk','ilkestonfastfood.com','www.linkmywebsite.co.uk','de-signz.co.uk','www.linkmywebsite.co.uk','cctautos.com','grundyskips.co.uk','www.m8drivingschools.co.uk','www.apipedream.co.uk','www.crazyskips.com','www.linkmywebsite.co.uk','www.linkmywebsite.co.uk','www.linkmywebsite.co.uk','www.linkmywebsite.co.uk','www.linkmywebsite.co.uk','www.competitiveremovals.co.uk','www.linkmywebsite.co.uk','www.linkmywebsite.co.uk','heartinternet.co.uk','winnerbingo.com','www.linkmywebsite.co.uk','linkmywebsite.ml','katyperry.com','perfectpizza.com','youtube.com','google.com','facebook.com','twitter.com','linkmywebsite.ml','linkmywebsite.ml','gumtree.com'
],
thereallyconfusingpart-was-timer=11000; /*adjust to suit */
function preload(){
for(c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
c=0;
}
preload('yournewsite2.png','1ad.jpg','2ad.jpg',
'3ad.jpg','4ad.jpg','5ad.jpg',
'6ad.jpg','7ad.jpg','8ad.jpg',
'9ad.jpg','10ad.jpg','11ad.jpg',
'12ad.jpg','13ad.jpg','14ad.jpg',
'15ad.jpg','16ad.jpg','17ad.jpg',
'18ad.jpg','19ad.jpg','20ad.jpg',
'21ad.jpg','22ad.jpg','23ad.jpg',
'24ad.jpg','25ad.jpg','26ad.jpg',
'27ad.jpg','28ad.jpg','29ad.jpg',
'30ad.jpg','youtubead.png','googlead.png',
'facebookad.png','twitterad.png','yournewsite2.png',
'yournewsite2.png','gumtreead.png');
setInterval(
function() {
dh.href='http://'+url[c];
di.src=preloads[c].src;
di.alt=preloads[c].src.substring(preloads[c].src.lastIndexOf('/')+1);
c++;
if(c==preloads.length) {
c=0;
}
},thereallyconfusingpart-was-timer);
}());
Related
Flush tampermonkey changes
I am trying to create a Tampermonkey script to automatically fill a login form with my username and password and then I would like to click the login button. However, with the code below, it appears to wait the three seconds, and THEN it fills the text into the boxes. How can I "flush" the changes so that they appear before the wait time occurs?
Thanks!
(function() {
'use strict';
function wait(ms){
var start = new Date().getTime();
var end = start;
while(end < start + ms) {
end = new Date().getTime();
}
}
window.onbeforeunload = function (){
return "Leaving page...";
}
$(document).ready(function() {
document.getElementById("username").value = "userValue";
document.getElementById("password").value = "passwordValue";
wait(3000);
document.getElementsByClassName("btn-large").click();
});
})();
That wait function is locking up the browser tab (and probably the browser, and potentially the whole computer). Don't code like that!
Also:
(function() {... is completely superfluous in a Tampermonkey script.
$(document).ready(function()... is not helpful except in rare cases that do not apply here.
Lots, lots more, etc...
Here's that code refactored:
window.onbeforeunload = function () {
return "Leaving page...";
}
//-- Hacker easter egg! See linked questions.
document.getElementById ("username").value = "userValue";
document.getElementById ("password").value = "passwordValue";
setTimeout (clickBtnAfterDelay, 3000);
function () {
//-- Brittle! See linked questions.
document.getElementsByClassName ("btn-large")[0].click ();
}
easy timer to start timing on a page,will not start the timing
Good morning
I am working on the memory came js challenge.When the page loads and a card is clicked the timer should start.I was referred to the EasyTimer.js (https://albert-gonzalez.github.io/easytimer.js/) which seems great,short code and I saw it working for other people.Even if i follow step by step the example I am getting the error that Timer is not defined.Yes Indeed I haven't definer timer somewhere else,as far as i understood if I add the script I will not have to define it separately.I will share my code hoping that someone can point me in the right direction.I am a beginner
var timer = new Timer();
timer.start();
timer.addEventListener("secondsUpdated", function (e) {
$("#timer").html(timer.getTimeValues().toString());
});
function toggleCard() {
// start the timer when first card is opened
if (startGame == false) {
startGame = true;
timer.start();
}
if (openCard.length === 0) {
$(this).toggleClass("show open").animateCss('flipInY');
openCard.push($(this));
disableCLick();
}
else if (openCard.length === 1) {
// increment moves
updateMoves();
$(this).toggleClass("show open").animateCss('flipInY');
openCard.push($(this));
setTimeout(matchOpenCard, 1100);
}
}
<span class="moves">3 Moves</span> </br>
<div id="timer">00:00:00</div> --> here is the timer
<div class="restart">
<i class="fa fa-repeat"></i>
</div>
.....
<script src="dist/easytimer.min.js"></script> -->file downloaded in my pc and the path is correct
I have tried using the src as the online link to the easytimer but I am getting the same error
Thank you
I will not delete the quesition as it might be useful for somebody I had to add an extra script to the index file <script> var timerInstance = new Timer(); </script> it has to be as it is, var timerInstance can not be replaced with your own variable Thank you
Ionic onGesture bug
I've been using ionic and https://github.com/driftyco/ionic-contrib-swipe-cards for a tinder-like interface and noticed that the following lines are executed twice instead of once.
ionic.onGesture('dragstart', function(e) {
console.log("onDragStart!");
var cx = window.innerWidth / 2;
if(e.gesture.touches[0].pageX < cx) {
self._transformOriginRight();
} else {
self._transformOriginLeft();
}
window._rAF(function() { self._doDragStart(e) });
}, this.el);
ionic.onGesture('dragend', function(e) {
alert("ionic.onGesture dragEnd!");
window._rAF(function() { self._doDragEnd(e) });
}, this.el);
I am on a pc testing this, so maybe that has something to do with it? I've been playing around with it for a couple hours now and am stuck at where to go from here. Any help is greatly appreciated :)
Waiting for User input before continuing to Marionette Application next stage
My application needs a function to be called at initialize:after stage. After user has provided that input in function, i want application to go in start stage. But currently, it just go to all the 3 stages without waiting for input. Can anyone suggest how can i do acheive my desired functionality?
var app= new Marionette.Application();
app.on('initialize:before', function(options){
//do Something
});
app.on('initialize:after', function(options){
//do Something
//wait for User to give input before continuing to start stage.
});
app.on('start', function(options){
//start only when User provide input.
//do Something with input.
});
var options = {};
app.start(options);
This is less a Backbone/Marionette question and more of a pure JavaScript problem. If you don't care about usability, just use window.prompt and save yourself a lot of work.
If you're not able to use alerts, then things get more complicated. User inputs are usually done using some sort of form. Unfortunately, these are asynchronous operations, meaning you can't just halt JavaScript execution while you wait for the user to get out their glasses and look for their SSN. jQuery's Deferred library is a good tool to use to handle situations like these, but you'll need to rework your code a little.
In our project we've created a the concept of a Lifecycle that works roughly as follows:
Module.lifecycle = {
step1: function() {
var dfd = new $.Deferred().resolve();
// get user input from a custom dialog control
var dialog = new MyDailogControl("What do you want to do?");
dialog.onSuccess = dfd.resolve;
dialog.onFail = dfd.reject;
dialog.show();
return dfd.promise();
},
step2: function() { /* load some data from the server */ },
step3: function() { /* get even more user input... */ },
};
Next we have a Lifecycle Walker object that pushes the lifecycle through each state; it looks something like this (from memory; you'll want to test this...)
var Walker = function(lifecycle) {
this.lifecycle = lifecycle;
this._states = _.keys(this.lifecycle);
}
_.extend(Walker.prototype, Backbone.Events, {
start: function() {
this._index = 0;
this.moveNext();
},
moveNext: function() {
var step = this.states[this._index];
this.trigger('before:' + step);
$.when(this.lifecycle[step]())
.then(function() {
this.trigger('after:' + step);
this._index++;
if (this._active < this._states.length) {
this.moveNext();
}
});
}
});
Tying the two ideas together, you'll do something like:
var walker = new Walker(MyModule.lifecycle);
walker.on('before:step1', function() { /* do something amazing */ });
walker.on('before:step2', function() { /* do something fantastic */ });
walker.on('after:step3', function() { /* do whatever */ });
walker.start();
So, we've basically implemented a bastardized Command Pattern using deferreds to solve problems like this. We hook into module.start, but there's no reason you couldn't do something similar on app.start instead.
Drupal.attachBehaviours with jQuery infinitescroll and jQuery masonry
I am a little desperate here. I have been reading everything I was able to find on Drupal.behaviours but obviously its still not enough. I try running a masonry grid with the infinitescroll plugin to attach the new images to the masonry. This works fine so far. The next thing I wanted to implement to my website is a hover effect (which shows information on the images) and later fancybox to show the images in a huger size.
(function ($) {
Drupal.behaviors.views_fluidgrid = {
attach: function (context) {
$('.views-fluidgrid-wrapper:not(.views-fluidgrid-processed)', context).addClass('views-fluidgrid-processed').each(function () {
// hide items while loading
var $this = $(this).css({opacity: 0}),
id = $(this).attr('id'),
settings = Drupal.settings.viewsFluidGrid[id];
$this.imagesLoaded(function() {
// show items after .imagesLoaded()
$this.animate({opacity: 1});
$this.masonry({
//the masonry settings
});
});
//implement the function of jquery.infinitescroll.min.js
$this.infinitescroll({
//the infinitescroll settings
},
//show new items and attach behaviours in callback
function(newElems) {
var newItems = $(newElems).css({opacity: 0});
$(newItems).imagesLoaded(function() {
$(newItems).animate({opacity: 1});
$this.masonry('appended', newItems);
Drupal.attachBehaviours(newItems);
});
});
});
}
};
})(jQuery);
Now I read that I need to Reattach the Drupal.behaviours if I want the hover event to also take place on the newly added content.
(function ($) {
Drupal.behaviors.imgOverlay = {
attach: function (context) {
var timeout;
$('.img_gallery').hover(function() {
$this = $(this);
timeout = setTimeout(change_opacity, 500);
}, reset_opacity);
function change_opacity() {
//set opacity to show the desired elements
}
function reset_opacity() {
clearTimeout(timeout);
//reset opacity to 0 on desired elements
}
}
};
})(jQuery)
Where do I now write the Drupal.attachBehaviours() to make it work actually? Or is there some other error I just dont see atm? I hope I wrote the question so that its understandable and maybe it also helps somebody else, since I experienced that there is no real "official" running Version of this combination in drupal 7.
Ok, the solution is actually pretty simple. When writing it correctly than it also runs. its of course not Drupal.attachBehaviours() but Drupal.attachBehaviors() . So this combination now works and I am finally relieved :).