Jump to content

nK0de

Member
  • Posts

    8
  • Joined

  • Last visited

Posts posted by nK0de

  1. Hello everyone. A fairly new guy to web developing with a mediocre amount of knowledge and experience here. :)

     

    I've been researching on parallax effect for the past few days. I came across this tutorial.

     

    I'm trying to implement the horizontal version of its demo. I have no idea where to start. Did a quite a lot of searching on the internet. There are lots of tutorials on how to create vertical parallax scrolling but next to nothing on horizontal. Went over to stellar.js docs but I'm afraid its not too beginner friendly.

     

    Can anybody please tell me a basic structure and what should I do to (sorta like a crash course) on how to do this? Or direct me to a tutorial that I must have missed?

     

    By the way, I'm not talking about moving elements slightly when the mouse moves horizontally. I mean whole sections sliding horizontally. This site is a great example of what I'm tryna do here.

     

    Thanks very much. :)

  2. I'm creating a vertical menu with a submenu. You can see all the HTML, CSS and jQuery code I've written in this fiddle.

     

    Can anyone explain what I should do to make the submenu appear side by when the mouse is hovered over the Projects tab?

     

    P.S : This is how the menu really looks. On mouse over, the background color changes to blue but that doesn't show in teh fiddle 'cause you can't import the jQuery UI there.

  3. I have a simple webpage which initially looks like this.

     

    UAG3z.png

     

    When clicked upon a link, a small form appears to the right. And the label which reads Record Added moves to the middle of the page!

     

    BlOvC.png

     

    How can I stop this from happening? I want that label to stay fixed where it is from the start.

     

    This is the HTML code of the page

     

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />
    </head>
    <body id="body_services">
    
    <div id="tasks">
    <ul>
       	<li><a id="add" href="#">Add a new taxi service</a></li>
           <li><a id="update" href="#">Update a taxi service</a></li>
           <li><a id="delete" href="#">Delete a taxi service</a></li>
           <li><a id="view" href="#">View taxi services</a></li>
       </ul>
    </div>
    
    <div id="addForm">
       <form id="frmAddService" name="Add">
       <table width="300" border="0">
         <tr>
           <td><label for="sid">Service ID</label></td>
           <td><input type="text" name="sid" readonly="readonly" value="<?php echo $new_sid; ?>" style="text-align: right" /></td>
         </tr>
         <tr>
           <td><label for="name">Name</label></td>
           <td><input type="text" name="name" /></td>
         </tr>
         <tr>
           <td><label for="cost">Cost</label></td>
           <td><input type="text" name="cost" /></td>
         </tr>
         <tr>
           <td><label for="active">Active</label></td>
           <td><input type="checkbox" name="active" /></td>
         </tr>
         <tr>
           <td></td>
           <td><input type="reset" value="Cancel" /> <input type="submit" value="Save" name="save" /></td>
         </tr>
       </table>
       </form>
    </div>
    
    <div id="msg">Record added</div>
    
    <div id="updateForm">
       <form id="cmbServiceIDs" name="sids">
       <table width="400" border="0">
         <tr>
           <td><label for="serviceId">Select the Service Name</label></td>
           <td><?php echo $dropdown; ?></td>
           <td><input id="load" type="submit" value="Load" name="btnload" /></td>
         </tr>
       </table>
       </form>
    
       <form id="frmUpdateService" name="Update" action="" method="post">
       <table width="300" border="0">
         <tr>
           <td><label for="sid">Service ID</label></td>
           <td><input id="sid" type="text" name="sid" value="" style="text-align:right" /></td>
         </tr>
         <tr>
           <td><label for="name">Name</label></td>
           <td><input id="name" type="text" name="name" value="" style="text-align:right" /></td>
         </tr>
         <tr>
           <td><label for="cost">Cost</label></td>
           <td><input id="cost" type="text" name="cost" value="" style="text-align:right" /></td>
         </tr>
         <tr>
           <td><label for="active">Active</label></td>
           <td><input id="active" type="checkbox" name="active" value="" /></td>
         </tr>
         <tr>
           <td></td>
           <td><input type="reset" value="Cancel" /> <input type="submit" value="Update" name="update" /></td>
         </tr>
       </table>
       </form>
    </div>
    
    </body>
    </html>
    

     

    And I have one more question. Please take a look at these screenshots.

     

    Auu7g.png

     

    y8qgx.png

     

    I use CSS margin to position the elements on the page. But as you can see, it takes up unnecessary space (orange colored areas). How can I remove them?

     

    This is the CSS code.

     

    * { margin:0; padding:0; }
    
    #msg { float:right; padding-right:250px; padding-top:300px; font-size:15px; font-weight:bold; color:#C00; }
    
    #tasks { float:left; margin-left:150px; margin-top:150px; }
    
    #addForm { float:right; margin-right:200px; margin-top:150px; }
    
    #updateForm { float:right; margin-top:120px; }
    
    #cmbServiceIDs { padding-bottom:20px; }
    

     

    Thank you :)

×
×
  • Create New...