Javascript – Page 2

Free Software – Password Reset for Notes/Domino

Earlier this year I was asked to research some alternatives for a web-based password reset function at my work. One of the larger support burdens are users who forget the passwords, especially in the first few days after changing it. We have a 90 day password lifespan, then a new password need to be picked. Some users wait until the last minute, which usually is Friday afternoon right before they go home, making it very likely that they will forget the new password over the weekend. Another big group is auditors, who may come in every 6 months or so, and by then their passwords have of course already expired. I first looked at some COTS solutions from HADSL (FirM) and BCC (AdminSuite). They were both very competent, and in addition have several other functions that I really would like to have in my environment (like synchronization between Domino Directory and Active Directory). However, as my company is in a cost saving phase, I was asked if I could build something myself, so I played around a little, and came up with a small and simple application. The application contains two web pages. The first page (Setup) is where the user will setup the security questions used for password recovery as well as entering an external email address that they have access to even if locked out from the Domino account at work. This page is protected by regular Notes security, so the users need to set this up before they lose access to their account. The second page (Request)is where the user can request the password to be reset. After entering their Notes name, the user is presented with one of the security questions. If the question as answered correctly, the user can now enter a new password. If the question is wrong, another of the questions is presented to the user. I am also using regexp to make sure that the password match the requirement our organisation have for password strength. Both pages are built using Bootstrap (v3.2.0), jQuery (v1.11.0), and for the icons I use Font Awesome (v4.2.0), all loaded from BootstrapCDN. I also use a few local CSS and Javascript files to handle older versions of Internet Explorer. The process steps were created using code by jamro and you can find the code here. By the way, Bootsnipp is a great resource to avoid having to invent the wheel again. There are hundreds of free snippets of code there to build neat Bootstrap functionality. When the user fill out and submit the setup page, a document is created in a Notes database. When the user need to reset the password, the security questions and answers are retrieved from that document. To prevent unauthorised access to the Notes documents, they use Readers fields to prevent them from being visible to anyone but the signer of the agents running on the server. This application can of course be updated with more functionality. Instead of allowing the user to pick a password, one could be generated by the server and sent through email to the address entered during setup. There…

7 Comments

September 24, 2014

Javascript / jQuery / Web Development

jQuery – A flexible way to show/hide sections

Yesterday Stephen Gainer blogged about a small Javascript problem he had. Brilliant! I gave my customer exactly what he wanted! No muss no fuss! I’m sure you see where I’m going with this. As soon as this was done, my customer came back to me and said he needed four more of these. My solution, which is terrible, was to duplicate the above four more times (me2Show, me2Hide, me3Show, me3Hide and on and on and …..) Now I realize how stupid this is, but remember how I said above that there are certain simple things that I never really learned because I never had to? Well this is one, and this is where I would like YOUR help! I know there has to be some way to loop through all of my element ID’s with a simple piece of JavaScript, but I can’t for the life of me figure out how to do that. Can anyone help me out here? I commented on Stephen's post and suggested that he use jQuery to easily loop though all elements with a specific class and add a listener function to them to detect a click. Since it is hard to get all information into a comment, I decided to post a simple code sample here instead. My code is easy to expand on, e.g by adding more sections. There are of course many different ways to do this. You can of course use .toggle(), but I prefer to have better control of when to hide and show the sections. You can break out the lines $(".mySection").hide(); into a separate function and call it from the two locations. This is of course not saving anything in this particular code sample, but in more complex code it would make sense to break down the code into separate functions if they are called from multiple lines. Hopefully this code will help someone, or inspire someone to start playing with jQuery. I like jQuery, as it easily integrates with classic Domino web applications, and even can be used with Xpages. <html> <head> <title>jQuery hide/show</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(document).ready(function () { // Hide all sections when the page is first loaded $(".mySection").hide(); // Setup all elements with class "myButton" to react on click $(".myButton").click( function() { // Check if the section is already displayed if ($(this).html()=="Hide") { // Hide the current section var sectionID = $(this).attr("data-showsection"); $("#"+sectionID).hide(); // Set the button label to "Show" $(this).html("Show"); } else { // Hide all sections, using the class mySection $(".mySection").hide(); // Set all button labels to "Show" $(".myButton").html("Show"); // Show the section we want to display var sectionID = $(this).attr("data-showsection"); $("#"+sectionID).show(); // Set the button label to "hide" $(this).html("Show"); } }); }); </script> </head> <body> <button id="btnOne" class="myButton" data-showsection="sectionOne">Show</button> <div id="sectionOne" class="mySection" data-btnID="btnOne">This is the 1st section.</div> <br> <button id="btnTwo" class="myButton" data-showsection="sectionTwo">Show</button> <div id="sectionTwo" class="mySection" data-btnID="btnTwo">You are now seeing the 2nd section.</div> <br> <button id="btnThree" class="myButton" data-showsection="sectionThree">Show</button> <div id="sectionThree" class="mySection" data-btnID="btnThree">This is the 3rd section.</div> <br> <button id="btnFour" class="myButton" data-showsection="sectionFour">Show</button> <div id="sectionFour" class="mySection"…

