...

View Full Version : Kids webpage troubles



Cutter
01-08-2010, 01:50 PM
Good Morning everyone,

I'm trying to make a web page for the kids at my wifes school.

My level of skill is basic/intermediate

It seems that I can only get one part of the page to work at one time.

either the navigation will work, but then the puzzle will not, or vise versa.

I will enclose just the main(home) page, not the 2 outside .js file nor the .css files as I believe the trouble lie in the main one (I can send more if needed).

Any help, or a point in the right direction would help.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="interface.js"></script>
<script type="text/javascript">

var object = null;
var cX = 0;
var cY = 0;

function initPage ()
{
document.onmousedown = lift;
document.onmousemove = drag;
document.onmouseup = drop;
}
function lift(evt) {
var evt = (evt) ? evt : ((window.event) ? window.event : null);
var objectID = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id :
null);
if (objectID.indexOf('puzzlepcs')!=-1) object = document.getElementById (objectID);
if (object) {
object.style.zIndex = 100;
cX = evt.clientX - object.offsetLeft;
cY = evt.clientY - object.offsetTop;
return;
}
else {
object = null;
return;
}}
function drag(evt) {
evt = (evt) ? evt : ((window.event) ? window.event : null);
if (object) {
object.style.left = evt.clientX - cX + 'px';
object.style.top = evt.clientY - cY + 'px';
return false;
}}
function drop() {
if (object) {
object.style.zIndex = 0;
object = null;
return false;
}
}


</script>

<style type="text/css">


.puzzlepcs
{
position: absolute;
padding: px;
border: 1px solid #333;
background-color: #fff;
cursor: move;
z-index: 0;
}
#puzzlepcs1
{
top: 123px; left: 689px;
}
#puzzlepcs2
{
top: 105px; left: 525px;
}
#puzzlepcs3
{
top: 300px; left: 777px;
}
#puzzlepcs4
{
top: 155px; left: 655px;
}

#puzzlepcs5
{
top: 250px; left: 600px;
}
#puzzlepcs6
{
top: 225px; left: 444px;
}
#puzzlepcs7
{
top: 175px; left: 725px;
}

#puzzlepcs8
{
top: 255px; left: 445px;
}


</style>

<!--[if lt IE 7]>
<style type="text/css">
div, img { behavior: url(iepngfix.htc) }
</style>
<![endif]-->

<link href="style.css" rel="stylesheet" type="text/css" />
</head>






<body onload="initPage();">
<div><img src="images/ch1.gif" alt="ch1" height="151" width="106" class="puzzlepcs"id="puzzlepcs1"/></div>
<div><img src="images/ch2.gif" alt="ch2" height="151" width="154" class="puzzlepcs"id="puzzlepcs2"/></div>
<div><img src="images/ch3.gif" alt="ch3" height="85" width="99" class="puzzlepcs"id="puzzlepcs3"/></div>
<div><img src="images/ch4.gif" alt="ch4" height="66" width="99" class="puzzlepcs"id="puzzlepcs4"/></div>
<div><img src="images/ch5.gif" alt="ch5" height="166" width="106" class="puzzlepcs"id="puzzlepcs5"/></div>
<div><img src="images/ch6.gif" alt="ch5" height="125" width="195" class="puzzlepcs"id="puzzlepcs6"/></div>
<div><img src="images/ch7.gif" alt="ch5" height="222" width="58" class="puzzlepcs"id="puzzlepcs7"/></div>
<div><img src="images/ch8.gif" alt="ch5" height="97" width="195" class="puzzlepcs"id="puzzlepcs8"/></div>
<div><img src="images/ch9.gif" alt="ch5" height="56" width="106" class="puzzlepcs"id="puzzlepcs9"/></div>








<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="home.html"><img src="images/homeicon.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="music.html"><img src="images/music-note.png" alt="contact" /><span>Music</span></a>
<a class="dock-item" href="calendar.html"><img src="images/calendar-icon.png" alt="portfolio" /><span>Calendar</span></a>
<a class="dock-item" href="link.html"><img src="images/link.png" alt="music" /><span>Links</span></a>
<a class="dock-item" href="email.html"><img src="images/email-icon.png" alt="video" /><span>E-mail</span></a>
<a class="dock-item" href="pictures.html"><img src="images/pictures-icon.png" alt="history" /><span>Pictures</span></a>
<a class="dock-item" href="search.html"><img src="images/search-icon.png" alt="calendar" /><span>Search</span></a>
<a class="dock-item" href="movies.html"><img src="images/filmreel.png" alt="rss" /><span>Movies</span></a>
</div>
</div>




