Cancelled

jQuery mobile - Dynamic page content solution needed

Hello,

I'm working on a mobile web app which uses the jQuery mobile framework together with HTML5 and I'm looking for a skilled web developer with a sound knowledge of jQuery to help me with the programming side.

As you can see by looking at the screenshots, the app is a video sign language dictionary and features over 700+ (mp4) videos which are organised into different categories which are all structured into the main navigation (as well as being listed again on a full 'a-z' list page).

At the moment, you will see that the app uses a multi-page jQuery mobile template, where the HTML for each video page is contained in a separate div [url removed, login to view] means that for every video I add (there are 700+), I will currently have to add in the following HTML to load each video:

----------------------------------------------------------------------------------

<div data-role="page" id="page-id" data-backbtn="true">

<div data-role="header"

data-theme="a">

<h1>Page name</h1>

</div><div data-role="content" style="padding:0">

<video id="movie" preload controls autoplay> <source src="videos/[url removed, login to view]" /> </video>

</div>

</div>

<div data-role="footer" data-id="footer-fixed" data-position="fixed">

<div data-role="navbar">

<ul>

<li><a href="[url removed, login to view]" data-icon="home" data-iconpos="top" data-ajax="false">Home</a></li>

<li><a href="#search" data-icon="search" data-iconpos="top" class="ui-btn-active ui-state-persist">Search</a></li>

<li><a href="#credits" data-icon="info" data-iconpos="top" data-ajax="false">Credits</a></li>

</ul>

</div>

</div>

-----------------------------------------------------------------------------------------------------

The problem with this is, it will increase the size of the HTML file and cause performance & caching issues. So, apart from creating a separate page for each video, I would like you to come up with a simple solution which will load the video's dynamically using minimal HTML and a jQuery.

For example, the list on the Alphabet page has the names of all the videos in a simple unordered list, as does the search page, e.g.

--------------------------------------------

<div data-role="content" >

<ul data-role="listview" data-inset="true" data-split-icon="arrow-r" data-split-theme="a">

<li><img src="images/[url removed, login to view]" alt=""/><h3><a href="[url removed, login to view]">the basics</a></h3><p>numbers &amp; time, alphapet, greetings</p>

<ul data-theme="d">

<li><a href="[url removed, login to view]">alphabet</a>

<ul>

<li><a href="#a" >a</a></li>

<li><a href="#" >b</a></li>

<li><a href="#" >c</a></li>

-------------------------------------------------------------------------------------------------

It would be good if we could apply an id or class to each of the existing links which we could then call using jQuery to open that particular video when clicked.

The videos would have to open up in the container page, so that the heading showing the name of the video appears at the top. I would also like a next/previous button in the header so that teh user could browse between the previous/next videos from here.

According to the jQuery mobile site, this should all be possible. Unfortunately, my knowledge of Javascript and jQuery is very low.

jQuery Mobile - Dynamically injecting pages:

[url removed, login to view]

This is a seriously easy job for anyone who knows javascript & jQuery. If you're that person, then I'd love to hear from you. =)

FOR INFO: I don't require you to write the script for all the videos, I simply need you to provide the code with a working example (using a few videos) and then provide instructions on how I add the rest.

This is a seriously easy job for anyone who knows javascript & jQuery.

FOR INFO: I don't require you to write the script for all the videos, I simply need you to provide the code with a working example (using a few videos) and then provide instructions on how I add the rest.

This is a seriously easy job for anyone who knows javascript & jQuery.

Skills: HTML5, jQuery / Prototype, Mobile App Development

See more: jquery mobile multi dynamic page, next page jquery mobile, jquerymobile dynamic footer, dynamic content html5, jquery mobile persist page content, jquerymobile dynamic navbar, jquery mobile dynamic multi page, dynamically injecting pages mobile app using javascript, jquery mobile data ajax, working home job search, working from home web developer, working from home job search, working as web developer from home, we-top dynamic, we top dynamic, web top language programming, web template png, web site template mobile, web site template html5, web site programming at home, web search web search basics, web programming basics, web page developer job, web listview, web html5 framework

About the Employer:
( 0 reviews ) Tyne and Wear, United Kingdom

Project ID: #1245214

1 freelancer is bidding on average $220 for this job

jeffchloe

HELLO SIR PLEASE CHECK PMB

$220 USD in 4 days
(0 Reviews)
0.0