This is my entire head:
<head>
<title>Experimentation</title>
<link type="text/css" rel="stylesheet" href="stylingExp.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
</head>
I've been wrestling with making a JQuery-ui.menu for far too long! When I attempt to do it like this:
<script>
$(document).ready(function() {
$( "#listtest" ).menu();
});
</script>
<ul id="listtest">
<li>Item #1</li>
<li>
Item #2
<ul>
<li>Item #2.2</li>
</ul>
</li>
<li>Item #3</li>
</ul>
I get this:
Uncaught TypeError: Object [object Object] has no method 'menu'. Can someone tell me why?
Are you sure that the jQuery and jQuery-ui libraries are being loaded correctly?
you could check this concern with google chromes dev tools in the network tab.
and i suggest you move your JS loading part to the end of the page, not in the head section
Related
Getting my feet wet with Angular.Dart. Reviewing these Exercises on GitHub
In chapter 2, when running index.html I noticed the classic flicker before mustaches replaced with data.
Applied the usual 'data-ng-cloak="" ' only to be shown a blank screen.
Removed 'data-' and all is well.
Is this a Dartanium issue or is data-?? no longer applicable for Angular.Dart?
<!DOCTYPE html>
<html ng-app>
<head>
<title>Chapter Two - A Simple Recipe Book</title>
<link rel="stylesheet" href="../web/style.css">
</head>
<body>
<div recipe-book ng-cloak=""> <!-- blank screen if using 'data-ng-cloak' -->
<h3>Recipe List - {{ctrl.CtrlName}}</h3>
<ul>
<li class="pointer"
ng-repeat="recipe in ctrl.recipes"
ng-click="ctrl.selectRecipe(recipe)">
{{recipe.name}}
</li>
</ul>
<h3>Recipe Details - {{ctrl.CtrlName}}</h3>
<div><strong>Name: </strong>{{ctrl.selectedRecipe.name}}</div>
<div><strong>Category: </strong>{{ctrl.selectedRecipe.category}}</div>
<div><strong>Rating: </strong>{{ctrl.selectedRecipe.rating}}</div>
<div>
<ul>
<li ng-repeat="ingredient in ctrl.selectedRecipe.ingredients">
{{ingredient}}
</li>
</ul>
</div>
<div><strong>Directions: </strong>{{ctrl.selectedRecipe.directions}}</div>
</div>
<script src="packages/shadow_dom/shadow_dom.min.js"></script>
<script type="application/dart" src="../web/main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
As far as I know the 'data-` prefix is not yet supported but work in progress.
here you find the discussion https://github.com/angular/angular.dart/issues/519
You need to add the CSS that supports ng-cloak
see also angular.dart seems to be slow
Im using jQueryUI to create dynamic tabs.
Everything was working properly until the point where I added links(relative paths) to navigate between languages. Here's my code:
<ul>
<li class="mitem">Home</li>
<li class="mitem">The Rooms </li>
<li class="mitem">Contact - Location</li>
<li class="mitem">Gallery</li>
<li id="languages">
<img src="../images/gr.png" alt="Ελληνικά" />
<img src="../images/gb2.gif" alt="English" />
</li>
</ul>
So, i'm currently on directory /root/en/index.html. When i click the first link
<img src="../images/gr.png" alt="Ελληνικά" />
it doesn't do anything. Works perfectly though when opening on new tab...
This does not happen from /root/index.html to /root/en/index.html).
Note: When i remove the UI it works but obviously that's not the solution I'm looking for...
UI code inside head tag
<!-- JQuery UI -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript">
<!--$(function() {-->
$(document).ready(function () {
$( "#menu" ).tabs();
});
</script>
Any syggestions?
Thanks
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
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>
Hello I understand from reading advice on this site that scripts should go at the bottom of the _layout page. My problem is that I am not sure exactly where the 'bottom' is. Some people have said it is just before the tag but that does not work for me. I have tried putting the script in many places but nowhere seems to work. Could someone please tell me what I am doing wrong.
This is my About page
#{
ViewBag.Title = "About Us";
}
<h2>About</h2>
<p>
Put content here.
</p>
<script type="text/javascript">
$(function () {
alert("Hello World");
});
</script>
This is my _Layout page
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#* jQuery works if this line is here but not if it is at the bottom
<script src="#Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
*#
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>
My MVC Application</h1>
</div>
<div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>
<div id="menucontainer">
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
</ul>
</div>
</div>
<div id="main">
#RenderBody()
</div>
<div id="footer">
</div>
</div>
#* jQery does not work if the script is here! *#
<script src="#Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
</body>
</html>
Some Alternatives
It is absolutely possible to have your jquery at the end of your body tag. Ideally the only js you have in your head is modernizr, html5shiv or the like.
Option 1
Put a #RenderSection("scripts", required: false) after the jQuery <script... element as the last line inside your body element. Then in any of your views you would use
#section scripts
{
<script type="text/javascript">
$(function () {
// page specific js code here
});
</script>
}
Option 2
Between your jQuery script element and the closing of your body element have a script element pointing to the relevant js file for the action/view in question:
<script
src="#Url.Content("~/Scripts/" + ViewContext.RouteData.GetRequiredString("action") + ".js")"
type="text/javascript">
</script>
Jquery file has to be included before first reference to jquery is found on the document. So, to solve this problem, i put jquery file in head section and all other script that are not used in views but in other script files are included before closing body tag