Currently I'm testing my webpage in different browsers for compatibility, however, I'm having an issue with my jQuery animate() in Chrome (using SRWare Iron) and IE.
I'm using the following code:
jQuery
$('.element').animate({top:"50px"}, 1400);
HTML
<h1 class="element">testing text slide</h1>
CSS
body {
overflow: hidden;
}
h1 {
margin: 0;
}
.element {
position: absolute;
bottom: -1000px;
left: 50px;
font: bold 72px Arial, sans-serif;
}
The issue I'm having, is that in Firefox (Aurora), element slides from the bottom of the screen (-1000px) up to the top anchor of 50px.
In Chrome and IE, what seems to be happening is that element is sliding from 0px on the top, down to the 50px from the top, so it's very short. If I remove the jQuery animate for element, it's positioned at -1000px (I think, it's off the screen so I assume that's where it is).
Does anyone have any ideas? The other elements I'm animating with it work properly in FF/IE/Chrome.
You should be consistently manipulating only one of top or bottom. Right now your CSS sets bottom and then your animation changes top. As the two are obviously not independent, you will be much more likely to get consistency if you set and manipulate only one of them. When you haven't set a value for top, then the javascript animation is probably getting an inconsistent starting value for top that the animation will start from. It's probably coming back as auto in some browsers and some numeric value in other browsers. You can bypass that whole inconsistency if you don't rely on a value that you haven't set.
Since your CSS sets bottom, I would suggest that you animate bottom also, not top.
Related
I am trying to create an effect on my webpage where you click a thumbnail, and a full-size div "zooms in" from the thumbnail. I thought it should be fairly straight forward using CSS/Jquery: simply set the div to position:absolute with top and left set to match the thumbnail clicked on, set the zoom property to an appropriate low value (such as .25), and use the query animate function to animate the zoom value to 1 and the top/left values to where I want the final image. This almost worked, with one caveat: Apparently the zoom CSS zoomed not only the size of the div (and it's contents), it also zoomed the position.
So my question is (relatively) simple: how can I position the "full size" div with top and left matched to the thumbnail and the zoom parameter set to less than 1?
Edit 1:
After further research, I discovered that apparently Firefox doesn't support the zoom property at all, and the behavior I was getting in other browsers was simply too inconsistent, so I switched over to using CSS transformations/transitions instead. Granted, the transition property doesn't work on IE<10, but then neither does lots of other stuff, so I can live with that.
That is unexpected behavior. An alternative is to put the zoomed element within another element, which has the absolute-position styling:
$('#content div').animate({
zoom: 0.2
},2000);
#content {
position: fixed;
top: 50px;
left: 50px;
border: 1px solid black;
background: #88e;
font: 60px verdana;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div>Lorem ipsum</div>
</di>
I have an issue that only affect Chrome. Furthermore its only visible when the screen is at certain widths.
I've created a fiddle that can replicate the issue.
http://jsfiddle.net/T8LvA/63/
When you rollover the red box the width of the parent is animated to reveal more of the red box.
You may need to adjust the width of the html pane several times before you see the wobble,
Any thoughts on how best to resolve this?
Thanks
Use float:right instead of positioning it absolutely.
http://jsfiddle.net/T8LvA/70/
It happens because when you change the width, it extends to the right - then it's reflowed and moves back to the left to the correct position, which causes the wobble. Floating it to the right always keeps it there.
To clarify: you'll need to replace position: absolute width float: right on both #widget and .hidden for the correct result.
if you use postion you need use left and top, in this case it is useless.
Try fx you css in this way
#wrapper{
width: 100%; // was 600px
height: 100px;
margin: 0 auto;
//position: relative;
}
I've having an issue with the background images i have embedded into my carousel. click here I've noticed when i click from one slide to another the background image on my site moves out of place. The margin-top for my carousel is current set to margin-top:-275px; and the background image is set to margin-top:-64px; I am slight concerned about these settings.
Does anyone have a solution to this problem?
In order to activate the slides click the thin red tab under the nav bar
I guess that's because you have
.rslides li {
top:0;
}
It does nothing with position:relative (and the current slide has it), but it moves down the slide with position:absolute (hidden slides).
When you click a tab, there's a moment in which the new one is fading in, but it doesn't have position:relative yet. Then, in that moment, the new slide isn't where you want.
So remove that line.
The jumping is occurring because you are switching the LI items from position: absolute; to position: relative; at the end of the animation toggle. This can be avoided by removing your CSS rule:
.rslides li { left: 0; top: 0; }
Specifying width and height is fine, but as soon as you specify left and top - then switch from relative to absolute positioning, you get that jump you're seeing.
As for the positioning of each panel - it has to do with the way you are laying out your boxes. The sizes you are specifying are not large enough for the content you are providing. For instance: <div id="header"> is 37px tall, which is the appropriate size for the social media buttons, but you also have it as the container for the #nav-menu UL - which is another 102px tall.
It appears that in order to correct this and make things overlap, you are using negative margins - which is getting you all thrown off.
My suggestion would be to use a standardized layout system, such as any of the following:
http://cssgrid.net/
http://960.gs/
http://www.1kbgrid.com/
http://foundation.zurb.com/docs/grid.php
And use it to perform your layout tasks, rather than trying to self-craft overlapping layers with mixed absolute/relative positioning.
Alternatively, if you're going to go the overlapping layers route (again, not suggested), really commit to it. Position things absolutely throughout the layout.
In order to accomplish this, you might consider CSS rules like:
#header {
display: block;
position: absolute;
left: 50%; top: 0px;
height: 139px; /* Your Social media links height + nav buttons height */
width: 1018px; /* Your current width */
margin-left: -509px; /* Half the width - centers on page */
}
Again - this is MUCH more work, MUCH harder to maintain and MUCH less elegant - but will yield you at least a consistent spacing / sizing.
For some reason on this page using a mega drop down there is a giant white space below the all the content enabling you to scroll past the footer. Can you please help me figure out what is going on?
I'm quite certain it has to do with the mega drop down because when you hover over it the white space disappears. (menu item 'coop and career' is mega)
http://www.georgiancollege.ca/student-success/
Strangely, these two pages also use it and don't have the issue (some other styles are messed up on these two, but that doesn't affect it as I had them on the same theme/styles as the broken page and they still didn't have it - they're on broken styles currently so another dev can look into something else)
http://www.georgiancollege.ca/athletics/ (fitness center menu item)
http://www.georgiancollege.ca/sdvadev/ (programs menu item)
Thanks.
EDIT: also when you inspect the element the white space gets proportionally larger compared to the size of the inspector toolbar - if that helps.
try to set#menu-item-197 {overflow:hidden}
or simply #pagenav li {overflow:hidden}
It might be because of the relative positioning. For instance, a div block naturally structered at the bottom is forcefully placed at the top. In this case, the space of the div block will always be preserved thus leaving behind white spaces!!!
It is because in custom.css you had:
#wrapper {
min-height: 100%;
position: relative;
}
remove min-height: 100%, and it works well.
P.S.
I'll change footer to be without absolute positioning, because it makes horizontal bar to appear under the browser window, like this:
#footer {
bottom: 0;
height: 60px;
width: auto;
margin-top: 10px;
margin-bottom: 0;
padding: 1%;
text-align: center;
}
I found this awesome .js called kinetic. I've been messing with the html, css for sometime now and am unable to set the container to full screen.
http://designobvio.us/v4design/demo.html
I've set all the parents to 100% height and tried a fullscreen jQuery. Unfortunately still no luck.
I've paired down the code as much as possible for readability. As you can see I've set the height to just 400px because it just goes crazy otherwise. If there's any thing else i can offer as support, please don't hesitate to ask.
As a second request would anyone have any idea how to set the border to inside. Or make sure that the width fits nicely with borders as is?
You can position your #wrapper div absolutely and just stretch it in all directions with the top, right, bottom, left properties like so:
CSS
#wrapper {
border: 5px solid #000000;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
}
With this method the borders play nicely with the positioning, but if you want to place them inside your container you can set the border style to inset instead of solid. Also, your control buttons will disappear so to make them pop in front of your image just set them to position:relative and give them a large z-index so they appear on top of everything else.