Can u show me completed html code where it is some rectangle in it with "height=75% of my screen" and "widtht=4/3 of height". So, it should be 3:4 reсtangle where height depends of my screenheight, but width do not depends of my screenwidth. Only of screenheight.
i thought i understood previus time, but it was not so.
I have this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".example7").colorbox({width:"80%", height:"80%", iframe:true});
});
</script>
And i dont know what to do with the width.
You'll need JavaScript for computing the width, it's not possible to do this only with HTML.
The relevant property is window.innerHeight; multiply that by (3/4) to get height, and since (3/4)*(4/3) == 1, window.innerHeight is (incidentally) equal to your desired width.
Then set the element's .height and .width properties.
Note: I'm assuming that you wish to have a rectangle proportional to the browser window, not the user's screen. If you actually want the screen size, use window.screen.height instead of window.innerHeight; beware though: with widescreens and multi-monitor configurations on the rise, the browser may report quite outlandish dimensions.
HTML doesn't dictate this. CSS can, but CSS doesn't have any direct internal math logic. So, what you need to do is use javascript.
When the page loads, grab the width of the object, do your math, and then set the height.
If you're new to JS, I'd suggest learning one of the libraries, such as jQuery. In jQuery, it'd look something like this:
$('#myDiv').width($(this).height()*.75);
Related
i am designing a site that adjusts itself to the window size, and i need to make the text size relative to it's container (a div). I searched about doing it with css, and found out that it is not possible. So i am trying with JavaScript, but i am not a JavaScript programmer. So i searched each piece of the code i needed and compiled it to this:
<script type="text/javascript">
$(document).ready(function() {
while(true) {
document.getElementById("text").style.fontSize = $("container").height();
}
});
</script>
(the "while" is to re-size it constantly, considering that the user might re-size the window)
I put the script in the "head" tag, and it doesn't work. I don't know if the script is wrong, or if it is not running. What am i doing wrong?
Also i want to put a delay in the end of the script, to avoid it running like crazy, but i don't know how to do that.
Thanks in advance,
Luca
Thanks to the answers, but nothing working.
I guess that the script is not running, what can be wrong??? Please help!
http://jsfiddle.net/AyRMC/
You can use viewport units:
.vw{
font-size:3vw;
color:red;
}
.vh{
font-size:3vh;
color:green;
}
.vmin{
font-size:3vmin;
color:blue;
}
Doesn't have full support quite yet, but IE10, Chrome, Firefox, and Safari all support it.
One downside (or possible upside) is that, at least in chrome, the text doesn't scale as the viewport is resized.
Compatibility: http://caniuse.com/viewport-units
You should try something like this instead (if I understand correctly what you want to do):
$(".container").each(function(){ //if container is a class
$('.text', $(this)).css({'font-size': $(this).height()+"px"}); //you should only have 1 #text in your document, instead, use class
});
or something more like this
$(window).resize(function(){
$('.text').css({'font-size': $('#container').height()+"px"});
});
If you mean that you are making a responsive site, then you can change the font-size based on document.documentElement.clientWidth inside of the window resize handler.
Also, you can use em units instead of pixels which are scalable and mobile-friendly.
CSS3 also has a new interesting "root em" unit :
CSS3 introduces a few new units, including the rem unit, which stands
for "root em". If this hasn't put you to sleep yet, then let's look at
how rem works.
The em unit is relative to the font-size of the parent, which causes
the compounding issue. The rem unit is relative to the root—or the
html—element. That means that we can define a single font size on the
html element and define all rem units to be a percentage of that.
http://snook.ca/archives/html_and_css/font-size-with-rem
Try this:
<script type="text/javascript">
$(document).ready(function() {
$(window).resize(function() {
document.getElementById("text").style.fontSize = $(".container").height();
// let container is a class
});
});
</script>
You can use the .resize() event handler which will only fire when the window is resized
var constant = [Some magic number]
$(window).resize(function() {
var fontSize = $(this).height()*$(this).width()*constant;
$(html).css("font-size",fontSize)
}
Using a constant to calculate the font size based on the new width/height
I am working on a prototype of a project in which I need to adjust the look and feel of site content according to the browser window size.
Now for the prototype I am using a sample image and I want to adjust the height and width of the image as per window's height and width.
Here's the code that I am using:
$(window).resize(function() {
document.write("<img src='sample_image.jpg' border='0' height='"+window.innerHeight+"' width='"+window.innerWidth+"'>");
});
The above code doesn't work properly. I want to dynamically change the image height and width as user resizes the window. I also tried implementing this solution. But that didn't work either. Any ideas how can I solve this?
Well, since this is needed for testing purposes only, and it seems that you use jQuery, try this code:
<img src="sample_image.jpg" border='0' height="1" width="1" style="display: block;">
<script>
var resize = function() {
$("img").width($(window).width()).height($(window).height());
};
$(window).resize(function() {
resize();
});
resize();
</script>
DEMO: http://jsfiddle.net/GvRJ7/
Otherwise, myself and other guys here strongly recommend you using good HTML/CSS markup to make your design fit any resolution.
Instead of window.innerHeight and window.innerWidth you can try using percentage.That Will Resize your image accordingly to windows height andwidth.
document.write("<img src='sample_image.jpg' border='0' height='"70%"' width='"70%"'>");
Think of how often window.resize() fires (if you have any doubt, console.log() it). Only inexpensive operations should be performed inside it, like incrementing a counter, or calculating a position.
In your particular case, I think a 100% width/height image will work using just CSS (or CSS generated with JavaScript if needed). Of course, this will look bad as the image gets beyond its real size, and waste bandwidth when it is below its real size, but it will have the equivalent effect to your code at a fraction of the expense.
As a side note, document.write() should rarely be used. Use DOM manipulation functions instead.
I know almost nothing about JS so I just thought I would ask. I saw this in another thread:
<script type="text/javascript">
function contentSize()
{
document.getElementById('content').style.height=(window.availHeight-40)+"px";
}
onload=contentSize;
onresize=contentSize;
<script>
Looks straight forward but doesn't work...
If you do use jQuery, then http://api.jquery.com/height/
IE supplies this info differently than Chrome/FF/Safari so probably better if you do use the lib to help cover all the bases. You can use the height() function both to get the size of the window and set the height of your target content.
$('#mydiv').height( $(window).height() - 100 );
I think I'm going mad!
I'm starting to write a little exercise for myself where I am going to have some divs that I can drag on the rightborder to increase or decrease the Div width. I also have a container Div that has a set width and I'm going to use this to determine a percentage - basically I'm going to be making some kind of bar-chart / histogram that you can edit.
I'm started writing my code and I thought I'd just make sure I could output the percentage.
Here's the perliminary code....
<style>
#container{width:500px;}
#dragDiv{border:1px solid #000;background-color:pink;width:100px;height:100px;}
</style>
</head>
<body>
<div id="container">
<div id="dragDiv"></div>
</div>
<script>
function dragOneSide(innDiv, outDiv){
if(document.getElementById(innDiv) && document.getElementById(outDiv)){
var iDiv = document.getElementById(innDiv),
oDiv = document.getElementById(outDiv);
// write out the width as a percentage
var iDivWidth = parseInt(iDiv.style.width),
oDivWidth = parseInt(oDiv.style.width);
//alert(document.getElementById("dragDiv").style.width);
iDiv.innerHTML = ((iDivWidth / oDivWidth) * 100);
}
}
window.onload = function(){
dragOneSide("dragDiv", "container");
}
</script>
Now the value in the iDiv was NaN? I found that rather odd. When trying to alert width I was getting a blank, literally an empty string! Rather odd I thought, especially as I wasn't trying to do anything complicated. I used firebug, set a breakpoint and observed the watch window. There was no value for the Div's width. I then put an inline style on the DIV like so...
<div id="container">
<div id="dragDiv" style="width:300px;">Hello World</div>
</div>
and low and behold I was now getting a value for the item! Now I don't like inline styles (who does) however I've never had this problem before and I've been using JavaScript and HTML for years - has anyone got an explaination for this? To retrieve the width not set by CSS do I have to use a different property like clientWidth?
Ps. I haven't included any of the dragging code yet so please don't point that out.
The call to style.width retrieves the style value, which isn't set.
http://jsfiddle.net/EC2HR/
See this example. Yes, you want to use clientWidth in this case.
The simplest way is to use offsetWidth property:
var iDivWidth = parseInt(iDiv.style.offsetWidth),
oDivWidth = parseInt(oDiv.style.offsetWidth);
style.width is a DOM api which returns the width of an element when it's set inline or via the element.style.width = n + "px";
So that it reacts the way you describe it is as designed.
The offsetWidth like ioseb refers to is a DOM api call which returns the amount of horizontal space an element takes up.
Beware of the many inconsistencies between browsers .
PM5544...
Here's what i have so far:
function loadOff(){
$(document).ready(function(){
$("#eLoader").ajaxStop(function(){
$(this).hide();
$("#eventsContent").show();
var h = document.body.scrollHeight;
$("#bodyBackground").css("height",h+100+"px");
$("#sidePanel1").css("height",h-105+100+"px");
$("#bottom").css("top",h+100+"px");
});
});
}
This is a callback function for a JQuery ajax function, basically what is does is when all ajax is finished .ajaxStop() it hides the loader then shows the content.
The problem i am having is adjusting bodyBackground, sidePanel, and bottom to fit the content. I dont care to have it elastic and retract for short content at this point, i would just like it to extend to proper positioning based on content length.
All divs are absolutely positioned. The numbers in the function are broken down simply to make it easy to explain. -105 is the offsetTop of that element and +100 is the margin between the end of the content and the elements.
if there is a better, more efficient way to achieve this outcome, please, do tell.
Thanks.
Based on your code, the only thing you ought to see is the top 105px of #sidePanel1. Is that your intent? (h = the bottom of the window, according to your code.)
Sticking with the JQuery patterns, you would use
var h = $(window).height();
Maybe you're looking for this instead of the browser window's height? It will get the height of the content element.
$("#eventsContent").outerHeight();