We Keep Coding

Bootstrap - Switching between Div with Jquery

So I'm using bootstrap as my responsive framework and I have a container, row I also have two div's that I'm going to be switching between using a button. So I setup my HTML and my second div I set the display to "none" to hide it. However when using Jquery fadeIn/fadeOut you can see there is some shifting/expanding in terms of the Height.
Now I think to get around this I have to set the position to Absolute and also change the z-index of the first and second div so one is hidden behind the other. Using absolute however breaks the bootstrap container... So is there a way to switch the Div without the shifting in height when the button is clicked. Added some source so you can see what happens when to buttons are clicked.
http://www.bootply.com/hBNIHfCpxR

Try this:
http://www.bootply.com/PIG2icyErI
Relevant CSS:
.row {
position: relative;
padding-top: 50px;
}
#content-one, #content-two {
position: absolute;
width: 100%;
top: 0;
}

Jquery .click not working when changing css properties

I have this html,
<h2 class="more-button">Read More</h2>
and am trying to have it change the position of another div when it is clicked. To accomplish this I am using
$(".more-button").click(function(){
$(".hidden-block").css("right", "110%");
});
FIDDLE : https://jsfiddle.net/wfxxkk3x/
But the code does absolutely nothing. I have tried many different approaches with this problem and nothing seems to work. Any help would be appreciated.

Everything is fine with your code .. In your js fiddle here https://jsfiddle.net/wfxxkk3x/ . You have "hidden-block" as an ID not a Class .
So just change your jquery selector to "#" hash .
Example :
$(".more-button").click(function(){
//hidden-block is an id
$("#hidden-block").css("right", "110%");
});
hope this helps

Change the selector of the hidden-block from a class to an id
$(".more-button").click(function(){
$("#hidden-block").css("right", "110%");});
https://jsfiddle.net/wfxxkk3x/5/
or use animate to animate the div
https://jsfiddle.net/cjon7apg/

What CSS do you have set on your <div class="hidden-block"></div>? Because if you haven't set positioning anywhere, then your "right", "110%" will do nothing.
Try setting position: absolute; or position: relative; on your .hidden-block and that should allow you to move the block around.
If you don't have a stylesheet and you want to go pure jQuery then something like this:
$(".more-button").click(function(){
$(".hidden-block").css({"position":"relative", "right":"110%"});
});

You need to declare the position of the div in order for it to be affected by right
position: relative;
or
position: absolute;

In your fiddle, i notice "hidden-block" is ID not CSS, so your javascript must be:
$("#hidden-block").css("right", "110%");
Then, do you include jQuery? In your fiddle, i didn't notice jQuery library in External Resources.
After changing . to #, and add jQuery, your code works correctly. Try changing 110% to another value and see the result.

Unsuccessful in applying the jQuery.resizable API to an HTML table

I am wanting to apply the jQuery resizable API to my HTML table, but it does not seem to be working as it should, there is no handle appearing at the top of my table headers to resize the columns.
Here is the fiddle:
http://jsfiddle.net/6434t/3/
$(function() {
$("#data tr th").resizable({ handles: 'e' });
});

A couple of things to note
Your table row tags are not closed.</tr>
Your table head tag is not closed.</thead>
You are not including jquery UI in your file.
Remember to use your browser's debugger. It is there to help you in situations like the missing jquery UI code ref error.
I assumed you wanted the whole table to be re sizable in this example but if not it should still be able to get you started.
My revision

I played around with the CSS line-by-line to see what could have changed that would make jQuery not compatible with the CSS.
Changed the css line from:
#data thead tr {
top: expression(this.offsetParent.scrollTop);
position: relative;
}
to:
#data th tr {
top: expression(this.offsetParent.scrollTop);
position: relative;
}

jquery-ui datepicker change z-index

The problem is pretty straight forward although I'm having a hard time figuring out just how to solve it.
I'm using a jQuery-ui datepicker along with a custom made "ios style on/off toggle". This toggle uses some absolutely positioned elements which are currently showing up on top of my date picker.
see the ugly circle covering july 6th below...
the dirty way to do this (at least imo) is to write a style in one of my stylesheets, but I'd much rather use some javascript when the picker launches to get this done.
I've already tried
$('.date_field').datepicker();
$('.date_field').datepicker("widget").css({"z-index":100});
and
$('.date_field').datepicker({
beforeShow: function(input, inst) {
inst.dpDiv.css({"z-index":100});
}
});
but it seems the z-index get overwritten each time the datepicker is launched.
any help is appreciated!

