Develop Reference

How to change image height with one provided by the user (prompt)

Second part of the code (starting with var newHeight) does not work - what is wrong?
/* var getDim = document.getElementsByTagName("img");
var a = getDim[0].height;
var target = document.getElementById("target");
target.innerHTML = "<p>This image has" + " " + a + " " + "pixels.</p>"; */
var newHeight = prompt("Provide new height"); // 2nd part
var image = document.getElementsByTagName("img");
var theOne = image[0];
if (isNaN(newHeight) === false) {
theOne.style.height === newHeight;
}
else {
alert("Provide a proper value!")
}

You have to change this line:
theOne.style.height = newHeight;
instead
theOne.style.height === newHeight;
The second one is an expression, not an assignment.

jQuery - unbind and bind again

hi I tried to show the div (blue one) on mouseenter but only then, when ul has class hidden.
I have done it but how i dont know how can i bind again function which will show the blue div on mouseenter ..
To test it hover on the white li, then click the violet button and try to hover white li again - in the last step should show blue li but ii wont :(
this is my fiddle
fiddle
$(document).ready(function(e){
$('li').each( function() {
var elem_number = $(this).index();
$(this).html(elem_number + 1);
});
$('.left-panel-toggle').on('click', function () {
if($('ul').hasClass('hidden')) {
$('ul').animate({width:'150px'}, 200).addClass('visible').removeClass('hidden');
$('li').animate({height:'100px',width:'150px'}, 200);
$('li').unbind("mouseenter");
} else {
$('ul').animate({width:'35px'}, 200).addClass('hidden').removeClass('visible');
$('li').animate({height:'30px', width:'30px'}, 200);
}
});
$( "li" ).bind('mouseenter',function(e) {
if($('ul').attr('class') == 'hidden') {
$('.tooltip').show().animate({'left':'36px','opacity':'1'},100);
var tooltip_height = $('.tooltip').height();
var tooltip_width = $('.tooltip').width();
var viewHeightY = $(window).height();
var li_position = $(this).position();
var li_height = $(this).height();
var li_width = $(this).width();
var tooltip_position = $('.tooltip').position();
var tt = tooltip_position.top + tooltip_height
if(li_position.top < tooltip_height/2) {
$('.tooltip').css({'top':li_position.top - li_position.top, 'left':li_position.left + li_width + 15});
}
if(li_position.top > tooltip_height/2) {
$('.tooltip').css({'top':li_position.top - tooltip_height/2, 'left':li_position.left + li_width + 15});
}
if((viewHeightY - li_position.top) < tooltip_height/2) {
$('.tooltip').css({'top':li_position.top -((li_position.top + tooltip_height)-viewHeightY), 'left':li_position.left + li_width + 15});
}
}
// $('img.x').attr('src', $(this.img).val('src'));
e.preventDefault();
});
$( "ul" ).bind('mouseleave', function() {
$('.tooltip').animate({'left':'56px','opacity':'0'},60);
});
});

jQuery changing showText to a Div

I have a question about my javascript code.
I got this script from internet, but the problem is that it displays text, I want to make a div of it because I want it like a button instead.
This is the code:
<script type="text/javascript">
$(document).ready(function () {
var maxheight=218;
var showText = "Lees meer..";
var hideText = "Inklappen";
$('.leesmeer').each(function () {
var text = $(this);
if (text.height() > maxheight){
text.css({ 'overflow': 'hidden','height': maxheight + 'px' });
var link = $('' + showText + '');
var linkDiv = $('<div></div>');
linkDiv.append(link);
$(this).after(linkDiv);
link.click(function (event) {
event.preventDefault();
if (text.height() > maxheight) {
$(this).hktml(showText);
text.css('height', maxheight + 'px');
} else {
$(this).html(hideText);
text.css('height', 'auto');
}
});
}
});
Thanks for the advice!

For fun i tried changing the code into a jquery plugin, which you could find here, and which simplifies the ready function quite a lot :)
http://jsfiddle.net/Icepickle/SA744/
$(document).ready(function () {
$('.leesmeer').readMore({});
});

Just use input tag with type="button" and value="something " it works
var link = $('<input type="button" value=' + showText + '/>');

Simply add the div tag to the text :
var showText = "<div class='more-less'>Read More..</div>";
var hideText = "<div class='more-less'>Read Less</div>";
JSFiddle

jQuery (or other javascript) to stack divs at fixed distance from top of viewport

I would like it so that the as the user scrolls down the page and hits certain "sticky" elements, they add themselves to the top of the page.
I.e., let's say the page has a fixed, 10px high element at the top, then a 50px high Logo (non sticky), then a horizontal navigation bar (sticky), then some other non-sticky elements, then a pager (sticky, allows user to go to next or previous page), etc.
The idea is that some elements are useful all up and down the page, others can just stay at the top. But since they are intercalated, we need a way to stick just the important ones to the top.
So, if you scrolled halfway down the page, the non stick elements would have moved out of view, but the sticky ones would all be stacked at the top below any fixed element. In my example, you'd have 10px high element, nav bar, and pager. The logo would scroll away.
I've come up with some jQuery but it's quirky. If I scroll down slowly, it works. If I scroll down quickly, or hit "page down" on my keyboard, it ends up working incorrectly, with extra space between sticky elements and other errors.
It feels like I'm so close, and yet so far.
Here's what I have.
<style type="text/css">
div.stickert {
/*
padding:20px;
margin:20px 0;*/
/*background:#AAA;
width:190px;*/
position:relative;
top:0px;
}
.sticked {
position:fixed;
/*top:0px;
z-index:100;*/
width:100%;
}
</style>
<!--<script src="http://code.jquery.com/jquery-latest.min.js"></script>-->
<script type="text/javascript">
jQuery(document).ready(function() {
var stupid = jQuery(".stickert");
var startOffset = 0;
var startingZ = 100;
/* var topDone = []; */
/* var pos = second.position(); */
var origOffsets = [];
var heights = [];
var currentOffsets = [];
mWait = jQuery("#m-wait");
mWait.show();
mGraph = mWait.find('p');
mGraph.text('');
jQuery.each(stupid, function(i, object) {
var obj = jQuery(object);
var pos = obj.position();
origOffsets[ i ] = pos.top;
heights[ i ] = obj.height();
}
);
var debug = false;
jQuery(window).scroll(function() {
var windowpos = jQuery(window).scrollTop();
var topOffset = startOffset;
var theZIndex = startingZ;
jQuery.each(stupid, function(i, object) {
var obj = jQuery(object);
console.log(obj);
/*mGraph.append('obj:<br />' + obj);*/
/*var pos = obj.position();*/
/* currentOffsets[ i ] = pos;*/
var tagName = obj.get(0).tagName;
tagName.toLowerCase; /* e.g. "div" or "li" */
var totalOffset = parseInt(origOffsets[ i ],10) - parseInt(startOffset,10) - topOffset; /* I think subtraction is correct */
if(windowpos <= totalOffset /*&& obj.hasClass("sticked") */) {
if( debug ) alert('resetting');
if(obj.hasClass("sticked") ) {
obj.removeClass("sticked");
/*obj.addClass("stickert");*/
obj.css({ top: "0px" });
var removeThis = obj.next(".sticked-padder");
removeThis.remove();
obj.addClass("stickert"); /* put inside if hasclass? */
}
/* return false; */
} else if(windowpos > totalOffset) {
/*if(windowpos >= pos.top) {*/
/*if( debug ) alert("setting sticked");*/
/*if(!(i in topDone)) {*/
if(obj.hasClass("stickert")) {
mGraph.append('Element ' + i + '<br />Made it to the start. zIndex = ' + theZIndex + '</br>'
+ 'topOffset= ' + topOffset + '<br />');
obj.removeClass("stickert");
/*currentOffsets[ i ] = obj.position();*/
topOffset += obj.height();
if( debug ) alert(topOffset);
obj.after('<' + tagName + ' class="sticked-padder" style="height:' + obj.height() + 'px"></div>');
/*topDone[ i ] = "done";*/
obj.css({ top: ( topOffset - heights[ i ] ) + "px"});
obj.addClass("sticked");
obj.css({ zIndex: theZIndex });
theZIndex -=1 ;
mGraph.append('Element ' + i + '<br />Made it to the end. zIndex = ' + theZIndex + '</br>'
+ 'topOffset= ' + topOffset + '<br />');
/* alert(theZIndex);*/
}
}
topOffset += heights[ i ];
});
jQuery(window).scrollTop(windowpos); /* make sure window stays in same place */
/* ssss.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos); */
/*if (windowpos >= pos.top) {
stupid.addClass("sticked");
} else {
stupid.removeClass("sticked");
}*/
});
});
</script>

you can check Twitter Bootstrap's affix javascript and re-use it
http://getbootstrap.com/javascript/#affix
source:
https://github.com/twbs/bootstrap/blob/3.0.0-wip/js/affix.js

Jquery - Animate innerHTML possible?

I'm trying to have a function that does setTimeout, then changes the innerHTML:
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function(){
document.getElementById("middlecolor").innerHTML='new text new text';
}, 1000);
});
</script>
Question: How could I animate the new text that appears, i.e. line by line as opposed to being written all at once?
Thanks for any suggestions!!

