RSS

Category Archives: HTML

Cross Domain requests when using JQuery Autocomplete

When using the JQuery control with AJAX web requests for example, it is likely that the data used to populate the auto complete is stored on another security domain.  As a result you ma have found that the list fails to appear and you start to bang your head against a table wondering why.

In order to ensure the auto complete continues to function correctly across domains the trick is to set the datatype of the ajax request to “jsonp” e.g.

Sample JQuery autocomplete using an ajax call

Sample JQuery autocomplete using an ajax call

 
 

Navigation Menu using CSS and JQuery

It’s a smart, professional navigation menu for the top of your web site.  The menu itself is styled using CSS and I use JQuery to add a nice fade in fade out effect to the menu items.  It’s also very quick and easy to implement.

I have broken up the tutorial into the following lessons:

Step 1 – Positioning the Navigation Menu

Step 2 – Creating and Positioning the Top Level Menu Items

Step 3 – Adding the Drop Down Menus

Step 4 – Animating the Drop Down Menus using JQuery

 

Navigation Menu using CSS and JQuery – Step 1

Step 1 – Positioning the Navigation Menu

Ok so let’s assume we are starting from scratch and have a blank web page:

Blank Web Page Template

I am now going to extend my main.html page with 2 new Divs. These are ‘content’ and ‘top_menu_bar’

Content DIVs

 

I am also going to add the following styles to our style.css file for these 2 Divs:

Content DIVs styles

The border properties are not required but merely demonstrate where our Divs are sitting on the web page.  The Content Div will hold the page content, while the top_menu_bar Div is going to be the placeholder for our menu.  If you browse to main.html you will see something like this:

Using Borders to show the Positioning of the Content DIVs

Try resizing the browser menu.  Notice that the menu will remain positioned in the middle of the window as we are using auto margins.

The final stage of this step is to remove our temporary borders and apply a gradient background to our ‘top_menu_bar’ Div.  Go online and type gradient generator into Google.  There are lots out there but essentially you want to create a gradient that is 1 pixel wide and 60 pixels in height e.g.

Sample Gradient Image

Save the Gradient image to your site folder and revise the Style sheet as below:

Revised Content Style

Your page will now look like this:

Navigation Bar

 

 

 

 

 
 

Navigation Menu using CSS and JQuery – Step 2

Step 2 – Creating and Positioning the Top Level Menu Items

To our page, lets start by adding another DIV which will contain our navigation bar items and a List of menu Items:

Parent Menu Items

If you browse to the page now, before we have added any styles, you will see the following (not very stylish):

Un-Styled Menu Items

Therefore, lets modify the style sheet and add the following styles in order to position and style our top level menu items:

Top Level Menu Item Styles

There are a few styles worth noting here:

Firstly the * Style, shown towards the top, ensures that we reset any default positioning applied by the browser template.  If you have done much web development you will have noticed that pages display slighltly differently based on the browser you are using.  By adding this style I am ensuring the body content will always be posiiton flush with the top of the page.

I have also applied a z-index property to the navigationBar DIV to ensure that the menu and its drop down menus will display on top of any other page element.

I have added some text shadow to the menu items.  This is a newer CSS property and so will not be available in all browsers and will simply not be applied if the browser does not support Text Shadow.

I like to apply new effects and styles where possible but the golden rule is not too implement a style which will cause the element to look out of place if the style is not supported by the browser and so cannot be applied.

Ok great, so now if you browse to the page we should see our navigation bar taking shape:

Top Level Menu Items

 

 

Navigation Menu using CSS and JQuery – Step 3

Step 3 – Adding the Drop Down Menus

Lets begin by extending the unordered list <ul> tags within our page to include some child lists.  These will make up the items in the drop down menu;

Child Lists for the Drop Down menus

Notice that I have encapsulated the child lists wihin another DIV with an associated class of navigationBar_sub. This will make it easier to style the dropdown lists seperately from its parent.

So lets add the following styles for the drop down menus to our style sheet

Styles for the Drop Down Menus

Using the same approach as in Step 1, I created an image which was 1 pixel wide, black and semi-transparent.  This is set as the background image (see above) for any <ul> tags found within a DIV associated to the class navigationBar_sub.

Also notice that I have set the display property to Block.  This is only temporary as we only want to display the menu when the user hovers over the menu item and by setting the property to block the child menu will always be displayed.  This is handy though as we can check the styles are correct and you should end up with something like:

Navigation Bar showing child menus

 

Navigation Menu using CSS and JQuery – Step 4

