I am working on Magento eCommerce site and I am running into a problem after installing a color swatch plugin. The problem appears in the thumbnail views on the product page. What exactly is happening is, when you click the down or up arrow to scroll the thumbnails, after so many clicks, the slider will get stuck and replay the slides in the same position for at least 4-5 clicks, and then it will resume, but get stuck again once it does a full loop of the images. It was functioning 100% perfectly prior to installing the color swatch plugin. I looked in FireBug but I didn't really see any obvious errors, but I am still learning how to use the tool and could have made a mistake.
Here is the URL: http://modernego.info/index.php/spring-dress.html
Here is the URL to the template I purchased in its original stat (with the working slider): http://demo.emthemes.com/manwear/index.php/briefs/reprehenderit-voluptate-8.html
Does anyone have any ideas on how I can work this out? I've tried for over 10 hours trying to fix this doing various methods, trying to duplicate other files, etc.
I would greatly appreciate any help.
I think its not because of script errors, its because of events handling, i've the same situation earlier, i've used jQuery slider, it worked perfectly on normal page but when i placed it in a floating div then its mouse event wouldn't detached
then i've handled mouse event and changed as per mouse movements...
you may debug your page by events... i think some other events causing this problem..
Related
I have been asked to work on the following website by my boss: 2tec.club
The site has been built using Wordpress which I am not an expert in, I have access to only the admin dashboard.
The slider at the top has a strange bug, as you can see, every time the slide changes onto the next slide ,that particular slide for a brief second changes its height. This causes the content to be pushed down briefly which is extremely annoying for the visitors.
NOTE: this only happens on larger devices. It seems fine on my phone.
I have tried using the Chrome developer tools to change the CSS rules with no luck. I cannot for the life of me figure this one out. Can someone please be kind enough to offer their help. If so it would be much appreciated.
If you remove the slide class from your #myCarousel the problem goes away.
There's a number of other issues however. It seems as though you are including bootstrap twice, once for version 3.3.2 and once for version 3.3.6.
You also mention that you're using bootstrap carousel, but you have a carousel.js that appears to be owl-carousel.
So if you're using bootstrap carousel, and you also have owl-carousel - there is the potential for unknown conflicts.
You should review all the files you're including when you get the chance.
your theme is uploading the style.css before bootstrap.css... so its not able to overwrite the changes to bootstrap..
if you r not familiar with coding the easiest solution would be to use bigger images. at this moment your image size is 960 X 295... change it to 1200 X 368.. point is increase the width of the image...
let me know if it works
I'm currently trying to get the sly plugin to work properly on a site I'm designing. So, quick background info:
Sly Plugin Examples Page: http://darsa.in/sly/examples/horizontal.html
Sly Plugin Documentation Page: https://github.com/darsain/sly/tree/master/docs
The page I'm working on: http://turtscher-campos.com/projects/harald-korvas/v3-projects.html
My initialize.js file is using the code/setup for 'CYCLING BY ITEMS' that they had in their demo page (horizontal.js).
The issue: even though scrollBy is set to 1, when I scroll, the code moves two slides per 'mousewheel scroll' instead of 1 by 1, as shown in the CYCLE BY ITEMS demo. I just can't seem to locate the root cause of the issue.
Any help would be appreciated.
Sotkra
I had someone else run a test for me and they too, could not reproduce the issue. I am left wondering why my mouse fails on my site while it works perfectly on the sample site
You are free to debug sly's code in function scrollHandler(event) and create an issue or pull request to sly project directly. BTW function normalizeWheelDelta looks suspicious. Maybe wrong delta calculates here in your case.
It seems the issue revolved around my mouse. Tried with three other mice, both on my computer and on a few others. It was only my mouse that yielded the poor result. This doesn't answer why my mouse worked perfectly on the sly horizontal examples page and not on my own but oh well. Lesson learned, check hardware first.
I've got many divs on the page (close to 20) which are both jQuery-UI resizable and draggable. There are also some css-based changes that are triggered on mouseover and mouseout for each div. In the middle of playing around with these divs, sometimes, one of them just "gets stuck", i.e. just can't be dragged around any more. Using the Firebug and the console, I've seen that it does have both classes: ui-draggable and ui-resizable but it's still just "stuck". Is this something that normally happens with too many divs on the page? Just jQuery-UI get stuck like this? Most of the time everything works as expected, sometimes any of the divs suddenly can't be moved.
My code to make things draggable was simple. For each div, I had a plugin that worked on itself, and part of its code was :
$this.draggable({
cursor: 'move'
});
I have recently encountered this problem and... I have no idea what the cause is. As far as I can tell it was probably caused by something happening around mouse handlers- possibly accidentally rebinding something that draggable was using, but I couldn't see any sign of it. Either way, draggable was failing silently and reverting the changes I was working on when it occurred did not help - the code which had worked at the start of the day was now also failing.
That is an indicator to me that something was weird with the way my browser and development server were interacting because that code worked earlier and now it had stopped. My solution was to stop the server, close the browser, run a git clean -fdx - careful with that one, other source control systems exist - on my project and then restart the server and client. Hey presto my old stuff worked - and the new code did too, once I popped it out of my git stash.
I had a site using YUI 3 sliders that was working fine for ages. About two weeks ago I was showing a friend my site on my phone, and it worked great.
Then, about a week ago, I was showing it to another friend using my phone again, and the thumbs on the slider would not move. Something has changed and they no longer respond to touch events on my phone.
On a computer, when using a mouse, the thumb is draggable. Everything works perfectly.
It's only on devices where the interface requires touch that I can't move the thumbs. I've tested on two Android devices, an iPhone, and an iPad.
The javascript loads, as it renders the slider. I can click on the rail of the slider and the thumb jumps to that position, so it's not like touch events are completely gone.
However, as far as I can tell, it is not possible to touch the thumb and drag it on a mobile device with a touch screen.
I have tried for a week to figure out what I might have changed, but I just can't solve it.
Can someone look at this page and tell me why touch events aren't working?
Note that I've tried to make this a version that is stripped down to provide only the minimum required to demonstrate the problem, but there might be some odd snippets of irrelevant code here or there.
Any advice would be much appreciated. Thank you for your time and assistance.
Please note: The example page linked to in this question will very likely be removed after a period of time. Thanks for your understanding.
It seems like you need to specify use("slider" instead of use("*". Here's a working (and greatly simplified) demo.
I'm developing a product to be used by a number of customers alongside our Web application.
Quick background:
These customers have incorporated into their pages a widget that we've developed.
The widget's content can be modified by using our application.
The idea behind this product is a bookmarklet that we supply, which will "highlight" our widget on their page, turning it into a clickable link that leads to an administration panel in our app.
The "highlight" effect actually involves some z-index tricks; we create a semi-transparent "backdrop" <div> just a few ticks below the maximum-supported z-index to gray out the page; then, we adjust the z-index of our widget to sit on top of that translucent backdrop. The visual effect should look about like this:
http://skitch.com/troywarr/dtexp/example-good
However, in Safari, as well as Firefox under certain conditions, there seem to be some sort of rendering artifacts that prevent this from looking as intended:
http://skitch.com/troywarr/dteqx/example-bad
As you can tell from the screenshot, a couple of elements (our logo image and the <iframe> that holds an advertisement) are still "bright," as intended. But, the rest of the widget is still shaded-out.
I've been poking around with Firebug for quite a while to try to get at the source of the problem, but I haven't had any revelations. I'm hoping that someone has experienced a similar issue, or recognizes the "visual signature" of this kind of problem. Or, if you're simply adept at JavaScript/jQuery and/or Firebug, I could really use your help trying to figure out where this approach is falling short.
I created a test bookmarklet as a live example. To see it, please:
Open Firefox (the version under development currently only works there reliably).
Go to this page and drag the link there to your Bookmarks Bar: Example Bookmarklet
Navigate to: http://www.sfgate.com/cgi-bin/article.cgi?f=/n/a/2010/07/30/sports/s170637D86.DTL
Click the bookmarklet while on that page, and you should see what I'm referring to.
Thanks very much in advance for any help! This has me baffled.
I was about to give up on this, but I think I found the problem. You have a hell of a lot of DOM elements going on here, but luckily that isn't the issue causing this problem.
The iframe inside DIV#onespot_nextclick needs a background color of #FFF.
Simple!