We Keep Coding

Is there any method to get html tag on specific height?

I can get height of entire container using jQuery, I want to add H1 tag after 500px height inside the container.
var height = $("body").find(".container"). innerHeight();
if(height > 800){
//Get here div on height 600 and insertAfter('<h1>New Heading</h1>') after that element on height 600, and insert H1 tag after closing that specific element
}
var height = $("body").find(".container"). innerHeight();
if(height > 800){
//Get here div on height 600 and insertAfter('<h1>New Heading</h1>') after that element on height 600, insert H1 tag right after specific element
}

If I understood you correctly
you can accomplish this with some styles:
HTML:
<div class="container">
<h3 class="customTag">Im Your H3</h3>
</div>
CSS:
.container{
position: relative;
height: 800px;
width: 600px;
background-color: red;
}
.customTag{
position: absolute;
bottom: 500px;
background-color: yellow;
}
Here is demo for you:
https://codepen.io/init1/pen/ExxpxoM

$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 600;
if ($(window).scrollTop() > navHeight){
$('.header').addClass('headcolor'); $('.nave_stickey_text').fadeIn();
} else {
$('.header').removeClass('headcolor');
$('.nave_stickey_text').fadeOut();
}
});
});

How to get the height and width of window in bootstrap

In bootstrap I have a fixed top nav bar and fixed bottom nav bar. I want to show a large image in the background between the space of those two nav bars and I also want to cover the width of the window. How can I dynamically get the height between the navbars and the width of the window? The window size may change depending on device.So I need it dynamic

Requires jquery:
var viewport = {
width : $(window).width(),
height : $(window).height()
};
//can access dimensions like this:
//viewport.height
Though you won't always get perfect results, different devices behave differently and this gives the viewport dimensions, not the screen dimensions.
Alternatively you could check the width of a data-role="page" element to find the device-width (since it's set to 100% of the device-width):
var deviceWidth = 0;
$(window).bind('resize', function () {
deviceWidth = $('[data-role="page"]').first().width();
}).trigger('resize');​​​

$(window).resize(function() {
var top_nav_height = $("#id_of_top_nav").height();
var bottom_nav_height = $("#id_of_bottom_nav").height();
var window_height = $(window).height();
var height_of_open_space = window_height - (top_nav_height+bottom_nav_height);
$("#id_of_img").css({
height:height_of_open_space+'px';
});
});
this will be fine with if 0px padding and margin, if not also get that values and subtract from height_of_open_space before applying to img height

It is a bit hard to tell without seeing any of your markup, but it should be feasable with pure css. I set up a very basic example to demonstrate:
http://codepen.io/anon/pen/XbGJJO
HTML:
<div class='top'>
top navbar
</div>
<div class='content'>
<p> some content </p>
</div>
<div class='bottom'>
bottom navbar
</div>
CSS:
.top, .bottom {
height: 40px;
background: red;
position: fixed;
width: 100%;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
.content {
margin: 40px 0;
min-height: calc(100vh - 80px);
background: green; /* background goes here */
}
The trick lies in the following line:
min-height: calc(100vh - 80px);
This tells your content to at least take up 100% of the vertical height, minus the height of the top and bottom bar. Let me know if you want me to explain further.

jQuery- Can not get one element to equal the height of another (jsfiddle)

I am trying to make a vertical list to the left of the content associated with that list item (vertical tabs). I am using jQuery to find the height of the largest "tab content", and make the ul equal that height, because there is a 1px border on the right side of the ul and I want it to line up with he content. However, the taller the height of the content gets, the more deficient the height of the ul is.
Here is a photo:
(the 1px right border of the ul should be the same height of the content)
And here is the jsfiddle showing what's going on:
http://jsfiddle.net/jM4F5/
jQuery(document).ready(function($) {
var tallest = $('#tatab-container ul').height(); // Minimum height is default ul height
$('#tamain-container p').each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight; // Modify to height of tallest paragraph
}
});
$('#tatab-container ul').css('height', tallest); // Update ul height
});
When I use an alert to see what jQuery has, it returns the same height for the ul as well as the paragraph, but if so, why is the ul shorter?

