We Keep Coding

How would I make div stick to top of screen using this code?

The code below is test code I'm using. The blue bar is supposed to stick to the top of the screen when it reaches the top.
This works on my browser, but the reason I'm here is because when it sticks to the top, it all of a sudden becomes smaller. As you see the blue bar starts with a full width across the container, but on my computer/browser, after it sticks to the top, the div shrinks to just the size of the text.
To make matters worse, I cannot reproduce the problem on jfiddle, because in jfiddle it doesn't work at all! (The images are just there to create a scroll).
Here is the jfiddle
Here is the jquery:
var titlePosition = $('.title').offset().top;
$(window).scroll(function () {
var scrollBar = $(this).scrollTop();
if (scrollBar > titlePosition) {
$('.title').css("top", "0px");
$('.title').css("position", "fixed");
} else {
$('.title').css("position", "relative");
}
});

Try this code:
Fiddle
CSS:
.title {
font-size:200%;
background-color:blue;
width:100%
}

Update your code:
if (scrollBar > titlePosition) {
$('.title').css("top", scrollBar+"px");
$('.title').css("position", "fixed");
} else {
$('.title').css("position", "static"); //otherwise it will still get that top value and cause unwanted position;
}

Just add this css:
.title {
...
width: 100%; /*This does the trick*/
}
Here you have it working: http://jsfiddle.net/edgarinvillegas/yPWAC/3/
Cheers

Set left to 0 as well. Additionally, some optimizations.
I prefer appending/removing classes to put all your CSS in your stylesheet. Saves you from problems later on when the code gets huge (who would be looking for CSS in JS files anyway?).
Also, cache objects. Everytime you fire scroll, your code fetches every single .title in the DOM and generates a jQuery object. Not very optimal. Instead, get all .title and just do the modifications on each scroll.
CSS:
.title.fixed {
position:fixed;
left:0;
right:0;
top:0;
}
JS:
var titlePosition = $('.title').offset().top;
var win = $(window);
var title = $('.title');
win.scroll(function () {
var scrollBar = win.scrollTop();
if (scrollBar > titlePosition) title.addClass('fixed');
else title.removeClass('fixed');
});
As for your non-working fiddle, you forgot to include jQuery. That should be found on the top left.

Try giving z-index:999 or, using jQuery - $('.title').css("z-index", "999");
Rest looks ok.

var titlePosition = $('.title').offset().top;
.top is not a function. offset() returns an object containing the properties top and left
Replace with:
var titlePosition = $('.title').offset();
You can now access the properties like so:
titlePosition.top or titlePosition.left
reference: .offset() http://api.jquery.com/offset/

Thanks for all the feedback.
Even though it helped improve, in the end the div was still resizing. Fixing the width to specific values was not responsive enough.
I finally stumbled upon a solution, based on all the advice:
http://jsfiddle.net/yPWAC/8/
var titleWidth = $('.title').width()
/*then after the div is fixed I change the width */
$('.title').css("width",titleWidth);
I made jquery hold the original width of the div, then change the width of the sticky div to whatever that value is.
For some reason, even if I defined the original width in CSS, the new sticky width would still come out a different size in the browser. So this method gives it the same width as the original (whatever it may be)

CSS through jQuery not applied

I am in a process to make a slideshow responsive. I am using simple jQuery to achieve this. My logic is:
If width of window is < 620, make the changes in CSS through jQuery.
else
set default(fixed) css
I have a element who has top:470px fixed css when the window is of normal size. If the size of the window goes below 620, I've changed this to be relative to the image size (which changes on window resize). Here is my code:
function resizeVideo() {
var width = $(window).width();
if(width < 620) {
$('#controls').css('top', $('img').height());
}
else {
$('#controls').css('top', '470');
}
}
$(window).resize(resizeVideo);
In this way, the controls would stick to the bottom of the image when size is less than 620. Some of the problems which are stopping me right now are:
Whenever I'm maximizing the window from a size which is less than 620, the images scale back to its original sizes, but the #controls element remains at the same height as it was before maximizing.
When I resize the window to a size greater than 620, then too the #controls stay somewhere around 345px when in actual, the height of the image is greater.
Whenever the image in the slideshow changes and I resize the window at that time, the #controls goes at the top of everything, i.e. it doesn't apply the top: property at all.
I have asked all these queries in on single question because all of them are about the #controls element and I believe that fixing one would automatically fix others. Any pointers would be highly appreciated!

You need the 'px' suffix when manipulating the css via jQuery.
function resizeVideo() {
var width = $(window).width();
if(width < 620) {
$('#controls').css('top', $('img').height()+'px'); // $.height() returns the height without 'px' - so we need to add it manually
} else {
$('#controls').css('top', '470px');
}
}
$(window).resize(resizeVideo);