0 Comments

August 27, 2014

HTML/CSS / jQuery / Lotusscript / Notes/Domino / Programming

Code snippet – jQuery

This morning I was working on a web application, and I came up with a pretty neat and simple little solution. So I just wanted to share it, in case anyone else need something similar. I have a webpage with an HTML form. Each input tag has an attribute called notesfield, matching the name of the field in Notes where the value is stored: <div class="col-md-3"> <label>First Name</label> <input class="form-control" type="text" notesfield="FirstName" value="" /> </div> <div class="col-md-2"> <label>Initial</label> <input class="form-control" type="text" notesfield="MiddleInitial" value="" /> </div> <div class="col-md-3"> <label>Last Name</label> <input class="form-control" type="text" notesfield="LastName" value="" /> </div> Then I created a simple function that will call an agent on the Domino server, which will return all the fields on the specified document as JSON. This function is called after the HTML page is fully loaded. function loadNotesFields(docunid) { var notesfieldname = ""; $.ajax({ url: "/database.nsf/ajax_GetNotesFieldFields?OpenAgent", data: {"NotesUNID":docunid}, cache: false }).done(function(data) { $('input[notesfield]').each(function() { notesfieldname = $(this).attr("notesfield"); $(this).val(data[notesfieldname]); }); }); } The function is actually extremely simple, and here you can see the power of jQuery. What I do is to perform an Ajax call to a Domino URL, passing a UNID to the agent to use in the lookup. I set cache to false, to avoid the browser from reusing previously retrieved data (this is a good thing to do if the data retrieved can be suspected to change frequently). The jQuery .ajax() functions returns the JSON in the data object, and when the call is done, the callback function loops through each input element with an attribute of notesfield, reads the value of said attribute and then sets the value of the input element to the corresponding Notes value. The only thing left is to write the agent that will return the JSON. It could look something like this: Dim urldata List As String Sub Initialize Dim session As New NotesSession Dim webform As NotesDocument Dim db As NotesDatabase Dim doc As NotesDocument Dim urlstring As String Dim urlarr As Variant Dim urlvaluename As Variant Dim i As Integer Dim json As String Set webform = session.DocumentContext '*** Remove leading "OpenAgent" from Query_String urlstring = StrRight(webform.Query_String_Decoded(0),"&") '*** Create list of arguments passed to agent urlarr = Split(urlstring,"&") For i = LBound(urlarr) To UBound(urlarr) urlvaluename = Split(urlarr(i),"=") urldata(urlvaluename(0)) = urlvaluename(1) Next Set thisdb = session.CurrentDatabase '*** Create content header for return data Print "content-type: application/json" '*** Get Notes document baed on NotesUIND argument Set doc = db.GetDocumentByUNID(urldata("NotesUNID")) '*** Build JSON for all fields in document except $fields json = "{" + Chr$(13) ForAll item In doc.Items If Left$(item.Name,1)"$" Then json = json + |"| + item.Name + |":"| + item.Text + |",|+ Chr$(13) End If End ForAll '*** Remove trailing comma and line break json = Left$(json,Len(json)-2) json = json + "}" '*** Return JSON Print json End Sub Happy coding!

