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();
});