How do I create a progress "bar" similar to Grooveshark? - javascript

I'm curious... how would I go about creating a custom progress bar like the one Grooveshark used to have? If you look at the image below, the progress bar is an image in the shape of a shark and fills in as the page loads.
I think this is very cool and would love to know how it is done. Can this be done programmatically, or is it done in flash? I would really like to do this in JavaScript (jQuery) if it is possible. Where/How do I start?
Thanks,
Hristo

The portion of the image containing the shark could be a PNG with the shark shape cut out. Placing an element just beneath this (via z-index), and animating the width of it it will give the impression of the shark filling in.
I managed to accomplish something similar using nothing more than an image, and animating its background image: http://jsbin.com/imibe3
HTML
<img src="http://sampsonresume.com/labs/emptyfish.png" class="fish" />
CSS
img.fish {
background-color:#f1f1f1;
background-image:url(water_640x480.jpg);
background-position:-580px 0;
background-repeat:no-repeat;
}
jQuery/Javascript
$("img.fish").animate( { 'backgroundPosition':'+=600px 0' }, 10000);​

Related

how to put numbers next to pictures in css

So i'm currently making a simple strategy game in html using css and javascript too. I'm very new to this so this might seem obvious and simple to you all but i'm very confused.
So i have my picture, it's a little pixel battleship i made. I want to have a number show next to that ship to tell how many i have. How do i do that? I assume you have to use css for that right? In the end there are going to be 6 ship types.
Thanks in advance,
Lucas
You can put the image in a container with position set to relative. Then put some text inside some tag and position it absoutely
for example
<div style="position:relative">
<img src="your image here">
<p style=""position:absolute; right: 0"></p>
</div>
Use float property of CSS to display text next to an image.
This link might help https://www.w3schools.com/css/css_float.asp

Show only half of the image or crop it diagonally with Javascript and HTML

i want to build a mobile tool in phonegap with Javascript to show people how their shower flagging will look like. The user should take a picture with the camera to show it in the app. To understand what i´m talking about take a look at this:
These 3 images should fit together. It works perfectly if i use the fitted images with transparent background. The problem is, if i take a picture with the camera of the device it will be a square picture.
So it will look like this:
My HTML Code for the images:
<div id="Images">
<div id="wand"><img id="imageTop" src="images/top.png"> </div>
<div id="boden"><img id="imageMid" src="images/mid.png"> </div>
<div id="rinne"><img id="imageBottom" src="images/bottom.png"> </div>
</div>
In my js code i just set the new image as src of e.g imageTop like that:
var image = document.getElementById('imageTop');
image.src = "data:image/jpeg;base64," + imageData;
Now of course i can set the z-index of image 2 and 3 lower than the 1. image, so a taken picture for imageTop will work, because it is in the background. The problem is, it shall be possible to take 2 pictures, for image 1 and for image 2, so i have two new "half" images in my app. Just image 3 remains the same. Can i crop the image diagonally with javascript or make it transparent, so it will fit?
I hope you understand my problem. Please help me i don´t know how i can do this :/

onclick png background color change

I need to design a part of webpage like below the image. In the left side, there is color options. If the user pick any color from the left side and click on the image part, the part of the image should get filled by the picked color. I spent more time to google search. Most of the sites used flash only. But i do not know flash very well. Is it possible to achieve using jquery plugin?
You'll probably want to look into the <canvas> element. As for filling a particular bit of the image when clicked, you may want the floodfill algorithm.
Really this can be done simply, if you have strict control over what png files you use.
For example, you can make the png fully opaque with the exception of the area you want to colour.
Then you can load the image and just set the background colour of the element you are using when a colour is clicked.
Something like this:
$(".ColorOption").click(function(e){
e.preventDefault();
var color = $(this).data("color");
$("#MainImageBackground").css("background-color", color);
});
assuming you set up your colour options using the data attribute like so:
<a data-color="#F00"></a>
with your image something like:
<div id="MainImageBackground">
<img src="whatever"/>
</div>
You can solve this with Javascript, but therefore you need for every color a own image.
<script language="JavaScript" type="text/javascript">
function changePic(picColor)
{
if(picName == "btnRed")
{
document.getElementById(mainPic).src = "mainPicRed.jpg"
}
else if(picName == "btnYellow")
{
document.getElementById(mainPic).src = "mainPicYellow.jpg"
}
}
</script>
HTML for every color button:
<img src="red.jpg" name="btnRed" id="btnRed" onClick="changePic(this.name)">
<img src="mainPic.jpg" name="mainPic" id="mainPic">
Idea 1:
User the canvas element and look at fill methods, this is probably going to be more complex than flash.
Idea 2:
Create transparent PNG where the colourd area is the only part that is transparent.
Create 2 DIVS, 1 at z-index 10 and other at 20, same size, same position
Place image in top div which is z-index 20. Then change the colour of the background in div 1 which is at z-index 10.
To accept any png and fill the middle:
You can find information on the floodfill algorithm in javascript here:
http://jsfiddle.net/loktar/ZLw9m/
However your implementation will have to be more advanced as you need to convert the image to a format javascript understands (0's and 1's for example) and then run the algorithm on that
As #musefan pointed out if you can control the PNG's this is much easier

