Categories
Article ASP.NET HTML/CSS PHP Programming

PDF Creation: wkhtmltopdf

In past I post about how good wkhtmltopdf is. I have used it for few of my projects. Really it is the cheapest [as it is open source and free] and powerful solution. But it is not the reason I love it. I love this because it is the Easiest solution available. Most of PDF library range few hundred dollars to start with. Then we learn through their call of function to draw Tables and add media content and text. But with wkhtmltopdf, all you need to do is simple create a HTML page, add CSS and Javascript (yup, it support jQuery’s document load function and other other load method of your favourite javascript library.)

I recently test jQuery load function as I need to write text as Arc, however I don’t want to use Image as image manipulation will generate a rectangle image and then placing it going to be problem. But with wkhtmltopdf, and it’s support for JavaScript it make my life easier. I use a cool ArcText js following a nice article/tutorial http://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/ .

And yes, I recently saw that develpoment of wkhtmltopdf has started again. So this is going to be very good for those who want easy and best solution for their application.

Categories
HTML/CSS

z-Index: Short note

It is been sometime I try my hand to CSS. But today when I got a chance to work on Jquery Animation to make it smoother than what it was, I realise that I never work with Z-index property. It is not that I don’t know about it, but it always is pain and I work around than using Z-Index. Today I decide to take a dig on it and did use it to make it work smooth. There is nothing much to tell about Z-index, that it just only align your Object in 3D [yup], for some saying it on layer is easier. However there are few things to note:

1. z-index is calculated relate to Sibling elements. i.e. if you set z-index on element from different parent element, then it is waste.

2. z-index doesn’t used up if elements are static or relatively positioned as in both case you already tell browser to calculate element position relative to other and or in default manner. However I read some where that it does work for few case with relative position. But it never for me. 

Once I know those things it is easier for me to use it fully. So I thought to document it here. 

Categories
Concept/algorithm HTML/CSS Javascript JQuery

Selecting menu item using Javascript

Okay, I create a pure CSS menu that use UL/LI structure to maintain the child relationship. All was great with this menu except that when you are on any of menu item page it doesn’t highlight that menu item explicitly. If you consider this it is not a big deal. What you can do is simply, iterate through the Menu Items which are probably in LI A tags. Once you iterate, find the URL in A tag and match the Page URL with the Menu ITEM link. If they match change the Class of respective LI or A as your liking.

try {
    var path = window.location.pathname.replace("/User/", "");
    if (path == "" )
        path="Userhome.aspx";
    $("#mainemnu a").each(function () {

        if ($(this).attr("href").toLowerCase() == path.toLowerCase() ) {
            if ($(this).parent().hasClass("submenuitem")) { //it is sub menu
                $(this).parent().parent().parent().addClass("selectedmenu");
            } else {
                $(this).parent().addClass("selectedmenu");
            }
        }
    });
} catch (err) { }

That was a simple Jquery Driven Javascript function that I call in Document ready function of Jquery.

Categories
HTML/CSS Programming

Facebook SDK: IE redirect loop

Recently we had problem with Facebook SDK, that on IE it remain in redirect loop and hence our facebook application was not working. I test it to find that it wasn’t getting the session detail on form submission. The reason is Security policy of IE that prevent 3rd Party Cookie drop which is required for SDK to work.

Finally got it working by throwing following header:

header(‘P3P:CP=”IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT”‘);

For now I just copy paste it from some site, but be careful all those words has different meaning and you may not want to throw all those words. Hope that help.

This same applies not just to facebook SDK, but anyone using a iframe application with cookie support.

Categories
HTML/CSS

HTML: Why we need to format it properly

I have always try to write a Validate HTML, but often I have been asked by my staff member what is the need of validated HTML if everything is working. They ask this question to avoid their little effort in getting HTML in proper shape, as they have to concentrate on open and closing tags etc. But recently I got a perfect example for them. We are using Jquery Ajax in our code where applicable, but soon my developer face a problem that whenever they try to load some dynamic content from Jquery Ajax it fails, but it works with their manual written Ajax code [which is indeed bit unsecure ]. But our problem is not limited to this, the problem we face is that when we add a Dynamic field using Ajax it doesn’t get submitted with Firefox, but it works fine with IE8 [yes you read it correct Firefox create problem for a chance this time]. I struggle to find the solution, because I didn’t look in HTML of their but try JS code only. Later I realise that I should check HTML and there I found a little problem.

The code is using DocType for XHTML 1.0 transitional, but what was written is not a valid xHTML, as the developer put <Form> opening tag between two <tr> tags. In XHTML this is not allowed, a Table Cell or Table element cannot take FORM tag as child, It will work for Table Cell [td], but it won’t work if you put FORM directly in Table Tag. Once the problem is solved, my dynamic fields start getting submitted fine on all browser.

Just little more information, that we were indeed using createElement DOM object, rather than InnerHTML to define our HTML, but still have that problem. So a Valid HTML is what I call a solution.

Categories
Bookmarked HTML/CSS

HTML Application

Recently I come across something new and not a useful as it seems, specially for web development. It is HTML Application (hta) a Microsoft’s own technology that work on IE browser, It act like a application though Programming language is HTML

 Read more about it http://msdn.microsoft.com/library/default.asp?url=/workshop/author/hta/reference/properties/border.asp

Its useful for organizational based Intranet application to some extend though.

Sumit Gupta

Categories
HTML/CSS

HTML Textarea Word Wrapping

Today I discovered a new thing, it sound silly to most of developers, and might laugh on me… But Today I understood the mean of wrap=”hard” for Textarea :).

Actually we hava a textarea for product description, and programmer add wrap=”hard” in description, not sure why? And while displaying description for product, we just replace Line Break, Carriage return (\r\n or vbCRLF) with HTML Line Break
Sound simple, but I found that after doing this I got exact formatting of text that I have in textarea. No matter I put Line break in text or not, it always take line break .. 🙁

This is the result of wrap=”hard” in textarea… It preserve the Formatting of text as its in terms of text wrapping and send that in that manner in POST Header.

Good thing to learn about HTML (Basic of Internet and its success )