Just started playing with JQuery UI slider, haven't been able to display it on my page. Tried bunch of things bit to no avail. Heres my code, any suggestions would be much appreciated. Am using Django for referring to the javascript files,
<html>
<head>
<title>Search Results</title>
<script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.4/jquery-1.4.2.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.4/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.4/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.4/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}jquery-ui-1.8.4/ui/jquery.ui.slider.js"></script>
<LINK rel="stylesheet" href="{{ STATIC_URL }}jquery-ui-1.8.4/themes/base/jquery.ui.slider.css" type="text/css">
</head>
<body>
<meta charset="utf-8" >
<style>
#demo-frame > div.demo { padding: 10px !important; }
</style>
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
<div class="demo">
<div id="slider"></div>
</div><!-- End demo -->
<div class="demo-description">
<p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
</div><!-- End demo-description -->
</body>
The jQuery UI is quite easy to setup. Simply reference the appropriate CSS/JavaScript files in the document <head> tag.
Code in <head> tag:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Slider Initialization HTML:
<div id='mockSlider'></div>
<input type='text' id='currentValue' />
Slider Initialization jQuery:
$("#mockSlider").slider({
range: false,
min: 0,
max: 100,
slide: function(event, ui) {
doSomething(ui.value);
}
});
function doSomething(sliderValue) {
$('input[type="text"]').attr('value', sliderValue);
}
Slider Initialization CSS:
#mockSlider {
width: 80%;
margin-bottom: 15px;
}
#currentValue {
width: 3empx;
text-align: center;
}
Follow the link below to see an jsFiddle example. Specifically, take a look under the external resources menu, where you will see the 3 code references. Then, press F12 and use the debugging selection tool to see what is in the <head> of the rendered document.
Example Slider
Are you getting any javascript errors when loading the page ? If so what is it ?
Can you make sure your javascripts (jqyeru ui) are loaded properly ?
If you use firebug, you can see the errors in the console tab. FireBig is a firefox addon which makes web development a lot easier
www.getfirebug.com
Sometimes jquery ui widgets not showing may be due to missing jquery-ui-scope div. All jquery ui styles are defined within the scope of div with jquery-ui-scope class.
Related
I'm trying to use jQuery to change the value of the div 'dog' from blue (CSS) to red (javascript css code), but the javascript seems to not be functioning. CSS, JavaScript and jQuery are all linked properly (have checked).
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="dog"></div>
</body>
</html>
CSS CODE:
#dog {
background-color: blue;
height: 200px;
width: 200px;
}
JAVASCRIPT (jQuery) CODE:
$("#dog").css("background-color", "red");
but the javascript seems to not be functioning. CSS, JavaScript and
jQuery are all linked properly (have checked).
Ensure that you encapsulate the javascript within a $( document ).ready(). This should solve the problem if the script is loaded in the head element, where the HTML document has not been loaded fully yet.
However, an alternative solution is to use the script tag within the body element.
Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery
.min.js"></script>
<script type="text/javascript" src="jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<style>
#dog {
background-color: blue;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div id="dog"></div>
<script>
$("#dog").css("background-color", "red");
</script>
</body>
</html>
do this in your js file -
window.onload = function () {
$("#dog").css("background-color", "red");
}
The reason is this -
window.onload - it is called after all DOM, JS files, Images, Iframes, Extensions and others completely loaded. This is equal to $(window).load(function() {});
As you have a seperate js file, and you want the style to be changed when the page is loaded, so you have to do this.
For more understanding, you can refer this - Difference between onload and window.onload
With this code I want to show a jQuery UI dialog when I click on a button. However, the text of the dialog is shown for a brief time when the page loads. What is the right way to implement this?
My html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
.. html code ..
<button id="helpbutton" title="">Help</button>
<div id="helpdialog" title="Help dialog">
<p>Text in the dialog will be visible for a short time when the page loads</p>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script type="text/javascript" src="myJsFile.js"></script>
</body>
</html>
as you can see, I call my external scripts just before the end of the for performance reasons.
myJsFile.js:
//Fire up the help dialog when the help button is pressed
jQuery(function() {
jQuery( "#helpdialog" ).dialog({
autoOpen: false
});
jQuery( "#helpbutton" ).click(function() {
jQuery( "#helpdialog" ).dialog( "open" );
});
});
Solution (thanks to krzmig): Use this CSS code in the CSS file or in the section
#helpdialog {
display: none;
}
Did you load UI jQuery JS and CSS? Like in this example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
source: https://jqueryui.com/dialog/
edit:
For not showing dialog box when site is loading put to your CSS file code:
#helpdialog {
display: none;
}
or add to <head> section if you don't have external CSS.
<style>
#helpdialog {
display: none;
}
</style>
First include jquery as well.
Second place your scripts before your dialog in html so that it loads and hides the dialog before it could show up itself on your page. Here's the code (keep your myJsFile.js intact):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="helpbutton" title="">Help</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="myJsFile.js"></script>
<div id="helpdialog" title="Help dialog">
<p>Text in the dialog will NOT! be visible for a short time when the page loads</p>
</div>
</body>
</html>
You also need to include jquery main library. The required includes are jquery library, jquery ui js, and jquery ui css.
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script type="text/javascript" src="myJsFile.js"></script
I've been following the lessons on Codecademy and I've finished the HTML/CSS and about half of the jQuery tutorials.
I figured I should try to test my knowledge by writing code and opening it in my web browser, which is Chrome (Version 34.0.1847.131 m).
I have the HTML and CSS working perfectly fine, but I can't seem to get the jQuery (script.js is the filename) code to work properly. Here is my code for all three files in my test project:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div><br/><strong>Click Me!</strong></div>
</body>
</html>
stylesheet.css
div
{
height: 60px;
width: 100px;
border-radius: 5px;
background-color: #69D2E7;
text-align: center;
color: #FFFFFF;
font-family: Verdana, Arial, Sans-Serif;
opacity: 0.5;
}
script.js
$(document).ready(function()
{
$('div').hide();
});
This code basically should instantly hide a div box I am creating. However, whenever I open the index.html page in chrome, it just shows the box in the upper left corner (thus, my $('div').hide(); isn't being run.
My files are all in the same location:
I'm writing my code in the Sublime Text 2 IDE.
I've seen multiple questions similar to this on SO but everyone's problem was that they have didn't wrap their js code in the $(document).ready() function.
Can someone tell me what I'm doing wrong?
You have not loaded jQuery.
Add this line to your <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Edit: If you are using this offline, you need to use http:// as it will default to file://
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Hosted by google. Source
try to include the jquery file before your final script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
...your script....
You need to include jQuery before you include your javascript file, like so:
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type='text/javascript' src='script.js'></script>
</head>
You have to attach a jquery library with your page in order to run it.
just add
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
in head section of your html
You need to include jquery library in your html file like this :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
I'm using Jquery Wookmark as an alternative to Masonry.js but I can't get it to work at all. What am I doing wrong here?
<head>
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<?php include("include/head.php"); ?> // CONTAINS JQUERY 1.9.1
<link rel="stylesheet" type="text/css" href="css/posts.css" />
<link rel="stylesheet" type="text/css" href="css/searches.css" />
<script type="text/javascript" src="scripts/jquery.wookmark.js"></script>
</head>
<div id="postsHolder">
<div class="post singlePost">
<div class="postInner">
<div class="postTop">
<div class="postTopRow"><strong>Title</strong></div>
</div>
<div class="postContentHolder postNoteText">
Post Information
</div>
<div class="postOptions"></div>
</div>
</div>
x20 (or however many php script specifies)
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#postsHolder div').wookmark();
});
</script>
This is how it appears to tell you to do it on github but I can't get them to block up beneath each other without a huge gap. What do I need to change?
first include jQuery file
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
then add
<script type="text/javascript" src="scripts/jquery.wookmark.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#postsHolder div').wookmark();
});
Include Jquery and add css inside the head tag
<html>
<style>
.singlePost{
float: left;
width: 210px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.wookmark.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#postsHolder div').wookmark();
});
</script>
</html>
As jQuery is already included (as mentioned in comments), all you need to do is wrap your custom script in a $( document ).ready() function:
<script type="text/javascript">
$(document).ready(function() {
$('#postsHolder div').wookmark();
});
</script>
A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
Your CSS declaration at the top will do nothing if it's just plain text. CSS must be placed within the document's <head> and must be wrapped within the style element:
<head>
<style type="text/css">
.singlePost{
float: left;
width: 210px;
}
</style>
</head>
Your script is in head. And when it is executed maybe postsHolder div not exists. Replace it with function
<script>
$(function(){
$('#postsHolder div').wookmark();
}
</script>
EDIT: precise selector and add container. This work for me, and without float:left.
See container property
$(function() {
// Call the layout function.
$('#postsHolder .post').wookmark({
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('body'), // the width of this element is used to calculate the number of columns, defaults to "window". For example $('myContentGrid'). Container should also have the CSS property "position: relative".
offset: 2, // Optional, the distance between grid items
itemWidth: 210 // Optional, the width of a grid item
});
});
I want to do .jscrollpane scrollbars but they are not showing up, and firebug is not picking up any errors. I'm doing cufon font replacement, a prettyPhoto lightbox, and a simple portfolio filter that sorts ul's. I've looked into jQuery noConflict mode but can't figure out if this is the issue, and if it were, how to use it in my case.
Here's how I'm calling in scripts in the header:
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" href="prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script src="scripts/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/cufon-yui.js" type="text/javascript"></script>
<script src="scripts/trajan.font.js" type="text/javascript"></script>
<script type='text/javascript' src="scripts/jscrollpane-1.2.1.js"></script>
<script type='text/javascript' src="scripts/mousewheel.js"></script>
<script type='text/javascript' src="scripts/mwheelintent.js"></script>
And then I use $(document).ready(function(){ to run the prettyPhoto, the portfolio filter, and the jscrollpane scripts before the end of the head. The PrettyPhoto and portfolioFilter work, but the jscrollpane doesn't render any changes, but Firebug doesn't detect any errors either.
The jscrollpane is being applied (using class="scroll-pane") to a div id called #box with these attributes:
#box {
width:auto;
height:600px!important;
position:absolute;
margin-top:10px;
I've included the jscrollpane CSS directly from the source, and have the selector class styled like this:
.scroll-pane {
overflow-y:auto!important;
position:relative;
display:block;
}
The issue can be seen live at http:ricardojattan.com/portfolio.html
You need to update to the latest version of jScrollPane.