Try something like this:
<div id="text">
</div>
$(document).ready(function () {
var interval = setInterval(function () {
$('#text').append('<p style="display: none;">new text</p>');
$('#text p:last').fadeIn('slow');
}, 5000);
});
See the example here
If you want to kill the interval, can be doing this:
clearInterval(interval);
Greatings.

Line-by-line is a bit tricky, but possible.
var ps = document.getElementById("text").children;
var i = 0;
var $p = $(ps[i]);
setTimeout(function newline(){
$p.css("height", function(index, h){
h = parseInt(h);
h += parseInt($p.css("line-height"));
console.log(h, ps[i].scrollHeight);
if (h > ps[i].scrollHeight)
$p = $(ps[++i]);
return h;
});
if (i < ps.length)
setTimeout(newline, 200);
}, 200);​
I'd suggest to use a typewriter effect, which is also very likable: http://jsfiddle.net/pZb8W/1/
var ps = document.getElementById("text").children;
var i = 0;
var $p, text;
var speed = 20;
setTimeout(function newchar(){
if (!text) {
$p = $(ps[i++]);
text = $p.text();
$p.empty().show();
}
$p.append(document.createTextNode(text.charAt(0)));
text = text.slice(1);
if (text.length || i < ps.length)
setTimeout(newchar, Math.random()*speed+speed);
}, 3*speed);​

Here's a function that would animate in multiple lines of text, one after the other:
<script type="text/javascript">
$(document).ready(function(){
function animateAddText(id, text, delta) {
var lines = text.split("\n");
var lineCntr = 0;
var target = $("#" + id);
function addLine() {
if (lineCntr < lines.length) {
var nextLine = "";
if (lineCntr != 0) {
nextLine = "<br>";
}
nextLine += lines[lineCntr++];
$("<span>" + nextLine + "</span>").hide().appendTo(target).fadeIn(1000);
setTimeout(addLine, delta);
}
}
addLine();
}
var multilineText = "First line\nSecond Line\nThird Line\nFourth Line\nFifth Line";
animateAddText("middlecolor", multilineText, 1000);
});
</script>
And a working demo: http://jsfiddle.net/jfriend00/Gcg5T/