Forums

rvicary

Hi,

I was wondering if anyone has any alternative to a flash news reader i currently have on our site? (www.paulsallisracing.com/news).

I need it to be IOS friendly as we do receive a large amount of hits via mobile devices.

Not adverse to just having a plain html with some nice css styling to display the news articles, but i'm struggling to find anthing suitable?

Any suggestions are very welcome.

Thanks in advance.

Rich

rvicary

Anyone?

Staggers

Prepare yourself, this is a lot of code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<title>Website</title>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css" media="screen">@import "iphonenav.css";</style>
</head>

<body>
    <h1 id="pageTitle">Website</h1>
    <a class="button" href="/homepage/">Home</a>

<ul id="articles" title="Articles" selected="true">
<li><a href="/article1/">article1
							<br><span class="subtxt">blah blah blah</span></a></li>
<li><a href="/article2/">article2
							<br><span class="subtxt">blah blah blah</span></a></li>
<li><a href="/article3/">article3
							<br><span class="subtxt">blah blah blah</span></a></li>
<li><a href="/article4/">article4
							<br><span class="subtxt">blah blah blah</span></a></li>
<li><a href="/article5/">article5
							<br><span class="subtxt">blah blah blah</span></a></li>
</ul>
</body>
</html>

And for the css ->


body {
    margin: 0;
    font-family: Helvetica;
    background: #FFFFFF;
    color: #000000;
    overflow: hidden;
    -webkit-text-size-adjust: none;
}

body > h1 {
    box-sizing: border-box;
    margin: 0;
    padding: 10px;
    line-height: 20px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
    text-overflow: ellipsis;
    color: #FFFFFF;
    background: url(iPhoneToolbar.png) #6d84a2 repeat-x;
    border-bottom: 1px solid #2d3642;
}

.button {
    position: absolute;
    top: 8px;
    right: 6px;
    -webkit-border-image: url(iPhoneButton.png) 0 5 0 5;
    -webkit-border-radius: 0;
    border-width: 0 5px 0 5px;
    padding: 0;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
    text-decoration: none;
    background: none;
}

#homeButton {
    display: none;
    left: 6px;
    right: auto;
    -webkit-border-image: url(iPhoneBackButton.png) 0 8 0 14;
    border-width: 0 8px 0 14px;
}

.goButton {
    -webkit-border-image: url(iPhoneGoButton.png) 0 5 0 5;
    border-width: 0 5px;
}

body > div,
body > form,
body > ul {
    display: none;
    position: absolute;
    left: 0;
    top: 41px;
    width: 100%;
    min-height: 418px;
    margin: 0;
    padding: 0;
}

body > *[selected="true"] {
    display: block;
}

body > ul > li {
    margin: 0;
    border-bottom: 1px solid #E0E0E0;
    padding: 0;
    background: url(iPhoneArrow.png) no-repeat right center;
    font-size: 20px;
    font-weight: bold;
    list-style: none;
}

body > ul > li > a {
    display: block;
    padding: 8px 32px 8px 8px;
    text-decoration: none;
    color: inherit;
}
    
.panel {
    box-sizing: border-box;
    padding: 10px;
    background: #c8c8c8 url(pinstripes.png);
}

.subtxt {
	font-size: small;
	font-weight: normal;
}

The images are optional, it works without them.
Since I can't upload zips here you'll have to wait, make do, or find your own till I can upload them somewhere.

Staggers

The above version of code put into a JS Fiddle for your viewing pleasure.

http://jsfiddle.net/7cz7b/

rvicary

Thank you for posting this, will have a good look at this tonight...

Much appreciated.

Staggers

No problem, had it floating on my hard drive for a while now.

rvicary

Thanks again, started to have a play about and can definitely use this....

Just wondering, and looking at this page as an example, do you know if something like this can be done via CSS or will it need a PHP script ?

http://www.gobata.co.uk/news--comment.html

Need soemthing very similar to this ideally.

Thanks again.

Staggers

I don't understand what you mean by "something like this", are you talking about the blog format?

Something like that can be done quite simply using any blog software out there.

rvicary

I want to achieve something similar to this news page.

ie, a news article that you can then expand etc.

Would this be classed as a blog page? Can you recommend any software for this?

Thanks

treehouse : what would you like to learn today?

Forums

News Feed / Layout