birghtyoursite » jquery http://www.brightyoursite.com/blog Bright your site Mon, 19 Dec 2011 09:39:57 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 awesome jquery slide menu http://www.brightyoursite.com/blog/2010/04/16/awesome-jquery-slide-menu/ http://www.brightyoursite.com/blog/2010/04/16/awesome-jquery-slide-menu/#comments Sat, 17 Apr 2010 03:37:09 +0000 admin http://www.brightyoursite.com/blog/2010/04/16/awesome-jquery-slide-menu/ Add some lines of javascript codes to your page, you will see it’s magic: It make your normal menu looks more elegant. Have a try , you will see the fascination of animate menu .let’s go…

Online demo

Nothing better than a demo:awesome jquery slide menu

Add to your site

First,download the source file and upload to js ,css , images to your site root folder , and then add following codes between <head> and </head>

   <script type="text/javascript" src="jquery-latest.pack.js"></script>
    <script type="text/javascript" src="slide.js"></script>  
    <link href="style.css" rel="stylesheet" type="text/css" />

HTML codes

 <div id="menu" class="menu">
	 <ul>
	 <li><a href="javascript:;">Home</a></li>
	 <li><a href="javascript:;">HTML/CSS</a></li>
	 <li><a href="javascript:;">JavaScript</a></li>
        <li><a href="javascript:;">Resources</a></li>
	<li><a href="javascript:;">Tutorials</a></li>
	<li><a href="javascript:;">About</a></li>
	 </ul>
 </div>

You can see it’s no difference with your normal menu.So the only thing you need to do is adjust your css file, add extra style to the slide menu .

/** style need add for slide menu **/	
 
		.menu ul li a span { 
			position: absolute;
			left: 0;
			width: 110px;
		}
 
		.menu ul li a span.out {
			top: 0px;
		}
 
		.menu ul li a span.over,
		.menu ul li a span.bg {  
			top: -45px;
		}
 
		/** image background **/
 
		#menu {
			background:url(bg_menu.gif) scroll 0 -1px repeat-x;
			border:1px solid #CCC;
		}
 
		#menu ul li a {
			color: #000;
		}
 
		#menu ul li a span.over {
			color: #FFF;
		}
 
		#menu ul li span.bg { 
			height: 45px;
			background: url(bg_over.gif) center center no-repeat;
		}
 
		/** color background **/
 
		#menu2 {
			background:#45A8DF;
		}
 
		#menu2 ul li a {
			color:#FFF;
		}
 
		#menu2 ul li a span.over {
			background: #A6DD00;
			color:#333;
		}
		#menu2 ul li.nav1 a span.over {
			background: #fea274;
		}
		#menu2 ul li.nav2 a span.over {
			background: #b0bbba;
		}
		#menu2 ul li.nav3 a span.over {
			background: #a3f091;
		}
		#menu2 ul li.nav4 a span.over {
			background: #86dbf9;
		}
		#menu2 ul li.nav5 a span.over {
			background: #e0caf0;
		}
		#menu2 ul li.nav6 a span.over {
			background: #9dace9;
		}

You can Reference the style.css in the download files to adjust your own css.so if you understand css well, it’s easy to create one of yours.Good luck!!

Download

awesome jquery slide menu & source codes
Enjoy it !!!

Reference :http://www.cnblogs.com/wiky/archive/2010/04/15/animated-menu-0415.html

]]> http://www.brightyoursite.com/blog/2010/04/16/awesome-jquery-slide-menu/feed/ 0 superslider – another great jquery slider plugin http://www.brightyoursite.com/blog/2010/04/12/superslider-another-great-jquery-slider-plugin/ http://www.brightyoursite.com/blog/2010/04/12/superslider-another-great-jquery-slider-plugin/#comments Mon, 12 Apr 2010 10:14:12 +0000 admin http://www.brightyoursite.com/blog/?p=311 This is great content slider with tabs which can be used on your home page , it’s can be images slider also can used for text content.Just have a look of the demo , sure you will love it!

Online demo

Let’s have glance at the slider: super jquery slider

Options

defaults = {
		contentlist:'.contentlist',
		textlist:'.textlist',
		btnlist:'.btnlist', 
		timeout:2000
	   };

the html structure ：

<div class="ifocus">
  <div class="ifocus_pic">
	 <div class="contentlist">
		 <ul>
			 <li>slider content</li>
			 <li>slider content</li>
			 <li>slider content</li>
			 <li>slider content</li>
		 </ul>
	 </div>
	 <div class="ifocus_opdiv"></div>
	 <div class="textlist">
		 <ul>
			 <li class="current">slide up text</li>
			 <li>slide up text</li>
			 <li>slide up text</li>
			 <li>slide up text</li>
		 </ul>
	 </div>
   </div>
  <div  class="btnlist">
		 <ul>
			 <li class="current" ><img src="images/b1.gif" alt="control button 1" /></li>
			 <li><img src="images/b2.gif" alt="control button 2" /></li>
			 <li><img src="images/b3.gif" alt="control button 3" /></li>
			 <li><img src="images/b4.gif" alt="control button 4" /></li>
		 </ul>
  </div>
