Search jQuery

jQuery Forum

Slide out tab

in Using jQuery Plugins • 3 months ago

I have been looking for a slide out tab for a couple of days now and so far every one I have seen is positioned on the far left or far right of the browser. I want to position mine in a table data cell exactly where I place it and none of the plugins I have tried so far work that way. Is there another one out there that can be positioned anywhere you want it?

Thanks,
Sam

Replies(1)

jakecigar

Re: Slide out tab

3 months ago

I’m not quite sure I understand. So I made up an example. Is this what you mean?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$.fn.sot=function(){
return this.hide().each(function(){
var sot=$(this),
button=sot.siblings('.sot-button'),
toggle=function(){
sot.toggle('slide',{direction:'left'})
}
sot.click(toggle)
button.click(toggle)
})
}
$(function(){
$('.sot').sot()
})
</script>
<style type="text/css">
col{width:100px}
td {overflow:hidden ;}
tr div
{
height: 5em;
max-height: 5em;
min-height: 5em;
}
</style>
<title>sot</title>
</head>
<body>
<table>
<col/>
<col/>
<col/>
<col/>
<caption>
Caption!
</caption>
<thead>
<tr>
<th>
head
</th>
<th>
head
</th>
<th>
head
</th>
<th>
head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div class="sot">
Slid out tab info
</div>
<span class="sot-button">
◉
</span>
some text
</div>
</td>
<td>
<div>
<div class="sot">
Slid out tab info
</div>
<span class="sot-button">
◉
</span>
some text
</div>
</td>
<td>
<div>
<div class="sot">
Slid out tab info
</div>
<span class="sot-button">
◉
</span>
some text
</div>
</td>
<td>
<div>
<div class="sot">
Slid out tab info
</div>
<span class="sot-button">
◉
</span>
some text
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

Slide out tab

Replies(1)

Re: Slide out tab

Statistics

Tags

Actions

Related Posts