I'm creating a form wysiwyg builder and I'm having problems with the resizable jquery plugin. It seems that when I resize any item that is on the page the zoom goes out of whack. I have found a workaround for draggable here: Jquery draggable with zoom problem
But I cannot find the same workaround for resizable.
The scenario is when I create a resizable and draggable item and I zoom in or out the item seems to drift outside of its containing parent. You can see this
here:
http://drniermanoptometry.cu.cc/Main/Forms_Module/editForm.php/?name=horizontal-clickersearch.html
Note: click the allocation 'NO' button to create a resizable draggable item. And then zoom out using control++
I have set the containment to parent and the css position to relative to no avail.
There are a few other issues with resizable. When I resize the item it does not let me drag the item all the way to the right and draggable does not work in FF. Possibly related?
Update:
I have found out that there is a problem with margins set to auto so I have the left side of my resizeable container fixed to avoid the issue. But I still would like to know if there is a workaround for auto margins.
This guy has the same issue... http://www.webdeveloper.com/forum/showthread.php?236987-jQuery-resizable-with-margin-0-auto
Code Below:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$('.create').click(function(){
var jquerybox = $('<div/>' , {class: 'blocked form-item' , width: '100px', height: '20px' , background: 'red'} );
var zoom = $('#form-preview').css('zoom');
var canvasHeight = $('#form-preview').height();
var canvasWidth = $('#form-preview').width();
jquerybox.resizable({
containment: 'parent'
});
jquerybox.draggable({
containment: 'parent',
drag: function(evt,ui)
{
// zoom fix
ui.position.top = Math.round(ui.position.top / zoom);
ui.position.left = Math.round(ui.position.left / zoom);
// don't let draggable to get outside of the canvas
if (ui.position.left < 0)
ui.position.left = 0;
if (ui.position.left + $(this).width() > canvasWidth)
ui.position.left = canvasWidth - $(this).width();
if (ui.position.top < 0)
ui.position.top = 0;
if (ui.position.top + $(this).height() > canvasHeight)
ui.position.top = canvasHeight - $(this).height();
}
});
$('#form-preview').append(jquerybox);
});
});
function updateItem(Item){
//ajax call to update script
}
</script>
<style>
.blocked{
display:block;
background: red;}
#form-preview{
height: 550px;
width: 600px;
border: 2px solid black;
margin-left: auto;
margin-right: auto;
}
.centered{
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div id = "editbar">
<form action="Idkyet" method = "POST">
<table>
<tr>
<th>Type</th>
<th>Allocated</th>
</tr>
<?
error_reporting(E_ALL);
ini_set('display_errors', '1');
if(isset($_GET['name'])){
require_once '../../db_connect.php';
$sqlpre = 'SELECT id FROM forms WHERE name = "' . $_GET['name'] . '";';
$res = $mysqli->query($sqlpre);
$rds = $res->fetch_array();
$id = $rds['id'];
$res->free();
$sql = 'SELECT * FROM form_fields WHERE form_id = ' . $id ;
$res = $mysqli->query($sql);
if($res){
while($rds = $res->fetch_assoc()){
echo '<tr>';
echo '<td><input value = " ' . $rds['type'] . ' "type="textarea"></td>';
echo '<td><input class = "create centered" type="button" value = ' . (($rds['allocated'] == 1) ? 'Yes' : 'NO') . '></td>';
echo '</tr>';
}
}
}
?>
</table>
</form>
<div id = "form-preview">
<div class = "blocked"height = "20px"></div>
</div>
</div>
</body>
</html>
Related
I have a horizontal image gallery, the images for which is populated from a thumbnail folder. I want to create a utility where the clicked image always remain at the middle of the thumbnail image palette. Similar to the question asked here.
A minimal version of the code is as follows:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#loaded_img_panel {
border-top: solid 0.3em #f1ded9;
display:flex;
flex-wrap: nowrap;
overflow-x:auto;
padding: 10px 0 0 0;
}
#loaded_img_panel > ul > li {
list-style: none;
}
#loaded_img_panel ul li img {
display: inline;
width: 210px;
height:175px;
cursor: pointer;
}
#loaded_img_panel img.active{
border: 0.4em solid red;
padding : 5px;
}
#loaded_img_panel > caption {
display:block;
}
#loaded_img_panel img:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<div class="book-list-headbox">
<div class="page-number-box">
<label for="" id="total-page" value="" class="mb-0"></label>
<span class="separator">of</span>
<input type="text" id="current-page" value="1">
</div>
</div>
<div class="loaded_img_panel" id="loaded_img_panel">
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
window.addEventListener('load', function(e) {
var matchLst = "thumb";
var project = "upload";
if (matchLst !== null && matchLst !=="") {
$.post("loadimages.php", { 'project' : project,'matchLst' : matchLst }, function(output){
$("#loaded_img_panel").html(output).show();
});
}
})
$(function(){
$('#gotoframe').change(function() {
var i = $(this).val() -1;
activeBook(i);
localStorage.setItem('clicki', i);
});
$('#loaded_img_panel').on('click', 'img', function() {
activeBook($(this).index());
});
function activeBook(i){
$('#loaded_img_panel img').removeClass('active');
var active = $('#loaded_img_panel img').eq(i).addClass('active');
var left = active.position().left;
console.log("firstleft: " + left);
var currScroll= $(".loaded_img_panel").scrollLeft();
var contWidth = $('.loaded_img_panel').width()/2;
var activeOuterWidth = active.outerWidth()/2;
left= left + currScroll - contWidth + activeOuterWidth;
$('.loaded_img_panel').animate( {
scrollLeft: left
},'slow');
}
});
</script>
loadimages.php
<?php
session_start();
$project = $_POST['project'];
$match = $_POST['matchLst'];
$_SESSION['matchLst'] = $match;
$tardir = "projects/" . $project . "/" . $match . "/thumb/*.jpg" ;
$imgdir = "projects/" . $project . "/" . $match . "/" ;
$files = glob($tardir);
for ($i=0; $i<count($files); $i++)
{
$num = $files[$i];
$filname = basename($num, ".jpg");
$imgname = basename($num);
$img = $imgdir . $imgname;
$filnam = substr($filname, -5);
$filnam = rtrim($filnam);
echo '<ul class="item" id="item">';
echo '<li class="book"><img src="'.$img.'" id="thumbNails'.$filnam.'"/>';
echo '<figcaption class="caption" name="caption">' . $filnam . '</figcaption>';
echo '</li></ul>';
}
?>
The php code renders the images from the folder. When I click on the image from the gallery, instead of providing the position of the image, I get static values till I use the scroll bar to select some of the images that were not visible onload. Those clicks returns the position values in negative. What I am trying to do is given as an example here.
<style type="text/css">
body {margin:5px;}
p {margin:30px 0px 30px 0px;}
<!-- .
.
.-->
#scroller {overflow:auto;height:300px;width:550px;}
</style>
<div id="scroller">
<!-- <div id="toscroll" style="overflow:scroll" align="left"> -->
<div id="toscroll" align="left">
<table id="myOeuvresTable" width="593%" class= "sortable">
<!-- .
.
.-->
</table>
</div>
bellow the table:
Expand-->
<script type="text/javascript">
function openInventaireDesOeuvresExpandTblInNewTab(page)
{
var oScroll = document.getElementById('toscroll');
if (oScroll == null) // TJC: Invalid ID, ignore it
{
alert("myOeuvresTable.scroll not found!");
return "";
}
var versIE = isIE();
var x = oScroll.scrollLeft;
var y = oScroll.scrollTop;
alert(x.toString() + "," + y.toString());
// result of alert 0,0
x.scrollLeft += 100;
y.scrollTop += 100;
// this for testing purpose. The scrollbar does not move.
}
</script>
Can you propose another method than scrollTop, ScrollLeft, not based on the scrollbar and the scroller? To facilitate the understanding of the JS
code above, see www.danielpisters.be/ Select in the menu on the top. Click on bellow the second table.
You can use scrollIntoView method.
$element && $element.scrollIntoView()
I want to dynamically resize one of my divs to take the height of the viewport using the following javascript
<script>
var applyMapContainerHeight = function() {
var wH = window.screen.height;
wH = parseInt(wH) + 'px';
$("#main-container-col2-rt-layout").css('height',wH);
console.log(wH);
};
$(document).ready(function() {
applyMapContainerHeight();
});
</script>
My div is coded as:
<div class="wrapper">
<?php echo $this->getChildHtml('global_notices') ?>
<div class="page">
<?php echo $this->getChildHtml('header') ?>
<div id="main-container-col2-rt-layout" class="main-container col2- right-layout">
<div class="main">
<?php echo $this->getChildHtml('breadcrumbs') ?>
...........
This is a magento page for my e-commerce site. Please help!
Aside from vm and vh <length> datatypes, I see that your code works!
<style>
body {
margin: 0; padding: 0;
}
.main-container {
background: red;
}
</style>
<body>
<div class="wrapper">
<?php echo $this->getChildHtml('global_notices') ?>
<div class="page">
<?php echo $this->getChildHtml('header') ?>
<div id="main-container-col2-rt-layout" class="main-container col2- right-layout">
<div class="main">
<?php echo $this->getChildHtml('breadcrumbs') ?>
</div>
</div>
</div>
</div>
<script>
var applyMapContainerHeight = function() {
var wH = window.screen.height;
wH = parseInt(wH) + 'px';
document.getElementById("main-container-col2-rt-layout").style.height = wH;
console.log(wH);
};
(function() {
applyMapContainerHeight();
})();
</script>
</body>
Your question was somehow unclear about what the problem really was, but if the problem is you want wrapper and page not to have a white background, then the solution is to apply dynamic width to the highest div element (i mean the grandpa i.e. wrapper).
Css has units specifically for this:
vh and vw
Demo: http://jsfiddle.net/jfbrdomb/show
div.red {
height: 100vh;
width: 100vw;
background-color: red;
}
I want to leave a colored div trail without generating divs when the page loads. I want them to be appended when the mouse is over the parent div and position them where the mouse is within it.
EDIT: I think I need to be more precise so I posted the code that I want to rewrite. I want it to do the same thing without generating the divs that become colored on mouseover when the page loads but to create a colored div when the mouse is over $(".container") at the current position of the mouse.
THANKS!
Mention: the script generates lots of divs - it might take a while for the page to load.
$(document).ready( function() {
var csize = $(".container").width() * $(".container").height();
var space = $(window).width() * $(window).height();
while ( csize * $(".container").length < space) {
$("#space").append("<div class='container'></div>");
};
$(document).on("mousemove", function() {
window.color = Math.floor(Math.random()*16777215).toString(16);
});
$(".container").on("mouseover", function() {
$(this).css("background-color", "#" + window.color);
});
});
#space{
width: auto;
height: auto;
}
.container {
width: 15px;
height: 15px;
display: inline-block;
float: left;
border: none;
}
<!DOCTYPE html>
<html>
<head>
<title> JqPractice</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jq.js" type="text/javascript"></script>
<script src="sv2.js" type="text/javascript"></script>
</head>
<body>
<div id="space">
<div class="container">
</div>
</div>
</body>
<footer>
</footer>
</html>
$("#parent").on({
mousemove: function (e) {
var wrapper = $(this);
var parentOffset = wrapper.offset();
var relX = e.pageX - parentOffset.left + wrapper.scrollLeft();
var relY = e.pageY - parentOffset.top + wrapper.scrollTop();
wrapper.find('.randomTrail:visible').remove();
wrapper.append($('<div class="randomTrail"/>').css({
left: relX,
top: relY
}));
},
mouseleave: function () {
$('.randomTrail:visible').remove();
}
});
DEMO
Ref:
.offset()
.scrollLeft()
.scrollTop()
.remove()
e.pageX and e.pageY
.on()
mousemove
mouseleave
Events
find()
You will need to use mousemoves() to get the event data and coordinate like below
$( "#target" ).mousemove(function( event ) {
var msg = "Handler for .mousemove() called at ";
msg += event.pageX + ", " + event.pageY;
console.log(msg);
});
and you will need a div with css {position:absolute; width:10px; height:10px; background-color:yellow; left: event.pageX; top:event.pageY} something like this will do
For more info checkout official doc from jQuery
I have a script that places divs according the position of mouse on the body of a page. I have a button which says "Clear" and I want to use it to clear the divs created. How can I achieve that?
The script and source I have written:
HTML
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script src="bhaiya.js"></script>
<button style="z-index: 2000;" class="clear" onclick="clear()">Clear</button>
</body>
</html>
jQuery
$(document).ready(function(){
$(this).mousedown(function(e){
$x = e.pageX;
$y = e.pageY;
$div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
$("body").prepend($div);
});
function clear() {
$(".theDiv").remove();
}
})
jsFiddle:
http://jsfiddle.net/BpAYz/
Any help would be appreciated :)
Inline html attribute event handlers can only call global functions. Your clear() function is not global because it is defined inside your document ready handler, so your onclick="clear()" can't find it. You need to either move the function outside the ready handler (making it global), or, better, bind the click with jQuery:
$(document).ready(function(){
$(this).mousedown(function(e){
var $x = e.pageX;
var $y = e.pageY;
var $div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
$("body").prepend($div);
});
$(".clear").click(function () {
$(".theDiv").remove();
});
});
Note also that I've added var in front of the variables in your mousedown handler: without var they become global variables, which just makes your code more error prone and hard to debug. (Unless you have a good reason why they should be globals?)
The function clear should be in global scope. Otherwise give an id button1 to the button and add the function as the click event listener using jQuery.
http://jsfiddle.net/BpAYz/2/
Code:
JS
$(document).ready(function () {
$(this).mousedown(function (e) {
if (!$(e.target).is("#button1")) {
$x = e.pageX;
$y = e.pageY;
$div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
$("body").prepend($div);
}
});
$(".clear").click(function () {
$(".theDiv").remove();
});
})
HTML
<body>
<button id="button1" style="z-index: 2000;" class="clear">Clear</button>
</body>
I have just modified your code. Please use var keyword when declaring variables in a function.
Do it like this: http://jsfiddle.net/Qn9yL/1/
You should attach to the click even of the button rather than using onclick.
$(document).ready(function(){
$(this).mousedown(function(e){
$x = e.pageX;
$y = e.pageY;
$div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
$("body").prepend($div);
});
$('#clear').click(function(e){
e.preventDefault();
$(".theDiv").remove();
});
})
You also want to do the e.preventDefault(); to stop the event then bubbling up and creating a new div etc.
You need to do this:-
Clear
$(document).ready(function(){
$(this).mousedown(function(e){
$x = e.pageX;
$y = e.pageY;
$div = "<div class='theDiv' style='width: 250px; height: 150px; background-color:#e7e7e7; position: absolute; top:" + $y + "px; left:" + $x + "px;'>Hey</div>";
$("body").prepend($div);
});
$(document).on("click", "button.clear", function(e){
e.stopPropagation();
$(".theDiv").remove();
})
})
This works with successive elements:
<style media="all">
.theDiv {
display:none;
}
</style>