I am trying to use SapUI5 and JQuery $("#draggable").draggable(); function to drag some div around my html page.
problem is - they interfere with each other - SAPUI5 library also have a varibale named draggable (I want to use JQuery draggable() function).
as a result I get Uncaught TypeError: $(...).draggable is not a function(…)
how to solve it? my code is below.. It simulates the problem. notice that once I remove the script tag of SAPUI5 it is working fine and I can drag the div..
Thanks in advance!
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Draggable - Default functionality</title>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; border:1px; }
</style>
<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 id='sap-ui-bootstrap'
type='text/javascript'
src='https://sapui5.hana.ondemand.com/1.38.10/resources/sap-ui-core.js'
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.m,sap.ui.ux3"
data-sap-ui-theme="sap_bluecrystal"
>
</script>
<script>
$(function() {
$("#draggable").draggable();
} );
</script>
</head>
<body>
<div id="draggable">
<p>Drag me around</p>
</div>
</body>
</html>
You should move the Jquery scripts at the bottom
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Draggable - Default functionality</title>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; border:1px; }
</style>
<script id='sap-ui-bootstrap'
type='text/javascript'
src='https://sapui5.hana.ondemand.com/1.38.10/resources/sap-ui-core.js'
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.m,sap.ui.ux3"
data-sap-ui-theme="sap_bluecrystal"
>
</script>
<script>
$(function() {
$("#draggable").draggable();
} );
</script>
</head>
<body>
<div id="draggable">
<p>Drag me around</p>
</div>
<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>
</body>
</html>
Other option is to import the thirdparty libraries.
<script>
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-widget');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-mouse');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-draggable');
$(function() {
$("#draggable").draggable();
} );
</script>
You could wrap those calls in a function to make it less ugly =)
Related
How can I dragg an image with combobox below using jquery draggable.
I don't know if I need to create a Div and inside put the image and combobox.
I already have the image draggable, but I'm not sure how can I put the combobox below.
It's hard to tell without any code listed, but here is the setup from the draggable docs:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<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>
$( function() {
$( "#draggable" ).draggable();
} );
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
It seems as though you would need the box below the element with id "draggable". You can set the box to be droppable the same way you use $( "#draggable" ).draggable();
But again, a code sample would be very helpful.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>Prueba</title>
</head>
<body>
<div class="prueba"></div>
</body>
</html>
CSS:
.prueba {
height: 100px;
width: 100px;
background-color: green;
}
JS (Edited):
var main = function() {
$('.prueba').click(function() {
$(this).removeClass('.prueba');
});
};
$(document).ready(main);
It (still) doesn't work. Can someone help me?
To select class, you should preface class name with a dot:
$('.prueba')
JQuery docs you may want to review.
I'm studying Jquery, and I was trying to do a simple SlideShow, but nothing happens...
Here's my HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/Style.css">
<meta charset="UTF-8">
<title>SlideShow</title>
</head>
<body>
<div id="slides">
<img src="imgs/1.jpg">
<img src="imgs/2.jpg">
<img src="imgs/3.jpg">
</div>
<script type="text/javascript">
$(function(){
$("#slides").cycle({
fx: 'fade',
speed:2000,
timeout:4000,
});
})
</script>
<script type="text/javascript" src="js/Jquery.js"></script>
<script type="text/javascript" src="js/Cycle.js"></script>
</body>
</html>
My Css:
*{
margin: 0;
padding: 0;
}
#slides{
width: 1024px;
height: 768px;
margin: 0 auto;
overflow: hidden;
}
I also tried to change, this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
for this:
<script src="js/jquery-1.11.0.js"></script>
Nothing...
You need to include jQuery before your Cycle plugin, so reverse the order of your scripts here:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/Cycle.js"></script>
Also, it's better to include CSS before Javascript as well as putting your Javascript at the bottom of your page before closing </body> tag.
Can anybody tell me how to use jQuery to make #mydiv stick to the full height of the window using jQuery when the user expnads the window. In this example, it only adjusts the height on page load. I need it to adjust whenever the user expands the window.
<html><head>
<script src="js/jquery.js"></script>
</head><body>
<style>
#mydiv {
background-color: blue;
height: 50px;
}
</style>
<div id="mydiv"></div>
</body></html>
<script>
if($("#mydiv").height() < $(window).height())
{
$("#mydiv").height($(window).height());
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
#mydiv {
background-color: blue;
height: 50px;
}
</style>
</head>
<body>
<div id="mydiv"></div>
<script src="js/jquery.js"></script>
<script>
$(window).on('load', function(){
$("#mydiv").height($(window).height());
$(window).on('resize', function(){
$("#mydiv").height($(window).height());
});
});
</script>
</body>
</html>
$(function(){
$("#mydiv").height($(window).height()); // for onload
//for resize
$(window).resize(function () {
$("#mydiv").height($(window).height());
});
});
I am having trouble getting the Javascript to work. All three are in the same folder. Also Chrome takes a while to open, but Firefox is instant. Thanks.
My HTML:
<html>
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>
<div>Hover Over Me!</div>
</body>
</html>
My CSS:
div {
height: 100px;
background-color: #ABCDEF;
font-family: Verdana, Arial, Sans-Serif;
font-size: 1em;
text-align: center;
}
My Javascript:
$(document).ready(function(){
$('div').mouseenter(function(){
$(this).fadeTo(1000, 1);
});
$('div').mouseleave(function(){
$(this).fadeTo(1000, .25);
});
Order of script files: Since your script file is using jQuery it should be included after the jQuery library.
Please have a look at the browser console to see whether there is any error as the first step of debugging client side script issues
<html>
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div>Hover Over Me!</div>
</body>
</html>
Also you are missing closing brackets at the bottom of script
$(document).ready(function () {
$('div').mouseenter(function () {
$(this).fadeTo(1000, 1);
});
$('div').mouseleave(function () {
$(this).fadeTo(1000, .25);
});
});
Demo: Plunker