I am expriementing phonegap in order to develop some multi platform apps for phones with HTML5 and Java Script.
I want an object I'm having in my web page (its a table or div) to shirink to exact size of displays as each phone may have different display, hence I used java script and html like below to get the size of screen (the available size of course) and set it as the height and width of my div, or whatever object I want.
it works till width but when it goes to height I still have a scroll bar. I have no idea where this comes from but I tried many ways to limit the height by even giving a exact size to a parent div.
<style>
.dummy {
width:100px;
height:100px;
background-color:#900;
}
</style>
<script>
var width = window.screen.availWidth + "px";
var height = window.screen.availHeight + "px";
function load() {
document.getElementById("dummy").style.height = height;
document.getElementById("dummy").style.width = width;
}
</script>
<style>
body {
margin:0px;
}
.cont {
height:100px;}
</style>
</head>
<body onload="load()">
<div class="cont">
<div class="dummy" id="dummy" onclick="load();"></div>
</div>
</body>
</html>
what's wrong with this code? why my red div is bigger than the screen height?
thanks.
Ok, this is not wrong in your code. You should known exactly about window.screen.availWidth: is full height device + status bar(not correct with several document, but it is truth). You screen available exactly is use:
var width = window.innerWidth + "px";
var height = window.innerHeight + "px";
Related
I use this code to check whether user has scrolled to the bottom code or not but it don't work on Google Chrome but it successfully works on Microsoft Edge.
In Google Chrome when i scroll to bottom and again scroll to top then it works but I don't know why.
Here is the code i am using.
<script>
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});
</script>
<!decotype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div style="height: 4000px">Scroll down!</div>
</body>
</html>
Assuming you use a div to load some data... (Because of #load_data)
You need to get 3 values on scroll:
The scrolled position
The div height
The div scrollable height
This last one is an element property of the real element height, including its overflow.
Additionnally, you need to define what's near the bottom... In pixels.
So... In the below example, I'm faking an Ajax request. Just look for the code you need.
$(document).ready(function() {
// Function to replace Ajax in this demo.
function createContent(n){
var fakeContent = "";
for(i=0;i<n;i++){
fakeContent += i+"<br>";
}
$("#load_data").append(fakeContent);
}
// Simulate initial content...
createContent(100);
// The code you need
var near = 20; // pixels buffer yet to be scrolled when the Ajax triggers.
$("#load_data").on("scroll",function(){
if( $(this).scrollTop() + $(this).height() + near > this.scrollHeight ){
console.log("Faking Ajax...");
createContent(50);
}
});
}); // END ready
#load_data{
height: 150px;
width: 300px;
border: 1px solid grey;
overflow-y:scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
There is 100 (0-99) lines on load.<br>
<div id="load_data"></div>
The problem is when you use margin (top or bottom) you should use .outerHeight(true) instead of .height or the sum of height and margin in this case. If you have padding is the same issue.
$(window).scroll(function(){
if($(window).scrollTop()+$(window).height()>$("h3").outerHeight( true ) ){
alert("bottom!")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<h3 style="margin-top:2000px">hello world</h3>
</body>
<html>
About .outerHeight()
Get the current computed outer height (including padding, border, and
optionally margin) for the first element in the set of matched
elements or set the outer height of every matched element
.
I would like to have an image rotate and fill the container after it's been loaded. The issue I'm having is the height is automatically set when loaded and then not resetting after rotation. Here is a JSFiddle of the issue:
$('.load').on("click", function () {
var image = $('.image');
image.attr("src", "https://s-media-cache-ak0.pinimg.com/736x/f5/a0/62/f5a0626a80fe6026c0ac65cdc2d8ede2.jpg");
image.addClass('rotate-image');
});
.image {
max-width: 100%;
max-height: 100%;
}
.rotate-image {
transform: rotate(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-container" style="background:black; height:100px; width: 200px; text-align:center">
<img class="image" src="" />
</div>
<br />
<button class="load">Load</button>
This requires the max-width and max-height styles to be removed, though.
To fit the image, it has to be made larger so that it width (height, when rotated) becomes as big as the container's height. However, it's rotated only visually and the browser doesn't care about that because transform doesn't change the flow of the website. For it, there is an "unrotated" picture whose height is now bigger than its container. Visually rotating the image doesn't change anything. For that purpose, the image needs to be pulled up with a number of pixels equal to how much its bigger than the parent. Those pixels are divided by two because the image overflows at the bottom only.
Play with the fiddle to see what I mean.
$('.load').on("click", function() {
var image = $('.image');
image.attr("src", "https://s-media-cache-ak0.pinimg.com/736x/f5/a0/62/f5a0626a80fe6026c0ac65cdc2d8ede2.jpg");
image.addClass('rotate-image');
var parentHeight = image.parent().height();
image.css("width", parentHeight + "px");
image.css("position", "relative");
image.css("bottom", ((image.height() - parentHeight) / 2) + "px");
});
.rotate-image {
transform: rotate(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-container" style="background:black; height:100px; width: 200px; text-align:center">
<img class="image" src="" />
</div>
<br />
<button class="load">Load</button>
Edit: Beware, if you load the image from an external source by setting its src and immediately rotate it, image.height() might return 0 and the image might be displaced. Then, if you click again, its height is now correct and it gets placed right.
I'm not absolutely sure, but I think that's because when you load the image, the browser needs to download it first, meaning that you don't yet know what its dimensions are.
To see that in action, paste some image URLs from Google in the fiddle I provided.
You need to do this by javascript or jquery. Your goal is:
.Rotated_Img ...
width = 100 % of parent height
height = 100 % of parent width
And i do not think css has any think for this, until the parent width and height have related to view port vw and vh.
jquery:
$('.Rotated_Img').each(function(){
$(this).css('width', $(this).parent().height() + 'px');
$(this).css('height', $(this).parent().width() + 'px');
});
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.
I have two DIVs with absolute position on two sides of a HTML page such as (EXAMPLE)
<div class="left">
</div>
<div class="right">
</div>
with CSS
.left{
position:absolute;
left:10px;
top:10px;
width:100px;
height:100px;
background:red;
}
.right{
position:absolute;
right:10px;
top:10px;
width:100px;
height:100px;
background:blue;
}
Is there a way to add text to the left DIV and flow excess text to the right one? I am not stuck to this two DIV, and I'm just looking for a solution to flow excess text to another position.
NOTE: I hope to find a pure CSS solution, though, it seems to be improbable; then, I am looking for a pure javascript solution (not using JS libraries).
CSS Regions (still a 'draft', but) is aiming to fix this problem:
The CSS regions module allows content to flow across multiple areas
called regions. The regions are not necessarily contiguous in the
document order. The CSS regions module provides an advanced content
flow mechanism, which can be combined with positioning schemes as
defined by other CSS modules such as the Multi-Column Module [CSS3COL]
or the Grid Layout Module [CSS3-GRID-LAYOUT] to position the regions
where content flows.
More info and tutorials at https://www.adobe.com/devnet/archive/html5/articles/css3-regions.html
Here is one for fixed-width approach. The gap between two columns will equal to width of main div.
Fiddle
<div class="container">
<div class="sides">The big text here.<div>
<div class="main"></div>
</div>
For variable width you need JS or jQuery.
Update:
I have used jQuery for this purpose as I have found pure JS difficult to find solution of this.
function setGap() {
var width = $(".main").width();
$(".sides").css({
"-moz-column-gap": width + "px",
"-webkit-column-gap": width + "px",
"column-gap": width + "px"
});
}
$(window).resize(setGap);
setGap();
Fiddle
Update 1:
function setGap() {
var width = document.getElementsByClassName("main")[0].offsetWidth;
var elem = document.getElementsByClassName("sides")[0];
var style = elem.getAttribute("style");
if (typeof style != "null") {
style =
"-moz-column-gap:" + width + "px; -webkit-column-gap:" + width + "px; column-gap:" + width + "px";
elem.setAttribute("style", style);
}
else {
style +=
"-moz-column-gap:" + width + "px; -webkit-column-gap:" + width + "px; column-gap:" + width + "px";
elem.setAttribute("style", style);
}
}
window.onresize = setGap;
setGap();
Fiddle
so far (2012) It's not possible using CSS, CSS3 (with 2 separate elements)
but using JS You can clone the content and use scrollTop on the right element :
LIVE DEMO
var d = document,
$left = d.getElementById('left'),
$right = d.getElementById('right'),
leftH = $left.offsetHeight;
$right.innerHTML = $left.innerHTML +'<p style="height:'+ leftH +'px;" />';
$right.scrollTop = leftH;
As you can see I'm appending also an empty paragraph, to fix the right element need to scrollTop some amount of px
Note: add overflow:hidden; to your ID elements #left and #right