Forum Support

Shape 5
May 13, 2021, 05:28:57 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1] 2
  Print  
Author Topic: Masonry widget filter not working as expected  (Read 1100 times)
dache74
Jr. Member
**
Offline Offline

Posts: 21



« on: July 13, 2016, 09:32:37 AM »

I have created a second instance of the Masonry widget and assigned it to target a category page (the first instance is assigned to the home page). I have set the filter to the current category - Storage. However, there were two unexpected results:

1. The widget is not filtering out the articles according to category -- it still pulls in articles from all categories. The page does give me the option to click the category button and then it filters correctly, but it's not activated by default when the page loads. How do I get Masonry to filter a category by default?

2. Wordpress' default timeline-based category list is still visible under the Masonry widget. How do I disable it so Masonry is the only list view?

Here is the page: http://www.hackerdad.co/category/storage/

Thanks!
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #1 on: July 14, 2016, 09:35:15 AM »

There is currently no way to disable the content area in a category.  To do something similar, you would need to create a normal page or post and disable the content area in the S5 Options section of the editor, assign Masonry to that page/post, and link to the page/post instead of to the category.

As for the issue of the wrong category content, I'd probably need to take a look at the code to see if I can figure out why it's working that way.  Would you be able to PM me with FTP access details and WP login information?  If you can get it to me by the end of the day, I'll try to take a look at it first thing in the morning tomorrow.
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
dache74
Jr. Member
**
Offline Offline

Posts: 21



« Reply #2 on: July 14, 2016, 03:57:54 PM »

PM sent. Here is another issue I just came across with Masonry. When the home page loads, occasionally the posts in the columns will run over each other and the "load more" button - see the screenshot attached. This usually happens when the page is loaded the first time in the browser (not cached). I've experienced this in Chrome, Firefox and Safari.

Thanks for your help
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #3 on: July 15, 2016, 08:47:02 AM »

Thanks for the info.  I've replied to your PM.
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
dache74
Jr. Member
**
Offline Offline

Posts: 21



« Reply #4 on: July 15, 2016, 10:28:14 PM »

Tested the overlapping issue some more. Seems to be occurring in Chrome pretty consistently -- just hit refresh a few times, and it happens. Here is another screenshot, showing overlap of topics and over the Load More button.
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #5 on: July 18, 2016, 07:17:17 AM »

I can't seem to get the overlapping problem to happen on my computer, so I've forwarded this thread to the other developers to see if it happens for them.  I'll let you know what they find.
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #6 on: July 19, 2016, 07:06:08 AM »

Nobody else seems to be able to re-create the problem you're having; is it possible that something on your computer is causing it?
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
dache74
Jr. Member
**
Offline Offline

Posts: 21



« Reply #7 on: July 19, 2016, 07:59:55 AM »

I've tested it on 3 different computers at home and work -- OS X El Capitan, Windows 10, and Windows 7. On all three, the issues occurs pretty regularly in Chrome -- if it's not the first time the page is loaded, then it usually happens on the first or second page refresh. Firefox seems to be affected less frequently. When I inspect the code when the overlap happens, I see that class="item fadein" for the second Masonry article in the right column incorrectly calculates its position from the top:

<div class="item fadein" style="position: absolute; left: 458px; top: 348px;">

When the page loads correctly, the same module shows this position:

<div class="item fadein" style="position: absolute; left: 458px; top: 487px;">

So, in the right column it's off by 139px. In the left it's off by 214px. Hope this helps
« Last Edit: July 19, 2016, 01:23:03 PM by dache74 » Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #8 on: July 19, 2016, 01:29:41 PM »

I'm still unable to duplicate the issue, but I've passed on the additional information, hopefully I'll hear something else back soon.  I'll let you know when I've got something to tell you.
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
dache74
Jr. Member
**
Offline Offline

Posts: 21



« Reply #9 on: July 20, 2016, 06:55:41 PM »

Tristan,

I searched the support forums and it looks like there was another post with a similar problem for Masonry. The forum system won't let me view that post because my "paid membership" does not match that forum, but perhaps you can check it out. The snippet from the search results sounds like the same issue:

Subject:   Masonry Items overlap
in Masonry - Club http://www.shape5.com/component/option,com_smf/Itemid,75/topic,38652.0/

Masonry Items overlap by michaelbud
...  have more than one row of items in the masonry module, the items over lap each other,  ...
...  the window (even just slightly, The masonry Divs "pop" into place and reveal the  ...
...  content...
See attached pics of the overlap on your demo site.
I tried Safari and  ...
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #10 on: July 21, 2016, 07:14:19 AM »

The thread you linked to shows that the issue it was referencing was fixed in the Joomla version of Masonry before the WP version was even created, which should mean that the fix was included in the WP version, but I've contacted the developer that worked on the fox for the Joomla version; hopefully I'll hear back from him soon with more detail about how it was solved for Joomla.
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #11 on: July 22, 2016, 07:20:47 AM »

It would appear that none of the other developers can seem to duplicate the problem you are having; unfortunately, if we can't see it happening & look at the code, we won't be able to find out what is causing it.  Is it possible that a browser extension or something else on your computer is causing the issue?

The thread you linked to was solved long before the WP version of the plugin was created, and the only code that's different between the two is the code that handles the integration with WordPress - nothing that generates content structure, so it wouldn't have any impact on how things appear in the browser.

I recommend making sure your browser is fully updated, and checking to make sure you don't have any extensions that could be causing problems.
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
dache74
Jr. Member
**
Offline Offline

Posts: 21



« Reply #12 on: July 22, 2016, 12:23:57 PM »

Tristan,

It's puzzling that your team can't duplicate it. Are they testing the home page? So far, I've replicated it on every computer I've tried - 5, at work and home, so I can't see how it could be computer-specific. All run the most current version of Chrome.

As far as other extensions, the problem started with the site-shaper load of the template, before I added any other extensions.

I've been troubleshooting it for the last few days:
- If I try it in Chrome's Incognito window, it happens on the first try every time -- top right article gets overlapped by the one below, and the Load More button gets overlapped by the lower left article - see screenshot.
- Resizing the Width (not the height) of browser window fixes the issue - the Masonry divs pop into place
- disabling widgets above the Masonry on home page does not fix the issue
- it affects other Masonry pages with more than two articles, like http://www.hackerdad.co/threats/
- Disabling Load More or removing the post limit does not affect the issue
- Disabling the Read More button does not fix the issue

Since the issue is sporadic, could it have to do with the timing of when certain functions or scripts load? Is there some specific code you need me to grab for you when this happens?

Logged
dache74
Jr. Member
**
Offline Offline

Posts: 21



« Reply #13 on: July 22, 2016, 12:59:35 PM »

For now, I set  .item.fadein with a min-height equal to the height of the top-right Masonry div. That seems to have fixed the issue for the larger screens. Definitely not an elegant solution and it does not scale right for smaller tablets, but it still looks better than overlapping!  

.item.fadein {
   min-height: 487px;
}

Does this help your team troubleshoot? Do they have a more elegant workaround?
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #14 on: July 25, 2016, 07:06:17 AM »

What resolution are the computers that you are having the issue on?  I had an idea that the issue might be with smaller screens, but even with the browser window sized down, the issue still isn't showing up for me.
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1] 2
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.