How to get this function via jquery?

Discussion in 'Programming' started by bean81, Jan 10, 2011.

  1. #1
    I want to create a tab like the feedback-thing in this picture:
    [​IMG]
    I have been unable to find a JQuery plugin
    Thanks for your help
     
    bean81, Jan 10, 2011 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    That is a Slideout Tab. I'm pretty sure it has others names too, but that is the only one I can remember :)
     
    Cash Nebula, Jan 10, 2011 IP
  3. bean81

    bean81 Peon

    Messages:
    119
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    yes,i think it is good,but this tab is fixed,i think how to do this tab could scroll
     
    bean81, Jan 10, 2011 IP
  4. roxcon

    roxcon Member

    Messages:
    73
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #4
    roxcon, Jan 10, 2011 IP
  5. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Just change the fixedPosition value from false to true.
    Also, change the topPos value to move it up or down, or the tabLocation value to move it to the other side.

    
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    	$('.slide-out-div').tabSlideOut({
    		tabHandle: '.handle',                     //class of the element that will become your tab
    		pathToTabImage: 'contact_tab.gif', //path to the image for the tab //Optionally can be set using css
    		imageHeight: '122px',                     //height of tab image           //Optionally can be set using css
    		imageWidth: '40px',                       //width of tab image            //Optionally can be set using css
    		[COLOR="red"]tabLocation: 'left',[/COLOR]                      //side of screen where tab lives, top, right, bottom, or left
    		speed: 300,                               //speed of animation
    		action: 'click',                          //options: 'click' or 'hover', action to trigger animation
    		[COLOR="red"]topPos: '200px'[/COLOR],                          //position from the top/ use if tabLocation is left or right
    		leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
    		[COLOR="red"]fixedPosition: true [/COLOR]                     //options: true makes it stick(fixed position) on scroll
    	});
    
    });
    </script>
    <style type="text/css">
    	.slide-out-div {
    			padding: 20px;
    			width: 250px;
    			background: #ccc;
    			border: 1px solid #29216d;
    	}      
    
    	#spacer {	height:2000px; }
    </style>
    </head>
    <body>
    	<div class="slide-out-div">
    		<a class="handle" href="http://link-for-non-js-users.html">Content</a>
    		<h3>Contact me</h3>
    		<p>Thanks for checking out my jQuery plugin, I hope you find this useful.
    		</p>
    		<p>This can be a form to submit feedback, or contact info</p>
    	</div>
    	<div id="spacer"></div>
    </body>
    </html>
    
    Code (markup):
     
    Cash Nebula, Jan 10, 2011 IP
  6. Icecold153

    Icecold153 Peon

    Messages:
    56
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I don't get it. Why do you need jQuery to do this?
     
    Icecold153, Jan 14, 2011 IP
  7. diondevelopment

    diondevelopment Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    You don't. You can just use CSS with an absolute positioned image or div which shows your feedback form div when clicked. jQuery would just be used to add some nice fadeins and animations to it.
     
    diondevelopment, Jan 15, 2011 IP