Think you have to wrap a closure function inside .resize() e.g. $(window).resize(function(){ resizeVideo(); });.
Also because the function resizeVideo is not a reference you will have to call it with ()
For the jquery .css() function they've made some css hooks you can use without strings so to apply css it will be:
$('#controls').css({top: 470 + "px"});

CSS: Increase parent width if height of p overlays

I have an image which is 100% of the window. Inside I have an absolutely positioned div (with the class caption) which displays a header and some text. This caption has a min-width of 36%. My website if fully responsive.
I am using media queries to reposition the caption on tablets and mobiles. However, sometimes the text inside the item is too large - the height of the caption is greater than the image.
I am using the following code to fix this using javascript, but it feels a big buggy (and it does not work when the user resizes the browser):
window.onload = function(){
setWidth();
};
var count = 0;
function setWidth() {
$('.item').each(function() {
if ( $(this).find('.caption')[0].scrollHeight > $(this).height() && count <= 100) {
$(this).find('.caption').css('width', $(this).find('.caption').width() + 10);
count++;
setWidth();
}
});
}
Is there a way I could achieve the same effect using just css. Something where max-height on the caption is 100%, the min-width is 36% and the width will change accordingly as the height of the caption changes.

Difficult to see whether CSS is feasible without markup for your example. As for the JavaScript, you want to attach your resize function to the window.onresize event, this will call whenever the window is resized.
See example on JSFiddle
window.onresize = updateDimensions;
function updateDimensions(e) {
document.getElementById('width').innerHTML = window.innerWidth;
document.getElementById('height').innerHTML = window.innerHeight;
}
updateDimensions();

Disable superfish on resize event

