Develop Reference

UI Sortable moves scroll

I have issue with jQuery sortable.
Here is live example: JSFiddle
HTML:
<div class="a">
<div class="b">
a<br>
b<br>
c<br>
d<br>
e<br>
f<br>
g<br>
h<br>
i<br>
j<br>
k<br>
l<br>
m<br>
n<br>
o<br>
</div>
</div>
JS:
$(function(){
$('.a').sortable();
});
CSS:
.b {
border: 1px solid;
width: 100px;
height: 100px;
overflow-y: scroll;
overflow-x: hidden;
text-align: center;
}
In this case I have div with scroll. I scroll to the end of the div and I try to sort element using drag&drop. After this action, scroll in div jumps to beginning of this div. How I can "remember" position of scroll and "revert" it after sortable?

You need to save the scroll position and then reapply it when you stop moving the object.
JSFIDDLE: JSFIDDLE
$(function(){
var scrollTop = 0;
$('.a').sortable({
start: function(event, ui){
scrollTop = ui.item.scrollTop();
},
stop: function(event, ui){
ui.item.scrollTop(scrollTop);
}
});
});

You should use the sortable() method on the inner <div id="b"> and put every element you want to sort inside a <div> tag so they can be treated as DOM elements.
Here's a working solution JSFiddle
You might want to check THIS topic.

changing button text on mouseover, resizes entire button

I have an annoying problem, I want the bootstrap button to be fixed in size. At the moment when I scroll over the bootstrap button it resizes the entire button. I use javascript to change the text (mouseover and mouseout). How can I disable this so the button remains the same size and only the text changes?
Example button:
<button type='button' id='Warning' class='btn btn-warning btn-block text-left' data-toggle='modal' data-target='#myModal'>Pending</button>
Javascript:
$('body').on('mouseover', '#Success', function (e) {
$(this).removeClass("btn-success");
$(this).addClass("btn-danger");
$(this).text('Deactivate?');
});
$('body').on('mouseover', '#Warning', function (e) {
$(this).removeClass("btn-warning");
$(this).addClass("btn-success");
$(this).text('Activate?');
});

If the visible width of the 2 text labels is different, the button has to change size to accommodate the text.
You should set a fixed size of the button via CSS that is big enough to fit either text label:
#Warning {
width: 200px;
}
Without seeing more of your markup, it's difficult to know how this affects other layout elements.
You could try giving the button an auto margin in the horizontal:
#Warning {
width: 200px;
margin: 0 auto;
}
Or it might be that you need to explicitly center the buttons in it's container:
.class-name-of-the-buttons-parent-container {
text-align: center;
}

I suggest giving the button a fixed width that's enough for both states and removing the horizontal paddings. Optionally you can give it text-align:center

Freeze the button's width and height during the mouseover event. Also, set its padding to 0 to keep the text centered:
$('body')
.on('mouseover', '#Warning', function (e) {
$(this).css({
width: $(this).outerWidth(),
height: $(this).outerHeight(),
padding: 0
});
$(this).text('Activate?');
})
.on('mouseout', '#Warning', function (e) {
$(this).text('Pending');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='Warning'>Pending</button>

You should add an additional CSS class that overrides the Bootstrap defaults to the button. Something like ...
.fixed_size_button {
width: 200px;
}
In some cases you might need to add !important to actually override prior CSS settings, especially since Bootstrap itself uses a lot of !important statements. E.g.
.fixed_size_button {
width: 200px !important;
}
But you should avoid this as much as possible since it is difficult to maintain.

Scrolling a DIV to Specific Location

There is a plethora of similar questions around but none of them seem to be looking for what I'm looking for, or else none of the answers are useful for my purposes.
The jsfiddle: http://jsfiddle.net/tumblingpenguin/9yGCf/4/
The user will select an option and the page will reload with their option applied. What I need is for the "option list" DIV to be scrolled down to the selected option such that it is in the center of the option list.
The HTML...
<div id="container">
<a href="#">
<div class="option">
Option 1
</div>
</a>
<!-- other options -->
<a href="#">
<div class="option selected"> <!-- scroll to here -->
Option 4
</div>
<!-- other options -->
<a href="#">
<div class="option">
Option 7
</div>
</a>
</div>
The selected option is marked with the selected class. I need to somehow scroll the DIV down to the selected option.
The CSS...
#container {
background-color: #F00;
height: 100px;
overflow-x: hidden;
overflow-y: scroll;
width: 200px;
}
a {
color: #FFF;
text-decoration: none;
}
.option {
background-color: #c0c0c0;
padding: 5px;
width: 200px;
}
.option:hover {
background-color: #ccc;
}
.selected {
background-color: #3c6;
}
I've seen this done on other websites so I know it's possible—I just haven't a clue where to begin with it.
P.S. jQuery solutions are acceptable.

Something like this http://jsfiddle.net/X2eTL/1/:
// On document ready
$(function(){
// Find selected div
var selected = $('#container .selected');
// Scroll container to offset of the selected div
selected.parent().parent().scrollTop(selected[0].offsetTop);
});
Without the jQuery (put this at the bottom of the < body > tag:
// Find selected div
var selected = document.querySelector('#container .selected');
// Scroll container to offset of the selected div
selected.parentNode.parentNode.scrollTop = selected.offsetTop;
demo: http://jsfiddle.net/66tGt/

Since you said JQuery answers are acceptable, here's an example of what you're looking for:
$('body, html').animate({ scrollTop: div.offset().top-210 }, 1000);
Replace div for whatever element you want to scroll to.

Here is one possible solution that may work for you:
Demo Fiddle
JS:
$('#container').scrollTop( $('.selected').position().top );

Take a look at this fiddle : http://jsfiddle.net/9yGCf/8/
As requested it scrolls to the middle of the div (you can change the offset by however much you want to make little adjustments). I would probably suggest setting either a line height with some padding and whatnot and then do the math to change the offset that I have at -40 so that it does put it in the middle.
But I used jquery and came up with this quick little code... also added some code to change the selected option
$('.option').click(function(){
$('.selected').removeClass('selected');
$(this).addClass('selected');
$(this).parent().parent().scrollTop(selected[0].offsetTop - 40);
});

This magical API will automatically scroll to the right position.
element.scrollIntoView({ block: 'center' })
See more details:
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Jquery have a parent div have the same width and height of it's child element

I'm having this problem to solve for weeks now and really need help.
I have this system where a user selects a template with 2 types of areas. One for inserting images and one for inserting text.
Each template may come with numerous areas to insert images and each image area is just a div with it's own dimensions [width px - height px] within a limited area of 800px - 650px.
I will call this div to receive images div.img
Inside that div.img theres an input type="file" and throw jquery.form.js plugin I'm able to insert a new image into it.
I will call the inserted image new.img
This new.img comes wrapped in a div div.newImg because I had to have a button to delete the image on top of the image itself.
I'm using jquery ui draggable and resizable so the div.newImg may be resized and dragged inside of div.img.
Here are the different elements: div.img -> div.newImg -> new.img + button delete
HTML
<div class="child" style="z-index: 70; position: absolute; top: 0px; left: 0px; width: 800px; height: 172px; cursor: default; background-color: rgba(254, 202, 64, 0.701961);" alt="reset">
<div class="imgh ui-resizable ui-draggable" alt="reset3" style="height: 100%; width: 204px;">
<img src="###" style="width:inherit; height:inherit; min-width:50px; min-height:50px;" class="img_set">
<div class="close"><i class="icon-remove-sign"></i></div>
</div>
</div>
JQUERY
$('.imgh').resizable({ containment: $(this).closest('.child') });
$('.imgh').draggable({ containment: $(this).closest('.child'), scroll: true, snap: true, snapTolerance: 5 });
This is what I've manage to approach so far but doesn't help me at all
if($('.child').width() > $('.child').height()){
$('.imgh').height('100%');
$('.imgh').width($('.imgh img').width());
}else{
$('.imgh').width('100%');
$('.imgh').height($('.imgh img').height());
}
I've managed to have the img.img_set have the same dimensions as it's parent by having style="width:inherit; height:inherit;".
What I need is a way for the div.imgh to have the same dimensions as it's inner img.img_set. Like a reversed inherit.
UPDATE
This code does what I want but my problem is that everytime I resize it comes back to what I've defined in the initialization:
if($('.child').width() > $('.child').height()){
$('.imgh').height('100%');
$('.imgh').width('auto');
}else{
$('.imgh').width('100%');
$('.imgh').height('auto');
}
if($('.imgh').width() > $('.imgh img').width()){
$('.imgh').width($('.imgh img').width());
}
Is there a way for this to only happen once to each div.imgh?

You could use .bind() to resize it it every time something changes...
$('.imgh').bind('resize', FullWidthHeight); //Note: check the 'resize' event is relevant to imgh
function FullWidthHeight() {
$('.imgh').css('height', img.img_set.height());
$('.imgh').css('width', img.img_set.width());
}

Can I put an HTML button inside the canvas?

I want to make the buttons for the game I'm making as real HTML buttons, but they need to be inside the canvas.
How would I go about doing this?

Given that the canvas element has a transparent content model, it may contain fallback elements which are displayed in the event that the canvas element is unsupported. They will not be displayed if the canvas is supported.
You can position HTML elements relative to the canvas' parent to have the buttons "hovering" over the canvas. A menu element could be an appropriately semantic element to render a list of controls, depending on the context:
HTML:
<div id="container">
<canvas id="viewport">
</canvas>
<menu id="controls">
</menu>
</div>
CSS:
#container
{
height: 400px;
position: relative;
width: 400px;
}
#viewport
{
height: 100%;
width: 100%;
}
#controls
{
bottom: 0;
left: 0;
position: absolute;
width: 100%;
}

You can put the button on top of the canvas by giving the canvas a z-index which is lower than the z-index of the button:
<canvas style="z-index:1"></canvas>
<input type="button" style="z-index:2; position:absolute; top:x; left:y" value="test"/>
where x and y are numbers.

I don't believe you can 'put' HTML content inside a canvas tag. Whatever you put in there will actually be displayed if the browser doesn't support <canvas>.
You can, however, position your buttons absolutely over top of a canvas or render areas in your canvas that 'look' like buttons and handle the events yourself (a lot of work).

HTML inside canvas is not possible, but maybe you could position your elements absolutely so that they are "floating" over the canvas, but not inside it.

One way to add button dynamically on the top of the canvas is following the next two points:
1. Making zIndex of the button higher than canvas
2. Position the button using absolute positioning with desired top and left value
Jsfiddle: https://jsfiddle.net/n2EYw/398/
HTML:
<canvas id="canvas" width="200" height="200">
</canvas>
CSS:
canvas {
border: 1px dotted black;
background: navy;
}
JavaScript:
var $testButton = $('<input/>').attr({
type: 'button',
name: 'btn1',
value: 'TestButton',
id: 'testButton',
style: 'position:absolute; top:50px;left:100px; zindex:2'
});
$('body').append($testButton);
$(document).on("click", "#testButton", function() {
alert('button clicked');
});

You can use my DropdownMenu for put an HTML button or menu inside the canvas.
Example of code:
<div class="container" id="containerDSE">
<canvas id="canvas"></canvas>
</div>
<script>
var elContainer = document.getElementById( "containerDSE" ),
elCanvas = elContainer.querySelector( 'canvas' );
dropdownMenu.create( [
{
name: 'Button',
onclick: function ( event ) {
var message = 'Button onclick';
//console.log( message );
alert( message )
},
},
], {
elParent: elContainer,
canvas: elCanvas,
decorations: 'Transparent',
} );
</script>
Example of using.

HTML inside of canvas is not possible.
But if you really want to use buttons, why don't you try positioning the buttons on top of the canvas?

You can put a button inside the canvas (png, jpg, svg and text), using the Canvate library.
http://www.sakuracode.com/canvate
Here you are a sample of a draging button inside the canvas.
container.startDrag();
https://codepen.io/EiseiKashi/pen/BxNbmj