Post by Milk on May 23, 2014 22:40:40 GMT -8
Forum URL: one-ring.boards.net/thread/13
I am experimenting with Javascript and tried to make a remodel whereby when you click on a button, the miniprofile pops up.
I don't know how to do this, and after some online tutorials, I accomplished this much (look at the link).
So, onto my issue/question.
When I click of any of the "Show/Hide Profile" buttons, regardless of where it is on the page, the mini-profile from the first post pops up. I'd like the mini-profile to pop up under the button I clicked. Can somebody please help? I think that I should've used class instead of ID, but I don't know how to.
And secondly, I'd like to know how to animate the miniprofile when it pops up or disappears i.e. It slides down when you want to see it and then slides up to disappear. Is it possible for someone to explain to me how this is done?
Many thanks!
Here's what I have in the Post List Layout Template:
I am experimenting with Javascript and tried to make a remodel whereby when you click on a button, the miniprofile pops up.
I don't know how to do this, and after some online tutorials, I accomplished this much (look at the link).
So, onto my issue/question.
When I click of any of the "Show/Hide Profile" buttons, regardless of where it is on the page, the mini-profile from the first post pops up. I'd like the mini-profile to pop up under the button I clicked. Can somebody please help? I think that I should've used class instead of ID, but I don't know how to.
And secondly, I'd like to know how to animate the miniprofile when it pops up or disappears i.e. It slides down when you want to see it and then slides up to disappear. Is it possible for someone to explain to me how this is done?
Many thanks!
Here's what I have in the Post List Layout Template:
{foreach $[post]}
<tr id="$[post.content_id]" class="$[post.content_class]{if $[post.even]} even{/if}{if $[viewing_recent_posts]} recent{/if}">
<td class="$[post.unblocked_class]">
<table role="grid">
<tr>
<!---<td class="left-panel" rowspan="2">
$[post.created_by.miniprofile]
</td>--->
<td class="content">
<article>
<div class="content-head ui-helper-clearfix">
<input type=button name=type id='bt1' value='Show Profile' onclick="setVisibility('show-mp');";>
<div id="show-mp">
$[post.created_by.miniprofile]
</div>
<div class="controls">
$[post.quote_button]
$[post.edit_button]
$[post.likes.button]
$[post.select_options]
</div>
<div class="info">
$[post.thread]
<span class="date">$[post.created_on]</span>
{if $[post.how_posted]}
<span class="post-method">via $[post.how_posted]</span>
{/if}
$[post.likes]
</div>
</div>
<h3 class="title aria-hidden">Post by $[post.created_by.name] on $[post.created_on]</h3>
<div class="message" style="min-height:400px;">$[post.message]</div>
</article>
</td>
</tr>
<tr>
<td class="foot">
{if $[post.edited]}
<div class="edited_by"><span class="italic">Last Edit:</span> $[post.edited.date] by $[post.edited.by_user]{if $[post.edited.reason]}: $[post.edited.reason]{/if}</div>
{/if}
{if $[post.created_by.signature]}
<div class="signature">$[post.created_by.signature]</div>
{/if}
</td>
</tr>
</table>
</td>
{if $[post.is_blocked]}
<td class="$[post.blocked_class] content center">
<div class="message note pad-bottom">This post is hidden</div>
$[post.display_blocked_post_button]
</td>
{/if}
</tr>
{/foreach}
{if !$[post]}
<tr class="last"><td class="last center" colspan="1">No posts were found.</td></tr>
{/if}
<script type="text/javascript">
function setVisibility(id) {
if(document.getElementById('bt1').value=='Hide Profile'){
document.getElementById('bt1').value = 'Show Profile';
document.getElementById(id).style.display = 'none';
document.getElementById(id).style.display = 'none';
}else{
document.getElementById('bt1').value = 'Hide Profile';
document.getElementById(id).style.display = 'block';
}
}
</script>
<style>
#show-mp {
position : relative;
top: 10px;
width: 200px;
height: 400px;
z-index: 999999;
margin-bottom:-432px;
background-color:#fff;border:1px solid #000000;
display: none;
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
-ms-transition: .5s;
}
</style>
