I am developing an app with many draggable and droppable elements. They all work except in this one case:
This should be draggable:
<div id="8093244595324" class="insertion ui-draggable" style="z-index: 4; position: relative;">
Test Accou...<br />0.330H
</div>
And here's some surrounding HTML.
<div class="paginationPageMargin" style="">
<div id="8195443196587" class="paginationPage" style="">
<div id="8290907158934" class="oneEighthPageLayer" style=""></div>
<div id="8222242963571" class="oneSixthPageLayer" style=""></div>
<div id="8460851026264" class="oneThirdPageLayer" style="">
<div id="8072616373566" style="height: 33%;">
<div id="8686623363113" class="oneThird insertionBlock" value=" " style="">
<div id="8093244595324" class="insertion ui-draggable" style="z-index: 4; position: relative;">
Test Accou...<br />0.330H
</div>
</div>
</div>
<div id="8810410276771" style="height: 33%;">
<div id="8605800682859" class="oneThird insertionBlock" value=" "></div>
</div>
<div id="8509644301764" style="height: 33%;">
<div id="8708665901661" class="oneThird insertionBlock" value=" "></div>
</div>
</div>
</div>Page 1
</div>
Note that there's some z-index stuff going on here. The draggable element itself is index 4. Each page layer div also has a z-index:
.oneThirdPageLayer {
z-index: 1;
height: 100%;
}
.oneSixthPageLayer {
z-index: 2;
height: 100%;
}
.oneEighthPageLayer {
z-index: 3;
height: 100%;
}
I'm not sure if the z-index stuff is relevant or not, as I've taken care to ensure that the element that I'm binding draggable to is on the top of the stack.
Here's the draggable binding:
$('.insertion').draggable({
start: handleDragStart
});
And handleDragStart:
function handleDragStart( event, ui ) {
var $insertion = ui.helper,
insertion = getInsertion($insertion.attr('id'));
// This insertion is in the air now... it has no blocks
insertion.insertionBlocks = [];
}
Any insight would be much appreciated.
I removed all z-index values except for the insertions.
Related
1.I am trying to get a fixed position div (#externalPopupHeader) to inherit the width of its parent width(#reportsWrap) with no success.
2 I am also trying to get the #externalPopupHeader div with the lengthy content to scroll horizontally WITHOUT the scroll bar being visible. This is required because I would then Like to use javascript to sync the column headings with the content below.
#reportsWrap{
min-width: 1050px;
overflow: hidden;
position: relative
}
#externalPopupHeader{
width: inherit // Have aslo tried min-width: 1050px, and width: 100%;
position: fixed;
top: 0
overflow-x: scroll // hidden disables the scrolling.
}
<div id="reportsWrap">
<div id="externalPopupHeader">
<div id="genConfigFieldsWrap">
<div class="genField">Record No.</div>
<div class="genField">Serial Number</div>
<div class="genField">Room Number</div>
<div class="genField">Codec IP</div>
<div class="genField">Model</div>
<div class="genField">Version</div>
<div class="genField">NTP Status</div>
<div class="genField">Speaker Track</div>
<div class="genField">Max RX Kbps</div>
<div class="genField">Max TX Kbps</div>
<div class="genField">Default Call Kbps</div>
<div class="genField">Remote View</div>
<div class="genField">Voice VLAN</div>
<div class="genFieldTrans">Transport</div>
<div class="genField">Olson Zone</div>
<div class="genField">Time Zone</div>
<div class="genField">Helpdesk</div>
<div class="genField">Provisioning</div>
</div>
</div>
<div id="innerReportWrap">
<div id="genConfigAnchor">
</div>
</div>
</div>
your code is ok. your div data is to small to check the original behavior.
try to add some more text to check.
<div class="genField">NTP Status NTP Status NTP Status NTP Status</div>
then you will see that it is correct.
you can check this example
https://jsfiddle.net/r61t50sb/1/
I'm using jQuery panzoom to zoom an image and some div elements. This works generally but the elements positioned on top of the image don't stay in their original locations. Is there anyway to keep the div elements where they were whilst being scaled?
JSFiddle: https://jsfiddle.net/828wu2dy/
HTML:
<section id="inverted-contain">
<div class="panzoom-elements">
<div class="item item1">ITEM 1</div>
<div class="item item2">ITEM 2</div>
<div class="panzoom">
<img src="http://www.hdwallpapers.in/walls/enchanted_forest-wide.jpg">
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range">
<button class="reset">Reset</button>
</div>
</section>
JS:
(function() {
var $section = $('#inverted-contain');
$section.find('.panzoom').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset"),
$set: $section.find('.panzoom-elements > div'),
startTransform: 'scale(0)',
increment: 0.1,
minScale: 1,
maxScale: 2,
contain: 'invert'
}).panzoom('zoom');
})();
CSS:
.panzoom-elements {
width: 50%;
height: 400px;
}
.item {
position: absolute;
z-index: 10;
}
.item.item1 {
color: white;
background: black;
width:50px;
height:50px;
top: 300px;
left: 100px;
}
.item.item2 {
color: white;
background: black;
width:50px;
height:50px;
top: 200px;
left: 150px;
}
The other problem is that it also doesn't drag horizontally.
I've tried everything I can think of.
Part 1:
To fix your 'item' problem - try putting 'item' elements on one level with 'img' - I mean put them inside div class='panzoom'.
Works for me. ^ ^
<section id="inverted-contain">
<div class="panzoom-elements">
<div class="panzoom">
<div class="item item1">ITEM 1</div>
<div class="item item2">ITEM 2</div>
<img src="http://www.hdwallpapers.in/walls/enchanted_forest-wide.jpg">
</div>
</div>
<div class="buttons">
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range">
<button class="reset">Reset</button>
</div>
</section>
The method of thought that led me to this answer: while learning panzoom documentation for API, and examining your fiddle, I found that 'img' or anything that could be seen as direct selector to it (I mean like $('.panzoom').child().first() is nowhere mentioned in your script. That means that most probably img is zooming in/out not by itself. What I thought next - it seem that it's parent is changing. That would mean that you need to put your items inside of that changing space - it is the most logical way to handle it... I tried to test that idea - and it worked.
Part 2:
The other problem is that it also doesn't drag horizontally.
Add this to your CSS
.panzoom{ width: 1920px;}
This is the size of the image. Works for me.
Perhaps you also could add to .panzoom height of image. It is not required in your case where image is horisontal but it could matter when image is vertical.
I am currently working with jsPlumb & got stuck at saving & loading the containers. I figured out how to save the endpoints, connections & positions.
But I can't figure out, how to save the div containers, including their attributes, children & the children's attrubites.
Here's a snippet of the containers, any ideas how to stringify them?
<div class="window main node ui-draggable _jsPlumb_endpoint_anchor_" id="maincontainer1" data-nodetype="main" style="left: 663px; top: 200px; width: 230px; height: 200px;">
<div class="ctrl_container">
<div class="button_rm">x</div>
</div>
<div class="layer" id="layercontainer1_1" style="height: 80px; width: 100%; background: none repeat scroll 0% 0% transparent;">
<div class="window filter node" style="left:25px; top:5px;" name="3#2#ABC#" id="filtercontainer2_1_1">
<div class="ctrl_container">
<a class="filter_caption edit" href="#">Edit</a>
<div class="button_rm">x</div>
</div>
<div class="details_container">
<span id="filter_label" class="filter_label jtextfill" style="font-size: 22px;">PrimarySupportGrp = 123</span>
</div>
</div>
</div>
<div class="layer" id="layercontainer1_2" style="height: 90px; width: 100%; background: none repeat scroll 0% 0% rgba(0, 255, 255, 0.4);"><div class="line-separator"></div>
<div class="window filter node" style="left:25px; top:5px;" name="5#4#Yes#" id="filtercontainer2_2_1">
<div class="ctrl_container">
<a class="filter_caption edit" href="#">Edit</a>
<div class="button_rm">x</div>
</div>
<div style="" class="details_container">
<span id="filter_label" class="filter_label jtextfill" style="font-size: 14px;"> Site > Yes</span>
</div>
</div>
</div>
</div>
I don't suggest saving the complete children hierarchy, but if you want - why not use .html()
var data = [];
$(".layer").each(function(){
var html = $(this).html();
data.push(html);
});
OR
Just save what is required to re-render them at the correct position - left, top etc.
for(var i=0 ; i<length; i++){
var layerTemplate = "...div template html goes here";
var $layerTemplate = $(layerTemplate);
$layerTemplate.css({top : data[i].top , left : data[i].left});
$("#maincontainer1").append($layerTemplate);
}
Some time back I wrote a script for saving & re-rendering jsPlumb - https://github.com/nitinsurana/jsPlumb-Persistence
I am creating a single page website with a fixed navigation. Within the navigation there are two containers, the one on the left contains a series of headers that change as you click the links on the right. I am setting the display on each of the classes containing the headers to 'none' and attempting to display them with Jquery when you click the links on the right. But nothing I am trying is working. Is it possible to get a smooth transition using the fade element and Jquery to achieve a series of headers that change upon clicking the links?
Here is my code:
<div class="single-page-nav">
<div class="nav-container">
<div style="max-width: 1200px; min-width: 960px; margin: 0 auto; position: relative;">
<div style="position: absolute; right: 0; top: 40px; z-index: 999999;">
Home
About Us
Practice Areas
Contact
</div>
</div>
<div class="left">
<div class="header001"><h1>Doug Peterson</h1></div>
<div class="header002"><h1>About Us.</h1></div>
<div class="header003"><h1>Practice Areas.</h1></div>
<div class="header004"><h1>Contact.</h1></div>
</div>
<div class="nav"></div>
<div class="clearboth"></div>
</div>
</div>
Help the student.
Here is a basic working version of what it sounds like you want. You will need to style it to look the way you want, but the behavior (showing/hiding divs on click of the menu) is there. You might think about changing the naming scheme for hrefs and divs to make it easier to select the header div based on the link clicked.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"> </script>
<style>
.header{
display: none;
}
</style>
<script>
$(document).ready(function() {
var selected = '';
$( "a", "#headerLinks" )
.on( "click", function(){
var divCls = ".header00" + $( this ).attr( "href" ).substring($( this ).attr( "href" ).length -1 );
if( selected.length > 0 ){
$( selected, "#headers" )
.hide('fade', function(){
$( divCls, "#headers" )
.show('fade');
});
}else{
$( divCls, "#headers" )
.show('fade');
}
selected = divCls;
});
});
</script>
</head>
<body>
<div class="single-page-nav">
<div class="nav-container">
<div style="max-width: 1200px; min-width: 960px; margin: 0 auto; position: relative;">
<div id="headerLinks" style="position: absolute; right: 0; top: 40px; z-index: 999999;">
Home
About Us
Practice Areas
Contact
</div>
</div>
<div class="left" id="headers">
<div class="header header001"><h1>Doug Peterson</h1></div>
<div class="header header002"><h1>About Us.</h1></div>
<div class="header header003"><h1>Practice Areas.</h1></div>
<div class="header header004"><h1>Contact.</h1></div>
</div>
<div class="nav"></div>
<div class="clearboth"></div>
</div>
</div>
</body></html>
I use "OWL Carousel" jQuery plugin (http://www.owlgraphic.com/owlcarousel/) for in my small project.
I create small script that draggable via this plugin. now i want to disable dragging in specific element (Item)... but i don't know how to do that.
HTML:
<div class="wrap">
<div id="carousel">
<div class="part">
<div class="item">Item-1.1</div>
<div class="item">Item-1.2 NOT Draggble</div>
<div class="item">Item-1.3</div>
</div>
<div class="part">
<div class="item">Item-2.1</div>
<div class="item">Item-2.2 NOT Draggble</div>
<div class="item">Item-2.3</div>
</div>
<div class="part">
<div class="item">Item-3.1</div>
<div class="item">Item-3.2 NOT Draggble<div>
<div class="item">Item-3.3</div>
</div>
</div>
</div>
CSS:
div.wrap {
width: 990px;
min-height: 360px;
padding: 5px;
border: 2px solid #666;
margin: 10px auto;
}
div.item {
float: left;
border: 1px solid #ddd;
width: 324px;
margin: 1px;
min-height: 360px;
}
JS:
$(document).ready(function() {
$("#carousel").owlCarousel({
singleItem: true,
startPosition : -1,
autoPlayDirection : "rtl",
});
});
I know I should use to mouseDrag (http://www.owlgraphic.com/owlcarousel/#customizing) in a callback function , but i don't now how ... :(
I had the same problem and just figured it out:
Add a class to the items you want to disable (i.e. "disable-owl-swipe") and stop event propagation on touchstart and mousedown, so the parents (the owl carousel wrappers) don't receive the event and therefore don't swipe.
HTML:
<div class="wrap">
<div id="carousel">
<div class="part">
<div class="item">Item-1.1</div>
<div class="item disable-owl-swipe">Item-1.2 NOT Draggble</div>
<div class="item">Item-1.3</div>
</div>
<div class="part">
<div class="item">Item-2.1</div>
<div class="item disable-owl-swipe">Item-2.2 NOT Draggble</div>
<div class="item">Item-2.3</div>
</div>
<div class="part">
<div class="item">Item-3.1</div>
<div class="item disable-owl-swipe">Item-3.2 NOT Draggble<div>
<div class="item">Item-3.3</div>
</div>
</div>
</div>
JS:
$(".disable-owl-swipe").on("touchstart mousedown", function(e) {
// Prevent carousel swipe
e.stopPropagation();
})
Hope that helps!
I have the solution!
Just add the elements you want to exclude in "NDElement"
$( NDElement ).mousedown(function() {
$(".owl-wrapper").attr("class","dontdragg");
});
$( document ).mouseup(function() {
$(".dontdragg").attr("class","owl-wrapper");
});