jquery slide out from record
Question by Matthew
I am looking for some advice on an idea which i am unsure if i can do it or not…
i am loading records out of a database and listing them in individual divs and adding an id number from the databse to the divs,the divs are about 100px wide and right across the screen..
i am wondering if i can use some kinda of plugin by jquery so that if i click on the record a tab would slide out from the right hand side with more data on that individual record from the database.. and then i could close it and it would side back so i can only see the records again..
i have had a bit of a look at the jquery ui page with all the demos but i didnt really find anything…
any help or pointers would be great.. even if u know of something simllar ill be happy to look into it…
thanks in advance for any help
Answer by ComputerArts
Ok so here’s my fiddle
HTML (standard containers, etc)
<div id="container">
<div id="buttons-container"></div>
<div id="record">
<div id="record-content"></div>
<a href="#" id="bt-close" onclick="closeRecord(); return false;">Close</a></div>
</div>
CSS
a.bt-record {
display:block;
width:100px;
height:100px;
background:#999999;
color:#000;
line-height:100px;
text-align:center;
float:left;
margin:0 10px 10px 0;
text-decoration:none;
}
a { color:#fff; }
#container {
width:100%;
height:100%;
overflow:hidden;
position:relative;
}
#record {
position:absolute;
right:-240px;
top:100px;
width:200px;
height:200px;
background:#000;
padding:20px;
color:#fff;
z-index:1;
}
Javascript
//your data in a array of objects (could be something else)
var data = {
1 : {name:'Record 1', text:'This is the text 1', options:'Anything 1'},
2 : {name:'Record 2', text:'This is the text 2', options:'Anything 2'},
3 : {name:'Record 3', text:'This is the text 3', options:'Anything 3'},
4 : {name:'Record 4', text:'This is the text 4', options:'Anything 4'},
5 : {name:'Record 5', text:'This is the text 5', options:'Anything 5'},
6 : {name:'Record 6', text:'This is the text 6', options:'Anything 6'},
7 : {name:'Record 7', text:'This is the text 7', options:'Anything 7'},
8 : {name:'Record 8', text:'This is the text 8', options:'Anything 8'},
9 : {name:'Record 9', text:'This is the text 9', options:'Anything 9'}
};
$(document).ready(function() {
populateEntries();
});
//dynamically populate the entries
function populateEntries() {
for (entry in data){
console.log(entry);
$('#buttons-container').append('<a class="bt-record" href="#" onclick="showRecord(' + entry + '); return false;">' + data[entry].name + '</a>');
}
}
//show the record
function showRecord(id) {
//create the html
var html = '';
html += '<p>Name : ' + data[id].name + '</p>';
html += '<p>Text : ' + data[id].text + '</p>';
html += '<p>Name : ' + data[id].options + '</p>';
$('#record-content').html(html);
$('#record').animate({right:0}, 500);
}
function closeRecord() {
$('#record').animate({right:-240}, 500);
}
In this example, I populate the records dynamically, but if you want a SEO friendly way of doing it, you can create the HTML in the page directly. Let me know if you have questions.
Answer by Starx
Sure, let me show you a simple example. It is rather very easy
<table>
<tr class="recordrow" id="row-1"> <!-- row-X will be the unique way to identify the row -->
<td>...</td> <!-- The record field -->
<td>...</td>
....
</tr>
</table>
<!-- Now we create the details Div, but as reference to the `row-X` -->
<div class="details" id="details-1">
... More details of the records
</div>
then a simple jQuery snippet like this will get the job done:
$(".recordrow").click(function() {
var divid = "details-" + $(this).attr('id').split("-")[1]; //Create the id of the div
$("#"+divid).show().animate({ "left": '200px'}); //Bring the div from right to left with 200px padding from the screen
});
Demo
