jQuery - Draggable Div with width and height counter (Demo code included) - javascript

All.
I've been messing with this project for a few days, trying different codes, making some progress, then getting stuck.
The below code is the closest I've come to a working example.
This one counts the WIDTH from the LEFT panel.
I need it to count the WIDTH from the RIGHT panel.
--UPDATED--
I've made it drag from the RIGHT, and it calculates its width from the RIGHT. Unfortunately, the HEIGHT is still not working when the div grows in height, but the width counts.
As you will see when you run the demo below, when you drag the bar, the left panel does not stay attached, along with other issues.
Almost as if it was designed to run one way only.
I know I am missing something here, just not sure what?
Best Viewed In Full Screen.
Thank you.
Wayne
Here is the code
var info = document.getElementById('Info');
var left = document.getElementById('drag-left');
var right = document.getElementById('drag-right');
$(function() {
$(right).resizable({
minHeight: 200,
minWidth: 320
});
$(left).resizable({
minHeight: 200,
minWidth: 320
});
});
// Left Panel
$(right).resizable({
handles: 'w',
resize: function(event, ui) {
// var width = $("body").width() - ui.size.width;
// var height = $("body").height() - ui.size.height;
var width = ui.size.width;
var height = ui.size.height;
$(left).width(left);
$(info).text("Width: " + width + "px; & Height: " + height + "px;");
}
});
/*This is to create the BAR in the middle to grab.
To change which one gets it, change the (e) to (w)
E = Left panel
W = Right Panel*/
.ui-resizable-w {
background-color: black;
}
.ui-resizable-w:hover {
cursor: col-resize;
}
* {
box-sizing: border-box;
}
p {
color: darkslategray;
}
.drag-container {
display: flex;
width:1000px;
padding:5px;
}
[class^=panel] {
padding: 60px 24px;
background-color: whitesmoke;
}
.panel-one {
width: 100%;
flex: 1 1 auto;
}
.panel-two {
width: 60%;
}
#drag-right, #drag-left {
min-height:200px;
min-width:320px;
border:1px double green;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Simple JS Dragbar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body translate="no" >
<div class="drag-container">
<div class="panel-one" id="drag-left">
<h2>Panel 1</h2>
<p>Look, everyone wants to be like Germany, but do we really have the pure strength of 'will'? But I know you in the future. I cleaned your poop. Large bet on myself in round one. Take me to your leader! My fellow Earthicans, as I have explained in my book 'Earth in the Balance'', and the much more popular ''Harry Potter and the Balance of Earth', we need to defend our planet against pollution. Also dark wizards.</p>
</div>
<div class="panel-two" id="drag-right">
<h2>Panel 2</h2>
<p>So, how 'bout them Knicks? You guys go on without me! I'm going to go… look for more stuff to steal! Guards! Bring me the forms I need to fill out to have her taken away! Do a flip! Calculon is gonna kill us and it's all everybody else's fault!</p>
</div>
</div>
<div style="float:right; height:30px; width:320px; border:1px double green; padding:40px 4px;">Width: 320px;<br />
<span id="Info">Information Goes Here</span>
</div>

Related

Tag object being changed dynamically by displaying html from a code editor

