Kryptronic Software Support Forum

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.

#1 02-24-2020 01:07:13

garden1
Member
Registered: 02-06-2020
Posts: 61

Categories Content-Only Javascript

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

 

#2 02-24-2020 09:13:32

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19485
Website

Re: Categories Content-Only Javascript

I'm not sure what you're question is.  I looked at your main nav menu and it looks like it's working as you intend without and JS interactivity.


Nick Hendler

Offline

 

#3 02-24-2020 09:51:39

garden1
Member
Registered: 02-06-2020
Posts: 61

Re: Categories Content-Only Javascript

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

 

#4 02-25-2020 11:20:07

garden1
Member
Registered: 02-06-2020
Posts: 61

Re: Categories Content-Only Javascript

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

 

#5 02-25-2020 11:34:54

garden1
Member
Registered: 02-06-2020
Posts: 61

Re: Categories Content-Only Javascript

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

 

#6 02-25-2020 12:24:51

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19485
Website

Re: Categories Content-Only Javascript

Remove the class 'kwidget_clickcontrol' from your nav wrapper div. That will prevent all the click classes from being applied via JS.


Nick Hendler

Offline

 

#7 02-25-2020 12:31:00

garden1
Member
Registered: 02-06-2020
Posts: 61

Re: Categories Content-Only Javascript

How will that affect other widgets in the NAVBAR that are 'hamburger'ed?

Offline

 

#8 02-25-2020 13:02:19

garden1
Member
Registered: 02-06-2020
Posts: 61

Re: Categories Content-Only Javascript

I tried it - it broke the click-control on the other widgets

Offline

 

#9 02-26-2020 10:02:28

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19485
Website

Re: Categories Content-Only Javascript

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?


Nick Hendler

Offline

 

#10 02-26-2020 10:16:45

garden1
Member
Registered: 02-06-2020
Posts: 61

Re: Categories Content-Only Javascript

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

 

#11 02-26-2020 10:25:24

garden1
Member
Registered: 02-06-2020
Posts: 61

Re: Categories Content-Only Javascript

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

 

#12 02-26-2020 15:52:39

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19485
Website

Re: Categories Content-Only Javascript

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:

Code:

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');}

});

Nick Hendler

Offline

 

#13 02-27-2020 13:35:03

garden1
Member
Registered: 02-06-2020
Posts: 61

Re: Categories Content-Only Javascript

For anybody wanting to do the same, this is what I did to common.min.js and it worked great!


Code:

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

 

Board footer