You are viewing this forum as a guest. Login to an existing account, or create a new account, to reply to topics and to create new topics.
Categories widget, displayed 'content only' in NAVBAR, seems to retain some javascript features.
I was about to try to style subcategory lists as (click) dropdowns for all screen sizes, but discovered that there was still some dropdown functionality in the 'content only' display. I'll leave the site up for now at gardenofone.com/storedev. I'm working on other parts of the site ongoing, but I'll leave the categories alone for now.
..maybe I can just remove some classes using javascript?
Offline
I'm guessing you only looked at it wide. Shrink it to thin or mid. ..and try clicking on "Colloidal Silver"
I've tried removing the "kwidget_wrap_click" and "kwidget_click" classes (chrome developer tools), but that only changed the js interactivity. I haven't read through the all.min.js like a novel, but I notice a lot of use of the .on() function, which works differently that other event handlers. I may be mistaken, but doesn't the .on() function assign listeners to each element individually? If the listener gets added to the div and then the class gets removed, the listener stays?
Last edited by garden1 (02-24-2020 10:07:20)
Offline
If I do the following:
~Load page at approx 1200px
~Remove kwidget_click class from #ecom_skinwidget_categories--CONTENT using developer tools
~Reduce screen width to mid/thin sizes.
Then the javascript interactivity goes away
If I just:
~Load the page with screen size at mid or thin
~Remove the kwidget_click class from #ecom_skinwidget_categories--CONTENT
Then there is still javascript interactivity
Offline
Can I..
-Add conditionals to the code that handles it in all.min.js?
or
-Add conditionals to the source code where the classes are added?
or
-Something else?
Last edited by garden1 (02-25-2020 11:35:10)
Offline
How will that affect other widgets in the NAVBAR that are 'hamburger'ed?
Offline
I tried it - it broke the click-control on the other widgets
Offline
Those should still retain hover controls, though. The clickcontrol class is just supplemental to allow clicks to act as hovers. Are you sure it's not working properly with clickcontrol removed?
Offline
I'll let you know once our site isn't throwing a script error, but I remember that hover still worked, but hamburgered menus wouldn't click to a dropdown anymore - the first click just followed the link.
Offline
If instead of removing classes from the wrapper, maybe the hover class from CONTENT could be removed before the page finishes loading? Just not sure where to do that. The page initially loads with the CONTENT div having a "hover" class, then when the js recognizes that the page is mid/thin, it removes the hover and adds click.
Offline
You can see all the JavaScript in {public}/media/scripts/common.min.js and can edit as necessary. In there you will see the function kWidgetManager() which has the class change code in it:
jQuery('.kwidget_clickcontrol .kwidget_wrap').each(function() { if (jQuery(this).find('.kwidget_icondrop .kwidget_hover, .kwidget_fulldrop .kwidget_hover')) {jQuery(this).addClass('kwidget_wrap_click');} });
Offline
For anybody wanting to do the same, this is what I did to common.min.js and it worked great!
jQuery('.kwidget_clickcontrol .kwidget_wrap').each(function() { if (jQuery(this).find('.kwidget_icondrop .kwidget_hover, .kwidget_fulldrop .kwidget_hover')) { //--Added the following line and associated closing bracket-- if (jQuery(this).attr('id') != "ecom_skinwidget_categories") { jQuery(this).addClass('kwidget_wrap_click');} } });
Offline