javascript change element size doesn't work properly - javascript

I'm trying to create a javascript function that (onmouseover) would increase elements height and width by 10px (1px increase 10 times with setTimeout), but instead my element increases 200px in height and 100px in width. That doesn't make any sense. Example on how it's not working properly: www.modwebsolutions.com/test3/ My source code:
var el;
function changeSize(id) {
var elem=document.getElementById(id);
el=elem;
for (var i=0; i<10; i++) {
setTimeout(changeS,100);
}
}
function changeS() {
var tempHeight=el.offsetHeight;
var tempWidth=el.offsetWidth;
el.style.height=tempHeight + 1 +"px";
el.style.width=tempWidth + 1 + "px";
}
// Update: tried
el.style.height=(parseInt(tempHeight) + 1) +"px";
el.style.width=(parseInt(tempWidth) + 1) + "px";
this time only adds 50px to height and still 100px to width... instead of 10px each way.
UPDATE: it seems that I'm gonna have to answer my own question, I'm still not sure, but I think it has to do with iterations running ahead of setTimeout and messing everything up. Unfortunately it seems that setTimeout can only work ok in recursive functions.
UPDATE2: recursive approach doesn't work as well... a total dead end.

May be because tempWidth and tempHeight are trated as string you should try...
el.style.height= (parseInt(tempHeight) + 1) +"px";
el.style.width= (parseInt(tempWidth) + 1) + "px";

Change the function to:-
function changeS() {
var tempHeight=el.offsetHeight;
var tempWidth=el.offsetWidth;
el.style.height = (parseInt(tempHeight) + 1) +"px";
el.style.width = (parseInt(tempWidth) + 1) + "px";
}
Hope this helps because I feel offsetHeight will return *px which will result the style height to be *pxpx which will fail to render properly!
Cheers

From a similar problem,
Instead of
tempHeight + "px";
try
tempHeight + "pxpx";
Although it makes no sense and it's not documented, I found this to correct to the proper heights in IE10 as well as Firefox, Chrome and Opera using the style.height property. IE earlier versions not tested. It must be a data type problem.

Related

How do you get this result, using Jquery Scroll Event & offset/position, css or javascript?

