HTML Screen resolution - javascript

I'm having problem with pixels on web page. I have cover image on body and button on it. When page does resize, button is moving too. I want to stay button there where I put it even when screen changes. I'm trying to port website on mobile devices too, that's why I have that problem. P.S I'm new to web programming.
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<title>test page.</title>
<style>
body {
background:url("test.jpg");
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#mybutton {
position: absolute;
right:800px;
top:300px;
}
</style>
</head>
<body>
<button id="mybutton" onClick="javascript:alert('clicked!');">Click Me!</button>
</body>
</html>

Ok so your getting yourself confused here I believe. So position: absolute; says:
position this element relative to the top right hand corner of the
browser window
so if the browser window resizes so your position changes. the approach I believe you should actually take is to constrain the size of your "canvas". I.e. this is how big the background image is so I'm going to keep my "canvas" this size, i.e.
http://jsfiddle.net/bLUhL/1/
if you resize the screen in this fiddle you'll see the button stay in the same position relative to the "canvas" and this is always in the centre.
You can then position the button using margins:
input
{
margin-left:200px;
margin-right:300px;
}

make css property position as fixed of mybutton.
#mybutton {
position: fixed;
right:800px;
top:300px;
}

try tweaking this to your needs:
#mybutton {
position: fixed;
right: 150px;
top: 49%;
display: block;
}
or, in other words, use position:fixed

try this dude..position fixed is the best way. If you use absolute button will be go up when u scroll the page.. and
right:0; top:0;
will be help your button to keep top right..
#mybutton {
position: fixed;
right:0;
top:0;
width:100px;//what u want
height:30px;//what u want
}
if you want some margin from top and right use this
right:100px;//what u want
top:100px;//what u want

I think you should use left instead of right.
The absolute element will be positioned against first parent whose position is relative.
So you can have a button whose position is absolute. And on top it, there will be a div whose position will be relative. Then you can give position to your button, relative/against that div.
Which will be fixed, despite of screen size.
Fiddle

Related

Absolute and Fixed Positioning bug on Firefox?

What should be a super simple one here, but its getting me to scratch my head. I have a div with an H1 and P tag that is overlaid on top of a Three.JS 360° video viewer on this website: http://gloriouslabs.com/#page-5
Right now the code for that div is:
.video_tag {
position: absolute;
z-index: 100;
top: 15%;
left: 5%;
width: 230px;}
Works fantastically on Chrome with the position tag rendering it in reference to the top of the screen. However on Firefox, the div renders itself from the top of the PAGE, not the SCREEN (on Firefox you can see the .video_tag div appear on the top of the screen at http://gloriouslabs.com/)
Any ideas why it's acting like that? The same bug happens on both absolute and fixed position.
Cheers!
I opened your page in firefox's inspect and added this position: relative;:
#holder {
height: 100%;
width: 100%;
position: relative;
}
It is working, but I didnt test back in chrome
Set your container to relative positioning
#holder {
position: relative;
}
If this is not the right container then set it on the one you need

Background-attachment: fixed not working in jquery mobile phonegap

