I have this issue with my flexslider in which no matter what I do, I just can't seem to place the slider at the very top left of the browser window. It seems as if there's a margin of 5 pixels on the top and the left.
If I were using simple CSS, this usually fixes it:
Top: 0
Left: 0
I've tried those elements on seemingly every single parameter within Flexslider's CSS and for the life of me I can't position it as such.
I'm using FlexSlider-2.6.3
Any suggestions?
Have you tried:
html, body {
margin:0;
padding:0;
}
Also, check the containers for padding and margins.
Thanks for the tips.
I found the answer. I've been staring at a computer screen for too long today.
Within .flexslider, I needed to apply {position: fixed} into the criteria.
Related
What I am trying to figure out is how to animate a div that will start out in the middle of a div that is in the middle of a page. The div originally should not have a position: absolute. Unless it is not possible, I would like it not to start with that because it seems very tough to have any data below it. It's not going to be that big of a box. I am guessing anywhere between the height of 100px and 600px, with a width between 400px and 800px.
I originally found this JsFiddle Example that does a great job and almost exactly what I need. But the div starts with an absolute position and it is already located at the bottom right of the page to be animated.
Once the div is at the bottom right of the page, it needs to be fixed there so that I can scroll up and down the page without it moving. At this point I am not worried about being able to push it back up to the spot in which it came.
A couple things I tried: Lining it up in the position I desired, and then on the click of a button, add a class with the attribute position: absolute and calling the animate function like this:
chatWindow.stop().animate({
bottom: 0
, right: 0
}, 2000);
But my guess is that it originally needs to the the position set as in top: 0; left: 0 and that's why it won't work.
I already have it working without any animation and would love to be able to figure out how to animate this thing. Without animation, it's as simple as toggling a class with it's normal positions attributes with one that has a position: fixed; bottom: 0; right: 0.
Here is a Codepen Example that I created to show really what I need other than right animation part not being there. Any help would be awesome as I've been toying with this for quite some time now.
If you want an animation from left to right, you will have to play with left and top values. But the negative point is that will cause a weird animation because you want to keep a relative position of the box in the beginning.
So when you will do the animation, it will start from the very top left on the window, which is not good.
Like this
To avoid that, you will have to use absolute position in the beginning state. You said in your question you doesn't want it but I think it is required to get the wanted visual effect.
See here the live example with good effect
However, to keep a pretty nice animation, but I know it is not what you want, you can play with right and bottom values. It will make the box appears from the right and bottom corners of the window.
Like this
One possibility, still using absolute positioning, based on what's going on in your codepen example, would be to fake the current positioning by adding the following CSS:
.container {
padding-top: 250px;
}
.center-window {
position: absolute;
right: 50%;
margin-right: -200px; /* i.e. half of its width */
bottom: 100%;
margin-bottom: -250px; /* i.e. its height */
}
Then you could animate the right, bottom, and margin properties accordingly. See https://codepen.io/anon/pen/RaOJYY (though it doesn't currently do anything with the padding). Of course, if your not sure of the dimensions of .center-window, perhaps this solution won't quite work.
I am working on a small VA project and I am attempting to pull stats from another website. The only way I have been able to find out how to do this, is by using an iFrame with the clip function.
Website is: NWGlobalVA.com
Now the Issue I am having is if you go to the main page and re-size the browser in anyway it pushes behind the map element. I have tried everything in my knowledge and research to make it re-size with the container.
Below is the code I use with the iFrame and CSS to do the clipping. Any help would be much more appreciated then you will understand. I have been trying to do this for a couple days now. Ideally I would rather just get the information once every 15 minutes and pass it to my database. However on the website none of the tables are defined and I would know how to go about that.
<style>
.iframeb {
position: absolute;
left:-384px;
right:0px;
top: -145px;
clip: rect(190px, 625px, 350px, 400px);
}</style>
<iframe width="890" height="1900" src="http://fscloud-infotool.de/index.php?page=vasystem&subpage=vadetails&id=10277" class="iframeb" scrolling="no" frameborder="0"></iframe>
The way I deal with iframe size is with javascript (jquery):
I calculated the original iframe aspect ratio by taking the width/height. So in your case: 890/1900.
<script>
function size_iFrame()
{
// If the width and height of the iframe are set
// as attributes (<iframe width='890' height='1900'>),
// you can have the js calculate it for you.
// aspect= $('iframe').attr('width') / $('iframe').attr('height');
aspect= 0.47;
$('iframe').css('width', '100%');
$('iframe').css('height', $('iframe').width() / aspect);
}
$(document).ready(function()
{
size_iFrame();
$(window).resize(function()
{
size_iFrame();
});
}
</script>
This will fit the iframe to the width of its container and give it the same aspect ratio as it initially had.
Edit: To answer your question, i'd call it from the ready callback and setup and window resize callback to call every time the screen size changes. I edited my code above to show this.
Edit2: As #mugé points out, you'll also need to remove your iframe css styling for my method to work.
In responsive design, I assign the iframe a container sized inside the CSS. For example,
CSS
.iframe_container {
display: inline;
float: left;
width: 89%; //whatever width you want
}
You will need to eliminate your .iframeb absolute, right, left positionings, because the container will take care of it all, unless you are talking about the 'List' parameters on top of the map, I would try to use #media to arrange clean lists according to screen sizes for the .iframeb class.
This is my first post so hello! :)
I have a problem with coding my site!
May I show it on this picture:
I want to make a slider (with captions for each slide) which is aligned to the right edge of content div.wrap. But left side of it must by to the left side of the screen. It must change to the screen resolution (always to the right edge of the content div.wrap Something like this
Right edge of div.wrap must be a limit.
I have no idea how to do this. The slider must be a background fader? Or img fader?
Please help me or show me how to do this on similar example.
Further to #Itay's answer, here is a jsfiddle which might help you with the CSS for this.
http://jsfiddle.net/mmWq6/4/
I've used the example of a slider that is 500px by 200px. This is what I guessed would be a miniature version of the webpage I expect you're creating, if you scale the 'Result' window narrower and then wider again you'll see that I think the design works how you want it to.
This demo basically demonstrates Itay's comments, which were to have a wrapper (#slider-wrapper) which had the CSS position: relative and a div within that with the CSS:
#slider-wrapper-inner {
position: absolute;
right: 0;
}
Then within that are .slides which are relatively positioned and .captions within them that are positioned absolutely, as above (but with an extra line: bottom: 0;), so that they sit in the bottom right.
I have a site that I've been working on the the past couple of weeks. I have a very nice footer on it, problem is, it doesn't stay at the bottom. I've come up with a simple solution.
If the page isn't completely filled (i.e. the content only goes half way down), absolute position the footer to the bottom.
If the page is overflowing (vertically), leave the footer as just another element.
Problem is, I don't know how to check if my content is overfilled. Is there a way to check if the document fills up all the space vertically? The only thing I can think of is to check to see if the vertical scroll-bar is enabled, however, I don't know how to check for that either.
I'm using jQuery, answers with it are fine. Thanks!
EDIT
OK, my question was apparently misunderstood. Sorry guys, I don't need solutions on how to keep my footer at the bottom. I need ways of determining if data overflows on the y-axis. I happened to mention my reason why I needed to know this. Don't make me regret this guys :p
I've used this successfully many times over: http://cssstickyfooter.com. No JavaScript needed at all.
Using jQuery, $(window).height() is how you get the height of the viewport. You can check this value against your content's height:
if($("#content").height() > $(window).height()) {
// absolute position my footer
}
Use the Sticky Footer technique like Matt posted.
The basic idea of it is that you set a static height for your footer. Make your webpage take up the full height of the browser. Push the footer off the screen from the #content div, and then move the footer back onto the page with a negative margin value.
It's hard to answer without seeing your HTML, but if you are using jquery just use outerHeight to get the vertical size of the elements on your page and compare it to window.height
You could apply the css clearfix trick. As stated it is hard with out seeing your code. Even still this could work.
Example:
<html>
<style>
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
<body>
<div id="content" class="clearfix">
</div>
<div id="footer">
</div>
</body>
</html>
This helps to keep content from overflowing and should keep your footer at the bottom or below your content.
Can we have an image which spans over multiple columns which is created using CSS3 multicolumn property in an Html page. Here is my column layout style
div#column {
margin-left:20px;
-moz-column-width: 250px;
-moz-column-gap: 20px;
-webkit-column-width: 250px;
-webkit-column-gap: 20px;
height: 850px;
}
I need to place an image within this column layout which spans over atleast 2 or 3 columns.
Theoretically there is column-span, however it doesn't seem to be supported by any browser currently.
You could try with position:absolute as Simon suggests, but I doubt you will can satisfactory results and I don't think there is any other reasonable workaround.
Maybe there are JavaScript libraries that can do it...
Add a width on your div and add this style
column-count:3;
-moz-column-count:3;
-webkit-column-count:3;
See reference: >>
I asked #Krishna to post this question since our other SO question/answer session Increase font size with JavaScript around fixed floated images in CSS columns was getting off-topic, i.e. it was solved and this image spanning multiple columns warranted a new question.
So, my thoughts so far...
column-span is working in Webkit (Chrome12) for me. Check out the quirksmode demo page. However, the bad news is that it doesn't help solve this problem as the image that needs to span multiple columns still gets clipped at the column-width, so I don't think it is the solution.
For now I think the only solution is to do the columns yourself in JavaScript, or maybe try and use/modify the jQuery columnizer plugin.
Oh and I just found this other question CSS3 Columns and Images which basically agrees that it is impossible without JavaScript.
There is already have a lot of JavaScript for your font increase/decrease (different question, see my fiddle) so it would have been great if CSS supported this natively. All we want is big Yoda to spill over into the second column :-)
So I think that the only solution currently is:
For each image that is greater then the width of a column, work out how much into the next column it would be (including the column-gap)
Add a spacer floating <div> in the next where the image needs to overlap to, so that the words correctly continue to flow around and below the image
Absolutely position a copy of the image over the top.
I just hope you don't want images that span more than 2 columns otherwise it's going to complicate an already complex solution!
Use position:absolute, like this:
#image {
position:absolute;
top:300px; //distance from top
left:200px; //distance from left
width:600px; //image width
height:400px; //image height
}