I'm using highchart graphs to display time and event of specific person. But I don't understand which graph to use.
Following image is the example. I want to do the same.
This is a simple example which only uses css and html. It is very limited but functions (fixed width tool tips etc). You could easily make it more flexible, it is just to show it is possible.
<div class="list">
<div class="period">...</div>
<div class="period">15/5
<span class="tool-tip">info</span>
</div>
<div class="period">16/5/2015
<span class="tool-tip">info 2</span>
</div>
<div class="period">17/5
<span class="tool-tip">fixed width</span>
</div>
<div class="period">18/5</div>
<div class="arrow-right"></div>
</div>
.period{
float:left;
position:relative;
display:inline-block;
...
}
.tool-tip{
height:35px;
line-height: 25px;
position: absolute;
...
}
Main thing to be aware of is that each section is an inline box, then the tool tip is located relative to it.
Related
I am new in UI or web development .I am trying to make simple simple pages .So I take http://ionicframework.com/getting-started/ page .And trying to make same as in my demo application .I make little bit same as site.but i am facing one issue .On header there is search bar (input field in front of this text "Questions? Head over to our Community Forum to chat with others using the framework.").I need to make search field in front of given text .I already use text-align :right;
here is my code
http://jsfiddle.net/oLws3fsk/1/
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<div>
<div class="header">
<ul class="navbar">
<li>product</li>
<li>Getting Started</li>
<li>docs</li>
<li>showcase</li>
<li>forum</li>
<li>Blog</li>
</ul>
</div>
<div class="container">
<h1>Getting Started with Ionic</h1>
<p>Build mobile apps faster with the web technologies you know and love</p>
<div class="smallheader">
<div class="col-sm-8 news-col">Questions? Head over to our Community Forum to chat with others using the framework.
<div class="search-bar" style="visibility: visible;">
<span class="search-icon ionic"><i class="ion-ios7-search-strong"></i></span>
<input type="search" id="search-input" value="Search">
</div>
</div>
</div>
</div>
</div>
Divs are block-level elements and so are presented on a new line unless you tell them otherwise.
You could use display:inline-block to present the searchbox inline (ie, next to the text):
.smallheader .search-bar {
display:inline-block;/* display inline so it remains in the flow */
border :1px solid green;
}
http://jsfiddle.net/oLws3fsk/2
or float the search box to the right:
.smallheader .search-bar {
float:right;/* float to the right */
border :1px solid green;
}
.smallheader:after {/* clear the float so that the parent does not collapse */
content: "";
display: table;
clear: both;
}
http://jsfiddle.net/oLws3fsk/3/
These are not the only solutions. You could use absolute positioning, table-layout or flexbox instead.
Is it possible to create this page layout with css alone? if so what is the best way to go about it? floating puts all block level elements aligned to the last page break along the top, display:inline-block just aligns up along the bottom. Neither create the alineation model from the image below.
I know I could position them manually but the divs are filled with content from a data base so they will need to adjust automatically and align this way independently of their size. I thought about calculating all their heights with javascript and positioning them dynamically this way, but I've got this feeling that there might be a simple way of doing this that I'm totally overlooking. any ideas?
I guess you are looking for a layout similar to Pinterest, so the first Google search returned this example. There are a lot of other results, so I am sure one should fit your needs if you search yourself.
Have 3 columns, and fill the blocks in them,
Something like this,
Skeleton:
<div class="column-container">
<div class="column-1">
<div class="block">...</div>
<div class="block">...</div>
</div>
<div class="column-2">
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
</div>
<div class="column-3">
<div class="block">...</div>
<div class="block">...</div>
<div class="block">...</div>
</div>
</div>
css:
.column-1, .column-2, .column-3{
float:left;
width:200px;
height:auto;
}
.block{
display:block;
width:180px;
}
And the blocks you add to each column will go sit below one another. Simple.
Updated response:
Flexbox almost does what you want (as does something like I posted below) but if you're ordering must be left-to-right and it must tight-fit vertically as in your mock - perhaps consdier something like http://masonry.desandro.com/?
Original response:
Maybe try something like this?
.container {
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 3;
column-gap: 15px;
column-fill: auto;
}
.container div {
display: inline-block;
width: 200px;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
margin-bottom: 10px;
}
Here: http://jsfiddle.net/bvaughn/rrpg58yy/
Bootsrap is the one I recommend, u simply add the reference to your file (or project) and then it's really easy to design the layout that you want, after you implement Bootstrap, your code will look like this:
<div class="container">
<div class="col-lg-3">
<div class="row">
<div>some data 1</div>
</div>
<div class="row">
<div>some data 2</div>
</div>
<div class="row">
<div>some data 3</div>
</div>
</div>
<div class="col-lg-3">....
Fiddle
Make sure you resize your page, since bootstrap stacks all the divs together for smaller (mobile) screens
I'm wondering how to achieve this in CSS (and less and jquery is also good :)
I have the slider, but it looks like this:
I want it to look like this:
The fonts is of curse no problem, not making the stuff round and so on, removing border and stuff...
I'm wondering how I can achieve this little pins: in CSS, so it keeps the right dimensions, and squeezes together when the screen-size is different. By the way, thanks a bunch to danielcrisp, for this awesome slider for AngularJS.
Any help is appreciated.
Came up with this solution
http://codepen.io/anon/pen/bkdAs
HTML:
<div class="slider">
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
<div class="pin">
</div>
</div>
CSS:
.slider{
width:500px;
height:20px;
border-bottom:2px solid red;
}
.slider .pin{
height:100%;
width:10%;
float:left;
border-right:2px solid red;
transform: translateY(55%);
box-sizing: border-box;
}
.slider .pin:last-child{
display:none;
}
Might be easier to achieve using some javascript though for appending the divs inside the slider
I think the best solution would be to make 8 elements with position absolute and left 10*n%.
It may be possible to use css pseudo element instead of DOM elements to prevent bloating your HTML.
Edit: it turns out you can't chain css pseudo-elements, you'll have to append real DOM elements to your code.
http://jsfiddle.net/0hea6ody/
<span class="grad grad1"></span>
...
<span class="grad grad9"></span>
I'm using Foundation 4.3.0 for a project, and am trying to set up Orbit in the most basic way. The javascript and CSS seem to be loading correctly, the images are loading, all the extra elements are inserted, etc. But the main <ul> always has a height of 0px. Here's my HTML:
<div class="row">
<section class="large-12 columns">
<div class="slideshow-wrapper">
<div class="preloader"></div>
<ul data-orbit="">
<li><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
<li><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
</ul>
</div>
</section>
</div>
Here's the HTML once foundation.orbit.js does its thing:
<div class="row">
<section class="large-12 columns">
<div class="slideshow-wrapper">
<div class="preloader"></div>
<div class="orbit-container orbit-stack-on-small">
<ul data-orbit="" class="orbit-slides-container" style="margin-left: -100%; width: 400%; height: 0px;">
<li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
<li class="active" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
<li style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
<li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
</ul>
Prev <span></span>
Next <span></span>
<div class="orbit-slide-number">
<span>1</span> of <span>2</span>
</div>
<div class="orbit-timer">
<span></span>
<div class="orbit-progress" style="overflow: hidden; width: 54.15%;"></div>
</div>
</div>
<ol class="orbit-bullets">
<li data-orbit-slide-number="1" class="active"></li>
<li data-orbit-slide-number="2" class=""></li>
</ol>
</div>
</section>
</div>
I have tried to put explicit width + height on the images, put class="active" on one slide when generating the HTML, change various Foundation settings, etc, and nothing seems to work.
When I compare the HTML to the live example in the Foundation docs, I notice that in the working version, a z-index is always set dynamically on the slides. On my site, no z-index is ever set. And of course, the ul in the working version has an inline CSS height which equals the height of the slides.
If I manually set the ul height to 300px, everything looks right, except I see no images. If I set div.orbit-container to overflow: visible, I will see the edge of one of the slides to the left of the container.
Any ideas would be much appreciated.
I'm going to try to avoid being overly verbose here.. but this is what I've found and while I wouldn't call this a complete fix, because i'm not sure what started the differences in css the following code solved the problem.
I found this because I have a local environment as well as a dev environment for the site. The local environment was working great, but the production environment had all the issues you mentioned above.
The first issue of course is the generated container div setting the height to 0px. This is strange enough. I manually added the height to the container in the css. The reason all the images are hiding is they're set to margin-left: 100% or some large left margin and they're all positioned absolutely. I wish I could be more help as to why the code differences are present, maybe I'll find more time to investigate further but for now its working.
Anyway, the following was the fix:
.orbit-container { height:250px; }
.orbit-container .orbit-slides-container > * {
position: relative;
margin-left: 0;
float: left;
height: 100%;
}
.orbit-container { height:auto; }
.orbit-container .orbit-slides-container > * {
position: relative;
margin-left: 0;
float: left;
height: 100%;
}
A little upgrade from a previous solution. With this modification, it will be more easy to show the slideshow on a phone and a desktop.
Are you sure the url to the images are ok?
I had the same problem but with 2 of my 3 images and the problem was in the url
I was having the same problem and I've just found that using individual modules (I'm using compass) instead of using foundation.min.css solves the problem, have you tried to use foundation.css (not minyfied)?
I am creating a tumblr theme and when you hover over a photo post it shows a description (example description shown below).
The designer only wants the first three lines of the description to show and place ellipses after after the description if it overspills 3 lines.
What's the best way of going about this considering that a character count isn't a good enough?
Thanks for the help...
http://brendan-rice.tumblr.com/
Example Photo Post
<div class="description photo" style="background-color: rgb(82, 69, 99);">
<div style="">
<input type="hidden" value="22186233340" class="id">
<span class="title" style="">
<p style="">
staff:
</p>
<blockquote style="">
<p style="">
<strong style="">Attention West Coast:</strong> Check out our official Tumblr meetup in Los Angeles on Tuesday 5/1! RSVP here.
</p>
</blockquote>
<p style="">
(Source: <a title="meetups" href="http://meetups.tumblr.com/post/21804989817/were-gonna-be-in-la-tuesday-night-come-grab-a" style="">meetups</a>)
</p>
</span>
<div class="actions" style="">
<span style="float: left;">
<a target="_blank" href="http://www.tumblr.com/follow/penguinenglishlibrary " class="follow" style="">
Follow </a>
</span>
<span style="float: right;">
<a target="_blank" href="http://www.tumblr.com/reblog/22186233340/Pw5OgVj1" class="reblog" style="">
Reblog </a>
</span>
<span style="float: right;">
<a target="_blank" href="http://www.tumblr.com/reblog/22186233340/Pw5OgVj1" class="like" style="">
Like </a>
</span>
</div>
</div>
</div>
EDIT: just found this: http://dotdotdot.frebsite.nl/ which should solve your issue (jquery plugin)
As far as I know there is no way to make it wrap to three lines and then ellipsis.
If you just want the ellipsis after 1 line, use:
.class{
width:200px;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
However, you can do some tricky css to emulate it, though it won't be perfect 100%. I've attached a jsfiddle with the emulation: http://jsfiddle.net/ET3F8/
Essentially, its wrapping to 3 lines and then becoming hidden. There is an element containing the ellipsis text ("...") which is positioned at the bottom right of the container. It will cover the text and emulate ellipsis.
Issues:
- It will always display. You could perhaps use some JS to hide it if the text is not overflowing.
- It sometimes will break a letter.
Anyway, just an idea!
Just use text-overflow: ellipsis, but you'll need to fix the width of whatever it is you want the content restricting on. Something like:
.myClass
{
width: 200px;
text-overflow: ellipsis;
}
Does this CSS meet your needs?
text-overflow: ellipsis;
You're bound to a specific height but does the trick for me.
.description .title {
height: 3.7em;
overflow: hidden;
}