Growing List Items as Graph - javascript

I have a list which list items grow dynamically with JavaScript until 100%. This works.
But I want it to look something like this
So my problem here is. How can I make them grow to the top. I tried with height, but then they grew to the bottom. Also rotating them with CSS doesn’t really work, because the more list items are added the more the list moves to the bottom…
Does anyone have any idea?
Thank you!!

Use absolute positioning for the li-elements. Example:
http://jsfiddle.net/J5pB7/
ul{
height:300px;
border:1px solid #666;
position:relative;
}
li{
display:inline-block;
width:20px;
position:absolute;
bottom:0px;
background-color:green;
}
#a{
height:50%;
margin-left:30px;
}
#b{
margin-left:80px;
height:10%;
}
#c{
margin-left:130px;
height:90%
}

Related

How to make grid of divs ignore eachother

So I have a grid of divs that I am removing with jquery's remove function. When one div is removed, the rest move. Is there a way to keep the grid's shape, and have the divs stay in place upon removal? Thanks.
LINK - https://jsfiddle.net/n4y6sfg6/7/
.boards{
height:630px;
width:630px;
background-color:orange;
border-radius:5px;
left:50%;
margin-left:-315px;
position:relative;
}
.row{
width:100%;
height:157.5px;
}
.cards{
width:120px;
height:125px;
display:inline-block;
margin:16px;
border-radius: 5px;
background-color:grey;
vertical-align:top;
}
Don't remove them, instead set visibility: hidden;
https://jsfiddle.net/n4y6sfg6/14/
Don't remove div.You can add a class to the div that you want to hide.For example
<div class="cards remove-card"></div>
then style the class like
.remove-card{
visibility:hidden;
}
If you want to continue to use jQuery, you could use the opacity function.
$("#element").opacity(0);
This will leave the element exactly where it is, but invisible.

How can I smoothly transition in a div on hover? [Tumblr Updates Tab]

I am sure this has been answered before, but I am not sure where to look for it, nor how to really word the question. But basically, I am creating an updates tab for a tumblr theme and I'm curious as to how make a div smoothly transition in while hovering over a parent div, if that makes sense.
Essentially I would like the div to transition in smoothly when I hover over the tab like it does when I click on a tab in my updates tab in my blog. However this tab was created using a tutorial that used a jquery code to create the smooth opening effect, and I don't know anything about jquery or javascript on my own.
I have the general idea of how to make a div show only when you hover over the parent element by using display:none and display:block... but it doesn't transition in smoothly, and as I've read there is no way to do so with CSS.
I have tried playing with height and opacity as well, but while it was a bit smoother, it was a rather messy transition with dealing with text and borders of the div I'm trying to show and hide.
Basically what I am asking is how I can create the same effect in my blog's updates tab that opens and closes when clicking on the tab, but using hover rather than click. I would love for the div to show when I'm hovered over the tab, as well as when my mouse is within the containing div, but close once my mouse leaves the tab. Sorry if that sounds confusing.
Here is the CSS:
#tab{
margin:auto;
}
.tab{
margin-top:0px;
margin-bottom:2px;
margin-left:-5px;
margin-right:-5px;
padding:7px;
border:1px solid #000000;
text-align:center;
}
#tab:hover .contents{
display:block;
}
.contents{
display:none;
margin-top:3px;
margin-bottom:3px;
margin-left:10px;
margin-right:10px;
padding:5px;
border:1px solid #000000;
text-align:center;
font-size:11px;
}
Here is the HTML for that CSS:
<div id="tab">
<div class="tab">Tab</div>
<div class="contents">
Tab Contents.
</div>
</div>
Jquery/ or javascript? From the tutorial from my blog's updates tab:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".inside").hide();
$(".label").click(function(){
$(this).next(".inside").slideToggle('slow');
});
});
</script>
You can use CSS3 transition-property to add 'smooth' effect. The only 'problem' with that , it doesnt work on IE9 and earlier versions. You can see example of that: here
You can probably do it like this. Use opacity instead for the display and transition. I added some pointer-event and make it none so once it is hidden, by the opacity, you can't interact it, which act like display: none.
#tab{
margin:auto;
}
.tab{
margin-top:0px;
margin-bottom:2px;
margin-left:-5px;
margin-right:-5px;
padding:7px;
border:1px solid #000000;
text-align:center;
}
#tab:hover .contents{
opacity: 1.0
}
.contents{
opacity: 0.0;
margin-top:3px;
margin-bottom:3px;
margin-left:10px;
margin-right:10px;
padding:5px;
border:1px solid #000000;
text-align:center;
font-size:11px;
transition: opacity 100ms ease-in-out;
pointer-events: none;
}
As an alternative, if the CSS3 transition does not work, you can try this:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".inside").hide();
$(".label").click(function(){
$(this).next(".inside").slideToggle('slow');
});
$(document).on("hover", ".label", function(){
$(this).next(".inside").slideToggle('slow');
});
});
</script>