6 Comments

March 15, 2014

Bootstrap / Frameworks / Javascript / jQuery / Web Development

Excellent Bootstrap select plugin with great support

For a Domino-based web application I am currently working on, I needed a nicer looking select box (drop down) than what Bootstrap offers out of the box. I did some searches and found a handful of free ones, most of them pretty good but not exactly what I wanted. Some did not handle different themes, other had additional functionality I did not want/need, etc. I probably been looking for a good alternative for 3 weeks by now. Then the other day I found an inexpensive plugin at CodeCanyon. Custom Select for Twitter Bootstrap 3 is just $5 if you use it for a public site, or $25 if you use it on a site where you charge the users for access. It's well worth it. The control is nice and clean, and very easy to use. What really impressed me was how the author of the plugin, Lisa Stoz, fixed an issue I ran into. It was not a bug in the plugin, but I had a need to use custom tag attributes, and the plugin did not support that originally. The next day Lisa had a new version available with that functionality added. She also helped me with some additional questions that I had. I am very impressed with the quick response and the professional support. I am new to CodeCanyon, but that site seems very nice. It contains a large number of jQuery and javascript plugins, Bootstrap themes and plugins, and much more. There is also a section with WordPress plugins, as well as a separate site for Wordpress themes called ThemeForrest. That site also have other themes and templates. If you build websites, but like me is not a graphics genius, ThemeForrest is a great place to find themes or just inspiration for your site. The themes (as are the plugins) are very modestly priced, between $5 and $10 in most cases. I have just started to scratch the surface of what's available there, but I already think this is a great resource. The next time I need a plugin for Bootstrap, jQuery or Wordpress, I will probably start at CodeCanyon. Disclaimer: The links above uses an affiliate code, giving me a small credit at the site if you purchase anything.

1 Comment

October 16, 2013

Bootstrap / Frameworks / HTML/CSS / jQuery / Web Development

Bootstrap – An Overview

As I mentioned in a previous article, my boss asked me to write some short summaries of a couple of common web technologies and frameworks. I already wrote about jQuery, and now the turn has come to Twitter Bootstrap, commonly called just Bootstrap. Twitter Bootstrap is one of the durrent darlings of web developers. It is a CSS framework, and it also includes some Javascript and the icon set GlyphIcons. Personally I use Font Awesome, a larger set (currently 361 icons) of icons compatible with GlyphIcons. Just like jQuery, you can use Bootstrap from a CDN (Content Delivery Network). There are also several themes available (both free and premium), so you can quickly get a different look than with the default Bootstrap colors. The free themes are also available through a CDN. With Bootstrap it is very easy to quickly create nice looking websites/applications. There are several ready-made templates on the Bootstrap site, and there are many more available all over the internet. So what you typically do is to download a template that fit your project, and then start customizing it. A couple of weeks ago I needed to quickly put up a one-page marketing website. I simply downloaded one of the templates, changed the headline, added my content and removed the sign-up button. In 30 minutes I had the site up, and that included writing the inital text. Then I spent another hour or so tweaking and editing the text, but the actual design part took just minutes. I am also currently working on a larger web application (which I hope to be able to blog about later this fall), and I choose to use Bootstrap there as well. One of the issues I always had in the past was to find a nice menu system to use on my sites, and this actually caused me to abandon the redesign of my personal website for over a year. When I discovered Bootstrap it just took me a few hours to totally revamp my website (including adding some functionality), and I now have a nice and functional menu system. The site also include icons for the menu entries, using Font Awesome. Bootstrap contains a large number of elements: buttons, dropdowns, tables, labels, input controls, alert messages, a grid system (totally redesigned in Bootstrap version 3), etc. There is plenty of documentation available online, both at the official Bootstrap website and on other sites and forums. So if you haven't looked at Bootstrap yet, see if it might help you in your next web project!

