Off-canvas panel closes when removing element - javascript

I am setting up a small shop using simpleCart.js and Bootstrap 3.
For displaying the cart I was hoping to use an off-canvas panel that I have enabled using the Jasny-bootstrap add-on. Everything works fine but when I eliminate elements from the cart the off-canvas panel closes. This way the user his unable to modify content in the cart without having to reopen the panel after each click. How can I keep the panel open until the user chooses to close it?
Here is an FIDDLE demonstrating the issue
From looking at this snippet from (link straight to code) simpleCart.js - line 337-353, am I right in assuming that once you remove an item it reloads the cart and therefore it causes the panel to close? If this is the case, then how would a version of this code look like to fix my problem?
// empty the cart
empty: function () {
// remove each item individually so we see the remove events
var newItems = {};
simpleCart.each(function (item) {
// send a param of true to make sure it doesn't
// update after every removal
// keep the item if the function returns false,
// because we know it has been prevented
// from being removed
if (item.remove(true) === false) {
newItems[item.id()] = item
}
});
sc_items = newItems;
simpleCart.update();
},
Thank you in advance :)

The option autohide controls if the navbar should be closed when a user clicks outside of it. Setting it to false, means it stays open until the user clicks on the 'CLOSE PANEL HERE' link.
See the fiddle
Note that normally the navmenu doesn't close when clicked on a link inside of it. I'm not sure why this is happening in your case.

Related

Cypress is not closing menu when I click on a button from menu

