I am creating a online text editor.
I have using jQuery to store the information on the client side
$(document).ready(function () {
$('#type-name').blur(saveSettings);
loadSettings();
});
function loadSettings() {
$('#type-name').val(localStorage.typewriter);
}
function saveSettings() {
localStorage.typewriter = $('#type-name').val();
}
This will save what the user has wrote but not everything. It seems to only save a certain amount and reverting back to what was there before. But when I leave it for 20 seconds it saves and works. What can I do to change the save rate?
$(document).ready(function () {
var blur_timeout_id;
$('#type-name').blur(function () {
if (blur_timeout_id) {
clearTimeout(blur_timeout_id);
}
blur_timeout_id = setTimeout(function () {
saveSettings();
}, 1000); // or 10000, etc.
});
loadSettings();
});
function loadSettings() {
$('#type-name').val(localStorage.typewriter);
}
function saveSettings() {
localStorage.typewriter = $('#type-name').val();
}
Related
I am trying to get the form values and display the values using html5 local storage
I have written html and js code but its not working
can you tell me how to fix it..
providing my code below
i have put in the fiddle too
https://jsfiddle.net/r977y9zb/2/
code
$(document).ready(function () {
function init() {
if (localStorage["name"]) {
$('#name').val(localStorage["name"]);
}
if (localStorage["email"]) {
$('#email').val(localStorage["email"]);
}
if (localStorage["message"]) {
$('#message').val(localStorage["message"]);
}
}
init();
});
$('.stored').keyup(function () {
localStorage[$(this).attr('name')] = $(this).val();
});
$('#localStorageTest').submit(function() {
localStorage.clear();
});
The only issue is your event handlers are not inside $(document).ready otherwise the code works fine:
$(document).ready(function() {
init();
});
function init() {
if (localStorage["name"]) {
$('#name').val(localStorage["name"]);
}
if (localStorage["email"]) {
$('#email').val(localStorage["email"]);
}
if (localStorage["message"]) {
$('#message').val(localStorage["message"]);
}
$('.stored').keyup(function() {
localStorage[$(this).attr('name')] = $(this).val();
});
$('#localStorageTest').submit(function() {
localStorage.clear();
});
}
DEMO
localStorage uses the .getItem() and .setItem() methods for accessing and setting stored data. You are passing your names directly to localStorage with brackets ([, ]) as if it were an array, which it is not.
As an aside, there is no need for your code to be wrapped in the init function, given that you only want to run the function once, when the page is ready.
Try this:
$(document).ready(function () {
if (localStorage.getItem("name")) {
$('#name').val(localStorage.getItem("name"));
}
if (localStorage.getItem("email")) {
$('#email').val(localStorage.getItem("email"));
}
if (localStorage.getItem("message")) {
$('#message').val(localStorage.getItem("message"));
}
$('.stored').keyup(function () {
localStorage.setItem($(this).attr('name')) = $(this).val();
});
$('#localStorageTest').submit(function() {
localStorage.clear();
});
});
I am currently working with PhantomJS and CasperJS to scrape for links in a website. The site uses javascript to dynamically load results. The below snippet however is not getting me all the results the page contains. What I need is to scroll down to the bottom of the page, see if the spinner shows up (meaning there’s more content still to come), wait until the new content had loaded and then keep scrolling until no more new content was shown. Then store the links with class name .title in an array. Link to the webpage for scraping.
var casper = require('casper').create();
var urls = [];
function tryAndScroll(casper) {
casper.waitFor(function() {
this.page.scrollPosition = { top: this.page.scrollPosition["top"] + 4000, left: 0 };
return true;
}, function() {
var info = this.getElementInfo('.badge-post-grid-load-more');
if (info["visible"] == true) {
this.waitWhileVisible('.badge-post-grid-load-more', function () {
this.emit('results.loaded');
}, function () {
this.echo('next results not loaded');
}, 5000);
}
}, function() {
this.echo("Scrolling failed. Sorry.").exit();
}, 500);
}
casper.on('results.loaded', function () {
tryAndScroll(this);
});
casper.start('http://example.com/', function() {
this.waitUntilVisible('.title', function() {
tryAndScroll(this);
});
});
casper.then(function() {
casper.each(this.getElementsInfo('.title'), function(casper, element, j) {
var url = element["attributes"]["href"];
urls.push(url);
});
});
casper.run(function() {
this.echo(urls.length + ' links found:');
this.echo(urls.join('\n')).exit();
});
I've looked at the page. Your misconception is probably that you think the .badge-post-grid-load-more element vanishes as soon as the next elements are loaded. This is not the case. It doesn't change at all. You have to find another way to test whether new elements were put into the DOM.
You could for example retrieve the current number of elements and use waitFor to detect when the number changes.
function getNumberOfItems(casper) {
return casper.getElementsInfo(".listview .badge-grid-item").length;
}
function tryAndScroll(casper) {
casper.page.scrollPosition = { top: casper.page.scrollPosition["top"] + 4000, left: 0 };
var info = casper.getElementInfo('.badge-post-grid-load-more');
if (info.visible) {
var curItems = getNumberOfItems(casper);
casper.waitFor(function check(){
return curItems != getNumberOfItems(casper);
}, function then(){
tryAndScroll(this);
}, function onTimeout(){
this.echo("Timout reached");
}, 20000);
} else {
casper.echo("no more items");
}
}
I've also streamlined tryAndScroll a little. There were completely unnecessary functions: the first casper.waitFor wasn't waiting at all and because of that the onTimeout callback could never be invoked.
I made a demo which is here. All you have to do is start typing in the text field, make sure you have the console open. So as you type, you'll instantly see the OMG Saved, and the counter in the console will go nuts.
Now click the button, watching the console you should see something like 11 or some other value, but you'll also see the counter reset and continues going. I do not want this. I want the counter to stop, I have clicked a button and while the page hasn't refreshed, the counter should stop if I understand these docs on setInterval().
the app I am developing which uses code very similar to this, does not refresh as most single page apps don't. So it is imperative that I have control over this setInterval.
So my question is:
How do I reset the counter such that, until I type again in the input box OR if the input box element cannot be found the flash message does not show up, the interval is set back to 0.
update
The following is the JavaScript code, which is run on the link provided above.
var ObjectClass = {
initialize: function() {
$('#flash-message').hide();
},
syncSave: function() {
$('#content').keypress(function(){
SomeOtherClass.autoSave = setInterval( function(){
$('#flash-message').show();
$('#flash-message').delay(1000).fadeOut('slow');
}, 500);
});
},
listenForClick: function() {
$('#click-me').click(function() {
console.log(SomeOtherClass.autoSave);
clearInterval(SomeOtherClass.autoSave);
});
}
};
var SomeOtherClass = {
autoSave: null
};
ObjectClass.initialize();
ObjectClass.syncSave();
ObjectClass.listenForClick();
You have to put this
clearInterval(SomeOtherClass.autoSave);
before this line:
SomeOtherClass.autoSave = setInterval( function(){
So that you kill the previous interval and you ahve ONLY ONE interval at the same time
Your code will be:
var ObjectClass = {
initialize: function () {
$('#flash-message').hide();
},
syncSave: function () {
$('#content').keypress(function () {
clearInterval(SomeOtherClass.autoSave);
SomeOtherClass.autoSave = setInterval(function () {
$('#flash-message').show();
$('#flash-message').delay(1000).fadeOut('slow');
}, 500);
});
},
listenForClick: function () {
$('#click-me').click(function () {
console.log(SomeOtherClass.autoSave);
clearInterval(SomeOtherClass.autoSave);
});
}
};
var SomeOtherClass = {
autoSave: null
};
ObjectClass.initialize();
ObjectClass.syncSave();
ObjectClass.listenForClick();
What you need to do is use a timeout instead of an interval, like this:
var ObjectClass = {
initialize: function() {
$('#flash-message').hide();
},
syncSave: function() {
$('#content').keypress(function(){
SomeOtherClass.autoSave = setTimeout( function(){
$('#flash-message').show();
$('#flash-message').delay(1000).fadeOut('slow');
}, 500);
});
},
listenForClick: function() {
$('#click-me').click(function() {
console.log(SomeOtherClass.autoSave);
if(typeof SomeOtherClass.autoSave === 'number'){
clearTimeout(SomeOtherClass.autoSave);
SomeOtherClass.autoSave = 0;
}
});
}
};
var SomeOtherClass = {
autoSave: 0
};
ObjectClass.initialize();
ObjectClass.syncSave();
ObjectClass.listenForClick();
I have this javascript code:
var logout_warning = 6000;
$(document).ready(function () {
window.setTimeout(function () {
$('#logout_warning').reveal();
}, logout_warning)
});
$(document).ready(function () {
window.setTimeout(function () {
alert("logout");
//location.href = "/login/logout.php?url=/index.php?r=inactivity";
}, logout_warning*2)
});
that displays a warning after 6000ms then redirects to a URL to logout a user after 12000ms
I have this a href link:
Stay Logged In
which i want to reset the time on click to stop the user from being logged out, i created this function but im not sure what to put inside it
function ResetLogoutTimer() {
}
try this:
var log_outer = window.setTimeout(function () {
alert("logout");
//location.href = "/login/logout.php?url=/index.php?r=inactivity";
}, logout_warning*2)
function ResetLogoutTimer() {
window.clearTimeout(log_outer);
}
Sorry for poor English, its my second language.
You should try:
var timeoutID = window.setTimeout(function () {
$('#logout_warning').reveal();
}, logout_warning)
and than
function ResetLogoutTimer() {
window.clearTimeout(timeoutID);
}
The docs for it https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout
One last thing, do not use w3c schools for learning javascript (the docs are not complete , instead use mdn site https://developer.mozilla.org/pl/docs/JavaScript
I'm new to jQuery and I need a bit of help. I'm using this jQuery script as a testimonial rotator and it works like a charm but I just need to make one small tweak. I need it to be able to pause on hover and then restart when the mouse leaves the div. How can I do this?
This is the script I'm using:
function fadeMyContent() {
$(".testimonial:first").fadeIn(1000).delay(3000).fadeOut(1000,
function() {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}
fadeMyContent();
});
Here is a JSFiddle.
There is a plugin that will provide all the functionality you need and be more reliable called jQuery Cycle 2.
It provides a 'pause-on-hover' option when initialising it.
change the definition of fadeMyContent (also called as destroying function) on hovering on ul#testimonial-rotator and on hover-out change it to old definition again. I have used setTimeout in place of delay because delay is not cancellable.
$(document).ready(function () {
var fadeMyContent;
var t
fadeMyContent = function () {
$(".rotate:first").fadeIn(1000)
t = setTimeout(function () {
$(".rotate:first").fadeOut(1000,
function () {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}, 3000)
}
var fadeMyContentDummy = function () {
$(".rotate:first").fadeOut(1000,
function () {
$(this).appendTo($(this).parent());
fadeMyContent()
});
}
fadeMyContent();
$('#testimonial-rotator').hover(function (e)
{
window.clearTimeout(t)
$('.rotate:first').clearQueue()
fadeMyContent = function () {
return false;
}
},
function (e)
{
fadeMyContent = function () {
$(".rotate:first").fadeIn(1000)
t = setTimeout(function () {
$(".rotate:first").fadeOut(1000,
function () {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}, 3000)
}
fadeMyContentDummy()
})
});
DEMO