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>
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.
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
I'm a complete noob to RoR, Bootstrap and all things code based. I'm trying to implement a full screen Bootstrap Carousel in my RoR app similar to this: http://surfscore.me/
This is what I have so far: http://cryptic-woodland-6000.herokuapp.com/
Can anyone please tell me why I can't get the image to full width....it's driving me crazy!
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
padding-bottom: 0px;
height: 100%;
width: 100%;
color: #5a5a5a;
margin: 0;
margin-right: 0;
min-height: 100%;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.logo-holder {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
margin-top: 5%;
margin-bottom: -90px;
margin-left: 5%;
/* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
}
/* Carousel base class */
.carousel {
margin-bottom: 0px;
}
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
z-index: 10;
}
.carousel .item {
height: 100%;
}
.carousel img {
position: relative;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
margin: 0;
}
.carousel-caption {
background-color: #0001;
position: absolute;
max-width: 400px;
padding: 35px 20px;
margin-top: 40px;
margin-left: 50px;
margin-bottom: 45%;
z-index: 20;
}
.carousel-caption h1,
.carousel-caption .lead {
margin: 0;
line-height: 1.25;
color: #fff;
text-shadow: 0 4px 4px rgba(0,0,0,.4);
}
.carousel-caption .btn {
margin-top: 10px;
}
/* Footer
-------------------------------------------------- */
.footer {
padding: -90;
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<!-- Logo attempt
================================================== -->
<div class="logo-holder">
<img src="images/hselogo.png">
</div>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" >
<div class="carousel-inner">
<div class="carousel-caption">
<h1>COMING SOON!</h1>
<p class="lead">We're busy doing some 'market research'!</p>
<a class="btn btn-large btn-primary" href="#">Sign up today</a>
</div>
<div class="item active">
<img src="images/greek1.jpg" alt="">
</div>
<div class="item">
<img src="images/hotel.jpg" alt="">
</div>
<div class="item">
<img src="images/mykonos.jpg" alt="">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div><!-- /.carousel -->
<!-- FOOTER -->
<footer>
<p class="pull-right">91-93 Buckingham Palace Rd, London, SW1W 0RP.</p>
<p>© 2013 HOP SKIP ESCAPE LTD · Privacy · Terms</p>
</footer>
</div><!-- /.container -->
</body>
</html>
You can achieve a similar effect by dropping the container class
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;}