Website Knowledge

HTML, CSS, Javascript, jQuery and more

Jquery EasySlider Vertical/Orientation Option

Hi Guys,

I was recently working with the easyslider on one of my websites http://www.fmrwebdesign.com when I came across something. On the easyslider plugin download page: http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider it says:

orientation

Sliding can be horizontal or vertical. Horizontal is default and if you want vertical set this to 'vertical'. So I was going crazy trying to achieve vertical sliding effect instead of the default horizontal effect. I was using:

orientation: 'vertical'

This does not work, may be it used to be like this in the earlier versions, I'm not sure but it clearly does not work. So I when I looked into the plugin codeI found the option "vertical", so intead of orientation I used

vertical:'true' and blah!!

Guess the developer of the plugin Alen needs to update the info on that page. I was going to leave a comment but the comments have been closed on that page. Anyways hope this will save you guys some time.

Timed Pop-up using Javascript, Jquery and Cookies

Recently I worked on a website which required that a particular section of the website should show a popup to the visitor after they have been browsing the section for a minute. This popup should only show at certain times and once it has been show to the visitor it should not pop-up again during that session. So to put it all together clearly, it had the following requirements:

1. Pop-up should show after a visitor has been browsing for a minute.
2. It should only show in a certain section of the website (multiple pages).
3. Once shown it should not pop-up during that session.
4. It should only show during certain hours of the day (US Time).

So because the pop-up needs to show on mulitple pages I needed a way to store the visitor’s time when they first hit any of the pages of that certain section. For this purpose I used a cookie. So the idea was that once the visitor lands on one of the pages, it will store the time in a cookie. Then I would check every 5 secs if the visitor has been there for a minute. If yes, I will show the pop-up. Once the pop is shown I will store another cookie that the pop up has been shown so don't show it again.

Hopefully you are familiar with Jquery, if not,  it is just a library of javascript that makes writing javascript easier. You can read more here. I used the Jquery cookie plugin. I wanted the pop-pop to look cool so I used Jquery Fancybox plugin. For cookies I used the Jquery Cookie plugin, it makes using the cookies even simpler, see here.

<script type="text/javascript"> $(document).ready({ var CurrentDate = new Date(); //I converted the date to universal time becasue the visitors will come from all different time zones. Remember we need to show the pop up only during certain hours. CurrenHour = CurrentDate.getUTCHours();

So my client’s requirement was the pop up should not show during 02:00 and 08:00 UTC hours. So I checked for the condition as follows:

if(!(CurrentHour>=2 && CurrentHour<=8)){ //Checking if the cookie exists already if(SearchCookie == null || SearchCookie ==""){ //Store time in cookie var VisitDate = new Date(); var VisitTime = VisitDate.getTime(); $.cookie('SearchCookie',VisitTime) timeout('ShowPop()',60000) }

So if the pop already exists then the code below will run

function ShowPop(){ .("popup-link").click{ var VisitDate= new Date(); var CurrentTime = VisitDate.getTime(); } } } }); </script>

So the above code first checks if the time is not between UTC hours of 2-8 it runs the code, and in the code I check if the cookie exists already because there is a possiblity that the user has already seen the popup or the user was on a different page of that section of the website, and so the time has already been stored in the cookie. Below is all the javascript code:

<script type="text/javascript"> $(document).ready({ var CurrentDate = new Date(); CurrenHour = CurrentDate.getUTCHours(); if(!(CurrentHour>=2 && CurrentHour<=8)){ //Checking if the cookie exists already if(SearchCookie == null || SearchCookie ==""){ //Store time in cookie var VisitDate = new Date(); var VisitTime = VisitDate.getTime(); $.cookie('SearchCookie',VisitTime) timeout('ShowPop()',60000) } function ShowPop(){ .("popup-link").click{ var VisitDate= new Date(); var CurrentTime = VisitDate.getTime(); } } } });