Make element always same height as other element plus 65px? - javascript

I have an element. We can call that Element A. I want Element A to have the same height as Element B with an additional height of 65px. For example if Element B has a height of 500px I want Element A to have a height of 565px
I am not very good at writing functions. I found one that can make Element A the same height as Element B but without the additional 60px.
$(document).ready(function() {
$("#ElementA").css("height", $("#ElementB").height());
});
Thanks!

Simply add the value wanted - 65 in this case
$(document).ready(function() {
$("#ElementA").css("height", $("#ElementB").height() + 65);
console.log("A:" + $("#ElementA").height() + "px");
console.log("B:" + $("#ElementB").height() + "px");
});
#ElementA {
background-color: red;
width: 10px;
}
#ElementB {
background-color: orange;
height: 20px;
width: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ElementA">A</div>
<div id="ElementB">B</div>

You probably best doing it this way.
var SameHeights = function (){
var height = 0;
$('.allElements').each(function(index, element){
height = $(element).height() > height ? $(element).height() : height;
});
$('.allElements').height(height +65);
}
SameHeights();//call the function here, and re-use it again in the future.
Then on your HTML, you will have to add a class (it's better)
<div class="allElements">Element A</div>
<div class="allElements">Element B</div>
<div class="allElements">Element C</div>

<script>
$(document).ready(function() {
$("#ElementA").height( $("#ElementA").height() + 65 );
});
</script>

Here my solution
$(function(){
$("#ElementA").css("height", $("#ElementB").height()+65);
});
Here my responsive solution
$(function(){
$(window).resize(function(){
$("#ElementA").css("height", $("#ElementB").height()+65);
}).trigger('resize');
});

Related

.mouseleave() activate only when moving out of specific border

I'm trying to create a roll up div while mouse is over another div. It opens but I'd like it not to close when leaving through the bottom border. Is it possible using JS or JQuery? Here is my current code:
$("#sell1").mouseenter(function(){
$("#rollup1").css("display","inline");
});
$("#rollup1").mouseleave(function(){
$("#rollup1").css("display","none");
});
$("#sell1").mouseleave(function(){
$("#rollup1").css("display","none");
});
When processing the mouseleave, you can get the dimensions of the element and see whether the event's pageY is below the element:
$("#rollup1").mouseenter(function() {
$("#status").text("Over the element...");
});
$("#rollup1").mouseleave(function(e) {
var $this = $(this);
var bottom = $this.offset().top + $this.height();
if (bottom < e.pageY) {
$("#status").text("Left via bottom edge");
} else {
$("#status").text("Left NOT via bottom edge");
}
});
#rollup1 {
width: 50px;
height: 50px;
border: 1px solid black;
}
<div id="status"> </div>
<div id="rollup1"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

jQuery width does not include inner element padding

When an element contains inline-blocks which contain padding it doesn't get included in the width calculations of the element.
Essentially the same issue as jQuery outerWidth on a parent element which has child elements with padding.
This page should have text that lines up along the right side of the green box,
however the text will always grow larger than it's container, because width never includes the padding of any of it's children.
Is there a way to find the width of an element correctly without manually enumerating all child elements and re-adding the padding of each child? Same results when using .css('width'), .width() or .outerWidth().
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
jQuery(document).ready(function() {
var e = jQuery('#BLAH');
var pw = e.parent().width();
e.css('font-size','1px');
if (e.outerWidth() < pw) {
while ( e.outerWidth() < pw) {
alert('width ' + e.outerWidth() + ' < ' + pw);
e.css('font-size','+=1px');
}
e.css('font-size','-=1px');
}
});
</script>
<style>
#BLAH {
background-color: red;
white-space: nowrap;
}
.BLAH {
//padding: 0 10%;
background-color: blue;
display: inline;
}
</style>
</head>
<body>
<div style="background-color: green; width: 50%; height: 50%">
<div id="BLAH" style="display: inline-block;">
<div class="BLAH">BLAH</div>
<div class="BLAH">BLAH</div>
<div class="BLAH">BLAH</div>
<div class="BLAH">BLAH</div>
</div>
</div>
</body>
</html>
As the issue only occurs with percentage padding, you can instead use fixed pixel padding and increase that along with your font-size in the javascript. Something like this:
jQuery(document).ready(function () {
var e = jQuery('#BLAH');
var pw = e.parent().width();
e.css('font-size', '1px');
if (e.outerWidth() < pw) {
while (e.outerWidth() < pw) {
console.log('width ' + e.outerWidth() + ' < ' + pw);
e.css('font-size', '+=1px');
jQuery(".BLAH").css({
'padding-right': '+=1px',
'padding-left': '+=1px'
});
}
e.css('font-size', '-=1px');
jQuery(".BLAH").css({
'padding-right': '-=1px',
'padding-left': '-=1px'
});
}
});
http://jsfiddle.net/5Gufk/
If you wanted to get more sophisticated with it, you could calculate the padding as a percentage of the parent element's previous width and apply that rather than just increasing by one, or any other formula.
As for why it works this way, I was unable to find the part of the CSS spec that defines this behavior. However, it is important to understand that a percentage padding is based on the width of the containing block. Consider how it would work if you had 6 elements, all with 10% padding on both sides. That would be 120% padding, how could that even be possible for the padding of the elements to be 120% of the width of the parent element and still fit inside the parent?

How to extend container when it has absolutely positioned elements in it?

