We Keep Coding

Resizeing textarea on page load

I have found the following code for resizing the textareas to extend according to the content.
$(document).ready(function() {
$(".content").on("keyup",function(){
var h = $(this).height();
$(this).css("height","0px");
var sh = $(this).prop("scrollHeight");
var minh = $(this).css("min-height").replace("px", "");
$(this).css("height",Math.max(sh,minh)+"px");
});
});
The code works well, but the textareas extend only after selecting them and making a change.
I would like them to extend on the page load already.... Any ideas?
Thank you!

Try this:
$(document).ready(function() {
var $content = $('.content');
$.each($content, resize);
$content.on("keyup", resize);
function resize(){
var h = $(this).height();
$(this).css("height","0px");
var sh = $(this).prop("scrollHeight");
var minh = $(this).css("min-height").replace("px", "");
$(this).css("height",Math.max(sh,minh)+"px");
}
});

Background-reacting navigation for one page websites - working script

Good morning!
I want to share with you a simple script I made for the purposes of my company new website. It allows you to make a floating navigation bar which smoothly changes its background.
For now it's working with jQuery. My question is - is it possible to made this in pure CSS? My previous idea was to make navigation container with overflow: hidden and position: absolute + menu with position: fixed. Everything worked well until I realized that Firefox can't handle with this combination.
I'm waiting for yours ideas :)
Here's the code and preview:
var nav = $('.nav'),
navHeight = nav.height();
// Duplicate navigation
var navReversed = nav
.clone(true)
.addClass('nav-reversed')
.insertAfter(nav);
var navs = $('.nav'),
slides = $('.slide');
/* ... */
// onScroll event
$(window).on('scroll resize', function() {
var scrollTop = $(document).scrollTop(),
slide;
// Find first visible slide
slides.each(function() {
if ($(this).offset().top > scrollTop)
return false;
slide = $(this);
});
if (slide.length) {
var id = '#' + slide.attr('id'),
slideNext = slide.next('.slide');
var clipTop = clipBottom = 'auto';
if (slide.hasClass('slide-reversed')) {
clipBottom = Math.max(slideNext.offset().top - scrollTop, 0);
}
else {
clipTop = navHeight;
if (slideNext.length && slideNext.hasClass('slide-reversed')) {
clipTop = Math.min(slideNext.offset().top - scrollTop, clipTop);
}
}
if (clipTop !== 'auto') {
clipTop = Math.round(clipTop) + 'px';
}
if (clipBottom !== 'auto') {
clipBottom = Math.round(clipBottom) + 'px';
}
navReversed.css('clip', 'rect('+clipTop+',auto,'+clipBottom+',auto)');
/* ... */
}
}).trigger('scroll');
Full version: http://jsfiddle.net/greenek/NL7Fh/

You can try checkbox hack http://css-tricks.com/the-checkbox-hack/, there are :target too but you can't higlight the link. http://codepen.io/anon/pen/lqvpA

jquery function doesn't trigger

My resizeAreas function doesn't trigger in $(document).ready function. Here's the link to the app. I have also tried $(document).load but same result.
This problem is not consistent. But most of the time the page doesn't load correctly. If the list of task have the same height and 4 equal(as height) lists on the row then they are loaded correctly else they're not. To make sure that you see how it must look you can move a task element from one list to another. I don't have the reputation to post images.
Here is most of the javascript code:
function makeDropArea() {
var widthArea = $(".taskListing").width() / 2 - 55;
var heightArea = $(".taskListing").height();
$('.dropArea').width(widthArea);
$('.dropArea').css('margin-left', 5 + 'px');
$('.generalInfo').css('margin-left', 5 + 'px');
$('.generalInfo').css('width', widthArea * 2 + 220 - 45);
$('.subTaskHeader').css('width', widthArea + 25);
}
function makeDropElement(){
var widthEl = $('.dropArea').width() + 25 ;
$('.task').width(widthEl);
}
function taskListingSize(){
var width = getWidth();
var height = getHeight() * 80 / 100;
$('.taskListing').css('width', width);
}
function resizeAreas() {
$('.taskListing').each(function(){
var highestBox = 0;
$('.dropArea', this).each(function(){
if($(this).height() > highestBox)
highestBox = $(this).height();
});
$('.dropArea',this).css('min-height', highestBox);
});
}
$(document).ready(function () {
menu();
taskListingSize();
makeDropArea();
makeDropElement();
resizeAreas(); //<-- this is the one with the problems
$(".dropArea").resize(resizeAreas());
$( window ).resize(function() {
taskListingSize();
makeDropArea();
makeDropElement();
});
});
Thanks.
Update 1:
I've done some more testing and this bug is only on chrome and firefox but not on IE. The problem appears only on the openshift platform.

Either change:
$(".dropArea").resize(resizeAreas());
To:
$(".dropArea").resize("resizeAreas");
Or:
$(".dropArea").resize(function(){
resizeAreas();
});

I think it should be
$(".dropArea").resize(resizeAreas);
Or
$(".dropArea").resize(function(){
resizeAreas();
});

