Css for Chrome, Safari and Firefox

Another note to self....

The css I used for a web application seemed to work fine in Firefox 15. Unfortunately, the top:440px did not work as expected. What I did was putting

@media screen and (-webkit-min-device-pixel-ratio:0) {
   div.scroll-home { top: 140px; }
}

to solve the problem for Safari and Chrome browsers and within the class I used

top:140px\9; 

\9 refers to IE 9

Step carousel problems

I was messing around with StepCarousel the other day. I tried to use two carousels, both with pagination, in the Web Form. The result was not the desirable!!! When I moused over the images that denote each panel of the first carousel, the images of the second carousel appeared. I got in the javascript that comes with StepCarousel, in the createpaginate method and changed

            srcs = [$templateimg.attr('src'), $templateimg.attr('data-over'), $templateimg.attr('data-select')]

to

            var srcs = [$templateimg.attr('src'), $templateimg.attr('data-over'), $templateimg.attr('data-select')]
 

This resolved my problem and I was happy

Pretty Photo

PrettyPhoto is a jQuery lightBox clone. It is versitile and adds a great look and feel to your project. Unfortunately, documentation for PrettyPhoto is not....well documented :) , leading sometimes to loss of time for a web developer that uses it for the first time. A problem I encountered using PrettyPhoto was that inline content worked fine the events of the buttons where not fired!!! I lost time implementing a pop up only to figure out that I had to develop it in a different way, using the external sites method of implementation. The way i did it was the following...

1.Created a web user control that would act as my pop up

2.Created an aspx page in which I added my web user control

3.In the page I wanted my pop up to appear I added

<a id="pretty-photo-opener" href="/Controls/newsLetterPopUp.aspx?iframe=true&width=620&height=470" rel="prettyPhoto"></a>

that will act as the element that will open the pop up

4.In the document ready fuction I implemented the following

<script type="text/javascript">
    $(document).ready(function() {
            $("a[rel^='prettyPhoto']").prettyPhoto({ theme: '', callback: function() { } });
            $('#pretty-photo-opener').trigger('click');
        }
    });
</script>

5.Finally, in the my web user control I implemented the following code to close the PrettyPhoto pop up, since I used a custom close button and not the one of the PrettyPhoto

    <script type="text/javascript">
        function closeBox() {
            window.parent.$.prettyPhoto.close();
        }
    </script>

 For more information about PrettyPhoto check this

Forms Authentication for a specific folder of your project

I post this mostly as a reminder to myself, just in case I need it again.
Today, one of the project's requirements was to deny access to unauthenticated user, in a specific folder of the web application. This folder contained reports generated by an SQL query, so general users should not be able to view them. The solution to the problem consisted of the following steps.

Create a new folder in the solution of my project and within it create a page that would host the reports and a custom login page.

In the Web config file of my project I added the following tag sections

  <location path="FOLDER NAME">
    <system.web>
   <authorization>
        <deny users="?"/>
     </authorization>
  </system.web>
 </location> 

in which I specify that this folder will deny access to unathendicated users and

    <authentication mode="Forms">
      <forms name="login" loginUrl="FOLDER NAME/lLOGIN PAGE.aspx" defaultUrl="REPORT PAGE.aspx" protection="All" path="/" timeout="30" />
    </authentication>

in which I specify that for this folder I will be using Forms authentication, in such a way that if am unauthenticated user tries to access the report page, he/she will be redirected to the custom login page and after a successfull login he/she will be redirected to the REPORT PAGE automatically.

Finally, in the code behind file of my LOGIN PAGE, in the login button click event I added the following code to use the Forms authentication method.

                FormsAuthenticationTicket authTicket = new FormsAuthenticationTicket(1, user.ContentId.ToString(), DateTime.Now, DateTime.Now.AddMinutes(30), false, "");
                string encTicket = FormsAuthentication.Encrypt(authTicket);
                HttpCookie faCookie = new HttpCookie(FormsAuthentication.FormsCookieName, encTicket);
                Response.Cookies.Add(faCookie);
                Response.Redirect(Request.RawUrl);

In conclusion, I could probably use a session object to store the authenticated user's credentials and check if the session is null or not in the page load event of the REPORT PAGE. In contrast, I was able to achieve the same result using Forms authentication, with less coding, which is always better... :)