Bootstrap css theme not loaded in mobile view - css

I am creating mobile views for my mvc 4 web application. I have installed JQuery.Mobile.MVC in my project. But the CSS theme "a" is not getting loaded in my mobile views. My _Layout.Mobile.cshml looks like the following...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
<script>
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
<link href="#Url.Content("~/Content/Site.Mobile.css")" rel="stylesheet" type="text/css" />
#RenderSection("Styles", false)
</head>
<body>
<div class="ui-bar-b">
<ul>
RAW Online Mobile
</ul>
</div>
<div data-role="page" data-theme="b">
#*#Html.Partial("_ViewSwitcher")*#
<div data-role="header">
<h1>#ViewBag.Title</h1>
#RenderSection("Header", required: false)
</div>
<div data-role="content">
#RenderSection("featured", false)
#RenderBody()
</div>
</div>
#Scripts.Render("~/bundles/bootstrap")
and my Index.Mobile.cshtml looks like the following...
#model IEnumerable<RAWOnlineWebandMobile.Models.Company>
#{
Layout = "~/Views/Shared/_Layout.Mobile.cshtml";
ViewBag.Title = "Index";
}
#section Header{
<div data-role="button" data-icon="plus" class="ui-header ui-btn-right">
#Html.ActionLink("New", "Create")
</div>
}
<ul data-role="listview" data-inset="true" class="ui-bar-b">
#*<li data-role="list-divider"></li>*#
#foreach (var item in Model)
{
<li class="ui-bar-b ui-link">
<a href="Companies/Details/#item.CompanyID">
<h3>
#item.CompanyName
</h3>
</a>
</li>
}
</ul>

Related

Shared Layout view not applying to all views in ASP.NET Core 2.1

Layout view not shared across other views
Currently my home page and other main pages share the view of my layout however the other pages such as the login page share the view but with no styling or images. Also my main pages such as about for example all the crud features like delete also remove styling, anyone know how to link this all together?
Actual View of login page and Home Page
Login.cshtml
#page
#model LoginModel
#{
ViewData["Title"] = "Log in";
}
<h2>#ViewData["Title"]</h2>
<div class="row">
<div class="col-md-4">
<section>
<form method="post">
<h4>Use a local account to log in.</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
#Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Log in</button>
</div>
<div class="form-group">
<p>
<a asp-page="./ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-page="./Register" asp-route-returnUrl="#Model.ReturnUrl">Register as a new user</a>
</p>
</div>
</form>
</section>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Clean Blog</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Sample Post
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/home-bg.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1>Clean Blog</h1>
<hr class="small">
<span class="subheading">A Clean Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>
</body>
</html>

In your Layout.cshtml the path to the css files are relative.
Change them to absolute (by adding a leading / to the CSS paths) and it should work.
The problem is that the main page is on /, so the CSS directory is /css.
However other pages might be at /Account/Login, so the CSS directory would be /Account/Login/css (which is wrong)
Assuming that the folders /css and /vendor are correct:
<!-- Bootstrap Core CSS -->
<link href="~/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="~/css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
the same applies to the JS scripts at the end:
<!-- Bootstrap Core JavaScript -->
<script src="~/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="~/js/jqBootstrapValidation.js"></script>
<script src="~/js/contact_me.js"></script>
<!-- Theme JavaScript -->
<script src="~/js/clean-blog.min.js"></script>

Bootstrap 'nav tabs' works incompletely in jsp

I'am using Bootstrap in jsp file, and using tag nav nav-tabs, here is my code in .jsp file:
before </head>
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>content sales</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
and before </body>
<!-- boostrap -->
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script>
$('#myTab a').click(function(e){
e.preventDefault();
$(this).tab('show')
})
</script>
I add this script code because i try solution from Bootstrap nav tabs/pills works only at first interaction, but it doesn't work.
and here is my body content:
<div class="container">
<ul id="myTab" class="nav nav-tabs">
<li role="presentation" class="active">All content</li>
<li role="presentation" >Unbought content</li>
</ul>
<div class="tab-content">
<!-- all content -->
<div class="tab-pane active" id="home">
<table class="table">
something in table using jsp
</table>
</div>
<!-- unbought-->
<div class="tab-pane fade" id="unbought">
<table class="table">
something in table using jsp
</table>
</div>
</div>
</div>
and the problem is when i access this jsp file in chrome(version 56.0.2924.87 (64-bit)), the first time i click All content, Unbought content,it works fine, but when i try to click again, i can not switch from All content to Unbought content or from Unbought content to All content.
Can anybody help?
I tried put all the content into a html file, the result is same with jsp file.

I change a link source of Bootstrap and it works fine. So i think the problem maybe is the source of Bootstrap have not been included correctly.

Auto Select Tab on Page Navigation

