Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Kids webpage troubles

    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.

    Code:
    <!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

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    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.
    Are you a Help Vampire?

  • #3
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks,
    Sorry , I haven't uploaded anything.

    I'vel just starting to develop it.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #6
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Web link

    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
    Last edited by Cutter; 01-09-2010 at 04:47 PM.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I've been messing around with it a bit.
    Here it is with inline styles removed, cleaned up a little and validated:
    Code:
    <!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:
    Code:
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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
    Code:
    onload="initPage();"
    But I have been unsuccessful with that as well

    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

  • #10
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    followup question

    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 )

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Cutter View Post
    . 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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Cutter (01-09-2010)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •