Friday 10 October 2014
IMAGE SCROLL BOX WITH MOUSE CURSOR
-----------------------------------------------------------------------------------------------------
SAVE AS BELOW CODE IN HTML PAGE
READ MORE:
http://www.freebits.co.uk/scroll-box-using-css.html
http://coinhd.com/?ref=68715
http://coinhd.com/?ref=69616
-------------------------------------------------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Scroll Box</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
ul {
margin-top: 0px;
margin-bottom: 0px;
list-style-image: url(http://www.freebits.co.uk/bullets/edit.png);
color: #333333;
font-size: 80%;
font-weight: normal;
margin-left: 20px;
padding-left: 20px;
line-height: 1.3em;
}
.scrollArea {
width: 275px;
height: 100px;
padding-left: 5px;
padding-right: 5px;
border-color: #6699CC;
border-width: 1px;
border-style: solid;
float: left;
overflow: auto;
}
</style>
</head>
<body>
<table width=480 border=0 align=center summary="">
<tr>
<td><span class="scrollArea"><img src="http://www.freebits.co.uk/freew_files/freebits-logo.jpg" border=0 width=192 height=80 alt="Logo">
This is an example of a scroll box where contents can be displayed using html.
<ul>
<li>Bulleted List</li>
<li>Works in IE</li>
<li>Works in Firefox</li>
</ul>
</span>
</td>
<td>This is the right hand cell contents
</td>>
</tr>
</table>
</body>
</html>
-------------------------------------------------------------------------------------------------------------
USED IMAGES IN THIS TUTORIAL
---------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------
USE HTML CODE FOR RANDOM POST
JUST REPLACE WITH BELOW CODE
------------------------------------------------------------------------------------------------------------------
<body>
<table width=480 border=0 align=center summary="">
<tr>
<td><span class="scrollArea"><img src="http://www.freebits.co.uk/freew_files/freebits-logo.jpg" border=0 width=192 height=80 alt="Logo">
This is an example of a scroll box where contents can be displayed using html.
<ul>
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=9;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="http://fbgadgets.blogspot.co.uk/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
</ul>
</span>
</td>
<td>This is the right hand cell contents
</td>>
</tr>
</table>
</body>
----------------------------------------------------------------------------------------------------------
OR USE THIS CODE FOR RANDOM POST
----------------------------------------------------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Scroll Box</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
ul {
margin-top: 0px;
margin-bottom: 0px;
list-style-image: url(http://4.bp.blogspot.com/_Kv5tIcZAMKY/TMb3Hx_UaRI/AAAAAAAAB3I/WbOs3s8DHrA/s1600/bullet_star.png);
color: #333333;
font-size: 80%;
font-weight: normal;
margin-left: 20px;
padding-left: 20px;
line-height: 1.3em;
}
.scrollArea {
width: 275px;
height: 100px;
padding-left: 5px;
padding-right: 5px;
border-color: #6699CC;
border-width: 1px;
border-style: solid;
float: left;
overflow: auto;
}
</style>
</head>
<body>
<table width=480 border=0 align=center summary="">
<span class="scrollArea">
<ul>
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=9;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="http://fbgadgets.blogspot.co.uk/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
</ul>
</span>
</table>
</body>
</html>
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment