in the vis.js timeline there is an option to have nested groups, that expands and collaps on clicks, however if i reload the site after i have expandede some of the groups, they all reset back to collapsed state.
what i would like, was a way to set a cookie or session when i expand or collapses the group, that way i could read that session or cookie on reload and inform the script if XX group should be expandede or not.
unfortunatly i ain't that good at js. and have a hard time figuring out how to get the Group information needed.
what i have found is this code snippet
ItemSet.prototype._onGroupClick = function (event) {
var group = this.groupFromTarget(event);
if (!group || !group.nestedGroups) return;
var groupsData = this.groupsData;
if (this.groupsData instanceof DataView) {
groupsData = this.groupsData.getDataSet();
}
group.showNested = !group.showNested;
var nestedGroups = groupsData.get(group.nestedGroups).map(function (nestedGroup) {
if (nestedGroup.visible == undefined) {
nestedGroup.visible = true;
}
nestedGroup.visible = !!group.showNested;
return nestedGroup;
});
groupsData.update(nestedGroups);
if (group.showNested) {
util.removeClassName(group.dom.label, 'collapsed');
util.addClassName(group.dom.label, 'expanded');
} else {
util.removeClassName(group.dom.label, 'expanded');
var collapsedDirClassName = this.options.rtl ? 'collapsed-rtl' : 'collapsed';
util.addClassName(group.dom.label, collapsedDirClassName);
}
};
That seams to handle the Onclick funtion that expand and collaps the group, what i don't know is how to set a cookie with the group information.
i just need to have the cookie spit out like Groupid=x ..
is there a way to do that, or am i on a wild goosechase and looking at this completely wrong?
thanks for any help
Update
After i have looked it over once more, i am certain i am the right place to make the cookie ( to remember the state of the group )
if i place a alert like this
if (group.showNested) {
alert("something");
util.removeClassName(group.dom.label, 'collapsed');
util.addClassName(group.dom.label, 'expanded');
}
So i can make something when i click the group to expand it, what i still can't figure out is how to get the Group id, that i need for my cookie to remember.
so my clients can leave the site and return and it will remember what gruops where expandede and collapsed.
so any help with the Groupid or how to find it would be much appriciated.
Related
I made a fairly basic "biomaker" website where the user can edit the card through several <div contenteditable="true">s, and it also uses a simple javascript to allow the user to cycle through several preset colors.
After receiving feedback from several users it seems that it would be better if the page could save the user's previous information upon closing/refreshing the tab.
I did a little research and I came upon the localStorage function but I'm not sure if it can be applied to the color changer and more importantly, the <div contenteditable="true". I'm wondering if 1) it's possible and 2) if so, how I can make it save the content, since what the user puts in the div doesn't affect the backend.
Thanks in advance for any help.
Disclaimer: I've seen a lot of people bashing others because they're asking for "free code". I'm not asking for that here, I'm just hoping people can 1) tell me if it's possible and 2) can point me in the right direction.
EDIT: Thanks for the help! I was able to find a solution.
Yes it is posssible.
You first should check whether localStorage is available in the user's browser, for what you can use this function that works in all browsers (i use it too on my website):
function storageAvailable(type) {
var storage;
try {
storage = window[type];
var x = "__storage_test__";
storage.setItem(x, x);
storage.removeItem(x);
return true;
}
catch (e) {
return e instanceof DOMException && (e.code === 22 || e.code === 1014 || e.name === "QuotaExceededError" || e.name === "NS_ERROR_DOM_QUOTA_REACHED") && (storage && storage.length !== 0);
}
}
Use it like this:
editableDiv = dopcument.getElementById("print"); // get the editable div
editableDiv.addEventListener("input", function() { // this function will be executed whenever the content of the editableDiv changes
if (storageAvailable("localStorage")) { // check for storage availability
divcontent = editableDiv.innerHTML; // get contents of the editableDiv
window.localStorage.setItem("divcontent", divcontent); // add them to the localStorage
} else { // if localStorage is not supported, notify the user about it
alert("Your browser does not support localStorage or you disabled it, the things you entered could not be saved !");
}
});
and when the user comes back, you can restore the contents:
editableDiv = document.getElementById("print"); // get the editable div
window.addEventListener("load", function() { // this function is executed whenever the page is loaded
if (storageAvailable("localStorage")) { // check for storage availability
divcontent = window.localStorage.getItem("divcontent"); // get the saved divcontent
if (divcontent === null) { // if the user never modified the divcontent before (or cleaned his localStorage), do nothing
} else {
editableDiv.innerHTML = divcontent; // write it into the editableDiv
}
} else { // if strorage not available, notify the user
alert("Your browser does not support localStorage or you disabled it, your previous work could not be restored !");
}
});
Feel free to modify this code to your needs, and notify me about any problems you have with it ! (couldn't test it, am busy right now)
Apologies if my question sounds like a newbie question...but I could not find an appropriate answer.
I am trying to create 2 back buttons on my website that would bring the visitor back :
1. to the very first page he visited on my website
2. to the previous site (not page) he visited - so the site that brought him to my site basically.
Is this feasible by any chance ? And if so, can you please share your insights on the way to do it ?
Many thanks in advance for any help !
Maybe you can do something like this:
$(document).ready(function() {
var sessionIsNew = sessionStorage.getItem('sessionIsNew');
if (sessionIsNew == null) {
sessionStorage.setItem('sessionIsNew', 'false');
sessionStorage.setItem('entryUrl', window.location.href);
}
}
// On click to your back button:
function backToEnrtryPage () {
entryUrl = sessionStorage.getItem('entryUrl');
if (entryUrl != null) {
window.location.href = entryUrl;
}
}
More information about session in JavaScript
https://developer.mozilla.org/de/docs/Web/API/Window/sessionStorage
You can do it by manupulating the browser history, so to move once backward through history, just do:
window.history.back();
to back to initial entry page you can do somting like
var numberOfEntries = window.history.length;
window.history.go(- numberOfEntries );
the full api documentation from mozilla : https://developer.mozilla.org/en-US/docs/Web/API/History_API
I have been struggling for a few hours with something that sounds very simple.
What i have is a list of checkboxes, if a checkbox is checked the page url will change (to save a filter option, so you can share the url to the filter). It works perfectly except one point, when the user wants to go back. the checkboxes should be unchecked.
Using jQuery
setBoxes() is the function;
I tried:
function pageLoad() {
setBoxes();
}
And
$(document).ready(function(){
setBoxes();
}
Also I added
window.onunload = function(){};
But none of these solutions worked ( the function doesn't run, i checked it).
After that I thought I might could do it with php (get the url to an array, if in the array echo checked), but php wont run again (I guess its cashed).
Is there any option i can try cause I really cant solve this simple looking problem.
because my code is very big I made a very small example http://jsfiddle.net/yzoztp05/1/ of the situation, updating the url in jsfiddle is blocked so it doesn't work completely.
To make the situation more clear i made a video https://www.youtube.com/watch?v=jaSc1fmaJD4&feature=youtu.be.
the code to set my checkboxes
//convert the url to array
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
// Set the checkboxes to checked if they are in the array
function setBoxes()
{
var prijsUrl = getQueryVariable("prijs");
// first set all checkboxes on unchecked
$('.prijsFilterBox').prop('checked', false);
alert("Loaded");
if(prijsUrl != false)
{
var res = prijsUrl.split("-");
for(var i = 0; i < res.length; i++ )
{
$('.prijsFilterBox[value='+res[i]+']').prop('checked', true);
console.log("prijs = "+res[i]);
}
}
else
{
console.log("prijs = null");
}
}
It works if I refresh the page, but it wont run on when user presses the back button. If its not possible to run javascript on page back I will try to make a different script with php.
TLDR
How can i run a jquery function on page back (all browsers)?
It may be possible ( and I think that many are using this way ) to have timeOut function that is called every 500ms that checks if URL has changed, but instead of using '?' use hash '#' so user is always on same page and you can catch URL change.
If you need to stick to '?' , maybe you could do something with window.onbeforeunload function.
I've made a general hash up of the following function. Basically linking this function to the onclick method of a button. The idea being that if the next page/div is visible to navigate there else navigate to the next one, and so on. If there are no further pages visible (from the current page) then alert the user. Just in case they carry on clicking.
Here is my code:
function showNext(id){
var currPage = id.match(/\d+/)-1;
var pages = [document.getElementById("page2"),document.getElementById("page3"),document.getElementById("page4")];
var next = ["page2marker","page3marker","page4marker"];
var valid = false;
for (var i=currPage; i<=pages.length; i++){
var Icansee = pages.some(function() { pages[i].style.display == "block"});
if(Icansee){
valid = true
}
if(valid){
return window.location.hash = next[i];
}
if(!valid){
alert("No other pages to navigate to");
}
}
}
I know that my use of the array some function is incorrect, along with plenty of other things. Just need a general shove in the right direction.
Edit: Just realised that array some is an ECMAScript 5 addition which isn't supported by the piece of software that I'm using. So I will need to find another way of solving this one. Any ideas?
There's a sample implementation of Array.prototype.some for browsers that don't support it natively at https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/some
I have a function that runs on key tab press, it works fine when i put a javascipt alert in between the code, any kind of alert,if i remove the alert it stops working : my function
//Function to set the tab feture for focus to work properly on fields with autosuggestion(location and name)
function setFocusOnTab(name) {
var focusElement = "";
if(name == "name") {//For main contact field
if ($("#email").is(":visible")) {
$('#email').focus();
}
} else if(name == 'location_name') {//For main contact field
$("#country").focus();
} else {//For extra contact field
var outputDataCurrentVal = name.lastIndexOf('record_');
if(outputDataCurrentVal < 0) {
//ADDTIONAL CONTACT TAB
var outputDataCurrentName = name.lastIndexOf('_name_');
if(outputDataCurrentName >= 0) {
//Replacing the name to get location name.
locName = currentName.replace("_name_","_designation_");
focusElement = locName;
} else {
var outputDataCurrentLoc = name.lastIndexOf('_location_');
if(outputDataCurrentLoc >= 0) {
//Replacing the location name to get country name.
countryName = name.replace("_location_","_country_");
focusElement = countryName;
}
}
} else {
//Extra CONTACT TAB
var outputDataCurrentName = name.lastIndexOf('_name_');
if(outputDataCurrentName >= 0) {
//Replacing the name to get location name.
locName = currentName.replace("_name_","_location_");
focusElement = locName;
} else {
var outputDataCurrentLoc = name.lastIndexOf('_location_');
if(outputDataCurrentLoc >= 0) {
//Replacing the location name to get country name.
countryName = name.replace("_location_","_country_");
focusElement = countryName;
}
}
}
$("#" + focusElement).focus();
return false;
}
}
Sounds like you need something to halt your code, which is what alert() does.
You may need a callback instead.
What might be happening with alert() is that calling it causes the current window to lose focus (as focus moves to the new pop-up dialogue box), and after it's finished it re-focuses the window. This will trigger focus and blur events which might confuse your script, and in Safari the window may not re-focus at all.
It's not clear to me what you are doing here... how are you attaching this code to a tab key event? What event is supposed to be cancelled by the return false;? If you are using keypress, then that simply won't get called for the Tab key in IE, Safari or Chrome. If you are using keydown, then cancelling the event won't prevent the tabbing in Opera. And what about Shift-Tab?
Reproducing/altering browser keyboard behaviour is hard: it's much better not to if there's any other way. For making controls like a drop-down suggester work you are probably much better off just setting the declarative tabIndex on the elements concerned and letting the browser work out how to sort out the tabs from there.
I should write something on this post. I read so many blogs and post but couldn't get the right solution from anywhere else. Even in this post, I looked more detail and tried each of solution.
Finally reading the answer of bobince, I could figured out the solution. In my case, I have set the focus to another textbox ( not required type) and later when I finish my job, I set back focus to original one. So the morel story is we just need to set focus somewhere else from current element which actually done by alert and I have replaced that on by setting the focus on non required element.