I wrote jsfiddle example for better explanation, so, how to make red bars fill the whole height of .frame? And may be there are any absolutely different better way to make things like this?
Positioned elements are no longer part of the layout, so they have no idea what the dimensions of the parent element are. You need to use JavaScript to do this.
I solve it myself. JSfiddle demo.
var move_bookmark = function(){
var sh = parseInt($(this).css('height').replace('px',''));
var ph = parseInt($(this).parent().css('height').replace('px',''));
if (sh%2==0)//this is for solving [this problem] -
//http://math.stackexchange.com/questions/183018/pixel-rectangle-precise-rotating
{
if(ph%2!=0)
{
ph++;
$(this).parent().css('height',ph+'px');
}
}
else
{
if(ph%2==0)
{
ph++;
$(this).parent().css('height',ph+'px');
}
}
$(this).css('width',ph+'px');
var sw = ph;
var offset = parseInt(ph-sw/2-sh/2)+'px'
console.log(sw+"/"+sh);
$(this).css('top',offset);
$(this).css('left',-sw/2+sh/2+'px');
$(this).parent().css('padding','0px 0px 0px '+sh+'px');
}
$('.bookmark').each(move_bookmark);
Related
I am looking at websites for inspiration for my new start ups homepage. I saw https://www.pactcoffee.com/ and their home page features a full background image for the header and the nav bar is transparent then it becomes a solid color nav bar as you scroll down. I have only been able to set up the CSS for the site but I don't understand what to do to have the change in nav bar color.
You can do something like this...
http://jsfiddle.net/ojcqbLr2/
Check the Fiddle to see the rest of the code... like the CSS.
This JS will do this.
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 100) {
$('.topMenu').fadeIn();
} else {
$('.topMenu').fadeOut();
} });
By the way, I found this info by search.
Show div on scrollDown after 800px
I just made edits to the code so it was at the top and not bottom.
Best of luck.
I have found that you can set two divs. One of which will be display set to none.
$(document).scroll(function () {
var headerHeight = $('header').height(),
s = $('.nav'),
y = $(this).scrollTop();
if (y > headerHeight) {
$('.navLong').fadeIn();
$('.nav').fadeOut();
} else {
$('.navLong').fadeOut();
$('.nav').fadeIn();
}});
This allows one div to disappear when one appears and vice versa. A working example is can be found in the DEMO
I have something like this:
http://s9.postimg.org/wwizuwnq7/Untitled_1.png
And if you see, the divs (Where I marked in green) have a space of some pixel.
And i want if there is a 0-20 pixel space between divs, to order them like this:
http://s23.postimg.org/ky2htcpt7/image.png
So, i started to do this on javascript and i dont know to to continue..
var position = new Array();
$(".post").each(function(){
position[$(this).attr("id")] = $(this).offset().top - $(window).scrollTop();
});
now i have all the position of all the divs, and now i need to check where divs have a space of 0 - 20 pixel, and then i want to take down the higher block.
I not sure if this is the good way, and if now, i need another idea..
Thanks!
I managed to find a method!
var position = new Array();
$(".hblocks").each(function(){
position[$(this).attr("id")] = $(this).offset().top;
});
$.each(position, function(key, value) {
$.each(position, function(key2, value2) {
var space = value2 - value;
if (space <= 20 && space >= -20 && space != 0)
{
var finalSpace = Math.max(value, value2);
var spaceplus = space + 28;
if (finalSpace != value)
{
$("#" + key).css("margin-top",spaceplus + "px");
}
else
{
$("#" + key2).css("margin-top",spaceplus + "px");
}
}
});
});
You can do this by adding a container div around the bottom 2 blocks. That way they will always be in line, regardless of the height of either of the top two blocks. You should try not to use javascript for styling. CSS is very powerful.
Here's a fiddle: http://jsfiddle.net/kVn7x/
HTML:
<div>
<div style='height:100px;'></div>
<div style='height:200px;'></div>
</div>
<div style='clear:left'>
<div style='height:80px;'></div>
<div style='height:80px;'></div>
</div>
CSS:
div div{background:red; width:150px; display:inline-block; margin:5px; float:left; clear:none}
Can't you simply add a bottom margin to the selected element in CSS?
#element {
margin-bottom: 20px;
}
Your answer would be some king of javascript+css coding to verify height of elements .. work on em then re-arrange them.
Stop trying to figure out by yourself, try using Masonry or jQueryEqualHeight explained on CSSTrick.
What is Masonry?
Masonry is a JavaScript grid layout library. It works by placing
elements in optimal position based on available vertical space, sort
of like a mason fitting stones in a wall. You’ve probably seen it in
use all over the Internet.
This is untested but something like this should work after your code...
The idea is to continuously add 1pixel to the top margin of the problematic div until the difference between the two divs is 20px
while(position['div1'] - position['div2'] <20){
$('#div2').animate({marginTop: '+=1px'}, 0);
}
If you want to show them directly in line as in your picture, it's even easier:
var diff = position['div1'] - position['div2']
if(diff < 20){
$('#div2').animate({marginTop: '+=' + diff + 'px'}, 0);
}
What's up?
I'm looking for a while for a solution or a tutorial to trigger a css3 animation using Jquery.
I know I can add a class to the div to animate it with css3. But I want to add the class only when reaching a div ID ! Not when I reach XX pixels from the top.
Example: Skills bars in http://themes.swiftpsd.com/index.php?theme=flexform
May someone help me or give me a great tutorial?
Btw, you rock guys!
Cheers,
Jhon
This was a fun one, jsFiddle
$(document).scroll(function () {
var y = $(this).scrollTop();
var x = $("#myDiv").position();
if (y > (x.top - 50)) { // -50 so things don't overlap
$(".magic").addClass(
"bounceInRight");
}
else {
$(".magic").removeClass(
"bounceInRight");
}
});
Animation from Animate.CSS
How can I load images to cover the whole background like some websites, using CSS. Not the usual background-image property but I want to load the images quickly.
Examples:
http://www.marinayachting.it/
http://alexandraowen.co.nz/
background-image is the only way to place images in CSS. If you want it to be vary large put it on the body element or a container div that fills the entire viewport.
body {
margin: 0;
padding: 0;
width: 100%;
background-image: url('my_big_image.jpg') norepeat;
}
If you use a container div you can set position:fixed; top:0; left:0 and the image will remain stationary when the page scrolls.
There's no magic to it. As far as getting it to load quickly I don't think there's much you can do if it doesn't repeat. If it does repeat then make sure your image is the size of one module. This can be as little as one pixel tall or wide depending on the content.
There is no magic to making a background image load quickly, you just:
Have a fast server.
Compress the image as much as possible.
Make your page HTML small so that the rest can start loading as soon as possible.
Don't have many other images that also has to load.
Don't have a lot of scripts and other external files that has to load.
I found this tutorial helpful. ->
http://css-tricks.com/perfect-full-page-background-image/
Bing is loading a normal background image with a fixed size. It´s not particularly fast (for me...), but perhaps it seems fast because the image is cached after the first time you load it.
You can set the style inline so that the image can start downloading without waiting for any css file to be ready.
If you set an image let's say a picture as a background you need to make it large enough to accommodate large screen sizes. You don't want the experience on your site to be, that your picture repeats multiple times on the screen. Probably at the least width should be 1260px. If background is just a simple gradient, you can cut a small part of it in photoshop and apply it on the body like this:
body {
margin:0;
padding:0;
background:#fff url(your/image/location.jpg) repeat-x scroll 0 0;
}
This method could be applied to divs too, Good luck.
In your second example site, alexandraowen.co.nz, if you took a second to look at the JS they use, you would have seen the following:
// backgrounds --------------------------------------------------------------//
var Backgrounds = {};
Backgrounds.init = function()
{
$('body').each
(
function()
{
var imgsrc = $(this).css('background-image');
if(imgsrc != 'none')
{
imgsrc = imgsrc.slice( imgsrc.indexOf('(') + 1 , -1);
$(this).css('background-image', 'none');
$(this).prepend('');
if($.browser.msie)
{
// ie 7 is the slow kid and we have to strip out quote marks ffs!
$(this).find('div.bg img').attr('src', imgsrc.split('"').join(''));
}
else
{
$(this).find('div.bg img').attr('src', imgsrc);
}
}
}
);
Backgrounds.resizeHandler();
$(window).resize(Backgrounds.resizeHandler);
$('div.bg img').load(Backgrounds.resizeHandler);
}
Backgrounds.resizeHandler = function()
{
var w = $(window).width();
var h = $(window).height();
$('div.bg img').each
(
function()
{
var wr = w / $(this).width();
var hr = h / $(this).height();
var r = Math.max(wr, hr);
var imgw = Math.round($(this).width() * r);
var imgh = Math.round($(this).height() * r);
$(this).width( imgw );
$(this).height( imgh );
var l = Math.round((w/2) - (imgw/2));
$(this).css('margin-left', l+'px');
}
);
}
As well as the HTML on the page:
<body style="background-image: none; ">
If you dig into their scripts a bit more, you can see what they did. But I guarantee you it's nothing faster than just setting the background-image property.
<img id="foo" src="bar" alt=""> with #foo { width: 100%; height: 100%; }(use position: absolute; / position: relative; & z-index for layering as desired)
Here's an old example.
I have a paragraph followed by an unordered list, with several list items. I also have an image floated to the left of that. The problem I am having is that the list item margin/padding is being overlapped by that image.
I want the bullets that are next to the image to indent like it should.
Here is a test I wrote up for debugging, where you can see my issue in action.
All of this is inside of a CMS, so the image dimensions are variable, as well as the paragraphs and possible lists in the text.
Any solutions?
(See my first comment for pictures.)
ul {
overflow: auto;
}
I'll have the added advantage of not having the list items wrapping around the image.
Add this:
ul{ list-style-position: inside}
That's it!
Another option would be to shift the list to the right with relative positioning:
img+p+ul {
position: relative;
left: 1em;
top: 0;
}
li style="margin-left: 135px;" Worked best for me.
The overflow: auto; looked ok up front but wound up messing with other elements in my HTML.
You can give your list items an overflow property:
li {
overflow: hidden;
}
That will cause the list item to sort of behave correctly: They will display as a square block, continuing where the image ends as well, they don´t flow nicely to the left. The next list item will.
If you don't bother about adding javascript, here is a jQuery script that will add a margin to the ul that overlaps the image so all the list items remain aligned, and then assigns a negative margin to the li's that doesn't overlap.
$(function(){
//Define a context so we only move lists inside a specified parent
var context = $("#test_div");
//Build a list of images position a size
var imgRects = [];
var imgs = $("img.left", context);
imgs.each(function(i){
var pos = $(this).position();
pos.right = pos.left + $(this).outerWidth(true);
pos.bottom = pos.top + $(this).outerHeight(true);
imgRects.push(pos);
});
//Process each li to see if it is at the same height of an image
var lis = $("li", context);
lis.each(function(i){
var li = $(this);
if(li.parent().css('marginLeft') != "0px"){
return; //Already moved
}
var top = li.position().top;
for(var j in imgRects){
var rect = imgRects[j];
if(top > rect.top && top < rect.bottom){
li.parent().css('marginLeft', rect.right);
return;
} else if(li.parent().css('marginLeft') != "0px"){
li.css('marginLeft', -1 * rect.right);
}
}
});
});
I've tested with your demo page and jQuery 1.3.2 and it works on FF3.5 and IE8 because the image is on top of the document. If the image appears in the middle of a ul, the firsts li's will remain padded. If you need to correct this issue leave a comment and will try to update the script.