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.
Related
I am trying to create a sticky menu using CSS Bootstrap affix and list-group menu.
I manage to get most of it to work except for when the user scrolls down.
When the user scrolls down, the menu seems to take the entire with of the page.
I tried to set it up via data attributes
using something like this
<div class="container">
<div class="row">
<div class="col-md-3" id="leftCol">
<div data-spy="affix">
<div class="list-group list-group-root well">
<a class="list-group-item" href="#introduction">Introduction</a>
<a class="list-group-item" href="#features">Features</a>
<a class="list-group-item" href="#dependencies">Dependencies</a>
</div>
</div>
</div>
<div class="col-md-9" id="mainCol">
Some long text for the body along with some tables.
</div>
</div>
</div>
But the data attribute did not make the menu stick! it just kept it on the top.
So I tried to use JS to get the job done like this
$(function(){
$('#leftCol').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
});
});
I created jsFiddle to show you the current behavior.
How can I fix this affix so when the user scrolls down the menu maintain the same shape?
First of all, you should use either data-attributes or JS.
I updated your jsFiddle. The position of id="leftCol" was changed:
<div class="col-md-3" >
<div id="leftCol">
...
</div>
</div>
and style was added:
#leftCol {
width: 220px;
}
Also, you should add media queries to remove affix from mobile view.
As an "unacceptable" workaround, I set a max width of the menu to 250px like so
.list-group.list-group-root {
padding: 0;
max-width: 250px;
}
I am not sure how to get it to work without adding a max-with the max with should be defined by the parent. In this case class="col-md-3"
UPDATED
javascript to the rescue!
I added the following JS code to solve this problem once an for all.
It basically resize the menu everytime affix.bs.affix event is fired
$(document).on('affix.bs.affix', '#docs-menu', function() {
$(this).width($(this).width());
});
From the docs
affix.bs.affix => This event fires immediately before the element has
been affixed.
Ok I believe I got most of the code working like you want it to. The main changes I made were adding this CSS:
#leftCol {
display: block;
height: auto;
padding: 0;
width: 100%;
}
.navbar-fixed-top-again {
position: static;
top: 60px;
z-index:1031;
}
.navbar-inner {
background: red;
padding: 5px;
}
.affix {
position: fixed !important;
}
and I changed up some of the structure on your HTML:
<div class="container body-content">
<div>made up content to allow the navigation to scroll more before it becomes sticky. This height will need to be set in the data-offset-top which is in the leftCol DIV just below this content. The same will apply if you need to set it for a footer offset.</div>
<!-- new nav section -->
<div class="col-md-3 navbar-fixed-top-again" id="leftCol" data-spy="affix" data-offset-top="80">
<div class="navbar-inner">
<div class="list-group list-group-root well">
*the rest of your code*
</div>
</div>
</div>
</div>
The main problem now is having a sticky navigation menu with variable height. If you notice when you scroll your reading content underneath jumps up and gets hidden. It seems that it is possible to fix this using JavaScript (link to SO question).
Heres the link to your updated Fiddle. Hope that helps.
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 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
This question already has answers here:
Why doesn't height: 100% work to expand divs to the screen height?
(12 answers)
Closed 8 years ago.
I have a div with height: 100%; but it's not working. When I declare a fixed height (for example height: 600px;) it is working, but I would like a responsive design.
html:
<blink><div class="row-fluid split-pane fixed-left" style="position: relative; height: 78%;">
<div class="split-pane-component" style="position: relative; width: 50em;">
<div style="">
<ul class="nav nav-tabs">
<li class="active">Html</li>
<li>Helpers</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="html" style="height: 100%;">
<textarea id="htmlArea" style="height: 100%;">{{:html}}</textarea>
</div>
<div class="tab-pane" id="helpers" style="height: 100%;">
<textarea id="helpersArea">{{:helpers}}</textarea>
</div>
</div>
</div>
</div>
<div class="split-pane-divider" id="my-divider" style="left: 50em; width: 5px;"></div>
<div class="split-pane-component" style="left: 50em; margin-left: 5px;">
<div style="">
<ul class="nav nav-tabs">
<li>
<a href="#" class="active">Preview
<img width="22px" height="16px" class="preview-loader" src="img/spinner-green2.gif" style="display: none" />
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" style="height: 100%;">
<iframe name="previewFrame" frameborder="0" allowtransparency="true" allowfullscreen="true" style="width: 100%; height: 100%;"></iframe>
</div>
</div>
</div>
</div>
</div>
</blink>
You probably need to declare the code below for height:100% to work for your divs
html, body {margin:0;padding:0;height:100%;}
fiddle: http://jsfiddle.net/5KYC3/
You aren't specifying the "height" of your html. When you're assigning a percentage in an element (i.e. divs) the css compiler needs to know the size of the parent element. If you don't assign that, you should see divs without height.
The most common solution is to set the following property in css:
html{
height: 100%;
margin: 0;
padding: 0;
}
You are saying to the html tag (html is the parent of all the html elements) "Take all the height in the HTML document"
I hope I helped you. Cheers
I would say you have two options:
to get all parent divs styled with 100% height (including body and html)
to use absolute positioning for one of the parent divs (for example #content) and then all child divs set to height 100%
Set the containing element/div to a height. Otherwise your asking the browser to set the height to 100% of an unknown value and it can't.
More info here: http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm
I believe you need to make sure that all the container div tags above the 100% height div also has 100% height set on them including the body tag and html.
For code mirror divs refer to the manual, these sections might be useful to you:
http://codemirror.net/demo/fullscreen.html
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
theme: "night",
extraKeys: {
"F11": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
And also take a look at:
http://codemirror.net/demo/resize.html
Also a comment:
Inline styling is horrible you should avoid this at all costs, not only will it confuse you, it's poor practice.
Night's answer is correct
html, body {margin:0;padding:0;height:100%;}
Also check that your div or element is NOT inside another one (with height less than 100%)
Hope this helps someone else.
So I have a div:
<div id="lol">
Some random text!
</div>
And I have other div:
<div id="happy">
lol
</div>
How could a make an animation, in which the first div is smoothly replaced by the second one? If a Do a fadeIn/fadeOut, the second div would only starting to happear after the first div was gone.
I think simply this would work.
$("#happy").hide();
$("#smooth").click(function(){
$("#happy").show();//no transition for this
$("#lol").slideUp();//with transition
});
here is a demo fiddle
or you can even toggle the effect like this
Yes. Quite easy. Assuming #lol is visible and #happy is not. (You can use jQuery's show/hide to set that up).
$('#lol').fadeOut(function() {
$('#happy').fadeIn();
});
$("#lol").fadeOut(1000,function(){
$("#happy").fadeIn();
});
I think that is what do you want:
$("button").click(function () {
$(".happy").toggle('slow');
});
JSFIDDLE
You can add a class to both of these divs, then toggle the class. This will allow both to toggle simultaneously (one fades in at the same time the other is fading out).
HTML
<div id="lol" class="toggle">
Some random text!
</div>
<div id="happy" class="toggle">
lol
</div>
<button id="btn">Replace</button>
JQuery
$("#happy").hide();
$("#btn").click(function() {
$(".toggle").toggle(2000);
});
JSFiddle
Using fadeOut/fadeIn will work if you use absolute positioning. There are many other options as well.
I'm not at all sure what you would like to see in your final result, but here are a few examples:
Example fiddle
CSS:
div.container {
position: relative;
height: 30px;
}
div.container div {
position: absolute;
top: 0;
left: 0;
}
HTML:
<div class="container">
<div id="lol">Some random text!</div>
<div id="happy" style="display: none">lol</div>
</div>
<div class="container">
<div id="lol1">Some random text!</div>
<div id="happy1" style="display: none">lol</div>
</div>
<div class="container">
<div id="lol2">Some random text!</div>
<div id="happy2" style="left: -200px">lol</div>
</div>
<div class="container">
<div id="lol3">Some random text!</div>
<div id="happy3" style="left: 200px; opacity: 0;">lol</div>
</div>
Sample code:
$('#lol').fadeOut(1000);
$('#happy').fadeIn(1000);
$('#lol1').slideUp(1000);
$('#happy1').slideDown(1000);
$('#lol2').animate({left: -200});
$('#happy2').animate({left: 0});
$('#lol3').animate({left: -200}, 1000);
$('#happy3').animate({left: 0, opacity: 1}, 1500);