Adjust created div to parent div - javascript

How to make width of the created div adjust to parent div when width of the parent div changes.
For example when my web page shrinks created div (kind of caption) overflow parent div.
var $discDiv = $("<div></div>");
$discDiv.css({
width:$(".col-md-8").width(),
height:$(".col-md-8").height()*0.3,
backgroundColor:"blue",
position:"absolute",
zIndex: 1,
opacity:0,
});
$(".col-md-8").append($discDiv);
$(".col-md-8").mouseenter(function() {
$discDiv.css({
opacity:0.3
});
});
Pen

Just change width to percentage value
$discDiv.css({
width:$(".col-md-8").width(),
height:"100%",
backgroundColor:"blue",
position:"absolute",
zIndex: 1,
opacity:0
});
and add mouse leave for better rendering :
$(".col-md-8").mouseleave(function() {
$discDiv.css({
opacity:0
});
});

Related

Fit container inside element with table layout

I need to fit a container inside a table cell. Currently, I am unable to do so, and the container only shows when I manually set its height.
Here it is a fiddle showing the issue.
https://fiddle.sencha.com/#fiddle/13ug
If I set the container height to (say, 300), the container is displayed. However, I would like the container to automatically fit the colspan/rowspan and resize according to the table.
Could I please get some help? Thanks!
This will auto size the container to fill 100% of the cell height - even if the cell height increases.
initComponent: function() {
var me = this;
var tester2 = Ext.create("Ext.container.Container");
Ext.apply(tester2, {
height: "100%",
layout: "fit",
style:"background-color: red",
colspan: 5,
rowspan: 2,
});

Change position of div based on content & viewport height using jquery

I want to have a div be fixed at the bottom of the window when the window is taller than the content height. If the content height is taller than the window height, I want the div position to remain relative.
I currently have this mostly working, however I don't want the div to overlap the content at all. I tried various forms of below, but still not working:
var body = content+bottomBar
if (body > viewport) {
$(".bottom-bar").css({
'position':'relative'
});
} else {
$(".bottom-bar").css({
'position': 'fixed'
})
}
I also am having trouble getting the window.resize to work.
Any help would be appreciated!
http://jsfiddle.net/no05x1vx/1/
Referring to the jsfiddle linked by the OP, here are a few changes to make the code work as expected, please see the comments:
var content = $(".content").height()
var viewport = $(window).height();
// Use innerHeight here as the bottom-bar div has height 0 and padding 60px
// .height() would return 0
var bottomBar = $(".bottom-bar").innerHeight();
var body = parseInt(content)+parseInt(bottomBar)
$(window).on('resize', function(){
// Get new viewport height
viewport = $(window).height();
if (content > (viewport-bottomBar) ) {
$(".bottom-bar").css({
'position':'relative'
});
} else {
$(".bottom-bar").css({
'position': 'fixed'
})
}
});
// Trigger resize after page load (to avoid repeated code)
$(document).ready(function(){
$(window).resize();
});

JS change height and return to original CSS height

Hoping to get some help on some javascript i'm getting stuck with.
Q1: JS RETURN TO IMAGE HEIGHT AND MARGIN
My layout is horizontal scroll of smaller images positioned in a grid, using different height percentages and margins to position.
When you click on any of the images they all expand to height:100% and margin:0 which clears all previous styles putting it into a simple large image layout.
My question is how do I add a function that when clicking on .image-container the height and margins returns to how it was originally set in the css
JS FIDDLE DEMO (click any center image)
// GALLERY 100% height
$('.image-container').click(function(){
$('.image-container img').animate({'height': '100%'},900)
.animate({'margin': '0'},900);
});
// ? REMOVE HEIGHT ?
$('.image-container').click(function(){
$('.image-container img').animate({'height': '?'},900)
.animate({'margin': '?'},900);
});
EDIT UPDATED QUESTION: Q2 HOW TO MAKE PAGE SIZE GROW WITH LARGER IMAGES
Right now my .image-container is set to a large width but with responsive images it's hard to find the correct width, is there a way to find this width and to make it grow along with the click grow of images (displayed above)
.image-container {
display:block;
width:3600px;
height: 75%;
float:left;
position:absolute;
top: 13%;
left: 120px;
z-index: -1;
}
Thanks for any help!
You need to store the original height in a variable.
Check out the updated fiddle
var originalheight;
// GALLERY 100% height
$('.image-container').click(function(){
originalheight = $('.image-container img').height();
$('.image-container img').animate({'height': '100%'},900)
.animate({'margin': '0'},900);
});
//REMOVE HEIGHT ?
$('.image-container').click(function(){
$('.image-container img').animate({'height': originalheight},900)
.animate({'margin': '0'},900);
});
EDIT:
Sorry about the goof up in previous solution. I didn't notice I was using click twice unnecessarily.
Here's the updated solution with the updated fiddle.
var originalheight;
$('.image-container').click(function () {
if (!originalheight) originalheight = $('.image-container img').height();
if ($('.image-container img').css('height') == originalheight + "px") { // GALLERY 100% height
$('.image-container img').animate({
'height': '100%'
}, 900).animate({
'margin': '0'
}, 900);
} else { //REMOVE HEIGHT ?
$('.image-container img').animate({
'height': originalheight
}, 900).animate({
'margin': '0'
}, 900);
}
});
This is my idea, hope it'll work:
// Before animation
var heights = new Array();
var margins = new Array();
$('.image-container img').each(function(){
heights.push($(this).css('height'));
});
$('.image-container img').each(function(){
margins.push($(this).css('margin'));
});
//
$('.image-container').click(function(){
$('.image-container img').animate({'height': '100%'},900)
.animate({'margin': '0'},900);
});
// ? REMOVE HEIGHT ?
$('.image-container').click(function(){
$('.image-container img').animate({'height': heights[$(this).index()]},900)
.animate({'margin': margins[$(this).index()]},900);
});
First of all, I suggest you to use the focusout and blur event to undo changes, because the way you implement your 'click' event, the second part only will be considered (you erase the first click implementation doing so). the best thing, is to enlarge the image when clicked, and reinit it's size when you click away.
Try this :
// GALLERY 100% height
$('.image-container')
.bind('click', function(){
$('.image-container img').animate({height: '100%'},900)
.animate({margin: 0},900);
})
.bind('focusout blur', function(){
$('.image-container img').animate({height: ''},900)
.animate({margin: ''},900);
});
Or better, use classes in which you define the behaiviors on clicking, and on clicking again, for exemple :
<style>
.clickimage{ height : 100%; margin :0;}
.yourOriginalValues {height : original; margin : original;}
</style>
$('.yourOriginalValues').click(function(){
$(this).switchClass( "yourOriginalValues", "clickimage", 900 );
});
$('.clickimage).click(function(){
$(this).switchClass( "clickimage", "yourOriginalValues", 900 );
});
ps. the switchClass method, is a jQuery UI functionality.

