Why doesn't this work?
Minimal example taken from https://jqueryui.com/resizable/
// Links to jsfiddle must be accompanied by code
https://jsfiddle.net/e0sdfuLb/
Your fiddle is not working because you haven't imported also the jQuery-UI CSS:
https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css
So here is the jsfiddle updated (and working): https://jsfiddle.net/beaver71/kbu61s3a/5/
$(document).ready( function() {
$( "#resizable" ).resizable();
});
#resizable {
width: 200px;
height: 200px;
padding: 0.5em;
background: #ccc;
}
#resizable h3 { text-align: center; margin: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="resizable" class="ui-widget-content" >
<h3 class="ui-widget-header">Resizable</h3>
</div>
Related
Im using jqueryUI for creating quiz type questions.
When I drag and drop correct answer(first one) to droppable area, it should turn green.
Rest of options, it should turn red.
Now it is not turning our properly.. can anyone pls help me on this.?
My work:
https://codepen.io/vimalraj86/pen/poJyOQr
This is the code snippet i have used.
$( function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
}
});
} );
$( function() {
$( "#draggable1" ).draggable();
$( "#draggable2" ).draggable();
$( "#draggable3" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-red" )
}
});
} );
You need a condition to help decide. You can use an if statement or some other way to determine which class should be added.
$(function() {
$("div[id^='draggable']").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
if (ui.draggable.text().trim() == "C") {
$(this).addClass("ui-state-green");
} else {
$(this).addClass("ui-state-red")
}
}
});
});
#draggable,
#draggable1,
#draggable2,
#draggable3 {
width: 100px;
height: 100px;
padding: 0.5em;
margin: 10px 10px 10px 0;
border: 1px solid #ccc;
background: #fff;
float: left;
}
hr {
float: left;
width: 100%;
background: #ccc;
}
#droppable {
width: 400px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
border: 1px solid #ccc;
background: #fff;
}
#droppable.ui-state-green {
background: green;
}
#droppable.ui-state-red {
background: #ff0000;
}
<link rel="stylesheet" href="//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>
<div id="droppable" class="ui-widget-header"></div>
<hr/>
<div id="draggable" class="ui-widget-content">
<p>A</p>
</div>
<div id="draggable1" class="ui-widget-content">
<p>B</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>C</p>
</div>
<div id="draggable3" class="ui-widget-content">
<p>D</p>
</div>
<button id="reset">reset</button>
I've checked the code over meticulously but I cant find anything wrong with it.
I modeled it after the menu here but that's not really working out for me. Basically, all that comes up is ur run of the mill ul.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
<script type ="text/javascript">
<!-- Dropdown menu -->
<script>
$( function() {
$( "#dropMenu" ).menu();
} );
</script>
<style>
.ui-menu { width: 150px; }
body{
background-image: url("background.jpg");
background-repeat: no-repeat;
background-size: cover;
}
h1{
font-family:"Lucida Calligraphy","Lucida Fax", Arial;
color: Beige;
text-align:center;
}
#footer{
position: absolute;
bottom: 0;
background-color: rgba(20,90,50,.8);
margin-bottom: 0px;
padding-bottom: 0px;
border-radius:10%;
text-align:center;
color:beige;
margin-bottom: 0px;
}
#square{
height:200px;
width: 350px;
background-color:rgba(20, 90,50);
}
#wrapper{
background-color: rgba(20, 90,50, .5);
margin: auto;
border-radius:6%;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Serenity Landscaping <br /> and Property Management</h1>
<!-- <div id="square"></div> -->
<ul id="menu">
<li><div>Menu</div>
<ul>
<li><div>Home</div></li>
<li><div>Side Biz</div></li>
<li><div>Portfolio</div></li>
<li><div>Contact Us</div></li>
</ul>
</li>
</ul>
<div id="footer"><p>SLPM is owner operated and is dedicated to providing the highest quality service to all customers.
<br/>Services in the landscape and property maintenance field</p></div>
</div>
<script type ="text/javascript">
var windowWidth=$(window).width();
var wrapperWidth=(windowWidth/2);
var windowHeight=$(window).height();
var wrapperHeight=windowHeight;
$("#wrapper").height(wrapperHeight+"px");
$("#wrapper").width(wrapperWidth+"px");
<!-- footer width resizing -->
var footerWidth;
footerWidth = $("#footer").css("width", wrapperWidth);
<!-- footer width resizing -->
<!--alert(wrapperWidth);-->
<!--alert(windowWidth);-->
</script>
</body>
</html>
The first issue I have seen is you are using wrong id for initializing your menu.
I have created a fiddle for your code and did some minor change and it is working fine.
There were only silly mistakes.
Here is working fiddle.
Working Fiffle
want to have parallax effect for that I am using plugin.currently I am using enllax.js for parallax effect as plugin but not getting any effect of parallax.Can any one tell me what's wrong in code.
Thanks in advance.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My page</title>
<title>jQuery Parallax Plugin Demo</title>
<link rel="stylesheet" href="s.css" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-2.1.4.js"></script>
<script type="text/javascript" src="scripts/jquery.enllax.js"></script>
<script type="text/javascript">
(function($){
//Plugin activation
$(window).enllax();
$('#a').enllax();
$('#first').enllax({
type: 'background', // 'foreground'
ratio: 0.5,
direction: 'vertical' // 'horizontal'
});
$('#second').enllax({
type: 'background', // 'foreground'
ratio: 1.0,
direction: 'vertical' // 'horizontal'
});
$('#third').enllax({
type: 'background', // 'foreground'
ratio: 1.5,
direction: 'vertical' // 'horizontal'
});
$('#fourth').enllax({
type: 'background', // 'foreground'
ratio: 2.0,
direction: 'vertical' // 'horizontal'
});
})(jQuery);
</script>
</head>
<body>
<div id="a">
<div id="first" class="dem1" data-enllax-ratio=".5" data-enllax-direction="horizontal" style="z-index:99">
This is my first div to display image.
<img src="images/r1.jpg" data-enllax-ratio=".5" data-enllax-type="foreground"/>
</div>
<div id="second" class="dem1" data-enllax-ratio="1.0" data-enllax-direction="horizontal" style="z-index:99" data-enllax-type="foreground">
This is my second div to display image.
<img src="images/r2.jpg" data-enllax-ratio="1.0" data-enllax-type="foreground"/>
</div>
<div id="third" class="dem1" data-enllax-ratio="1.5" data-enllax-direction="horizontal" style="z-index:99" data-enllax-type="foreground">
This is my third div to display image.
<img src="images/rc.jpg" data-enllax-ratio="1.5" data-enllax-type="foreground"/>
</div>
<div id="fourth" class="dem1" data-enllax-ratio="2.0" data-enllax-direction="horizontal" style="z-index:99" data-enllax-type="foreground">
<img src="images/rr.jpg" data-enllax-ratio="2.0" data-enllax-type="foreground"/>
This is my fourth div to display image.
</div>
</div>
</body>
</html>
body {
font-family: 'Open Sans', sans-serif;
color: #444;
line-height: 1.4;
overflow-x: hidden;
/* background: url(http://subtlepatterns.com/patterns/geometry2.png);*/
}
.text-center {
text-align: center;
}
}
.dem1 {
height: 400px;
background-size: cover;
box-sizing: border-box;
padding: 100px;
}
}.box {
width: 90%;
margin: 0 auto;
background: #efefef;
padding: 100px;
box-sizing: border-box;
border: 1px solid #ddd;
box-shadow: 0 0 1px #777;
margin-bottom: 15px;
}.b2 {
background: #dedede;
}.dl {
margin-top: 200px;
padding: 100px;
}
.fork-mmk {
position: fixed;
top: 0px;
right: 0px;
z-index: 99999;
}
If you use the simple activation, you don't need anything else.
So, I'd recommend you only use:
<script type="text/javascript">
(function($){
$(window).enllax();
});
</script>
And via data-attribute you config your enllax element. You can see his Github project https://github.com/mmkjony/enllax.js
Working straight from the jqueryUI example, using foundation4 (only including jquery in the head). Has any one else had this problem? My lists are not drag-drop-sortable.
in the head
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable1, #sortable2, #sortable3 { margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
#sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script>
$(function() {
$( "ul" ).sortable({
connectWith: "ul"
dropOnEmpty: false
});
$( "#sortable1, #sortable2, #sortable3" ).disableSelection();
});
</script>
in the body (using django...sorry for the funky template tags)
<div class="large-4 columns">
<ul id="sortable1">
<li>Nathan</li>
<li>Bob</li>
<li>Joe</li>
</ul>
</div>
<div class="large-4 columns">
<ul id="sortable2">
</ul>
</div>
<div class="large-4 columns">
<ul id="sortable3">
</ul>
</div>
<!-- <script src="{% static "js/vendor/jquery.js" %}"></script> -->
<script src="{% static "js/foundation.min.js" %}"></script>
<script>
$(document).foundation();
</script>
The order I included everything was wrong.
The body should look like this...
<script src="{% static "js/vendor/jquery.js" %}"></script>
<script src="{% static "js/foundation.min.js" %}"></script>
<script>
$(document).foundation();
</script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$( "ul" ).sortable({
connectWith: "ul"
dropOnEmpty: false
});
$( "#sortable1, #sortable2, #sortable3" ).disableSelection();
</script>
I'm using the default for jQueryUI, but it looks like the font is a little big.
I know that one solution would be "WELL! JUST MAKE IT SMALLER!", but I'm just wondering if I've messed something up or I don't have a value set correctly before I charge in and start changing things.
<!DOCTYPE HTML>
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript">
google.load("jqueryui", "1");
function OnLoadCallbackUI(){
$('#tabs').tabs();
}
google.setOnLoadCallback(OnLoadCallbackUI);
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>tab1</li>
<li>tab2</li>
</ul>
<div id="tabs-1">
tabs-1
</div>
<div id="tabs-2">
tabs-2
</div>
</div>
</body>
</html>
Don't modify the jQuery CSS file. Instead, use your own CSS to override it as needed.
The demo page includes:
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}