</div>

With the html structure , it’s easy to understand the options:
contentlist : the class name of the wrapper of the slide contents
textlist : the class name of the wrapper of the slide up texts
btnlist : the class name of the wrapper of the control buttons images
timeout : the auto slide change interval

how to use?

Insert those JAVASCRIPT Codes between <head> and </head>:

    <link href="superslider.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" language="javascript" src="jquery-latest.pack.js" ></script>
    <script type="text/javascript" language="javascript" src="jquery.superslider.js" ></script>
    <script type="text/javascript" language="javascript"  >
    $(document).ready(function(){ 
          $('.ifocus').superSlider();
     });
   </script>

The html codes to show the slider:

<div class="ifocus">
	<div class="ifocus_pic">
		<div class="contentlist">
			<ul>
				<li><a href="http://www.brightyoursite.com/" target="_blank"><img src="images/a1.jpg" alt="" /></a></li>
				<li><a href="http://www.brightyoursite.com/" target="_blank"><img src="images/a2.jpg" alt="" /></a></li>
				<li><a href="http://www.brightyoursite.com/" target="_blank"><img src="images/a3.jpg" alt="" /></a></li>
				<li><a href="http://www.brightyoursite.com/" target="_blank"><img src="images/a4.jpg" alt="" /></a></li>
			</ul>
		</div>
		<div class="ifocus_opdiv"></div>
		<div class="textlist">
			<ul>
				<li class="current">fire <a href=''>link</a></li>
				<li class="normal">design idea <a href="http://www.brightyoursite.com/blog/" target="_blank">Elegant design</a></li>
				<li class="normal">Beautiful city </li>
				<li class="normal">word of the day</li>
			</ul>
		</div>
	</div>
	<div  class="btnlist">
		<ul>
			<li class="current" id="p0"><img src="images/b1.gif" alt="" /></li>
			<li id="p1"><img src="images/b2.gif" alt="" /></li>
			<li id="p2"><img src="images/b3.gif" alt="" /></li>
			<li id="p3"><img src="images/b4.gif" alt="" /></li>
		</ul>
	</div>
</div>

This plugin support muti-slider one page. You also can use id to choose the slider and modify the default options, for instance :

  $('#slider1,#slider2').superSlider(
     contentlist:'.contentlist',
     textlist:'.textlist',
     btnlist:'.btnlist', 
     timeout:3000
  );

That’s all, enjoy it !!!

Download Soure Codes & Example

jquery super slider plugin

Need customize it?

If you have problems with install or customize it , just contact me , i will help you for a very lower reasonable fee .

Donate

if you find it useful for you and like it very much , please make a


thanks for your support!

]]> http://www.brightyoursite.com/blog/2010/04/12/superslider-another-great-jquery-slider-plugin/feed/ 2 jquery based image viewer http://www.brightyoursite.com/blog/2010/02/21/jquery-based-image-viewer/ http://www.brightyoursite.com/blog/2010/02/21/jquery-based-image-viewer/#comments Sun, 21 Feb 2010 15:24:36 +0000 admin http://www.brightyoursite.com/blog/?p=266 Need a web image viewer like Windows Picture and Fax Viewer ?

simple and useful imageviewer (suimageviewer) is a jquery based image viewer which similar to Windows Picture and Fax Viewer , it’s easy to install and compliant with IE 7+、FireFox 1.5+ (PC, Mac)、Safari2+、Opera9+、Chrome0.3+ . It can be used in your gallery site , product page ….

Online demo

please go to simple & usefull Image viewer online demo page , just click the images and text link , you will see the imageviewer work , enjoy it !

How to install ?

Insert following 3 lines codes between <head> and </head>

        <link rel="stylesheet" type="text/css" href="jquery.imagesview/imagesview.css" /> 
	<script type="text/javascript" src="jquery.imagesview/jquery.js"></script> 
	<script type="text/javascript" src="jquery.imagesview/imagesview.js"></script>

Add class=”suimagesviewer” for the link you want to use imgeviewer , for instance :

<a href="images/car0.jpg" class="suimagesviewer" title="created by www.brightyoursite.com"><img  alt='' src="images/car.jpeg" /></a>  
<br />
<br />
<a href="images/bcar.jpg" class="suimagesviewer" title="created by www.brightyoursite.com">text link</a>
<br />
<br />
<a href="images/car2.jpg" class="suimagesviewer" title="created by www.brightyoursite.com"><img alt='' src="images/car1.jpeg" /></a>  
<br />

