I'm using the latest jQueryUI Menu code, but when I tab into the menu, and select a link by hitting the Enter key, the li containing a suitable a href does not open. The only way to get a link to open is to click with the mouse, but I want the Enter key to function for accessibility. Here's the code I'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Menu - Navigation Menu</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#menu" ).menu({
select: function( event, ui ) {
var link = ui.item.children( "a:first" );
if ( link.attr( "target" ) || event.metaKey || event.shiftKey || event.ctrlKey ) {
return;
}
location.href = link.attr( "href" );
}
});
});
</script>
</head>
<body>
<ul id="menu">
<li>Yahoo</li>
<li>
Bing
<ul>
<li>Google
<ul>
<li>Lycos</li>
</ul>
</li>
<li>Saarland</li>
<li>Salzburg</li>
</ul>
</li>
</ul>
</body>
</html>
Here is a live version: http://kavelookout.com/menuTest_jQueryUI_Menu/
The 'Search Engine' texts in the list have hyperlinks.
Perhaps I need to edit the jquery-ui.js file?
I have searched high and low, but cannot find a suitable answer.
Many thanks for any kind help,
R
Related
It seems for some reason the items option here doesn't work. I'm sure I'm doing something wrong but can't get the error. Can you help me?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test jquery</title>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom.min.css" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3.custom.min.js"></script>
<script>
$(document).ready(function() {
$(".div1").tooltip({ items: 'img[alt]'});
});
</script>
</head>
<body>
<div class="div1">
<img src="home-slider-next-button.png" width="26" height="24" alt="test2">
</div>
</body>
</html>
Ok I took a closer look at the tooltip code and see that it seems it doesn't really take the alt attribute for content. It only uses items content as a selector. So my solution, for now, is to use the content option like this:
$(document).ready(function() {
$(".div1").tooltip({ items: 'img[alt]', content:function(){ return $(this).attr('alt'); }});
});
hope it helps others with the same problem.
Hello friends i m using angularjs with jquery mobile in my app and done routing with mobileangular adapter javascript that will handle routing (jquery-mobile-angular-adapter-standalone.js).
i have used angularjs for data binding , underscorejs for data processing and routing for my dynamic template. My app work well with routing in forward direction but when i use
back button which to not carry back to my previous page. my url shown in address bar is the same that of previous page but page do not display with previous data
i m placing all my code below
index.html
<!doctype html>
<html lang="en" ng-app="work">
<head>
<meta charset="utf-8">
s
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css"/>
<script src="js/components/jquery-mobile-angular-adapter-standalone.js" type="text/javascript"></script>
<script src="js/components/angular-resource.min.js" type="text/javascript"></script>
<script src="js/components/underscore-min.js" type="text/javascript"></script>
<script src="js/app/controllers.js"></script>
<script src="js/app/services.js"></script>
<script src="js/app/app.js"></script>
</head>
<body>
<div data-role="page">
</div>
</body>
</html>
html use to display da
showMenuView.html
<div id="menu-list" data-role="page" ng-controller="showMenuController">
<div data-role="header">
Back
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li ng-repeat="menuItem in mainMenuItems">
{{menuItem.name}}
</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<p>Total {{mainMenuItems.length}} menu item</p>
</div>
</div>
Controller.js
'use strict';
function showMenuController($scope, $location, Data, $routeParams) {
Data.query(function(data) {
$scope.foo = data;
$scope.mainMenuItems = _.where($scope.foo.menuItems, {parent:$routeParams.parent});
});
$scope.selectMenuItem = function (id) {
$scope.mainMenuItems = _.where($scope.foo.menuItems, {parent:id});
}
}
service.js
angular.module('dataservices', ['ngResource']).
factory('Data', function($resource){
return $resource('data/data.json', {}, {
query: {method:'GET',isArray:false}
});
});
app.js
angular.module('work', ['dataservices'])
.config(['$locationProvider','$routeProvider', function($locationProvider,$routeProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$routeProvider
//.when('/showMenu', {parent:'none',templateUrl: 'showMenuView.html', jqmOptions: { transition: 'slide'}})
.when('/showMenu/:parent', {templateUrl: 'showMenuView.html', jqmOptions: { transition: 'slide'}})
.otherwise({redirectTo: '/showMenu/none'})
;
}]);
pls help me ,thanks in advance
I have not worked on it myself, but while exploring on whether JQM and angular can work together I stumbled upon this page.
http://simonguest.com/2013/04/08/jquery-mobile-and-angularjs-working-together/
he makes a good point (i.e. both angular and JQM uses and manipulates the url) that appears to be valid in your case also. he suggests to let JQM do this. I think you can also use different special character to process url i.e. angular uses ! and JQM uses # or something like that.
I'm trying to use knockout and jquerymobile and can't get it to work.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="/nw/scripts/jquery-1.8.2.js"></script>
<script src="/nw/scripts/knockout-2.1.0.debug.js"></script>
<script src="/nw/scripts/jquery.mobile-1.2.0.js"></script>
<link rel="stylesheet" href="/nw/scripts/jquery.mobile-1.2.0.css" />
<title>title</title>
</head>
<body>
<div>
<script type="text/javascript">
function AppViewModel() {
this.test = [{ "name": "noam", "age": "36" }, { "name": "yael", "age": "34"}];
}
$(document).ready(function () {
ko.applyBindings(AppViewModel());
});
</script>
<ul data-bind="foreach: test" id="myList">
<li>test <span data-bind="text: name"></span></li>
</ul>
</div>
</body>
</html>
When I run this I get the following error:
Uncaught Error: NOT_FOUND_ERR: DOM Exception 8
When I comment out the jquerymobile scripts, it works.
Any help would be appriciated
The immediate cause of the problem is the placement of the <script> block where ko.applyBindings is called. The example works as-is if you move the <script> block into the <head> tag, as follows: (also note use of pageinit event and data-role="page" attribute)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.debug.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<title>title</title>
<script type="text/javascript">
function AppViewModel() {
this.test = [{ "name": "noam", "age": "36" }, { "name": "yael", "age": "34"}];
}
$(document).bind('pageinit', function () {
ko.applyBindings(AppViewModel());
});
</script>
</head>
<body>
<div data-role="page">
<ul data-bind="foreach: test" id="myList">
<li>test <span data-bind="text: name"></span></li>
</ul>
</div>
</body>
</html>
Keep in mind that both jquery mobile and knockout alter the DOM, and the DOM error is symptomatic of a clash between them, where one library has moved a DOM element that the other one has subsequently tried to address.
To get JQM and knockout to work together (which they do), you need to be quite familiar with when/how JQM makes its changes to the DOM. This page might be a good starting point.
I have searched high and low but I cannot get this simple thing to work.
All I want to do is have a dialogue popup open when the homepage loads.
Can someone please point me in the right direction?
Check this out Dialog and this
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#dialog").dialog();
});
</script>
</head>
<body style="font-size:62.5%;">
<!--<div id="dialog" title="Dialog Title">Test Dialog Box</div>-->
<div id="dialog" title="Google">
<IFRAME id="frame" style="border: 0px;" SRC="www.google.com" width="100%" height = "100%" >
</div>
</body>
Different solution
try this..if this ok..
Different solution
Try the Modal Dialog..Any page can be presented as a modal dialog by adding the data-rel="dialog" attribute to the page anchor link.
$(document).delegate('div[data-role=dialog]', 'pageinit', function() {})
Couldn't find anyone having the same issue (search results usually return ridiculous coding errors with jquery and css, but that's not the case here.
Problem:
I have with classes 'active', and 'inactive'.
On inactive - the list item will have a background image 1
on active - hte list item will have background image 2
<ul>
<li class="active"><a></a></li>
<li class="inactive"><a></a></li>
</ul>
On click, it's supposed to switch them right... example code:
$('ul li.inactive>a').live('click', function (e) {
e.preventDefault();
theLI = $(this).closest("li");
// active / deactivate buttons
theLI.removeClass('inactive').addClass('active');
});
With JQUERY MOBILE this code doesn't work, I've tried adding the class first, then removing... also tried toggleclass for the active.
If I removing jquery mobile from being included, it works perfectly.
Add jquery mobile library back in, doesn't work.
Not a css problem.
Upon inspection with firebug, it seems removing classes works find, it's when it tries to add it?
This works:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<style type="text/css">
.inactive {color:red;}
.active {color:blue;}
</style>
<script>
$('ul li.inactive>a').live('click', function (e) {
e.preventDefault();
theLI = $(this).closest("li");
// active / deactivate buttons
theLI.removeClass('inactive').addClass('active');
});
$('ul li.active>a').live('click', function (e) {
e.preventDefault();
theLI = $(this).closest("li");
// active / deactivate buttons
theLI.removeClass('active').addClass('inactive');
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>index.html</h1>
</div><!-- /header -->
<div data-role="content">
<ul>
<li class="active"><a>One</a></li>
<li class="inactive"><a>Two</a></li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>