Opacity is making div lighter not transparent

I would like to make the DIV that appears on hover transparent so the image below it shows through slightly, but instead it is only getting lighter. I have another page with similar functionality, where the DIV slides in horizontally instead of from the bottom; this page has successful transparency. For some reason, the code is not translating.
Here's what I have so far: http://jsfiddle.net/tGEZb/
I've tried rgba instead of the code I have here with no luck, and also searched through the posts here but can't find anything that addresses this exact issue..not sure what else to try. I'm sure it's something obvious that is hiding from me from staring at the code for too long but hopefully someone can help.
I would like to avoid using CSS3 if possible and also maintain the smooth functionality of the slider now (rather than having something that toggles).
Disclaimer: I copied and pasted the JavaScript from a post I found online - unfortunately that is the extent of my JS abilities.
Thanks in advance for any help.
You're hiding the image by setting its parent's height to 0. There is nothing for the div to see-through to, so the white background make's it lighter.
Try moving the bottom div instead. http://jsfiddle.net/tGEZb/6/
$(document).ready(function(){
$('.espot-up-down').mouseover(function(){
$('.espot-slide-onhover').stop().animate({
top: -230
}, 150);
}).mouseout(function(){
$('.espot-slide-onhover').stop().animate({
top: 0
}, 250)
})
});​
.espot-up-down needs position: relative;

Content box on image hover?

I have a bunch of images in a gallery on a new website im building and Im wanting to have content displayed when a user hovers over an image.
For example if a user hovered over a picture of a car in my gallery then a low opacity content div would fade over the entire image to show text and maybe a link.
I presume this effect could be done with a bit of JS or even CSS Transitions to give the fade.
I just need to know how to make a content box appear over the image on hover, possibly at 80% opacity.
Heres an example of what I have in mind:
Thanks for the help, if anyone could point me in the right direction it would be appreciated.
I can post more information if needed.
This is somewhat simple way of implementing a hover show and hide with jquery.
Working example: http://jsfiddle.net/va2B8/2/
jQuery ( http://jquery.com/ ):
$(document).ready(function() {
$("#Invisible").hide()
$("#hoverElement").hover(
function () {
$('#Invisible').stop().fadeTo("slow", 0.33);
},
function () {
$('#Invisible').stop().fadeOut("slow");
}
);
});
html:
<p id="hoverElement">This little piggy will show the invisible div.</p>
<div id="Invisible">This is the content of invisible div.</div>
css:
#Invisible { background: #222; color: #fff; }
Edit: I changed url for the working example cause i forgot to fade out on mouse out.
Edit2: Changed url again and changed the code cause i had some extra code there.. plus i thought that i might as well add those two .stop() in there so that it stops the animation If the mouse over or mouse out occurs while animation is going on.
( Without the stops one could hover in and out several times and then when he would stop, the animation would still keep going till it has done each animation as many times as he triggered it. You can test that in here http://jsfiddle.net/va2B8/1/ )
You can start using this fiddle :
http://jsfiddle.net/Christophe/2RN6E/3/
1 div containing image and span like :
<div class="image-hover">
<img src="" />
<span class="desc">text to be displayed when imae hover</span>
</div>
Update
All can be done with CSS...
http://jsfiddle.net/Christophe/2RN6E/4/
Here's an easy jQuery plugin you can implement: http://file.urin.take-uma.net/jquery.balloon.js-Demo.html
It works like this:
$(function() {
$('img').balloon(options);
});
This jQuery applied the balloon function to all images on the page. Here's your HTML:
<img src="example.png" alt="Here's your caption." />
The text in the balloon is going to be whatever is in the alt attribute for images and whatever is in the title attribute for other tags.
I've just done this:
http://twostepmedia.co.uk
It uses hoverintent jquery plugin so there is a delay of 250ms after the user hovers over to avoid erratic hover behaviour.

Categories