Your JS code in the question doesn't work because jQuery resets the style attribute of the datepicker widget every time you call it.
An easy way to override its style's z-index is with a !important CSS rule as already mentioned in another answer. Yet another answer suggests setting position: relative; and z-index on the input element itself which will be automatically copied over to the Datepicker widget.
But, as requested, if for whatever reason you really need to set it dynamically, adding more unnecessary code and processing to your page, you can try this:
$('.date_field').datepicker({
//comment the beforeShow handler if you want to see the ugly overlay
beforeShow: function() {
setTimeout(function(){
$('.ui-datepicker').css('z-index', 99999999999999);
}, 0);
}
});
Fiddle
​I created a deferred function object to set the z-index of the widget, after it gets reset'ed by the jQuery UI, every time you call it. It should suffice your needs.
The CSS hack is far less ugly IMO, I reserve a space in my CSS only for jQuery UI tweaks (that's right above the IE6 tweaks in my pages).

There is a more elegant way to do it. Add this CSS:
.date_field {position: relative; z-index:100;}
jQuery will set the calendar's z-index to 101 (one more than the corresponding element). The position field must be absolute, relative or fixed. jQuery searches for the first element's parent, which is absolute/relative/fixed, and takes its' z-index

You need to use !important clause to force the in-line z-index value using CSS.
.ui-datepicker{z-index: 99 !important};

This worked for me when I was trying to use datepicker in conjunction with a bootstrap modal:
$('input[id^="txtDate"]').datepicker();
$('input[id^="txtDate"]').on('focus', function (e) {
e.preventDefault();
$(this).datepicker('show');
$(this).datepicker('widget').css('z-index', 1051);
});
Of course, change the selector to fit your own need. I set the "z-index" to 1051 because the z-index for the bootstrap modal was set to 1050.

The datepicker now sets the popup z-index to one more than its associated field, to keep it in front of that field, even if that field is itself in a popup dialog. By default the z-index is 0, so datepicker ends up with 1. Is there a case where this is not showing the datepicker properly? JQuery Forum Post
To get a z-index of 100. You need an input with z-index:99; and JQueryUI will update the datepicker to be z-index:100
<input style="z-index:99;"> or <input class="high-z-index"> and css .high-z-index { z-index: 99; }
You can also specify the z-index to inherit which should inherit from your dialog box and cause jQueryUI to properly detect the z-index.
<input style="z-index:inherit;"> or <input class="inhert-z-index"> and css .inherit-z-index { z-index: inherit; }

In my case nothing worked.
I needed to add the z-index to the input type that has the datepicker.
<input type="text" class="datepicker form-control" datatype="date" style="z-index: 10000;" id="txtModalDate">

The BEST NATURAL way is to simply put the date-picker element on a "platform" that has a "relative" position and has a higher "z-index" than the element that is showing up above your control...

This is for Bootstrap datetimepicker
If your datepicker is hiding because of scroll appears in your div use:
overflow-x: visible !important;
overflow-y: visible !important;
in css of whole div that contain your datepicker and other item such as
.dialogModel{
overflow-x: visible !important;
overflow-y: visible !important;
}

Add this:
$(document).ready(function()
{
$('#datepickers-container').css('z-index', 999999999);
};

CSS for dynamic inserted elements

Currently I'm working on a website where I'd like to show some toolstips for specific DIV elements. My weapon of choice is jQuery Tools.
So when I use $(".toolTipMe").tooltip(); it works quite nice. As soon as I hover the element a new DIV appears in the DOM:
<div class="tooltip" style="display: none; position: absolute; top: 313.65px; left: 798.5px;">foo</div>
However the design is done by our very own css-monster (you should this this guy!) and he's using a a lot of z-indexes so the .tooltip-DIV is behind the other elements.
Now the question:
The following code in our .css File is not having any effect:
.tooltip{
z-index: 9001;
}
In fact the attribute is not even showing up when debugging the website. But the following will work:
$(".toolTipMe").tooltip({
onShow: function(){
$(this).css("z-index","9001");
}
});
I'm not sure how CSS Rules are applied for dynamic inserted DOM Elements but what I really detest in the current workaround is the mixture of functionality and style. Any chance to clean up this mess? :C

I am not familiar with jquery tools, but if your z-index is not working you must need a !important tag or making it position:relative or position:absolute

In jquery tools tooltip you need to specify the z-index inside the tooltip constructor like:
$(".toolTipMe").tooltip({ z-index: '9001'});
I'm not sure if it is z-index or zindex.. check it out