We Keep Coding

two column equal height layout using bootstrap

I have two column layout, left side only one image column and right side content etc. right now both are same height if rotate screen then it is not equal height but i refresh page(rotate screen) then both column do have equal height. i am trying to equal height without refresh page at rotate screen.
$(function(){
$balancer = function() {
$('.main-box').each(function(){
if($('.cola',this).height()>$('.colb',this).height()){
$('.colb',this).height($('.cola',this).height())
} else {
$('.cola',this).height($('.colb',this).height())
}
});
}
$balancer();
$(window).load($balancer());
$(window).resize($balancer());
});
html
<div class="main-box">
<div class="cola"></div>
<div class="colb"></div>
</div>

You can hook into the DeviceOrientation change event.
window.addEventListener("deviceorientation", function (e) {
//DO stuff here.
}, false);
Which should trigger when you go from horizontal to vertical and back again.

your jquery selector seems wrong.
$('.main-box').each....
You need to select the inner divs not the wrapper.
$('.main-box > div').each....
if( $(this).height() > $(this).siblings().height() ) {
$(this).siblings().height( $(this).height() );
} else {
$(this).height( $(this).siblings().height() )
}

Possible duplicate of : How can I make Bootstrap columns all the same height?
And there is another link which can help you: http://getbootstrap.com.vn/examples/equal-height-columns/

JQUERY- refer to specific div with class as other divs inside the html page

In the fiddle you will see at the center of the page a DIV that contains text next to an img.
When I scroll down/up I need to effect with jquery/javascript only the div who's the closest to the navbar-below. all the divs as the same class so I effect them all-not what I need
For example:
what I am trying to achieve : when I scroll down,the closest div to the navbar(yellow bar) will be painted(the div) green,so if I scroll down and the navbar "collapse" with the div with will paint in green, and when he passes him and "disapper" it will go back to original color and the next div will paint in green. is it possible?
Here's the JS FIDDLE
When I referred to div I meant this section :
<div class="x" id="inside_center">
<div class="left_side" id="left_inside_center">sddsadasasdsadLorem </div>
<div class="right_side" id="right_inside_center"><img src="http://img-9gag-lol.9cache.com/photo/a7KwPAr_460s.jpg"></div>
</div>
EDIT:
UPDATED JSFIDDLE :
http://jsfiddle.net/nnkekjsy/3/
I added my jquery,as you can see it works only for the first one,and then stuck.. i need to "pass" it along the others div below him when the are getting to the same point. any ideas? :
$(document).ready(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
var navHeight = $("#div_menu").outerHeight();
if ( scrollVal > 55) {
$('#left_inside_center').css({'position':'fixed','top' :navHeight+'px'});
} else {
$('#left_inside_center').css({'position':'static','top':'auto'});
}
});
});

Have you tried use the first-of-type to select the top div, if i understand what your trying to do.
CSS3 selector :first-of-type with class name?
An other solution would be to check the position of the div and the nav bar and pick the closest one.
$(".left_side").each(function () {
//compare scroll with div
if(window.scrollTop() = $(this).position.top())
{
//do something
}
});
I know the position and the scroll won't be the same value but you can play with the condition to put some range.
Edit :
I think this is what you want. The navHeight and the height variable should be outside the window.scroll function as they never change :
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
var navHeight = $("#div_menu").outerHeight();
var height = parseInt($(".right_side").css("height").split("px")[0]);
$(".left_side").css({'position':'static','top':'auto'});
$(".left_side").filter(function( ) {
return $(this).position().top - 10 < scrollVal && $(this).position().top + height > scrollVal;
}).css({'position':'fixed','top' :navHeight+'px'});
});
Working fiddle :
http://jsfiddle.net/nnkekjsy/6/

move form into another div with .prependTo

I want to move a form element from one to div to a footer div with .prependTo But I am bit uncertain about how to do it.
The normal state is that the form element is in a div called headerRight on the tablet and desktop media queries. For the 480px and below I want to move it to before the current content in the footer div.
I have a sample code I have set up in jsfidle. The following is a code snippet:
$("#footer").prependTo("#want to move just the form in headerRight"));
else {
$("#form").prependTo("#footer")) // or default state in headerRight

If i understood correctly,
$(function () {
$(window).resize(ChangeDiv);
$(window).trigger("resize"); // perform the logic onload
});
function ChangeDiv() {
var width = $(window).width();
if (width <= 480) {
$("#menu").after($("#header"));
$("#footer").prependTo($("#headerRight form")); // prepend the form
} else {
$("#header").after($("#menu"));
$("#headerRight").prependTo($("#footer form")); // put it back
}
}
Updated Fiddle

determine div position scrolltop

I've got a bunch of div width heights over 1000px under eachother. How can I determine a div position relative to the top of the window?
E.g.
<div>height:1000px</div>
<div>height:1000px</div>
<div>height:1000px</div>
<div class="this_div">height:1000px</div>
<div>height:1000px</div>
<div>height:1000px</div>
<div>height:1000px</div>
I'm trying something like this.
$(function(){
$(window).bind('scroll resize',function(e){
var scrolledY = $(window).scrollTop(),
scrolling = scrolledY-4900;
if(scrolledY > 4900){
$('div.this_div').css('background', 'red');
}
if(scrolledY > 5500)){
$('div.this_div').css('background', 'none');
}
});
});
As you can see, if you've scrolled 4900px it does something. Isn't it possible to do something when you've scrolled till the div, instead of determining at what px it is?

You'll need the .offset() function for this. It helps you determine the offset of your "this_div" for the scrolling method (instead of the 4900 value you're passing along).
JSFiddle.

Well, I guess;
console.log(parseFloat($("#myBlock").offset().top) + parseFloat($(document).scrollTop()));​

Javascript - Jump to anchor function

I use this script to check if an anchor is within the URL. If found the showscroll function get called.
Only thing isn't working is the jump to the called anchor.
I'm new to JS - what is wrong with the function?
In the HTML page:
<script type="text/javascript">
<!--
function checkurl(){
if (window.location.href.match(/\#more/))
{
showscroll('more');
}
if (window.location.href.match(/\#tab2/))
{
showscroll('tab2');
}
}
//-->
</script>
</head>
<body onload="checkurl()">
.JS
function showscroll(id){
if (document.getElementById) {
var divid = document.getElementById(id);
divid.style.display = divid.style.display='block';
// NOT WORKING:
window.location.href = "#"+id;
//
return false;
} }
Edit: I can't use "scroll into view".

Instead of
window.location.href.match(/\#more/)
you can just do
window.location.hash == '#more'
and instead of assigning to the fragment, you can use the scrollIntoView method as described at https://developer.mozilla.org/en/DOM/element.scrollIntoView
Summary
The scrollIntoView() method scrolls the element into view.
Syntax
element.scrollIntoView(alignWithTop);
alignWithTop Optional
If true, the scrolled element is aligned with the top of the scroll area. If false, it is aligned with the bottom.
Note: By default, the element is scrolled to align with the top of the scroll area.