I have a view that contains a Twitter Bootstrap nav nav-pills control. This is embedded fine, and in each of my tabs I am planning to embed two partial views. Below is the razor view
#using SiteNET.Models;
#using Microsoft.AspNet.Identity;
#model SiteNET.Models.ManageUserViewModel
#{
ViewBag.Title = "Manage Account";
}
<style type="text/css">
.manage {
margin: 20px;
}
</style>
<div class="manage">
<ul class="nav nav-pills" id="myTab">
<li><a data-toggle="tab" href="#manage">Manage Account</a></li>
<li><a data-toggle="tab" href="#downloads">Avalible Downloads</a></li>
</ul>
<div class="tab-content">
<div id="manage" class="tab-pane active fade in">
<h2>#ViewBag.Title</h2>
<p class="text-success">#ViewBag.StatusMessage</p>
#*<div class="alert alert-success"
data-toggle="collapse"
role="alert">#ViewBag.StatusMessage</div>*#
<div class="row">
<div class="col-md-12">
#Html.Partial("_ChangeEmailAddressPartial", Model)
</div>
</div>
<div class="row">
<div class="col-md-12">
#if (ViewBag.HasLocalPassword)
{
#Html.Partial("_ChangePasswordPartial")
}
else
{
#Html.Partial("_SetPasswordPartial")
}
</div>
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
</div>
<div id="downloads" class="tab-pane fade">
<h3>Downloads</h3>
<p>Avalible downloads partial view.</p>
</div>
</div>
</div>
The problem is that when the page loads the content of the first tab is shown but the actual tab is not selected (see below)
it should look like this when the page is first loaded
I have tried to use this solution, which uses the JavaScript below
<script>
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
// Store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});
// On load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');
</script>
But this does not seem to work (that is, does not seem to select the first tab when the page is loaded). It also does not store the selected tab. How can I
Make the first tab show as selected when the page is first loaded?
How can I amend the JS above so that the selected tab is persisted between page navigations?
Thanks for your time.
To see this problem for your self go to CodeLAB and paste in
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Pills Nav with Icons</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<script>
//$('#myTab a[href="manage"]').tab('show');
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
// Store the currently selected tab in the hash value
$("ul#myTab > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});
//$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
// var id = $(e.target).attr("href").substr(1);
// window.location.hash = id;
//});
// On load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="#' + hash + '"]').tab('show');
</script>
<div class="manage">
<ul class="nav nav-pills" id="myTab">
<li><a data-toggle="tab" href="#manage">Manage Account</a></li>
<li><a data-toggle="tab" href="#downloads">Avalible Downloads</a></li>
</ul>
<div class="tab-content">
<div id="manage" class="tab-pane active fade in">
<h2>Manage</h2>
<p class="text-success">Success</p>
<div class="row">
<div class="col-md-12">
<p>Partial view A</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>Partial view B</p>
</div>
</div>
</div>
<div id="downloads" class="tab-pane fade">
<h3>Downloads</h3>
<p>Avalible downloads partial view.</p>
</div>
</div>
</div>
</body>
</html>
Then click "Show Output", you will see the problem.

I have no experience with asp and whatsoever, but for the bootstrap / jQuery part I guess your solution is this:
1.) Give the li you want to be active the class .active. For example:
<li class="active"><a data-toggle="tab" href="#manage">Manage Account</a></li>
The same goes than for the according content element, like you already did.
<div id="manage" class="tab-pane active fade in">xxx</div>
Take a closer look to the according bootstrap documentation: Bootstrap Tabs
2.) I guess it's not working because your script targets the wrong element (ul.nav-tabs), which doesn't exist in your code. As far as I can see it from your code, you have .nav-pills instead. So try:
$("ul.nav-pills > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});
Or even better, try targeting your unique id #myTab, like this:
$("ul#myTab > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});
If this doesn't help or hint you in the right direction, please try to create a working fiddle of your generated html output so that we can take a closer look at your code.
UPDATE
Try this code. It works perfectly for me on my localhost.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Pills Nav with Icons</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<script>
$(document).ready(function() {
if(location.hash) {
$('a[href=' + location.hash + ']').tab('show');
}
$(document.body).on("click", "a[data-toggle]", function(event) {
location.hash = this.getAttribute("href");
});
});
$(window).on('popstate', function() {
var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
$('a[href=' + anchor + ']').tab('show');
});
</script>
<div class="manage">
<ul class="nav nav-pills" id="myTab">
<li class="active"><a data-toggle="tab" href="#manage">Manage Account</a></li>
<li><a data-toggle="tab" href="#downloads">Avalible Downloads</a></li>
</ul>
<div class="tab-content">
<div id="manage" class="tab-pane active fade in">
<h2>Manage</h2>
<p class="text-success">Success</p>
<div class="row">
<div class="col-md-12">
<p>Partial view A</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>Partial view B</p>
</div>
</div>
</div>
<div id="downloads" class="tab-pane fade">
<h3>Downloads</h3>
<p>Avalible downloads partial view.</p>
</div>
</div>
</div>

jquery mobile responsive image

i need help with responsive image when orientation change.
When mobile change to landscape mode, show white space inside page wrapper just after image, creating a space between image and fixed footer.
When click on a button panel image fix.
html:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/app-theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure.min.css" />
<link rel="stylesheet" href="css/index.css" />
<title>Elephant</title>
</head>
<body>
<div class="app">
<div data-role="page" id="pageone" data-title="Elephant" data-url="pageone">
<!--Menu Panel-->
<div id="menu-panel" data-role="panel" data-position="left" data-display="push" data-position-fixed="true">
<ul id="page-menu" data-role="listview">
<li data-icon="search"><a data-rel="close" href="#pageone">Search</a></li>
<li data-icon="cloud"><a data-rel="close" href="#pageone">Weather</a></li>
<li id="location-btn" data-icon="location"><a data-rel="close"
href="#pageone">Location</a></li>
<li data-icon="camera"><a data-rel="close" href="#pageone">Camera</a></li>
<li data-icon="gear"><a data-rel="close" href="#pageone">Configuration</a></li>
</ul>
</div>
<!--/ Menu Panel-->
<!--Actions Panel-->
<div id="overlay-panel" data-role="panel" data-position="right" data-display="overlay" data-position-fixed="true">
<ul id="page-menu" data-role="listview">
<li id="camera-btn" data-icon="camera"><a data-rel="close" href="#pageone">Photo</a></li>
<li data-icon="video"><a data-rel="close" href="#pageone">Video</a></li>
<li data-icon="audio"><a data-rel="close" href="#pageone">Audio</a></li>
<li data-icon="alert"><a data-rel="close" href="#pageone">File</a></li>
</ul>
</div>
<!--/Actions Panel-->
<header id="page-header" data-role="header" data-position="fixed">
<a id="menu-btn" href="#menu-panel" data-role="button"
data-rel="close" data-icon="bars" data-iconpos="notext">Menu</a>
<h1>
<div id="spinner" class="visually-hidden ui-loader"></div>
<span class="visually-hidden">Elephant</span>
</h1>
<a href="#overlay-panel" data-role="button" class="ui-btn-right"
data-icon="bullets" data-iconpos="notext">Media</a>
</header>
<div id="main-content" role="main" class="ui-content">
<div class="ui-grid-solo">
<div id="photos-container" class="ui-block-a">
<img style="display: block;" id="smallImage" src="img/test.jpeg" />
<!-- <img style="display: none;" id="largeImage" src="" /> -->
</div>
</div>
</div>
<footer id="page-footer" role="contentinfo" data-role="footer" data-position="fixed">
<h1></h1>
</footer>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile.min.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
css:
#photos-container {
width: 90%;
margin-left: 5%;
}
#photos-container img {
max-width: 100%;
}
Thank you very much
Regards

