jquery

JQuery Mobile and Asp.net WebForms 4.5

Rizwan Ahmed Asp.net, HTML5, JQM, JQuery , , , , ,

Hi,

I was searching for some examples on the responsive web design and frameworks and i was impressed by JQuery mobile and it’s roadmap towards the future and it’s broad capabilities. You can view JQuery Mobile at http://view.jquerymobile.com/1.3.0/

So, in further searches – it was obvious that lesser people have tried it with web forms. I didn’t find any examples (may be there are.. but nothing good appeared on google search).

So here is a another to the point simple example:

Steps

  1. Create Empty Web Forms Project (VS 2012)
  2. From NuGet – Add Jquery
  3. Add Jquery UI (For normal site)
  4. Add JQuery Mobile (For Mobile Site)
  5. Add “Site.Master” Master page
  6. Add “Site.Mobile.Master” Page (To used as master page for mobile site)
  7. Add Default.aspx
  8. Add Default.mobi.aspx
  9. Add Global.asax

Main Idea

“Every .aspx page in normal page has its respective .mobi.aspx” It’s hybrid project and we will simple use asp.net url routing to map if the request comes from mobile site (only in case of .aspx) – All other things remain same.

So,

Here are questions:

  1. How to do URL Rewrite?
  2. How to setup jQuery Mobile?

1- How to do URL Rewrite?

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.SessionState;
using System.Web.Routing;
namespace Test.WebWithMobile
{
public class Global : System.Web.HttpApplication
{
        protected void Application_BeginRequest(object sender, EventArgs e)
        {
            if (Request.Browser.IsMobileDevice)
            {
                //Request.Url.MakeRelativeUri(new Uri(Request.Url.AbsoluteUri)).ToString() + Request.Url.AbsoluteUri.Replace(“.aspx”, “.mobi.aspx”)
                if ((!Request.Url.OriginalString.ToLower().Contains(“mobile”)
                    && Request.Url.OriginalString.ToLower().EndsWith(“.aspx”))
                    || Request.Url.OriginalString.IndexOf(“.aspx”) == -1)
                {
                    var url = Request.Url.OriginalString;
                    if (url.ToLower().IndexOf(“.aspx”) == -1)
                        url += “Default.aspx”;
                    url = url.Replace(“.aspx”, “.mobi.aspx”);                    
                    var path = Request.Url.MakeRelativeUri(new Uri(url));
                    HttpContext.Current.RewritePath(“~/” + path);
                }//Request.ApplicationPath);
            }
}
}

2- How to setup jQuery Mobile?

<head runat=”server”>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″ />
<title></title>
<link href=”Content/jquery.mobile-1.3.0.min.css” rel=”stylesheet” />
    <script src=”Scripts/jquery-1.9.1.min.js”></script>
    <script src=”Scripts/jquery.mobile-1.3.0.min.js”></script>
<asp:ContentPlaceHolder ID=”head” runat=”server”>
</asp:ContentPlaceHolder>

</head>
<body>
<form id=”form1″ runat=”server”>
<div data-role=”page”>
            <div data-role=”header”>Mobile Header</div>
            <div data-role=”content”>
<asp:ContentPlaceHolder ID=”ContentPlaceHolder1″ runat=”server”>
</asp:ContentPlaceHolder>
</div>
        </div>
</form>
</body>

That’s It !!!

Surprised … but that’s it… This will get your going with query mobile and setting up web solution.

  1. Intro to JQuery Mobile
  2. Responsive Web Design
  3. PluralSight Training
  4. Download Source Code

JQM

Advertisement

70-480: Programming in HTML5 with JavaScript and CSS3 – Done

Rizwan Ahmed Certifications, HTML5 , , , , , ,

Hi,

Today, I took the 70-480: Programming in HTML5 with JavaScript and CSS3 – and cleared it. I thought it would be easy one, but it wasn’t – it had more than expected material coverage. As I can’t give specific details out, so I will make it short and general.

http://www.microsoft.com/learning/en/us/exam.aspx?ID=70-480

  1. Study the Channel 9, Screencast from http://www.microsoftvirtualacademy.com/tracks/developing-html5-apps-jump-start
  2. Study HTML5 from Pluralsight
  3. JavaScript Inheritance, Anonymous methods
  4. Structuring JavaScript Code
  5. Exception Handling
  6. Ajax – JQuery
  7. Event Handling
  8. Binding Events
  9. CSS3, Padding
  10. Positioning in CSS
  11. Header, Aside, Semantics

I had very cool experience with the javascript, html and dhtml etc … so I got it through. But you should have some experience and had actually build some stuff with html/ html5/ javascript and jquery.

Having experience helps a lot.

Thanks,

Riz

JQueryUI – Showing New Menu Widget Horizontally

Aside Rizwan Ahmed Asp.net, JQuery, JQuery 1.7, JQuery UI , , , ,

Showing JQuery menu Horizontally through CSS

I was trying the menu widget from JQuery UI. It looks good with lot of ability. But as usual i had to tweak it a little bit. You can check this at http://jqueryui.com/menu/#navigationmenu

Problem:

The menu on the demo site appears to be Vertical aligned – it grows vertically, and i would like it to be horizontal.

Like

Menu 1 – Menu 2 – Menu 3

Instead of

Menu 1

Menu 2

Menu 3

Solution:

So, for doing with minimal changes here is what you need to do, just define following css classes:

#menu li { display:inline-block; width: auto; }

#menu li.sub { display:block; width: auto;}

Where menu is the ul element for menu, and li (the sub menus, the second level) are marked with “sub” class. Here is the HTML markup for the reference.

display:inline-block; will render the li as inline – so they will appear in the same line side by side.

for Sub menu under each li you need to set them as “block”, so they appear vertically.

<ul id=”menu“>

<li><a href=”?Aberdeen”>Admin</a></li>

<li>

<a href=”?Ada”>Themes</a>

<ul>

<li class=”sub”><a href=”?Ada”>Default</a></li>

<li class=”sub”><a href=”?Saarland”>Test 2</a></li>

<li class=”sub”><a href=”?Salzburg”>Test 3</a></li>

</ul>

</li>

<li><a href=”?Adamsville”>Support</a></li>

<li><a href=”?Addyston”>Release Notes</a></li>

<li><a href=”?Addyston”>My Details</a></li>

</ul>

Hopefully, it will help people out.

UPDATED: http://jsbin.com/afepiz/31/edit (JSBIN)

Enjoy,

Thanks,

Riz