crop_popup_box
<div id="crop_box" class="popup_box crop_popup">
<span class="popup-title" id="popup_title">Crop Image</span>
<div id="crop_div" style="display:none;">
<div style="margin-left:60px;" class="example">
<div class="default">
<div class="cropMain"><div class="crop-container" style="width: 320px; height: 320px;"><div class="crop-overlay" style="z-index: 6000; top: 0px; left: 0px;"></div><img class="crop-img" src="./jQuery & Canvas Image Cropper_files/one.jpg" style="z-index: 5999; top: -149.8px; left: -622.6650049850448px; width: 1402.7676969092722px; height: 549.6px;"></div></div>
<div class="cropSlider horizontal"><a style="left: 43%; z-index: 1;"><div class=""></div></a><input type="hidden" name="" value="2.29"></div>
</div>
</div>
</div>
</div>
script.js
$(function() {
$( ".popup_box" ).draggable();
});
I had applied draggable property to this crop popup.I am able to drag the entire popup.Is it possible to restrict the draggable function for class cropSlider horizontal in div.If the use click on div cropSlider horizontal and drag the popup should not get drag,because i am using a zoom bar in that div.While using the zoom bar the popup gets dragging and not able to zoom the image.
I tried this,
$('div.cropSlider').draggable( "disable" )
It is not working.Need help
You can also disable later on, when required:
$('div.cropSlider').draggable();
$('div.cropSlider').draggable( "option", "disabled", true );
Try to use:
$('.popup_box div.cropSlider').draggable({disabled: true});
use:
$(".popup_box").children('.cropSlider').draggable({disabled:true});
Related
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 have some reveal slideshow that I need to convert to a single page html. I've used jQuery to strip the code of all the reveal.js added classes, javascript, and stylesheets. For some reason, when I resize the page, a style is added to the div that hides half the content.
My code before resizing:
<div id="body">
<div id="slides-body">
<section id="slide-Title">
<div id="div-Title">
<h2>
My Title
</h2>
<button id="button-Single-Page" style="padding-bottom: 5px" class="smallButton" onclick="singlepagehtmlformat()">Click here for the single page html version.</button>
</div>
</section>
</div>
</div>
My code after resizing:
<div id="body">
<div id="slides-body" style="width: 960px; height: 770px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.920625);">
<section id="slide-Title">
<div id="div-Title">
<h2>
My Title
</h2>
<button id="button-Single-Page" style="padding-bottom: 5px" class="smallButton" onclick="singlepagehtmlformat()">Click here for the single page html version.</button>
</div>
</section>
</div>
</div>
Why is this happening? How can I fix it?
That is not the default behavior, there must be a window resize event as pointed by #Bas Van Stein delegated in the code causing that.
To fix, it you can just remove the attr "style" from the target div.
<script>
$().ready(function(){
$( window ).resize(function() {
$("#slides-body").removeAttr("style");
});
});
</script>
Example : http://jsfiddle.net/mzg2zk48/2/
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 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.
I'm trying to put over a leaflet map a bootstrap row, my html is:
<div class="row-fluid some" id="map">
<div class="span1"></div>
<div class="span2"></div>
</div>
span1 and span2 are columns with some information with rgba background. the leftover columns are a visible map area.
The problem is the map is showing over the columns and they are visible only when map is loading or zooming out.
span1 and span2 have z-index: 2000
How to I can put columns visible over the map?
You can put them in a common container, and absolutely position the row you want to overlay the map.
demo (with Leaflet)
<div class="container-fluid">
<div class="mapbox">
<div class="row-fluid some" id="map">
<img src="//placehold.it/600x400">
</div>
<div class="row-fluid overlay">
<div class="span1">
<button class="btn btn-primary">Button</button>
</div>
<div class="span2">
<button class="btn">Button</button>
</div>
</div>
</div>
</div>
.mapbox {
position: relative;
}
.mapbox .overlay {
position: absolute;
top: 0;
left: 0;
z-index: 314159;
pointer-events: none;
}
.mapbox .overlay .btn {
pointer-events: initial;
}
Clicking through an element is possible by specifying pointer-events: none. Note that this by default removes the ability to click children of said element (because the default pointer-events value is inherit), so declare pointer-events: initial on those elements you want to be able to interact with.
note: the reason the buttons are stacking on the fiddle is Bootstrap's media queries, are seeing the small preview as a mobile-phone size.