I'm having an issue with Fancybox scrolling the underlying page to it's top as soon as the modal window opens. When it closes it doesn't return to where the user was either. It forces the user to have to scroll back down the page to the point they left off.
Any insights?
In jquery.fancybox.css > fancybox-lock...
Change...
overflow: hidden !important;
to...
overflow: visible !important;
To fix it here I used a built in helper function, this is how I set it up now:
$(".fancybox").fancybox({
helpers: {
overlay: {
locked: false
}
}
});
I had same problem when opened fancybox content was iframe. I found out that there was some JS (in my page, loaded into iframe) containing .focus() directive. Removing this, bug was fixed...
Related
I have a standard laravel + inertia + vue3 setup using breeze, and as Inertia docs says, navigation between pages should mimic browser default behavior reseting scroll to top when page loads. But it is not working this way in my case.
I don't have preserveScroll: true in my links but this happens anyway.
I have tried with a vuejs onMounted() hook to scroll to top when component loads, but immediately the page scrolls from top to last scroll position from previous page.
So I've deactivated this hook because its ugly flashing effect.
Any idea on how to solve this?
Thanks in advance.
I think you have to define the scroll region: https://inertiajs.com/scroll-management#scroll-regions
It seems that your app doesn't use document body scrolling.
My css file had a property overscroll-behavior: contain; applied to body tag. Since I removed it, everything is working fine now.
temporary solution
in Layout.vue
mounted(){
Inertia.on('success', () =>
window.scrollTo({ top: 0, left: 0, behavior: 'instant' })
)
}
I use Flatsome theme and I am using the "add to cart" button SHORTCODE in my page with ajax activated. The redirection to cart after adding the product is disabled so user can stay in my page.
But after the button is clicked the off-canvas-cart window appears. And that is I want to stop.
see: https://www.screencast.com/t/yhmloKy7omp
I want that to stop it becose I am using the Fly Cart plugin to achieve a neat result after the add to cart btton is clicked. See: https://www.screencast.com/t/kh8fuPUT
What I have done so far:
1- I have set the cart to "link only" in Flatsome settings - https://www.screencast.com/t/pcaD4HVXIq (but that setting doesnt seem to affect the add to cart button SHORTCODE)
2- I have managed to hide the cart using css: https://www.screencast.com/t/i2YTMpLjYmqf
but I couldnt remove that top right X close button. And the user must click anywhere on the page to make the page active again and that is not a good experience.
this is the css I used:
.off-canvas-cart { display: none !important;}.mfp-bg { display: none!important;}
that is pretty much it.
This is the page: http://vendamais.me/site2/criacao-de-logotipo/
and this is the only button I am using to test the shortcode: https://www.screencast.com/t/aFgvqTbkq
(the other buttons are simple buttons ahref style, not woocommerce shortcode)
could you help me on the right direction please?
I used this:
-Set to dowpdown in the configs, then:
.nav-dropdown.nav-dropdown-default {
display: none;
visibility: hidden;
}
EDIT:
Add the li and classes to do not loose others dropdowns.
li.cart-item.has-icon.has-dropdown .nav-dropdown.nav-dropdown-default {
display: none;
visibility: hidden;
}
I wanted to change just the delete Icon of jqGrid in actions column with my own Icon(newTrash-icon.png). I've seen that jqGrid loads Icon from one png icons file. How do I replace the default trashcan Icon with some other trashcan Icon.
I tried below code but it doesn't work.
In my gridComplete
$('.ui-icon-trash').removeClass('ui-icon-trash').addClass('ui-icon-customtrash');
In my CSS
.ui-icon-customtrash {
background: url("~/Images/newTrash-icon.png");
background-position: -64px -16px;
}
I want the below icon to display in place of default delete icon
What you can do is just the usage of delicon option of navGrid:
$("#list").jqGrid("navGrid", "#pager", {delicon: "ui-icon-customtrash"});
The demo uses delicon: "ui-icon-scissors" and it displays
UPDATED: The demo demonstrate the same using the icon which you posted. It displays
I used the following CSS
.ui-state-default .ui-icon-customtrash {
background: url("http://i.stack.imgur.com/Gii7J.png");
background-position: 0 0;
}
I found my answer.
I have replaced inline Action Icons(delete and Notes icons) using IcoMoon App (http://icomoon.io/app/). I selected different icons I needed from IcoMoon website and created a stylesheet that I downloaded and added to my application. And using the class name("idoc-icon-trash") provided by IcoMoon I added below code in my afterInsertRow event and boooom.. it worked as shown in the figure.
$("#gridJQ .ui-icon-trash").removeClass('ui-icon ui-icon-trash').addClass('idoc-icon-trash');
.idoc-icon-trash {
font-size: 19px;
color: #022462;
}
The Like button plugin doesn't appear, if one of its containers is display:none when the page loads, and made visible later with display:block.
Problem detected in Firefox (my version 15.0.1) only.
What can I do?
when you make the element visible, you should add your fb like plugin to dom
IE
<div id="showfb">mouseoverme</div>
<div style="display:none" id="facebutton"></div>
<script>
var fbbutton = document.getElementById("facebutton");
document.getElementById("showfb").onmouseover = function(){
// first visible
fbbutton.style.display='block';
// then add fb html5
fbbutton.innerHTML = '<div class="fb-like" ......... ></div>';
};
</script>
in alternative, try
width:0;height:0;overflow:hidden
instead of
display:none
and
width:auto;height:auto;overflow:visible
instead of
display:block
I don't know what is the reason of this bug (FB or FF), but I've solve that problem by show my element by default in FF only:
#-moz-document url-prefix() {#exe-article-social-tools { display: block; }}
https://developers.facebook.com/docs/reference/javascript/
The fb-root tag
The JavaScript SDK requires the fb-root element to be present in the page.
The fb-root element must not be hidden using display: none or visibility: hidden, or some parts of the SDK will not work properly in Internet Explorer.
It took me an entire day to figure it out, but being logged in on Facebook with a "test user" renders the like button invisible. In my case, I was always logged in with my test user on Firefox, while logged out / logged in with my regular Facebook user in Chrome (and I initially thought this was a browser issue).
However, the solution was as easy as loggin off the test user.
It is specified in the FB docs that not all features are enabled for test users (and the like button is one of those features), but I'd thought that it would at least get rendered.
Anyway, I hope this helps someone.
I had a number of different invisible divs on my page where fb-like buttons was hidden. When one of div shown, no fb-like button appears in it. Solution worked for me is to relaunch FB.init manually each time when invisible div reveals.
FB is a global function being added into your window object since you call for remote facebook api by url like http://connect.facebook.net/en_US/all.js. So since this remote script attached to your DOM you can run something like
FB.init({
appId : '346094915460000', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
You can dynamically add like button html5 code to the DOM and then run the FB parser again to generate the like button:
fbbutton.innerHTML = '<div class="fb-like" ... ></div>';
FB.XFBML.parse();
I am using a modal popup up control in jQuery, the popup has an input text powered by jQuery Tokenize input plugin. The problem is when i type something on modal popup text box, the search results by tokenize plugin are shown hidden under the popup. Actually they should apprear on top of all controls. Would someone please help me as I am a beginner.
Try to seek help from thread below, zindex is not working.
https://github.com/loopj/jquery-tokeninput/issues/190
here is the input control that i am using.
http://loopj.com/jquery-tokeninput/demo.html
Thank you.
It works by setting the z-index manually:
$(".token-input-dropdown").css("z-index","9999")
The function given in
https://github.com/loopj/jquery-tokeninput/issues/190
does not work in my coffeescript:
$('#book_author_tokens').tokenInput('/authors.json', {
zindex: 9999
});
I think that a better solution is to add it to the css file (instead of doing it via js):
div.token-input-dropdown-facebook {
z-index: 11001 !important;
}
Of course, drop the "-facebook" suffix if you're using the default theme.