Lets say I have
CSS:
.mainWrap { position: relative; overflow: hidden; }
.wrap-boxes { positon: relative; }
.box { position:absolute (position and height is generated by plugin isotope: http://isotope.metafizzy.co/custom-layout-modes/centered-masonry.html }
HTML:
<div class"mainWrap">
<div class="wrap-boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
clearfix applied to wrap-boxes won't work as it has elements with absolute position in it.
therefore i'd need to use jQuery to calculate the height of the boxes in order to extend wrap-box. I don't know the height of these boxes as they have random height and I do not know the total number of boxes as they are constantly generated by the client. I'd need a general jQuery that solves that. If i don't extend the mainWrap the boxes will be cut off and i need to use overflow: hidden for other reasons.
Any help on this?
Something like this maybe?
$.fn.wrapHeight = function() {
return this.each(function() {
var height = 0;
$(this).children().each(function() {
height += $(this).height();
}).end().height(height);
});
};
$('.wrap-boxes').wrapHeight();
Absolutely-positioned elements are no longer part of the layout. You need to use JavaScript to measure the size and position of the child elements and set the size of the parent element accordingly.
In pure JavaScript you could use the following:
var wrapbox = document.getElementById('mainWrap').childNodes[1],
els = wrapbox.childNodes,
i,
height = 0;
for (i in els) {
if(els[i].nodeType == 1) {
height += parseInt(els[i].offsetHeight);
}
wrapbox.style.height = height + 'px';
}
http://jsfiddle.net/AJLe7/1/
Notice I changed the class="mainWrap" to id="mainWrap" to simplify the answer...

.change() .css width

I wanna change the width of a css when the value of a text to change on value.
Javascript:
<script>
$("inpu").change( function() {
$(#calidad).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
});
});
</script>
CSS :
#calidad{ width: 20px; height: 15px; background-color: #f33; }
html:
<input type="text" id="inpu" name="inpu" value="2">
<div id="calidad"></div>
I fixed your code and made a jsFiddle:
http://jsfiddle.net/xWXWD/
Both selectors were incorrect.
I may not understand the question, but do you want to change the width to the val of the input?
here is an example using px (you could use em, points, etc)
$(function() {
$("#inpu").change( function() {
$('#calidad').css({
width: getWidth});
});
});
function getWidth() {
return $('#inpu').val() + 'px'
}
here is a live example using a forked version of Steve's fiddle: http://jsfiddle.net/pK2qR/

jquery drag image

i want to make a draggable image in jquery.
first of all my experience with jquery is 0. having said that let me describe what i want to achieve. i have fixed width/height div. and the image contained inside the div is large in size. so i want the image to be draggable inside that div so that the user can see the entire image.
can someone help. pls be a little elaborate about the procedure considering my jquery fluency.
You can use the following;
$(function() {
$("#draggable").draggable();
});
.container {
margin-top: 50px;
cursor: move;
}
#screen {
overflow: hidden;
width: 200px;
height: 200px;
clear: both;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
<div id="screen">
<img src="https://picsum.photos/200/200" class="drag-image" id="draggable" />
</div>
</div>
You want the jQuery Draggable UI tool. The code for this, as with all jQuery, is very simple:
$(document).ready(function(){
$("#draggable").draggable();
});
Will create a draggable object from a standard html tag (the IMG in your case). And for limiting it's mobility to a specific region, you would look into its containment option.
Update: "What is '#draggable' and 'ready'"?
'#draggable' represents the element that you want to be able to drag. The hash (#) symbol represents an ID. When you add your image tags, may give give it an id like the following:
<img src="myimage.jpg" id="draggable" />
That will make the javascript above make your image draggable, because it has the '#draggable' id that the jQuery is looking for.
'.ready()' is the method that is automagically raised by your browser once the page is finished loading. Developers are encouraged by the jQuery group to place all jQuery code within this method to ensure all of the elements on the page are completely loaded prior to any jQuery code attempts to manipulate them.
to limit to a region for this example, containment is not much of a help.
I have implemented this for vertical only scroll, needs enhancement for horizontal limit:
stop: function(event, ui) {
var helper = ui.helper, pos = ui.position;
var h = -(helper.outerHeight() - $(helper).parent().outerHeight());
if (pos.top >= 0) {
helper.animate({ top: 0 });
} else if (pos.top <= h) {
helper.animate({ top: h });
}
}
$('#dragMe').draggable({ containment: 'body' });
This code will make it posible to drag the div with the ID of dragMe where ever you want inside the body of the document. You can also write a class or id as containment.
$('#dragMe').draggable({ containment: '#container' });
This code will make the div dragMe able to be draggable inside of the id container.
Hope this helps otherwise you should be able to find your answer here http://jqueryui.com/demos/draggable/
Expanding on the answer from PH. this will provide an elastic bounceback whenever the image is dragged to the point the underlying container is exposed:
stop: function(event, ui) {
var helper = ui.helper, pos = ui.position;
var h = -(helper.outerHeight() - $(helper).parent().outerHeight());
var w = -(helper.outerWidth() - $(helper).parent().outerWidth());
if (pos.top <= h) {
helper.animate({ top: h });
} else if (pos.top > 0) {
helper.animate({ top: 0 });
}
if (pos.left <= w) {
helper.animate({ left: w });
} else if (pos.left > 0) {
helper.animate({ left: 0 });
}
}

Categories

Resources