How to change this script into
Tags: php,html,css
Problem :
Well i found this stream script but the actual design of the area that holds the data is in CSS. But i dont know css so I'm wondering if you could tell me how i could change it to HTML. I dont mean write the code again in HTML.. I mean show me where i can enter my HTML.
All scripts here.
Script with css :
/* grab stuff */
function get_posts($start = 0, $number_of_posts = 5) {
/* connect to the db */
$connection = mysql_connect('localhost','root','');
mysql_select_db('draft2',$connection);
$posts = array();
/* get the posts */
$query = "SELECT item_id, username, item_content ID FROM wp_posts WHERE post_status = 'publish' ORDER BY post_date DESC LIMIT $start,$number_of_posts";
$result = mysql_query($query);
while($row = mysql_fetch_assoc($result)) {
preg_match("/<p>(.*)<\/p>/",$row['post_content'],$matches);
$row['post_content'] = strip_tags($matches[1]);
$posts[] = $row;
}
/* return the posts in the JSON format */
return json_encode($posts);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>Create a Twitter-Like "Load More" Widget Using CSS, HTML, JSON, and jQuery or MooTools Javascript</title>
<style type="text/css">
#posts-container { width:400px; border:1px solid #ccc; -webkit-border-radius:10px; -moz-border-radius:10px; }
.post { padding:5px 10px 5px 100px; min-height:65px; border-bottom:1px solid #ccc; background:url(dwloadmore.png) 5px 5px no-repeat; cursor:pointer; }
.post:hover { background-color:lightblue; }
a.post-title { font-weight:bold; font-size:12px; text-decoration:none; }
a.post-title:hover { text-decoration:underline; color:#900; }
a.post-more { color:#900; }
p.post-content { font-size:10px; line-height:17px; padding-bottom:0; }
#load-more { background-color:#eee; color:#999; font-weight:bold; text-align:center; padding:10px 0; cursor:pointer; }
#load-more:hover { color:#666; }
.activate { background:url(loadmorespinner.gif) 140px 9px no-repeat #eee; }
</style>
If you know how to do this will you please tell me :D
Solution :
CSS is just applying styles to html, if you want to add html to the form you should but it in the body tag. (by the way your link to the code is not working)
CSS Howto..
Just sepereate each one with a comma. Something like this : background-image: url(),url(), url(); Ofcourse instead of url you can put gradient. And all modern browsers support this feature (...
I have modified a few elements in Chrome to get the requested view. Just modify the following CSS, you will have the radio slider on the left, image on the...
First off, I think you mean "desktop browsers" instead of "modern browsers", with that in mind it seems that you are having difficulties using different CSS3 properties. Some of which...
It should work if you change the foreach loop to this one: $.each(json, function(i) { imgList += '<ul><li><img class="inserted" src= " ' + json[i] + ' "></li>' + bottom; });...
I suppose you mean that you want each text placed right below the corresponding arrow-like symbol and centered horizontally with respect to it. Then you need to make the #conrainer...
<!-- cor rosa #be5b70 --> .clearfix:after { display:block; clear:both; } /*----- Menu Outline -----*/ .menu-wrap { width:100%; box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2); background:#3e3436; } .menu { width:1000px;...
Not possible, because you have to fetch the vertical offset of the document to know if the user is at the top of the page, or have scrolled down. The...
Here you go.. http://jeaffreygilbert.com/workatplayheader.html Preview: CSS: /* Resetter */ ol, ul, li, a { background: transparent; border: 0px; font-size: 100%; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; } ul,...
My friend told me I should use a table and it worked! Here is the snippet of code: HTML <table> <tr> <div id="div06"> <th><img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/></th> <th><span class="span01"><a class="a02" style="text-decoration:none"...
You could try something like this. It's fairly rudimentary, but it works-ish. http://jsfiddle.net/CnKXK/...
You can apply the rule only to ul like this: ul { list-style-image: none; list-style-type: none; } ...
The proposed syntax takes the form of a functional pseudo-class called :matches(): /* As this is a pseudo-class, you can make it a little DRYer by saying div:matches(.ebook, .book) div.page...
Just specify a minimum width: #header{ min-width: 720px; /* or whatever the size of the content is */ } (and remove the overflow property, it's not needed)...
Alter the ui-btn directly: http://jsfiddle.net/5DDBD/5/ .ui-btn { background: #2B6DBC; text-shadow: none; } .ui-btn-inner { color:#FFFFFF; } ...
FIDDLE HTML: <div id="content"> <div id="news"> </div> <div id="hero"> <div id="heroText"> </div> <div id="heroImage"> </div> </div> </div> CSS: #content { margin: 0px auto; max-width: 1150px; padding-bottom: 50px; padding-left: 50px; padding-right:...
This achieves the behaviour of what I wanted, I used div's within <li>'s: http://jsfiddle.net/rwone/4Hzp6/6/ HTML <ul class="images_list"> <li class="style_one"><img src="http://dummyimage.com/50/ccc/fff&text=1.png"> <div class="crop_it"></div><div...
You are doing it wrong... the resources panel is not there for live edit, if you want to change the css associated with an HTML element, right click on that...
you can done that using 3 <hr> tag hr{ border:2px solid blue; border-radius:50px; } #one{ width:50px; transform : rotate(90deg); } #two{ width: 20px; transform: rotate(45deg); margin-left: 46%; margin-top: 3%; }...
I would suggest something like that: <div class="image"> <img src="http://desmond.imageshack.us/Himg502/scaled.php?server=502&filename=shadowoff.png&res=landing"> </div> and...
or JavaScript if (navigator.userAgent.match(/Macintosh/)) // do stuff for Macs here, such as load a stylesheet But really, this is bad practice and you shouldn't do it....
Try using -webkit-appearance: none; to disable the browser's default styling, then apply your own styles. More info and examples at 37signals.
If you have heading to your table columns and you don't want to scroll those headings then this solution could help you: This solution needs thead and tbody tags inside...
The classical way to center an element with CSS is to set left and right margin to auto Your code should be .main { background-color: #FFF; margin: 1em auto; max-width:...
use display :none; to those image you dont want to show you can do this by .dis_none{ display :none; } and add class dis_none to image you dont want to...
Just get more specific. Change: .socialmedia ul li {margin: 0px; padding: 0px;} to #footer .socialmedia ul li {margin: 0px; padding: 0px;} jsFiddle example You had the right idea but the...
Add height: 40px; in .navigation-bar
Just clear the inline style you wish to fallback to original stylesheet on. elem.style.left = null; ...
I think you are asking to do something like this with your images and buttons: http://jsfiddle.net/k8nn83g9/9/ /**use this to position your button**/ #move{position: absolute; top: 50px; left: 50px;} /**set background...
If you want to use js variables in CSS, try React inline-style instead of plain css file. https://facebook.github.io/react/tips/inline-styles.html If you want to separate CSS and JS, you might need a...
Comma separate them: .btn-primary > i.glyphicon, .btn-primary > span.glyphicon { color: #ffffff; } More info can be found at w3.org about grouping. If you want to 'shortcut' them, you'll need...