Creating onClick jquery tooltip on the basis of offset(). Everything works well apart when the user comes at the bottom, tool tip actually goes hide

I am creating onClick jquery tooltip on the basis of 'offset()'. Everything works well apart when the user comes at the bottom. Tool tip actually goes hide.
Its a obvious thing I have given the main container 'overflow:hidden'. But I would like to re-position the tool tip or may be this time not according to offset position.
Ultimately I don't want to hide it.
Any suggestion or help much appreciated. Apologies if I couldn't explain it in right manner.
Here is the code and fiddle URL:
$('#data-list > li').on('click', function(){
var $this = $(this), thisoffset = $this.offset().top;
$('.active').removeClass('active');
$this.addClass('active');
$('.container-slide').animate({top:thisoffset-15}, 300).fadeIn();
});
http://jsfiddle.net/mufeedahmad/ndk44/12/
Thanks in advance.

Basically you have to check if the container-slide goes out of the wrapper box. You can add this line
if(thisoffset + $('.container-slide').height() > $(".wrapper").height())thisoffset = $(".wrapper").height() - $('.container-slide').height() + 15;
So the final code becomes
$('#data-list > li').on('click', function(){
var $this = $(this), thisoffset = $this.offset().top;
if(thisoffset + $('.container-slide').height() > $(".wrapper").height())thisoffset = $(".wrapper").height() - $('.container-slide').height() + 15;
$('.active').removeClass('active');
$this.addClass('active');
$('.container-slide').animate({top:thisoffset-15}, 300).fadeIn();
});
Check this fiddle http://jsfiddle.net/aZJuN/

var divleftoffset = $(".wrapper").offset().left - $(document).scrollLeft();
var left = event.pageX; -$(document).scrollLeft();
menuWidth = $(".container-slide").width();
divWidth = $(".wrapper").width();
menuleft = menuWidth + left;
divleft = divleftoffset + divWidth;
var right;
if (menuleft > divleft) {
left = left - menuWidth;
}
var divrightoffset = $(".wrapper").offset().top - $(document).scrollTop();
var Top = event.pageY; -$(document).scrollTop();
menuHeight = $(".container-slide").height();
divHeight = $(".wrapper").height();
menuTop = menuHeight + Top;
divTop = divrightoffset + divHeight;
var right;
if (menuTop > divTop) {
Top = Top - menuHeight;
}
$('.active').removeClass('active');
$this.addClass('active');
$('.container-slide').animate({ top: Top - 15 }, 300).fadeIn();

Jquery image load issue when navigation through menu

I am having below issue when trying to brows the site through navigation,
http://nickylurie.com.au/Temp/index.php
as you can see left hand site image some time load some time aren't,
i am you using below code to change the image when going through to different page,
var pic = new Image();
pic.src = "images/homeLargeImg.jpg";
and below is the my backend code.
var RHigh=$('#RightPane').height()
var windHigh=$(window).height()
$(pic).hide().load(function()
{
//debugger;
$(this).fadeIn();
var marginT=(windHigh/100*5)
var imgH = (marginT+windHigh)
$("#LeftPaneImage").html("<img id='triquibackimg' src='"+pic.src+"' style='"+windHigh+"'/>")
$("#LeftPane").css("width",$("#LeftPaneImage").width());
$("#RightPane").css("margin-left",$("#LeftPaneImage").width()+10);
resize()
})
$(window).bind('resize', function()
{
resize()
});
function resize()
{
RHigh=$('#RightPane').height()
windHigh=$(window).height()
if( RHigh < windHigh)
{
$("#triquibackimg").css("height",$(window).height());
$("#LeftPane").css("width",$("#LeftPaneImage").width());
$("#RightPane").css("margin-left",$("#LeftPaneImage").width());
//----------------Right Pane vAlign--------------
(function ($) {
$.fn.vAlign = function() {
return this.each(function(i){
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);
(function ($) {
$.fn.hAlign = function() {
return this.each(function(i){
var w = $(this).width();
var ow = $(this).outerWidth();
var ml = (w + (ow - w)) / 2;
$(this).css("margin-left", "-" + ml + "px");
$(this).css("left", $("#LeftPane").width());
$(this).css("position", "absolute");
});
};
})(jQuery);
$(document).ready(function() {
$("#RightPane").vAlign();
//$("#RightPane").hAlign();
});
}
else
{
$("#triquibackimg").css("height",(RHigh+150));
$("#LeftPane").css("width",$("#LeftPaneImage").width());
$("#RightPane").css("margin-left",$("#LeftPaneImage").width());
// if ($(window).height()>800){
// $("#RightPane").css("position",'relative');
// }
// else{$("#RightPane").css("margin-top",60)}
}
}
can some one please advice about this?
Thanks

Offtopic: I wanted to comment on this questions, because I don't have the answer (yet), its lame that I must have a repetation of 50 to comment..
Ontopic:
What are you trying to achieve and what is the problem?
When I try to view your website, all the large images on the left are loading (mac, chrome), I checked all pages..
They do load very slow..
Why do you want to insert the image by javascript and not simply by a img tag?