Simple JS, can't make it work for more than first post (cause I'm a moron ha ha)

[Jade Elizabeth]

So I am using JS from this tutorial to show and hide things....But I seem to have overlooked the whole "I need it to work for each message" thing. I'm not really familiar with JS...so I was hoping someone could help me get it to work per post?

Live link.

If you click any of the blue arrows on the live link above it interacts with the first post only. It should show an up arrow when clicked on any post, but only in the post it is clicked on. I have no idea what I'm doing .

[Suki]

You need to work with every message ID, I have this simple script that does the job:

Code Select Expand


<!--
function toggleDiv(divid){
if(document.getElementById(divid).style.display == \'none\'){
document.getElementById(divid).style.display = \'block\';
document.pageLoading.TCallLabel(\'/\',\'restart_function\');
}
else{
document.getElementById(divid).style.display = \'none\';
}
}
//-->
</script>


Then all you need to have is an anchor tag with the message ID you want to change:

<a href="javascript:void(0)" onmousedown="toggleDiv(someIDhere);" >title</a>

can be onmousedown or any other action you want.

[Matthew K.]

You need to have an identifier and unique value for each post.

Specifically with their example, you'd want to change it to something like...

Code Select Expand

<p>...This is all visible content...
<a href="#" id="example-show" class="showLink"
onclick="showHide('post_' . $message['id']);return false;">See more.</a>
</p>
<div id="post_', $message['id'], '" class="more">
<p>...This content is hidden by default...</p>
<p><a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">Hide this content.</a></p>
</div>

[Jade Elizabeth]

Labradoodle how would I change the JS to work?

Suki I can't seem to get it to work, did I do something wrong here?

Code Select Expand

// Let's "show" some things!
echo '<a href="javascript:void(0)" onmousedown="toggleDiv(quickbuttonshow' , $message['id'] , ');"><img src="', $settings['images_url'], '/BRSquickbuttons/up.png" alt="Show/Hide More Options!" title="Show/Hide More options!" class="paddingbottom" /></a><br />';


I am so confused. How do I set all these divs to display: none? If they all have message IDs in them that's like a billion classes .

Thanks for helping me guys, I appreciate it!

[Matthew K.]

You wouldn't have to change the JS at all.

[Jade Elizabeth]

Wait I got it using Suki's example ha ha. But it doesn't start hidden, how do I start it hidden?

I'll try yours Labradoodle .

[Matthew K.]

Add style="display: none;" to what you want hidden, using Suki's example.

[Jade Elizabeth]

Omg! Thank you guys SO MUCH!! I was fiddling with this for AGES!!

You guys rock, I love you both sooooo much .

[Matthew K.]

Not a problem, but I didn't do much.

Topic solved?

[Jade Elizabeth]

Yes! THANK YOOOOOOOOOU!!!

[Jade Elizabeth]

Can you guys see the down arrow when logged out? I can and I shouldnt be able to....

Code Select Expand

<div class="quickbuttons">';

// Show a checkbox for quick moderation?
if (!empty($options['display_quick_mod']) && $options['display_quick_mod'] == 1 && $message['can_remove'])
echo '
<input type="checkbox" name="msgs[]" value="', $message['id'], '" class="input_check paddingbottom" /><br />';

// Maybe they want to report this post to the moderator(s)?
if ($context['can_report_moderator'])
echo '
<a href="', $scripturl, '?action=reporttm;topic=', $context['current_topic'], '.', $message['counter'], ';msg=', $message['id'], '"><img src="', $settings['images_url'], '/BRSquickbuttons/report.png" alt="Report this to a Moderator" title="Report this to a Moderator" class="paddingbottom" /></a>';

// Can they reply? Have they turned on quick reply?
if ($context['can_quote'] && !empty($options['display_quick_reply']))
echo '
<a href="', $scripturl, '?action=post;quote=', $message['id'], ';topic=', $context['current_topic'], '.', $context['start'], ';last_msg=', $context['topic_last_message'], '" onclick="return oQuickReply.quote(', $message['id'], ');"><img src="', $settings['images_url'], '/BRSquickbuttons/quote.png" alt="', $txt['quote'], '" title="', $txt['quote'], '" class="paddingbottom" /></a><br />';

// So... quick reply is off, but they *can* reply?
elseif ($context['can_quote'])
echo '
<a href="', $scripturl, '?action=post;quote=', $message['id'], ';topic=', $context['current_topic'], '.', $context['start'], ';last_msg=', $context['topic_last_message'], '"><img src="', $settings['images_url'], '/BRSquickbuttons/quote.png" alt="', $txt['quote'], '" title="', $txt['quote'], '" class="paddingbottom" /></a><br />';

// Make sure they're logged in!
if (!$user_info['is_guest'])
{

// Can the user modify the contents of this post?
if ($message['can_modify'])
echo '
<a href="', $scripturl, '?action=post;msg=' , $message['id'] , ';topic=', $context['current_topic'], '.', $context['start'], '"><img src="', $settings['images_url'], '/BRSquickbuttons/edit.png" alt="', $txt['modify'], '" title="', $txt['modify'], '" class="paddingbottom" /></a><br />';

// Let's "show" some things!
echo '<a href="javascript:void(0)" onmousedown="toggleDiv(' , $message['id'] , ');"><img src="', $settings['images_url'], '/BRSquickbuttons/down.png" alt="Show/Hide More Options!" title="Show/Hide More options!" class="paddingbottom" /></a><br />

<div id="' , $message['id'] , '" style="display: none;">';

// How about... even... remove it entirely?!
if ($message['can_remove'])
echo '
<a href="', $scripturl, '?action=deletemsg;topic=', $context['current_topic'], '.', $context['start'], ';msg=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '" onclick="return confirm(\'', $txt['remove_message'], '?\');"><img src="', $settings['images_url'], '/BRSquickbuttons/delete.png" alt="', $txt['remove'], '" title="', $txt['remove'], '" class="paddingbottom" /></a><br />';

// What about splitting it off the rest of the topic?
if ($context['can_split'] && !empty($context['real_num_replies']))
echo '
<a href="', $scripturl, '?action=splittopics;topic=', $context['current_topic'], '.0;at=', $message['id'], '"><img src="', $settings['images_url'], '/BRSquickbuttons/split.png" alt="', $txt['split'], '" title="', $txt['split'], '" class="paddingbottom" /></a><br />';

// Can we restore topics?
if ($context['can_restore_msg'])
echo '
<a href="', $scripturl, '?action=restoretopic;msgs=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '"><img src="', $settings['images_url'], '/BRSquickbuttons/approve.png" alt="', $txt['restore_message'], '" title="', $txt['restore_message'], '" class="paddingbottom" /></a>';

// Maybe we can approve it, maybe we should?
if ($message['can_approve'] || $message['can_unapprove'])
echo '
<a href="', $scripturl, '?action=moderate;area=postmod;sa=approve;topic=', $context['current_topic'], '.', $context['start'], ';msg=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '"><img src="', $settings['images_url'], '/BRSquickbuttons/', $txt[$message['can_unapprove'] ? 'unapprove' : 'approve'], '.png" alt="', $txt[$message['can_unapprove'] ? 'unapprove' : 'approve'], '" title="', $txt[$message['can_unapprove'] ? 'unapprove' : 'approve'], '" class="paddingbottom"/></a><br />';

// Can we issue a warning because of this post?  Remember, we can't give guests warnings.
if ($context['can_issue_warning'] && !$message['is_message_author'] && !$message['member']['is_guest'])
echo '
<a href="', $scripturl, '?action=profile;area=issuewarning;u=', $message['member']['id'], ';msg=', $message['id'], '"><img src="', $settings['images_url'], '/BRSquickbuttons/warn.png" alt="', $txt['issue_warning_post'], '" title="', $txt['issue_warning_post'], '" class="paddingbottom" /></a>';

// Is this user allowed to modify this member's karma?
if ($message['member']['karma']['allow'] && empty($message['limitkarma']))
echo '
<a href="', $scripturl, '?action=modifykarma;sa=applaud;uid=', $message['member']['id'], ';topic=', $context['current_topic'], '.' . $context['start'], ';m=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '"><img src="', $settings['images_url'], '/BRSquickbuttons/applaud.png" class="paddingbottom" alt="like" title="like" /></a>
<a href="', $scripturl, '?action=modifykarma;sa=smite;uid=', $message['member']['id'], ';topic=', $context['current_topic'], '.', $context['start'], ';m=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '"><img src="', $settings['images_url'], '/BRSquickbuttons/smite.png" class="paddingbottom" alt="dislike" title="dislike" /></a>';

// Let's "show" some things!
echo '<a href="javascript:void(0)" onmousedown="toggleDiv(' , $message['id'] , ');"><img src="', $settings['images_url'], '/BRSquickbuttons/up.png" alt="Show/Hide More Options!" title="Show/Hide More options!" class="paddingbottom" /></a><br />
</div>';
}
echo '
</div>


[Matthew K.]

That's odd...it's wrapped in if (!$user_info['is_guest) so it should technically work?

[Jade Elizabeth]

That's what I thought....is there something interfering with it or something?

[Matthew K.]

Shoot me a PM within the next 12 hours and I'll come back here? It's 4:06am here, and trying to wrap some things up.

[System32Cro]

why not using jQuery?
change this:

Code Select Expand

echo '<a href="javascript:void(0)" onmousedown="toggleDiv(' , $message['id'] , ');"><img src="', $settings['images_url'], '/BRSquickbuttons/up.png" alt="Show/Hide More Options!" title="Show/Hide More options!" class="paddingbottom" /></a><br />
to:

Code Select Expand

echo '<a href="javascript:void(0)" onmousedown="toggleDiv(' , $message['id'] , ');"><img id="show_hide_img" src="', $settings['images_url'], '/BRSquickbuttons/up.png" alt="up" title="Show/Hide More options!" class="paddingbottom" /></a><br />

function toggleDiv:

Code Select Expand

function toggleDiv(id)
{
if($('#show_hide_img').attr('alt') == 'up')
{
$('#show_hide_img').attr({
'src':path_to_down_image,
'alt':'down',
});
}
else if($('#show_hide_img').attr('alt') == 'down')
{
$('#show_hide_img').attr({
'src':path_to_up_image,
'alt':'up',
});
}
//other code...
}

don't forget to include jQuery in index.template.php

Code Select Expand

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

[Arantor]

There's no need to add jQuery for this, why make the page load slower unnecessarily?

[Jade Elizabeth]

There's no need to add jQuery for this, why make the page load slower unnecessarily?

I've been arguing about that for the past 2 days, I have a lot of stuff loading I don't need to add to it lol.

But thank you for the suggestion .

Arantor can you see what's happening with the code I posted above to make it show for guests wrongly.

[Arantor]

Add $user_info to the list of globals in template_main() in Display.template.php.

$user_info is not in scope normally in the display template, so $user_info['is_guest'] will throw an undefined index error and then promptly resolve to false, so !$user_info['is_guest'] will be 'not false' -> true.

[System32Cro]

There's no need to add jQuery for this, why make the page load slower unnecessarily?

I've been arguing about that for the past 2 days, I have a lot of stuff loading I don't need to add to it lol.

But thank you for the suggestion .

Arantor can you see what's happening with the code I posted above to make it show for guests wrongly.

Than just try with jQuery, just to test if it works

[Arantor]

Than just try with jQuery, just to test if it works

Or not, seeing how there's nothing wrong with the JavaScript already in use and no need to add another x KB to the site when you REALLY DON'T NEED TO.