Friday, 18 July 2014

Marquee style in different manner with PHP and MySql

Marquee style parchment utilizing as a part of distinctive way, for example, through and through, bottom to top, left to right, right to left, and parchment velocity control, in the same way as each one of those points of interest we are going to examine here. normally all web engineer should this label that is marquee tag, which this marquee tag is utilized with the end goal of make the little sort of head line or make critical thing in the specific territory utilizing marquee parchment style, comparably here we are going to talk about the thing about marquee tag with php and Mysql.
marquee tag is utilized for more reason, in the same way as top news distributed with marquee scrolling and all the more often distributed news or some other everything is span in a specific territory, for that here we are utilizing the marquee tag.

STOP / START

Marquee start and stop is the one fundamental capacity a large portion of us looking this thing, how is it happens on mouse float. see the code.

<marquee behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();">
</marquee>

onmouseover="this.stop();" for stop the marquee content on mouse over,onmouseout="this.start();" for start the marquee tag satisfied on mouse out.

MARQUEE DIRECTION 

Marquee direction is for make the marquee move heading, the moving of marquee tag is move towards to which course, in the same way as left to right, or right to left like that. For that we are utilizing that marquee direction tag. See the code.
<marquee behavior="scroll" direction="right/left/up/down" onmouseover="this.stop();" onmouseout="this.start();">
</marquee>

Pick any one course in the above bearing like left or right or up or down any one heading.

MARQUEE SPEED

Marquee speed how reduces and add to the speed of marquee tag moving. See the code.
<marquee behavior="scroll" scrollamount="5" direction="right" onmouseover="this.stop();" onmouseout="this.start();">
</marquee>

that is scrollamount="5" we can give any number value for that, when you expand the quality of scrollamount the velocity will be expanded, when you are decreasing the scrollamount the rate will be decreased.

PHP and Mysql FETCH FROM DATABASE

<?php
$con=mysql_connect('localhost','root','');
$db=mysql_select_db('2my4edge',$con);
?>

Database name --> 2my4edge
table name --> marquee
column names --> id, feeds
<div class="main">
      <?php
       $fetch=mysql_query("select * from marquee limit 5");
       if(mysql_num_rows($fetch))
          {
      ?>
    <marquee behavior="scroll" scrollamount="2" direction="up" onmouseover="this.stop();" onmouseout="this.start();">
       <ul class="ulclass" >
             <?php 
                while($row=mysql_fetch_array($fetch))
                 {
                 $id=$row['id'];
                 $feed=$row['feeds'];
               ?>
           <li class="liclass">
                 <?php echo $feed;  ?>  
                 <?php }  ?>
            </li>
                 <?php }  ?>  
      </ul>
               
              </marquee>
</div>


You can clear with the above coding, simply fetch data from the database, which is from marquee table, *astrick is for select the entire field from the table name. Also make the coding with simple.
Posted by at No comments:

Floating menu using Jquery plugin

floating div or floating menu idea is typically utilized with the end goal of altered or outright positions of ads or some other critical thing, so we are utilizing this floating menu idea, adjust and design the website page with these sort of page representation with like this sort of menu or div styles makes the page straightforward and design. Let perceive how it functions with Jquery plugin.

CODE   highlighted lines are scripts

<!DOCTYPE html>
<html lang="en">
<head>
<title>floating menu</title>
<meta charset="UTF-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='stickyfloat.min.js'></script>
</head>
<body>
 <div class="content">
  <div class="div1">
   <h3>Div 1 floating</h3>
  </div>
  <div class='div2_wrap'>
   <div class="div1 div2" >
    <h3>Div 2 floating</h3>
   </div>
  </div>
 </div>
 <script>
  $('.div1').stickyfloat();
  $('.div2').stickyfloat('update',{ duration:0 });
 
  </script>
</body>
</html>
Like the above script we ought to need to call the id or class to make floating menu. Make situating the div component that is the thing that here we examine. that sticky gliding menu or div is make some animation and situating the div.

CSS

<style TYPE="text/css">
.content{ 
padding:50px; 
width:600px; 
height:3000px; 
margin:0 auto; 
background-color:#f1f1f1; 
position:relative; 
}
.div1{ 
position:absolute; 
left:10px; 
margin-bottom:100px;
padding:15px; 
width:130px; 
background:#0CF; 
color:#FFF; 
}
.div2_wrap{ 
position:absolute; 
top:250px; 
right:0; 
bottom:30px;
}
.div2{ 
top:120px; 
right:10px; 
left:auto; 
background-color:#6C6; 
}
</style>


The above is CSS style to build it as design and colorful. That's it... the page demo, see the side div...
Posted by at No comments:

Thursday, 17 July 2014

Facebook Style Textarea Auto Grow Using JQuery Plugin and Css