Hello stackoverflow community, I have a question regarding the use of the <object> html tag. Below is a description of what I want to do:
I am using the summernote editor, however I would like every change within the editor to be presented to the user as the html page will be. I am currently using the following code:
$('#summernote').summernote({
placeholder: 'Hello bootstrap 4',
tabsize: 2,
height: 300,
lang: 'pt-BR'
});
$("#summernote").on("summernote.change", function(e) { // callback as jquery custom event
console.log('it is changed');
myFunction();
});
var i = 0;
var dragging = false;
$('#dragbar').mousedown(function(e) {
e.preventDefault();
dragging = true;
var main = $('#main');
var ghostbar = $('<div>', {
id: 'ghostbar',
css: {
height: main.outerHeight(),
top: main.offset().top,
left: main.offset().left
}
}).appendTo('body');
$(document).mousemove(function(e) {
ghostbar.css("left", e.pageX + 2);
});
});
$(document).mouseup(function(e) {
if (dragging) {
var percentage = (e.pageX / window.innerWidth) * 100;
var mainPercentage = 100 - percentage;
$('#console').text("side:" + percentage + " main:" + mainPercentage);
$('#sidebar').css("width", percentage + "%");
$('#main').css("width", mainPercentage + "%");
$('#ghostbar').remove();
$(document).unbind('mousemove');
dragging = false;
}
});
function myFunction(data) {
var text = $('#summernote').summernote('code');
document.getElementById("demo").innerHTML = "<!DOCTYPE html><html><meta charset='UTF-8'>" + text + "</html>";
console.log(document.getElementById("demo"));
console.log(text);
}
.clearfix:after {
content: '';
display: table;
clear: both;
}
#main {
float: right;
width: 50%;
}
#sidebar {
width: 50%;
float: left;
overflow-y: hidden;
}
#dragbar {
/*background-color: #a9a9a9;*/
background: transparent;
height: 100%;
float: right;
width: 3px;
cursor: col-resize;
}
#ghostbar {
width: 3px;
background-color: #a9a9a9;
opacity: 0.5;
position: absolute;
cursor: col-resize;
z-index: 999
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summernote Editor</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-bs4.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-bs4.js"></script>
<script src="summernote-pt-BR.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<!--<div id="summernote"></div>-->
<div id="sidebar" class="col">
<span id="position"></span>
<div id="dragbar">
</div>
sidebar
<form method="post">
<textarea id="summernote" name="editordata"></textarea>
<button type="submit" class="btn btn-primary">Salvar</button>
</form>
</div>
<div id="main">main
<p id="demo"></p>
</div>
</div>
</div>
</body>
</html>
But instead of using the <p> tag along with innerHtml, I'd like to use the <object> tag, and its contents being changed daily.
If you have other better solutions, feel free to make suggestions.
Note: I have already tried using the tag but somehow using this tag hinders the resize that I need to perform between the editor and html viewer.
Note 2: I'm a beginner, and my English is not good. So sorry if something went wrong without making sense. I used Google translate to explain the issue.
Hi Rafael — thanks for clarifying.
The reason your code looks different in the iframe or object tags is due to the differing CSS. When you use an iframe and set the source dynamically, the CSS comes from the User Agent Stylesheet. The tag does not inherit the parent's styles. Currently, your CSS in the p tag is from Bootstrap 4.
Option 1: You could customize the CSS on this element to make it appear consistent in a non-Bootstrap context.
Option 2: If you still want to change tags, I think you are better off using an iframe instead of an object tag, per the MDN docs and the discussion on this SO thread.
Change <p id="demo"></p> to <iframe id="demo"></iframe>, and your myFunction to:
function myFunction(data) {
var text = $('#summernote').summernote('code');
var frame=document.getElementById("demo");
frame.srcdoc="<!DOCTYPE html><html><meta charset='UTF-8'>" + text + "</html>";
}
If you support IE11, Edge, and Opera Mini (srcdoc is not supported there) you can use a polyfill.
One final consideration with this route is performance — I couldn't find much on this, but I suspect that setting the innerHTML of your p tag is far less expensive than re-rendering an iframe. You might want to investigate and consider reducing the update interval if this becomes a problem.

Calculating jQuery UI resizable min & max width in the "resizestart" event