You are trying to use the <ul> structurally when that is really what your container <div>'s are for. Try something like this: JSFIDDLE
jQuery(document).ready(function($) {
var tatabcont = $('#tatab-container');
var tamaincont = $('#tamain-container');
var tallest = tatabcont.height();
if (tamaincont.height() > tallest) { tallest = tamaincont.height(); }
tatabcont.height(tallest + "px");
tamaincont.height(tallest + "px");
});
* { box-sizing: border-box; }
#tatab-container {
width: 30%;
float: left;
overflow: hidden;
border-right: 1px solid #666;
}
#tamain-container {
width: 65%;
float: left;
margin-left: 5%;
}
#tatab-container ul {
width: 100%;
padding-left: 0;
}
#tatab-container ul li {
padding: 5px;
border-bottom: 1px solid #666;
list-style-type: none;
}
Revision: updated jQuery with .resize() : UPDATED JSFIDDLE
jQuery(document).ready(function($) {
$(window).resize(function(){ equalHeight(); });
equalHeight();
});
function equalHeight() {
var tatabcont = $('#tatab-container');
var tamaincont = $('#tamain-container');
tatabcont.css("height","auto"); // reset container height to natural
tamaincont.css("height","auto"); // reset container height to natural
var tallest = tatabcont.height();
if (tamaincont.height() > tallest) { tallest = tamaincont.height(); }
tatabcont.height(tallest + "px");
tamaincont.height(tallest + "px");
}

This is occurring because when you adjust the height of the <ul>, you push the <p> content down further again. You need to set a specific width on the <p> element, so the math calculating in .height() is correct.
Some small CSS like:
#tamain-container {
float: right;
width: 60%;
}
http://jsfiddle.net/jM4F5/3/

could you try with this code, you will adjust the height of shorter to taller one.
jQuery(function($) {
var tallest = $('#tamain-container p').height();
var short = $('#tatab-container ul').height();
if(tallest > short){
$('#tatab-container ul').css('height',tallest);
}
if(tallest < short){
$('#tamain-container p').css('height',short);
}
});
#tamain-container {float:left;width:55%;}
http://jsfiddle.net/jM4F5/19/

I would use css display:table to acheieve this. Something like this
<div style='display:table;border-collapse:collapse;'>
<div style='display:table-row'>
<div style='display:table-cell;border-right:1px solid#000;'>// UL Navigation</div>
<div style='display:table-cell'>//All Tabs content</div>
</div>
The table cells will always be of the same height and so will the border.

Sticky Header - buggy jumping on scroll

I have a specific problem on making a sticky header with jQuery. I tried the commonly used snippets around the web, but I perceived the same buggy thing everywhere.
At a specific document height (scrollable until a little more than calling of sticky-effect) the sticky header jumps between position: fixed and position: static.
HTML:
<header>
<div id="not-sticky"></div>
<div id="sticky"></div>
</header>
<div id="content"> ...
jQuery:
var $sticky = $("#sticky");
var offset = $sticky.offset();
var stickyTop = offset.top;
var windowTop = $(window).scrollTop();
$(window).scroll(function() {
windowTop = $(window).scrollTop();
if (windowTop > stickyTop) {
$sticky.css({
position: 'fixed',
top: 0
});
}
else {
$sticky.css({
position: '',
top: ''
});
}
});
CSS:
header {
width: 100%;
}
#not-sticky {
padding: 50px 0;
width: 100%;
}
#sticky {
padding: 24px 0;
position: relative;
width: 100%;
z-index: 25;
}
I also tried a margin-bottom on #not-sticky with the same height as the #sticky to keep a constant document-height, but the same jumpy-sticky-effect occurred.
Any idea to fix that thing?

