dutch_rc 71 Posted September 8, 2014 Hi guys, Like some of you may have noticed from my forum signature, I've been working on a Tamiya fan website with database for a while. I'm lucky enough to have a huge amount of reference docs (dealer lists, guide books among other things) and together with an effort to develop some webdesign skills, I've been making these available online. This post is about the aforementioned developing... I've created a page that's responsive to different screen sizes and put some jQuery (Javascript) tricks in it to make that all work. I've tested it on all major browsers but only with a mouse on my desktop. Since I don't have any gadget with touchscreen, I am not sure those will fully function. That's why I would really appreciate some feedback from anyone with a similar device. Mostly Apple and Samsung (they use different code) but any reply is welcome. Biggest question - can the page below be normally scrolled on a touchscreen? http://tamiyaweb.com/model/list Thanks in advance. 1 Share this post Link to post Share on other sites
geopaj 3 Posted September 8, 2014 Mostly Apple and Samsung (they use different code) but any reply is welcome. Biggest question - can the page below be normally scrolled on a touchscreen? Yes (on an iPad) Share this post Link to post Share on other sites
JWeston 493 Posted September 8, 2014 Good luck with the project. Share this post Link to post Share on other sites
RCcoachworks 59 Posted September 8, 2014 I'm looking at this on a Samsung phone, and the text is extremely small. Otherwise, the scrolling is working. Is it the sticky header and footer that you're working on? Share this post Link to post Share on other sites
alfagta 126 Posted September 8, 2014 works on windows phone 8.1 and windows 8 touch laptop Share this post Link to post Share on other sites
GregM 1109 Posted September 8, 2014 The site looks the same in my regular PC browser as well as on Windows Phone 8.1. No optimization for small screens visible, if there is any. Performance wise, the Javascript thingy runs pretty poor on mobile devices. The information on your site is good, but design-wise it is stuck in the early 2000's. Keep on the good things and try improving the general design to make it more nice to read. Share this post Link to post Share on other sites
taffer 948 Posted September 8, 2014 Works fine on my BlackBerry playbook, scrolling isnt smooth though Share this post Link to post Share on other sites
dutch_rc 71 Posted September 9, 2014 Thanks for the replies, guys. Glad the scrolling is working at least. Thing is, it's not really a direct scroll - I am translating mousewheel turns into an animation with jQuery that only mimics scrolling behaviour. It's a small plugin that I wrote myself (since something like it didn't exist yet) : http://ataredo.com/morphology/lucidscroll/ Wasn't quite sure binding the mousewheel event would get accepted by all operating systems. I guess it might be a bit too much calculation for the current computing power of mobile devices... I'm looking at this on a Samsung phone, and the text is extremely small. Otherwise, the scrolling is working. Is it the sticky header and footer that you're working on? Yes, I was indeed also working on the sticky header and footer. I'm giving myself a bit of extra trouble because I'd like the footer to be slightly floating above the bottom. Because of this I had to create some overlapping viewports (and implement an animated scroll). The tiny text is certainly something I'll have to look into... Thanks for all the feedback, it is very worthful info. Share this post Link to post Share on other sites
GregM 1109 Posted September 9, 2014 You're welcome. Please let us know if there are any news. Share this post Link to post Share on other sites
dutch_rc 71 Posted September 9, 2014 Cheers, putting everything online is pretty much an endless job, especially with a certain perfectionist attitude. I'll be focusing on adding the guide book entries with the models' specifications first... Then there's finishing the dealer lists before getting to the exploded views. I've changed the characteristic of the scrolling on that page (that's what the little script can do). Animation with jQuery is a cool thing in itself but can lead to sea sickness if the wrong values are used. It should very much resemble default Firefox smooth scrolling now. By the way, Greg... I'm not much a fan of media queries. Think they are 'ugly' coding. But I guess it's either that or make a separate mobile site. I did not get to serving the very small screen sizes yet. The page's responsiveness stopped at around 700 pixels. Keep working on it... Share this post Link to post Share on other sites
dutch_rc 71 Posted September 24, 2014 Just finished creating the pages and uploading dealer guide parts lists for models 58084 up to 58200. http://tamiyaweb.com/data/overview Next, exploded views will be added. The site should also be a lot more responsive to screen sizes as well, but I'll keep working on that. Share this post Link to post Share on other sites
neverfollow 599 Posted October 4, 2014 Great work! Using an iPhone 5s, and it's working ok. Just as others mentioned, scrolling is a little slow. Share this post Link to post Share on other sites
dutch_rc 71 Posted October 4, 2014 Thanks for the feedback, good to hear it's Apple compatible (they can be tricky). I might disable the animated scroll so it's a bit easier on mobile devices... Share this post Link to post Share on other sites
dutch_rc 71 Posted December 1, 2014 Hey guys, This time it's not an actual update yet but I would very much appreciate some feedback on this feature I'm trying to develop which I could implement on the sitelater. It's a lightweight plugin that makes things draggable. The point is that I'm trying to make it touch device compatible but I cannot check myself if it actually works. The code is on a separate site (Codepen) for testing and this doesn't quite work yet on mobile phones. So if anyone has a tablet with an Android or iOS operating system, could you quickly check if the square on this page can be dragged around? http://codepen.io/Shikkediel/pen/ZYbWzL Hope you don't mind me 'abusing' the large and often responsive audience here for this. Many thanks in advance in any case. Share this post Link to post Share on other sites
GregM 1109 Posted December 1, 2014 The dragging you mentioned works on Windows Phone 8.1. Cool, eh? 1 Share this post Link to post Share on other sites
dutch_rc 71 Posted December 1, 2014 Cheers, that's good news. I had to read up on Windows touch events but it looks like they are also supported (and thus are triggered in the script). It would be a great solution to make elements draggable, otherwise one would need a whole lotta code and library plugins... Share this post Link to post Share on other sites
matman 1499 Posted December 2, 2014 works on ipad , slow , but that can be internet ( slow in Aus ) 1 Share this post Link to post Share on other sites
dutch_rc 71 Posted December 2, 2014 Excellent, that would mean it's cross browser functional (I suspect Samsung will work as well as it's very similar to Apple). Thanks, guys! Share this post Link to post Share on other sites