bmscmoreira

I was wondering the same thing. In the examples it shows how to change the popup text, but not the custom icon as the OP was asking. Is it possible? Thanks!

Thanks for the notice James, indeed the “glitch” was due to my modification fixing the header to the top with the CSS:

#site-header {
position:fixed;
top:0;
}

This causes the glitch in safari and the scroll effect in chrome, where the page would jump to the top and scroll down to the original position.

In case someone else wants the same fixed header without the glitch, I could “fix” this issue in current version of the theme (1.4) by commenting the following lines in index.js file inside twentytwenty theme folder:

'overflow-y': overflow ? 'hidden' : 'scroll',
position: 'fixed',
width: '100%',
top: getAdminBarHeight(true) + 'px',
left: 0

and

_win.twentytwenty.scrolled = parseInt(styles.top, 10);

Thanks!

Just to keep this alive: I think it is still not “fixed” in version 1.4 of the theme. I have also the same issue: when fixing the header (position:fixed, top:0) there is a glitch noticeable in safari, particularly: it seems the page scrolls to the top and immediately scrolls back to where it was, causing the glitch. This does no happen (obviously) when the page is already at the top.

It seems an automatic scroll is applied to the html element, can we disable it? In Safari the scroll seems instant, hence the “glitch”; in chrome there is a delay and a slower scroll, but the principle is the same: when one clicks the menu, the modal menu opens, and then, when one clicks out (or presses escape key) the modal closes, the page scrolls to the top, and then back to where we were when we opened the modal menu in the first place.

• This reply was modified 4 years, 8 months ago by bmscmoreira.

Sorry for the delay. I had several messages in the browser’s log. Ultimately I think I sorted it out – had to do with the slowness of the server, i.e: if I refreshed the editor page and clicked on the grid, the thumbnail size option would not appear; but if I waited a few seconds (10-20…) then it would appear. Thank you.

Thanks for quick reply. I am trying to figure out what is causing this. The images have all 4-5 sizes (originals have 1000px + dimensions). Sometimes I select the image and the thumbnbail option size appears 1-2 seconds after, sometimes it doesnt. I have to reload the page until I get lucky. Something must be messing with the ajax request.

EDIT: this option is loaded via Ajax (?) – and sometimes does not appear. Seems that the busy server may be the culprit.

Thanks for reminding me that. I was using an older version. I did try replacing index.js with the latest version available on TRAC today but did not work, but updated the theme as a whole and it seems to have been fixed!

I think the fix has nothing to do with @oldteaseller issue, since I have the same issue (I fixed the header at the top of the browser window and I am experiencing the same glitched behavior – on Safari, since Firefox and Chrome seem to work fine. I think it had to to with the index.js changing the html element’s CSS attribute inline.

How I “fixed” this (maybe not really a fix, but an adaptation due to these particular needs):

in index.js file:
– make htmlStyles function return false (this will prevent inline style change for html element when clicking to show the modal menu):

function htmlStyles() {
			var overflow = _win.innerHeight > _doc.documentElement.getBoundingClientRect().height;
			// return {
			// 	'overflow-y': overflow ? 'hidden' : 'scroll',
			// 	position: 'fixed',
			// 	width: '100%',
			// 	top: getAdminBarHeight(true) + 'px',
			// 	left: 0
			// };
			// FIX: STOP CHANGING HTML STYLE
			return false;
		}

– comment / remove ‘_win.scrollTo(0, Math.abs(_win.twentytwenty.scrolled + getAdminBarHeight()));’ in line 246 (this will prevent the browser to scroll to the top when clicking to hide the modal menu):

// _win.scrollTo(0, Math.abs(_win.twentytwenty.scrolled + getAdminBarHeight()));

Still need some more testing but seems to be working.

Thanks for helping. Still having problem though :/
I have changed the code in functions.php to

// open popup
function open_popup() {
		wp_enqueue_script(
			'open-popup',
			get_stylesheet_directory_uri() . '/open-popup.js'
		);
}
add_action( 'wp_footer', 'open_popup', 10 );

and the open-popup.js file to

jQuery('#popmake-2503').popmake('open');

but I still get the error in the console:

Uncaught TypeError: jQuery(...).popmake is not a function(anonymous function) @ open-popup.js?ver=4.4.1:1

I have checked the page, and I am positive jQuery loads first in the head, then popup-maker, then my custom js script …

<head>
(...)
<script type='text/javascript' src='https://mysite/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script>
(...)
</head>
<body>
(...)
<script type='text/javascript' src='http:/mysite/wp-content/plugins/popup-maker/assets/js/popup-maker-site.min.js?defer&ver=1.3.9' defer='defer'></script>
(...)
<script type='text/javascript' src='https://mysite/wp-content/themes/shopkeeper-child/open-popup.js?ver=4.4.1'></script>
</body>

Thank you.