How do you get this result in css, javascript or jquery, or a combination of all:
I asked and posted a similar question before, but no one answered it.
Someone said:
"Maybe you can use javascript (or bether JQuery) for this.
If you use JQuery, you can use the scroll event. If you are scrolling, do a
check if it hits the other div. https://api.jquery.com/scroll/
Checking the positions of the divs is possible with offset/position.
http://api.jquery.com/offset/ https://api.jquery.com/position/
If you want to change the background, you give the div a background color
that is pink. If it hits then you can add an additional background-image
that has a specific background-position
(http://www.w3schools.com/cssref/pr_background-position.asp xpos ypos).
I don't have tried it yet, but I guess it is possible that way."
So my question is, how would you go about doing it to get this result or regardless of what way?
I came up with this after a couple of hours trying to make it work. It was pretty fun doing it, so I'm sharing it.
$(document).ready(function() {
var initScrollTop = $(window).scrollTop();
$('.div1').css('top', (initScrollTop+100)+"px");
$(window).scroll(function () {
var top = parseInt($('.div1').css('top').split("px")[0]);
// I GIVE A FIXED TOP TO .DIV1
var scrollTop = $(this).scrollTop() + 100;
$('.div1').css('top', scrollTop+"px");
// GETTING SOME VALUES
// DIV1
var div2Top = parseInt($('.div2').css('top').split('px')[0]);
var div2Height = parseInt($('.div2').css('height').split('px')[0]);
var div2Bottom = parseInt($('.div2').css('bottom').split('px')[0]);
// DIV2
var div1Width = parseInt($('.div1').css('width').split('px')[0]);
var div1Height = parseInt($('.div1').css('height').split('px')[0]);
var div1Top = parseInt($('.div1').css('top').split('px')[0]);
var div1Bottom = parseInt($('.div1').css('bottom').split('px')[0]);
var div1Left = parseInt($('.div1').css('left').split('px')[0]);
// WE ARE GOING THROUGH THE GREEN BOX
if(scrollTop + div1Height > div2Top) {
// OUTSIDE OF THE GREEN BOX (.div2)
if(scrollTop + div1Height > div2Height + div2Top) {
var div3Height = div2Top + div2Height - scrollTop;
$('.div3').css('top', scrollTop+ "px")
// .css('bottom', div2Bottom + "px")
.css('width', div1Width + "px")
.css('height', div3Height + "px")
.css('visibility','visible');
console.log("I'm out");
}
// INSIDE OF THE GREEN BOX (.div2)
else {
var div3Height = (div1Top > div2Top) ? div1Height : scrollTop + div1Height - div2Top;
var div3Top = (div1Top > div2Top) ? div1Top : div2Top;
$('.div3').css({
'top' : div3Top + "px",
'left': div1Left + "px",
'width': div1Width + "px",
'height': div3Height + "px",
'visibility':'visible'
});
}
} else {
$('.div3').css('visibility','hidden');
}
// WE ARE ABSOLUTELY OUT OF THE GREEN BOX (FROM THE BOTTOM GOING DOWN)
if(scrollTop > div2Top + div2Height) {
$('.div3').css('visibility','hidden');
}
});
});
Here's there a fiddle so you can test it http://jsfiddle.net/5076h670/2/
So basically what it does is create three divs, two of them will be visible and 'collide' between each other, the other one starts hidden and it shows only when the position of the div1 is in the range of the div2. This div3 (the third div) will be shown over the div1 (see the z-index). When it's absolutely out of the box div3 will be hidden.
I don't know what else to explain about the code, I don't know if (and I don't think, it took me a while to make it work) it's understandable what it does. If you have something to ask I'll be reading ;)
Hope it helps

box-sizing x IE7, the last battle

I've been searching through the web for a solution that can viabilize box-sizing in the IE7 (I know, the year is 2014, but the project (therefore the clients) still demand this). I really need box-sizing because the entire project is responsive.
I found this boxsizing.htc and it works pretty well in almost any case. But, unfortunately, it is not my case.
Because I'm using angularjs and I have a div with three columns (children divs with float left) inside and i can click on a button to change the number of columns. When this happens the boxsizing.htc process all its calculations again making my width and height smaller each time I change the number of columns.
So, I thought, angularjs can solve this. I found this pretty interesting link
I could adapt that code into this:
myApp.directive('resizable', function($window){
return {
restrict: 'A',
link: function(scope, element){
scope.initializeWindowSize = function(){
var win = angular.element($window);
scope.windowHeight = win.innerHeight();
scope.windowWidth = win.innerWidth();
scope.sideHeight = scope.windowHeight - 80;
/* ie 7 */
var workArea = angular.element('.workArea');
var workWidthPadding = parseInt(workArea.css('paddingLeft')) + parseInt(workArea.css('paddingRight')) + parseInt(workArea.css('borderRightWidth')) + parseInt(workArea.css('borderLeftWidth'));
var workHeightPadding = parseInt(workArea.css('paddingTop')) + parseInt(workArea.css('paddingBottom')) + parseInt(workArea.css('borderTopWidth')) + parseInt(workArea.css('borderBottomWidth'));
scope.workWidth = scope.windowWidth - 228 - 210 - workWidthPadding;
scope.workHeight = scope.sideHeight - 60 - 25 - 2 - workHeightPadding;
console.log('height', scope.workHeight);
};
scope.initializeWindowSize();
angular.element($window).bind('resize',function(){
scope.initializeWindowSize();
scope.$apply();
});
}
}
});
But that code don't solve all of my problems, just when I can relate the div's width or height with window width or height which it is not all the cases.
Finally, I decide, let's make a jQuery plugin. I came up with this:
$.fn.boxsizing = function(){
// if(navigator.appVersion.indexOf("MSIE 7.") != -1){
var thisWidth = this.width(),
thisHeight = this.height(),
thisborderLeft = parseInt(this.css('borderLeftWidth')),
thisborderTop = parseInt(this.css('borderTopWidth')),
thisborderRight = parseInt(this.css('borderRightWidth')),
thisborderBottom = parseInt(this.css('borderBottomWidth')),
thispaddingLeft = parseInt(this.css('paddingLeft')),
thispaddingTop = parseInt(this.css('paddingTop')),
thispaddingRight = parseInt(this.css('paddingRight')),
thispaddingBottom = parseInt(this.css('paddingBottom')),
newWidth = thisWidth - thisborderLeft - thisborderRight - thispaddingLeft - thispaddingRight,
newHeight = thisHeight - thisborderTop - thisborderBottom - thispaddingTop - thispaddingBottom;
console.log(newWidth, newHeight);
this.css({'width':newWidth, 'height':newHeight});
// }
}
This almost worked.
I can't figured how to apply this code in window resize.
$(window).resize(function(){
$('div.FOO').boxresizing();
});
Can someone help? I don't know if angularjs can handle alone this kind of stuff or, if I really need this plugin and, how can I make things work in the window resize.
Thank you and sorry for my poor english.

get height of a div and set the height of another div using it

I have two divs, neither have a height set in css, as I want to take whatever height they end up as and set the other div to be that height.
The javascript I have is this
function fixHeight() {
var divh = document.getElementById('prCol1').height;
document.getElementById('prCol1').innerHTML = '<ul><li>' + divh + '</li></ul>';
document.getElementById('prCol2').style.height = divh + 'px';
}
I have the following line of code just to see if I am getting some kind of actual response.
document.getElementById('prCol1').innerHTML = '<ul><li>' + divh + '</li></ul>';
I have a onload set to run the function
my two divs look like this
<div id="prCol1">
..content..
</div>
<div id="prCol2" class="slideshow">
..content..
</div>
Use offsetHeight - http://jsfiddle.net/HwATE/
function fixHeight() {
var divh = document.getElementById('prCol1').offsetHeight; /* change this */
document.getElementById('prCol1').innerHTML = '<ul><li>' + divh + '</li></ul>';
document.getElementById('prCol2').style.height = divh + 'px';
}
You can use jQuery to get the height and set it.
var h = $("#prCol1").height();
$("#prCol2").height(h);
you can get height by this code:
document.getElementById('YourElementID').clientHeight;
There are jQuery plugins to do this in a general way. Here's one.
I would recommend using jQuery here. You can't get the height of an element like you are trying in any browser I know of. Here is the code if you use jQuery which is very straightforward. I wouldn't try to do this without jQuery because browsers can be different in respect to how you access height.
function fixHeight() {
var $prCol1 = $('#prCol1');
var divh = $prCol1.height();
$prCol1.html('<ul><li>' + divh + '</li></ul>');
$('#prCol1').height(divh);
}

Binding events to a jquery object not working

I've been trying to bind events to jquery objects (code below) but its really not working at all. Could somebody offer me a suggestion? Thanks!
var img = thumbnail[0].appendChild(document.createElement('img'));
img.className = 'smallboard';
img.src = 'res/smallboard' + i + '.jpg';
img.onload = function() {console.log('small board loaded.');}
img.style.top = (8-i)*height+5 + 'px';
img.style.left = 4 + 'px';
var jqimg = $(img);
jqimg.bind('click', function(){
console.log(i + '');
show_board(i-1, true);
});
Here, thumbnail is a jquery element and i is a small whole number. I had problems with binding it in another way as well. (code below)
highlight = $('<div id="level_highlight"></div>');
highlight.css('height', height + 'px');
highlight.css('width', width + 'px');
highlight.css('display', 'inline');
highlight.css('left', posx + 'px');
highlight.css('top', posy + 'px');
highlight.bind('mouseover', function() {console.log('mousing over highlight');});
Its not working here either. I feel I am making a silly error somewhere. I'm using Chrome.
Thank you!
seems to work for me...
see my jsFiddle example. Am I missing something?
Is it just an error in your retranscription here or did you froget
the var before highlight ?
var highlight = $('');
Did you append it somewhere in the DOM ($('body').append(highlight);) or something, if it already exists, you should do var highlight = $('#level_highlight'); instead
Thanks guys. The answer was that since this code is an over-simplification of the code-base, I'd missed out a part where the z-index for the container element for this section was set to -10. Set that part correct and it worked like a charm.
Thanks.

JavaScript or jQuery image carousel/filmstrim

I am looking for some native JavaScript, or jQuery plugin, that meets the following specification.
Sequentially moves over a set of images (ul/li)
Continuous movement, not paging
Appears infinite, seamlessly restarts at beginning
Ability to pause on hover
Requires no or minimal additional plugins
I realize this sounds simple enough. But I have looked over the web and tried Cycle and jCarousel/Lite with no luck. I feel like one should exist and wanted to pose the question before writing my own.
Any direction is appreciated. Thanks.
you should check out Nivo Slider, I think with the right configuration you can it to do what you want.
You can do that with the jQuery roundabout plugin.
http://fredhq.com/projects/roundabout/
It might require another plugin.
Both answers by MoDFoX and GSto are good. Usually I would use one of these, but these plugins didn't meet the all the requirements. In the end this was pretty basic, so I just wrote my own. I have included the JavaScript below. Essentially it clones an element on the page, presumably a ul and appends it to the parent container. This in effect allows for continuous scrolling, right to left, by moving the element left and then appending it once out of view. Of course you may need to tweak this code depending on your CSS.
// global to store interval reference
var slider_interval = null;
var slider_width = 0;
var overflow = 0;
prepare_slider = function() {
var container = $('.sliderGallery');
if (container.length == 0) {
// no gallery
return false;
}
// add hover event to pause slider
container.hover(function() {clearInterval(slider_interval);}, function() {slider_interval = setInterval("slideleft()", 30);});
// set container styles since we are absolutely positioning elements
var ul = container.children('ul');
container.css('height', ul.outerHeight(true) + 'px');
container.css('overflow', 'hidden')
// set width and overflow of slider
slider_width = ul.width();
overflow = -1 * (slider_width + 10);
// set first slider attributes
ul.attr('id', 'slider1');
ul.css({"position": "absolute", "left": 0, "top": 0});
// clone second slider
var ul_copy = ul.clone();
// set second slider attributes
ul.attr('id', 'slider2');
ul_copy.css("left", slider_width + "px");
container.append(ul_copy);
// start time interval
slider_interval = setInterval("slideleft()", 30);
}
function slideleft() {
var copyspeed = 1;
var slider1 = $('#slider1');
var slider2 = $('#slider2');
slider1_position = parseInt(slider1.css('left'));
slider2_position = parseInt(slider2.css('left'));
// cross fade the sliders
if (slider1_position > overflow) {
slider1.css("left", (slider1_position - copyspeed) + "px");
}
else {
slider1.css("left", (slider2_position + slider_width) + "px");
}
if (slider2_position > overflow) {
slider2.css("left", (slider2_position - copyspeed) + "px");
}
else {
slider2.css("left", (slider1_position + slider_width) + "px");
}
}

Categories