The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V < 1 2  
Reply to this topicStart new topic
> Issue with <div> I cannot solve
lovebug
post Jan 25 2021, 05:49 PM
Post #21


Newbie
*

Group: Members
Posts: 19
Joined: 20-January 21
Member No.: 27,739



oh after seeing what you did with the z-index for the cycle wall it gave me a crazy idea to add tiny light cycles driving around on top of the background grid and going behind the page content

.... one day smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 25 2021, 07:48 PM
Post #22


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(lovebug @ Jan 25 2021, 11:38 PM) *

I think I want one too smile.gif


I have a half one. wacko.gif

QUOTE

>>>>>> new secure site lol >>>>>>> https://lovebug.ml <<<<<<<<<


Looks good! 👍
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 25 2021, 07:53 PM
Post #23


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(lovebug @ Jan 25 2021, 11:49 PM) *

oh after seeing what you did with the z-index for the cycle wall it gave me a crazy idea to add tiny light cycles driving around on top of the background grid and going behind the page content

.... one day smile.gif



Like this? I post this just for fun, if you want to play a little. It's old but still seems to work. And I don't know what I did or why anymore. And it doesn't go behind the content. It works with the old page (the one I worked with before). Don't know if it will after your changes.


This at the bottom of the #main DIV.

CODE
<div>
<img src="https://lovebug.ml/images/logo-light-cycle-red-50.png" width="30" alt="" id="walker">
</div>


These additions to your CSS.

CODE
#main   { position: relative }                      
#walker { position:absolute; top: 8.5em; right: 0px;
          display: none }



JS


CODE
function winWidth()
{
   var myWidth = 0;
   if( typeof( window.innerWidth ) == 'number' )
   {
      //Non-IE
      w = window.innerWidth;
   }
   else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
   {
      //IE 6+ in 'standards compliant mode'
      w = document.documentElement.clientWidth;
   }
   else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
   {
      //IE 4 compatible
      w = document.body.clientWidth;
   }
return w;
}



var moved = null;

function doMove()
{
   moved.style.left = parseInt(moved.style.left)+3+'px';
   var curr_pos = parseInt(moved.style.left);
  
   if (curr_pos < winWidth())
   {
      setTimeout(doMove,20);
   }
   else
   {
      document.getElementById('walker').style.display = 'none';
   }
}



function init()
{
  moved = document.getElementById('walker');
  moved.style.left = '0px';
  moved.style.display = 'inline';
  doMove();

}


window.onload = init;



Yeah, mine was a little man. Hence the name "walker". tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
lovebug
post Jan 26 2021, 08:21 AM
Post #24


Newbie
*

Group: Members
Posts: 19
Joined: 20-January 21
Member No.: 27,739



thanks I'll try that on a test page see how it looks smile.gif

I had an issue with the new way the pages are included, its all good if its one of the content pages like ?page=websites but I found that if you manually type in ?page=index wink.gif you'll get an infinite loop of index.php loading index.php loading index.php ....... heh so I had to add a string test for 'index' and if found its replaced with 'news' , its working great now

i'll try your walker tonight thanks

this is the new index.php, all other page are now just content
CODE
<!DOCTYPE html>

<html lang='en'>

    <head>

        <meta charset='UTF-8'>
        <title>LoveBug</title>
        <link rel='icon' type='image/png' href='/images/favicon-mushroom-32.png' />
        <link rel='stylesheet' href='/style.css' />

    </head>

    <body>

        <!-- navigation menu -->
        <?php include $_SERVER['DOCUMENT_ROOT'] . '/navigation.php'; ?>
        <!-- end navigation menu -->

        <!-- page content -->
        <?php

            // get the required page or use default news page if page not specified
            if(isset($_GET['page']) && strpos($_GET['page'], 'index') === false)
                $page = $_SERVER['DOCUMENT_ROOT'] . '/' . $_GET['page'] . '.php';
            else
                $page = $_SERVER['DOCUMENT_ROOT'] . '/news.php';

            // if page does not exist then use the not-found page
            if(!file_exists($page))
                $page = $_SERVER['DOCUMENT_ROOT'] . '/not-found.php';

            // include the page
            include $page;

        ?>
        <!-- end page content -->

    </body>

</html>


This post has been edited by lovebug: Jan 26 2021, 09:18 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
lovebug
post Jan 26 2021, 01:47 PM
Post #25


Newbie
*

Group: Members
Posts: 19
Joined: 20-January 21
Member No.: 27,739



I just realised that although this code works its kind of unsafe as it allows any php page to be served which might be a bad idea if theres stuff on the site that I dont want to be served so ive changed it to have a list of valid pages and this also does away with the checking for index too

now theres a set of cases for the allowed pages check is much safer

CODE
        <!-- page content -->
        <?php

            // check for valid pages and set $page
            switch($_GET['page'])
            {
                case 'servers':
                    $page = 'servers';
                    break;

                case 'projects':
                    $page = 'projects';
                    break;
                    
                case 'project-z80-disassembler':
                    $page = 'project-z80-disassembler';
                    break;
                    
                case 'project-ladybug':
                    $page = 'project-ladybug';
                    break;
                    
                case 'websites':
                    $page = 'websites';
                    break;
                    
                case 'not-found':
                    $page = 'not-found';
                    break;
                    
                default:
                    $page = 'news';
            }
                    
            // get the required page
            include $_SERVER['DOCUMENT_ROOT'] . '/' . $page . '.php';

        ?>
        <!-- end page content -->

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
lovebug
post Feb 1 2021, 11:07 AM
Post #26


Newbie
*

Group: Members
Posts: 19
Joined: 20-January 21
Member No.: 27,739



hello again, I just discovered that if I add a new button to my navigation then there is an issue
the bike moves over to the right correctly to make room for the new button but the wall stays where it is because of the fixed offset and needs to be altered every time a change is made to navigation

I found a solution and it works but I havent added it to the css file yet but still here it is in case its any use to anyone ?

CODE
<div class='navbar'>

    <ul id='navigation'>

        <li><a href='/'>Home</a></li>
        <li><a href='/?page=servers'>Servers</a></li>
        <li><a href='/?page=projects'>Projects</a><li>
        <li><a href='/?page=websites'>Websites</a></li>

    </ul>
    
    <div style="overflow: hidden; white-space: nowrap;">    
        <img style='float: left;' src='/images/logo-light-cycle-red-50.png' />
        <img style='width: 100%; height: 50px;' src='/images/logo-light-cycle-wall-red-50.png' />
    </div>

</div>


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V < 1 2
Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 01:45 PM