Archive for the ‘css’ Category

nice css slider

Posted: September 14, 2013 in css

http://csscience.com/responsiveslidercss3/

found this great tutorial

http://tympanus.net/codrops/2013/07/18/on-scroll-effect-layout/

“An on scroll effect template that animates the sides of sections once they are in the viewport”

Center shit with css

Posted: August 3, 2013 in css

margin-left:auto;
margin-right:auto;

I want to show the users progress over time with some charts. So here I am searching google again for some answers.

Found this link:

Create Quick and Easy Progress Bar Charts with HTML5 and CSS3

p1

This isn’t exactly what I was looking for but an easy progress bar can be quite handy. Its worth testing…

Fuck, this article has no demo. This is NOT COOL. But it was easy creating out of the code presented on the page. So I guess I will try.

Ok, got it. Here is the result:

p2

and the code is:

<html>
<body>
<style>
/* Firefox – value portion of progress bar */
progress#bar::-moz-progress-bar {
background-color: red;
-moz-box-shadow: 1px 1px 1px #333333;
}

/* Chrome, Safari – value portion of progress bar */
progress#bar::-webkit-progress-value {
background-color: red;
-webkit-box-shadow: 1px 1px 1px #333333;
}

/* All other attributes */
progress#bar {
background-color: #F0F0F0;
border: solid #808080 2px;
border-radius: 5px;
-moz-box-shadow: 3px 3px 3px #C0C0C0;
-webkit-box-shadow: 3px 3px 3px #C0C0C0;
box-shadow: 3px 3px 3px #C0C0C0;
padding: 3px;
width: 250px;
height: 20px;
}
</style>

<strong>Project Completion Status</strong><br />
<br />
Project #1<br />
<progress id=”bar” value=”6″ max=”9″>
<em>6 of 9 stages completed</em></progress>
<br />
Project #2<br />
<progress id=”bar” value=”20″ max=”100″>
<em>20% complete</em></progress>
<br />
Project #3<br />
<progress id=”bar” value=”12″ max=”20″>
<em>12/20 components completed</em></progress>
<br />
Project #4<br />
<progress id=”bar” value=”4″ max=”8″>
<em>50% complete</em></progress>
<br />
Project #5<br />
<progress id=”bar” value=”9″ max=”10″>
<em>9 out of 10 stages completed</em></progress>
</body>
</html>

This will be handy someday 🙂

The next google search result looks very good. Its specifically about jquery-mobile charting. Exactly what I need.

jQuery Mobile Charts

+ the source code on github

If this will be the result on my end, I will be a happy man indeed. Lets give it a try.

The example works just fine. Now I will try to embed this to my phonegap app. lets see how it goes…

ok. it took me 10 minutes to integrate the sample code to my html5 code. (just the sample, no functionallity yet).

I had one problem with the addition, at first it didn’t work and than I tried to add this code:

<script src=”JQMCharts/scripts/jquery.jqplot.min.js” type=”text/javascript”></script>
<script src=”JQMCharts/scripts/jqplot.pieRenderer.min.js” type=”text/javascript”></script>
<script src=”JQMCharts/scripts/jqplot.barRenderer.min.js” type=”text/javascript”></script>
<script src=”JQMCharts/scripts/jqplot.categoryAxisRenderer.min.js” type=”text/javascript”></script>
<script src=”JQMCharts/scripts/underscore-min.js” type=”text/javascript”></script>
<script src=”JQMCharts/scripts/hideAddressBar.js” type=”text/javascript”></script>
<script src=”JQMCharts/scripts/app.js” type=”text/javascript”></script>

to the end of the file instead of the beginning.

this what fixed my problem.

I have no idea why…

anyways i don’t like this code so much. not very scalable…

So I gonna try this library:

http://www.jqplot.com/

ok so i downloaded jquery.jqplot.1.0.5r1122 and I’m following the basic installation instructions from the jqueryPlot website I hope it will be easy as it looks.

I added two files to my project and added the following lines

<!– jqueryplot –>
<script language=”javascript” type=”text/javascript” src=”jqueryplot/jquery.jqplot.min.js”></script>
<link rel=”stylesheet” type=”text/css” href=”jqueryplot/jquery.jqplot.css” />

I added a chart container:

<div id="chartdiv" style="height:400px;width:300px; "></div>

. and added the graph creation code

$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);

not worknig 😦

I will try to add

<script language=”javascript” type=”text/javascript” src=”jqueryplot/jquery.min.js”></script>

as well.

Still nothing.. the chart isn’t showing…

GOT IT!! The problem was as usual that my code aims for phonegap so the $.jqplot(‘chartdiv’,  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]); code wasn’t triggered because it was in the deviceReady event function. When I created a window.onLoad function instead – everything worked on Chrome.

 

Now I need to create a vertical bar chart. So I found this link.

Also succeeded to create a BarRender chart with it. and found this pretty awsume link to how add dynamic data to a jqplot chart.

I almost finished my phonegap + native java code for my mobile application.

I decided to take another background task to design it. I guess it will take some time and i’ll iterate over several designs so it about the right time to get started.

I found an interesting post on adobe website, and it links to a video on adobe-tv.

i’m familiar with photoshop, dreamweaver and phonegap so it shouldn’t be too hard on me 🙂

I try to make a cool front page to my phonegap app.

I want four squares, similar to the squares u c on the android store app.

so I started to look for the css rules to make it happen.

First i created 4 divs (height=width=50%) and placed them in the content.

The page didn’t show anything so I put another css class for the jqm content div with height:100%, so i will show.

Then I wanted to place content in each square, this was rather hard I couldn’t find someting that works until I saw this post:

http://stackoverflow.com/questions/6405034/jquery-mobile-align-button-in-middle-of-screen

than i got it. the solution was

position: relative;
top: 50%;
left: 50%;
margin-top: -1.2em;

The html:

<div data-role=”content” class=”homepagecontent”>

<div class=”linkrect topleft”><p>1</p></div>
<div class=”linkrect topright”><p >2</p></div>
<div class=”linkrect bottomleft”><p >3</p></div>
<div class=”linkrect bottomright”><p >4</p></div>

</div>

The CSS:

.homepage{
height:100%;
margin:0;
padding:0 ;
}
.homepagecontent{
height:100%;
margin:0;
padding:0 ;
}

.linkrect{
height:50%;
width:50%;

}

.linkrect p{
position: relative;
top: 50%;
left: 50%;
margin-top: -1.2em;
}
.topleft{
float: left;
background: red;
top:0;
left:0;
}

.topright{
float: right;
background: green;
top:0;
right:0;
}

.bottomleft{
float: left;
background: yellow;
}

.bottomright{
float: right;
background: pink;
}

 

Capture

for a while i was straggling with ready templates and stolen css from some websites.

First i tryied to watch some video tutorials (lynda, video2brain etc) on css but its just so boring.

so i need to take more seriously and try to figure it out one and for all. After all, css can’t be so hard.

I pretty much know the css basics. and i feel no to hot on css transitions. so i find this website. whats up with santa in the header?

http://learning-html5.info/blog/css-3-selectors/transitions/

pretty lame. and i know this. pretty basic.

next search result,

CSS3 Transition Tutorials to Create a Single Page Website

looks pretty good, lots of scenario cases and examples.