1 – I have a search and filter form on my mobile site (480px and below) made with Search and Filter Pro plugin. Here’s the screenshot showing what I mean:
If you click on “Pokaż filtry” filters will appear. The problem is that when you expand it and just click “filtruj” (filter), the “Pokaż filtry” button will stop working – you can click as many times as you want but it won’t expand anymore (it becomes unclickable). Everything will start working again after refresh.
Second problem is very similar to the first one. At 480px and below, when you choose any option and click “filtruj” the whole search form will dissapear. Everything will start working fine again after refresh.
At resolution 960px to 480px there’s a button to show sidebar.
There’s also a Search and Filter form. When you use it, you can’t close the sidebar – the button just stops working (becomes unclickable).
These issues are 100% caused by Search and Filter Pro plugin. When I deactivate it, everything works fine. Most likely it's a conflict with theme.
Here's my site - http://gromocje.pl/
Does anyone have any idea how to fix it? I feel like I tried everything... I've never seen such a issue.
$('.otfm-sp__title').click(function() {
replace with:
$(document).on('click', '.otfm-sp__title', function() {
Reference & more info - stackoverflow.com/a/29674985/2245806
Related
So I am working on this WordPress website, and for some reason when reloading a broken navbar pops up for second, but when the page gets reloaded it's normal again. I don't know what causes it to behave that way, I tried to search but didn't find a similar issue. I am using WP rocket for speed optimization. Here are the settings I used, could it be that? IDK. Even if I use a pre-loader the navbar some how pops up before the animation itself.
I just made a website using a Wordpress theme and it all works good on desktop computers. However, while the site initially loads normally on my phone (I'm using iPhone 6 with iOS9, but the problem is the same on Android phones too, I tried two), once I click on the portfolio item, it loads a blank page (header and footer only).
When I tap on the address bar, I notice that it never went to the right link at first place (the portfolio item link), it just shows the homepage link and there is no content.
I managed to fix the problem by entering the external URL in portfolio item options. It was still internal link from the site but I made the link open the new tab (if it doesn't open new tab, the problem stays the same). However, if I choose to go back to the homepage from that link (the portfolio item link), the homepage is blank, there is only header and footer so the problem returns again.
Just so you know, the first portfolio item contains the external link outside the Wordpress and that one opens normally.
What is wrong with the mobile site?
The site URL is: http://svenharambasic.com
The screenshot is attached. Thank you!
P.S. There are also google ads showing, I never encountered that before, but I'll work on that once this is solved.
I only see a white screen upon clicking any of the homepage portfolio image links (except for the first link which goes to an external site in a new tab) on desktop and on mobile actually. There is a content_inner class with inline styling setting visibility:hidden.
It's unclear to me why it's doing that- maybe to remove focus from the body and draw focus towards something that is supposed to appear in the foreground but does not? If I remove visibility:hidden from the element in the browser, I see a series of additional images appear, which seems to me to be more an expected behavior. Are we on the right track?
I managed to solve this, it was the setting in the theme options; I had to disable grid lines... I can't say I truly understand why, but it worked!
If you look at http://www.sportsdirect.com you will see that when you click on a category whole pages doesnt get refereshed, ie you dont notice any flicker, content above menu doesn't get repainted.
How do i achieve that? Is it only speed or something else? My site locally works fine (most of the time, but sportsdirect gets slight flicker sometimes). Online page gets "refreshed", ie there is 300ms when there is gray screen.
This is something that is very important for a client and i dont know how to fix it.
You should look into AJAX. This allows you to update parts of your page without refreshing the whole page. This will often reduce or eliminate flicker since it does not rebuild the entire page.
A good place to start is Here
I just purchase Infinite Ajax Scroll after having difficulties trying to implement replaceState() with infinite scroll. I have managed to get everything set up to work correctly with the following code:
function infiniteScroll() {
// Init infinite scroll
var ias = $.ias({
container: '#masonry-filter',
item: '.post',
pagination: '.nav-links',
next: '.nav-previous a'
});
// Run isotope on additional load
ias.on('render', function(newElements) {
$(newElements).css({ opacity: 0 });
});
ias.on('rendered', function( newElements ) {
$('#masonry-filter').isotope( 'appended', $( newElements ) );
});
ias.extension(new IASTriggerExtension({ offset: 100 }));
ias.extension(new IASPagingExtension());
ias.extension(new IASHistoryExtension({prev: '.nav-next a' }));
}
As you may notice I'm using this along with Metafizzy's Isotope plugin. I am also using it within Wordpress and am hooking this onto the typical Wordpress pagination.
Although everything seems to work ok, it does not work the way that I had intended. My assumption was that it would work somewhat like http://tumbledry.org/, where after scrolling for some time, leaving the page, and clicking back in the browser, it takes the user to the exact same position they were in when clicking on the link. The plugin seems to be using replaceState() with the same url structure that WordPress uses by default for pagination (example.com/page/2). I don't know if this is done on purpose, or if it is a coincidence. As a result of this, when I click into a post and then hit the browser back button, it actually takes me to the example.com/page/2 page, where there is a button to show newer posts at the top of the page. It does not take me to the original posts page, nor to the exact spot on the page where the post is that I clicked (it usually takes me to the bottom of the page). In addition, when I click the button at the top of the page to show newer posts, it appends the newer posts to the bottom of the page (as you can see in my code).
I would like this to work as the tumbledry blog works. Where you can click on a link and then click the back button to get to the exact spot on the page that you were on (no need to load newer posts). Please let me know if this is possible, or if I have botched up the implementation. I would greatly appreciate any in depth information on the functionality because I'd like to figure out how I can get it working the way I want.
Infinite AJAX Scroll takes a different approach then the one on tumbledry. You say it loads newer pages but in a vanilla setup the items of previous page are prepended when you click the "load more" link. Your current rendered listener doesn't take this in account.
Also if you press back the plugin will get back to approximately the offset you were, but not exactly. That would require a more advanced setup with server-side code and would defeat the purpose of this plugin: simple progressive enhancement for infinite scroll without any server-side coding.
In case you really want the exact working like tumbledry, its author has a detailed post about his implementation: http://tumbledry.org/2011/05/12/screw_hashbangs_building
Infinite AJAX Scroll takes a different approach then the one on tumbledry. You say it loads newer pages but in a vanilla setup the items of previous page are prepended when you click the "load more" link. Your current rendered listener doesn't take this in account.
Thanks for the insight here.
Also if you press back the plugin will get back to approximately the offset you were, but not exactly. That would require a more advanced setup with server-side code and would defeat the purpose of this plugin: simple progressive enhancement for infinite scroll without any server-side coding.
I understand that this won't be perfect, but it always brings me back to the very bottom of the page (footer area which is underneath the infinite scroll). I take it that you need to use a button to trigger the Infinite scroll, while using the history feature?
In case you really want the exact working like tumbledry, its author has a detailed post about his implementation: http://tumbledry.org/2011/05/12/screw_hashbangs_building
I brought this up because I had already been through his post and attempted to roll my own infinite scroll with no success.
IMHO the UX for the history functionality, although eloquently incorporating WP server-side functionality, is slightly odd. Landing on a Wordpress paginated page and having to click a button to show the posts that were originally on the page, when you had clicked off of it. The plugin is great and I know you are making use of the technologies/features available to you. I think I'm just going to stick to using the basic functionality instead of using "history" for now.
I have a Wordpress site that uses a JQuery plugin called Hover-Caption ( https://github.com/coryschires/hover-caption ).
The main page of site: (http://brighidfitzsimons.com) looks good.
However in Internet Explorer 9, a similar page based on Category adds a 282px top offset to the post thumbnail image. (http://brighidfitzsimons.com/category/lifestyle/)
I am new web developer so I am struggling to figure out how to isolate problem. Based on this stackoverflow entry ( How do I get rid of an element's offset using CSS? ) my current train of thought is to add a IE specific CSS sheet to 'reverse' the offset but I can't seem to get at the offending element. Also I'm confused why works on main page but not on category page. If you watch page loading carefully, it initially loads correctly then at the very end the images are moved down. Perhaps this is a clue.
First stackoverflow entry so I hope I have followed correct ettiquete. Please advise if you need me to provide any more information.
Thanks for taking time to read problem.
Regards Simon
It has something to do with the substitutions of the content inside the title, probably some quirk about ie9 which someone else would have more of an idea for me
just so you can take my word for it: http://jsfiddle.net/BXjK3/
the first two i have removed all the greater, lesser and quotes and it works, but I would say the browser does the substitutions before Javascript can see it, and it all goes down-hill
edit: worth mentioning the reason it looks like that is because the text is no longer properly contained, and so the display none is not taking effect on it, pushing all the images down and making it a jumble, due to the way the content is loaded the ie inspection cannot show me how the text is after the javascript, only what was loaded on page load, so i can't give you more help than that