I want to plot a horizontal bar graph behind a time series with Highstocks/Highcharts, similar to how volume is shown versus price in blue here. Having done some digging, I don't believe this is possible with Highcharts, as a bar graph basically inverts the x- and y-axes, and so I couldn't have time as an x-axis running along the bottom and price as an x-axis running vertically. Am I right about this?
There is no built in option to achieve this.
You could potentially dummy the bar series by using the polygon series type.
I have achieved this in the past by creating two charts, with their containing divs positioned so that they appear as if they are the same chart.
HTML:
<section id="wrapper">
<div id="line-chart"></div>
<div id="bar-chart"></div>
</section>
CSS:
#wrapper {
position:relative;
margin:1em auto;
padding:0;
width:900px;
}
#line-chart {
margin:0;
padding:0;
height:400px;
}
#bar-chart {
position:absolute;
top:0;
right:0;
width:200px;
height:400px;
margin:0;
padding:0;
}
Working Example:
http://jsfiddle.net/jlbriggs/r2Lvo2dw/
(this example automatically builds a histogram out of the line data provided)
Related
Okay so I have these divs called "latestWorkTitle" which are positioned absolute and are placed on top of the corresponding image to show its title.
However, I can't get this properly to work. The titles don't show at the corresponding image and when I resize my browser window everything shifts and so on.
I tried creating this jsbin http://jsbin.com/uhoxef/1 with a part of my code to illustrate how it should look like and what is going wrong. Even all the titles go on top of each other in the code while they should be on top of the corresponding images... I'm just basically totally lost at this.
I think the HTML was confusing itself. I also made the thumbnail class the relative layer. HTML renders as we read, from left to right. So putting the title before the image causes the image to show on top and cover the text.
HTML:
<div class="thumbnail">
<a href="portfoliodetail.php?id=10">
<img src="http://www.hlnarchitects.com/img/plain_red.png" />
<div class="latestWorkTitle">title1</div>
</a>
</div>
CSS:
.thumbnail {
position: relative;
overflow: hidden;
float: left;}
.portfolioOverview img {
width: auto;
height: auto;}
.latestWorkTitle {
text-align: right;
font-size: 11px;
text-transform: uppercase;
background: yellow;
position: absolute;
padding: 6px;
top: 0;
left: 0;}
For this to work, each thumbnail class needs to be the relative start for each individual layer. So the thumbnail class is set to relative.
Any object set to absolute (.latestWorkTitle) within this layer will start from the top and left position of the relative object.
You'll need to adjust some details to taste but I hope this helps.
ULTIMATE GOAL: Make a formed transparency where images can show through but are shaped by the form itself. The images are rollover buttons and turn from grayscale to color with hover
So the picture below (link) shows what I want to happen in Dreamweaver CS6. I used PS to create this image. I simply took the "person portion" and deleted it so the picture turned out as a white box with a transparent inside. My plan was to simply plant this image into DW and then place the rest of the color images beneath it by placement of the IMG tag.
I figured it would turn out like what you see below but it has not. I simply get a full white page (tested offline, not uploaded to the server). If I add a picture, there is no hint that the PNG with the transparency is even existent.
So now, what would be your suggestions? Would it be easier to just use FW and make slices of the work as seen below? In that case I would just have to match all the pieces of the body up like Tetris when working in DW. It just seems there is a MUCH easier way of doing this and somehow I am making it extremely hard.
Please ask if you need further information. Thank you so much.
http://i1195.photobucket.com/albums/aa400/SteffaneTimm/MeFirstSuccess_zps146c6716.jpg
You could save the outline as a .PNG with alpha transparency as you have. To get the seperate images with the rollover effect you could try something like the below. (not using any canvas trickery). Create an image thats double the height of the strip you want, put the black and white version in the top half, and the colour version of the same image in the bottom half.
If you are having difficulty seeing the white outline you could try setting the page background to black temporarily.
To double check you have linked to your image files correctly you could also try pressing f12 in chrome and looking at the Resources tab in Frames > Images.
.container {
width: 500px; height: 800px;
}
.image-strip {
height: 200px; width: 500px; float: left;
overflow: hidden;
}
.image-strip img:hover {
margin-top: -200px;
}
.woman-outline {
position: relative; top: 0px; left: 0px;
height: 800px; width: 500px;
background: url('woman.png') no-repeat;
z-index: 1000;
}
<div id="container">
<div class="image-strip"><img src="1.jpg" /></div>
<div class="image-strip"><img src="2.jpg" /></div>
<div class="image-strip"><img src="3.jpg" /></div>
<div class="image-strip"><img src="4.jpg" /></div>
<div id="woman-outline"></div>
</div>
is there a way to alter a background when you rollover a link? im making a degree show website and want a large sample image to appear in the background when you rollover the link of persons name. i have an image appearing, however its covering all the text and in a fixed position over the link. is there a way to do this so it just alters the background image and stays behind all the other text on the page?
heres what im working with
#hover_img img
{
display:none;
}
#hover_img:hover img
{
display:block;
position:absolute;
top:0px;
padding-top:0px;
}
html
<div id="hover_img">LINK<img src="image" alt="" /></a></div>
thanks!
** fiddle http://jsfiddle.net/5yhsL/ **
Add z-index: -1 to the image on hover:
#hover_img:hover img
{
display:block;
position:absolute;
top:0px;
padding-top:0px;
z-index: -1;
}
You can accomplish this by putting the text inside another element adjacent to your image element. Absolutely positioned elements will take dominance over their neighbors, and one way you can get around that is by assigning a value to the position property for subsequent elements.
Here is a jsfiddle I've whipped up:
http://jsfiddle.net/93mpW/3/
I've this situation: http://jsfiddle.net/neko/CTA4C/7/ (images are just for reference)
HTML:
<div id="container">
<div id="lady">
<img src="http://a2.twimg.com/profile_images/1120515410/ladybird__1__normal.jpg">Click me!</img>
</div>
<div id="containerbg"><img id="BG" src="http://www.bigpicture.in/wp-content/uploads/2011/01/LandscapePhotographsOfBeautifulRoads4_004.jpg"></img></div>
</div>
jQuery:
$("#lady").click(function(){
$(this).addClass("animlady");
});
CSS:
#-webkit-keyframes ladymove{
0% {-webkit-transform: translate(0px, 0px);}
50% {-webkit-transform: translate(100px, 40px);}
100% {-webkit-transform: translate(300px, -20px);}
}
#BG{position:absolute}
#lady{
position: absolute;
float:left;
top:240px;
margin-left: 250px;
z-index:2;
color:white
}
.animlady{
-webkit-animation-name: ladymove;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: forwards
}
In short, I've an <img> inside a div as a background fixed in page, inside it (the div) another div with an <img> that moves around triggered by JQ.
So the question is: how can I scale the WHOLE page/div container so the img fits the screen height, maintaining the relation with the moving div, which has a fixed start position value in px?
I've tried something like -webkit-transform: scaleY() but it's just a scaler, right? It's not working like -webkit-transform: scaleY(100%) ?
My final goal is to have a fixed pixel "canvas" that stretches itself by fitting the height of the device and, at the same time, to have the children acting like the father.
p.s.
this is just for tablet webkit based, so I've no problem with using webkit only dedicated code.
I think I have a reasonable understanding of how css sprites work, but I am baffled by how JQ Mobile is doing it. As a sample I put together a really basic version:
<style>
#id {
display: block-inline;
width: 16px;
height: 16px;
background-image: url("http://code.jquery.com/mobile/1.0b1/images/icons-18-white.png");
background-position: -576px 50%;
background-color: rgba(0,0,0,0.4);
}
</style>
<div style="border: 1 solid black; padding: 5px">
<span id="id"> </span>
</div>
Which is a stripped down of how jqm is doing it. What I don't get is that if you load that png file into an image editor it is completely white, and I can't see any of the images in there. I am also completely confused as to why the y for background position is 50%.
Can anyone help me understand?
The sprite you're talking about has many white icons on a transparent background. If you use lightweight free tool like IrfanView, you'd see it like this:
background-position: -576px 50%; means the background would be placed at the position of -576 from left and 50% from top, which I think is where the home icon is. Although perhaps the 50% bit won't matter in this case as the height is set to 16px but maybe it matters for some other weird mobile browsers.