I am trying to align an HTML element on the right even when the window is resized. I have tried using CSS
#goRight
{
align:right;
}
along with float:right: , text-align:right but the problem is that when I decrease the size of the window horizontally the element is cut out and eventually disappears, which is not what I want. Is there a way to keep the element aligned to the right of the active viewing screen?
<div id="address" class="tab">
Filter by:
<hr />
<div class="label">Choices:</div>
<div id="goRight">
<select name="myselect" id="myselect" size="0">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
</div>
<div class="listSeparator"></div>
</div>
float:right is simply aligns a html element to right, even window size is changed, element will still right aligned.
In your case i think another element / style breaks your right align style. Because just float:right is works. Simple fiddle at: jsfiddle.net/T5F83
You'll probably want to position the element absolutely and set it's right property like so:
#goRight
{
position: absolute;
right: 0;
}
Related
I have some problems when rendering on only app(iOS) NOT website:
I have to use pure Javascript without any other libraries.
<div class="header" style="position:fixed; z-index: 99;"></div>
<div class="content" style="position:relative">
<div class="cover" style="position:absolute; z-index:999;"></div>
//some text content
</div>
The Cover div didn't display overlapping Header. What can I do to that?
I want that initially user will see Cover first, then scroll up then see fixed Header and eventually Content.
I dont want to change the HTML, because when I put header in content div, header usually jumps and take moment to back the correct position when scrolling content div.
Thanks for any help!
Give #content a z-index property, too. Say, 100.
The problem looks like z-index context. z-index is not a global value - it is relative to it's parent. You have #header with z-index:99, and it's sibling #content with z-index:auto(say 1 for argument's sake). #header always overlaps #content, and its children.
You are using absolute property to cover class, relative to content className that means, it position will change according to content class. Remove relative property to content class, add wrapeer to all header and content className.
<div style="position:relative">
<div class="header" style="position:fixed; z-index: 99;"></div>
<div class="content" >
<div class="cover" style="position:absolute; z-index:999;"></div>
//some text content
</div>
</div>
There is a code like that(simplified):
<style>
.contentblock{
background-color:green;
}
.thereisaproblem{
background-image:url(image.png);
background-attachment:fixed;
}
.fix{
position:fixed; /* text is centred too if thats important*/
}
</style>
<body>
<div class="thereisaproblem" id="id1">
<div class="fix"> Fixed text </div>
</div>
<div class="contentblock">
Website content 1
</div>
<div class="thereisaproblem" id="id3">
<div class="fix"> Another fixed text </div>
</div>
<div class="contentblock">
Website content 2
</div>
</body>
I need "Fixed text" to be visible only in a div with id 1, and "Another fixed text" to be visible only in a div with id 3".
When I tried to do it simply by position:fixed; text overlapped in both divs. Using z-index can only prevent 3 from being visible in 1 and vice versa. Always one of texts can be visible in the wrong div. Is there any solution to make fixed like effect but with text visible only in one div? It would be best to use just html/css, but if jscript/jquery is needed then it's ok.
there is link to jsfiddle
Basicly, if you check the jsfiddle, I want other text to be visible in the place of the first one when you scroll down to another div. You can ignore the problem of fixed text being on top of solid blue divs.
Now I understand.
CSS SOLUTION
.thereisaproblem{
position:relative;
}
.fixed{
position:absolute; // FIXED IS RELATIVE to window
// ABSOLUTE is relative to first positioned parent
}
JAVASCRIPT SOLUTION
I'll post with jQuery but it's not necesssary, it can be done just as fine with simple good old javascript.
All the code does is if the user has scrolled 100px from the top then it hides whatever div has the class top (in your case is what you had with #1), and shows the div with class bottom. Otherwise, it does the opposite. You'd have to see what's the best distance for you to use to satisfy your purpose.
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 100) {
$('.top').hide();
$('.bottom').show();
}
else {
$('.bottom').hide();
$('.top').show();
}
});
In regards to CSS:
.contentblock{
position:relative;
z-index:2;
}
.fixed{
position:fixed;
z-index:0:
}
.bottom{
display:none;
}
Notice how initially the div (third div) is in display none so that only the first div is visible.
<div class="thereisaproblem top" >
<div class="fixed">
Fixed text visible in first div
</div>
</div>
<div class="contentblock">
Website content
</div>
<div class="thereisaproblem bottom">
<div class="fixed">
Fixed text visivle in third div
</div>
</div>
<div class="contentblock">Webs content 2</div>
Without defining actual positions for your fixed text to go, it will always default to top: 0; left: 0; of the next parent to have a position: relative;. Defining position will fix your overlapping issue, however, the functionality you are asking for to have text be input in certain divs depending on ID will require javascript/jquery, or even PHP.
I have content in a div that I am trying to scale according to a user's preferences. I am using Louis Remi's transform.js to do this.
However, when I do, it either:
Pushes the content way above top of the div (cutting off content on scale in)
Pushes the content way too far down the container (leaving a lot of white space on scale out)
I've tried to call this snippet on DOM ready
$("#zoomMe").css({ 'transform' : 'scale(.50)', 'top' : '-2280px' });
but this only works at specific heights. I was wondering if there was anyway that I can push content to the top of the div even if my container changes heights.
Here is a jsfiddle example. Right now it is at a .50 scale which shows content being in the middle of the screen leaving a lot of space on top of and bottom of div.
Here is a detailed picture of what I am trying to achieve.
HTML
<div id="reportContainer">
<div id="zoomMe">
<div id="content1" class="fillerBox"> </div>
<div id="content2" class="fillerBox"> </div>
<div id="content3" class="fillerBox"> </div>
<div id="content4" class="fillerBox"> </div>
<div id="content5" class="fillerBox"> </div>
</div>
</div>
CSS
#reportContainer { margin: 0;padding:15px;overflow-y:scroll;overflow-x:hidden; border:2px solid black;}
.fillerBox { background-color:#ccc;border:1px dashed #000;height:1500px;width:910px;margin:0 auto;margin-bottom:30px; }
JS
$(document).ready(function() {
$("#reportContainer").height($(window).height()-50);
$("#zoomMe").css('transform', 'scale(.50)' );
});
I believe what you are looking for is transform-origin
http://css-tricks.com/almanac/properties/t/transform-origin/
This will enable you to set the point on your element that will stay put as transforms occur. By setting the transform-origin to the top center: you can scale the element and keep its position relative to the top in the same place.
This worked for me! I don't know much about this transform.js plugin, but the property you want to look at is "transform-origin". Your issue is that it's scaling #zoomMe from the center, making your post-transform content 25% offset from the top and bottom.
CSS
#zoomMe {
transform-origin:center top;
-webkit-transform-origin:center top;
}
I am just wondering how to display an image above the <p/> using absolute positioning. Note: the image has no define height, it could be longer or shorter. The goal is to display the image above the using absolute positioning.
<div id="wrap">
<p>Hello</p>
</div>
<script>
//Display an image above the <p/> using absolute positioning.
//Note: the image has no define height, it could be longer or shorter. The goal is to
display the image above the <p/> using absolute positioning.
</script>
If you want an <img> above the <p>, is there a reason why you can't do the following?
<div id="wrap">
<img src="path/to/img">
<p>Hello</p>
</div>
I would highly recommend this approach as the height or width of the image will not break anything and the <p> will move according to it's size.
But let's assume the <img> is elsewhere, like below it:
<div id="wrap">
<p>Hello</p>
<img src="path/to/img">
</div>
You can add the following CSS:
img {
position: relative:
top: -25px;
}
This is not a very good thing to do, though - as it literally just moves the image up 25 pixels. What if the size of the paragraph <p> changes? What if you add more content above the paragraph <p>?
You can also try:
img {
position: fixed;
top: 0;
}
This will put the image at the top of the viewport at all time. Again, using either of the these position methods present a lot of problems (unless it's what you want) and I recommend my first suggestion using pure HTML, and avoiding CSS position fixes.
I see no smart way to do this... why not $("#wrap").before("image"); without absolute position?
If you mean in terms of hiding, there you go:
Markup
<div class="wrapper">
<p>I will be hidden soon.</p>
</div>
CSS
.wrapper img{
position:absolute;
top: 0;
}
JS
$('.wrapper').append($('<img>', { src : 'http://placehold.it/350x150'}));
See fiddle
I am trying to move everything contained within the div id "tile", to the center of the web browser. By default the CSS is undefined and it appears on the left side of the browser. What I would like to do is move the entire div to the center using javascript when the button "move" is clicked.
The html is shown directly below, and the attempted (but not working) javascript is shown below that.
html
<div id="tile">
<div class="menu">
<ul>
<li> Vis </li>
</ul>
</div>
<div id="tabcontent4">Some generic content</div>
<button onclick="move();" type="button">Move</button>
</div>
</div>
javascript
document.getElementsById("tile").style.align='center';
EDIT: How would I move the div to a specific location?
There is no "align" property in CSS. The closest is text-align, but you probably want to use the CSS declaration margin: 0 auto, which will move the whole <div> to the center of the page. So you want:
document.getElementById("tile").style.margin="0 auto";
Make sure that tile has a specified width.
You can do this with just CSS:
<div id="tile" style='margin:0 auto;width:300px'>
...
</div>
Or, put it in a container, and center its content:
<div id='container' style='text-align:center'>
<div id='tile' style='width:300px'>
...
</div>
</div>
Of course, non-inline styles are preferred.
Nice username, BTW.
// EDIT
To place the div in a specific location with javascript:
document.getElementById('tile').style.position = "absolute";
document.getElementById('tile').style.left = "100px";
document.getElementById('tile').style.top = "100px";
It must have a position defined, usually absolute or relative.
Once again, this can - and usually should - be done with CSS:
#tile { position:absolute; left:100px; top:100px }