When creating two views i.e. grid and view I also include a button to switch from one to the other. The problem is when you go to a new page/refresh the page, the display is returned to the initial mode, not the view that has been selected. The following script wants to solve this problem.
Purpose
Creates view parameters that are saved and checked every time a new page is opened, and immediately activates the view button according to the saved view parameters
Prerequire
- Bootstrap classes;
d-none
- Jquery; selection, on click
- Javascripts;
localStore
,function
Script
function createItem(typeView) {
localStorage.myview = typeView;
}
function switchView(options){
$('#view-option .button-view').addClass('off-view');
if (options == 'grid'){
$('#book-view-list').addClass('d-none');
$('#book-view-grid').removeClass('d-none');
$('#view-option .button-view[view="grid"]').removeClass('off-view');
} else {
$('#book-view-grid').addClass('d-none');
$('#book-view-list').removeClass('d-none');
$('#view-option .button-view[view="list"]').removeClass('off-view');
}
}
$('#view-option .button-view').on('click', function() {
var option = $(this).attr('view');
createItem(option);
switchView(option);
});
// Crosscheck parameter page begin here!
let myView = localStorage.getItem("myview");
if (myView != null){
switchView(myView);
}
The principle of this script
The script function consists of two, namely the createItem
function to store view parameters, besides that there is a switchView
function which is a parameter to change the view with if logic script, which acts to change the css view to show/hide the grid/list view.
The active script requires an active click trigger, which executes the createItem
and switchView
functions; it should be noted that the button view html section has been given a parameter view=grid
or view=list
, so by taking one of these parameters to be stored and passed to the view switch.
The last script to check the parameters that have been saved and run the switch based on the parameters.
Top comments (0)