I'm using the jQueryUI demo example and I'm trying to add in the open on mouseover effect and to have all li's closed at start. but for some reason it's only doing the default 1 collapsed and click to collapse
http://jqueryui.com/demos/accordion/#mouseover
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
$("#accordion").accordion({ event: "mouseover" });
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
<style type="text/css">
/*demo page css*/
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;}
</style>
</head>
<body>
<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
<div>
<h3>First</h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3>Second</h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3>Third</h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
</body>
</html>
You have two calls to initialize the accordion:
$("#accordion").accordion({ header: "h3" });
$("#accordion").accordion({ event: "mouseover" });
This is why the mouseover effect is not working. To combine the options into one initialization call:
$("#accordion").accordion({ header: "h3", event: "mouseover" });
Additionally, if you want all of the sections collapsed initially, add the active option and set it to false:
$("#accordion").accordion({
header: "h3",
event: "mouseover",
active: false
});
Here's a working example: http://jsfiddle.net/HjK5T/
Related
I am making a sortable grocery list, but I cannot figure out the best way to remove an item from the sorted list and have it go back to the original category.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable + Sortable</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>
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
#sortable {border: 1px solid #000; min-height:100px;}
</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() {
$( "#sortable" ).sortable({
connectWith: '.connectedList'
});
$( ".draggable" ).draggable({
connectToSortable: "#sortable",
revert: "invalid"
});
$( "ul, li" ).disableSelection();
} );
</script>
</head>
<body>
<h3>Fruit</h3>
<ul id="FruitCollection" class="fruits connectedList">
<li class="draggable">Apples</li>
<li class="draggable">Oranges</li>
</ul>
<h3>Meat</h3>
<ul id="MeatCollection" class="meats connectedList">
<li class="draggable">Beef</li>
<li class="draggable">Chicken</li>
<li class="draggable">Pork</li>
</ul>
<h3>Dairy</h3>
<ul id="DairyCollection" class="dairy connectedList">
<li class="draggable">Cheese</li>
<li class="draggable">Milk</li>
<li class="draggable">Sour Cream</li>
<li class="draggable">Yogurt</li>
</ul>
<h2>Grocery List</h2>
<ul id="sortable">
</ul>
</body>
</html>
I am not sure how connectWith really works. It seems like this is an already solved problem using a combination of draggable, droppable, or sortable. Each category's items should only return back to it if removed from the sortable.
For example, drag cheese into the grocery list, but then remove it by dragging it out of the bordered, sortable. Cheese should go back to the Dairy list.
It might be easier to add a Delete type of icon that the User can click. Example:
$(function() {
function returnToList(item) {
var t = $("." + $(item).data("list"));
$(item)
.detach()
.appendTo(t);
$(".ui-icon", item).remove();
}
function addDel(item) {
$("<span>", {
class: "ui-icon ui-icon-close"
}).appendTo(item);
}
$("#sortable").sortable({
stop: function(e, ui) {
if ($(".ui-icon", ui.item).length < 1) {
addDel(ui.item);
}
}
});
$(".items li").draggable({
connectToSortable: "#sortable",
revert: "invalid"
});
$("ul, li").disableSelection();
$(".list").on("click", "li .ui-icon-close", function() {
returnToList($(this).parent());
});
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 10px;
}
li {
margin: 5px;
padding: 5px;
width: 150px;
position: relative;
}
.items {
width: 175px;
display: inline-block;
float: left;
}
.grocery {
width: 200px;
display: inline-block;
margin-left: 20px;
}
#sortable {
border: 1px solid #000;
min-height: 100px;
}
.list li span {
position: absolute;
right: 4px;
padding: 2px;
}
<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 class="ui-widget">
<div class="items list">
<div class="ui-widget-header">Fruit</div>
<ul id="FruitCollection" class="fruits">
<li class="ui-widget-content" data-list="fruits">Apples</li>
<li class="ui-widget-content" data-list="fruits">Oranges</li>
</ul>
<div class="ui-widget-header">Meat</div>
<ul id="MeatCollection" class="meats">
<li class="ui-widget-content" data-list="meats">Beef</li>
<li class="ui-widget-content" data-list="meats">Chicken</li>
<li class="ui-widget-content" data-list="meats">Pork</li>
</ul>
<div class="ui-widget-header">Dairy</div>
<ul id="DairyCollection" class="dairy">
<li class="ui-widget-content" data-list="dairy">Cheese</li>
<li class="ui-widget-content" data-list="dairy">Milk</li>
<li class="ui-widget-content" data-list="dairy">Sour Cream</li>
<li class="ui-widget-content" data-list="dairy">Yogurt</li>
</ul>
</div>
<div class="grocery list">
<div class="ui-widget-header">Grocery List</div>
<ul id="sortable"></ul>
</div>
<div class="ui-helper-clearfix"></div>
</div>
You can make use of a Drag event, but you need a target. The event callback would then perform the same as the Click.
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
Can anyone help with the following. Draggable moves the div element, but on stop, only the flot axis labels are moved. I believe this is because the canvas elements created by flot use absolutely positioned canvas elements.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Flot Mockup</title>
<meta charset="utf-8"/>
<!-- Flot recommends using this for IE < 9 for canvas emulator see https://github.com/flot/flot/blob/master/README.md -->
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/flot/excanvas.min.js"></script><![endif]-->
<!-- Note: Many extended libraries make use of jQuery.browser which has been deprecated in jquery 1.9 - use 1.8 -->
<!--<script language="javascript" type="text/javascript" src="js/jquery-1.9.0.js" ></script>-->
<script language="javascript" type="text/javascript" src="js/jquery-1.8.0.js" ></script>
<script language="javascript" type="text/javascript" src="js/jquery-ui-1.10.0.custom.js" ></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js" ></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.resize.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.0.custom.css" />
<!-- CUSTOMIZE/OVERRIDE THE DEFAULT CSS -->
<style type="text/css">
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
/* Headers & Footer in Center & East panes */
h3, h4 {
font-size: 1.1em;
background: #EEF;
border: 1px solid #BBB;
border-width: 0 0 1px;
padding: 7px 10px;
margin: 0;
}
/* Need this or close button on tab will wrap */
.ui-tabs-nav li .ui-icon-close {
float: left;
margin: 0.4em 0.2em 0 0;
cursor: pointer;
}
/*
* TAB-THEME ADJUSTMENTS
*/
.ui-tabs-nav li {
white-space: nowrap;
}
.ui-tabs-nav li a {
font-size: 1em !important;
padding: 4px 1.5ex 3px !important;
}
.ui-tabs-panel {
font-size: 1em !important;
/* padding: 0 1em !important;*/
}
#workSpaceTabs{
padding-bottom: 0 !important;
}
.isi-default-plot {
padding: 20px;
width: 90%;
height: 90%;
font-size: 14px;
line-height: 14px;
}
</style>
</head>
<body>
<!-- Center Layout Panel - Workspace -->
<div class="ui-layout-center">
<div id="workSpaceTabs" >
<ul class="ui-tabs-nav">
<li>Tab 1<span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>
</ul>
<div id="tabs-1" class="ui-tabs-panel isi-layout-content">
<div id="t1-sort">
<div id="t1-c1" class="ui-state-active isi-container" style="width:100%; height:300px">
<h3 class="ui-widget-header">Drag Me - Flot 1</h3>
<div id="t1-c1-p1" class="isi-default-plot isi-flotPlot"></div>
</div>
<div id="t1-c2" class="ui-state-active isi-container" style="width:100%; height:250px">
<h3 class="ui-widget-header">Drag Me - Flot 2</h3>
<div id="t1-c2-p2" class="isi-default-plot isi-flotPlot"></div>
</div>
<div id="t1-c3" class="ui-state-active isi-container" style="width:100%; height:300px">
<h3 class="ui-widget-header">Drag Me 3</h3>
<p> TODO: Try putting a plot inside me</p>
</div>
</div>
</div>
</div>
</div>
<!-- Layout scripting logic -->
<script type="text/javascript">
var tabs = $("#workSpaceTabs").tabs({
heightStyle: "fill"
});
$("#t1-sort").sortable({
revert: true
});
$(".isi-container").draggable({
scroll: true
, connectToSortable: "#t1-sort"
, containment: "parent"
, stop: function( event, ui ) {onContainerDragStop(event, ui);}
});
</script>
<!-- Flot Plotting Logic -->
<script type="text/javascript">
//
// Global Plots
//
var flotPlots = new Array();
//
// Std Data Series' from examples
//
var d1 = [];
for (var i = 0; i < 14; i += 0.5) {
d1.push([i, Math.sin(i)]);
}
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
// A null signifies separate line segments
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
//
// Draw a flot plot in each container
//
$(".isi-flotPlot").each(
function(){
var thisID = $(this).attr("id");
var thisSelectorID = "#" + thisID;
var plot = $.plot(thisSelectorID, [ d1, d2, d3 ]);
flotPlots.push( {id: thisID, plot: plot} );
});
</script>
<!-- Event Handlers -->
<script type="text/javascript">
//
// Drag/Sort doesn't move the canvas elements.
// Try refreshing them all to work out a fix.
//
function onContainerDragStop(event, ui){
for(var i = 0 ; i < flotPlots.length; i++){
//alert("ReDrawing: " + flotPlots[i].id);
flotPlots[i].plot.resize();
flotPlots[i].plot.setupGrid();
flotPlots[i].plot.draw();
}
}
</script>
</body>
</html>
Revised -- Here is the generated source before and after the drag operation --
before drag:
<div id="t1-c1" class="ui-state-active isi-container ui-draggable" style="width: 100%; height: 300px; position: relative;">
<h3 class="ui-widget-header">Drag Me - Flot 1</h3>
<div style="padding: 0px; position: relative;" id="t1-c1-p1" class="isi-default-plot isi-flotPlot"><canvas height="270" width="1634" class="base"></canvas><canvas style="position: absolute; left: 0px; top: 0px; width: 1634px; height: 270px;" height="270" width="1634" class="overlay"></canvas><div class="tickLabels" style="font-size:smaller"><div class="xAxis x1Axis" style="color:#545454"><div class="tickLabel" style="position:absolute;text-align:center;left:-26px;top:256px;width:108px">0</div><div class="tickLabel" style="position:absolute;text-align:center;left:93px;top:256px;width:108px">1</div><div class="tickLabel" style="position:absolute;text-align:center;left:211px;top:256px;width:108px">2</div><div class="tickLabel" style="position:absolute;text-align:center;left:330px;top:256px;width:108px">3</div><div class="tickLabel" style="position:absolute;text-align:center;left:449px;top:256px;width:108px">4</div><div class="tickLabel" style="position:absolute;text-align:center;left:567px;top:256px;width:108px">5</div><div class="tickLabel" style="position:absolute;text-align:center;left:686px;top:256px;width:108px">6</div><div class="tickLabel" style="position:absolute;text-align:center;left:805px;top:256px;width:108px">7</div><div class="tickLabel" style="position:absolute;text-align:center;left:923px;top:256px;width:108px">8</div><div class="tickLabel" style="position:absolute;text-align:center;left:1042px;top:256px;width:108px">9</div><div class="tickLabel" style="position:absolute;text-align:center;left:1161px;top:256px;width:108px">10</div><div class="tickLabel" style="position:absolute;text-align:center;left:1279px;top:256px;width:108px">11</div><div class="tickLabel" style="position:absolute;text-align:center;left:1398px;top:256px;width:108px">12</div><div class="tickLabel" style="position:absolute;text-align:center;left:1517px;top:256px;width:108px">13</div></div><div class="yAxis y1Axis" style="color:#545454"><div class="tickLabel" style="position:absolute;text-align:right;top:242px;right:1613px;width:21px">-2.5</div><div class="tickLabel" style="position:absolute;text-align:right;top:207px;right:1613px;width:21px">0.0</div><div class="tickLabel" style="position:absolute;text-align:right;top:172px;right:1613px;width:21px">2.5</div><div class="tickLabel" style="position:absolute;text-align:right;top:137px;right:1613px;width:21px">5.0</div><div class="tickLabel" style="position:absolute;text-align:right;top:102px;right:1613px;width:21px">7.5</div><div class="tickLabel" style="position:absolute;text-align:right;top:67px;right:1613px;width:21px">10.0</div><div class="tickLabel" style="position:absolute;text-align:right;top:32px;right:1613px;width:21px">12.5</div><div class="tickLabel" style="position:absolute;text-align:right;top:-3px;right:1613px;width:21px">15.0</div></div></div></div>
</div>
after drag:
<div class="ui-state-active isi-container ui-draggable ui-draggable-dragging" style="width: 100%; height: 300px; position: relative; left: auto; top: auto; display: block;">
<h3 class="ui-widget-header">Drag Me - Flot 1</h3>
<div style="padding: 0px; position: relative;" id="t1-c1-p1" class="isi-default-plot isi-flotPlot"><canvas height="270" width="1634" class="base"></canvas><canvas style="position: absolute; left: 0px; top: 0px; width: 1634px; height: 270px;" height="270" width="1634" class="overlay"></canvas><div class="tickLabels" style="font-size:smaller"><div class="xAxis x1Axis" style="color:#545454"><div class="tickLabel" style="position:absolute;text-align:center;left:-26px;top:256px;width:108px">0</div><div class="tickLabel" style="position:absolute;text-align:center;left:93px;top:256px;width:108px">1</div><div class="tickLabel" style="position:absolute;text-align:center;left:211px;top:256px;width:108px">2</div><div class="tickLabel" style="position:absolute;text-align:center;left:330px;top:256px;width:108px">3</div><div class="tickLabel" style="position:absolute;text-align:center;left:449px;top:256px;width:108px">4</div><div class="tickLabel" style="position:absolute;text-align:center;left:567px;top:256px;width:108px">5</div><div class="tickLabel" style="position:absolute;text-align:center;left:686px;top:256px;width:108px">6</div><div class="tickLabel" style="position:absolute;text-align:center;left:805px;top:256px;width:108px">7</div><div class="tickLabel" style="position:absolute;text-align:center;left:923px;top:256px;width:108px">8</div><div class="tickLabel" style="position:absolute;text-align:center;left:1042px;top:256px;width:108px">9</div><div class="tickLabel" style="position:absolute;text-align:center;left:1161px;top:256px;width:108px">10</div><div class="tickLabel" style="position:absolute;text-align:center;left:1279px;top:256px;width:108px">11</div><div class="tickLabel" style="position:absolute;text-align:center;left:1398px;top:256px;width:108px">12</div><div class="tickLabel" style="position:absolute;text-align:center;left:1517px;top:256px;width:108px">13</div></div><div class="yAxis y1Axis" style="color:#545454"><div class="tickLabel" style="position:absolute;text-align:right;top:242px;right:1613px;width:21px">-2.5</div><div class="tickLabel" style="position:absolute;text-align:right;top:207px;right:1613px;width:21px">0.0</div><div class="tickLabel" style="position:absolute;text-align:right;top:172px;right:1613px;width:21px">2.5</div><div class="tickLabel" style="position:absolute;text-align:right;top:137px;right:1613px;width:21px">5.0</div><div class="tickLabel" style="position:absolute;text-align:right;top:102px;right:1613px;width:21px">7.5</div><div class="tickLabel" style="position:absolute;text-align:right;top:67px;right:1613px;width:21px">10.0</div><div class="tickLabel" style="position:absolute;text-align:right;top:32px;right:1613px;width:21px">12.5</div><div class="tickLabel" style="position:absolute;text-align:right;top:-3px;right:1613px;width:21px">15.0</div></div></div></div>
</div>
Found the solution. Turns out draggable is not required with sortable in my use case. Seems that usage of draggable and sortable together with a flot element inside gets confounded. Commenting out the logic as shown in the sample below, solves the problem.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Flot Mockup</title>
<meta charset="utf-8"/>
<!-- Flot recommends using this for IE < 9 for canvas emulator see https://github.com/flot/flot/blob/master/README.md -->
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/flot/excanvas.min.js"></script><![endif]-->
<!-- Note: Many extended libraries make use of jQuery.browser which has been deprecated in jquery 1.9 - use 1.8 -->
<!--<script language="javascript" type="text/javascript" src="js/jquery-1.9.0.js" ></script>-->
<script language="javascript" type="text/javascript" src="js/jquery-1.8.0.js" ></script>
<script language="javascript" type="text/javascript" src="js/jquery-ui-1.10.0.custom.js" ></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js" ></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.resize.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.0.custom.css" />
<!-- CUSTOMIZE/OVERRIDE THE DEFAULT CSS -->
<style type="text/css">
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
/* Headers & Footer in Center & East panes */
h3, h4 {
font-size: 1.1em;
background: #EEF;
border: 1px solid #BBB;
border-width: 0 0 1px;
padding: 7px 10px;
margin: 0;
}
/* Need this or close button on tab will wrap */
.ui-tabs-nav li .ui-icon-close {
float: left;
margin: 0.4em 0.2em 0 0;
cursor: pointer;
}
/*
* TAB-THEME ADJUSTMENTS
*/
.ui-tabs-nav li {
white-space: nowrap;
}
.ui-tabs-nav li a {
font-size: 1em !important;
padding: 4px 1.5ex 3px !important;
}
.ui-tabs-panel {
font-size: 1em !important;
/* padding: 0 1em !important;*/
}
#workSpaceTabs{
padding-bottom: 0 !important;
}
.isi-default-plot {
padding: 20px;
width: 90%;
height: 90%;
font-size: 14px;
line-height: 14px;
}
</style>
</head>
<body>
<!-- Center Layout Panel - Workspace -->
<div class="ui-layout-center">
<div id="workSpaceTabs" >
<ul class="ui-tabs-nav">
<li>Tab 1<span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>
</ul>
<div id="tabs-1" class="ui-tabs-panel isi-layout-content">
<div id="t1-sort">
<div id="t1-c1" class="ui-state-active isi-container" style="width:100%; height:300px">
<h3 class="ui-widget-header">Drag Me - Flot 1</h3>
<div id="t1-c1-p1" class="isi-default-plot isi-flotPlot"></div>
</div>
<div id="t1-c2" class="ui-state-active isi-container" style="width:100%; height:250px">
<h3 class="ui-widget-header">Drag Me - Flot 2</h3>
<div id="t1-c2-p2" class="isi-default-plot isi-flotPlot"></div>
</div>
<div id="t1-c3" class="ui-state-active isi-container" style="width:100%; height:300px">
<h3 class="ui-widget-header">Drag Me 3</h3>
<p> TODO: Try putting a plot inside me</p>
</div>
</div>
</div>
</div>
</div>
<!-- Layout scripting logic -->
<script type="text/javascript">
var tabs = $("#workSpaceTabs").tabs({
heightStyle: "fill"
});
$("#t1-sort").sortable({
revert: true
});
/*
$(".isi-container").draggable({
scroll: true
, connectToSortable: "#t1-sort"
, containment: "parent"
, stop: function( event, ui ) {onContainerDragStop(event, ui);}
});
*/
</script>
<!-- Flot Plotting Logic -->
<script type="text/javascript">
//
// Global Plots
//
var flotPlots = new Array();
//
// Std Data Series' from examples
//
var d1 = [];
for (var i = 0; i < 14; i += 0.5) {
d1.push([i, Math.sin(i)]);
}
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
// A null signifies separate line segments
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
//
// Draw a flot plot in each container
//
$(".isi-flotPlot").each(
function(){
var thisID = $(this).attr("id");
var thisSelectorID = "#" + thisID;
var plot = $.plot(thisSelectorID, [ d1, d2, d3 ]);
flotPlots.push( {id: thisID, plot: plot} );
});
</script>
<!-- Event Handlers -->
<script type="text/javascript">
/*
//
// Drag/Sort doesn't move the canvas elements.
// Try refreshing them all to work out a fix.
//
function onContainerDragStop(event, ui){
for(var i = 0 ; i < flotPlots.length; i++){
//alert("ReDrawing: " + flotPlots[i].id);
flotPlots[i].plot.resize();
flotPlots[i].plot.setupGrid();
flotPlots[i].plot.draw();
}
}
*/
</script>
</body>
</html>
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;}
I am using the code below. What I want to do is have a + or - sign on expanded or collapsed view. How can I do that? Here is the code:
<!--//---------------------------------+
// Developed by Roshan Bhattarai |
// http://roshanbh.com.np |
// Fell Free to use this script |
//---------------------------------+-->
<title>Collapsible Message Panels</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//hide the all of the element with class msg_body
$(".msg_body").show();
//toggle the componenet with class msg_body
$(".msg_head").click(function(){
$(this).next(".msg_body").slideToggle(100);
});
});
</script>
<style type="text/css">
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
p {
padding: 0 0 1em;
}
.msg_list {
margin: 0px;
padding: 0px;
width: 383px;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#FFCCCC;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#F4F4F8;
}
</style>
</head>
<body>
<div align="center">
<p>Click on the each news head to toggle
</p>
</div>
<div class="msg_list">
<p class="msg_head">Header-1 </p>
<div class="msg_body">
orem ipsum dolor sit amet
</div>
<p class="msg_head">Header-2</p>
<div class="msg_body">
consectetuer adipiscing elit orem ipsum dolor sit amet
</div>
</div>
</body>
</html>
Change the markup of the msg_head to something like this-
<p class="msg_head">Header-1 <span>[-]</span></p>
and change the toggle function to look like this-
$(".msg_head").click(function(){
$(this).next(".msg_body").slideToggle(100);
})
.toggle( function() {
$(this).children("span").text("[+]");
}, function() {
$(this).children("span").text("[-]");
});
Easiest way to do this is with the .toggleClass( className ). Using this method you can add or remove a class from an element. So modifying your code to the (untested) code below should do the trick. You'll want to offset the padding by an equivalent amount to fit your graphic files.
JavaScript
$(".msg_head").click(function() {
$(this).next(".msg_body").slideToggle(100);
$(this).toggleClass('msg_head_expanded');
});
CSS
.msg_head
{
padding: 5px 10px;
cursor: pointer;
position: relative;
background:#FFCCCC url('plus.png') no-repeat 0 50;
margin:1px;
}
.msg_head_expanded
{
background:#FFCCCC url('minus.png') no-repeat 0 50;
}
I have this very thing on my own website. Here's how I do it:
$(".question").click(function () {
if ($(this).next(".answer").is(":hidden")) {
$(this).next(".answer").slideDown("slow");
$(this).children('span').text('-');
} else {
$(this).next(".answer").slideUp("slow");
$(this).children('span').text('+');
}
});
The HTML looks like this:
<div class="question">
<span>+</span>blahblah
</div>
<div class="answer">blahblah</div>