I have the following code that attempts to demonstrate and animate a dequeuing procedure of an aircraft takeoff queue.
For every takeoff (or dequeue) which happens after 5 seconds, a box is supposed to fade out until all have faded out after the takeoff queue is empty.
My problem is how do i link each plane dequeue to a box such that for every dequeue a box fades out?
Here is the code snipet
function airport() {
this.takeoff_queue = ["KQA", "ERJ", "TOM", "DHL", "ETH"];
this.landing_queue = ["RWA", "KLM", "PAN", "FLY540", "JAMBO"];
console.log('DEPARTING', this.landing_queue, 'ARRIVING', this.takeoff_queue);
}
var departure = new airport();
var takeoff_interval = setInterval(function depart() {
$("#box1").fadeOut();
if (departure.takeoff_queue.length != 0) {
departure.takeoff_queue.shift()
$("#box1").fadeOut();
console.log('DEPARTING', departure.takeoff_queue);
} else {
clearInterval(takeoff_interval);
console.log('TAKEOFFS COMPLETE');
}
}, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>SIMPLE SIMULATED TAKEOFF</h3>
<div id="box1" style="width: 20px; height: 20px; background:black;float:left;margin:10px"></div>
<div id="box2" style="width: 20px; height: 20px; background:black;float:left;margin:10px"></div>
<div id="box3" style="width: 20px; height: 20px; background:black;float:left;margin:10px"></div>
<div id="box4" style="width: 20px; height: 20px; background:black;float:left;margin:10px"></div>
<div id="box5" style="width: 20px; height: 20px; background:black;float:left;margin:10px"></div>
If this is a wrong approach kindly explain it to me.
How about associating each element with some data such as its destination in this case, and look for the element based on that
function airport() {
this.takeoff_queue = ["KQA", "ERJ", "TOM", "DHL", "ETH"];
this.landing_queue = ["RWA", "KLM", "PAN", "FLY540", "JAMBO"];
console.log('DEPARTING', this.landing_queue, 'ARRIVING', this.takeoff_queue);
}
var departure = new airport();
var takeoff_interval = setInterval(function depart() {
if (departure.takeoff_queue.length != 0) {
var dest = departure.takeoff_queue.shift()
$("[data-dest='" + dest + "']").fadeOut();
console.log('DEPARTING', departure.takeoff_queue);
} else {
clearInterval(takeoff_interval);
console.log('TAKEOFFS COMPLETE');
}
}, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>SIMPLE SIMULATED TAKEOFF</h3>
<div id="box1" style="width: 20px; height: 20px; background:black;float:left;margin:10px" data-dest="KQA"></div>
<div id="box2" style="width: 20px; height: 20px; background:black;float:left;margin:10px" data-dest="ERJ"></div>
<div id="box3" style="width: 20px; height: 20px; background:black;float:left;margin:10px" data-dest="TOM"></div>
<div id="box4" style="width: 20px; height: 20px; background:black;float:left;margin:10px" data-dest="DHL"></div>
<div id="box5" style="width: 20px; height: 20px; background:black;float:left;margin:10px" data-dest="ETH"></div>
Within your setInterval call, you're continually fading #div1 which only should be faded once. I believe what you're after is $("div:visible:first").fadeOut();:
var takeoff_interval = setInterval(function depart() {
if (departure.takeoff_queue.length != 0) {
departure.takeoff_queue.shift()
$("div:visible:first").fadeOut();
console.log('DEPARTING', departure.takeoff_queue);
} else {
clearInterval(takeoff_interval);
console.log('TAKEOFFS COMPLETE');
}
}, 5000);
jsFiddle example
Try utilizing .queue()
function airport() {
this.takeoff_queue = ["KQA", "ERJ", "TOM", "DHL", "ETH"];
this.landing_queue = ["RWA", "KLM", "PAN", "FLY540", "JAMBO"];
console.log('DEPARTING', this.landing_queue, 'ARRIVING', this.takeoff_queue);
}
var departure = new airport();
$(document).queue("q", $.map(departure.takeoff_queue, function(val, key) {
// add `class` `departure.takeoff_queue` value to `div`
$("div[id^=box]").eq(key).addClass(val);
return function(next) {
// select `div` by `departure.takeoff_queue` value `class`
$("div[class="+val+"]").delay(5000).fadeOut(0, function() {
console.log("DEPARTING:" + this.className);
next()
})
}
})).dequeue("q").promise("q").done(function() {
console.log("TAKEOFFS COMPLETE")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>SIMPLE SIMULATED TAKEOFF</h3>
<div id="box1" style="width: 20px; height: 20px; background:black;float:left;margin:10px"></div>
<div id="box2" style="width: 20px; height: 20px; background:black;float:left;margin:10px"></div>
<div id="box3" style="width: 20px; height: 20px; background:black;float:left;margin:10px"></div>
<div id="box4" style="width: 20px; height: 20px; background:black;float:left;margin:10px"></div>
<div id="box5" style="width: 20px; height: 20px; background:black;float:left;margin:10px"></div>
Related
I am trying to implement a simple drag and drop, but for some reason the data I'm storing in the dataTransfer object is not being retained. Here is my code:
function drag(ev) {
var checker_id = ev.target.id;
var checker_slot = ev.target.getAttribute('data-slot');
console.log(`Starting drag with ${checker_id} from slot ${checker_slot}`);
ev.originalEvent.dataTransfer.setData("checker-id", ev.target.id);
ev.originalEvent.dataTransfer.setData("checker-slot", ev.target.getAttribute('data-slot'));
var stored_id = ev.originalEvent.dataTransfer.getData("checker-id");
var stored_slot = ev.originalEvent.dataTransfer.getData("checker-slot");
console.log(`Just stored checker ${stored_id} from slot ${stored_slot}`);
}
function drag_over(ev) {
console.log(`Drag_over event data: ${ev.originalEvent.dataTransfer.types}`);
var checker_id = ev.originalEvent.dataTransfer.getData("checker-id");
var checker_slot = ev.originalEvent.dataTransfer.getData("checker-slot");
console.log(`Drag_over with checker ${checker_id} from slot ${checker_slot}`);
}
$("#checker-1").on('dragstart', drag);
$("#slot-2").on('dragover', drag_over);
.slot {
width: 100px;
height: 100px;
margin: 100px;
border: 2px solid black;
}
.checker {
width: 50px;
height: 50px;
background: blue;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<div class="slot" id="slot-1">
<div class="checker" id="checker-1" data-slot="slot-1" draggable="true">
</div>
<div class="slot" id="slot-2"></div>
I would expect the output to the console to be the following:
Starting drag with checker-1 from slot slot-1
Just stored checker checker-1 from slot slot-1
Drag_over event data: checker-id,checker-slot
Drag_over with checker checker-1 from slot slot-1
Instead, the last log statement is:
Drag_over with checker from slot
For some reason, it's retaining the keys I store in the dataTransfer object but not the values. I can't figure out what I'm doing wrong.
I noticed you were missing a DIV close tag. This corrected code appears to work:
function drag(ev) {
var checker_id = ev.target.id;
var checker_slot = ev.target.getAttribute('data-slot');
console.log(`Starting drag with ${checker_id} from slot ${checker_slot}`);
ev.originalEvent.dataTransfer.setData("checker-id", ev.target.id);
ev.originalEvent.dataTransfer.setData("checker-slot", ev.target.getAttribute('data-slot'));
var stored_id = ev.originalEvent.dataTransfer.getData("checker-id");
var stored_slot = ev.originalEvent.dataTransfer.getData("checker-slot");
console.log(`Just stored checker ${stored_id} from slot ${stored_slot}`);
}
function drag_over(ev) {
console.log(`Drag_over event data: ${ev.originalEvent.dataTransfer.types}`);
var checker_id = ev.originalEvent.dataTransfer.getData("checker-id");
var checker_slot = ev.originalEvent.dataTransfer.getData("checker-slot");
console.log(`Drag_over with checker ${checker_id} from slot ${checker_slot}`);
}
$("#checker-1").on('dragstart', drag);
$("#slot-2").on('dragover', drag_over);
.slot {
width: 100px;
height: 100px;
margin: 100px;
border: 2px solid black;
}
.checker {
width: 50px;
height: 50px;
background: blue;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<div class="slot" id="slot-1">
<div class="checker" id="checker-1" data-slot="slot-1" draggable="true">
</div>
</div>
<div class="slot" id="slot-2"></div>
You might also consider the following.
$(function() {
$(".checker").draggable();
$(".slot").droppable({
accept: ".checker",
drop: function(event, ui) {
ui.draggable.appendTo(this).attr("style", "");
console.log("Got " + ui.draggable.attr("id"));
}
});
});
.slot {
width: 100px;
height: 100px;
margin: 100px;
border: 2px solid black;
}
.checker {
width: 50px;
height: 50px;
background: blue;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<div class="slot" id="slot-1">
<div class="checker" id="checker-1" data-slot="slot-1" draggable="true">
</div>
</div>
<div class="slot" id="slot-2"></div>
strong text
I have a box in a few boxes and placed inside each box for an hour.
I want to sort by using the box clock named item.
This sorting has three modes, the first ascending, the second descending, the third without sorting.
strong text
<body>
<style>
body{margin: 0 auto;padding: 0 auto;background: skyblue;}
.full-item{width: 800px;height: 600px;margin: 50px auto;background: grey;}
.full-item .button-item{width: 100%;height: 80px;background: #B33771;}
.full-item .button-item button{margin: 30px 45%;}
.full-item .item-sort{width: 100%;height: 500px;background: white;margin-top: 10px;}
.full-item .item-sort:first-child{margin-top: 10px;}
.full-item .item-sort .item{width: 90%;height: 140px;background: red;margin: 10px auto;}
.item-sort .item .pic{width: 30%;height: 100%;background: #3B3B98;float: left;}
.item-sort .item .time{width: 70%;height: 100%;background: #1B9CFC;float: right;}
.item-sort .item .time span{color: white;text-align: center;display: block;line-height: 100px;}
</style>
<div class="full-item">
<div class="button-item">
<button id="Sort-item">Sort by</button>
</div>
<div class="item-sort">
<div class="item">
<div class="pic"></div>
<div class="time"><span>15:20</span></div>
</div>
<div class="item">
<div class="pic"></div>
<div class="time"><span>13:10</span></div>
</div>
<div class="item">
<div class="pic"></div>
<div class="time"><span>18:40</span></div>
</div>
</div>
</div>
</body>
If the data is coming from JSON or other source, as with akbansa's recommendation, you should perform the sorting on the data first; otherwise, see below for an example of how you could reorder your elements:
const button = document.querySelector('#Sort-item')
// add handler
button.addEventListener('click', clickHandler)
// handler definition
function clickHandler(){
let container = document.querySelector('.item-sort')
let items = Array.from(container.querySelectorAll('.item-sort .item'))
// sort based on time
items = items.sort((a,b)=>{
let a_time = a.querySelector('.time span').textContent
let b_time = b.querySelector('.time span').textContent
return a_time > b_time ? 1 : -1
})
// apply the order
for(let item of items)
container.appendChild(item)
}
body {
margin: 0 auto;
padding: 0 auto;
background: skyblue;
}
.full-item {
width: 800px;
height: 600px;
margin: 50px auto;
background: grey;
}
.full-item .button-item {
width: 100%;
height: 80px;
background: #B33771;
}
.full-item .button-item button {
margin: 30px 45%;
}
.full-item .item-sort {
width: 100%;
height: 500px;
background: white;
margin-top: 10px;
}
.full-item .item-sort:first-child {
margin-top: 10px;
}
.full-item .item-sort .item {
width: 90%;
height: 140px;
background: red;
margin: 10px auto;
}
.item-sort .item .pic {
width: 30%;
height: 100%;
background: #3B3B98;
float: left;
}
.item-sort .item .time {
width: 70%;
height: 100%;
background: #1B9CFC;
float: right;
}
.item-sort .item .time span {
color: white;
text-align: center;
display: block;
line-height: 100px;
}
<div class="full-item">
<div class="button-item">
<button id="Sort-item">Sort by</button>
</div>
<div class="item-sort">
<div class="item">
<div class="pic"></div>
<div class="time"><span>15:20</span></div>
</div>
<div class="item">
<div class="pic"></div>
<div class="time"><span>13:10</span></div>
</div>
<div class="item">
<div class="pic"></div>
<div class="time"><span>18:40</span></div>
</div>
</div>
</div>
Update your html inside "button-item" class
<div class="button-item">
<p>Sort By </p>
<button id="sort-asc" onclick="app.sortAsc()">Asc</button>
<button id="sort-desc" onclick="app.sortDesc()">Desc</button>
<button id="reset" onclick="app.reset()">Reset</button>
</div>
Add to your scripts
var app = (function (){
var originalArr = []
var timeArr = []
var sortedArr = []
var objArr = []
var timeElements = document.querySelectorAll('.time')
var itemSortElement = document.querySelector('.item-sort')
for ( let timeEl of timeElements) {
// retrieving text from individual span element
let timeText = timeEl.children[0].innerText;
// retrieving parent node of div with class "time"
let timeParent = timeEl.parentNode
let obj = { text: timeText, parent: timeParent }
objArr.push(obj)
timeArr.push(timeText)
}
// copying all elements/ texts from "timeArr" array to "originalArr" array
// to keep track of original order of texts
originalArr = timeArr.slice()
function sortAsc () {
// sorting the retrieved texts in ascending order
sortedArr = timeArr.sort();
while (itemSortElement.hasChildNodes()) {
// removing all child elements of class "item-sort"
itemSortElement.removeChild(itemSortElement.firstChild);
}
for ( let i = 0; i < sortedArr.length; i++) {
let filteredObj = objArr.filter((obj) => sortedArr[i] == obj.text)[0]
let node = filteredObj.parent
itemSortElement.appendChild(node)
}
}
function sortDesc () {
sortedArr = timeArr.sort().reverse();
while (itemSortElement.hasChildNodes()) {
itemSortElement.removeChild(itemSortElement.firstChild);
}
for ( let i = 0; i < sortedArr.length; i++) {
var filteredObj = objArr.filter((obj) => sortedArr[i] == obj.text)[0]
let node = filteredObj.parent
itemSortElement.appendChild(node)
}
}
function reset () {
while (itemSortElement.hasChildNodes()) {
itemSortElement.removeChild(itemSortElement.firstChild);
}
for ( let i = 0; i < originalArr.length; i++) {
var filteredObj = objArr.filter((obj) => originalArr[i] == obj.text)[0]
let node = filteredObj.parent
itemSortElement.appendChild(node)
}
}
return {
sortDesc,
sortAsc,
reset
}
})()
you can check it Demo
Using the following code:
function _launchIntoFullscreen (pElement) {
if(pElement.requestFullscreen) {
pElement.requestFullscreen();
} else if(pElement.mozRequestFullScreen) {
pElement.mozRequestFullScreen();
} else if(pElement.webkitRequestFullscreen) {
pElement.webkitRequestFullscreen();
} else if(pElement.msRequestFullscreen) {
pElement.msRequestFullscreen();
}
}
I can switch a single element to fullscreen mode, e.g. for a dijit.form.ContentPane named "canvas"
_launchIntoFullscreen(canvas.domNode);
works fine, but unfortunately with Chrome the element is not resized to fill all of the fullscreen window. The size remains the same and it is centered on screen.
I have added the following to the CSS:
:-webkit-full-screen {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: none;
}
but the only change is the position, which is now the upper left corner, but the size is still the same.
Additional information: The structure of the page is
<div class="page-wrapper" style="width:100%; height:100%;">
<div id="toolbar" class="toolbar"></div>
<div id="borderContainer" data-dojo-type="dijit/layout/BorderContainer" design="sidebar" persist="false" gutters="true" style="min-width: 1em; min-height: 1px; z-index: 0; width: 100%; height: 100%; padding: 0px 0px 32px 0px;">
<div id="projectPane" data-dojo-type="dijit/layout/ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="left" splitter="true" maxSize="Infinity" doLayout="true" style="width: 220px; padding: 0px;">
<div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%; padding: 0px;">
<div id="treeParent" class="treeParent" data-dojo-type="dijit/layout/ContentPane" title="Palette" data-dojo-props="selected:true" style="padding:0px;"></div>
<div id="onlineParent" class="treeParent" data-dojo-type="dijit/layout/ContentPane" title="Online" data-dojo-props="selected:false" style="padding:0px;"></div>
</div>
</div>
<div id="workAreaContainer" data-dojo-type="dijit/layout/ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity" doLayout="true" style="padding: 0px;">
<div id="workArea" class="workArea" data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%; padding: 0px;" data-dojo-props="tabPosition: 'right-h'">
</div>
</div>
<div id="bottom" data-dojo-type="dijit/layout/TabContainer" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="bottom" splitter="true" maxSize="Infinity" doLayout="true" style="width: 100%; height: 10%; padding: 0px;">
<div id="log" class="log" title="Log" data-dojo-type="dijit/layout/ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" maxSize="Infinity" doLayout="false" style="height:100%;padding:0px;overflow:auto;"></div>
</div>
<div id="properties" class="properties" data-dojo-type="dijit/layout/ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="right" splitter="true" minSize=0 maxSize="Infinity" doLayout="false" style="width:250px;padding: 0px;"></div>
</div>
</div>
canvas is created dynamically:
var lTabContainer = dijit.byId("workArea");
var canvas = new ContentPane({
title: this.keys.pouname, //"Main",
//id: "surface",
class: "surfaceX",
extractContent: "false",
preventCache: "false",
preload: "false",
refreshOnShow: "false",
maxSize: "Infinity",
doLayout: "false",
"data-dojo-props": "selected:true",
style: "padding: 0px;"
});
lTabContainer.addChild(canvas);
What am I doing wrong here?
In Firefox everything behaves as expected even without the CSS.
Thanks a lot for giving me insight into a solution.
Here is an example html that for me works both in Firefox and Chrome. Try adding the style "width: 100%; height: 100%" to the ContentPane that will go full screen.
<html>
<head>
</head>
<body class="claro">
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">
<script>
require([
"dijit/layout/ContentPane",
"dojo/dom-construct",
"dojo/on",
"dojo/keys",
"dojo/domReady!"
], function(ContentPane, domConstruct, on, keys) {
var pane = new ContentPane({style: "background-color: green; width: 100%; height: 100%"});
var div = domConstruct.toDom("<div>Some content here</div>");
domConstruct.place(div, pane.containerNode);
pane.placeAt("content");
on(pane, "click", function() {
_launchIntoFullscreen(pane.containerNode);
});
});
function _launchIntoFullscreen (pElement) {
if(pElement.requestFullscreen) {
pElement.requestFullscreen();
} else if(pElement.mozRequestFullScreen) {
pElement.mozRequestFullScreen();
} else if(pElement.webkitRequestFullscreen) {
pElement.webkitRequestFullscreen();
} else if(pElement.msRequestFullscreen) {
pElement.msRequestFullscreen();
}
}
</script>
<div style="width: 300px; height: 100px;">
<div id="content"></div>
</div>
<div id="othercontent">Some other content</div>
</body>
</html>
It seems, the enclosing dijit Layout Containers prevented the element to stretch to width and height 100%.
The solution I found was not obvious for me, but it works:
install a handler notified on fullscreen mode change
in the handler set width and height to 100% when fullscreen mode is activated.
So I changed my function _launchIntoFullscreen to
function _launchIntoFullscreen (pElement,pFunction) {
if(pElement.requestFullscreen) {
pElement.onfullscreenchange = function(pEvent) {
if(pFunction) {
pFunction(document.fullscreenElement);
}
}
pElement.requestFullscreen();
} else if(pElement.mozRequestFullScreen) {
pElement.onmozfullscreenchange = function(pEvent) {
if(pFunction) {
pFunction(document.mozFullScreenElement);
}
}
pElement.mozRequestFullScreen();
} else if(pElement.webkitRequestFullscreen) {
pElement.onwebkitfullscreenchange = function(pEvent) {
if(pFunction) {
pFunction(document.webkitFullscreenElement);
}
}
pElement.webkitRequestFullscreen();
} else if(pElement.msRequestFullscreen) {
pElement.onmsfullscreenchange = function(pEvent) {
if(pFunction) {
pFunction(document.msFullscreenElement);
}
}
pElement.msRequestFullscreen();
}
}
and invoke the function as
_launchIntoFullscreen(canvas.domNode,lang.hitch(this,function(pElem) {
if(pElem) {
pElem.style.width = "100%";
pElem.style.height = "100%"
}
}));
This solution has a drawback, in that the users sees (for a very short moment), that the element is resized after switching to fullscreen mode
I have some div. i want adjust div width on dragging
My problem is
When i use draggable div id in script only one div work properly
If i use the common class all div are adjustable when drag a single one
how can solve this?
$(function () {
var container = $('.middletablediv'),
base = $('#timebase1'),
handle = $('#handle');
handle.on('mousedown', function (e) {
isResizing = true;
lastDownX = e.clientX;
});
$(document).on('mousemove', function (e) {
// we don't want to do anything if we aren't resizing.
if (!isResizing)
return;
var p = (e.clientX - base.offset().left);
base.css('width', p);
}).on('mouseup', function (e) {
// stop resizing
isResizing = false;
});
})
.activelevel1 {
background-color: #EA623E;
}
.timescalebase {
margin-top: 13px;
height: 7px;
position: relative;
width: 60px;
height: 5px;
}
#handle {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 8px;
cursor: w-resize;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" style="width:100%;margin-top:25px;">
<div id="timebase1" class="timescalebase activelevel1">
<div id="handle" ></div>
</div>
<div id="timebase2" class="timescalebase activelevel1">
<div id="handle"></div>
</div>
<div id="timebase3" class="timescalebase activelevel1">
<div id="handle"></div>
</div>
<div id="timebase4" class="timescalebase activelevel1">
<div id="handle"></div>
</div>
When using handle as a common class to make multiple sliders you need to get the parent element (ie timescalebase) of the handle and use that as base.
You can do this by using jQuery's closest() method in the handle's mousedown handler
handle.on('mousedown', function(e) {
base = $(this).closest(".timescalebase");
Demo
$(function() {
var container = $('.middletablediv'),
base = null,
handle = $('.handle'),
isResizing = false;
handle.on('mousedown', function(e) {
base = $(this).closest(".timescalebase");
isResizing = true;
lastDownX = e.clientX;
});
$(document).on('mousemove', function(e) {
// we don't want to do anything if we aren't resizing.
if (!isResizing)
return;
var p = (e.clientX - base.offset().left);
base.css('width', p);
}).on('mouseup', function(e) {
// stop resizing
isResizing = false;
});
})
.activelevel1 {
background-color: #EA623E;
}
.timescalebase {
margin-top: 13px;
height: 7px;
position: relative;
width: 60px;
height: 5px;
}
.handle {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 8px;
cursor: w-resize;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" style="width:100%;margin-top:25px;">
<div id="timebase1" class="timescalebase activelevel1">
<div class="handle"></div>
</div>
<div id="timebase2" class="timescalebase activelevel1">
<div class="handle"></div>
</div>
<div id="timebase3" class="timescalebase activelevel1">
<div class="handle"></div>
</div>
<div id="timebase4" class="timescalebase activelevel1">
<div class="handle"></div>
</div>
HTML:
<div class="inline-wrapper">
<div class="inline-blocks" id="f">123</div>
<div class="inline-blocks" id="s">123</div>
<div class="inline-blocks" id="t">123</div>
<div class="inline-blocks" id="fo">123</div>
</div>
CSS:
html, body {
width: 100%;
height: 100%;
/* overflow: hidden;*/
}
.inline-wrapper{
width: 400%;
height: 100%;
font-size: 0;
position: relative;
}
.inline-blocks{
display: inline-block;
width: 25%;
height: 100%;
vertical-align: top;
position: relative;
}
>.inline-blocks:nth-child(1){
background-color: #000;
}
.inline-blocks:nth-child(2){
background-color: blue;
}
.inline-blocks:nth-child(3){
background-color: red;
}
.inline-blocks:nth-child(4){
background-color: green;
}
How can I slide them without ID?
In fact this is the work of the slider. But I can not understand the logic.
Want to understand how flipping without ID.
We must check the blocks and give them Ńurrent class.
Auto Slide
HTML:
<div class="inline-wrapper">
<div class="inline-blocks" id="f">123</div>
<div class="inline-blocks" id="s">123</div>
<div class="inline-blocks" id="t">123</div>
<div class="inline-blocks" id="fo">123</div>
</div>
jQuery:
(function () {
var numDivs = $('.inline-wrapper').children().length; //Count children ELements
var counter = 1;
function slide(time, counter) {
var $currentDiv = $('.inline-wrapper .inline-blocks:nth-child(' + counter + ')'); //get next element
var position = $currentDiv.position(); //get position of next element
if (numDivs > 1) {
$('html,body').animate({
scrollLeft: position.left
}, time / 2); //Animate to next element
}
};
$('.inline-blocks').on('click', function () {
counter = counter + 1;
slide(2000, counter);
});
})();
DEMO