I am really new to Javascript and I am having a little difficulty knowing my way around.
I am trying to make a jQuery plugin for handling resizing elements using the jQuery UI resizable plugin.
When the user starts to resize the div, I want to carry out some logic to determine the minimum & maximum size I would like them to be able to re-size it to but in the documentations examples this is always declared ahead of time.
Below is my attempt to start this off and then I got a bit lost. This is first thing in Javascript I am making beyond a simple change of text or color.
$.fn.myresize = function() {
// add draggable handle only on right
this.resizable({
handles: 'e'
});
var calculateSizes = function(event, ui) {
// in reality I am reading several different values to work these value out but for simplicity sake here is just arbitary numbers
var minWidth = 100;
var maxWidth = 100 * 3;
// how do I now set the min & max values for jQuery UI resizable?
}
// call my function for calculating the min & max width
this.on("resizestart", calculateSize);
};
$(function() {
$("#resizable").myresize();
});
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<h2>Resizable</h2>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
(Jsfiddle mirror for mobile users: https://jsfiddle.net/9909zfz0/)
I suppose I could work out the sizes for every element of the page ahead of time but this seems like a lot of overhead when I am only interested in adjacent siblings if they want to resize it.
Some general advice here would be much appreciated.
I managed to find a snippet that was setting an option and figured it out. Here it is.
$.fn.myresize = function() {
// add draggable handle only on right
this.resizable({
handles: 'e'
});
var calculateSizes = function(event, ui) {
// in reality I am reading several different values to work these value out but for simplicity sake here is just arbitary numbers
// here it is
ui.element.resizable("option", "minWidth", 100);
ui.element.resizable("option", "maxWidth", 100 * 3);
}
// call my function for calculating the min & max width
this.on("resizestart", calculateSizes);
};
$(function() {
$("#resizable").myresize();
});
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<h2>Resizable</h2>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>

Controlling image height in Bootstrap-Lightbox gallery

I'm working on a website of an artist, so galleries are really important. I'm using Bootstrap for the website, and Lightbox for Bootstrap plugin for the galleries. It works fine adjusting the width of the image to any resolution (I want to make it as responsive as possible). But, as you can observe if you click on any vertical photo (for example, the one in the second row, second column), when it opens, it's bigger than the screen and it can't be seen without scrolling.
So, I want to get rid of this problem, adjusting the maximum height of the image to the height of the screen. But I can't find the way to do this. Any ideas for doing it in a simple way? I've uploaded the website to a server so you can see the problem: http://mural.uv.es/ivape2/es/galeria.html
Thank you.
I had a similar problem and tinny77's answer was the only thing that approached a solution.
Here is a working snippet of what I ended up with
$().ready(function() {
$('[data-toggle="lightbox"]').click(function(event) {
event.preventDefault();
$(this).ekkoLightbox({
type: 'image',
onContentLoaded: function() {
var container = $('.ekko-lightbox-container');
var image = container.find('img');
var windowHeight = $(window).height();
if(image.height() + 200 > windowHeight) {
image.css('height', windowHeight - 150);
var dialog = container.parents('.modal-dialog');
var padding = parseInt(dialog.find('.modal-body').css('padding'));
dialog.css('max-width', image.width() + padding * 2 + 2);
}
}
});
});
});
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js" type="text/javascript"></script>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/3.3.0/ekko-lightbox.min.js"></script>
</head>
<body>
<p>Click Image</p>
<a href="http://lorempixel.com/400/1920" data-toggle="lightbox">
<img height="200" src="http://lorempixel.com/400/1920"/>
</a>
</body>
</html>
I solved it this way by editing the Javascript:
onContentLoaded: function() {
var imgh = $(".ekko-lightbox-container").find("img").height();
var winh = $(window).height();
if ((imgh+200)>winh)
{
$(".ekko-lightbox-container").find("img").css("height",winh-150).css("width","auto").css("margin","0 auto");
}
}
See the JSFiddle
.container {
height:100%;
width: 100%;
border: 1px solid #000000;
}
.item {
max-height: 90%;
max-width: 90%;
border: 1px solid #000000;
}
Assuming you have a .container width a given width/height. I've put both width and height at 100% for the .container
Then you just create a class and asign it max-width: 80%; which will output the image to be 80% the width of the .container
Try adding this
.ekko-lightbox.modal.fade.in div.modal-dialog{
max-width:27%;
}
This is just simple solution, best it will be to make media-queries for different resolution
This has been solved (commit on github) by calculating the maximum image height (80% of viewport height) in the preload function but currently it is not part of the base branch.

'Attaching' divs to either side of fluid content (diagram inside...)

I'm trying to figure out the best way to attach two fixed width divs to a fluid center div. I've searched around for an answer to this problem but most people require a 3 column layout to fill the entire width of the screen, whereas I would like a variable amount of whitespace either side.
The intention is that the fluid div will wrap around images scaled to a fixed height but variable width.
Ideally if the edge of the screen is reached the two fixed divs wont go any further. Could this be done with pure css/a framework or is it easier to use javascript? I'm using node.js server-side if it helps.
Right now I'm using inline-block as a way to make it work, but it seems buggy when using percentage widths. It doesn't resize correctly the until page is refreshed, so I was hoping there was a better way.
Center the div containing fluid and fixed elements and, then float:left them.
Demo: http://jsfiddle.net/2utM4/4/
Where is the width coming from? [edit] added offsetWidth.
Here is a javascript approach -- I included an equal-heights routine.
It has the max-width check. The code is commented.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
* { outline:1px dotted #000; } /* all things */
body { padding:0; border:0; margin:0; }
#bodyid { }
#header, #footer { background:#eee; clear:both; }
#middle3 { background:#fee; clear:both; margin:auto; }
#fixedl { background:#efe; float:left; width:50px; }
#fluid1 { background:#eef; float:left; }
#fixedr { background:#efe; float:left; width:50px; }
</style>
<script type="text/javascript">
function f1() { // process center 3 cols
var wfluid1 = document.getElementById("fluid1").offsetWidth;
var wfixedl = wfixedr = 50; // are fixed
var wfluid1 = Math.min(wfluid1, screen.width - wfixedl - wfixedr); // max
var wmiddle3 = wfixedl + wfluid1 + wfixedr;
document.getElementById("middle3").style.width = wmiddle3 + "px";
document.getElementById("fluid1").style.width = wfluid1 + "px";
colsequal(new Array("fixedl", "fluid1", "fixedr")); // equal heights
}
function colsequal(v1) { // makes column heights equal
var h = document.getElementById(v1[0]).offsetHeight;
for (i=1; i<v1.length; i++) { // get maximum height
h = Math.max(h, document.getElementById(v1[i]).offsetHeight); }
for (i=0; i<v1.length; i++) { // make all maximum
document.getElementById(v1[i]).style.height = h + "px"; }
}
</script>
</head>
<body onload="f1();">
<div id="bodyid">
<div id="header">Header</div>
<div id="middle3">
<div id="fixedl">Fixed<br />1</div>
<div id="fluid1">Fluid<br />1<br />2<br />3</div>
<div id="fixedr">Fixed<br />1<br />2</div>
</div>
<div id="footer">Footer</div>
</div><!-- bodyid -->
</body>
</html>

Missing pixels & body stops centering when resizing jquery

I'm facing some problems with this code. I thought may be you could help me.
First of all, my sections have no padding and no border so the pixels are used only for top, left, right and width properties
and there is no need for outerWidth().
First problem:
In the beginning I set the body 'left' and 'right' property at (window_width - 1100 = 180) so my body width
is 920px.
The thing is it's not. It turns to be 904. I've tested it with chrome and mozilla.
I don't know where the 16 missing pixels are.
Second:
I want my body to be centered when I resize the window and my margins to grow less until body occupies the whole
window.
My body doesn't remain centered, plus only one of the margins grows less.
I found out this is happening because '#content', '#mainContent', 'aside' have a width. I kinda' need that width to be set.
Is there any way I can make my window center itself with jquery and do all the stuff above?
Here is my code:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
body{
position:absolute;
}
#content{
background-color: green;
}
#mainContent{
background-color: orange;
}
aside{
background-color: blue;
}
.floatLeft{
float:left;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<section id="content" class="border">
<section id="mainContent" class="floatLeft" >
mainContent
</section>
<!-- End of main content -->
<aside class="floatLeft">
aside
</aside>
<!-- End of aside -->
<p class="clear"></p>
</section>
<!-- End of content -->
<script type="text/javascript">
$(document).ready(function(){
change_template();
});
change_template = function(){
var window_h, window_w, top, left_right, content_w, mcontent_w, aside_w;
window_h = $(window).height();
window_w = $(window).width();
top = window_h - (window_h - 100);
left_right = window_w - 1100;
content_w = window_w - 2*left_right;
$('#content').css('width', content_w);
mcontent_w = content_w - 300;
$('#mainContent').css('width', mcontent_w);
aside_w = content_w - mcontent_w;
$('aside').css('width', aside_w);
resize_body(top, left_right, left_right);
//next three lines are written only for demonstration purpose
left_right = ($(window).width() - parseInt($('body').css('width')))/2;
alert('body width: '+$('body').css('width'));//it supposed to be 920
alert('left propery value: '+left_right);//it supposed to be 180
$(window).resize(function(){
left_right = ($(window).width() - parseInt($('body').css('width')))/2;
resize_body(top, left_right, left_right);
});
}
resize_body = function(top, left, right){
$('body').css('top', top+'px');
$('body').css('left', left+'px');
$('body').css('right', right+'px');
}
</script>
</body>
</html>
Reset browser style:
html, body {
margin: 0 auto;
padding: 0;
}

Categories