Horizontal scrolling with sticky div elements

Im trying to do a horizontal navigation with some fixed/sticky elements.
When the user scroll the page, some divs have to remain stuck on the left edge.
Here a fiddle of what i want to do :
http://jsfiddle.net/rQUeL/
css
.container>div {
display:block;
float:left;
}
.container {
height:100%; display:block; background:grey; float:left; width:2000px;
}
.cover{
width:25%; height:100%; background:blue; }
.menu{
width:90px; height:90px; background:green; margin-left:100px; }
.menu.fixed{
}
.cover.fixed{
}
.content{
width:500px; height:100px; background:red; }
<div class="container">
<div class="cover" >
<div class="menu">Menu</div>
</div>
<div class="content">content</div>
When the green square reach the left edge, the green and the blue elements have to be fixed , and the red content go below.
I believe it can be do jQuery...
Thank you for your help.
Sebastien
You basically change the class when the scroll length is above a certain number (in this case margin-left from .menu)
$(window).scroll(function () {
var sl = $(this).scrollLeft();
if (sl > 100) { // 100 is margin-left from .menu
$('.menu').addClass('fixed');
$('.cover').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
$('.cover').removeClass('fixed');
}
});
PS: I have no idea what you want with the red element
FIDDLE
I had the same issue and couldn't find any solutions using CSS alone. so I made jQuery plugin that solves this issue. You can find it here.
Well, I had a great gif here demonstrating what it does but SO doesn't support it. You'll have to click this to see it.
Now, before you yell at me, let me yell at you first. This is a BYOCSS. So if you're looking for something that will take care of the CSS for you, keep looking. All you have to do is style the header element in an absolute position.
This plugin is still in development and needs some improvements. It's kinda jittery when you scroll. You can ease the jittering with a CSS3 transition: 90ms;
This is just a starting point, if you would like to contribute to it, fork it and see what you can do.

jQuery Draggable jumps down when dragging?

I am trying to make a draggable window. The draggable window jumps down A LOT when I try to drag it. Any ideas why?
http://jsfiddle.net/t4yN3/
$("#draggable").draggable();
CSS
#draggable {
width:450px;
height:300px;
overflow:scroll;
position:absolute;
padding-top:8px;
background:#333;
border:2px solid purple;
z-index:9999999;
color: white;
}
Really weird. Scroll down and try to drag it.
ANSWERED. READ COMMENT

Fluid resizable image with infinite horizontal scroll (REV. 2)

I have coded a site with a simple horizontal "nowrap" css with img floated side by side. I have also hide the scrollbar away. The side scroll can be done by normal vertical mousewheel scrolling (see my project url
Because the images is all in big resolution of 1400x850px, i wanted to create a site that that will scale the images according to the browser size. Currently all the images are in max-width:100%, my aim is to scale them below that percentage when the browser is smaller.
I tried using max-width:100% with both width and height in auto. It not working.
I try using jquery fluid images script, they are not working as well due to "nowrap"
Below are the main code i am using:
#content {
width:5600px;
overflow-x: auto;
white-space: nowrap;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#portfolio img {
float:left;
display:inline;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
This is the link of my project: http://credencepartners.com/demo02/
This is the result i trying to produce (for example please see the comments): http://credencepartners.com/demo02/interface/scene01.jpg
Do i need to implement javascript on this or CSS is possible for this scenario?
UPDATES / 10th Aug 2012
Thanks to Corey for the heads up, i have updated my demo02 link. The problem now is just adding the texts below the images. I tried using a div class to combine the text and images together, the result causes the images to be be non-fluid again. Now i need help making a fluid and re-sizable div tag.
GOALS
Knowing that building a typical horizontal side scrolling website is quite straight forward. The main problem i have is only the fluid resizable images at the top. I am pretty new that fluid/responsive layout and hope the gurus here can enlighten me :)
Use this CSS:
body, html {
width:100%;
min-height:100%;
height:auto !important;
}
#content {
width:100%;
height:100%;
position:relative;
}
#portfolio {
width:100%;
height:100%;
position:relative;
}
#portfolio ul{
width:100%;
height:100%;
display:block;
white-space:nowrap;
overflow:auto;
list-style:none;
padding:0;
margin:0;
text-align:center; /*in case not enough images to create a scroll*/
}
#portfolio img{
width:auto;
height:100%;
display:inline-block;
position:relative;
}
And lay out your html like this:
<div id="content">
<div id="portfolio">
<ul>
<img src="src.jpg" />
<img src="src.jpg" />
<img src="src.jpg" />
</ul>
</div>
</div>
I tried a little and found out:
You need to remove the height and width-Tag from the images
You set the height of the "portfolio"-div to the window-height using jQuery/JavaScript
That must be all, hope I understood what you meant

Categories

Resources