Typically textarea is one of the structure input type, it is distinguished by rows and cols, while utilizing Rows and Cols the textarea will be comes like scrolled sort for that we are going to disable the scroll bar and develop the textarea.

For that we are utilizing Textarea autogrow plugin to extend the textarea and css for evacuate the resize of the text area.

Textarea
<textarea id="target" rows="4" cols="4"></textarea>

id must be same

Textarea Script
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="jquery.autogrowtextarea.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#target").autoGrow();
        });
</script>

Textarea CSS
textarea { resize:none; }

That’s it about textarea property, and textarea autogrow functions

 

Posted by at No comments:

My Demos page design details with all my tutorials

At first I beginning blogging only for an excitement and fun, and after that confronting more issue and more audits and recommendations about my page, and I acknowledged a large portion of them expecting something from me. So you need to use your ability and make individuals who are visits to your site, full fill their need and make stay individuals in your page, those sort of thoughts and contemplations comes in m personality. So for that I’m taking more paramount to my online journal and my website guests. So here I'm show the exercises about my demos page, the majority of them visits my demos page officially I know. Here I'm going to uncover the coding of that page. That is exceptionally basic. Anyhow it is exceptionally imperative for the beginners of html beginners.

Each of page visitors knows this page, demo’s index page. That page is watermarked in the above image. I thought clients would prefer not to parchment my page simply need to show exceptionally exercises in a solitary and non-parchment page, so I wanted to utilize facebook style scroll bar. Furthermore wanted to show and get all the subtle elements however here, means demo page and download links, here I'm utilize box.com capacity for all my information. So for I wanted to make three div column. They are.
1.                HEADER
2.                CONTAINER
3.                FOOTER
Those things are must. So made header with this code,

HEADER

Header contains only the logo of the site and details about the site. That’s what I done here.

CODE
   <div class="2myheader" id="myheader">
     <div class="head-1">
       <a href="http://www.2my4edge.com"> 
          <img src="demos-imgs/2my4edge logo.png" alt="2my4edge-logo" title="logo" width="230" height="80" >   
          <span class="demo"> DEMOS </span>
       </a> 
      </div>
   <div class="head-2">  
      <span class="site-name">
         <a href="http://www.2my4edge.com"> www.2my4edge.com </a> 
      </span> 
   </div>
   </div>

CSS
* { margin:0;
 padding:0;
}
a { text-decoration:none;
 }
h2 { font-family:"Courier New", Courier, monospace;
     font-size:18px;
     color:#336;
    }
 
body { background:#000;
     }
 
#myheader { width:970px;
            border-left:2px #999 solid;
            border-right:2px #999 solid;
            margin:0 auto;
            min-height:110px;
          } 
 
.head-1 {  margin-top:10px;
           margin-bottom:5px;
           min-height:90px;
           border:0px green dashed;
           float:left;
       }
 
.head-2 {  margin-top:10px;
           margin-bottom:5px;
           margin-right:80px;
           font-family:Tahoma, Geneva, sans-serif;
           min-height:50px;
           padding-top:40px;
           font-size:24px;
           color:#64AE59;
           font-weight:bold;
           float:right;
           border:0px green dashed;
       }
 
.site-name > a  { 
           font-family:Tahoma, Geneva, sans-serif;
           min-height:50px;
           font-size:24px;
           color:#64AE59;
           font-weight:bold;
           float:right;
           border:0px green dashed;
           text-decoration:none;
         }
 
.site-name > a:hover  { 
           font-family:Tahoma, Geneva, sans-serif;
           min-height:50px;
           font-size:24px;
           color:#fff;
           font-weight:bold;
           float:right;
           border:0px green dashed;
           text-decoration:none;
       }
 
 
.demo { font-size:22px;
       font-family:"Comic Sans MS", cursive;
       font-weight:bold;
       color:#3F457A;
       text-decoration:none;
     } 
 
a > .demo { font-size:22px;
             font-family:"Comic Sans MS", cursive;
             font-weight:bold;
             color:#3F457A;
             text-decoration:none;
        }


Hence the over, the header segment is closures. Read the code obviously get see, now let see the footer.


FOOTER

Typically all the footer content must have creator points of interest and site name and duplicate rights clients subtle elements that what I done here as well.
CODE
    <div class="myfooter" > 
    <span class="foot-text"> 
       <span class="foot-name">
            <a href="https://plus.google.com/101887107283193256209">Arunkumar Maha</a> 
        </span> &nbsp; &copy; 
            <a href="http://www.2my4edge.com">2my4edge.com</a> 
    </span>
    </div>

CSS
.myfooter {  width:970px;
             border-left:2px #999 solid;
             border-right:2px #999 solid;
             border-bottom:2px #999 solid;
             padding-bottom:10px;
             padding-top:10px;
             margin:0 auto;
             min-height:30px;
 }
 
