IMAGE SCROLL BOX WITH MOUSE CURSOR

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>

<tr>

This is an example of a scroll box where contents can be displayed using html.

<ul>

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>

</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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_LVrjpTo2Z8FjsauoOceipjUIakj0APYVJVPn7GupCZVVBP45KzBxtG89aUrVLtThouB-SzYhLJhwrqnhwEBm86TJQzxOBs8TlGypg5DwBv2kTjVCW29nvBDZk1IKTfroBoCgnz3OAE4m/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>