I pretty much got it down packed now. Just a quick thing I want to know how to fix.
I have this post comment button (it scrolls perfectly) however, it scrolls too soon even when you're not even past it's point. Live example:
http://www.krissales.com/#/media/38.Testing-Another-One-Yo
the CSS I have is this:
<div style="float:right;position:fixed;right:14%;padding-top:35px;" style="top: 0px;">
<span class="-paper">Post Comment</span>
</div>
would you guys know how I could go about fixing this? If you still don't understand, basically when I'm at the top of the page, and i scroll just a little, the "post comment" bar moves, I don't want it to move until i get past the area, then it should scroll.
thanks!
First of all, give the button a class and remove inline styles as that is bad practice. Second, create a second class that you'll attach for when you want it fixed. So that you can better understand what I mean, test the following code:
html:
<div class="box"></div>
<div class="box">
<div class="testBox">test</div>
</div>
<div class="box"></div>
css:
.box { height:500px; }
.testBox { background-color:#000000; color:#FFFFFF; width:100px; height:30px; }
.textBoxFixed { position:fixed; top:0; }
javascript:
$(function() {
$(document).scroll(function() {
var scrollFromTop = $(document).scrollTop();
if (scrollFromTop >= 500) {
$('.testBox').addClass('textBoxFixed');
} else {
$('.testBox').removeClass('textBoxFixed');
}
});
});
Read this link, what ou need is a mix between js and css fixed and relative position around the div and read (by jquery) when the divreach the top
Related
I have a page something like this
<div id="top">
</div>
<div id="bottom">
</div>
I want an output which displays bottom first then top..
How can i achieve this using CSS ??
If your question means, the following.. "You would want to place div#bottom on top of the other drawn DOM elements below". DOM ordering.
If you want #top and #bottom to be independent DOM elements.
div#top {
width:200px;
height:100px;
background-color:red;
}
div#bottom {
position:absolute;
width:100px;
height:50px;
background-color:blue;
top:10%;
left:4%;
}
The top and left values are values of your choice, the above example places the bottom inside the top.
positioning - Can be used to manipulate the same. You could use fixed element inside a huge encompassing div. But use fixed only if you are sure that the DOM contents is to be shown even on a overflow. 'relative' positioning might as well work when you are working reference is the body or the Root Node class or element.
If you want to control how DOM displays these elements. Then you might have to use javascript with CSS to achieve this. Like say
document.getElementById('bottom').style.display = 'block';
document.getElementById('top').style.display = 'none';
After a timeout
setTimeout(function() {
document.getElementById('top').style.display = 'block';
}, 200);
Since independent div's are not the best way to do this, would rather suggest you to try Something like this
<div id="top_div">
<div id="bottom_div">
</div>
</div>
with the help of "positions" u can achieve this..
The HTML page is rendered from Top to Bottom. Reverse your div tags as in :
<div id="bottom">
</div>
<div id="top">
</div>
unless you have a specific reason not to do so.
Using Position in css it should work o.w try below
<div id="bottom">
</div>
<div style="clear:both;"></div>
<div id="top">
</div>
I've hit a snag in html and css.
I created a div and wanted to put a logo image on its left and a button link on its right but stubborn css insists on making it move on to separate lines ,I used float:left and float:right.
Would it be something like this? http://jsfiddle.net/QFEKN/
<div>
<img src="https://www.gravatar.com/avatar/c5b9fb1230ea2fe0dc96151cba3098d5?s=32&d=identicon&r=PG&f=1" style='float: left' />
<button>Link</button>
</div>
You mean something like this?
Put a div on your img and button and set width to 100%. Then float your image and your button. I updated the fiddle of thewheat: fiddle
Your CSS
#box
{
width:100%;
}
#logo
{
float:left;
width:50%;
/*padding and Margin according to your need*/
}
#buttons
{
float:right;
width:50%;
}
Your HTML
<div id ="box">
<div id ="logo">
/*your img file here */
</div>
<div id="buttons">
/* Your links/buutons */
</div>`enter code here`
One of the thing you can do here is that you create a table put your logo in first cell of the row and next cell you can add your link, after that you can set float/margin to the positioning you want..hope that helps
You have to use "float property". without it things will not work well in all browsers and then you will get browsers issues too.
Do this , This will work fine.
Check this fiddle
img
{
float:left;
width:100px;
}
button
{
float:right;
width:100px;
}
.Row:hover .Contents { background-color:Blue; }
<div class="Row">
<span class="Contents">Row Contents</span>
</div>
<div class="Row">
<span class="Contents">Row Contents</span>
</div>
In the above sample, only the first Row Contents responds to hover. See http://jsfiddle.net/3JRTQ/. I'm not sure what I'm doing wrong, particularly since .Row .Contents {} works for all instances just fine.
I don't want to highlight the entire row - just the span with text, but I want the whole row to respond to hover.
Is this possible with CSS only?
You've hit a bug in Chrome 25 (and 26, too). Remember, always try another browser.
Fix for this example. Make the Span the hover
.Row .Contents:hover { background-color:Blue; }
OR make the Div the element that is going to be changing:
.Row:hover { background-color:Blue; }
Hope this helps
I want to place buttons On the Top of the image in three places
Bottom Left Corner of the image
Bottom Right corner of the image
Center of the image. (optional)....
How to place these button on the top of the image.
<img src="images/default_image.png" style="width:90%" id="mImage" />
This has nothing to do with jQuery or jQuery mobile really. Can be done with simple HTML and CSS. See this fiddle for am example on how I would do it: http://jsfiddle.net/rHaPH/22/
Try this:
<div id="div-1">
<img src="../img/logo.png" style="width:90%" id="mImage">
<div id="div-1a" data-role="fieldcontain">
Delete
</div>
<div id="div-1b" data-role="fieldcontain">
Delete
</div>
</div>
with this:
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
bottom:0;
left:0;
}
#div-1b {
position:absolute;
bottom:0;
right:0;
}
You can copy that into JS fiddle and it will work using JQMobile. Make sure you include the css url for JQM and make sure you tick JQMobile when adding JQuery to your JS fiddle.
Update:
You should also beware that JQMobile will inject span tags into the DOM which will be your buttons at runtime. This means the css I have provided is conceptually ok, but the selectors will need to point to those span tags (as opposed to using the ids of div tags).
As today, with jQuery mobile v1.3.2 I have implemented that in the following way:
<div data-role="page">
<div data-role="content">
<div id="wrapper">
<div id="button">
Button
</div>
<img src="i.jpg">
</div>
</div>
</div>
And with the follow css:
#wrapper{ position:relative; }
#button{ position:absolute; top: 10px; left:0px; z-index:10; }
img{max-width:100%; }
Some styles probably are not needed for what you want, but I just took the code sample from my own code.
wrapper div is relative positioned so its contents can be absolutely positioned.
z-index in the button div is to make sure it is placed on top of image.
You can add as many buttons as desired and change its css properties for top, left, right and button to move them around the image
Working example at jsFiddle
I want to have 2 boxes right next to each other, one with a fixed width, and another with a width that will change based on the size of the browser. The box has overflow:auto, and I'm trying to get the first box to act as a side bar that will follow you down the page. But of course I can't seem to achieve this, and have come here hoping someone could give me some examples, or point me in the right direction.
Thanks!
To achieve the layout you asked try something along these lines:
HTML:
<div>
<div id="col1">Left Navigation Menu</div>
<div id="col2">Right Content</div>
</div>
CSS:
#col1
{
position:fixed;
width:400px;
}
#col2
{
position:absolute;
left:400px;
}
Will I was trying to think of a good way to do this in CSS, I was channeling my google-fu and found...
http://plugins.jquery.com/project/jStickyScroll
"This plug-in allows you to keep a div element at the top of the browser window when scrolling down a page. The most common use is to keep a sidebar navigation menu from disappearing when scrolling to the bottom of a web page."
You could maybe try...
#element{
position:fixed;
}
Although this doesn't work without hacks in IE6, see
http://www.howtocreate.co.uk/fixedPosition.html
Give this a go (I hope this is what you are after?):
See a live demo here: http://jsfiddle.net/VcecU/
HTML
<div class="main_container">
<div class="content_a">1</div>
<div class="content_lotsoftext">Start. Lots of text goes here! Finish. </div>
</div>
CSS
.main_container{
background-color:#ccc;
overflow:auto;
zoom:1;
}
.content_a{
width:60px;
float:left;
background-color:#3FF;
}
.content_lotsoftext{
float:left;
background-color:#FCF;
margin:-20px 0 0 60px; /* -- Need conditional for IE6 and 7 to remove the margin to get it to work in those browsers --*/
/*-- The following classes help it to sit better in IE6 and 7 --*/
clear:left;
display:inline;
}
Please note, you will need a IE6&7 conditional to remove the margin, clear and display classes from .content_lotsoftext