Hello I have implemented Dropkick.js on to my site and now have some very very good looking select elements. However when I look at it on a iOS system I am not able to scroll down my options.
I have read the documentation of Dropkick.js and it suggests that I try and use scrollability.js however I cannot for the live of work out to make this work.
Does anyone have any experience of using this and dropkick.js - or does anyone have any suggestions to alternatives?
I have never used DropKick.js and scrollability.js together, but I can tell you from experience that DropKick doesn't have native mobile support since it was built for desktop browsers and not phones.
Since mobile phone browsers usually have their own handler for the tag, a lot of JavaScript plugins don't have proper support for phones because their code actively removes and replaces it with a of their own design or doesn't even use tags in the first place.
If you're looking to make your site work on both iOS/mobile browsers and Desktops, I recommend using SelectBox.js from A Beautiful Site.net even though it's a little bit more difficult to style than DropKick.js.
If you're looking for a purely mobile solution, I would recommend just using pure CSS to style your as seen HERE since it's simpler, quicker, and leaves tags in place.
Hope this helps!
Related
I've read this thread,
Dropdown menus by CSS or JavaScript
but see that there are conflicting opinions over use of CSS only vs javascript for dropdowns.
Is the only argument in favor of using CSS only to accommodate people with javascript turned off?
Are there any other considerations?
Which method is more forgiving in a site that must work on desktop and most mobile browsers (iOS, android)?
Drop down menus tend to be designed for pointing devices. It is very rare to find one that can handle linear (e.g. keyboard tabbing through items) or touch interaction (although you can degrade gracefully if the top level items link to pages that provide onwards navigation).
I doubt it is possible to get one that works well for linear or touch without JavaScript.
And ideal solution for this is one that uses both. So it works for people without java script and it is improved for people with javascript (animation....)
Like you say it depends on the requirements and to be honest if the device targetted support CSS3 you can probably do a cool animated one in CSS only.
So I'm nearly finished with the website I had to make for my school's prom. Now, I just checked it in Internet Explorer and, well, it's hopeless. Elements aren't where they're supposed to be, most of the JavaScript/jQuery doesn't work at all. I am clueless where to start to make my site compatible with Internet Explorer. Whats the best way to make your site compatible with IE?
The main cross browser step is DOCTYPE Declaration. It is an instruction to the web browser about what version of HTML the page is written in.
It's going to be murder to fix what's already broken... you really needed to start off on the right foot, as it is you may need to re-write large chunks of your site in order to get things working again.
Going back? Well the easiest thing is going to be to start a fresh layout (using the following pointers) and then move your site into the new framework. Depending on the scale of your site this is no small task. Your alternative is one-by-one code debugging, with maybe firebug light
Going forward, how do you build a site that works more evenly across the board?
1 Use a reset CSS boilerplate
I like the html5 one at http://html5reset.org/. These apply layers of CSS to get each browser looking the same to start with (your CSS then gives it the style you want). Note they DON'T address the variety of ways browsers calculate things - borders being part of the width or not (firefox/ie difference)
2 Use a JS library
Or write your own, but be aware of all the differences between the browsers don't just code for the one you're using. Build some JS tests for the library that you can run in any browser to make sure that the library performs as expected, then deal with any site oddities after that. There's too many JS libraries to make a recommend but Prototype.js and jQuery are a popular two.
well it's known that there are differences between browsers. The way browsers render CSS code is also different. You should check parts and see how or if it works as you want. :) There is no one-to-all solution. The experience will let you know what works and what not. But to start you could isolate what is not working in IE (javascript code) and then see what alternatives you have. As for the appearance, there is the option of having separate CSS files especially for IE. However, often there is a technique(a different way to implement the same appearance) that lets you create the appearance you want without multiple versions of code.
My team is in the process of prototyping an application with a rather complex UI. One common feature of the application is a number of tools which pop up above the main app and allow users to perform some complex operations.
Currently a consultant has wrote some custom code that displays the dialog and blocks the background UI. It works fairly well however we have hit bugs which have taken time to fix. Since we have had some down time we have investigated "better" ways of achieving our desired functionality. I have investigated Jquery UI and was able to establish the same functionality in about an hour. One issue I have had with Jquery UI is constraining tabbing to the dialog box displayed in IE. In IE the the tab index jumps to the background UI and I believe this issue is recognized in Jquery UI. http://bugs.jqueryui.com/ticket/3768
I was able to find a small plugin that fixed this issue for IE, however it broke the tab constraining in Firefox. I was able to make this work by putting a conditional IE check in my JS and only applying the plugin when the browser is IE. Under our current approach we do not handle tab constraining, however our consultant believes we can easily accomplish this.
My question is, which is the better approach, create our own custom solution or use Jquery UI + the plugin + the hack? When are IE hacks acceptable?
I'd go with jQuery UI because at least they'll maintain the library for you, and perhaps eventually release a fix for the issue you're talking about, and then you can remove the hack. Sometimes hacks are necessary. It beats having to maintain an unthoroughly tested custom library.
Writing a framework from scratch is always more difficult and time consuming than hoped because you will run into many issues that you simply cannot account for ahead of time.
That said, I would suggest creating a custom facade over the Jquery UI + the plug in + the hack. This would give you consistent API that meets your project's needs, the use of an established and well-maintained framework and hide some of the peculiarities between browsers. (IE hacks are unavoidable.)
I'm just starting to use HTML5 and CSS3 in my documents.
I understand the need for JavaScript to bring Internet Explorer up to speed with these new tags and styles, but I don't know which to use and when!
My plan was to use html5shiv and IE9.js to look after the HTML5 tags as well as the transparent pngs (and whatever other pesky errors they fix) but then Modernizr and CSS3 Pie were brought to my attention.
My question is, if I use Modernizr, does it look after my need for html5shiv as well as IE9.js? Or should I include these as well? What is the overlap, if any?
And what does CSS3 Pie do that Modernizr or the others doesn't? Or vice versa?
I appreciate your guys help. Let me know what you do!?
I've got extensive experience with all of these, having used them for a few years each.
Modernizr
Includes HTML5shiv functionality
Also does a lot more – if you don't use the other features, then don't use it, it does slow down page loads, but is worth it if you need it!
HTML5shiv
Very small, just fixes html5 elements in IE, nothing else.
CSS3PIE
Lets you use border-radius, gradients and box shadow in older versions of IE. Also can allow PNGs in IE 6. Adds a noticeable delay to page load.
ie7.js (and ie9.js)
Gives you many CSS3 selectors, min and max width, multiple classes and fixed positioning. Also can have a png fix if you like. Doesn't seem to slow things down much.
Conclusion
My advice would fall into two categories:
If you are just using the new (is 2 years new on the internet?!) elements, and CSS3 selectors, then use ie9.js + the html5shiv. This is lightweight, and just lets you get on with things without having to remember that IE6 doesn't support anything.
If you are using a lot of CSS3 stuff, then CSS3PIE will sort out border-radius and box-shadow. The gradient support seems a little flaky, so I've always used a fallback image instead. Modernizr lets you easily deliver different properties to browsers with different support. I've mainly used this for determining whether a browser has CSS transitions and transforms, as they are useful for any image sliders or content carousels. It's worth using the customisation tool to only include the functionality that you want – the webforms stuff shows a textbox with 50 in it for a couple of milliseconds, so it's worth disabling if you don't want it.
Hope that's helpful!
I would recommend you use only what you need. Build your app in a browser that supports the features you are using, and periodically test in other browsers that you support. If something isn't working correctly, find the appropriate fix, whether it be html5shiv, IE9.js, Modernizr, or CSS3 Pie. You are not going to use all of the new features in HTML5 and CSS3 all in one page, so you don't need to include every polyfill library in existence. Wait until you find problems with the features you're trying to use, then try and find the library necessary to do that.
I've used mainly CSS3Pie...it works great. But this afternoon i tested it on my laptop with I.E8 and there was an problem with it...it was disabling some css lines...when i removed the css3pie code my site gained twice the speed...then i came accross the posts with people arguing about the css3 slowdown...So at the moment i'm busy to find another way for IE7 & IE8 to have border-radius and shades.
If you want to use it...please test alot as it is NON-official fixes
I know that <marquee> tags are evil.
If it is so bad to have scrolling text, then using JS to get the same effect doesn't make it any better, right?
And suppose I decided to have some scrolling text (gasp), is there some type of CSS(3?) or HTML(5?) way to do this that is technically correct (i.e. not deprecated)?
If there isn't a CSS/HTML solution, should I use:
Javascript, which will be heavier to download and might be turned off (is that a pro or a con?), but I get the bonus of being W3C correct and valid and non-deprecated and smart,
or should I use
the hated <marquee> (<blink><blink>) tag, which is lightweight (19 bytes!), fully supported by all browsers in all rendering modes and all doctypes (even though it shouldn't be), but is deprecated?
Thanks.
P.S. I think a news ticker is a valid use for marquee-style
P.P.S. If anybody tells me that if I don't want a heavy Javascript solution I should use JQuery because it is lightweight, I will shoot them in the comments
Edit: I'm adding JQuery tag since that seems to be the best way to get attention from a lot of experts on JS questions, and it is not totally unrelated here.
It is not the effect that is bad. The problem with marquee, blink and font tags is that they convey presentation not structure of your content.
CSS3 has support for marquee, but it is only supported in a few browsers (Safari and Chrome are the only one, to my knowledge)
http://www.w3.org/TR/css3-marquee/
There are several JQuery plugins that accomplish it, but they come at the expense of loading JQuery (26Kb, heavier than the HTML only solution, but not what I would call heavy)
http://plugins.jquery.com/plugin-tags/marquee
Of course you can easily do it yourself without JQuery, but looking at those plugins may give you ideas.
Another option to consider is to do a small Flash animation.
If you're sure that it works on all platforms you're aiming for, and you don't care what w3c says you can certainly use the marquee tag. There is no way that you can find a JavaScript solution that works in less than 14 bytes.
The only unfortunate thing is that the reason all these browsers support all these deprecated elements that are -in this case- not even part of any HTML standard, is because of all these people using these elements and start whining when a new version doesn't support their 1982 compliant website anymore.
So please go ahead and use marquee as long as it works for you, but please don't complain if you site stops working in a newer browser.
Here's the code that implements the marquee element in Firefox, it's basically doing it in JavaScript anyway so you could always just adapt that code and use it directly in all browsers.
The code can be hacked around so that marquee can be implemented on any element in Firefox, applied through CSS and XBL bindings (Firefox only example). The equivalent in IE would be behaviours, and you could use the CSS3 in Safari/Chrome as nico suggested and you would be keeping the presentational stuff out of your markup, but only you can know if it's worth the effort.
I've been looking for the most efficient and cross-browser supported marquee implementation. For whatever reason, even the webkit CSS marquee implementation is glitchy.
The common approach is to use timer (or jQuery animate implementation) to adjust the CSS margin property of the element. This is too glitchy and very inefficient. I came up with implementation that utilises CSS3 transitions for browsers that support it and otherwise animate the scrollLeft property of the containing element. It is an experimental implementation, though it works well with IE7+. Other people might find it useful as well, https://github.com/gajus/marquee (demo https://dev.anuary.com/60244f3a-b8b2-5678-bce5-f7e8742f0c69/).
Recently, i had to do this effect for a client and i've used this plugin which is very easy to use :
jQuery Marquee plugin on github
jQuery Marquee on plugins.jquery.com