I'm using this jQuery plugin called "jQuery illuminate"
It's working fine and looks great but one more thing that I want!
I only want it to illuminate for 5 seconds.
Then it should stop illuminating.
But it looks there's no option for that.
Is it possible to stop illuminating after 5 seconds have pased?
My code is this
jQuery(document).ready(function () {
$(document).on('click', 'a#request', function() {
$(".box#input").val($(this).attr('value'));
var input = $(".box#input");
$(document).scrollTop(input .offset().top - 60);
input.focus();
input.illuminate({
'intensity': '0.3',
'color': '#e8f7e7',
'blink': 'true',
'blinkSpeed': '1000',
'outerGlow': 'true',
'outerGlowSize': '20px',
'outerGlowColor': '#228b22'
});
});
});
Add this to the end of your script:
setTimeout(function() {
$("#button").illuminateDie();
}, 5000); // 5000ms = 5 seconds
That calls the illuminateDie function after five seconds. The existence of the illuminateDie function is sort of hidden away in a comment part-way down the page you linked. (That's also quite a non-standard way to do it. The standard way for a plug-in to provide methods like that is as a string you feed into the one plug-in method, e.g. .illuminate("die") or more normally .illuminate("destroy"). But it's what the author decided to do...)
Update: Live Example using code from the updated question (source).
Looks like $('#button').illuminateDie() should work.
It should be straight forward if look into source code.
<script type="text/javascript">
$(document).ready(function(){
$('#button').illuminate({
'intensity': '0.3',
'color': '#98cb00',
'blink': 'true',
'blinkSpeed': '1200',
'outerGlow': 'true',
'outerGlowSize': '30px',
'outerGlowColor': '#98cb00'
});
setTimeout(function() {
$("#button").illuminateDie();
}, 5000);
});
</script>
As you can see in the comments of the plugin. You might have wanted to check those out.
Related
I'm using JS-Grid and I want to update a specific cell value right after i change a page.
Looking at the documentation , onPageChanged method seems like the right way to do it, but it doesn't work properly.
I have the following JS-Grid code:
$("#itemsListGrid").jsGrid({
width: "100%",
filtering: true,
sorting: !0,
viewsortcols : [true,'vertical',true],
paging: true,
autoload: true,
pageSize: 9,
pageButtonCount: 5,
controller: db,
fields: jsGrid_fields_mapping,
onPageChanged: function() {
alert("START onPageChanged");
var archiveRNTable = document.getElementsByClassName("jsgrid-table")[1];
archiveRNTable.rows[0].cells[2].innerText="valueIsChanged"
alert("END onPageChanged");
}
});
Running my app, i see that the alerts are popping BEFORE the page actually change. I'm trying to find a workaround to make it work.
Maybe not the most clean way to do it, but have you tried using setTimeout()?
So, in your case:
onPageChanged: function(args) {
alert("START onPageChanged");
// Wait some time to render table, then call function
setTimeout(function() {
var archiveRNTable = document.getElementsByClassName("jsgrid-table")[1];
archiveRNTable.rows[0].cells[2].innerText="valueIsChanged"
alert("END onPageChanged");
}, 300);
},
Background: the docs of JSGrid say that the event fires immediately after the page index is changed and doesn't wait for the data to load.
I have a jQuery-based scrolling news ticker that uses a set interval in milliseconds to control the delay between the reveal of each new section of text. I'd like to randomize the delay so that it more closely mimics the way a realtime news feed would look.
I've tried experimenting with some Math.random javascript where the newsTickerInterval parameter is, but JS is not my native language and I'm having trouble making it work.
Here's the jQuery function my scroller uses to config the display:
$(function () {
$(".demo2").bootstrapNews({
newsPerPage: 4,
autoplay: true,
pauseOnHover: true,
navigation: false,
direction: 'down',
newsTickerInterval: 3000,
onToDo: function () {
//console.log(this);
}
});
});
Any hints or suggestions would be greatly appreciated!
Instead of using newsTickerInterval, make a function getNewsTickerDelay that generates a random delay interval and call it using a setTimeout whenever needed.
$(function () {
$(".demo2").bootstrapNews({
newsPerPage: 4,
autoplay: true,
pauseOnHover: true,
navigation: false,
direction: 'down',
getNewsTickerDelay: function() {
var minimumInterval = 2000;
var maximumInterval = 5000;
var additionalInterval = Math.floor(
Math.random() * (maximumInterval - minimumInterval)
);
return minimumInterval + additionalInterval;
},
onToDo: function () {
//console.log(this);
}
});
});
So, every time your timeout is called, set another one with a random delay using getNewsTickerDelay
--EDIT--
As pointed out by #Barmar, you might need to tweak the implementation of the plugin in your case and implement its internal animate method to use your defined random interval instead of a fixed value. You'll just need to replace the self.options.newsTickerInterval in that plugin's JS to self.options.getNewsTickerDelay(). That is if you are willing to mutate the plugin's implementation.
So here's the code for infinite scroll on my blog. It works fine and everything, save for I don't want the part where it shows the gif for "Loading next set of posts." And the end where it says "Congrats you've reached the end of the internet." To show up because it's clunky and annoying.
<script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
<script>
$(document).ready(function(){
var $container = $('#entries');
$container.infinitescroll({
itemSelector: '#posts',
navSelector: '#pagination',
nextSelector: '#pagination a',
loadingImg: '',
loadingText: '',
bufferPx: 3000
},
function( newElements ) {
var $newElems = $( newElements );
$newElems.find('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: 'corners',
gutter: '3px',
borderRadius: '0px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
});
});
});
</script>
I asked someone else how to possibly fix this and they sent me here, https://github.com/infinite-scroll/infinite-scroll/wiki/Options . I toyed around with the options shown, but I wasn't able to get it working how I wanted it.
Help much appreciated. Thanks. (I'm pretty much a noob when it comes to javascript.)
Looks like your using the v1 properties but using v2 of the plugin, the v2 properties are on the URL you have provided https://github.com/infinite-scroll/infinite-scroll/wiki/Options, which will be some combination of the below, its difficult to tell from Docs how the work so you will need to experiment but start with:
finished: false
finishedMsg: '',
img:'',
msg:false
msgText:''
rather than:
loadingImg: '',
loadingText: '',
I want to repeat the animation of the myDoughnut animation every 5 seconds. At the moment it only animates on page load.
<script>
var doughnutData = [
{
value: 80,
color:"#74cfae"
},
{
value : 20,
color : "#3c3c3c"
}
];
var myDoughnut = new Chart(document.getElementById("CSS3").getContext("2d")).Doughnut(doughnutData);
</script>
I have tried using
setInterval("Chart();", 500);
I am still learning Javascript so a little unsure as to if I am referencing the correct function and where to place the setInterval code.
The animation can be viewed at the bottom of this website: http://www.chartjs.org/
Many thanks for any guidance and direction!
You should pass a proper function to setInterval.
I looked for a way to replay the animation of Chart object but i couldn't find any directive in ChartJS documentation.
Here is how you function should look like:
setInterval(function () {
myDoughnut = new Chart(document.getElementById("CSS3").getContext("2d")).Doughnut(doughnutData);
}, 2000);
Here is working JSFiddle.
setInterval takes a function as parameter.
Try:
setInterval(function(){ Chart(); }, 500);
In Scriptaculous 1, you could animate styles:
new Effect.Morph('id', {
style: { background: tomato },
duration: '4' });
But a better way was to keep the CSS and JS separate and merely reference a class:
new Effect.Morph('id', {
style: 'important',
duration: '4' });
Marvellous. But this doesn't seem to work with the new Scripty 2. Works:
$('id').morph('background: tomato', { duration: 4 });
Breaks:
$('id').morph('important', { duration: 4 });
What is the right way to animate using a class in Scripty 2? (I suspected Style, but the docs were vague.)
I checked out the source code and s2 only takes 'styleProp:value' for the style option. The string needs to have a colon.
The only method that will additionally take the class name as well 'styleProp:value' for the style option is a method called S2.FX.Operators.WebkitCssTransition. However, the S2.Extensions.webkitCSSTransitions are turned off by default. Although, the code in that method to be used to make your own patch to the .Morph method.