In my css file, I set
#background_layer0{
width: $(window).width();
height: $(window).height();
}
And it works. However, As I set
#background_layer0{
top: $(window).width() * 0.5;
left: $(window).height() * 0.6;
}
It can't work. I can't see any differences between this two kind of attribute:
width , height and top left.
Please correct my fault and explain why. Also, I hope you can give me some reference to read.
UPDATE: I need to deploy the webpage to another device like: cellphone.
If I only use percentage as value, can it work?
Use a separate JavaScript file or include this in a script tag
$('#background_layer0').css('top', function() {
return $(window).width() * 0.5;
});
$('#background_layer0').css('left', function() {
return $(window).height() * 0.6;
});
You can simply use percentage:
#background_layer0{
width: 100%;
height: 100%;
}
#background_layer0{
top: 50%;
left: 60%;
}
So, in CSS, you cannot use $(window).height() and $(window).width(), you must specify it in percent, pixels, etc. (it must be absolute)
To make an object's width same with the window width and height, you must use javascript/jquery
Related
Longshot... I don't think this is possible but I've been shocked before!
I anchor tags, all of which have background images, all 300px wide but their heights all vary. Is there anyway to set these without actually having to type out the height? Sort of setting it to the bg url's dimensions?
Thanks!
I don't think people understand - My fault for rushing the question.
Here's code as an example:
#ex-1 {width: 300px; height: 410px; background: url('/image-1.jpg');}
#ex-2 {width: 300px; height: 420px; background: url('/image-2.jpg');}
#ex-3 {width: 300px; height: 430px; background: url('/image-3.jpg');}
#ex-4 {width: 300px; height: 440px; background: url('/image-3.jpg');}
I'd like to NOT set the height, and it set automatically using CSS only. I don't want to use image tags.
I wasn't sure if this was possible, I assume not.
Thanks
A simple way of doing this is to add an image like this and then make it hidden i used visibility:hidden http://jsfiddle.net/gztpsfkw/1/
i just saw that you don't want to use <img> tags but as for here the image is being hidden and it takes up the space.
<img src="http://placekitten.com/300/301" />aa
And apply the css
a{
display:block;
background-image:url('http://placekitten.com/300/301');
width:100px;
height:auto;
}
img{
visibility:hidden;
}
We can use a visibility: hidden way:
<img src="http://lorempixel.com/100/200/" />
CSS
a {background: url("http://lorempixel.com/100/200/") center center no-repeat; width: 100px;}
a img {visibility: hidden;}
Fiddle: http://jsfiddle.net/praveenscience/vhjxfgtw/
JavaScript Solution
Procedure
To set the height, dynamically, you need to use JavaScript. So, you can get the computed value by adding a <img /> tag and computing the value by setting the src. The pseudo code would have been like this:
Get the computed value of background-image.
Attach it to a new <img /> element in the DOM.
Get the height of the new <img /> element.
Set the height of the fake background <div>.
JavaScript
$(document).ready(function () {
bg = $(".bg").css("background-image");
$("body").append('<img id="faux" src="' + bg.substring(4, bg.length-1) + '" />');
height = $("#faux").outerHeight();
$("#faux").remove();
$(".bg").height(height);
});
Fiddle: http://jsfiddle.net/praveenscience/rcL3xj0x/
If you don't want to use inline CSS, you can use this:
$("style").append('.bg {height: ' + height + 'px}');
If you're looking for a way to make the background images fill all the space available then use background-size: cover
I think you're looking for something like this:
function setBackgroundImage(element, src) {
var img = new Image();
img.onload = function() {
element.style.height = img.height+'px';
element.style.backgroundImage = 'url('+img.src+')';
}
img.src = src;
}
Or, if you need to scale the images for the width:
function setImage(element, src) {
var img = new Image();
img.onload = function() {
var sizeRatio = element.offsetWidth / img.width;
element.style.height = (sizeRatio * img.height)+'px';
element.style.backgroundImage = 'url('+img.src+')';
element.style.backgroundSize = 'cover';
}
img.src = src;
}
Side Note: The <a> tag is not a block level element. In order for the <a> to have a height and a width you need to make it a block level element to show the background image.
You would use: display: block
Now for your question... In order to get the background image, with out having to manual type it in you can use a little jQUery to make your life a lot easier. I have modified your CSS and HTML a little bit to accomodate the jQuery.
CodePen Example
#links { overflow: hidden; }
#links a { display: block; float: left; width: 300px; height: 200px;
/* generic height set in case there is no background image */ }
#ex-1 { background: url('http://www.google.com/images/srpr/logo11w.png');}
#ex-2 { background: url('http://www.bing.com/s/a/hpc12.png');}
#ex-3 { background: url('http://www.google.com/images/srpr/logo11w.png');}
#ex-4 { background: url('http://www.bing.com/s/a/hpc12.png');}
<div id="links">
</div>
Here is the jquery. It will loop through all your images and set the height according to your background image
$(document).ready(function(){
$('#links a').each(function(){
var temp = $(this).css('background-image');
temp = temp.replace('url("', '').replace('")', '');
var newImg = new Image();
newImg.src = temp;
imageHeight = newImg.height;
imageWidth = newImg.width;
$(this).css('height', imageHeight);
});
});
I'm trying to adjust the position of several sibling divs based on which sibling they are. Currently, they're all position: absolute, but that's not set in stone.
They are each a few hundred pixels tall, but I want them to overlap each other so that the ones behind only 'peek' out above the ones in front by a few pixels. The easiest way I can think of to do this would be a Less mixin for nth-of-type that, instead of only applying the rules to the matching one index, instead passes the index into the mixin. Basically, I want this:
&:nth-of-type(#n) {
top: #n * 20px;
}
Edit: what I'm currently doing:
&:nth-of-type(1) {
.card_offset(1);
}
&:nth-of-type(2) {
.card_offset(2);
}
&:nth-of-type(3) {
.card_offset(3);
}
&:nth-of-type(4) {
.card_offset(4);
}
Obviously this is nonoptimal. Is there a better way to do this in Less?
Alternatively, is there a CSS field for something like 'layout-height' that would give the div a certain height (not its full height) in the layout?
Assuming you know the number of elements in advance (or are recalculating your css on the fly somehow), then essentially what you have works if put into a loop structure which I originally discovered here on stack overflow.
LESS Code
.loop(#index) when (#index > 0) {
//set top amount
&:nth-of-type(#{index}) { //NOTE: 1.3.3 and under is just #index, not #{index}
top: #index * 20px;
}
// next iteration
.loop(#index - 1);
}
// end the loop when index is 0
.loop(0) {}
.yourElem {
#n: 6; //num of elements (could skip this and just put number in)
.loop(#n);
}
Outputs
.yourElem:nth-of-type(6) {
top: 120px;
}
.yourElem:nth-of-type(5) {
top: 100px;
}
.yourElem:nth-of-type(4) {
top: 80px;
}
.yourElem:nth-of-type(3) {
top: 60px;
}
.yourElem:nth-of-type(2) {
top: 40px;
}
.yourElem:nth-of-type(1) {
top: 20px;
}
I don't see a way that this is possible. Would be pretty cool, but I guess that's what javascript is for.
$('.parentDiv').children('div').each(function() {
$(this).css({"top": num * 20 + "px"});
num = num + 1;
});
Here's the full js solution:
http://jsfiddle.net/VbuQ9/
You can play around with the LESS fiddle here if you want.
http://jsfiddle.net/hV8sX/1/
I'm trying to get a vertical-align to work on a div whose display is table-cell.
See http://jsfiddle.net/midnitesonnet/Rwahk/ for html/css.
I can't seem get the to display vertically align to the bottom. Any help would be much appreciated.
Thanks.
You define display:table-cell & position:absolute which create a problem. Just remove your .title DIV height.
#whats_available .title {
position: absolute;
z-index: 1000;
bottom: 0;
left: 0;
text-align: center !important;
width: 100%;
color: #fff;
}
Check this http://jsfiddle.net/Rwahk/5/
http://jsfiddle.net/Rwahk/7/ works as you wanted...
The changes made were to add display: table; to the #whats_available > div and to change the .title to position: relative;
You should change the height of the inner div to something like 30px instead of 100%
http://jsfiddle.net/Rwahk/4/
You shouldn't use dimensions attributes in pure html (the only exception could be image but it's still a bad idea).
I wrote this small jQuery function which might comes in handy to you or to other readers.
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
return this;
}
use:
$(selector).center();
Enjoy and have a great day :)
I want to increase a size of image which is used as cursor.
Currently i am not able to put image more than 128 by 128.
But i want to put it with more size.
so how to do that?
I am using
cursor: url(hand.png), auto;
You can combine css + jQuery if necessary, even if combining them is not always perfect:
JSFiddle example:
http://jsfiddle.net/n4Zbr/258/
Local example:
$(function(){
var $cursor = $('#huge-cursor');
$(document).bind('mousemove',function(e){
$cursor.css({
left: e.clientX - 15,
top: e.clientY - 15,
});
});
});
body, html {
width: 100%;
height: 100%;
margin:0; padding:0;
cursor: url("data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"), auto;
}
#huge-cursor {
position: fixed;
border-radius: 10% 90% 50% 50% / 10% 50% 50% 90%;
background: yellow;
width: 200px; height: 200px;
border: 4px solid pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="huge-cursor"></div>
<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT
<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT
<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT
<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT
<br><br><br><br><br><br><br><br><br><br><br>LONG<br><br><br><br><br><br><br><br><br><br>CONTENT
With CSS? I am afraid it can't be done. I think you should try to use some software which can edit icon file and re-size it.
You can use CSS (or JavaScript) to hide the 'real' cursor. Then create a div with the background and size of the new cursor which will reposition itself to where the 'real' hidden cursor is every time the mouse moves. Basically it will look like a real cursor but the disadvantages to this is that i don't think the hide cursor CSS property works in the browser Opera. If you are interested in this method, let me know I will post it up once I'm near a computer (not on an iPad)
I was wondering, what is the best way (using html, css, and graphics) to create a web page whose top header section appears to be beveled, as opposed to straight across? Please see the below image as an example:
I'm not sure how to use images in a way such that they would expand/contract in accordance with different browser sizes/resolutions...
Can anyone offer me some help? Or perhaps point me to a resource?
Thanks!
You could use border-radius.
See my example on jsFiddle.
Mine is a cleaner version of #Alex's:
Live Demo
.head {
-webkit-border-top-left-radius: 40% 80px;
-webkit-border-top-right-radius: 40% 80px;
-moz-border-radius-topleft: 40% 80px;
-moz-border-radius-topright: 40% 80px;
border-top-left-radius: 40% 80px;
border-top-right-radius: 40% 80px;
background: blue;
height: 280px
}
<div class="head"></div>
It obviously won't work in IE.
You could use CSS3 or webkit-specific properties, but this is not well supported as far as cross-browser compatibility is concerned. If you want to support as many browsers as possible, your best bet would be to use a background image to achieve this effect.
Here's a cross-browser version, which i made with help of jquery. Basically, the script creates many spans, with white background and decreasing width.
You can play around with STEPS and FACTOR variables, which will change the result. The step function sets the easing of the curve. You may replace it later with better functions than mine, it's just an example.
var STEPS = 53;
var FACTOR = 5;
var $el = $('div.header');
var width = $el.outerWidth();
var $span = $('<span></span>');
for(i=0;i<STEPS;i++){
tmpWidth = stepWidth(i, width);
$span.clone().css({
'bottom': i + 'px',
'width': tmpWidth,
'left': (width - tmpWidth)/2
}).appendTo($el);
}
function stepWidth(i, width){
return -(1 / FACTOR * Math.pow(i, 2)) + width;
}
You can find the entire code (html + css on the Fiddle)
Here is another way of achieving this.
Draw an overlay with pseudo element with width and height larger than element itself.
Apply border-radius to create round effect and background-color.
Add overflow: hidden on parent to hide excess part.
Output Image:
body {
background: linear-gradient(lightblue, blue);
min-height: 100vh;
margin: 0;
}
.box {
position: relative;
margin: 5vh auto;
overflow: hidden;
height: 90vh;
width: 500px;
}
.box:before {
border-radius: 100% 100% 0 0;
position: absolute;
background: white;
bottom: -200px;
right: -200px;
left: -200px;
content: '';
top: 0;
}
<div class="box">
</div>