Capturing scroll events on third party websites? - javascript

I am trying to compare scrolling behavior on a mobile vs desktop website. The plan is to let participants scroll on a mobile phone and desktop in a lab respectively for x minutes. Therefore, I have full control over the devices.
How do I capture the scrolling events on third-party websites such as Reddit? Google Chrome has a feature called performance insights to track user behavior, but it does not record scrolling.
What are some viable alternatives to record the scrolling of users on mobile and desktop?

I think the simplest way is to create a bookmarklet that injects a tracking script into the website you want to track.

Related

Google Translate menu on website not working on iPad

I'm doing some iPad optimization work on this test URL:
http://www.cherrystoneauctions.com/test
However, I notice that the Google Translate menu at the top-right is not working on my iPad. I can display the list of languages, but if I touch one of them, the menu disappears and the language selection is not made.
I would have thought Google's code would work on iPad. Is there something I am doing wrong (or that I can correct) or is this a limitation of Google Translate?
The Google Translate element requires Flash to work. As iOS devices do not have Flash, this will not work by design.
Source
Additionally, I was able to further verify this functionality by successfully using the element using the Puffin Free web browser, which is a Flash-enabled browser.

how to keep track of play and pause events on an embedded blackberry media player on a website?

I'm using an embedded media player on my website to allow blackberry users to listen to audio without having to download it. (I'm testing this on blackberry bold 9700 and so any cool html5, flash or embed tags wont work) The reason I have it embedded is because I want to be able to keep track of a users listening time.
Basically what I want is to be able to know when a user clicks play or pause. How do I gain control of these buttons? possibly using some jquery?
This is my code for the player:
<object data="myfilepathHere" type="audio/mpeg">embedded track isnt working!</object>
This is the site I used as a reference:
http://devblog.blackberry.com/2009/08/blackberry-browser-embedded-media-content-automatic-playback-how-to/
I can get the two buttons play/pause and stop to show up (and it looks just like it does in the link I've provided) on the blackberry and the track to play so if I can get this to work that would be just dandy. thanks! :D
Sorry, I spent some time trying some ideas out and I'm pretty certain it's not possible to track or listen to any events on the Object. You really need the Audio tag on BBOS 6.0 and higher. If you were doing a WebWorks app instead of a website we have an API that would help (https://developer.blackberry.com/html5/apis/blackberry.audio.player.html).
Supporting 6.0+ is not that bad. You may find that the majority of people who visit your site have that version or higher.

hover effect on a tablet (i.e. iPad)?

I'm the processing of redesigning a website that uses hover effect on a button (like button images changes when you put your mouse over it and when you click it, it goes to a different page).
Now that works fine if you're on a a desktop/laptop computer. But on a tablet, the hover/onmouseover effect does not work. On a tablet, when clicking the button image, it changes briefly and then immediately goes to a new page.
What are methods and techniques where a website can detect if a visitor comes from a tablet or not? Then would it be possible to switch to a tablet CSS version? Or, are there tablet framework (i.e. Modernizer?) that can help with this process?
Touch devices don't have a hover event and there is no way to emulate the user interaction that might initiate it. Make sure that there is no critical functionality assocaited with hover events (most just do highlighting) so there is no loss of functionality if the device doesn't have it. Browser sniffing by UA string is a flawed strategy - you must update it every time a new device comes along or the string changes for an existing device. Great if you're into high prices for maintenance, but not if you're the one paying for it.
You could identify the iPad (or mobile device) simply by checking the User-Agent parameter of the browser.
In PHP for example you could do something like:
if( strstr($_SERVER['HTTP_USER_AGENT'],'iPad') ) { // Add custom iPad CSS }
If you want to get it further you could use WURFL (http://wurfl.sourceforge.net/)

JavaScript events for mobile web?

There are JavaScript events for desktop web, e.g. mouse over, key press, etc. etc.
My question is why there is no JavaScript events for mobile web? e.g. fling? orientation change? etc. etc.
What if a web developer wants to write web pages specifically for mobile devices? How can they take advantage of phone specified user interaction (like the ones I mentioned)?
jQuery and other mobile application frameworks offer extended events for mobile devices. See some of the options below:
Sencha Touch
jQuery Mobile
There are JavaScript events for desktop web, e.g. mouse over, key press, etc.etc. My question is why there is no JavaScript events for mobile web?
There have been (relatively speaking) decent web browsers for desktops for a lot longer then there have been decent web browsers for mobile devices, so these things haven't been standardised. That doesn't mean they don't exist though.
A decade later and they are well supported and standardised.
Some events you can listen for include touchstart, ScreenOrientation.onchange, and devicemotion

Javascript, Smartphone detection for videos?

If there's a better way I am all for it. But I wanna detect a smartphone user on my site.
Whether they be a webOS, Android, or iPhone OS phone. I have a flash video on my site, but when I detect a smartphone users I want it to be a HTML5 video on the site instead.
You could try using this js library: http://videojs.com/
Here is a link to a javascript fix that I used in a similar situation. It not so much detects devices such as smart phones, rather detects whether the user has is able to view flash or not, displaying flash content first and falling back with whatever you specify if flash is not installed.
http://www.featureblend.com/javascript-flash-detection-library.html
Really simple to use and it played nicely with jQuery when I used it.
-Paul

Categories