Jump to content

monkeysaurus

Member
  • Posts

    104
  • Joined

  • Last visited

monkeysaurus's Achievements

Newbie

Newbie (1/14)

0

Reputation

  1. It's possible to do something like this using the W3C's new file api, but it would not be a trivial job, by any means. And in any case, you'd probably need to fall back to the more traditional solution for those with lesser browsers, if they were a significant part of your user base. Here's some info on the new file api, in case you decide to follow it up: http://ajaxian.com/archives/w3c-publish-first-working-draft-of-file-api http://hacks.mozilla.org/2009/12/w3c-fileapi-in-firefox-3-6/
  2. The iframe tag should not be self-closing. Instead of: <body> <a href="#" onmouseover="show()" onmouseout="hide()">move</a> <iframe src="Untitled-2.html" width="300px" height="300px" id="ifam2"/> <iframe src="gallery.html" width="300px" height="300px" id="ifam1"/> </body> You should have this: <body> <a href="#" onmouseover="show()" onmouseout="hide()">move</a> <iframe src="Untitled-2.html" width="300px" height="300px" id="ifam2"></iframe> <iframe src="gallery.html" width="300px" height="300px" id="ifam1"></iframe> </body>
  3. Apologies Ben, I completely missed that part of the requirements. Yes, it is entirely possible to do this with jQuery UI. BEHOLD!
  4. Hi Ben, I feel a long-ish answer coming on! My first suggestion would be that in re-creating a jQuery accordion, you're re-inventing the wheel. jQuery UI provides an accordion widget that is functional cross-browser, keyboard-accessible, theme-able, has support for WAI-ARIA and much, much more. So unless you're planning to implement all of those features, this is almost certainly a better option for your client, and their customers. It is as simple to implement as: <script type="text/javascript"> $(function() { $("#accordion").accordion(); }); </script> The only time when it's appropriate to reinvent the wheel (IMHO) is when you're trying to learn about wheels. So having posted the above advice, I'll offer some suggestions as to the code you posted and the questions you actually asked. My first piece of advice would be to re-organise your code as a jQuery plugin. This is really easy to do, and encourages you to re-use code you've written in the past. A full tutorial on plugin authoring is more than I want to get into here, but there is plenty of information on jQuery plugin authoring on their website. I have put together the very simplest of accordions on jsfiddle.net to demonstrate how writing plugins keeps your code clean and re-usable. The flip side is that your HTML has to be what the plugin expects, so markup needs to be the same on subsequent usages. The other down-side is that if your markup changes in the future, you'll have to test thoroughly to make sure the accordion still works. This is a job for a unit testing tool like FireUnit, but that's for another post. A couple of other points. Using classes of .nav instead of #nav1, #nav2, #nav3 and #nav4 means that you can attach behaviour once. When you do this, use DOM traversal functions such as next(), previous(), parent(), children() and find() to find the related DOM elements rather than referring to specific divs in each anonymous function. (For example, steer clear of things like hard-coded $('#section4')) Once you've done this, you can get rid of 3/4 of the code! (Or if there were 10 accordion items, 9/10ths!) You'll notice that I have done this in the jsfiddle example I posted above. Another thing to note too. (Not strictly related to your question but it's a pet peeve of mine!) If you find yourself calling $(this) or $('#mySelector') in multiple places within a given code block, this can almost certainly be optimised. Every time you call the jQuery function (which you are doing when you refer to $(this)), you incur an unnecessary performance hit. Function calls in JavaScript are expensive, and should be avoided if possible. In addition, if you call $('#selector') more than once, you are calling the jQuery function and traversing the DOM to find the element; not good if it is a complex selector or there are many elements in your page. To get around this, you can do something like the following. Rather than: $('.foo').hide(); $('.foo').show(); $('.foo').animate(...); You can cache your selectors by doing the following: var $foo = $('.foo'); $foo.hide(); $foo.show(); $foo.animate(...); We've assigned the elements to a variable which has had the jQuery function applied to it, and referred to the variable later in the code. You can see in the example above that we've saved 2 function calls and 2 DOM traversals at the cost of one line of code! I like to put a $ sign before the variable name to remind me that the elements have been 'jQuery-fied', but that's just a personal convention. Hope that makes sense, please ask if you'd like me to clarify anything.
  5. Easy-peasy way, doesn't rely on navigator.userAgent (which can be spoofed): <!--[if lt IE 8]> <script type="text/javascript"> alert("You're using 7.x, please update your IE"); </script> <![endif]-->
  6. monkeysaurus

    Email validation

    Honestly, I wouldn't re-invent the wheel on this one. There are far too many edge cases to consider. There's a PHP class designed to validate email addresses here: http://code.google.com/p/php-email-address-validation/ And using it is as simple as: include('EmailAddressValidator.php'); $validator = new EmailAddressValidator; if ($validator->check_email_address('test@example.org')) { // Email address is technically valid } else { // Email not valid }
  7. The color plugin will work of course, but you can also use jQuery UI to animate background colours.
  8. Well, the next problem is on line 15: if (isNan(numGuitarStrings)) should be: if (isNaN(numGuitarStrings)) I would recommend downloading Firebug and working through the errors as they appear in the console.
  9. Hi, Firebug is showing an error on line 28: if (stringString.indexOf("dozen") != -1) should be: if (stringsString.indexOf("dozen") != -1) If you could fix that, we can see what happens after that.
  10. I've always used Themeroller in conjunction with jQuery UI - you can tweak the look in your browser, then download the specific package you need. There are pre-rolled themes there too. Once you've done this, it's a simple case of including the stylesheet in your page and making sure the paths are correct. Even if you use themeroller as a starting point, then tweak once it's in place, it's the quickest way to work with jQuery UI, for my money.
  11. As per the W3 spec, this isn't the purpose of the tag. The tag should be used to provide alternative content when a script is disabled; it shouldn't be used to tell the user to switch javascript on. What if the user can't switch javascript on? What if they're browsing on a mobile user-agent? What if they're using a screen reader, or a dozen other devices that don't support javascript? What about search robots trying to index your site? These days there's no excuse not to use progressive enhancement techniques; develop your site so that it's fully accessible with javascript off, then use javascript to put the icing on the cake. The proper strategy to do what you're suggesting would be something like: Develop the site so that it is fully functional with Javascript off Add a div to the top of the page inviting users to switch javascript on for a better user experience Hide that div using javascript on page load. That way, everybody sees content, and users who can get a better experience, will. For an example of how it should be done, check out Stack Overflow with js on and off.
  12. Yes and no; it's actually much more than that. To understand 'this' in Javascript, you first need to understand that everything in Javascript is an object. Functions, events, DOM elements...all objects. In fact, Javascript is possibly one of the most object oriented languages around. In addition, every object must have an 'owner'. Let's say you're declaring a variable, thusly: var foo = 'bar'; // alerts 'bar' alert(window.foo); Well, you haven't really declared a variable at all! You've attached a property named foo to the window object. In Javascript, if you declare a variable (a function, an object...etc) in the global scope, you've attached an object to the window object. Similarly: foo = function(){ alert('bar'); } window.foo(); // alerts 'bar' this.foo(); // alerts 'bar'! WTF! 'This' in Javascript refers to the current object's owner. So let's take a look at your original question. Click on this text What's happening here is that you are calling a function called changetext, and you are passing the owner object as the parameter. In this case, the owner is the object. So for the following function: function changetext(id) { id.innerHTML="Ooops!"; } ...You have passed in the h1, and you're saying "h1.innerHTML should now be 'Ooops!". Variable scope is one of the trickier aspects to get your head around in Javascript, but once you do, nothing will be the same again. Further reading here.
  13. Hi William, Chrome on Windows is still taking me to the page rather than ajaxing in the content. Here's why. Using a 'submit' button When you click the 'continue' button, the browser attempts to carry out the default action - in this case, posting your form variables to creditCardAuthorize.php. Although you've written a piece of javascript that listens out for the button click event, the click event is continuing to bubble up the DOM, and the form is being submitted. You can prevent this by intercepting the form submit event and halting it in place. Something like this should do the trick: // pass in the window.event object to the function $("form#formDonate").submit(function (event) { // this is critical! event.preventDefault(); $('#rightContent').html(ajax_load); $.ajax({ type: 'POST', url: 'content/creditCardAuthorize.php', data: { amount: $('#amount').val(), description: $('#donation').val() }, success: function(html){ $('#rightContent').html(html); }, dataType: 'html' }); }); Notice that I've passed in the event to the function, and I'm stopping it from continuing with event.preventDefault(). You can read more on stopping event propagation here. Using a 'button' type button Because there is no default action associated with an , there is no default action to stop; hence why this worked for you. All the best.
  14. Hi Patrick, The basic idea seems sound. In order to run an external program from PHP, you should look into the system, exec, and passthru functions. These will all do what you need to do.
×
×
  • Create New...