Originally Posted by
shsunnyday
Hi. I have a project that I am working on and do not know how to go about doing it. I am hoping someone here can help.
This may sound simple to some but this is WAY over my head. If anyone would be willing to help me I would be greatly appreciative.
:*
What I am trying to do: they say *a pic is worth a thousand words so here is a png of what I want my finished item to look like....
https://picasaweb.google.com/lh/phot...eat=directlink (I have also included a couple of pics on this post showing the background change.) *This is not a full page item. It will take about the same size as the picture. There are three key items in the project. Background (cycling), Weather, and a random did you know? Let me describe what I want each to do…
1. The background: every time the page is refreshed the image will be a different scene.
2. Weather: I have a script which will already make this happened. However I want it placed and formatted as in my picture.
3. Did you know? This is another (div?) with a border around it like the weather block. Every time the page is refreshed a new text will cycle through.
I want to do this in HTML5 and CSS3. I hope I am describing clear enough of what I am trying to do. If you have any questions please ask!
*If anyone would be willing to help me I would be greatly appreciative. Thank you!!
Ok, so this is basically fairly simple stuff.
1. If you want this done the simplest way possible, you'll want to use JavaScript. *
Here's some example code for it.
Code:
<html>
<head>
<style>
body
{
/*Remove below line to make bgimage NOT fixed*/
background-attachment:fixed;
background-repeat: no-repeat;
/*Use center center in place of 300 200 to center bg image*/
background-position: 300 200;
}
</style>
<script language="JavaScript1.2">
/* you must supply your own images */
var bgimages=new Array()
bgimages[0]="http://js-examples.com/images/blue_ball0.gif"
bgimages[1]="http://js-examples.com/images/red_ball0.gif"
bgimages[2]="http://js-examples.com/images/green_ball0.gif"
//preload images
var pathToImg=new Array()
for (i=0;i<bgimages.length;i++)
{
* pathToImg[i]=new Image()
* pathToImg[i].src=bgimages[i]
}
var inc=-1
function bgSlide()
{
* if (inc<bgimages.length-1)
* * inc++
* else
* * inc=0
* document.body.background=pathToImg[inc].src
}
if (document.all||document.getElementById)
* window.onload=new Function('setInterval("bgSlide()",3000)')
</script>
</head>
<body>
<BR><center><a href='http://www.js-examples.com'>JS-Examples.com</a></center>*
</body>
</html>
2. * Fairly simple, itd end up with the same kind of styling as number 3, so a background color as gray, then you have the image, with a padding-left of roughly * 20px, and then have a button with a background color of white and text color black and this should all have the appropriate heights and widths that you want. and then just put your code for getting the weather next to it.
3. Depending on whether you only to scroll once when you open the page or continuously, the code would be something along the lines of:
Only when the page refreshes:
Code:
<div id="container">
<h1 style="color: black;">Did you know?</h1>
<div id="SlidingText">
<marquee behavior="slide" direction="left">Your slide-in text goes here</marquee>
</div>
<button style="background-color: blue; color: white;" id="findout">Learn About Lincoln</button>
</div>
CSS:
Code:
#SlidingText {
background-color: white;
height: 100px;
width: 200px;
margin: 100px;
}
#container {
background-color: gray;
height: 200px;
length: 300px;
}
and then you basically do excactly the same thing for continuously scrolling except change:*
Code:
<marquee behavior="slide" direction="left">Your slide-</marquee>
to:
Code:
<marquee behavior="scroll" direction="left">Your slide-
</marquee>
Need help...
Reply With Quote
)
Bookmarks