<script type="text/javascript">

$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 100,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 80,
proximity: 180,
halign : 'center'
}
)
}
);












</script>

</body>
</html>


Thank you

Cutter

tomws
01-08-2010, 02:40 PM
A link to a page would get you much more assistance since no one needs to bother with setting up your code, guessing your website location, and modifying file paths to pull from your location.

Cutter
01-08-2010, 02:48 PM
Thanks,
Sorry , I haven't uploaded anything.

I'vel just starting to develop it. :)

Excavator
01-08-2010, 04:52 PM
Hello Cutter,
That looks like an interesting site.
One major step in development is checking your code for errors. Check out the links about validation in my sig below.
The validator points out a few issues with your code ... hard to tell if fixing them will fix the problem you're having.

The puzzle pieces move and the menu appears to work when I tried it in FF3.5. Could you be more specific as to what's not working? Let us know what browser is not working right too.

ps. Another major step in development is testing online. Since your site is mostly images a link to that test site would be the easiest way to get help.

Cutter
01-08-2010, 05:17 PM
Thank you for your kind words:)

I have checked for validation as suggested, and the errors were the result of spaces which I will correct.

I am installing an ftp program and will get it up quickly(today).

There are basicly 2 different function going on
1) Mouseover Bar
2) Puzzle pieces

The 2 different type scripts in themselves will work.
Just not together it seems.

I am using FF3.5 and IE8.

The puzzle will work, but the navigation bar stops functioning as it should.( it runs as a "MAC" type bar and get bigger as you mouseover (links function as they should).


I will get that site up asap, and I will post a link.

again thank you for your response.

Cutter

Cutter
01-08-2010, 07:48 PM
This is the link to the site.
The main page is the puzzle working,and the bar not working.
The "movies" link is how the bar should function




Thank you for looking at it.

Cutter

Excavator
01-09-2010, 12:43 AM
That's going to be an awesome site! Is any of that your original work or are you following an example?

The puzzle works with onmouseover="initPage();" and the dock menu works without it... Not sure yet how to get a happy medium there.

Excavator
01-09-2010, 09:12 AM
I've been messing around with it a bit.
Here it is with inline styles removed, cleaned up a little and validated:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test menu</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="interface.js"></script>
<script type="text/javascript" src="head.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 100,
items: 'a',
itemsText: 'span',
container: '#dock-container',
itemWidth: 120,
proximity: 180,
halign : 'center'
}
)
}
);
</script>
</head>
<body><!--this one makes menu work-->
<!--<body onmouseover="initPage();"> this one makes puzzle work-->
<div id="container">
<div id="dock">
<div id="dock-container">
<a href="#" class="dock-item" id="home"><img src="images/homeicon.png" alt="home" /><span class="btn_txt">Home</span></a>
<a href="#" class="dock-item" id="music"><img src="images/music-note.png" alt="music" /><span class="btn_txt">Music</span></a>
<a href="#" class="dock-item" id="calendar"><img src="images/calendar-icon.png" alt="portfolio" /><span class="btn_txt">Calendar</span></a>
<a href="#" class="dock-item" id="links"><img src="images/link.png" alt="link" /><span class="btn_txt">Links</span></a>
<a href="#" class="dock-item" id="e-mail"><img src="images/email-icon.png" alt="email" /><span class="btn_txt">E-mail</span></a>
<a href="#" class="dock-item" id="pictures"><img src="images/pictures-icon.png" alt="pictures" /><span class="btn_txt">Pictures</span></a>
<a href="#" class="dock-item" id="search"><img src="images/search-icon.png" alt="search" /><span class="btn_txt">Search</span></a>
<a href="#" class="dock-item" id="movies"><img src="images/filmreel.png" alt="Film Reel" /><span class="btn_txt">Movies</span></a>
<!--end dock-container--></div>
<!--end dock--></div>
<img src="images/ch1.gif" alt="ch1" class="puzzlepcs" id="puzzlepcs1" width="106" height="151" />
<img src="images/ch2.gif" alt="ch2" class="puzzlepcs" id="puzzlepcs2" width="154" height="151" />
<img src="images/ch3.gif" alt="ch3" class="puzzlepcs" id="puzzlepcs3" width="99" height="85" />
<img src="images/ch4.gif" alt="ch4" class="puzzlepcs" id="puzzlepcs4" width="99" height="66" />
<img src="images/ch5.gif" alt="ch5" class="puzzlepcs" id="puzzlepcs5" width="106" height="166" />
<img src="images/ch6.gif" alt="ch6" class="puzzlepcs" id="puzzlepcs6" width="195" height="125" />
<img src="images/ch7.gif" alt="ch7" class="puzzlepcs" id="puzzlepcs7" width="58" height="222" />
<img src="images/ch8.gif" alt="ch8" class="puzzlepcs" id="puzzlepcs8" width="195" height="97" />
<!--end container--></div>
</body>
</html>