Making a div on the fly that is resizable not working

I have a function that creates a div on the fly using jquery, and the user can define several properties to style the div. The problem is that I want the div to be resizable but the resulting div is the size the user defines but I am not able to resize it.
this is my function:
function createDiv(id, divWidth, divHeight, divContent, divBgColor, opacity){
//FIRST HEX TO RGB FOR BG COLOR & OPACITY
var currentColor = hexToRgb(divBgColor);
//CREATE THE WRAPPER DIV
var wrapper = $('<div/>', {
id: id
}).css({
"backgroundColor": 'rgba('+currentColor+' '+opacity+')',
"min-width": divWidth,
"min-height": divHeight
}).resizable({
containment: 'parent',
minHeight: divHeight,
minWidth: divWidth
}).appendTo('.current-layer');
}
This is the call to the function:
onclick="createDiv('1', '200px', '100px', 'text', '#FF0000', 0.5)"
I hope someone can tell me what I am doing wrong! TIA
The parent(containment) must have a width/height higher than the min-width/min-height of the resizable.
Currently width and height is not set, so it will be 100% and 0
Result: you can resize the resizable:
width: 200px up to the width of the containment(100%)
height: 100px up to height of the containment(also 100px, derived from it's content), so the height is unresizable
Demo: http://jsfiddle.net/doktormolle/VnCHA/
I solved the problem and feel like bit of a muppet.
Because the div was created on the fly I had to make it resizable after it was appended to the DOM.

How to auto adjust margin to Auto center vertical & horizontal using jQuery and CSS margin

I'm trying to center a block element (img or div) to a container which has a % width and height %.
Here's what I did. http://jsbin.com/ibakuw
$('#container img')
.css({
'margin': ($('#container').height() - $('#container img').height()) / 2 + 'auto',
'background':'red'});
I don't want to use this {position:absolute; top:50%; height:240px; margin-top:-120px; }
approach to center vertically because the elements overflows my browser or container. I just need it to be constraint within the browser.
Please help. thank You!
edited:
I added $(window).resize(function() { here http://jsbin.com/ibakuw/5
var contHeight = $('body').height(),
paddVertical = ($('#container').height() - $('#container img').height()) / 2,
paddHorizon = ($('#container').width() - $('#container img').width()) / 2;
$(function() {
$('#container img')
.css({
'marginLeft' : paddHorizon +'px',
'marginTop' : paddVertical +'px'
});
$(window).resize(function() {
$('#container img')
.css({
'marginLeft' : paddHorizon +'px',
'marginTop' : paddVertical +'px'
});
});
});
Check out my example here http://jsfiddle.net/z8gph/
Unless I have your exact setup this is the closest I can get to answering your question.
First position the outer and inner containers relative.
Using jquery to center vertically you get the height of the outer container minus the inner container and divide that by 2. Then set the top with .css of the inner container to the result.
var center = ($("#outer").height()-$("#inner").height()) / 2;
$("#inner").css({"top":center});
EDIT
check out my new example http://jsfiddle.net/z8gph/1/
If you want it to work without setting margin: 0 auto; to help center horizontally see here http://jsfiddle.net/z8gph/2/

Categories