1 Comment

August 29, 2013

Javascript / jQuery / Web Development

Some useful jQuery plugins – Part 1

I often find cool and (sometimes) useful jQuery plugins, so I want to share a few that I like. I plan to share more in the future. Adipoli jQuery Image Hover Plugin Includes several different effects to highlight images as the mouse hovers over them. http://cube3x.com/demo/adipoli-jquery-image-hover-plugin/ jQuery File Upload File Upload widget with multiple file selection, drag&drop support, progress bars and preview of images, audio and videoy. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. https://github.com/blueimp/jQuery-File-Upload iCheck Customized checkboxes and radion buttons for your forms. http://damirfoy.com/iCheck/ Chosen A plugin to make dropdown-boxes (especially long ones) easier to use. I looked at using this in a project, but ultimately opted to use another plugin, for different reasons. Chosen is still a good tool. http://harvesthq.github.io/chosen/ MagicSuggest This is the plugin I selected over Chosen. The content of the dropdown can be supplied using an Ajax call, returning JSON, and there are a large number of configuartion options. The plugin support filtering and type-ahead, as well as many other useful functions. http://nicolasbize.github.io/magicsuggest/ SuperScrollorama A jQuery plugin for scroll animations. http://johnpolacek.github.io/superscrollorama/ Sticky Sticky is a jQuery plugin that gives you the ability to make any element on your page always stay visible. http://stickyjs.com/

4 Comments

July 26, 2013

Frameworks / Javascript / jQuery / Notes/Domino / Programming / Web Development

jQuery – An Overview

Yesterday my boss asked me about a simple overview/tutorial explaining jQuery, Bootstrap and some other web technologies, and how they work together. I decided to also post the result on my blog, so here is the first part. You may recognize some code from a previous blog entry. jQuery is a currently very popular Javascript framework/library. There are other ones, like Dojo (used by IBM in XPages) and YUI (originally developed by Yahoo), but jQuery is right now at the top when it comes to usage. jQuery contains the plumbing behind the scene, it contains functions to let the different elements on the page talk to each other and interact, for example trigger events on click or change. It also have functions to hide and show elements (either directly or fade in or out). One of the big benefits with jQuery is that many functions are much easier to do than in traditional Javascript. It also addresses browser inconsistency, so you don't have to write different code for Firefox and Internet Explorer. jQuery is Javascript, just packaged in a nice library and simplified. There are also UI components and mobile components, found in jQuery UI and jQuery Mobile. Here are a couple of examples, comparing plain Javascript with jQuery: http://blog.jbstrickler.com/2010/06/vanilla-javascript-vs-jquery/. jQuery ties into the DOM (Document Object model) of the browser/webpage in a very easy-to-use way. The way elements are addressed is identical to how you do it in CSS, using . (dot) for classes and # for individual elements. It is not hard to start with jQuery. You do not even have to host the library on your own server, several companies (including Microsoft and Google) host jQuery (as well as other libraries and frameworks) in what is called a CDN (Content Delivery Network). You simply include a line of code in the head section of your HTML, telling the browser to load jQuery from a specified location, and you are all set: <head> <title>Hello, jQuery</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> </head> Notice that you don't use http: or https: at the start of the URL. This is a trick that makes it work both on a http or a https site. However, if you have the code locally in the file system on your computer (like many do before uploading the html file to a server), you must add http: at the beginning for it to load. Let take a look at our first jQuery example. Below we have a very simple piece of HTML code: <body> <button id="btnSave">Save</button> <div id="messageBox"></div> </body> What we want to do is that when the button is clicked, a message should be displayed in the div with ID messageBox. That is done with the following piece of jQuery: $("#btnSave").click( function() { $("#messageBox").html("You clicked the Save button."); }); What this do is to replace everything inside the div with the text/HTML code we specify. The second line is the code to execute when the event specified triggers/fires. You can put triggers on almost any element, and…

1 Comment

July 19, 2013

Frameworks / HTML/CSS / Javascript / Web Development

Free Bootstrap tools