Then , open the page , click the images and text link , you will see it’s work , it’s easy to install , isn’t ?

Donate

if you find it usefull for you and like it very much , please make a


to help me to improve it more , new version is coming…
Thanks very much.

Download

suimageviewer version 1.0.1

]]> http://www.brightyoursite.com/blog/2010/02/21/jquery-based-image-viewer/feed/ 5 Professional ajax popup form http://www.brightyoursite.com/blog/2010/01/31/professional-ajaxpopform/ http://www.brightyoursite.com/blog/2010/01/31/professional-ajaxpopform/#comments Sun, 31 Jan 2010 12:56:46 +0000 admin http://www.brightyoursite.com/blog/?p=166 Looking for a nice ajax popup form for your site ?

ajax popup form is a jquery based cool , professional popup window which can be used as contact , feedback … forms on your websites . It’s easy to install and customize .It use ajax to check the email , null fields and use phpmailer to send email .

Online demo

Please go to ajax popup form version 1.0.1 online demo , then click the right bottom contact us image.
Yes , that’s the ajax popup form .

Who use this?

www.caterline.co.uk
frankie.cc
www.dj-marcel-berlin.com
www.brightyoursite.com

How to install

Insert following 3 lines codes between <head> and </head>

<link href="ajaxpopform.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src='jquery-1.4.1.min.js'></script>
 <script type="text/javascript" src='ajaxpopform.js'></script>

Insert following codes before </body>

<form method="post"  id="ajaxpopform" class='ajaxpopform' style="display:none" action="/feedback/post/ajax/"  >  
<div class='ajaxpopformwrapper'>
      <div class="ajaxpopforminner">
        <h2>Contact Us</h2>
         <p>Professional web design &amp; excellent programming !</p>
        <fieldset>
          <label for="help-us-email">Your email address:</label>
          <div class="field"><input type="text" name="email" id="help-us-email" value="" /></div>
        </fieldset>
        <fieldset>
          <label for="help-us-message">Messages:</label>
          <div class="field"><textarea id="help-us-message" name="message" cols="20" rows="5"></textarea></div>
        </fieldset>
        <div class="rating-module" id="help-us-rateit">
          <fieldset>
            <h4>Please rate your experience for <span>(optional)</span></h4>
            <div class="rating-inline">
              <h5>Services:</h5>
              <ul class="star-rating">
                <li id="shopping-stars" class="current-rating" style="width:0"></li>
                <li><a href="javascript:;" class="star1" id="shopping-rating-1"><input type="radio" value="1" name="rating_1" id="shopping-rating-input-1"/>1</a></li><li><a  href="javascript:;" class="star2" id="shopping-rating-2"><input type="radio" value="2" name="rating_1" id="shopping-rating-input-2"/>2</a></li><li><a  href="javascript:;" class="star3" id="shopping-rating-3"><input type="radio" value="3" name="rating_1" id="shopping-rating-input-3"/>3</a></li><li><a  href="javascript:;" class="star4" id="shopping-rating-4"><input type="radio" value="4" name="rating_1" id="shopping-rating-input-4"/>4</a></li><li><a  href="javascript:;" class="star5" id="shopping-rating-5"><input type="radio" value="5" name="rating_1" id="shopping-rating-input-5"/>5</a></li>
 
              </ul>
            </div>
            <div class="rating-inline">
              <h5>Tools:</h5>
              <ul class="star-rating">
                <li id="creating-stars" class="current-rating" style="width:0"></li>
                <li><a  href="javascript:;" class="star1" id="creating-rating-1"><input type="radio" value="1" name="rating_2" id="creating-rating-input-1"/>1</a></li><li><a  href="javascript:;" class="star2" id="creating-rating-2"><input type="radio" value="2" name="rating_2" id="creating-rating-input-2"/>2</a></li><li><a  href="javascript:;" class="star3" id="creating-rating-3"><input type="radio" value="3" name="rating_2" id="creating-rating-input-3"/>3</a></li><li><a  href="javascript:;" class="star4" id="creating-rating-4"><input type="radio" value="4" name="rating_2" id="creating-rating-input-4"/>4</a></li><li><a  href="javascript:;" class="star5" id="creating-rating-5"><input type="radio" value="5" name="rating_2" id="creating-rating-input-5"/>5</a></li>
 
              </ul>
            </div>
            <div class="rating-inline last">
              <h5>Site:</h5>
              <ul class="star-rating">
                <li id="community-stars" class="current-rating" style="width:0"></li>
                <li><a  href="javascript:;" class="star1" id="community-rating-1"><input type="radio" value="1" name="rating_3" id="community-rating-input-1"/>1</a></li><li><a  href="javascript:;" class="star2" id="community-rating-2"><input type="radio" value="2" name="rating_3" id="community-rating-input-2"/>2</a></li><li><a  href="javascript:;" class="star3" id="community-rating-3"><input type="radio" value="3" name="rating_3" id="community-rating-input-3"/>3</a></li><li><a  href="javascript:;" class="star4" id="community-rating-4"><input type="radio" value="4" name="rating_3" id="community-rating-input-4"/>4</a></li><li><a  href="javascript:;" class="star5" id="community-rating-5"><input type="radio" value="5" name="rating_3" id="community-rating-input-5"/>5</a></li>
 
              </ul>
            </div>
          </fieldset>
        </div> 
      </div>
      <div class="buttons">
        <div class="submit-button"><a  class="button form-submit-button"><span class="inner">Send</span></a></div>
        <a class="button cancel"><span class="inner">Cancel</span></a>
      </div>
  </div>    
    <!-- Toggle and show this on success -->
    <div style="display:none" id="ajaxpopform-success">
      <div class="inner">
        <h2>Thank you</h2>
        <h4>Appreciate you taking time to contact us and will reply to your as soon as possible.</h4>
      </div>
      <div class="buttons">
        <a class="button cancel"><span class="inner">Close</span></a>
      </div>
    </div>
     </form>
