I am implementing a JQuery autocomplete on a HTML page. Unfortunately, the drop down layout is not a clean box with entries (see http://jqueryui.com/autocomplete/), but rather a ul-like list of links:
I am using:
<script src='http://code.jquery.com/jquery-2.0.0.min.js'
type="text/javascript"></script>
<script src='http://code.jquery.com/ui/1.10.0/jquery-ui.min.js'
type="text/javascript"></script>
What am I doing wrong?
You are missing the jquery ui CSS file that gives the style to your page.
Add the following line to your HTML page tag:
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
Related
I want to create a multi-selection dropdown using the Semantic UI dropdown module.
From the Semantic documentation, it says that I need to add the following code.
<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>
As I am also using bootstrap in my project, I am facing the problem that the semantic.min.css is messing up the bootstrap layout. To avoid this, I tried using just the dropdown component.
<link rel="stylesheet" type="text/css" href="semantic/dist/components/dropdown.min.css">
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>
This did fix the layout issue, but now there is no dropdown when I click on the dropdown box.
Any suggestions for what I can do?
You must to start the dropdown
$('.ui.dropdown')
.dropdown()
;
I am using servlets. Now I have this in the head
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
</script>
<script>
$(document).ready(function() {
$('#navigation').load('Navigation');
});
</script>
<script src="script.js"></script>
I have a navigation where I will put the result of the servlet in. It seems like that the CSS just counts for this HTML file and not for the HTML that is given through the servlet. Thats a problem, because I have a dropdown menu and that doesnt work if my CSS isn't considered. But my servlet does not have the head tag, of course. How can I make the CSS work for the HTML code of my servlet?
I am a complete newbie when it comes to jQuery, but I'm trying to run a simple accordion() code on my HTML page.
This is the link I've used, I included the compressed production jQuery 2.1.0
<head>
<link rel="stylesheet" type="text/css" href="stylesheetkomik2.css">
<script src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="scriptkomik2.js"></script>
<title>Komiktoneel</title>
</head>
The piece of code I'm trying to accordion() is a series of tags with tags in them, which contain paragraphs, like this:
<div id="content">
<h3>This is the first heading</h3>
<div><p>First paragraph</p></div>
<h3>This is the second heading</h3>
<div><p>Second paragraph</p></div>
</div>
scriptkomik2.js contains nothing other than the following code:
$(document).ready(function(){
$("#content").accordion();
})
Is there something wrong in my code or is the linking wrong?
Thank you
You need to add jQuery UI
Accordion is a widget from jQuery UI and this library works on top of jQuery. So you need to add both js to your project.
<script src="js/jquery.js"></script>
<script src="js/jquery.ui.js"></script>
jQueryUI is missing. You have to add jQueryUI as well for accordian widget.
<head>
<link rel="stylesheet" type="text/css" href="stylesheetkomik2.css">
<script src="jquery-2.1.0.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="scriptkomik2.js"></script>
<title>Komiktoneel</title>
</head>
.accordion isn't a valid jQuery method. I think you're looking for jquery UI: https://jqueryui.com/accordion/
Try implementing that and see what happens.
Add the following script tag. Accordion is part of jQuery UI
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
I am trying to merge ACCORDION menu into my existing TABS menu. Well, I have a working example of Accordion menu withing Tabs, taken from here.
Honestly speaking, I failed to fully understand how it works; whereas html structure is clear, JS is not. I am using Dreamweaver, which can generate tabs and accordion from scratch, using jQuery UI library. For tabs DW generates:
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css">
<script src="jQueryAssets/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-ui-1.9.2.tabs.custom.min.js" type="text/javascript"></script>
and for ACCORDION, DW generates a similar set:
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.accordion.min.css" rel="stylesheet" type="text/css">
<script src="jQueryAssets/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-ui-1.9.2.accordion.custom.min.js" type="text/javascript"></script>
The question is: how to merge ACCORDION JS into my existing TABS JS. Is there a single JS file covering the entire functionality.
Pardon if this question sounds bizarre and unprofessional.
Goto https://jqueryui.com/download/
Select which widgets you want to use and you will get 1 custom file having these two widgets.
I am trying Jquery Autocomplete element.In code I can see following import and references
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.6.2.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
I copied all files mentioned above in my folder and changed path to
<link rel="stylesheet" href="jquery.ui.all.css">
<script src="jquery-1.6.2.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.button.js"></script>
<script src="jquery.ui.position.js"></script>
<script src="jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="demos.css">
But it looks like some css is missing
How can I find the dependent JS and CSS (Without reading complete JS and CSS source) ?
Download the module from http://jqueryui.com/download ticking the appropriate boxes, this will deliver a single minified js file (and the required jquery library) as well as a directory containing all the (theme specific) CSS you need.
Inspect the element to see what styles/classes have been applied to the element which looks wrong.
Do the same thing with the working demo.
You will see what you are missing.