Hello everyone, i want to make a status bar which will have there Login and Status of the user but i want that to be in one class and when im working in other classes just to copy the name of the "statusbar" in the other classes. I dont know what it need to be named that class for example "status.php, status.css, status.html etc..." and also i dont know how do i make it to just copy the class name into other classes. i have this code but its not working:

statusbar.php

<html>
<body>
    <?php
function statusbar(){
    ?>
    .navbar {
    position: fixed;
    height: 20%;
    width: 100%;
    top: 0px;
    left:0px;
    background-color: #48a770;
}
    <?php
}
?>
</body>
</html>

and
index.html

    <?php
        require 'statusbar.php';
        statusbar();
    ?>

I know that is bad explained but i dont know how to explain better i hope you will understand it :)
- Thanks and merry Christmas :D

Someone, please ? :/

Please do not bump your threads.

Am having difficulty understanding what should be in your class. If it's just CSS or not.

Ok, im taking for example this site .. Look at the top of daniweb site you seeing this pink "navigation bar or status bar" where have "LOGGED IN AS: pritaeas EDIT PROFILE, WATCHED ARTICLES, PRIVATE MESSAGES, LOG OUT" so i want to make that in one class so when im working in other classes (for example the rest of the page "body") just to copy the name of the class with the "statusbar" so for example something like this

this to be statusbar.php

<html>
<body>
    <?php
function statusbar(){
    ?>
    <h2>Hello World</h2>
}
    <?php
}
?>
</body>
</html>

this is index.html

    <?php
        require 'statusbar.php';
        statusbar();
    ?>

but have in mind that in the statusbar.php need to have "login and register" so im confuzed how do i make that in one class and than just to say the name of the that class to another. Because to get rid of copying all the time the same code in all classes. I hope you now understand me :D

Sounds like you want to implement a template engine. Perhaps you should have a look at Smarty or RainTpl.

no i dont need any engines i just need to merge two classes to get rid of copying the code again and again in every class...

I agree, you would probably get some good use from Smarty.

But try this:

statusbar.php:

<style type="text/css">
.navbar {
    position: fixed;
    height: 20%;
    width: 100%;
    top: 0px;
    left:0px;
    background-color: #48a770;
}
</style>

index.php:

<html>
    <head>
        <title></title>
        <?php include('statusbar.php'); ?>
    </head>
    <body>
    </body>
</html>

doesnt work :/

doesnt work :/

That's very vague. What have you tried, what did you expect, are you getting errors... be specific.

Now i have two classes index.html and statusbar.css i have the background on the statusbar.css and some sliding image on mouse drag i have connected the classes with this code:

index.html

<head>
    <link rel="stylesheet" type="text/css" href="statusbar.css">
</head>
    <!-- ----------------------------- Sliding Image ----------------------------- -->
<div class="SFI-image">
    <A HREF="http://www.tripleclicks.com/13614839" target="_blank">
    <IMG SRC="http://www.sfimg.com/SFIBanners/banner400.gif" border="1" color='green' / ></A>
</div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.email_details').click(function() {
           // Some Code Here ...
        });

        $('.SFI-image:hover').click(function() {
            // Some Code Here ...
        });

    });
</script>

So im asking does i can renamed this statusbar.css into statusbar.php and just write the name of the function in the index.html class.
Also i know im not alowed to ask another queston here but i want to apply animation on the email_details form, i have this code for that but dont know how to make it in JS:

#email_details {
        opacity:1;
        position:fixed;
        top:25%;
        right:20%;
        border-radius:9px;
        font-size:20px;
        font-family:sans-serif;
        font-weight:100;
        background-color: #E6FFFF;
        border:2px solid gray;
        width:30%;
        height:50%;
        padding-top: 10px;
        /* overflow set to hidden to hide the expanded text */
        overflow:hidden;
        /* all style changes will ease-in-out for 1s */
        -moz-transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        transition: all 1s;
    }

Thanks :)
You can check here is the website: http://secretchatsk.host56.com/
And if you have better hosting tell me.

EDITED And i would know how to make when mouse is over the BANNER to change the background image like here in daniweb the background its coming black.
-Thanks again ! :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.