<div id="ajaxformbtn">
    <a class="popup-button" >
      <img src="images/contact.png" 
          alt="contact us" />
    </a>
  </div>

Put the contact.php at the root of the your site , then open ajaxpopform.js , find those codes 

  url: “http://www.brightyoursite.com/contact.php”

those should change http://www.brightyoursite.com/ to your domain and point to where the contact.php located !! That’s all enjoy it!!!

Need customize it?

If you have problems with install or customize it , just contact me , i will help you for a very lower reasonable fee .

Donate

if you find it usefull for you and like it very much , please make a


to help me to improve it .
Thanks very much.

Download

ajaxpopform-1.0.1.zip

]]> http://www.brightyoursite.com/blog/2010/01/31/professional-ajaxpopform/feed/ 58 nice jquery content slider http://www.brightyoursite.com/blog/2010/01/23/nice-jquery-content-slider/ http://www.brightyoursite.com/blog/2010/01/23/nice-jquery-content-slider/#comments Sat, 23 Jan 2010 15:16:42 +0000 admin http://www.brightyoursite.com/blog/?p=140 In my portfolio page , i want to have a content silder to show some of my works ,but didn’t find a satisfied one by google .so i decide to code it myself. You can check the final result here : http://www.brightyoursite.com/portfolio.html ,
Let’s see how it work …..

First, Let’s see how this silder should work : it can be a slide or fadein , fadeout by config ; can be silde or fade automatically when page load by config;the most important thing i want is when user click one of the item it can hold on the selected item for a longer time in order to make sure the user have enough time to read the content .

Options

var defaults = {
		mode: 'slide',
		speed: 500,
		auto: false, 
		pause: 3000,
		select:10000,
		width: $(this).children('.silderitem').width(), 
		wrapper_class: 'container'
	};

Mode : value can be ‘slide’ or ‘fade’ , that’s define how the silder work.
Speed : Integer which define the fade or slide speed.The Larger values more slowly.
Auto : valid value is true or false , true means start fade or slide automatically when page load.
Pause : Integer define the interval of the slide or fade . Larger values longer time.
Select : Integer ,define the interval when click of the item , so the user have enough time to read the content .If set value 0, it will break the auto slide/fade after click .
Width : the slide or fade item width , aways it can get automatically .
wrapper_class : the css class name of the items wrapper which include all the slide or fade items.
Only for version 2.1.0
Loop : when true the the slider will reverse to the first one auto.
height : set the slider content height
the new version(2.1.0) also support muti-slider/fade in a page. .

How to use ?

HTML Codes:

<div id='sildercontent'>
  <div class='silderitem'>silder content 1</div>
  <div class='silderitem'>silder content 2</div>
 <div class='silderitem'>silder content 3</div>
 <div class='silderitem'>silder content 4</div>
 <div class='silderitem'>silder content 5</div>
</div>
 
<ul id='slnav'>
<li class='active'>item1</li>
<li >item2</li>
<li >item3</li>
<li >item4</li>
<li >item5</li>
</ul>

JAVASCRIPT Codes:

<script type="text/javascript" language="javascript" src="jquery.js" ></script>
<script type="text/javascript" language="javascript" src="jquery.suSlider.js" ></script>
<script type="text/javascript" language="javascript"  >
    $(document).ready(function(){ 
   $('#sildercontent').suSlider(); 
});
</script>

Example

Online demo : jquery content silder    jquery content fade

Download Soure Codes & Example

jqurey content slider / jquery content fade plugin

Update

Latest Version jqurey-content-slider-2.1.0.zip (Include demo )


]]> http://www.brightyoursite.com/blog/2010/01/23/nice-jquery-content-slider/feed/ 33