I am using Malsup's Cycle plugin for simple slideshows on a website. (http://jquery.malsup.com/cycle/) Additionally, i have a hidden menu which appears on small devices and uses a toggleClass to show/hide the menu.
It seems as the two are interfering when used in conjunction - I can get the menu to slide into view when triggered, but the slideshow won't work. Or, I can get the slideshow to work, but the menu will not slide in.
Stranger than anything: When I view through Dreamweaver's Preview tool, it works fine, but on a live site the issue persists.
Can anyone offer any insight? Perhaps I have missed something that someone else can catch?
Live site and all code can be viewed here: http://rai.desensdesigns.com
Thanks in advance.
Related
I'm actually facing a small but really blocking issue.
I'm working on a new theme of a Prestashop Website, I've started with the classic theme of PS 1.7.7.2, then I've made my modifications of every templates, created some dependencies, ect.
We've decided to use the ps_imageslider on the home page of the website, so I've decided to modify to make it more resposive, with the possibility to add a mobile image and a desktop image.
My only issue with this is that, somewhere in the js code (maybe theme.js or even core.js), there is a callback when the next button of the slider is clicked that make a scroll to the top of the image, but on my new theme, I've decided to make the header sticky at the top, for better ux.
I've been digging through the compressed and uncompressed files but didn't been able to find out where is this callback.
I've looked on the bootsrap carousel documentation because it's a bs carousel, and didn't find anywhere talking about scrolling to top of the slider when clicking the next button.
My only way to find out where this call is made, and to delete it is to debug every functions called on click of the next or prev button, what I've tried to do, but it always give some global functions (with the Events Listener Breakpoints).
Is there way to get EVERY functions called when clicking on a button ?
I've tried with the scrolling event too, same issue.
Not sure I'm understanding your question correctly but if it seems you are underway in the developer tools. If so, you can view event listeners in chrome for example by right clicking on the button -> inspect -> elements -> event listeners.
If this is not what you are looking for, maybe profiling will help. See this so answer for it: https://stackoverflow.com/a/11008282/3399855
I'm developing a web application based on EmberJS, that should be running on multiple device types. The application includes dialogs, that are handled using the ember-modal-dialog and liquid-wormhole addons.
When opening the dialog on an iPhone, scrolling within the dialog eventually stops working, and instead of scrolling the content, some underlaying(?) elements are overlapping the dialogs content from the top or bottom (depending on the scroll direction). It's actually hard to explain, so I've made a video:
https://drive.google.com/file/d/12Xfvxvx89r91svEyybMf1j6HFD3v_Tkl/view
Also, you can try it yourself. Click on the following link, and then on the button of the first item on the page.
https://rkr9z8g.suitepad.io/category/6463/page/22280
Does anyone knows or have an idea, how to fix the problem?
I've got same problem in my project. But i found that some duplicate style on my div. Try remove overflow-y: scroll and add -webkit-overflow-scrolling: touch. Hope that helps.
I'm looking to make a mobile menu which slides out from the right side of the page, displaying the appropriate navigation once it's displayed. Im using the sidr.js plugin to create the sliding transition and all of the navigation displays fine. I have the mobile menu fully functionality on the computer and the thing looks great and functions the way I want it to.
However, when I switch over to the mobile phone and go to the website, the navigation has a major flaw. I placed a button at the top of the navigation area that closes the side navigation when it's clicked. Below is the function that performs this task and on the computer it's fine. The problem is that it won't work in mobile!! Please help, I'm confused why this isn't working.
$(document).on('click', 'a.btn.btn-default.mobile-btn', function(event) {
event.preventDefault();
$("#responsive-menu-button").click();
});
You can also view the problem live at http://mgm702.github.io but you must be on a mobile device to notice the issue. Also, I have already tried the cursor: pointer; option among others and it hasn't worked.
I found a solution that worked for my particular situation. I was using the Sidr.js Plugin and one of the features is a built in function that closes the menu slider. I attached this to the function I was currently using, and this corrected the issue. The menu then worked with the mobile device touch interface. My final function looks like this
$(document).on('click touchstart', 'a.btn.btn-default.mobile-btn', function(event) {
event.preventDefault();
$.sidr('close','sidr-main');
});
I hope this anwser helps someone in the future dealing with this issue!
Adding data-role="button" to your responsive-menu-button should do the job.
For a current project that i am working i encountered a small issue.
I have a video that needs to be played in a lightbox on desktop, and on mobile to load directly from the source. I am currently building the website with wordpress and am using a shotcode plugin to display the lightbox with.
I guess i have to make a media specific call for mobile devices and let the specific div behave differently on mobile..
Can anybody give me some pointers and help or an example how i could possibly fix this?
Let's say you have a link to open the modal on desktop. This link can be hidden on mobile with the help of media-queries (i'm using some example classes here to illustrate the working):
Open video in modal window
The link shouldn't show up on mobile devices, since you want the content displayed right away. For the video you could use something like this:
<div class="hidden-on-desktop" id="modalWindow">Video here</div>
On the desktop this div should act like a hidden, modal window and on mobile it displays the content. You should style the modal window in a specific media-query since you don't want the content to be displayed like a modal on mobile devices.
Hope this helps a bit :)
I am using the youtube api to create a flash video inside of a twitter bootstrap modal. It works fine in all browsers except in chrome. After closing the modal and hovering over buttons or images fragments of the video appear in there place. I tried changing wmodes, opacity, visibility. I can't post a link because it's a client project that is in development. Does anyone have any experience with this? Thanks in advance!
The default css3 transition properties that are for the bootstrap modals were causing a repaint issue. After removing the transitions this no longer occurred.