tinysort doesn't work properly after dynamic loading - wordpress

I have a very odd issue happening with my wordpress website. My sort functions work fine, then I scroll to the bottom of page, and it loads more posts through infinite scroll(this plugin http://wordpress.org/extend/plugins/infinite-scroll/), then suddenly my sort functions(tinysort used) starts to act weird, giving me random results. Only happens with new/old and old/new, not with alphabetical sort. This only happens in Chrome, not in firefox or safari.
http://mammalian.ca/newSite/projects/
what is happening? help!!

Strange... your code looks ok... TinySort might be handling the attribute as a string instead of a number. You could try replacing the 'rel' attribute with 'data-time' and sort by data (which looks right if I run it from console):
// following commented line is only to test
// $('*[rel]').each(function(i,el){$(el).attr('data-time',$(el).attr('rel'))});
jQuery('div#sortDivs > div').tsort({data:'time',order:'desc'});

Related

In wordpress Chrome & Firefox element Inspector show View source does not, which is correct

I am trying to debug a Wordpress issue where a is being auto inserted before the end of the <script> tag, hence breaking the javascript.
If I view the element with the inspector, I can see a as shown below:
However if I viewsource, or download the html page and look at it, there is no :
});
});
setTheRepeaterButton();
});
</script></p>
At first i thought it was a chrome bug, but I get the exact same behaviour in firefox.
I would think there is no , however the script is broken which implies there is one. Which is correct, the inspector or the page source?
It looks like there is a hidden/invisible character before the final } in the script. Depending on your code editor, you can toggle a setting to view hidden characters or add a plugin (e.g. nbsp-vscode for VS Code).
Or the easiest solution is to delete the space between that } and the preceding ; and redo the code formatting.

WooCommerce product-short-description getting renderred TWICE if any class specified

This is an odd one, and I'm REALLY hoping someone else has seen this before.
We want a list in our product short descriptions.
As long as we don't add any class names to the description, everything is fine.
But, as soon as I try to give any part of it a class name, the whole thing starts breaking.
Specifically, it renders a broken second copy of the short-desc directly following the opening BODY tag for the page/document.
In that broken instance, it truncates the short-desc before the first CLASS declaration and guts the closing UL tag.
It does also still display where/how it's supposed to ...in the product summary.
See an example here: < link removed >
BTW, I'm currently on the Avada theme, but I tested with the Twenty-Seventeen theme as well and the problem persisted.
Also, I tested with paragraph and span tags as well and that yielded the same broken results.
Has anyone seen anything like this before?
Any suggestions/ideas?
Found it!
I went through all the plugins, and turns out there is one responsible:
TG Facebook Meta Tags
All plugins other than that one have now been reactivated, and the problem is resolved.

Browsers ignoring single CSS file

Not sure how to really categorize this question, but on this page, the file http://d1el287zd12c0j.cloudfront.net/assets/hitgrid-0a8239a14fba0de87431c06cd75774f3.css seems to be completely ignored by browsers. It appears to load successfully and no different than any other css file on the page, but the styles in it are simply not applied to the page.
The content-type, encoding and everything appears to be working as expected. Roughly the same content "applies" fine on my local installation of the app.
I'm at a loss as to what's going on here.
I just check it out and everything went right.
Try to make the filename shorter in the CDN. Large names tend to make error in some way or maybe check if no other stylesheet is interfering with the styles
If that didn't work, answer these questions and Ill try to git it a try again
Which OS are you using?
2. Are you using wordpress?

Browser Displaying Plain Text

When I view the site www.redfuryrevenge.com with a browser, I see only plain text, as if there is no CSS. When I view it locally using Macrabbit Espresso preview, it looks fine. I tried finding the error using Firefox console, debugger, etc., but nothing pops up for me.
I've never seen anything like this (except for a missing CSS file reference).
Please advise.
it seems that for some reason you need to put the full root.
You can fix it adding the ./
Use the following syntax:
href="./css/style.css"
I've tried it and it should fix your issue

Chrome inline background-image lost on back-button in Chrome

I have an inline style on element on one of my templates.
- hero_image = article.hero.url(:medium) if article.hero.url
%article{style: "background-image: url('#{hero_image}');background-attachment : fixed;"}
It works marvelously for me. Except when I go to another link and the use the back button to return the page.
When I use the back button to return the page, the inspector the source is the exactly the same, but no image. When I refresh the page, same code, but the image is there. Seriously weird and annoying.
I've seen reports of this being a bug in Chrome related to background-attachment:fixed; but the work arounds they suggest don't work.
Is there a way to force (via Turbolinks?) this element to refresh?
It turns out that the issue is fixed by adding the base url to the url like so:
- hero_image = base_url + article.hero.url(:medium) if article.hero.url
%article{style: "background-image: url('#{hero_image}');background-attachment : fixed;"}
(I added a base_url helper thanks to this: https://stackoverflow.com/a/2952576/1291663)
I've run into the same problem on my app, trying to display user avatars.
There are (many) bug reports related to this particular situation dating back a couple of years, but the bug is still present as of time of this writing.
The solution I've gone with is to replace the background with an actual img tag, and than use z-index tricks to push it back.

Resources