For starters, I don't know js. What I do know, I've pick pocketed from other people's work. I know that's lame so I'm trying to learn. I am trying to polyfill my nav that use css transitions with Modernizr. I've got the <script> in the HTML that calls for Modernizr. What I don't know is what js to use to call the correct load function - I think. I've looked all over the internet for tutorials, but they all assume that I already know js so they are no help.
This is my site in progress. What I'm working on is the navigation. It works correctly in Firefox. I'm trying to make it work in IE.
Firstly, there's no need to apologise for learning from others. This is how we all learn.
Modernizr is great for helping you deal with older browsers. But the important thing to know about Modernizr is that it doesn't actually do any polyfills itself; it simply tells you whether a polyfill is needed for any given feature. You still need to provide that polyfill code.
In your case, you're referencing a file called polyfillfortransition.js, but this doesn't seem to exist on your site. This is why nothing is working: you're detecting that the polyfill needed, but you're not actually polyfilling it.
So you need a polyfill script for it. I don't actually know of one that will suit, and a quick search didn't turn one up, but hopefully this will help point you in the right direction.
Related
This may be a very basic question, but is it possible to post a jsfiddle that captures a Rails environment, the js, css, and HTML that is generating a nagging problem? I posted another SO question here: Unable to float a twitter bootstrap navbar item right with either class=pull-right or float:right
... and it was suggested I post something to jsfiddle. Honestly, I'm just completely in the dark as to how I might gather the css, js, and HTML in a way that can be copy-pasted into jsfiddle. Is there some slick way to pull the 4 necessary components together?
I am mostly interested in being being able to share and debug code that pertains to display and layout.
Many thanks in advance.
Sites like jsfiddle and jsbin are useful as testbeds for various issues involving HTML, CSS, and JavaScript. A good workflow for using them might be as follows:
Before going to one of those sites, use a browser debugger (Firebug, the Chrome debugger, or even the debugger in modern versions of IE if you must) to figure out the mechanics of the issue. Are you seeing unexpected JavaScript behavior? Weird layout? Whatever the problem, see if you can narrow the focus as much as possible.
Now, go to one of the workbench sites (make an account for yourself too; it helps to be able to find old experiments) and start trying to reproduce the problem. Start as simply as possible and work up. It can be hard and frustrating, but in my experience even the process of trying to figure out an isolating test case can itself lead to enlightenment :-)
If you do manage to isolate a behavior that you don't understand or can't explain or whatever, you can then save the test case (jsfiddle has "Save" and "Update" buttons; jsbin seems to magically save things automatically) and then post the URL here (or anyplace else). If you do post here, it's a good idea to copy the relevant code from your test case directly into your question.
I use both of those sites (and there may be more of them out there). The jsbin site gives you a little more control over your page, and provides a way to see your page outside of an <iframe>. That's kind-of important if you're testing for mobile applications. Otherwise they're both great resources.
Oh, and both sites let you import various popular libraries via simple configuration tools. That's really handy for tracking bugs that you think may have been introduced by a library version change (rare, but really freaky when it happens).
There are so many lightboxes to choose from, I'm looking for a very lightweight one to use in an embedded javascript widget that would be a single domain name. I saw the perfect one on chainreactioncycles.com, it popped up out of nowhere so I took a screenshot:
I tried looking for info on it on the page source, but couldn't find anything that would let me trace where it came from... Would anybody know of one like this? Or exactly that one?
If not exactly like above, anything similar would be great too, keeping the following in mind:
Very small javascript download (animation not needed)
Self contained, not dependent on any libraries other than jquery (since I'm already using that anyway).
Works in major browsers
Close button (like GetSatisfaction or UserVoice)
Dims background
Avoids javascript namespace conflicts (or can easily be made to avoid them)
CSS styling of lightbox does not interfere with site styling
Have you used an existing lightbox scripts for this same purpose with similar requirements? Did you roll your own? Insights welcome!
What you are looking for is called a modal box.
Here is a list of them
... and here is a striking replica of what you are looking for
Check out Zoombox.. It sounds like what you're looking for... Simple to use... Allows custom content.. jQuery Module... From past experience it covers what you have outlined as requirements etc
http://www.grafikart.fr/zoombox will tell you all you need to know.
i have built a beautiful website that works very fast in all of the latest browsers but many of the users are forced to use ie6. If i can't get around this problem. Is there anything to do to optimize some of the inefficiencies of ie6 when building my site to lessen the pain.? its an asp.net mvc site with heavy use of jquery.
You don't mention any specific issues with the site, but you can pass scripts, styles, even content just to IE6 by using conditional comments.
<!--[if IE 6]>
IE6 only stuff goes here
<![endif]-->
Apart from that, learn the many, many quirks of IE6 and the fixes for these problems. There is certainly plenty of resources on this out there, we've had to deal with it for quite some time!
If you need help with something specific, perhaps edit your question with further details.
Retroactively, i don't know if there's an exact answer other than troubleshooting the problems one at a time. The correct way would be to code proactively for all browsers until IE6 is finally put to rest as it should be :)
jQuery works pretty well with IE6, so you should be ok on that front. You will most likely run into some CSS quirks, but once you learn what to avoid it's really not bad coding for IE6. The main thing I keep running into is when you float something, you always need to put a display type of relative or absolute on it otherwise it will just disappear from the screen in many cases.
First of all, it should be considered in the beginning of a project whether IE6 needs to be supported or not. Designing for it requires a bit different approach - some things just tend to break down. My advice is you should probably make the experience on IE6 only "sufficient" and just make sure the site can be used as intended. Making it look flashy is just not going to work with any reasonable amount of effort.
Is Chrome frame an option? It could be positioned as a something similar to java which less people have a problem with.
http://code.google.com/chrome/chromeframe/
I just found out about ie7-js ;
IE7 is a JavaScript library to make
Microsoft Internet Explorer behave
like a standards-compliant browser. It
fixes many HTML and CSS issues and
makes transparent PNG work correctly
under IE5 and IE6.
http://code.google.com/p/ie7-js/
It looks like it's really good, but is it really working (the current issue list looks quite scary)? Have you already worked using this with success?
Another question is how slow the script will make the website in IE ?
In static pages it works pretty well. If you designed a couple of static html pages using modern browsers and standards and want it to be shown correctly in IE6 and 7 this script is gonna help you.
But, and it's a big but, if you add a little javascript to the recipe, this method shows its weaknesses. Anything added later to them DOM or any event triggered afterwards will NOT be affected by this script.
That's it. my one line recommendation is if you have simple and light pages use it. otherwise try solve your problems by looking at the roots!
I think the best answer is: try it on your website and see if it works for your particular code. If it works, and doesn't impact the speed, great, you're done. If it doesn't work, then you're going to have to spend the time to make your site work in IE.
I'm trying to create web applications that use JavaScript. I'd like to be able to use animation in these applications. I've tried to use basic JavaScript, but I've decided that the best thing to do is to use a library (such as YUI or jQuery).
I'm running into a problem. On Safari, when I run animation scripts, the animation is very chunky, very blocky. This happens with YUI as well as basic JavaScript. Why does this happen? Are there any good libraries that don't create this problem in Safari, but are also good for Internet Explorer and Firefox (and, hopefully, Opera)?
I have found MooTools to be pretty slick for animations, just a little smoother than jQuery.
I generally prefer jQuery, which I find to be a little more intuitive (in my head anyway), but I would use MooTools if slick animation is the most important requirement.
JQuery has animation, but I don't know what it is like on a Mac (I don't have a mac). If things are going slow, then you are probably making the animations too complicated. Remember, JavaScript is a slow language, and DOM is not designed for animation, so try to limit yourself with respect to the number of animations at the same time. Always ask if the animation is really necessary.
Well, for starters you could use CSS Transformations if the application is Safari-specific. Otherwise JQuery got some built in animations and a big community behind it (and thus, a large plugin repository).
You can download some sample code and check locally to make sure that things are supposed to work. For example, you can get the source code for B&K's jQuery book at http://www.manning.com/bibeault/ (check out the source link) and try out the samples for Chapter 5. If those pages work (locally) for you on Safari, then at least you know your basic environment is sane.
I'm having similar problems, and I suspect there are Safari bugs that jQuery is tripping over. But I haven't yet figured out whether it's me writing sloppy code (with FF perhaps being more forgiving than Safari), or if it's Safari, or if it's jQuery. I'll post more if I get any wiser.
Strange, WebKit (the JavaScript engine that Safari uses) is supposed to be pretty fast. Make sure that you have the latest version, there have been great progress for the JavaScript engines in the Safari and Firefox releases in recent time. Also, I think Dojo and MooTools have faster animations than jQuery, at least in my experience.