i am working on to add jspanel plugin in my project, is there any way to open jspanel in minimized mode, i found some question related to, but could not find any right answer, here is sample code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jspanel3/3.10.0/jquery.jspanel.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspanel3/3.10.0/jquery.jspanel-compiled.js"></script>
</head>
<body>
<script type="text/javascript">
function clickToOpen() {
$.jsPanel({
position: "left",
size: {width: 120, height: 270},
overflow: {vertical: 'scroll'},
theme: "light",
});
}
</script>
<input type="button" value="click to open" onclick="clickToOpen()"></input>
</body>
</html>
Sample for version 4:
jsPanel.create({
content: "<p>minimized</p>",
theme: 'info',
position: "left-top",
setStatus: 'minimized'
});
Take a look at option.setStatus of jsPanel v3.x
$.jsPanel({
setstatus: "minimize"
});
Related
How can I execute a joint.js program? I have downloaded the required js files and have saved the below below code in an HTML file. I tried opening in IE and Chrome, but it resulted in a blank page instead:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="joint.css" />
<script src="jquery.js"></script>
<script src="lodash.js"></script>
<script src="backbone.js"></script>
<script src="joint.js"></script>
</head>
<body>
<div id="myholder"></div>
<script type="text/javascript">
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph,
gridSize: 1
});
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
});
var rect2 = rect.clone();
rect2.translate(300);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
</script>
</body>
</html>
You have to take care of the version of the decencies, check the versions in below image, or else use the below CDN.
<link rel="stylesheet" href="joint.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
Clone jointjs project from https://github.com/clientIO/joint.git. And Go to demo folder, open any html file in browser.
I think that will help you to start work with jointjs.
dependencies are
jquery.js
backbone.js
joint.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/joint.min.css" />
<link rel="stylesheet" type="text/css" href="css/paper.css" />
<script src="lib/jquery.min.js"></script>
<script src="lib/lodash.min.js"></script>
<script src="lib/backbone-min.js"></script>
<script src="lib/joint.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
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.
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
I just check out the demos for jquery-ui-map here http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#basic_map
This is exactly what I am trying to implement, its very basic, I just did as they did in the example but it doesn't seems working, I tested it on Chrome Desktop browser.
Here is the source:
<!DOCTYPE html >
<html >
<head>
<title>Map Search Page</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.0.1.min.css" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map { height: 100%; width:100%; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.services.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 10 };
$('#home').live("pageinit", function () {
$('#map').gmap({ 'center': mobileDemo.center, 'zoom': 17 });
//$('#map').gmap('addMarker', { 'position': mobileDemo.center, 'animation': google.maps.Animation.DROP });
});
$('#home').live('pageshow', function () {
$('#map').gmap('refresh');
});
</script>
</head>
<body>
<section id="home" data-role="page">
<header data-role="header">
<h1>Multi Color Rating</h1>
</header>
<div class="content" style="width:100%; height:100%; " data-role="content">
<div id="map">
</div>
</div>
<footer data-role="footer">
<h2> All Rights Reserved © 2012</h2>
</footer>
</section>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
This shows only header and footers for now.
There is one important thing, when I give some height to the map div, it shows Static map image.
Just got it working now, Source code is fine. There was a problem because jQuery Mobile Map respond to Touch event.
In Chrome touch event are not enabled by default, so just turn on the Touch event in Chrome Console.