I'm trying to combine the Superfish jQuery plugin with Nathan Smith's adapt.js snippet, which dynamically loads in different CSS files depending on browser width. I want to disable/replace/something the Superfish menu when in mobile mode, because drop-downs don't make any sense there. I've attempted to detect the change and disable the menu, but I need it to re-enable when the window is resized wide again.
Here's what I have:
function htmlId(i, width) {
document.documentElement.id = 'pagesize_' + i;
}
var ADAPT_CONFIG = {
path: '/css/',
dynamic: true,
callback: htmlId,
range: [
'0px to 760px = mobile.css',
'760px = 960_12.css'
]
};
function sfMenu() {
$("#pagesize_1 ul.sf-menu").superfish({
delay: 800,
animation: {opacity:'show'},
speed: 'fast',
autoArrows: true,
dropShadows: true
});
}
$(document).ready(function(){
sfMenu();
});
The rationale was to change the id of the html element on resize (between pagesize_0 and pagesize_1 - which works) and to use descendent selectors in CSS to disable the menu, but that doesn't work. I tried rerunning sfMenu() on resize (code not shown above), but it doesn't seem to inspect the changed DOM, realise pagesize_1 no longer exists, then fail gracefully (which I think would achieve the effect I'm after).
Any thoughts? Ideally I'd like to destroy the superfish function on resize-to-mobile, then re-instate it when the screen is large again.

SuperFish has a 'destroy' method (certainly in latest 1.7.3 version) that you could call depending on screen size to disable it and then re-style the navigation using CSS media queries. You could also then call the 'init' method of SuperFish when you wanted to enable it again:
var sf, body;
var breakpoint = 600;
jQuery(document).ready(function($) {
body = $('body');
sf = $('ul.sf-menu');
if(body.width() >= breakpoint) {
// enable superfish when the page first loads if we're on desktop
sf.superfish();
}
$(window).resize(function() {
if(body.width() >= breakpoint && !sf.hasClass('sf-js-enabled')) {
// you only want SuperFish to be re-enabled once (sf.hasClass)
sf.superfish('init');
} else if(body.width() < breakpoint) {
// smaller screen, disable SuperFish
sf.superfish('destroy');
}
});
});
This should hopefully explain what I'm talking about :)
http://cdpn.io/jFBtw

I've been playing around with the same thing, going from horizontal nav-bar style (window wider than subnav) to vertical drop-down style (subnav wider than window) to just plain-ol-list (main nav wider than window).
Not sure how elegant it is, but in the end unbind() and removeAttr('style') disabled the dropdowns for me:
$(window).resize(function() {
if ($(this).width() < maxNavigationWidth) {
$('#neck .navigation').removeClass('sf-menu');
$('.navigation li').unbind();
$('.navigation li ul').removeAttr('style');
} else {
$('#neck .navigation').addClass('sf-menu').addClass('sf-js-enabled');
applySuperfish();
}
});

achieving equal height columns in a responsive / flexible layout

I'm trying to achieve equal height columns on a 'responsive' website.
That means I'm using media queries to provide several layouts for one website depending on the size of the device and window.
I have 2 columns which need to have the same height. It's easy to achieve when the layout is fixed. I found dozens of scripts that do it and it works well.
However when I resize the browser window, that generated height doesn't change. So if the window is smaller, the height of the columns stays the same as before and the contents of the columns overflows. It's ugly.
Is there a way that generated height could change as I resize the window ?
Note : because of what's inside the columns I cannot use any CSS trick with backgrounds images etc. I really REALLY need both columns to truly have the same height at all times.

This question is already pretty old, but I didn't stumble upon a good solution for this myself until now.
A working solution would be a jQuery plugin that does something like setting the height of the columns to 'auto', measuring which one is the highest and set the columns to that height. Something along the lines of this:
$.fn.eqHeights = function (options) {
var $el = $(this),
$window = $(window),
opts = $.extend({}, $.fn.eqHeights.defaults, options);
if ($el.length > 0 && !$el.data('eqHeights')) {
$(window).bind('resize.eqHeights', function () {
$el.eqHeights(opts);
});
$el.data('eqHeights', true);
}
return $el.each(function () {
var children = $(this).find(opts.childrenSelector);
if (!(opts.minWidth) || opts.minWidth < $window.width()) {
var curHighest = 0;
children.each(function () {
var $el = $(this),
elHeight = $el.height('auto').height();
if (elHeight > curHighest) {
curHighest = elHeight;
}
}).height(curHighest);
} else {
children.height('auto');
}
});
};
$.fn.eqHeights.defaults = {
childrenSelector: '*',
minWidth: ''
};
You can see this in action here: demo#codepen.io
The plugin supports two options:
childrenSelector: (Optional) The selector by which children that should get equal height are picked. Defaults to *, so everything in your parent is brought to equal height. Set to > to pick only direct children or something else to get the desired effect.
minWidth: (Optional) The minimum viewport width above width the Plugin is working and calculates equal heights for the seleted children. Below their height is set to auto. This comes in handy if at some point your containers are laid out below each other and shouldn't have an equal height. Empty and inactive by default.
While this is working very good in all browser with which I tested, it is a very hackish solution, so maybe someone here can propose something better. I thought about copying the columns and their wrapper to hidden container in the document, but this isn't any less clean and produces a way bigger footprint.

My favorite trick to creating equal height columns that work almost everywhere is to set "overflow:hidden" on a wrapper div, and setting a huge positive bottom padding and a negative bottom margin on the columns themselves. Now the columns will always be the full height of the wrapper, whatever the height of the wrapper is.
Viz -
<div class="wrapper">
<div class="column"> Column one content </div>
<div class="column"> Column two content </div>
</div>
<style type="text/css">
.wrapper {
overflow:hidden;
}
.column {
margin-bottom: -2000px;
padding-bottom: 2000px;
}
</style>
Here's a JSFiddle example - http://jsfiddle.net/yJYTT/

I wrote a small jQuery plugin for this: http://github.com/jsliang/eqHeight.coffee/
Tested it on Chrome, Firefox and IE9 and it works for me.

This works great! To make it work inside of a responsive layout you'll need to add the # media query so it's only used on screen sizes "larger than" your break point. Otherwise, the sidebar color extends down into the main content on the tablet and phone views. Here's how it looks in a responsive stylesheet:
div.wrapper {
overflow:hidden;
}
.column {
background-color: rgba(193,204,164,.5);
padding:2%;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
#media screen and (max-width:960px){
.column {padding-bottom:2%; margin-bottom:0px;}
}

I hacked the solution even further from boundaryfunctions's answer to take into consideration responsive layouts where the panels reflow above each other.
By checking each one against the first one's offset.top I was able to detect the orientation of the panels and resize their .panel-body element or assign an auto heigh for reflowed panels.
(function($) {
$.fn.eqHeights = function() {
var el = $(this);
if (el.length > 0 && !el.data('eqHeights')) {
$(window).bind('resize.eqHeights', function() {
el.eqHeights();
});
el.data('eqHeights', true);
}
var panels = el.find(".panel-body");
var fistoffset = panels.first().offset();
var curHighest = 0;
return panels.each(function() {
var thisoffset = $(this).offset();
var elHeight = $(this).height('auto').height();
if(thisoffset.top==fistoffset.top){
if (elHeight > curHighest) {
curHighest = elHeight;
}
}else{
curHighest = "auto";
}
}).height(curHighest);
};
}(jQuery));
$('.match_all').eqHeights();
Example here: http://bootply.com/render/104399

Some time after the question I know - but for reference - last time I had to solve this problem I hacked this jquery code to a plugin:
http://css-tricks.com/equal-height-blocks-in-rows/
obviously $(window).resize is the crucial part - as it'll re-conform the heights once the re-size has taken place. Taking it a step further I always meant to look into 'de-bouncing' the column reconform to help with performance:
http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/
but never got that far.

I had the same problem. After some research I selected the faux column technique. Check this blog post that I wrote on how to make it work in a responsive design.
Responsive full height (equal height) columns using the faux columns technique