Here I am testing a Vue application using cypress. I have a menu on my app screen. Normally when I click a button on the menu it closes the menu and performs the functionality. But when I do it using cypress, it performs the functionality but it can't close the menu.
Here is my sample code.
it('Open menu, Click on sort button(A -> Z): Check ascending order of data', function () {
cy.server();
cy.route("GET", getTableListAPI).as('getTableList');
cy.route("GET", getFirstPageTableData).as("getTableDetails");
//Asc sort Api
cy.route("GET", ascendingSortApi).as("getAscData");
cy.visit(testTargetURL);
//Wait to load data
cy.wait('#getTableList');
//Select the target tablefrom the left pane
cy.get(selectors.navigationDrawer).find('a').contains(testTableWithData).click();
//Wait to load data
cy.wait('#getTableDetails');
//Open menu
cy.get('th').eq(1).find('button').click();
//Click on first button.
cy.get(selectors.filterMenu).within(($menu) => {
cy.get('.v-item-group').find('button').eq(0).click();
})
//Wait to load data
cy.wait('#getAscData');
//Check visibility
cy.get(selectors.filterMenu).should('not.be.visible');
//Check ascending order data
cy.get('table').within(($table) => {
cy.get('tr').find('td').should('contain','');
cy.get('tr').find('td').should('contain','-9223372036854776000');
})
})
Note: I have also tried
click({ force: true });
cy.wait(500) // Following (https://github.com/cypress-io/cypress/issues/3135#issuecomment-454420548) this issue.
But still, it is not working for me. Please suggest something else for me.
Thanks in advance.
It seems to me the problem is that you are using {force:true} and that doesn`t trigger the function to close the menu. Try selecting some parent element of the button that is native to the menu and click it.

Content hide/show

my goal is to hide the content of my homepage when someone visits. onClick to begin button the content should be shown. Content should stay open when user goes to other page and comes back to homepage. But it will be hidden when user closes the window and opens up the homepage again. To achieve this goal I have put the following code but it keeps the content open even when user closes and opens the window. So please help me out.
if (! localStorage.noFirstVisit) {
// hide the element
$("#content").hide();
// check this flag for escaping this if block next time
localStorage.noFirstVisit = "1";
}
Another issue is when the content shows the design gets little messed up(by widening the divs, bringing horizontal scroll)
$(".roll-button").click(function(){
$("#content").show();
});
I would highly appreciate if you check website, suggest me fix or show me proper way to achieve this goal. url:iamicongroup.com
You can totally use sessionStorage to detect whether it is new tab(window) or not.
When you first visit this page, set sessionStorage.noFirstVisit = "1";.
After you go to another page and back, sessionStorage.noFirstVisit is still "1".
But when you close the tab or browser and open the page newly again, sessionStorage.noFirstVisit will be undefined.
Documentation is here
The documentation also provide the difference between sessionStorage and localStorage.
I would suggest reading this: Detect Close windows event by Jquery
It goes over window unloading (beforeunload), which I believe is what you're after. You can set/unset your localstorage values there based on certain criteria being met; for example:
$(window).on("beforeunload", function() {
if(localStorage.noFirstVisit = "1" {
// do something
localStorage.noFirstVisit = "[someValue]"
}
else {
// do something
localStorage.noFirstVisit = "1"
}
})
Another issue is when the content shows the design gets little messed up(by widening the divs, bringing horizontal scroll)
how about adding something like 'ng-cloak' in angular, to avoid the undesirable flicker effect caused by show/hide.
when clicking the roll-button, it prevents the divs from showing unfinished..

Bootstrap 4 Sidebar menu to stay open on page reload

I integrated a menu based on https://www.codeply.com/go/T2mpwMOt60 into a website I'm building. Having used it during the build process there is one feature which I feel it misses.
Ideally I would like to have a menu item stay open when navigating to another page. So, looking at the sample menu, that would mean that if Item 3 was open, it should stay open when the page is reloaded, but close if another menu heading was clicked.
Given that every menu section starts with
<a href="#menu1"
<a href="#menu2"
etc, and when opened, the class changes from
class="list-group-item collapsed"
to
class="list-group-item"
I figured that the current menu state could be written to local storage and then read back in on page load to restore the previous state.
Does anyone know of examples that would point me in the right direction on coding this type of functionality?
I've just tried using the following script to save to localStorage
$(document).ready(function () {
$('a').click(function() {
//store the id of the collapsible element
localStorage.setItem('collapseItem', $(this).attr('href'));
});
var collapseItem = localStorage.getItem('collapseItem');
if (collapseItem) {
$(collapseItem).collapse('show')
}
})
It doesn't reopen the menu, but I suspect that is due to what is getting put into local.storage
As an example, When I first click to open the 'customers' sub menu, it stores #menu5, which is the sub menu I would want to be reopened on reload, but when clicking any of the children inside that menu, the stored data will change to the url of the last clicked link.
Additional note, if I reload the page whilst #menu1, #menu2 etc is stored, then it loads with the menu displaying correctly. So it is purely a case of figuring out how to NOT store anything other than the initial #menu open.
The problem is with the objects you are referencing in the event handler.
$(document).ready(function () {
$('a').click(function() {
//store the id of the collapsible element
localStorage.setItem('collapseItem', $(this).attr('href'));
});
var collapseItem = localStorage.getItem('collapseItem');
if (collapseItem) {
$(collapseItem).collapse('show')
}
})
On line 2, it shows that the function will trigger if an a tag is clicked. Try using something else such as button and use that as the link that opens the menus, rather than using the same tag as the one for the hyperlinks. If you can't get that to work then maybe try adding something like an OnMouseDown attribute to each menu-opening button.
Or try my current solution, which checks for a different attribute before saving. This is one that should work, as long as you give each menu-opening link the name here:
<script>
$(document).ready(function () {
$('a').click(function() {
if($(this).attr('name') == "menubtn"){
//store the id of the collapsible element
localStorage.setItem('collapseItem', $(this).attr('href'));
};
});
var collapseItem = localStorage.getItem('collapseItem');
if (collapseItem) {
$(collapseItem).collapse('show')
}
})
</script>
Test 1
Test 2
I wrote those modifications assuming that $ was already defined in your full project, if not then I'll leave it to you to work on that. Tell me if this works.
The solution I used for this is below.
$(document).ready(function () {
$('a').click(function() {
var menuNumber = $(this).attr('href').slice(0, -1);
//console.log(menuNumber);
if (menuNumber == '#menu') {
localStorage.setItem('collapseItem', $(this).attr('href'));
}
var menuHome = $(this).attr('href').slice(-9, -4);
//console.log(menuHome);
if (menuHome == 'index') {
localStorage.setItem('collapseItem', '');
}
});
var collapseItem = localStorage.getItem('collapseItem');
if (collapseItem) {
$(collapseItem).collapse('show')
}
// Clear local storage on menu close action
$('#sidebar .list-group > div').on('hide.bs.collapse', function () {
localStorage.setItem('collapseItem', '');
})
})
I needed to be able to also clear localStorage if the Home link was clicked to prevent the menu from reopening on the last used submenu.
Also added is a check to clear the localStorage data if the arrow icon on the menu was used to close it.
Although it's unlikely that someone would close the accordion in this way and then refresh the page, I thought it better to be thorough.

tympanus multi-level-menu - how to remember opened panel on page reload

I've started using this plugin for multilevel side menu:
https://tympanus.net/codrops/2015/11/17/multi-level-menu/
When i grabbed example code from this page i saw that plugin don't it my needs.
I mean, when i will reload page, everytime main panel is opened, and i'm looking for any solution, to keep track about last opened panel.
I can use localstorge or cookies, but i don't see any way how to select opened, store this info and then call function to open this saved panel.
I don't provide example code, as i'm using this code from link.
Thank you for any ideas !
In the tympanus code when you select an item in the menu, the current class is added to the selected item (for menuItem and menuLevel). It means that you can get the current selected menuItem and menuLevel by matching this class and then save it in a cookie.
function getCurrentMenuItemSelected() {
var currentMenuItem = $(".menu__item .menu__link--current");
console.log(currentMenuItem.html());
}
function getCurrentMenuLeveItemSelected() {
var currentMenuLevel = $(".menu__level.menu__level--current");
console.log(currentMenuLevel.data("menu"));
}
getCurrentMenuItemSelected();
getCurrentMenuLeveItemSelected();

Hiding and showing div causes list in this div to scroll to top

I am kind of simulating that I have multiple pages by defining 2 divs that each act as a page. Only one page at the time is shown. Those divs are:
divProjectList
divProjectListItem
When the user opens the website, the div 'divProjectList' is shown. This div contains an un-ordered list with projects. This is a long list, so it is sortable.
As soon the user clicks an item from the list, I do a $('#divProjectList').hide() followed by a $('#divProjectListItem').show(). The list is now invisible for the user and instead is presented with project details for the item he selected from the list.
As soon as the user clicks the close button it works the other way around. The project details page is being hidden and the project list page is being shown again.
If the user scrolled down a bit (or a couple of pages) then the project list is scrolled back to the first item and the item that he clicked is now out of view.
I have a JSFiddle that has a hide- and show-button and a list which simulates the behavior that I described above.
I would like to know if it is expected behavior what I see here and how I could circumvent this. For now I solved it by doing a $.ScrollTo:
$('#' + currentProjectId).ScrollTo({duration: 0, offsetTop: 151})
This jquery code reminds you where you scrolled to, and puts you back there when you press the show button:
http://jsfiddle.net/py7zemLo/1/
jquery:
var scroll;
$("#btnHide").on("click", function (e) {
scroll = $(document).scrollTop();
// $("#divOptions").hide();
$("#divOptions").css('display', 'none');
})
$("#btnShow").on("click", function (e) {
// $("#divOptions").show();
$("#divOptions").css('display', 'block');
if ( scroll !== null ) {
$(document).scrollTop(scroll);
}
})
I hope this helps you!

Categories

Resources