My page is divided into left and right divs, the right div has a border left partitioning the two. if the height of the right box is bigger then left, it works fine. However if the left box height is more, then the border is only halfway.
How can i resize the height of the right box based on the height of entire screen so that the border runs all the way to the end.
You can provide height to your right div like, place a id ( like rightDiv ) there if not (in jQuery).
$('#rightDiv').height($(window).height());
if you want to height of your entire document use:
$('#rightDiv').height($(document).height());
$(window).height() will retrun available browser window height.
$(document).height() will retrun document height.
or you can make a comparison:
var doc = $(document);
var win = $(window);
var maxHeight = doc.height() > win.height() ? doc.height() : win.height() ;
$('#rightDiv').height(maxHeight);
You have min-height, for animate height you can try:
$('#rightDiv').animate( { height : maxHeight}, <duration>);
<duration> is optional, you can provide here 'slow', 'fast', miliseconds
Another solution would be this pure CSS one: http://jsfiddle.net/zgMv5/
You put around the left and the right div another <div> and use it as CSS table row. Then the 2 containing <div> will be the same height.
<div id="outer">
<div id="left">This is some text.</div>
<div id="right">This is some text.</div>
</div>
The corresponding CSS would look like this:
div#outer {
display:table-row; }
div#outer > div {
display:table-cell; }
div#left {
border-right:1px solid red; }
I am not sure about the compatibility with old browsers...
Related
I have main div(parent) with class .box and in which more than one (no limit)child div with class .abc,
so how can we only select those child div which are occur after 400px height of parent div.
Means,no all child div are select but only select those are after 400px height of parent div.
though,parent div height is not fix.
<div class="box">
<div class="abc"></div>
<div class="abc"></div>
<div class="abc"></div>
.......Unlimited div occure
</div>
One suggestion is to add a class name to them by taking their .position().top:
$('.box').find('.abc').addClass(function(){
return $(this).position().top >== 400 ? "pick" : "";
});
var picks = $('.box').find('.abc.pick'); // gives you all the divs whose
// position top is >= 400px
You can use position() to detect top position of an element depending on its parent.
$(".box .abc").each(function(){
var topPos = $(this).position().top;
if(topPos>400){
$(this).addClass("masked")
}
});
Please see this Fiddle
I have the following structure:
<div id="start">
<div id="largediv">
<div id="ball"></div>
</div>
</div>
The div start has for example fixed height and width like 500px x 500px
and the div largediv has 1000px x 1000px. I can move the ball in the 500x500px area but I don't know how to scroll so I can change the position in the largediv. Another thing is that the start div has overflow hidden.
Here is the jsfiddle
http://jsfiddle.net/zander_pope/xd4fb1nz/
You can use jQuery mousewheel function.
$("#start").on("mousewheel", function(e){
var scrollTop = $(this).scrollTop(),
scrollLeft = $(this).scrollLeft();
$(this).scrollTop(scrollTop+(e.originalEvent.deltaY));
$(this).scrollLeft(scrollLeft+(e.originalEvent.deltaX));
return false;
})
Jsfiddle
I'm trying to calculate width and height of elements, to set precise position in CSS with jQuery, but for some reason calculation for some IDs doesn't work (alert shows 0 or nothing) while working for other IDs and classes. Here's the jQuery code:
$(document).ready(function () {
$("#img1").each(function () {
var maxtop = $('.pattern').outerHeight() - $('#mimg1').outerHeight() - 20,
maxleft = $('.pattern').outerWidth() - $('#mimg1').outerWidth() - 20,
randomtop = getRandomInt(20, maxtop),
randomleft = getRandomInt(20, maxleft),
randomzindex = getRandomInt(1, 30);
$(this).css({
"top": randomtop,
"left": randomleft,
"z-index": randomzindex
});
});
$("#img13").each(function () {
var maxtop = $('.pattern').outerHeight() - $('#mimg13').outerHeight() - 20,
maxleft = $('.pattern').outerWidth() - $('#mimg13').outerWidth() - 20,
randomtop = getRandomInt(20, maxtop),
randomleft = getRandomInt(20, maxleft),
randomzindex = getRandomInt(1, 30);
alert ($('#mimg13').outerHeight());
$(this).css({
"top": randomtop,
"left": randomleft,
"z-index": randomzindex
});
});
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
});
CSS:
html {width:100vw; height:100vh;}
body {margin:0; width:100vw; height:100vh; overflow:hidden;}
.pattern {width:100%; height:100%; margin:0; padding:0;}
.drag {overflow: visible; padding-bottom: 0px; cursor: move; position: absolute;}
.mood-img {position:absolute; display:none; margin:0; padding:0;}
HTML:
<body class="pattern-2">
<div class="pattern"></div>
<div id="img1" class="drag mood-img">
<img class="shadow moodimg1" src="mood/brick-mood-1.png">
<span class="mood-name shadow">
<nobr>A. Brickwork I</nobr>
</span>
</div>
<div id="img13" class="drag mood-img">
<img id="moodimg13" class="shadow moodimg" src="mood/brick-graphic-4.png">
<span class="mood-name shadow">
<nobr>6. Untitled</nobr><br>
<small>digital</small>
</span>
</div>
</body>
I have tried lot of different options but none of them worked and the problem is always (as it seems) is that JS doesn't calculate elements' sizes, so positions are also calculated wrong.
And also may be there's some more simple way to make all these calculation, cause I have 13 elements with different IDs (from img1 to img13 and from mimg1 to mimg13. May be I could use JS to get IDs by itself, with no need for me to write all IDs into JS?
IDEA
I have a page with a few div elements, one of them is visible, others are set to display:none. When particular span element is clicked, JS sets certain hidden div visible, changing its CSS to display:block. The div I have this problem with at first was an invisible container for several other divs with images and text elements and I wanted to position these contained elements against the container div (which had width and height set to 0 and margin top and left set to 50%) with margin-top and margin-left. Then I set the container to have 100% width and height and tried to position container's content with top and left. Then I removed the container and set its former inner elements to have position:absolute and tried to still position it with top and left properties calculated and set with jQuery. Actually those elements are images with some pop-up text, which should be randomly placed all over the page (overflow:hidden), and have z-index set randomly as well. I've spent three days trying to find the solution, but got no result — either it's not working at all (elements are placed all on top of one another in the same position (top left corner) either calculations are done wrong and some (or all) divs are positioned out of the page which creates scroll or hiding images when overflow is hidden. Hope I'm explaining it fine, so anyone could be able to understand what have I wanted to do.
You're calculating dimensions on page load - $(document).ready(... but unfortunately it doesn't mean the images are ready at this point. It's a common issue.
Since you already have your images wrapped with .each function, simply replace it with the load event handler
$("#img1").on('load', function () {
...
});
http://jsbin.com/iLIWOfa/2/edit
If the CSS of a parent element of a image is display: none, the image is not loaded and there is no width or height.
Just set opacity: 0 instead.
I want to implement a technique called scrollable div in GWT. What I am trying to do is the following.
If a user is on my page he can only see the viewport (green box in the image). All DOM elements that are in this viewport are visible to the user on page load. Alle DOM elements that are not on the viewport have not been loaded after a page has been loaded on page load (blue boxes in the image).
If the user drag and move the viewport, all dom elements become visible which come onto the viewport. If they are on the viewport they will be loaded via ajax.
The user can zoom in and out the viewport to make it bigger and smaller. Also, if elements that are invisible to the user and thus not loaded yet become visible, than they have to be loaded via ajax and displayed on the viewport.
How do I have to implement this with GWT?
If the user loads the page it looks like the following image:
The user can drag and move the viewport to 8 directions. These are top, top right, right, right bottom, bottom, bottom left, left and top left. The following image shows a movement to the left.
When the viewport moves new content should be loaded with ajax.
The viewport can also be zoomed in. In this case also new content should be loaded.
The viewport can also be zoomed out. Note that the viewport must be of fixed dimensions. Only the content should be zoomable.
UPD:
jsfiddle EXAMPLE: http://jsfiddle.net/hv57s/9/
UPD:
jsfiddle with zoom in/out buttons an functionality: http://jsfiddle.net/hv57s/11/
Answer based on this example: Indira.js Inifinite Scroll
<div id="scrollableDiv" data-scroll-callback="$('#load_button').trigger('click')">
<table>
...
<tbody id="scrollable_tbody">
<tr>
...
</tr>
</tbody>
<button id="load_button" onclick="load_more(page_number)">Show more</button>
</div>
<script>
var scroll_el_id = 'scrollableDiv';
var element = $('#scrollableDiv');
$(window).unbind('scroll.' + scroll_el_id).bind('scroll.' + scroll_el_id, function(event){
var scrollBottom = $(window).scrollTop() + $(window).height();
var elementBottom = element[0].scrollHeight + element.offset().top;
if(scrollBottom >= elementBottom){
eval($(element).attr('data-scroll-callback'));
$(window).unbind('scroll.' + scroll_el_id);
}
});
</script>
Next you just append to #scrollable_tbody AJAX-response, like:
function load_more(page){
$.ajax({type: "GET", url: 'some/url/load_more.php?page='+page,})
.done(function( html ) {
$('#scrollable_tbody').append(html);
});
}
UPD:
I think you should set big size for html,body like:
html, body{
min-width: 8192px;
width: 8192px;
min-height: 8192px;
height: 8192px;
}
And set viewport in size you want.
But maybe it will more easier if you will set some wrap div right after body tag with
div.wrap{
overflow: scroll;
-webkit-overflow-scrolling: touch;
/*Do not forget to change your_viewport_* to actual size, also you can do this via jQuery on the fly*/
max-height: your_viewport_height;
min-height:your_viewport_height;
height:your_viewport_height;
max-width: your_viewport_width;
min-height:your_viewport_width;
height:your_viewport_width;
}
and inside of this element Bigger div which will be scrollable.
div.huge{
min-width: 8192px;
width: 8192px;
min-height: 8192px;
height: 8192px;
}
HTML:
<html>
<head>
...
</head>
<body>
<div class="wrap">
<div class="huge">
...
</div>
</div>
</body>
</html>
Also do not forget to set scrolling control for all sides of elements, in example I have only Bottom line control, something like:
var scrollBottom = $(window).scrollTop() + $(window).height();
var elementBottom = element[0].scrollHeight + element.offset().top;
var scrollTop = $(window).scrollTop();
var elementTop = element.offset().top;
var scrollRight = $(window).scrollLeft() + $(window).width();
var elementRight = element[0].scrollWidth - element.offset().left;
var scrollLeft = $(window).scrollLeft();
var elementLeft = element.offset().left;
if(scrollBottom >= elementBottom && scrollTop <= elementTop && scrollRight >= elementRight && scrollLeft <= elementLeft){
eval($(element).attr('data-scroll-callback'));
$(window).unbind('scroll.' + scroll_el_id);
}
I didn't test this, and anyways you will have to play around with this. Hope I'm point you into right direction.
Is possible to animate() the width of an element making a smooth center animation?
I mean animate making the element fixed on itself centered on himself x coordinates?
if i do :
<a class="animate">hey</a>
$('.animate').animate({'width':'+=1%'},500);
it works but the element is animated on the right and not from the center of himself
Yes, you'll have to move the element also.
<a class="animate" style="display:block; width:300px; border:1px solid #000; position:fixed; top:50px; left:50px;">hey</a>
jQuery(".animate").animate({'width':'0px', 'left':'200px'});
http://jsfiddle.net/7Ysbg/
New Information
So you mean something like this: http://jsfiddle.net/7Ysbg/2/
jQuery(".animate").click( function(){
var w = jQuery(".animate").width();
var new_w = jQuery(".animate").width()*1.5;
var left = jQuery(".animate").offset().left - ((new_w - w)/2);
jQuery(".animate").animate({'width':new_w+'px', 'left':left+'px'}, 'fast');
});
Just animate not only the width but also the position of the element. For example you can animate the left property. In this case you element should have position set to relative or absolute.
var width = $('.animate').width();
$('.animate').animate({
width: width*1.01,
left: width*0.005
},500);