I started using Bootstrap a while back, and really enjoy the fact that I quickly can build a website/application using the framework. But there is always room for improvement. I found some useful tools that will help you, if you are using Bootstrap, to build your pages even quicker. The first resource is Divshot, a online tool/interface builder where you can design your pages, then get the HTML code and insert it into your page. I just started using it this weekend, but it is a brilliant tool, easy to use and very helpful. It's currently in free beta, you just need to register. Update: DivShot is now a commercial product, but you can use it for free if you just have one single project. Bootbox.js is a Javascript library that help you create programatic dialog boxes. prettyCheckable replaces the standard checkboxes with nicer looking ones. Datepicker for Bootstrap is (as the name indicates) a datepicker, made to match the Bootstrap look. jQuery Form Validation is using the Bootstrap stylesshet to make it match the rest of the framework. I haven't tried this one yet, but it looks very useful. Fuel UX is another way to extend Bootstrap with additional controls. Very nice looking! Lavish is a cool online tool that takes an image and creates a color scheme based on it for use in Bootstrap. You can find these tools and more here.

0 Comments

June 3, 2013

Frameworks / IBM/Lotus / Javascript / Lotusscript / Notes/Domino / Programming / Web Development

Show and Tell – Dynamic Web Calendar

In this post in the developerWorks forum, Andy Herlihy is asking about how to create a small calendar that can be embedded into an existing intranet website. As Carl Tyler points out, Andy could simply use Dojo. However, this is a good example to show some jQuery combined with the power of IBM Lotus Domino. Lets' break it down into a few smaller steps. The first one is to create a Domino web agent that will take the current date and build a calendar for that month. There will be no links or javascript code in the HTML generated, just plain HTML code, with some id attributes to make it easy to address different cells later. The next step is to create a very simple webpage, with some Javascript to load jQuery and set up the calendar to detect clicks. The clicks will cause another call to the Domino server, this time to a view using RestrictToCategories to only get the entries for the specified date. The entries are returned as HTML and through jQuery they are displayed in a div on the webpage. We also want to add a little bit of CSS to make the calendar pretty. The CSS also lives on the HTML page. Finally we create the view, it's associated view template form and a form to create some entries that we can use for testing. Let's look at the code. First the Domino web agent. It should be pretty self explanatory: %REM Agent WebCalendar Created Nov 26, 2012 by Karl-Henry Martinsson/Deep-South Description: Returns HTML for a calendar for current month %END REM Option Public Option Declare Sub Initialize '*** Used to get URL params Dim session As New NotesSession Dim webform As NotesDocument Dim urlstring As String Dim urlarr As Variant Dim urlvaluename As Variant Dim urldata List As String Dim webservername As String '*** Agent specific Dim startDate As NotesDateTime Dim endDate As NotesDateTime Dim i As Integer Dim j As Integer Dim startweekday As Integer Dim thisMonth As Integer Dim currDate As Double Dim cellclass As String Set webform = session.DocumentContext '*** Calculate path for this database, for image/icon file references later webservername = webform.GetItemValue("Server_Name")(0) '*** Remove leading "OpenAgent" urlstring = StrRight(webform.Query_String_Decoded(0),"&") If urlstring <> "" Then '*** Get all params passed to agent urlarr = Split(urlstring,"&") For i = LBound(urlarr) To UBound(urlarr) urlvaluename = Split(urlarr(i),"=") urldata(urlvaluename(0)) = urlvaluename(1) Next If IsElement(urldata("date")) = False Then urldata("date") = Format$(Now(),"mm/dd/yyyy") End If Else urldata("date") = Format$(Now(),"mm/dd/yyyy") End If '*** Get first and last date of current month Set startDate = New NotesDateTime(Format$(urldata("date"),"mm/01/yyyy")) Set endDate = New NotesDateTime(startdate.DateOnly) Call endDate.AdjustMonth(1) Call endDate.AdjustDay(-1) currDate = CDbl(CDat(startDate.DateOnly)) startweekday = Weekday(Cdat(startDate.Dateonly)) '*** HTML header Print "Content-type: text/html" ' & CRLF Print |<table class="calendar">| '*** Create calendar header with weekdays Print |<tr><td colspan=7 class="labelMonthYear">| + Format$(CDat(startDate.DateOnly),"mmmm yyyy") + |</td></tr>| Print |<tr class="calendarHeader">| Print |<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>| Print |</tr>| '*** Build rows for the weeks For i = 1 To 6 Print || Print |<tr class="calendarRow" id="calendarRow| & i…

