Frameworks

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
Frameworks / Old Blog Post / Web Development

YUI3: Powerful Javascript Framework

Last week I came up with a small side project. It was basically a simple web chat, working pretty much like the comments on a blog. I decided to build this as a classic Domino application, not using Xpages. I started development Wednesday mid-afternoon, and the application needed be done Thursday evening, and I of course had my regular job to do. So I could not justify spending the time I needed to learn doing it in Xpages, and then try to write CSS to get it to look like I wanted it. So there you have the reason for why I did not use Xpages. I decided to take a look at YUI, the framework developed by Yahoo. The latest version is version 3, and it is really nice and powerful. I looked into in, and realized that I could do things very quickly, getting the same functionality as using Xpages (partial refresh  or page, etc) in just a few lines of code. So what did I need for my application? I started with a blank Notes database. I created a page, which is where all the action would take place. On the page I created a header section (logo), a content section (where the messages/chat would be displayed) and a form section where I put a few fields for the users to fill out. The fields were name/handle, email, (optional) website and lastly the message to send. I also put two images there, one to use as a submit button, and one to refresh the chat content without having to submit a text. I added some javascript at the top of the page, loading YUI3 (hosted by Yahoo, I did not even have to download anything): <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>  The next step was to add some code for the actual logic on the page. YUI works by binding functions to events on elements on the page. I wanted to bind function functions to the onClick event of the two buttons, "submit" and "refresh". To avoid this blog entry to be too long, I will just show the code behind the refresh button: Y.one('#refresh').on('click', function(e) {        e.preventDefault();        var contentcell = Y.one("#contentCell");        if (contentcell) {            var currentTime = new Date();            Y.one('#refresh').set('src','webchat.nsf/ajax-loader-150.gif'); var args = &refresh=true&datetime=" + currentTime.getTime();            contentcell.load("webchat.nsf/SendText?OpenAgent" + args,"", function()  {                Y.one('#refresh').set('src','webchat.nsf/refresh.png');            } );        }    }); This code gets a reference to the first element with the id "refresh" using Y.one(), then bind a function to the "click" event. The function is defined right there, and it will do a couple of things. First it get a reference to the element (in this case a DIV) with the id  "contentCall". I check if it was found, and if so I get the current time (get a unique number). I then change the image of the refresh element to a spinning "loading" icon. The next line is the coolest one. In one line of code I perform an Ajax call to an agent on the Domino server, and put the returned data into the contentcell element. Finally, after the server…

0 Comments
May 15, 2012

End of content

No more pages to load

Newer Posts