Step 4 – Animating the Drop Down Menus using JQuery

Following on from styling out drop down menus in Step 3, the first thing we need to do is hide the child menus.  We had set them to always display so that it was possible to check the styles had been applied correctly.  However, by default it makes more sense to hide these drop down menus so that we can make use of JQuery to display the menus when the user hovers over a parent menu item.

Therefore, modify the .navigationBar_sub ul style as shown here:

Set the display property to ‘none’ to hide the element

Now all that is left to do is add the JQuery script to fade in and out the drop down menus when the users hovers over the corresponding parent menu item.

Add a script reference to pull in the JQuery library from Google API into the <head> of your page.  Alterantively you can download the library locally and reference it but for simplicity I’ll use the Google API.

JQuery library reference

Finally, after the <html> section, add a <script> section to contain the following JQuery code:

JQuery Script for fade in/out animation

All we are saying here is that if the users hovers the mouse over a Div associated to class nav_main_item, look for the first <ul> tag within that Div and fade in and out its contents.  The stop function just ensures that all previous animations are cancelled reducing any flicker.

And that’s it, the final menu is complete.

Like I mentioned at the start of this blog, If you want me to send you the source for this menu then you can contact me using the form on the ‘About’ section of my blog.  I should be able to respond quickly.

 

 

Client Server Progress Bar using SignalR

I am currently involved on a web application project which does some pretty heavy processing on the server side.  The Client makes a request to the Server, and waits patiently for a response once the server side processing is complete.  However in the disconnected world of the web this can prove a problem.  For example The client will make a request and wait for a response until a timeout is reached.  At this point the client will stop waiting for the reponse while the server is still processing the request causing a whole host of performance issues.

So I thought, wouldn’t it be nice if I could keep the Client informed of the progress of the Server.  Maybe a Progress Bar on the client which is updated by the Server at various stages of the process.

Using SignalR I was able to enforce this communication between the Server and Client and created a basic example in this blog so you can do the same.

Step 1 – The Concept

The concept for this example is:

I will create a simple aspx page which will host a progress bar.  The intention being that this progress bar is updated in real time by the server.  To allow the server to update the client I will use SignalR.  I am also using the Twitter Bootstrap framework for my styling and layout although it is not essential.

Step 2 – Setting up the Environement

Open Visual Studio and Create a new ASP.NET Web Application

Using the Package Manager Console, Install the SignalR Libraries using NuGet (This will also ensure JQuery is installed) e.g.

Finally add the Twitter Bootstrap CSS which we will use to give our progress bar a nice styling e.g.

Twitter Bootstrap provides us with out of the box HTML, CSS and Javascript for out user interfaces, is excellent and can be found here http://twitter.github.com/bootstrap/

Step 3 – Server Side Code

For simplicity we are going to create a simple method which invokes a timer and then periodically uses Signal R to pass a message back to the client updating the progress of the progress bar.

Using the Default.aspx.cs our code should look like this:

Here I have created a class called Chat which derives from Hub.  Yep if SignalR is installed correctly its that simple, the rest of the code is conerned with updating the progress bar.

I have created a method called Send() which is created on the Hub Server and will be linked to on the client in step 4.  This method simply creates a timer with a tick interval of 100ms and when each interval elapses calls to the timer_Elapsed event.  This event then evaluates my counter (which starts at 1) and increments is by 1.  If the result has not reached 100, we make a call to any SignalR clients that are listening and invokes the addMessage function on the client.  Once we reach 100 (or 100% in terms of our progress bar) the timer is stopped.

Step 4 – Client Side Code

Out client side code within Default.aspx is slightly more complex but still pretty straight forward:

First add the following script references to JQuery and SignalR

Secondly add a link to the Twitter bootstrap CSS:

then add the following markup to the client page:

Notice the code within the <div> with the class name ‘Container’.  This is where I create a simple Progress Bar using the Twitter Bootstrap Styling.  The Width attribute attached to the ‘bar’ is initially set to 0%.  This will be increased incrementally to 100% from the server.

Also noice out Script section.  Here we are referencing out SignalR class on the server and creating out addMessage method which is invoked from the server.  This method simply uses Jquery to grab our progress bar and increment the Width attibute with the value passed back from the server.

I have also added some code to the click event of the button which invokes the Send Message on the server,

Step 5 – Running the Application

If all the steps have been implemented correctly you should be able to run the application abd click the button to see the progress bar being incrementally increased by the server

 
3 Comments

Posted by on May 17, 2012 in ASP.NET, C#, HTML, web development