How can I set a background image which is not scrolling along with the content. I'm using jquery mobile and phonegap. I try to use background-attachment: fixed but the image is not going in fullscreen.
<div data-role="page" class="background">
</div>
My css:
.background {
background-image: url(../images/bg.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment:scroll;
background-size: 100% 100%;
}
I had to tackle this problem, the work around (as far as I am aware it hasn't changed in iOS7) is to create a separate div (call it the "background" div), set its position to fixed and insert your desired background image inside this div.
Set the z-index of this div so that it sits underneath the rest of your content.
iOS webview will respect fixed positioned divs but not background-attachment: fixed;
Set the background once, inside the <body> of your html file(s) but outside your subsequent pages.
Here's how I did it and it worked really well.
<div class="background"><img src="img/Background_Dark.png" width="100%"/></div>
and the css
.background {
position: fixed;
top: 0%;
left: 0%;
min-width: 100%;
z-index: -10000;
}
First, you need to cut out half of the CSS. Start with this:
.background {
background-image: url(../images/bg.png);
background-attachment: fixed;
background-repeat: no-repeat;
}
Notice that I changed background-attachment: scroll; to background-attachment: fixed;. The default value of background-attachment is scroll, so you don't need to include it anyway, but that does the opposite of what you are trying to do.
Second, can you upload the bg.png to imgur or some other site so that we can have a better example of what you're trying to do? And also fill in your div with some sample content of similar length to your actual content? Since this is a div and not the body of your website, the div is collapsed unless there is content inside, and the div will grow to fill the content.
This means if you set background-size: 100% 100%; you will be stretching the image as far as the content of the div; which isn't what you want. You only want the background image to fill the viewport. Setting background-attachment: fixed; accomplishes this.
You can use iscroll plugin.
Page in jquery mobile executed by java script source code and in some of the elements changing in css not works.

Need to keep div containing iFrame at the bottom of the browser

I have a div that contains an iFrame and I want to ensure that it always stays stuck to the bottom of the browser window. I need it to remain fixed there when the page scrolls (or at least update its position). I've tried
position: fixed; bottom: 0px; left: 0px
but to no avail. I can do this easily if I want the div at the top of the screen, I just update the div top to the value of document.body.scrollTop. Any help would be greatly appreciated.
Capture the window.onresize event. In that event handler, calculate the x,y position of the div based on the scroll position and of the window. Set the top and left attributes of the div to the x,y coordinates you calculated. You will also want to position the div using the window.onload event to make sure it starts out in the correct position.
Remember to set the doctype, then it should work fine... the following example works in ie7/ie8/firefox/chrome (it will not work for ie6) and probably more browsers:
<!DOCTYPE html>
<html>
<head>
<style>
#stay-at-bottom { position: fixed; bottom: 0; left: 100px; width: 500px; height: 200px; overflow: hidden; background: #f00;}
#stay-at-bottom iframe { width: 500px; height: 200px; position: relative; }
</style>
</head>
<body>
<div id="stay-at-bottom"><iframe src="http://google.com"></iframe></div>
</body>
</html>

Resizing Page Elements based on Window size

Problem:
My Client wants me to create a launch webpage for his product such that there should be no scroll on the page, be any browser or window dimensions.
Doubt: Is this possible using CSS and Javascript?
Some Early Diagnosis: This might be a little similar to this or this but the difference is that I want to resize the dimensions of each and every element in a particular ratio and not just adjust the height of a parent DIV.
So, the statement: I need to change the dimensions of each and every element (images, divs, text ... all) based on a ratio between the (current window size and a reference window size). Perhaps Javascript might have a cure for this?
Question: How to do this?
Just set the height and width of <html> and <body> to 100%, overflow to hidden and use percentages for left, top, width and height of elements:
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Proportional resizing</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
div {
position: absolute;
left: 30%;
top: 20%;
width: 40%;
height: 30%;
background-color: #ddd;
}
</style>
</head>
<body>
<div>divthing</div>
</body>
</html>
These percentages are relative to the containing block, which is, in this case <body>.
Update: To answer another question: scaling of background images is almost not supported yet. When the CSS 3 background-size property gains ground (see this table), things will be easier. For now, have a look at this answer (yes, that means: more markup).

Javascript or CSS static bar which remains constant in terms of position

I've seen so many times that some websites use a kind of button or a kind of bar which always float to a specific position like left edge of screen or at the bottom of the screen and whenever we scroll down a page it remains constant in terms of position..
How to apply this either by CSS or javascript or jquery.
Thanks in advance,
Guru
The simplest way to achieve that effect is position: fixed
<div style="position: fixed; left: 64px; top: 64px">Hey, I'm fixed!</div>
From quirksmode.org:
An element with position: fixed is taken out of the normal flow of the page and positioned at the desired coordinates relative to the browser window. It remains at that position regardless of scrolling.
only downside: Doesn't work with IE6.
.someclass {
position: fixed;
top: 33px;
right: 55px;
}
JQuery:
You may find this useful for that.
CSS:
You just set position to fixed and give it top, left, bottom and right depending on where you want to make it appear, example:
<style>
#some_id
{
position:fixed;
top:100px;
left:100px;
}
</style>
Now you assign that style id to the element you want to make fixed:
<div id="some_id">So, I'm FIXED :)</div>
.
Resources:
More info about CSS fixed property.
Also you can add the z-index property for displaying the content over other contents , it helps to display the div as a separate object displayed irrespective of the page content..
ex:
<div style="position: fixed; z-index:1000; left: 64px; top: 64px">Hey, I'm fixed!</div>
value 1000 is given to override any z-index properties of any other elements

Categories

Resources