UPDATE: I have updated this post more than 5 times but still couldn't
get appropriate answer , I'll appreciate if you could read my question
carefully and answer it <3
I want to create slideshow just like bwin's mobile version website. I started to analyse how it works. but it works weird, if you use inspect element in google chrome or any browsers you can see the slideshow works without any inline styles added dynamically.
in every slideshows that I've seen before there was inline styles that they added to HTML tags in a specific time interval. in this case I can't see any inline styles that add to tags but it works like a charm. I checked the CSS files for the keyframe property and there was nothing and of curse they don't use transition too.
for more information is good to say they use angular as their front-end framework.
Note: please open the mobile version of the website in computer to see what is going on !
The address is : https://sports.m.bwin.com/en/sports
I'll be appreciated if you tell how does the bwin's slideshow works? and how to create this slideshow?
thanks a lot <3
UPDATE: Special thanks to Sergiu Paraschiv that he figured out google
chrome's dev tools doesn't show inline changes for translateX property
of DOM Shadows , he tested the bwin's mobile version with his Safari
in his Mac machine and he captured screenshot "imgur.com/a/Php4EhB" ,
so you can see the inline changes in Safari browser of Mac OS . Why
google chrome or firefox doesn't show the changes of inline translateX
property of the DOM Shadows?
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.
Im currently working on a fork of the famous web developer extension (chrome, firefox, opera). Exactly I am working on the chrome extension.
The Firefox extension is shown like that:
Chrome instead shows only a icon...
..which toggles the "pretty small" widget:
A part of my goal with this fork is to change this toggle icon to a toolbar such as firefox does.
After studying the documentation chrome extensions (https://developer.chrome.com/extensions/devguide) I came to the result that this is not possible with default settings (browser actions, page actions,...).
When I looked again at the Table of Contents in the documentation I got an idea. There is the possibility to edit the bookmarks. So it could be possible to add an additional bookmark bar/row and place the single web developer actions as bookmark with the function on it.
Is this the right way for solving this? Because at the moment I only see possibilities with more or less dirty hacks. And doing it via bookmarks seems at least dirty.
PS: I also thought about this:
The plugin is actually the same on firefox and chrome and from the same author. So when this adaption of the toolbar in chrome would be easy possible then would not have such differences in the chrome and firefox addon.
Nope, that's simply impossible.
Chrome does not support custom toolbars, and that includes "an additional bookmark bar/row".
The closest, visually, would be injecting UI directly into the top of all pages. I don't think I need to explain why that is hacky.
Ever since Chrome updated itself to version 32, I have been experiencing aggravating bugs. One of the worst is when editing the DOM using the Web Inspector, and Chrome will about every minute start popping up this dialog, which yanks focus from the Web Inspector:
It's complaining about the Web Inspector itself being "unresponsive", when it really isn't, and nothing's gone wrong.
This particular page I'm messing with is making use of the mutation-summary library. Perhaps the bug in Chrome that thinks stuff is unresponsive could be related to setting various continuously-running setTimeouts. I say this because I observe similar behavior in the web app we build at work where this has also started happening (and is equally annoying).
The workaround is I believe it is possible to just ignore the dialog and work can continue. I wonder if anyone else (or everyone else) has been experiencing this issue?
I started getting this problem as well.
In searching, I came accross this issue https://code.google.com/p/chromium/issues/detail?id=335248.
As best I figured out, the bug is related to:
Windows 7/8 with Aero Theme
Scrollbars on pages (such as in the developer console)
Pages with popups (in particular Window.open() calls)
I guess they are slated to push the fix into version 33...and maybe leave the stable* 32 how it is (although I hope not).
So there are a few options:
Switch away from Aero Theme until version 33 is in stable
Upgrade to the beta channel, i.e. version 33
Click on the Wait button every 30 seconds whenever the chrome developer tools is open.
Update:
Chrome has released a hotfix into the version 32 stable channel. http://googlechromereleases.blogspot.ro/2014/01/stable-channel-update_27.html
Thanks to #probackpacker for bringing it to my attention.
I have experienced this as well on Windows, it seems that this will happen in general when using the browser (not only within the web inspector). It also seems to happen more often when loading flash content (such as a game). The browser and flash areas are responding normally, but the browser thinks that they are not for whatever reason. Pressing wait seems to hide the dialog for a few minutes until it will re-appear again.
I've read that this bug is fixed in the next beta (version 33).
Regards,
Moses
I have also experienced this issue. The change of theme workaround has worked, and the Chromium team has provided the following update today:
... We understand your frustration and are actively working to resolve
it. When you add that comment, it’s confusing the comments around
whether we’re able to fully fix it on canary. If we can confirm it’s
fully fixed in canary, we can merge into the stable channel and
everyone can get the fix. So please refrain from saying thatyou’re
having this problem, too. I assure you we’re actively working on a
fix.
This statement was taken from Chromium ticket #335248.
Okay here’s the solution you can do without changing your theme, right click on my computer, go to your System Properties, and then go to "Advanced", click on "Settings" under Performance, then check the below radio button. This seems to stop it
If the aero fix isn't working for you, download Chrome Beta
I have had this same issue with Chrome 32 (there are so many problems in the dev tools...) but it ONLY happens for me when I have the dev tools detached / undocked from the main browser window.
You might be able to avoid it by re-docking the devtools if you are using them in un-docked mode.
August 6, 2014 - I solved this by installing the latest Chrome Beta https://www.google.com/chrome/browser/beta.html
You can solve this problem in Chrome by following simple steps-
1-Go to Setting
2-Go to Advance Setting
3-Uncheck the "Use Hardware Acceleration when available".
I fixed that problem by linking modem directly to my PC, didn't reinstall or change Chrome or anything. I skipped connection through my wireless router which I think was the problem from the start... now all the pages Chrome couldn't load are loading with no problem at all. Maybe it's time to by a new router...
Does anyone know of a browser plugin (Ch or FF) or perhaps a Firebug plugin, which would show me all attached event javascript handlers to currently selected DOM element? I have to debug one site that I received to take care of, with lots of spaghetti-style javascript.
For Chrome, I guess the normal dev tool would do: http://screencast.com/t/KHKeMIj6BiDk (this is a Safari actually, but this should come with other webkit desktop browers as well)
In the meanwhile, read this stackoverflow question: How to find event listeners on a DOM node when debugging or from the JavaScript code?