JQuery Slider Control - slider-handle not moving - javascript

I've got a text scrollbox made with JQuery. It works fine when on its own (nationalboston.com/temp) but when I hand it off to be wrapped into a Joomla page, the slider handle doesn't move (here). As far as I can tell, everything else works fine.
I've inspected the computed CSS in Chrome Inspector, and it seems that the handle is styled as it should be (position:absolute; top:auto;). What am I doing wrong?!
EDIT:This appears to be the case in Safari 3.x Mac and Chrome 3 Alpha Mac, Not in Firefox Mac. I haven't done further testing.

I followed your link in Firefox 3.0.11 on mac and the slider works perfectly. Did you find the solution to your problem? The first idea that came to me when I read your question was that you might have a javascript namespace conflict (using more than one JS framework?). A possible solution would then have been to run JQuery in no-conflict mode, as in:
jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
More info there: http://docs.jquery.com/Core/jQuery.noConflict

Related

Hover effect issue on Safari 10.0

There is an issue with the hover effect that only appears on Safari 10.0.
The web is this:
Manu Caballero
What is happening is that the effect is working radomly, or not working at all:
To see it working, you can use Chrome or Firefox.
The most strange thing is that, on Safari 10.0, if I try to use the inspector, the hover effect works...
On Safari 10.1 and other common browsers like Chrome, Firefox... is working perfectly.
Looking at this site it appears to be using jQuery 1.12.4 and jQuery Migrate 1.4.1 - this is adequate if you need to support IE6 but not something I'd expect to be sufficient for Safari 10 (released after these legacy libraries).
On top of this you appear to be using Isotope 3.0.1, which is also about a year out of date.
So, first I'd recommend:
Upgrading to a current version of jQuery and dropping Migrate - IE6 is dead and IE8 is marginal.
Upgrade Isotope to the current version.
In particular check their issue logs for similar issues before raising them on here.
If the problem persists after that then you may have an issue specific to your implementation. Isolate the code in a snippet in your question - it's much easier for us to help you with one specific issue without reverse engineering your entire site.
Delete this code https://yadi.sk/d/YmKdx2Rd3M2Fcj and your effect will be work fine
and look this video https://www.screenmailer.com/v/EEa7t15khxyLE9s

Firefox touch scrolling not working

I have an issue with Firefox. In both responsive mode and Firefox Mobile to be accurate.
The touch scrolling isn't working on my website. (But the scroll with the mouse is working on Responsive mode)
It works fine on Chrome mobile & Safari mobile.
I checked online and I already tried the dom.w3c_touch_events.enabled set to 1. It was actually set to 1 by default.
I think it's an issue on the JS/CSS side but I can't see where.
I use SASS and Pleeease to compile it and it's a React app compiled with webpack.
Also I use the method fetch to call my webservices if it can have any influence but I doubt it. (and have a polyfill for it)
I tried to nuke totally my CSS and it still didn't work.
Happy to share URL if people want to see the actual problem. I just don't want to be seen as a spam. Also I will share a test server and not the live one. (problem is the same anyway)
Found the (stupid) solution and posting it as it might be helpful to someone.
I had a overflow:hidden; added by mistake in html, body { into my SASS.
For some reason the responsive mode in Firefox is still not working (bug? cache? I don't know...). But once I tried again on my Firefox mobile it was gone.
Looks like Chrome and Safari are ignoring this CSS but not Firefox.
For the record I am on last versions on all my browsers.

Javascript won't load on mobile. Works on desktop

I made a simple calculator, works flawlessly on desktop. Then I tried it out on mobile. I thought it was just a problem with my click events not registering on the touchscreen, but I noticed something. One of the first things my JS does is an addClass, and it wasn't being added. So I wrote a couple alerts at the top and bottom of the JS document, and sure enough, they don't fire.
What puzzles me is why this entire thing works perfectly on desktop browsers, but not at all on mobile. Like the JS wasn't loaded at all. I get no errors in the console, and I've made sure my JS is ordered properly in my HTML document.
The page can be viewed here.
aSum = newArray.reduce((a, b) => a + b, 0);//'newArray.reduce' is worry at Safari.if you delete this code,will show alert beginning and finished.sorry,i don't know the method array.reduce..so can't give you solution.but if you need sum function of array,plz try aSum=eval(newArray.join('+'));
Works on Android Chrome. (Note 4)

Ascensor.js IE8

I am working on a new site, currently hosted here. I am implementing a single page design using the Ascensor plugin, found here. It works fine in Chrome and Firefox, and IE10 and IE9. However, in IE8, the home page loads and then if I click on any of the navigation icons, the page starts shaking, literally shaking left and right very fast, and the browser crashes after a few seconds. I have used Ascensor in IE8 before, and it had worked. I can't even debug as it just crashes without any warning in IE8. I've been trying to figure out what's wrong for the past few hours, with no success.
I checked the behavior in IE8 by:
Changing the document mode to IE8 in IE10.
Using a Win7-IE8 VM
If it helps, I am also using the following jQuery plugins on the page.
CarouFredSel and FancyBox for the gallery.jQuery custom content scroller
Also, I am using jQuery 1.8.3 as Ascensor does not run correctly using later versions.
Someone please point me in the correct direction. Thanks.
The issue was related to the scrollbar (not sure why it was occurring though). Using the following CSS on the body fixed the issue.
body
{
overflow: hidden;
}

tinyMCE not working on firefox 5.0

I've just realized that tinyMCE is not working when you use firefox 5.0
First I thought that's my fault with some script , but then I went straight to TinyMCE demo page http://www.tinymce.com/tryit/full.php and there was the same result.
In normal way you open page, see editor, see text inside editor.
With firefox you see editor, but nothing is inside textarea. It is empy, blank. And what's more strange there is no mouse cursor inside of it. You cannot set it there, thus you cannot write there.
Later on I made one notice.
I've started to refresh the page fast, many times so the browser cannot work fast.
And I saw that it writes textarea, then converts it into tinyMCE editor with all text inside of textarera, and then on the final step it hides or removes all the data from textarea, leaving empty editor with all buttons visible.
Any idea what's going on?
Of course I've posted this on TinyMCE forum, and bugreported it also, but things there run very slow, and on StackOverflow I've got used to fast answers :)
So if anyone has any idea about how can I fix it please tell me.
UPDATE
I think something is wrong with my computer.
I've just tested cuteEditors demo and it acts the same way
http://cutesoft.net/example/general.aspx
So I think problem is inside my computer.
Is it Firefox or what?
SOLVED
Plugins were the problem. I disabled all the plugins and everything works fine!
SOLVED Plugins were the problem. I disabled all the plugins and everything works fine!

Categories

Resources