.foot-text { float:right;
             font-family:Tahoma, Geneva, sans-serif;
             font-size:20px;
             color:#4A4066;
             text-decoration:none;
             margin-right:50px;
 }
 
.foot-text > a { 
            font-family:Tahoma, Geneva, sans-serif;
           font-size:16px;
           color:#4A4066;
           text-decoration:none;
 }
 
.foot-name{ color:#2E6078;
           font-size:20px;
           font-family:Tahoma, Geneva, sans-serif;
  } 
 
.foot-name > a{ color:#fff;
                 font-size:20px;
                 font-family:Tahoma, Geneva, sans-serif;
  }


That is for footer simply called with the compass tag with some of footer content. As the above did, that will be comes like this.

MAIN CONTAINER

Here in my fundamental holder everyone effectively figure this is finished with div tag, however I done it ul li listing tags, adjust three li tag in a line, which means adjust all the tag to help of width settling. We ought to need to take in the insights about stature and width, which implies min-tallness max-stature, min width max width like that. That has more. Presently see the code and css.
CODE
<div class="box" id="box">
   <ul class="ulclass"> 
 
   <a href="http://www.2my4edge.com/2013/07/file-download-coding-using-php-and-mysql.html" target="_blank"> 
   <li class="liclass">File download coding using PHP and MySql </li>   
   </a>
   
               <a href="http://demos.2my4edge.com/file-download-demo/" target="_blank"> 
               <li class="lidemo"> DEMO </li>   
               </a>
               
               <a href="https://www.box.com/s/v7xwf2u0uuroxq7iujik" target="_blank"> 
               <li class="lidown"> DOWNLOAD </li>   
               </a>
               
   <a href="http://www.2my4edge.com/2013/07/simple-login-logout-system-using-php.html" target="_blank"> 
   <li class="liclass">Simple login and logout system </li>   
   </a>
   
               <a href="http://demos.2my4edge.com/login-system/" target="_blank"> 
               <li class="lidemo"> DEMO </li>   
               </a>
               
               <a href="https://www.box.com/s/5sjo9uq6uo4wthskqy4a" target="_blank"> 
               <li class="lidown"> DOWNLOAD </li>   
               </a>
               
     </ul>
     </div>

CSS
.box { height:500px;
       overflow:scroll;
       width:970px;
       border-left:2px #999 solid;
       border-right:2px #999 solid;
       margin:0 auto;
 }
 
.liclass { color:#FFF;
           background-color:#397693;
           list-style:none;
           max-width:560px;
           min-width:560px;
           min-height:15px;
           max-height:15px;
           overflow:hidden;
           border:1px #999 solid;
           font-family:Tahoma, Geneva, sans-serif;
           padding:15px;
           margin-left:5px;
           margin-bottom:7px;
           float:left;
  }
a > .liclass:hover { color:#000;
               background-color:#CCC;
               list-style:none;
               max-width:560px;
               min-width:560px;
               min-height:15px;
               max-height:15px;
               overflow:hidden;
               border:1px #999 solid;
               font-family:Tahoma, Geneva, sans-serif;
               padding:15px;
               margin-left:5px;
               margin-bottom:7px;
               float:left;
               text-decoration:underline;
 }
 
 
.lidemo { color:#FFF;
           background-color:#5F3D87;
           list-style:none;
           text-align:center;
           max-width:120px;
           min-width:120px;
           min-height:15px;
           max-height:15px;
           border:1px #999 solid;
           font-family:Tahoma, Geneva, sans-serif, cursive;
           padding:15px;
           margin-bottom:7px;
           margin-left:5px;
           float:left;
 }
a > .lidemo:hover { list-style:none;
               text-align:center;
               max-width:120px;
               min-width:120px;
               min-height:15px;
               max-height:15px;
               border:1px #999 solid;
               font-family:Tahoma, Geneva, sans-serif, cursive;
               padding:15px;
               margin-bottom:7px;
               margin-left:5px;
               float:left;
               text-decoration:none;
  }
 
 
.lidown { color:#FFF;
           background-color:#42525E;
           list-style:none;
           text-align:center;
           max-width:130px;
           min-width:120px;
           min-height:15px;
           max-height:15px;
           border:1px #999 solid;
           font-family:Tahoma, Geneva, sans-serif;
           padding:15px;
           margin-bottom:7px;
           margin-left:5px;
           float:left;
 }
 
.ulclass { list-style-type:none;
           padding:15px;
  }

After the container tag code applied the design will be like.


Lastly how to do that in class box has overflow scroll. That make the page parchment bar, and there I utilized facebook style parchment bar, for this points of interest coding allude here. I effectively posted about that facebook style scroll bar.

That is it in my demo’s list page. Attempt this coding. Make helpful get this coding in the above link.
Posted by at No comments:
Subscribe to: Posts (Atom)