Posts

Showing posts with the label tip

jQuery Quick Tip: Extract CSS Background Image

jQuery allows you to get the background image of any element on a web page: $("#myelement").css("background-image"); However, this returns it in an undesirable format: url(http://example.com/images/image.jpg) or url("http://example.com/images/image.jpg") . With a bit of string replacement, you can get extract the URL: function extractUrl(input) { // remove quotes and wrapping url() return input.replace(/"/g,"").replace(/url\(|\)$/ig, ""); } So now you can just do this: extractUrl($("#myelement").css("background-image")) Which will return the URL on its own http://example.com/images/image.jpg .
2 comments
Read more

ASP.NET Snippet: Delete All Users and Roles

Deleting all users and related data from a site using ASP.NET authentication is fairly simple. Useful if copying a database and you want to remove all the users, but keep the structure and other data (e.g. user content) intact. Delete all users: foreach (MembershipUser u in Membership.GetAllUsers()) { Membership.DeleteUser(u.UserName, true); } Delete all roles: foreach (string role in Roles.GetAllRoles()) { Roles.DeleteRole(role); }
Post a Comment
Read more

ASP.NET Snippet: Quick Password Reset

Here is a simple way, via code to reset a password when you are using the built-in ASP.NET authentication system. Useful if you either don't have a reset password form, or you just want to quickly change a password. Create a blank page, and place in the code behind Page_Load event. C# protected void Page_Load(object sender, EventArgs e) { MembershipUser u = Membership.FindUsersByName("Username")["Username"]; u.UnlockUser(); u.ChangePassword(u.ResetPassword(), "newpassword"); } VB Public Sub Page_Load(sender As Object, e As EventArgs) Dim u As MembershipUser = Membership.FindUsersByName("Username")("Username") u.UnlockUser() u.ChangePassword(u.ResetPassword(), "newpassword") End Sub Just delete the page when done. Update (8 July 2009) : If a question and answer is required when you create a user, you have to pass on the answer to u.ResetPassword , e....
3 comments
Read more

jQuery Validation Plugin Tip: Highlight Field

The validation plugin for jQuery is a very useful plugin for validating forms before they are submitted. This tip shows you how you can highlight the field if there is an error with it. var validator = $("#myform").validate({ onblur: function(el) { if(validator.check(el)) $(el).removeClass(validator.settings.errorClass); else $(el).addClass(validator.settings.errorClass); }, onkeyup: function(el) { if(validator.check(el)) $(el).removeClass(validator.settings.errorClass); else $(el).addClass(validator.settings.errorClass); } }); This adds the errorClass (normally 'error') to the field being validated, which can then be styled via CSS: input.error { border: 1px solid #c00; background: #fee }
1 comment
Read more

Place JavaScript code at bottom of page

Recently I've been placing scripts at the bottom of the page, instead if the top. However, I don't put all of them there - the key ones required by other scripts (e.g. libraries like jQuery) are still in the header. The pages can appear to load faster, and in some cases may save some (albeit not always that much) code, e.g. .... <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> $( function() { $("a.foo").click(doSomething); }; function doSomething() { return confirm("About to visit " + this.href + ", continue?"); } </script> </head> <body> ... </body> </html> Can instead be: .... <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> </head> <body> ... <script type="text/javascript"> $("a.foo").click(doSomething); function doSomethi...
Post a Comment
Read more

jQuery Quick Tip: In general $(this).attr("attribute") = this.attribute

jQuery is a very useful JavaScript library for manipulating you web pages. However, I have seen it used to get attribute values when it doesn't have to be, normally to get element attributes. For example, opening all links with a class external and giving them a title (tooltip). $("a.external").click( function() { window.open($(this).attr("href")); return false; } ).each( function() { $(this).attr("title", $(this).attr("title") + " External link: " + $(this).attr("href")); } ); Would be the same as $("a.external").click( function() { window.open(this.href); return false; } ).each( function() { this.title += " External link: " + this.href; } ); There are some attributes that in JavaScript aren't the same as they are in html. The ones you may have issues with are listed below. for (htmlFor) class (className) readonly (readOnly) maxlengt...
2 comments
Read more

jQuery Quick Tip: Rollover images with jQuery

Update : Demo page created There are several sites that show you how to create rollover images with jQuery (just search Google, Ask, A9, Yahoo etc) for "rollover image jquery"), but they do sometimes have more code than needed (like using $(this).attr("src") instead of this.src for determining the image source. Here is another method that does not use jQuery unnecessarily (which may be faster if there are lots of images). Create two images, for the 'off' state (when mouse is not over it) and the 'on' state (on mouse over). Name them button_off.gif and button_on.jpg (the button bit can be anything, as can the extension ( .gif ) - the important bit is the _off and _on suffix. HTML code: <a id="mylink" href="/go/somewhere/"><img src="/images/button_off.gif" alt="" title="" border="0" width="100" height="30" /></a> Then in your $(document).ready ...
6 comments
Read more

jQuery Quick Tip: Select text on focus

Just a quick tip on how to select all text when focus is given to a textarea or input (only if the value has not changed) . $("input, textarea").focus( function() { // only select if the text has not changed if(this.value == this.defaultValue) { this.select(); } } )
7 comments
Read more

jQuery Tip: Highlight row on hover

This snippet applies a class when you hover over a table row and removes it when you move the mouse out. Useful when you have a table with many rows and want to improve readability. Define your stylesheet in head : <style type="text/css"> <!-- #mytable { border-collapse: collapse; width: 300px; } #mytable th, #mytable td { border: 1px solid #000; padding: 3px; } #mytable tr.highlight { background-color: #eee; } //--> </style> JavaScript (also in head ) <script type="text/javascript"> <!-- $( function() { $("#mytable tr").hover( function() { $(this).addClass("highlight"); }, function() { $(this).removeClass("highlight"); } ) } ) //--> </script> Your table (with id mytable ) in body <table id="mytable"> <tr> <th>Foo</th> <td>Lorem</td> <td>Ipsum</td> </tr> <tr> <th...
3 comments
Read more

jQuery Tip: Open links in new windows with valid (X)HTML Strict DocType

Update: forgot the return false (without it, the page would open in a new window and replace the current page). In (X)HTML Strict, anchor tags linking to other pages are not allowed to have the target attribute. Because of this, links can not be opened in a new window if the page validates. However, with jQuery and the addition of a class to anchors that open in new windows: <a href="http://jquery.com" class="external">jQuery</a> you can do this in just one line of code: $("a.external").click(function(){window.open(this.href);return false;}); . If you add any more links dynamically (i.e. through AJAX), you would have to run this again, but preferably not anonymously (i.e. inline function). function openWindow() { window.open(this.href); return false; } // shorthand for $(document).ready(function(){...}) $( function() { $("a.external").click(openWindow); } )
Post a Comment
Read more