So i am creating a mobile version of my employers website using jquery mobile. So far, very good and everything works as expected.
But there are some areas where users would input some data, to submit a form. For ease of use on such small screens every input utilizes "placeholders" that was introduced with html5.
Works like a charm on anything but WP7.5. So without appropiate labels it does not make sense where to type what (note, in accordance to jquery's recommendations, i have made hidden labels associated to their respective input fields).
So i searched around for various javascripts that can work around this issue, but none of them works on windows phones for some reason.
Anyone have a suggestions? Ideas? Workarounds? Or something else?
Funny, after having trying to find a solution for hours on end, after writing i found a solution.
I took out the code for adding placeholders from Zurb's excellent Foundation framework. For anyone stopping by with the same problem, look here: https://github.com/mathiasbynens/jquery-placeholder
It doesn't work because both Desktop and Windows Phone versions of IE9 don't support the input placeholder attribute.
What you can do is use a Polyfill, like this one: https://github.com/ginader/HTML5-placeholder-polyfill
Related
I have a Windows 7 with service pack 1, and Internet Explorer 10. And I have my site, http://www.gfcf14greendream.com/ . It looks great on Chrome, Firefox and Safari, but not in Internet Explorer. For starters, I wanted to test how my site looks using IETester, and it's a mess (please compare by clicking the link above):
The thing is, I think that maybe the issue could be that IE8 doesn't load well from <object> tags, is that it? I use three object tags to load the three white parts: header, vertical menu, and "site log" (you can see them here: http://www.gfcf14greendream.com/header.html , http://www.gfcf14greendream.com/verticalmenu.html , http://www.gfcf14greendream.com/thesitelog.html)
To load those three sites, I use the following code:
This one for the header, <object type="text/html" data="http://www.gfcf14greendream.com/header.html" width="100%" height=185></object>
This one for the menu, <object type="text/html" data="http://www.gfcf14greendream.com/verticalmenu.html" height=484 width=100%></object>
And this one for the log, <center><object type="text/html" data="http://www.gfcf14greendream.com/thesitelog.html" height=600 width="90%"></object></center>
Please let me know if anyone has any ideas concerning this "mess". Thank you!!
This isn't a real answer (It's a quick and careless answer at best, so don't take it too seriously)
But I just thought I'd mention that the the W3C markup validator might be useful to you if you don't already know about it.. It catches bad markup practices or errors on your page and can give you more information on how to fix them. At the time of writing, your front page alone has 10 errors and 3 warnings on it. Maybe this could point you in the right direction?
upon a quick skim of your page you don't seem to be utilising CSS properly. That is to say, that I see you are using css but you have elements on your page (use of <center> HTML tags, inline styling and things like that) that go against the grain of why CSS was invented.
If you haven't already seen the CSS zen garden, take a quick read/look at it. It should set you right on why we use CSS instead of tables and alignment tags.
(People sometimes don't get this immediately, but , click the links on the right in the zen garden. The same HTML and page content are completely restyled using one html file and seperate CSS sheets)
Good luck!
Edit:
Oh, I almost forgot to mention that internet explorer 8 doesn't have much (if at all) HTML5 compatibility. If you want to develop websites and web apps in HTML5 you'll be hard pressed to serve your I.E 8 visitors and may end up spending more time fixing bugs than you are developing the content.
Some developers are already boycotting I.E 8 entirely to usher in the new era of the web with HTML5 and CSS 3. There are a few js compatibility libraries out there (like excanvas for the new <canvas> element for example) but they don't work flawlessly and you will eventually have to draw the line somewhere. (lol. canvas.. draw line.. get it?) That being said, i did find this article and this may be useful to you:
turn-on-html5-in-ie8-or-lower
Not every website requires HTML5 and it's new technologies, but if you plan on using it for things like the <canvas> tag, Id suggest (from my own personal opinion) you forget about I.E 8 and concentrate on browsers that utilise it.
Remember that you can make checks in your HTML to see what browser version your visitor is using.
You can see if they are using an incompatible browser, and if so, you can then alert them that their software is out of date and suggest to them alternatives (such as chrome or firefox)
There's a bunch of tutorials on-line about this, here's the first decent looking one I found in a quick Google search this article covers using this technique for seperate CSS sheets but there are others that talk about the problem I mentioned in more depth and I'm sure you can probably figure out how to do it anyway once you read the article.
Either way, I'd say you've got a little bit of reading ahead of you to understand why your humble website does not work in an increasingly obsolete browser.
Again, good luck to you in your future endeavours.
Edit was too harsh:
Having looked a the site I would start by suggesting in future you think about design from a users perspective - the colour scheme you're using isn't very friendly on the eye, the red text against the green is particular troublesome to people with red/green color blindness, you also should consider how your content is presented.
End Edit:
However, regarding your IE issues.
First things first, with any work is getting a firm plan of what you hope to achieve and setting a good groundwork before starting. With HTML that means leveling the playing field with regard to browser quirks, and to achieve that, you use a reset css file.
This ensures that all browsers (as close as possible) behave in more or less the same way, regarding padding, spacing, line heights etc, and can go along way to prevent these sort of problems from happening, and allow you to achieve consitancy.
There's more info at the link below.
http://meyerweb.com/eric/tools/css/reset/
Secondly your HTML version - your declaring HTML5 but then use HTML4 values and attributes - basically your site (as pointed out above) is not valid markup.
I am new to jquery mobile . I am developing ipad app using phonegap and jquery mobile(1.0.1).
I need to add splitview for my application. I have searched in google and found "http://asyraf9.github.com/jquery-mobile/" .
But It doesn't work for me. My question. Is there any other tutorial for splitview or better way to add asyraf9 solution to my apps?
Thanks you very much.
I've also experimented with the solution from asyraf9 but it doesn't seem to work very well (and isn't that configurable either unless you want to poke around in it's source). It also hasn't been updated in many months by now.
I ended up using Sencha Touch instead which looked better and have a whole company behind it, not a single developer. It isn't a plugin for jQuery though so it doesn't use the familiar $-syntax but that also means that it probably will work fine if you want jquery for handling other stuff (like xhr). Check out a demo of their splitview and other mobile controls on the link below.
http://dev.sencha.com/deploy/touch/examples/production/kitchensink/
Splitview was done for JQM <1.0. The way it's set up, it is difficult to integrate with JQM, because it basically disables the navigation and viewport and then sets up it's own. So if you would get splitview to work, you would be bound to the single page you are working in.
If you want to try an alternative, have a look at multiview(Github), which I started based on splitview, but which runs using JQM navigation. It's still work in progress, but I need for a project I'm doing, so I'm patching it up as I go along.
You will need to use my modified JQM version. There are two tweaks left inside JQM, which I ahven't been able to remove so far.
I'm working on something similar. I'm using jQuery's .load() and it seems to work quite well
$('#sidepanel').load('path to file you're trying to load.html', function(responseText, textStatus, XMLHttpRequest){
$('#sidepanel').trigger('create'); //this applies the jquery mobile stylings to the loaded content
});
sidepanelis the container for the secondary view you want to load things into
I have a problem on a page i'm coding. Problem is i'm getting random img classes from nowhere (at least nowhere i know). I've put the generated class below.
<img class=" iryjanjabqqmypymdnuv" src="some/source/path">
There are several jquery plugins and jqueryui on the page but div that got img has nothing to do with those js libs. I also use php but that must have nothing to do with this i guess.
If you need any codes or names of the libraries just ask. Please help me i really have no idea and all the search i did was empty about this.
I had exactly the same problem. Find out that AdBlock Plus is responsible for that. So, just disable all the extensions and reload the page
Just wanted to chime in for anyone that finds this googling their problem, this is exactly the right answer in my case as well. AdBlock Plus (in Firefox only, not Chrome) was generating random class names for images I have embedded in my nav bar for social media links.
Now I have to either find a way to get around that or anyone using ABP in Firefox will see a weird looking nav bar due to this issue. It's not exactly an unpopular plugin.
I work in both Chrome and Firefox and use ABP in both. Hopefully we won't have to find workarounds for this.
Is it possible that you're browsing on a mobile network connection? Some mobile networks modify the HTML/CSS for images so they can serve lower-bandwidth versions, but allow you to "fix" them later. For example, on T-Mobile, if I hover over an image it will give me an Alt tag telling me the keyboard shortcut to use to load the original.
Obviously this won't be the case if it's all local...
I had the same problem and disabled all extensions in Firefox and then it was gone. Not sure which extension is the guilty party, have too many to chase it down by disabling each of them one at a time. :)
I have implemented many CSS methods to enlarge the size of checkboxes. Problem is that it does not work with Google Chrome. For example I tried http://www.456bereastreet.com/lab/form_controls/checkboxes/
Does someone know any idea ?
Thanks
Styling checkboxes is risky business. It's one of those things that never seems to work consistently with all browsers.
Having said that, jQuery offers a plugin to do a replacement on checkboxes and radiobuttons
http://plugins.jquery.com/project/ui-checkbox
This new project seems promising as well https://github.com/mattSOLANO/ScrewDefaultButtonsV2
I'm wondering if there are any good non-native form inputs for web development? I am currently using the built in <input> controls. They work just fine, but for my application they are too big (especially on OS X). I am wondering if there are any libraries that I can drop in as replacements.
I am especially interested in ones that:
Are a close to native control behavior as possible. Support for tabbing, highlighting current textbox, pressing up/down in <select>, etc.
Have something that replicates <select>
Look good and are compact
I am aware that you can use CSS for some styling, but it's pretty minimal and looks different depending on the browser.
Thanks for your help.
These two from Codrops give the native selects "display: none", then add an overlay that can be styled/modified.
Pretty simple, you just need to call the plugin on your select box.
Demos
http://tympanus.net/Development/SelectInspiration/index3.html
http://tympanus.net/Development/SimpleDropDownEffects/
HTML is not modular like that. Importantingly, you're also restricted by the browser support. The only ways to customize the look'n'feel of HTML are CSS and Javascript. There are crossbrowser CSS/JS based UI frameworks available like jQuery UI and several CSS based form solutions with the goal to have the same look'n'feel among the (most) browsers.
You can also consider to develop an Rich Internet Application (RIA) using one of Flex, Air, JavaFX, Silverlight, etc. This way it looks exactly the same in every webbrowser, but that requires at least an additional plugin which the client may have to install first.
http://plugins.jquery.com/project/jNice
http://www.whitespace-creative.com/jquery/jNice/
You may want to customize the images, sizes and CSS with your own.
You could try creating the controls with Flex/Flash and using JavaScript to retrieve the values.
This would allow you to customize the control as much as you wanted while still staying compatible with most users/browsers.