1 Comment

November 27, 2012

Frameworks / Javascript / Notes/Domino / Web Development

Using jQuery to emulate Notes hide-when

We have all built applications in Lotus Notes where we use the value of a checkbox, radio button or dropdown box to show or hide additional fields, like you can see in this clip. But the hide-when formula will not work this way on the web. The Domino HTTP stack will simply render the page before sending it to the browser, and even if you make a selection in the browser, the hidden section will not display or vice versa. So what can you do? One easy way is to use jQuery (or Dojo, if you rather fancy that). You can then detect if a checkbox/radio button is clicked on or if a dropdown box is changed. Then you read the value of the button/box and hide/show the content you like. In this example, you can also see that that one of the dropdown boxes actually switch which dropdown box to display next to it, you can see that the available choices are different, in addition to performing the more visible hiding of the last row when recommendations is not set to "n/a". So how do you actually do this? It is fairly easy. First you add a reference to the jQuery library to the HTML Head Content section of the form. Remember that you need to prefix any quote marks with a \ when you put it in as a string. Here I am calling the Google-hosted jQuery library: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> Next, remove any hide-when formulas from the form you are going to expose on the web. That is important, since the Domino server will otherwise not render all the HTML you need. Then give each element you want to hide a unique id. You are probably using tables to create the layout you want, then you can use the table cell id to address the element. In this case, I give the cell containing the label the id "ReasonNALabel" and the cell containing the dropdown box the id "ReasonNA". The field 'Recommendation', which is the one where we are detecting the click and if it has the value "n/a" should display the two cells below it, has an id of "Recommendations". One more thing, we want to detect the value as soon as the page is loaded, and display/hide the section accordingly. I will break out the code that perform the check of the value and does the hide/show, so I can call one function insted of duplicating the code. $(document).ready( function () { // Check value and do initial show/hide after page is finished loading refreshRecommendations(); // Set trigger for click on radio button to call function $("input[name='Recommendations']").click( function() { refreshRecommendations(); }); }); function refreshRecommendations() { var checked = $('input[name=Recommendations]:checked').val(); if (checked == "n/a") { $("#ReasonNA").show(); $("#ReasonNALabel").show(); } else { $("#ReasonNA").hide(); $("#ReasonNALabel").hide(); } } If you want to check the value if a checkbox, use $("#checkboxID").is(":checked") and to check the value of a dropdown box, use $("#dropdownboxID").val(). For the dropdown box, use .change() instead of .click(), otherwise the code is identical. That…

1 Comment

November 6, 2012

Frameworks / Javascript / Notes/Domino / Programming / Web Development

Replace images on web page using jQuery

Last week I encountered a situation where I wanted to replace images on a Domino generated webpage. I am sure you all know what doc links look like by default when rendered by the Domino HTTP task: By adding a few lines of jQuery to the form, you can manipulate the image source, as well as the CSS class and other attributes. This allows you to modify a page served by the Domino HTTP task almost as much as you like. Below is the code I used to modify what you see above into something that I found a little bit nicer. $("img").each( function() { var t = $(this); imgicon = t.attr("src"); if (imgicon == "/icons/doclink.gif") { t.attr('src', '/applications/losscontrol.nsf/icon_picture.gif'); t.addClass('photoicon'); } if (imgicon.indexOf("Attachments") > 1 ) { t.attr('src', '/applications/losscontrol.nsf/icon_attach.gif'); t.addClass('attachmenticon'); t.attr('height','16'); t.attr('width','16'); } }); $("a").each( function() { var t = $(this); url = t.attr("href"); if (url.indexOf("$FILE")>0) { t.removeAttr("style"); t.addClass('attachmentLink'); t.outerHTML = t.outerHTML + "<br>"; } }); var plink = $('#photolinks').html(); plink = plink.replace(/<br>/i,''); plink = plink.replace(/<\/a><font\b[^>]*>/gim,'<span class="photoLink">'); plink = plink.replace(/<\/font>/gim,'</span></a>'); $("#photolinks").html(plink); var alink = $('#attachmentlinks').html(); alink = alink.replace(/<\/a>/ig,'</a><br>'); $("#attachmentlinks").html(alink); What I am doing is to loop through all img tags on the page, and identify the ones that are doc links (using the file name for the icon). I replace the src attribute of those links with a different icon I added as an image resource to the database. I then set the class name for the link, so I can manipulate the look using CSS. I also look for any src attribute containing the field name "Attachments", which is where the attachments (if present) are located. I change the icon from the one generated by Domino to another image resource in the database. The next section of the code will loop through all anchor tags and check if the link includes "$FILE", indicating it is an attachment. If that is the case, I remove the Domino generated style attribute, set a class name and append a line break to the end of each link. I then perform some string replacements to remove the font tags that Domino generate automatically when rendering rich text fields. I replace the font tags with a span (containing a class name) so I can style the look of the link later, and also move the </a> tag to after the link text. The last thing I do is to add a line break after each attachment link. Here is the result: Hope this can help anyone. And if you wonder, I am using the fieldset tag to create the box around each set of icons.

3 Comments

October 31, 2012

Frameworks / HTML/CSS / Javascript / Web Development

How to start with jQuery

Lately I have been working on several web applications, both as hobby projects and at work. I started using YUI3 a few years ago as a Javascript framework, and I liked it. But I kept hearing about jQuery, and the times I saw code snippets, I was intrigued. It looked different, but at the same time jQuery seemed very powerful and efficient. So a while back I started looking closer at jQuery, and I found that it was extremely easy to learn. One need a decent understanding of HTML and the browser DOM (Document Object Model), as well as Javascript knowledge. Add some CSS to that, if you want the page to look good as well, and you are set. So how do you start using jQuery? The easy way is to take advantage of companies like Google and Microsoft who are hosting different frameworks (including jQuery) on their servers for public use. You don't have to worry about downloading and hosting it yourself, and you can get started in just minutes. You add code to your page to utilize jQuery, then add some script. You have to allow the browser to wait for the webpage to fully load before you can start doing things, and this is done using $(document).ready(). When that event is triggered, the code you have added there will be executed. It is very easy to address elements on your webpage. If I have an element (could be a button, a span/div section, a link or even an image) with the id "messageBox", I can address it like this: $("#messageBox"). I then have different properties and methods for that element. But I have always believed in "show me the code". I created a very simple demo. The webpage contains a button and a div where we want to display a text when the button is clicked. I have some CSS to make the text look nice, and a few lines of jQuery code to do the work. <html> <head> <title>Hello, jQuery</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> </head> <script> // The following function is executed after page is fully loaded $(document).ready(function () { // Setup the element with id "btnSave" to react on click $("#btnSave").click( function() { // When clicked, set the innerHTML of the element with // id "messageBox" to the specified html string. $("#messageBox").html("You clicked the <strong>Save</strong> button."); $("#messageBox").addClass("statusMessage"); }); }); </script> <style> .statusMessage { font-family: Arial; font-size: 0.9em; color: #AA0000; } </style> <body> <button id="btnSave">Save</button> <div id="messageBox"></div> </body> </html> That's it. Try it yourself, paste this code into a text file and call it jQuery.html, then open it in your browser. Now when you understand the basics, you can learn more advanced things. I am using jQuery to very easily perform Ajax calls, even calling Lotusscript web agents to return data from a Domino database to my webpage. I also use it for all kinds of dynamic updates to webpages. A while back I started on a Domino-based web chat as a hobby project. I started…

0 Comments

October 26, 2012

End of content

No more pages to load

Newer Posts