HTML / CSS layout broken using jQuery mobile - javascript

I have a big problem with the layout of a webpage designed for iPad and normal PC displays.
I want to have this layout:
http://img227.imageshack.us/img227/9978/layoutw.png
I already have this layout designed with HTML / CSS and it works in every common webbrowser (Firefox, Safari, Chrome - IEx is not relevant for me):
http://ud05_188.ud05.udmedia.de/spotlight/webpage.html
But now I integrate some jQuery mobile stuff and the layout is broken.
You can see here the website: http://ud05_188.ud05.udmedia.de/spotlight/jquery.html
They div areas are overlapping and it seems that the jquerymobile JavaScript file is the problem.
So how can I identify where the problem is located? What's going wrong here?
Thank you in advance for your help!
Best Regards Tim

I didn't yet look into multi-box layouts with JQM, but what I can already suggest is:
See if it can be done with JQM settings. JQM might have special attributes for your controls. Or you might need extra wrapping divs.
Add margins/paddings to your CSS. Adding rounded corners often produces extra width for elements.
And if you manage to figure it out, please post it here as an answer to your own question.

Related

Fixed position + JavaScript issue with Safari

I'm having a problem with some JavaScript that makes the rollover menu on the right (aligning with the tick mark) work on an Elementor site I'm working on. I had a another dev work on the JavaScript, and I didn't notice this error right away. Now I can't get ahold of him.
The right nav looks perfect and it does exactly what it needs to do in Chrome and Firefox. But I see now that the right nav and tick link does not work in Safari.
Elementor support was kind enough to take a look at it and they said, "...your page has custom CSS for the fixed layout menu and also I found a console error regarding a snippet for the dividers. It seems there is custom code applied to the Elemtor dividers to style the fixed layout menu. This is more a Safari and the custom code/CSS is applied to the page issue.
Despite there being a known issue with the position: fixed CSS rule not working as intended in Safari, I have seen people find a workaround to it. However, the fixed layout menu has many custom CSS and custom code applied. I wasn't able to find an immediate workaround for the many customizations you have.
The only solution I found was to remove the custom CSS position fixed which will depend much on the needs and requirements of the site."
Can anyone point me in the right direction for a fix? Have you come across this problem before with your sites?
Thanks in advance for any help.
The site is here:
[http://farallon-dev.com]

Website structure changing when I change pc

I made all the webpages in html5, css and js and used google chrome to see the result.
When I change the pc for example, the structure of the webpage changes completely...
I think it has something to do with position relative and absolute but not sure...
Here it is sample fiddle, the webpage for now is just 5 images that I can navigate with 4 keys from keyboard,
sorry for my english...
Can anyone help me?
Are the screens different 'sizes'. Check the resolution of the displays. That's most likely your issue.
It sounds like you're positioning your elements based on the size of your screen. This would be fine if everyone had your screen.
If you could provide your code, I could further assist on how to remedy your situation.
In the meantime, try reading more into css positioning: http://css-tricks.com/almanac/properties/p/position/

Html5 for mobile - swipe scrolling

I'm working on a few html5 screens which will be embedded inside native mobile apps (for ios and android).
I obviously don't want to reinvent things here, and would like to use a stable framework on the javascript side of things.
I tried using JQuery Mobile but it is way more than I need, plus they kind of force you to do things their way.
All I need is to have an element which can be (vertically) scrolled by swiping (without visible scrollbars), but I couldn't find how that can be done with JQM easily (without all of their widgets, themes and defaults).
I also tried jGestures but it did not work at all.
Any ideas what will be the best approach?
Thanks.
Update
I found this jquery plugin which does what I need: https://github.com/ifightcrime/touch-scroll
You can use -webkit-overflow-scrolling: touch; which uses the native inertia scrolling built into the phone. Works really well. There is a scrollbar, but I'm sure some clever positioning could solve that.
More info here: http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/
And here: http://fioravengi.blogspot.co.uk/2011/06/implications-of-ios-5-webkit-overflow.html
Hope that helps :)
edit: Sorry, just realised you need it to work on android. I doubt this does. For iOS though this works a treat. So, half an answer!

Dynamically edit img src based on device orientation with JS or JQuery

I am working with an iOS magazine framework (PugPig) which loads HTML documents into a WebKit powered view (a chromeless version of Mobile Safari).
I would like each 'page' to load either a portrait or landscape version of an <img/> depending on the orientation of the device. For various reasons it has to be an <img/> rather than a CSS background image, so media queries won't work. Because I am loading HTML from the local device, no web server stuff can be used either.
So I am guessing that JS is the way to go, but it would need to detect orientation change (or at least screen width) on the fly, without a page refresh, and I don't know if this is possible.
Not hugely familiar with JS hence no sample code (all my attempts so far are car crashes). Sorry.
Any help much appreciated.
Did you try jQuery mobile's orientationchange events?
I've never done this, but it seems you could go this way.
OK, found a solution using CSS Media Queries after all, by setting the display property of the img. Bit of a fudge, but fine for now.
Basically I created two divs, one with a 'landscape' id and another with 'portrait', positioned absolutely on top of each other. Then used #media queries to show/hide the relevant div with the display: property. Very clumsy, not at all suitable for the web but okay for an iPad app loading data straight from memory. And this was before "responsive images" became a thing.

Mootools and Lazyload

I've developed a JS-heavy site using the Mootools library and have hit a bump in the road. There is a scrolling div on the page that contains 500+ images and I'm trying to implement a lazyload feature so the page doesn't load all 500+ images at once.
I found David Walsh's lazyload class but it doesn't work in webkit browsers (he says this is because of WebKit bug #6656).
I also found this class and it appears to work but doesn't really. It still loads all images on the page but hides the images outside of the viewport and fades them in when scrolled into view.
There seem to be a number of jQuery lazyload classes that work really well (in all browsers), but I'm already weeks into the development of this site and can't really justify switching for this or using two libraries.
Anyone know if there is a Mootools lazyload class out there that works in webkit browsers? If not, have any recommendations? Do I have to resort to using jQuery alongside Mootools?
This issue is holding development up a bit.
You could wrap the images inside of a noscript tag. Browsers won't load images inside of there if you have Javascript enabled. The nice thing about it is that it degrades well for non-JS browsers. I describe in more detail here:
http://experimentsbykevin.tumblr.com/post/754769738/lazy-image-loading

Categories