And the CSS to go with it:

body {
font: 11px Arial, Helvetica, sans-serif;
background: #ffffff url(images/bg2.jpg) no-repeat;
padding: 0;
margin: 0;
}
img {
border: none;
}
#container {
}
#dock {
position: relative;
height: 50px;
text-align: center;
}
#dock-container {
height: 50px;
width: 960px;
position: absolute;
left: 364.5px;
background: url(images/dock-bg2.jpg) no-repeat;
padding-left: 20px;
}
home {width: 120px; left: 0px;}
music {width: 120px; left: 120px;}
calendar {width: 120px; left: 240px;}
links {width: 120px; left: 360px;}
e-mail {width: 120px; left: 480px;}
pictures {width: 120px; left: 600px;}
search {width: 120px; left: 720px;}
movies {width: 120px; left: 840px;}
a.dock-item {
display: block;
width: 120px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}
.dock-item span.btn_txt {display: none;}
.puzzlepcs {
position: absolute;
border: 1px solid #333;
background-color: #fff;
cursor: move;
z-index: 0;
}
#puzzlepcs1 {top: 123px; left: 689px;}
#puzzlepcs2 { top: 105px; left: 525px;}
#puzzlepcs3 {top: 300px; left: 777px;}
#puzzlepcs4 {top: 155px; left: 655px;}
#puzzlepcs5 {top: 250px; left: 600px;}
#puzzlepcs6 {top: 225px; left: 444px;}
#puzzlepcs7 {top: 175px; left: 725px;}
#puzzlepcs8 {top: 255px; left: 445px;}

I'm not a js guy at all. I did find out that initializing js from the body tag like that is kind of old school and doesn't lend itself well to running multiple scripts.
You might have better luck getting this fixed if you asked in the JavaScript forum (http://www.codingforums.com/forumdisplay.php?f=2).

Cutter
01-09-2010, 01:36 PM
Wow, thank you

I can't take any credit for the dock at all (none of the script anyway).

The idea for the puzzle was all mine(again minus the script), just saw a page that moves and sizes the div's and then it was easy from there.

The puzzle might work better with
onload="initPage();"

But I have been unsuccessful with that as well :confused:

Just a note:
I've asked for help from different sites in the past either for Java or HTML and you by far has been the most helpful person to date. Curtious and encouraging.

I want to thank you.

And thank you for cleaning up the HTML/CSS for me.

I'll snoop around the Javascript Forum and see what I can find.

Thanks again

Cutter

Cutter
01-09-2010, 03:48 PM
If a user moves a puzzle piece that piece will stay there until reload.
Is there a way to have it stay there even after reload?

I came up with another application for the puzzle pieces and would like them to remain where the user put them after closing the page and when he/she opens the page again.

(you were so helpful, thought I'd try here first :) )

Excavator
01-09-2010, 04:21 PM
. Curtious and encouraging.

I want to thank you.

And thank you for cleaning up the HTML/CSS for me.

I'll snoop around the Javascript Forum and see what I can find.

Thanks again

Cutter

Yes, courtesy can be hard to find in some forums, no doubt. I used to frequent serveral different boards and stopped going to all but this one just because of that. In fact, I recently tried returning to one CSS forum in particular for a while but I've found it has not changed.
CodingForums.com is by far the friendliest board I've been on and I always try to perpetuate that feeling.
I'm glad you can use the cleaned up code :)

As for getting the pieces to remember where they were moved before a page refresh... I have no clue.

Excavator



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum