Can you get the "state" of cover using element - javascript

So was playing around with the idea that I would move my background image around a bit. Very fancy, and relatively easy to do.
Problem is that my background image is currently set to cover. (background-size:cover;)
I can get the css settings as follows:
var pageElement = document.getElementById("page");
var curLeft = pageElement.style.left;
var newLeft = posIndex[current] * 10 ;
In this case I am only getting the css setting for left, but is there a way to figure out what cover have done.
Basically, I would love to get an idea if it made the image taler and wider by 20% or anything like that, so I know how much width I can slide the image.
I guess in theory I could make an educated guess with code. Or maybe just ignore it all together, shift the image based on width alone, hope the rendering takes care of the rest.

If I understand you correctly, you can tell how much the image size has changed based on the known behavior of "cover" and the element with the background as long as you know the original image size:
//Original size
var size={w:120, h:120};
//Check the difference between the element dimensions and the original size
var diff={w:el.offsetWidth/size.w, h:el.offsetHeight/size.h}
//Whichever one is higher is your new image ratio
if(diff.w > diff.h) var ratio = diff.w*100;
var ratio = diff.h*100;

Hope this helps.
You can make it bigger by setting background-size to higher percentage than 100%.
You can move it with position values from 0(left/top edge) to 100% (right/bottom edge).
#keyframes example {
0% {
background-position: 50% 50%;
}
20% {
background-position: 0% 20%;
}
40% {
background-position: 30% 100%;
}
60% {
background-position: 100% 10%;
}
100% {
background-position: 50% 50%;
}
}
.img {
width: 300px;
height: 200px;
animation: example 5s infinite;
background: url(https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg) no-repeat;
background-size: 120%;
background-position: 30% 20%;
}
<div class="img">
<div>

Related

JS calculate current center of screen

I searched a lot but couldn't find the answer I want. I have a JS script which shows an image when a fixed element is hovered. However I would like to always have the image at the center of the screen, not matter where the user scrolls. How can I reach that?
My JS function:
$(document).ready(function($) {
$('.trigger').mouseover(function() {
// find our span
var elem = $(this).siblings('span');
// get our img url
var src = elem.attr('data-original');
// change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '"width="400" style="display:block;position:absolute;top: 0; left: 0; bottom: 0; right: 0;margin: auto;"/>');
});
$('.trigger').mouseout(function() {
// find our span
var elem = $(this).siblings('img');
// get our img url
var src = elem.attr('src');
// change img to span using the value from data-original
elem.replaceWith('<span data-original="'+src+'"></span>');
});
});
JSFiddle: https://jsfiddle.net/rbmd6a39/
I can get offset from the top of page using
window.pageYOffset;
But I don't know where to put that value to have it in the center.
You could give that image styles that would make it fixed in the center of your screen. No need for JS there.
Now also works on very large images with max-width, max-height and object-fit: contain!
.always-centered {
display: block;
position: fixed;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%;
-o-object-fit: contain;
object-fit: contain;
transform: translate(-50%, -50%);
z-index: 99;
}
You don't actually need to use JavaScript for centering it. You could use position: fixed and center using left: 50%; transform: translateX(-50%);in CSS, which would be less demanding of the client computer.
Using JS, though, it'd be pretty much the same thing: the image would need to be fixedly positioned and you'd define left as half of the viewport minus half of your image width.
I suggest using CSS and classes if possible, since this is less convoluted and all calculations will be dealt be the browser itself.

Progress- percentage bar for webpage

I am trying to make a loading bar but with percentage. I mean imagine when it’s 50% it will show that number also it will fill until half. If it’s 75% it will go up until 3/4.
I am trying to do this with HTML,CSS and JS. So far I made up everything but at the same time number will increase (by clicking button) and pattern will fill up according to percentage? This part is challenging me.
Can you lead me way if it’s possible? Or even if there is example so I can learn?
UPDATE CODE BELOW
<script>
var i = 0;
function buttonClick5() {
i += 5;
document.getElementById('demo').innerHTML = i + "€";
}
function percentage(per) {
return (100 / 100) * per;
}
</script>
<div class="textContainer">
<p class="perc" id="here"></p>
<script>
document.getElementById('here').textContent = percentage(10) + "%";
</script>
<h2 id="demo">0€</h2>
</div>
and css part
.textContainer {
margin-top:-10%;
margin-left: 30%;
height: auto;
text-align: center;
}
.textContainer h2 {
margin-left: -40%;
font-size: 500px;
color: rgba(225, 225, 225, .1);
background-image: url(color3.jpg);
background-repeat:repeat;
-webkit-background-clip: text;
animation: animateMid 15s linear infinite;
}
#keyframes animateMid {
0% {
background-position: left 0px top 0px;
}
1% {
background-position: left 1200px top 0px;
}
}
basically with those I can just make pattern moving as background of the percentage but always at 100 per cent.
Use your percentage variable as a width of the div that shows progress. Add click even listener to your button that will update that percentage variable and width of the div. If you make a callback function that updates both at the same it would be easy for you. Share your code here so we can help further.

Use percentage with background position

I have an image like you can see below and I want to set the Images Background position for different percentage values (0%, 25%, 50%, ...).
---> Like for example I want to call a function with myfunction(50%) and the Images-background should move about 50% to the left.
Please have a look at my code:
function call(value) {
document.getElementById("img").style.backgroundPositionX = -value + "px"
}
#img {
position: fixed;
left: 0%;
width: 100%;
height: 20%;
top: 0%;
background:url("https://i.stack.imgur.com/fTyE3.png") no-repeat;
background-size:cover;
}
<div id="img"><br></div>
<br><br><br>
<input type="text" oninput="call(this.value)"/>
My idea was to set the to a percent value (in this case "50%")
elem.backgroundPositionX = "50%"
...but is doesn't seems working this way!
I have no clue how to fix this problem. I don't want to use px-values. I want to set the position in percentage.
Any help would be very appreciated. Thanks in advance.
You can do some calculation in order to convert the % value to pixel if you want to consider the % relative to width of the container (or the width of the initial image or any other value).
You can try this:
function call(value) {
var w = document.getElementById("img").offsetWidth;
var v = (value * w)/100
document.getElementById("img").style.backgroundPositionX = -v + "px";
}
#img {
width: 400px;
height: 50px;
background: url("https://i.stack.imgur.com/fTyE3.png") no-repeat;
background-size: cover;
}
input {
margin-top:50px;
}
<div id="img"></div>
<input type="text" oninput="call(this.value)" >
As a side note, percentage value with background position doesn't work like pixel value. 0% means the element is placed on the left (left edge of the image is placed on the left edge of container) and 100% means that the element is on the right (the right edge of the image is placed on the right edge of container). Since you are using cover with background size, you should increase value in order to move the image to the left so you have to consider positive value if you want to use percentage.
Check below to see behavior of px vs %:
#img {
width: 400px;
height: 50px;
background: url("https://i.stack.imgur.com/fTyE3.png") no-repeat;
background-size: cover;
animation:anime 5s alternate infinite linear;
}
#img1 {
margin-top:20px;
width: 400px;
height: 50px;
background: url("https://i.stack.imgur.com/fTyE3.png") no-repeat;
background-size: cover;
animation:anime 5s alternate infinite linear;
}
#keyframes anime {
from {
background-position-x:0%
}
to {
background-position-x:100%
}
}
#keyframes anime1 {
from {
background-position-x:0px
}
to {
background-position-x:-400px
}
}
<div id="img"></div>
<div id="img1"></div>
Related question to get more details: Using percentage values with background-position on a linear gradient

Create circle that is proportionately sized to window

I am attempting to create a circle with a height of 10% the browser window. If I also make the width 10%, and you scale the browser, you get a misshapen or squished circle. I want to try to create the width of the circle with jquery to change in proportion with the height. so if 10% converts to 200px height, the width would be changed to 200px. I have tried a few solutions, but keep getting a width of 0px in return.
assuming you are using jQuery and your circle is an HTML element you could do this:
var $window = $(window),
$el = $('#someElement');
$window.on('resize', function () {
var size = $window.height() * 0.1;
$el.width(size).height(size);
});
Get the width and the height of the window and then simply check which one of them is the smallest. Get 10% of that value and use this as the circle's radius.
Little experiment using a transparent square image which is the direct child of <body>:
http://jsfiddle.net/2S3xU/3/
<html><body><img src="transparent-square.gif">
img {
border-radius: 99999px;
position: absolute;
top: 0; left: 0;
height: 100%; /* width will follow height to keep image undistorted*/
max-width: 100%;
max-height: 10%;
}​
/* Opera fix*/
body, html {
width: 100%;
height: 100%;
}

How can I create Javascript Buttons with Themes?

I have a button which is attached to a js action. It currently uses <a onMouseUp="..."><img.... The problem is that I want the buttons to be able to change the images depending on the theme (i.e. css file). Since the image is specified in the html itself, this doesnt work. Does anyone know how to implement this?
Instead of having the image in the HTML, you should assign it as a background on the anchor element, as defined in a stylesheet.
a.example {
display:inline-block;
height:20px;
width:20px;
background-image:url(/images/buttonExample.png)
}
That's an easy one (assumed I understood your question):
a) Create your images for the states you want:
a.1 - standard display;
a.2 - mouse over; (hover)
a.3 - mouse down; (active)
b) Define the many different buttons in your css:
b.1 - themeCities
.tcButton { width:100px; height:24px;
background-image: transparent url(theurl) no-repeat top left; }
.tcButton:hover {
background-image: transparent url(thehoverurl) no-repeat top lef; }
.tcButton:active {
background-image: transparent url(theactiveurl) no-repeat top left; }
b.2 - themeNature
.tnButton { width:100px; height:24px;
background-image: transparent url(theurl) no-repeat top left; }
.tnButton:hover {
background-image: transparent url(thehoverurl) no-repeat top lef; }
.tnButton:active {
background-image: transparent url(theactiveurl) no-repeat top left; }
and so fourth.
You should consider sprites otherwise you are going to end up with an unmanageable amount of images. Another consideration is on the size of the buttons: width and height.
I can help on sprites, ... if needed. There are free websites that manage that for you. I am a control freak and use Adobe Fireworks for all my sprites needs as far as creating the sprite images.
Then, still with the images or sprites in mind, you might want to use a css-ninja suggestion on how to accelerate the images pre-loading:
.body:after {
content: url(image-url-1) url(image-url-2) url(image-url-n);
display:none;
}
Trick on creating sprites:
a) make sure background is transparent and save them either as gif or png32;
b) make sure they are the same sizes for the three states otherwise you are going to have jittery displays;
c) once all the images are done, assemble them in a large transparent background image;
d) space them in that new large transparent image; aligning them top and left;
e) give some space between each image. Some suggest 50 pixels between images side-by-side and top-down. I don't follow that. I just give some space between them.
f) the most difficult task in hard coding sprites: write down it's coordinates in the large transparent image: top, left, width, height.
To use a sprite image you go like this (as one of many variations):
.msSprites { background: transparent url(url-of-the-sprite-image.gif) no-repeat;
top left; } /* msSprites = my site sprites */
.tcButton { background-position: 0 0; width:100px; height: 24px; }
.tcButtonHover { background-position: 0 -150px; width:100px; height: 24px; }
/* margin-left at 0px; margin-top:150px ... in the large transparent image */
.tcButtonActive { background-positon: 0 -300px; width:100px; height: 24px; }
/* margin-left at 0px; margin-top:150px ... in the large transparent image */
.tnButton { background-position: -150px 0; width:100px; height:24px; }
/* margin-left at 150px; margin-top at 0 px .. in the large transparent image */
... and so fourth
Application:
Regular images:
<button class='tcButton' onClick ....>This is fun</button>
Sprites:
<button class='msSprites tcButton' onClick ...>This is even more fun</button>
The sprite, in this case, is formed of the big transparent image and the location of the button you want to use.
I hope I have really confused the heck out of you .... or opened your thinking cap wide open.
Good luck!
If you are using jQuery you could change the image tags source attribute.
<img src="oldImageSrc.jpg" />
Then in the javascript method:
function changeButton() {
$("img", this).attr("src", "newImageSrc.jpg");
}

Categories