Thanks for your attention.
Error comes calculating min-height. I fixed it writting:
#media screen and (orientation: landscape) {
.ui-mobile .ui-page {
min-height: 0 !important;
}
}
Regards

flexslider for implement a basic slider can't resolve file jquery.flexslider.js

Hello I would realize a basic slider. I want to do this using http://flexslider.woothemes.com/index.html
In my file application.htlm I've added the code how say the getting start link
http://www.woothemes.com/flexslider/
But display image normal without basic slider.
I noted that in file application see me
can't resolve file jquery.flexslider.js why?
This is my application.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAlDKLvBpApFUJJVjSXbZ- BV40B3xBVtYY&sensor=true&language=it" type="text/javascript">
</script>
<meta charset="utf-8">
<title>SmartEconomy Project</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile- 1.3.0.min.css" />
<%= javascript_include_tag :defaults %>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"> </script>
<%= csrf_meta_tag %>
<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script src="jquery.flexslider.js"></script>
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
// Can also be used with $(document).ready()
$(window).load(function() {
$('.flexslider').flexslider({
});
});
</script>
<script>
$(document).on("click", ".show-page-loading-msg", function() {
var $this = $( this ),
theme = $this.jqmData("theme") || $.mobile.loader.prototype.options.theme,
msgText = $this.jqmData("msgtext") || $.mobile.loader.prototype.options.text,
textVisible = $this.jqmData("textvisible") || $.mobile.loader.prototype.options.textVisible,
textonly = !!$this.jqmData("textonly");
html = $this.jqmData("html") || "";
$.mobile.loading( 'show', {
text: msgText,
textVisible: textVisible,
theme: theme,
textonly: textonly,
html: html
});
})
.on("click", ".hide-page-loading-msg", function() {
$.mobile.loading( 'hide' );
});
</script>
<script type=text/javascript>
function getLatLon(){
var address=document.getElementById("Address").value;
// var address=document.getElementsByName("address").value;
var cat=address.concat(',');
var user1Location = cat
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
address: user1Location
}, function(locResult) {
console.log(locResult);
var lat1 = locResult[0].geometry.location.lat();
var lng1 = locResult[0].geometry.location.lng();
$("#demo").html("latitude:" + lat1 + "<p>longitude:" + lng1 + "</p>"
+"<input type='hidden' id='latitude' name='promotion[lang]' value='"+lat1+"'>"+
"<input type='hidden' id='longitude' name='promotion[long]' value='"+lng1+"'>");
});
// var vett = [
// ['blabla',37.44,54.33,1],
// ['casds',4334.44,323.2,2]
// ];
}
</script>
</head>
<body>
<div data-role="header" id="ale" data-theme="a">
<h1> SmART_eConomY </h1>
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
<ul class="slides">
<li>
<%= image_tag "facebook.png" %>
</li>
<li>
<img src="slide2.jpg" />
</li>
<li>
<img src="slide3.jpg" />
</li>
</ul>
</div>
<div data-role="controlgroup" data-type="horizontal"class ="ui-btn-left" >
<%= link_to 'Sign up', new_user_registration_url ,'datatheme'=>'c','data- role'=>'button','data-icon' => 'plus','data-iconpos'=>'left', 'data-transition'=>'fade'%>
<%= link_to 'Sign in', new_user_session_url,'data-role'=>'button','data-icon' => 'plus', 'data-iconpos'=>'left', 'data-transition'=>'slidedown' %>
</div>
<div data-role="controlgroup" data-type="horizontal"class ="ui-btn-right" >
<a href="users/auth/facebook" data-ajax="false" class="auth_provider">
<%= image_tag "facebook.png", :alt => "Facebook" %></a>
</div>
</div>
<div data-role="navbar" data-theme="b" data-iconpos="bottom" >
<ul>
<li><%= link_to "Home",promotions_path,'data-icon'=>'home','data-theme'=>'c','data- mini'=>'true',"data-ajax"=>"false"%></li>
<li><%= link_to "Add Good",new_good_url,'data-icon'=>'plus','data-theme'=>'c','data- mini'=>'true',"data-ajax"=>"false"%></li>
<li><%= link_to "Create Promo", new_promotion_url,'data-icon'=>'plus','data-t theme'=>'c','data-mini'=>'true',"data-ajax"=>"false"%></li>
<li><%= link_to "Add Category",new_category_url,'data-icon'=>'plus','data-theme'=>'c','data-mini'=>'true',"data-ajax"=>"false"%></li>
<li><%= link_to "Search Promo",:promo_search,'data-icon'=>'search','data-theme'=>'a','data-mini'=>'true',"data-ajax"=>"false" ,'target'=>'_parent','class'=>'show- page-loading-msg', 'data-theme'=>'c','data-textonly'=>'false', 'data-textvisible'=>'true', 'data-msgtext'=>'Map is loading, sorry for latency' ,'data-icon'=>'search','data-iconpos'=>'right'%></li>
</ul>
</div><!-- /navbar -->
<% if user_signed_in? %>
<div class="ui-bar ui-bar-b" data-role="header">
<%= link_to "Profile",:accountsettings,'data-icon'=>'gear','data- role'=>'button','data-mini'=>'true'%>
<h1> Signed in as <%= current_user.email %>. Not you?</h1> <%= link_to "Sign out", :signout,'data-icon'=>'delete','data-role'=>'button','data-mini'=>'true'%>
<h2 class="notice" <%= notice %> class="alert"><%= alert %> </h2>
</div>
<% end %>
<div class="ui-bar ui-bar-b" data-role="header">
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %><p/>
</div>
<%=yield %>
</body>
</html>

First of all you can't use $(window).load(function() { in jQuery Mobile application. Like document ready it will trigger before full page can be shown. Unlike normal web development jQuery Mobile uses different logic. It uses ajax to load everything into the DOM. To remedy this jQuery Mobile developers have created page events.
There's also another problem, because of this custom page handling correct page height can be acquired ONLY during pageshow event, so your initialization code should look like this:
$(document).on('pageshow', '#index', function(){
$('.flexslider').flexslider();
});
But I think this is not a real problem here. You real problem is your page structure. As I told you jQuery Mobile uses ajax to load pages into the DOM. But ONLY first page is fully loaded, every other html page will be loaded only partially. Basically jQuery Mobile will load ONLY DIV with data-role="page". Read this to find out how to solve this problem.
In the end, this is how flexslider should be used with jQuery Mobile: http://jsfiddle.net/Gajotres/mMcdD/
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="http://flexslider.woothemes.com/css/flexslider.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" />
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Javascript :
$(document).on('pageshow', '#index', function(){
$('.flexslider').flexslider();
});

Resources