Scroll fires too many times and trying to set an element style will always & inevitably create jumps (even barely noticeable but still jaggy).
The best way I've found is to
clone our element,
make that clone fixed
play with clone's visibility style.
Pure JS:
;(function(){ /* STICKY */
var sticky = document.getElementById("sticky"),
sticky2 = sticky.cloneNode(true);
sticky2.style.position = "fixed";
document.body.appendChild(sticky2);
function stickIt(){
sticky2.style.visibility = sticky.getBoundingClientRect().top<0 ? "visible" : "hidden";
}
stickIt();
window.addEventListener("scroll", stickIt, false );
}());
#sticky{
height:100px;
background:#ada;
height:50px;
position:relative;
/* needed for clone: */
top:0;
width:100%;
}
/* Just for this demo: */
*{margin:0;padding:0;}
#content{height:2000px; border:3px dashed #444;}
h1{padding:40px; background:#888;}
<h1>Logo</h1>
<div id="sticky">Sticky header</div>
<div id="content">Lorem ipsum...<br>bla bla</div>
So when you see the "header" fix, that's actually our fixed clone getting visible on-top.

Animation for the automatic height change when content is resized with javascript

I want to control the automatic height change of the container when I add something that changes the lenght of the content. Right now, if I apply a innerHTML change on the content, the height is changed accordingly. I want to apply a transition to that height change. How can I do that? ( I can also use jQuery )

Record the height before changing the content, change the content, record the height after, set the height to the former height, and animate to the latter height. When the animation has completed, set the height to be automatic again. You can do this using height and animate.
Try it on JSFiddle.
var texts = [
"This is just some sample text that's being used to demonstrate animating the height when content changes.",
"Shorter."
];
var div = $('div').click(changeContent);
function changeContent() {
var oldHeight = div.height();
texts.push(div.text());
div.text(texts.shift());
var newHeight = div.height();
div.height(oldHeight);
div.animate({height: newHeight}, 'fast', function() {
div.height('auto');
});
}
div {
width: 150px;
background: lightgray;
overflow-y: hidden;
}
<div>This is some example content.</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div id="containter" style="overflow:hidden">
<div>
Content.....
</div>
</div>
//add something...
$('#container').animate({height:$('#container').content().outerHeight()});
or:
$('#container').animate({height:$('#container').children().first().outerHeight()});
and when adding append to the div inside the containter:
$('#container').children().first().append(somethingNew);

Based on icktoofay's answer.
I make the button disabled while changing the height and add a fading effect. This solution is useful for updating of the products filter and so on.
Also I check the box-sizing property. If it's box-sizing then I get newHeight by .outerHeigth() instead of .height() to prevent the height fluctuation when new content has the same height. You can check this situation, for example by setting the random variable to value 5. The reason is that
.height() will always return the content height, regardless of the value of the CSS box-sizing property.
CodePen
$('#button').click(function() {
var $button = $(this),
buttonOriginalText = $button.html();
$button.prop('disabled', true).html('Updating...');
$('#content').animate({
opacity: 0
}, 'fast', function() {
var newHeight,
$content = $(this),
oldHeight = $content.height();
$content.html(getRandomContent());
newHeight = ('border-box' === $content.css('box-sizing') ? $content.outerHeight() : $content.height());
$content.height(oldHeight).animate({
height: newHeight,
opacity: 1
}, 'slow', function() {
$content.height('auto');
$button.prop('disabled', false).html(buttonOriginalText);
});
});
});
function getRandomContent() {
var random = 1 + Math.round(Math.random() * 11), // 1..12
paragraph = '<p>Paragraph</p>';
return paragraph.repeat(random);
}
* {
box-sizing: border-box; /* comment out to test "content-box" */
font: 16px Helvetica, 'sans-serif';
}
.content {
counter-reset: content;
padding: 6px 18px;
}
.content p {
counter-increment: content;
}
.content p:after {
content: ' ' counter(content) '.';
}
.content-box {
border: 2px solid red;
margin-top: 24px;
max-width: 220px;
}
<button id="button" class="button">Update the content</button>
<div class="content-box">
<div id="content" class="content">Animatie the automatic height when content is resized.</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>