I'd like a page transition effect like the "slide" transition on jqmobile, but with the option of dragging between one page and the other.
I have the transition I want using this plug in the problem is that this plug in needs jqmobile and my project uses jquery ui extensively so dropping jq ui is not an option. Is there any way the two libreries can coexist? (or any other solution to have this kind of transition)
Here is the working code for my two pages.
page1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/jquery.mobile-1.0b2.min.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.mobile.pagination.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='Js/Libs/jquery-1.6.2.min.js'></script>
<script type='text/javascript' src='Js/Libs/jquery.mobile-1.0b2.min.js'></script>
<script type='text/javascript' src='Js/Libs/jquery.mobile.pagination.js'></script>
</head>
<body>
PAGE1
<ul data-role="pagination">
<li class="ui-pagination-prev">Prev</li>
<li class="ui-pagination-next">Next</li>
</ul>
</body>
</html>
page 2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="css/jquery.mobile-1.0b2.min.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.mobile.pagination.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='Js/Libs/jquery-1.6.2.min.js'></script>
<script type='text/javascript' src='Js/Libs/jquery.mobile-1.0b2.min.js'></script>
<script type='text/javascript' src='Js/Libs/jquery.mobile.pagination.js'></script>
</head>
<body onload="">
<script type="text/javascript">
$('div').live('pageshow', function (event, ui) {
alert('This page was just hidden: ');
});
</script>
</body>
</html>
Related
i have downloaded a ganttChart library from here
(https://github.com/thegrubbsian/jquery.ganttView) and added to my application after that i have created a html file like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITLE</title>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.js">
</script>
<script language="javascript" type="text/javascript" src="jquery-ui-1.8.4.js">
</script>
<script type="text/javascript" src="jquery.ganttView.js"></script>
<script language="javascript" type="text/javascript" src="date.js"></script>
<script language="javascript" type="text/javascript" src="data.js"></script>
<link type="text/css" href="jquery.ganttView.css" rel="stylesheet"/>
</head>
<body>
<div id="Pluginwrapper">
<div id="Plugincontainer"></div>
</div>
</body>
</html>
then i am loading this html file via webview like this
[webview loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle
mainBundle] pathForResource:#"sample" ofType:#"html"] isDirectory:NO]]];
but webview doesn't show anything. please tell what i am missing?
The web view doesn't show anything because you haven't added any visible content to the page, just markup.
If you're looking for your plugin to generate you some output, you should look at it's example files.
I have main html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<title>Home</title>
<link rel="stylesheet" href="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="css/Home.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="css/theme-addon.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body id="content" style="display: none">
<div data-role="page" id="homePage">
<div data-role="header"><div class="ui-title">Home</div></div>
<div data-role="content" style="text-align: center">
<a data-role="button" id="login" class="fullWidth">Login</a>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/Home.js" type="text/javascript" charset="utf-8"></script>
<script src="js/messages.js"></script>
</body>
Then in Home.js:
// Worklight comes with the jQuery framework bundled inside. If you do not want to use it, please comment out the line below.
window.$ = window.jQuery = WLJQ;
function wlCommonInit(){
// Common initialization code goes here
}
$("#homePage").live('pagecreate', function(event,ui) {
$('#login').click(function(){
$.mobile.changePage($('#nextPage.html'));
});
});
When I tap on login button, it gives error $.mobile is undefined on this line:
$.mobile.changePage($('#nextPage.html'));
Is there anyone can give insight what's wrong with my code? I believe I do the right things? In addition, I use 5.0.2.407-developer-edition Worklight version.
Finally I solved this issue by:
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
var jq = jQuery.noConflict();
</script>
<script src="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
and later in js:
jq.mobile.changePage("the.html");
instead of
$.mobile.changePage("the.html");
Worklight is already bundled with jQuery, so you shouldn't add it a second time as you did at the bottom of the HTML. Also, you shouldn't place it at the bottom anyway, rather in the HEAD - remove that line.
Additionally, move the reference to jQuery Mobile to the HEAD a as well.
Using Worklight 5.0.6.1 (the latest version, which you seem not to use) and jQuery Mobile 1.3.1, I created a new project and application, and modified the HTML as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>testapp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/testapp.css">
<script src="jqueryMobile/jquery.mobile-1.3.1.min.css"></script>
<script src="jqueryMobile/jquery.mobile-1.3.1.min.js"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
<div data-role="page">
testapp
</div>
<script src="js/initOptions.js"></script>
<script src="js/testapp.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
I place the minified .css and .js files in a folder, and referenced them inside the HEAD element.
I added inside the BODY element.
Build All and Deploy
Preview via Worklight Console
Works...
I suggest you start small like the above (including using the latest versions of Worklight and jQuery Mobile), and build on that (working) foundation).
You can get the latest version of Worklight from the Eclipse Marketplace (in Eclipse, look at the Help menu >> Marketplace).
I have to make a reward functionality for my customers.In this if any customer share, follow link of website then I have to store their details.Question Is that how can we get either user shared something or not.Any help would be appreciated.
I am using following code.
twitter.com/share?text=Your+Email+Marketing&url=http://blog.abc.com/your-email-marketing.html
I have found a solution using jquery.twitterbutton.js
code :-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>
<script src="http://platform.twitter.com/widgets.js"></script>
<script src="jquery.twitterbutton.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#twitterbutton-example').twitterbutton({
user:'YourUsername',
title:'jQuery-Twitter-Button Plugin with callback functions',
onfollow:function(response){
$('.twitterbutton-uncontent:visible').hide('fade');
$('.twitterbutton-content').show('fade');
$.cookie('tw','followed');
},
ontweet:function(response){
alert("hello");
},
onretweet:function(response){
},
lang:'en'
});
});
</script>
</head>
<body>
<div id="twitterbutton-example"></div>
</body>
</html>
I have a layout page thusly
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/content/main_layout.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/menu.css")" rel="stylesheet" type="text/css" />
#RenderSection("JS", required:false)
#RenderSection("CSS", required:false)
</head>
<body>
#RenderBody()
</body>
</html>
And then a view like so
#{
ViewBag.Title = "Home";
Layout = "~/views/shared/_layout.cshtml";
}
#using RS.Common.HtmlHelpers;
#section JS
{
<script src="#Url.Content("~/scripts/fue.js")" type="text/javascript"></script>
<script src="#Url.Content("~/scripts/jquery.flexslider-min.js")" type="text/javascript"></script>
}
#section CSS
{
<link href="#Url.Content("~/content/hp.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/hp_form.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/flexslider.css")" rel="stylesheet" type="text/css" />
}
<h4>Test!</h4>
The page loads fine as I expect. However, I am getting 3 warnings:
Validation (XHTML 1.0 Transitional): Element 'link' cannot be nested within element 'link'
This error, one for each of the tags in the CSS section on the view.
It is only really an annoyance at this stage, but I wondered what the cause (and thus solution) for this error might be?
You have specified HTML5 DOCTYPE and yet trying to validate as XHTML 1.0 Transitional. I suppose that the final rendered HTML looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<link href="/content/main_layout.css" rel="stylesheet" type="text/css" />
<link href="/content/menu.css" rel="stylesheet" type="text/css" />
<script src="/scripts/fue.js" type="text/javascript"></script>
<script src="/scripts/jquery.flexslider-min.js" type="text/javascript"></script>
<link href="/content/hp.css" rel="stylesheet" type="text/css" />
<link href="/content/hp_form.css" rel="stylesheet" type="text/css" />
<link href="/content/flexslider.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h4>Test!</h4>
</body>
</html>
You might want to invert the order of the two RenderSection in your layout so that the links and scripts are grouped together. Or you might also consider moving the script declarations to the end of the page:
Like this:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/content/main_layout.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/menu.css")" rel="stylesheet" type="text/css" />
#RenderSection("CSS", required:false)
</head>
<body>
#RenderBody()
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
#RenderSection("JS", required:false)
</body>
</html>
I am having a strange issue with trying to style a link as a JQuery UI button. It's showing up as a button in Chrome and as a link in Firefox and IE8.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="script/jquery-1.4.2.js"></script>
<script type="text/javascript" src="script/jquery-ui-1.8.9.custom.min.js"></script>
<link rel="stylesheet" type="test/css" href="stylesheet/jquery-ui-1.8.9.custom.css">
<link rel="stylesheet" type="text/css" href="stylesheet/styles.css">
<script type="text/javascript">
$(document).ready(function(){
$("a").button();
});
</script>
<title>Introduction</title>
</head>
<body class="indexbody">
<div class="indexwrapper">
<div id="introduction">
<div class="btn">
<a href="test.html" >link</a>
</div>
</div>
</div>
</body>
</html>
It looks like there is an easy to miss typo in your CSS link element. The type attribute should be text/css, not test/css.
The x and s are just so close to each other.
<link rel="stylesheet" type="text/css"
href="stylesheet/jquery-ui-1.8.9.custom.css">
While Chrome adapted, the other browsers are more strict with their syntax. Chrome follows the Robustness Principle.
Finally, the order in which you load the CSS or JavaScript does not appear to matter. The link tag can come either before or after the script elements.
CSS comes first to JS inclusion, that should solve your problem.
<link rel="stylesheet" type="test/css" href="stylesheet/jquery-ui-1.8.9.custom.css">
<link rel="stylesheet" type="text/css" href="stylesheet/styles.css">
<script type="text/javascript" src="script/jquery-1.4.2.js"></script>
<script type="text/javascript" src="script/jquery-ui-1.8.9.custom.min.js"></script>