Action bar mod request/help

[Former Member]

no i'm not changing my mind, it's awesome don't forget

so i'v noticed it repeating, but it's only repeating in the threads with more than 1 post, maybe that's something to do with it.

what do want me to do to help ?

[Tumbleweed]

Aug 25, 2016 1:55:14 GMT -8 @joecool111 said:

no i'm not changing my mind, it's awesome don't forget

so i'v noticed it repeating, but it's only repeating in the threads with more than 1 post, maybe that's something to do with it.

what do want me to do to help ?

That is exactly what is happening and I have no clue why. The more posts you make the more images show up. I revamped the mp so that image is a background set in a div with a set height/width and the background set to no repeat but that didn't work. Next I'll check my html to make sure I didn't leave off a closing div somewhere. I'll be working on this again later today so don't be surprised if the site is messed up. What a weird and unexpected thing to happen. So close and yet so far....

I really don't know of anything you can do (but thanks) unless you want me to give you the coding and you can fiddle with it too. Otherwise, not sure how you can help. I may have to call in a impartial eye to take a look if I can't figure this out today, because I might not be thinking of something that is obvious to someone else.

Edit: After monkeying around with a dozen different things I ended up setting the image in a absolute position and that fixed it. I'll clean up the coding and add some comments in the css so you know what does what and I'll do this later today or maybe tonight but I think we got it!  Thanks for the help cross browser testing, Oreo, and if you have those other browsers still downloaded, feel free to do a one last check if you want to help some more. I haven't checked anything except Chrome but gotta do some real life work so need to put this to rest until later. 

[Former Member]

Aug 25, 2016 10:07:05 GMT -8 Tumbleweed said:

Aug 25, 2016 1:55:14 GMT -8 @joecool111 said:

no i'm not changing my mind, it's awesome don't forget

so i'v noticed it repeating, but it's only repeating in the threads with more than 1 post, maybe that's something to do with it.

what do want me to do to help ?

That is exactly what is happening and I have no clue why. The more posts you make the more images show up. I revamped the mp so that image is a background set in a div with a set height/width and the background set to no repeat but that didn't work. Next I'll check my html to make sure I didn't leave off a closing div somewhere. I'll be working on this again later today so don't be surprised if the site is messed up. What a weird and unexpected thing to happen. So close and yet so far....

I really don't know of anything you can do (but thanks) unless you want me to give you the coding and you can fiddle with it too. Otherwise, not sure how you can help. I may have to call in a impartial eye to take a look if I can't figure this out today, because I might not be thinking of something that is obvious to someone else.

that's a good idea.


ermmm you can give me the code if you want, more out of curiosity how it works to learn alittle, but i don't think i'll be any help. 

[Tumbleweed]

Aug 25, 2016 10:22:05 GMT -8 @joecool111 said:

Aug 25, 2016 10:07:05 GMT -8 Tumbleweed said:

That is exactly what is happening and I have no clue why. The more posts you make the more images show up. I revamped the mp so that image is a background set in a div with a set height/width and the background set to no repeat but that didn't work. Next I'll check my html to make sure I didn't leave off a closing div somewhere. I'll be working on this again later today so don't be surprised if the site is messed up. What a weird and unexpected thing to happen. So close and yet so far....

I really don't know of anything you can do (but thanks) unless you want me to give you the coding and you can fiddle with it too. Otherwise, not sure how you can help. I may have to call in a impartial eye to take a look if I can't figure this out today, because I might not be thinking of something that is obvious to someone else.

that's a good idea.


ermmm you can give me the code if you want, more out of curiosity how it works to learn alittle, but i don't think i'll be any help. 

Oh so sorry, I figured it out and I know I typed that I did but I guess I forgot to click send when I edited my post.  I just set it in a absolute position and that fixed it.
 
So here are the instructions and all the coding. There is a lot to do and I followed my instructions and set this up on a new clean slate template and all works in Chrome, Edge, FF and IE,  so here we go:


First create your custom field. I named mine "Banner" so if you put something else in that, you'll need to change other things so you might be better off just using what I used. So...

Field Name: Banner
Type: Text Field
Options (View/edit): URL (plain text) and I put 200 characters in there
Location:Profiles and Mini-Profies
Who Can Edit: Members and staff with power

Now to  add the custom field in the mini profile template I put this right below the regular custom field bit:


{foreach $[user.custom_field]}
{if $[user.custom_field.name] == "Banner"}
<div class="da_banner" style="background-image:url('$[user.custom_field.value]');"></div>
{/if}
{/foreach}


Here is my whole mini-profile template in case you want to refer to it or just copy and paste the whole thing rather than adding the above:

SPOILER: Click to show

<div class="$[miniprofile_class]">
$[user]<br />
{if $[user.is_guest]}Guest<br />{/if}
{if $[user.is_deleted]}<em>Deleted Member</em><br />{/if}
{if $[user.group]}
$[user.group.name]<br />$[user.group.stars]<br />
{elseif $[user.rank]}
$[user.rank.name]<br />
{if $[user.rank.stars]}
$[user.rank.stars]<br />
{/if}
{/if}
{if $[user.custom_title]}$[user.custom_title]<br />{/if}
$[user.warning.bar]
<br />
{if $[user.avatar]}
<div class="avatar">$[user.avatar]</div><br />
{/if}
{if $[user.personal_text.message]}
$[user.personal_text]<br />
{/if}
{if $[user.is_member]}
<div class="info">
Posts: $[user.posts]{if $[user.gender]}<span class="float-right">$[user.gender.image]</span>{/if}

{foreach $[user.mini_custom_field]}
<br /><span class="$[user.mini_custom_field.content_class]">$[user.mini_custom_field.name]: $[user.mini_custom_field.value]</span>
{/foreach}


{foreach $[user.custom_field]}
{if $[user.custom_field.name] == "Banner"}
<div class="da_banner" style="background-image:url('$[user.custom_field.value]');"></div>
{/if}
{/foreach}

{if $[user.is_online]}<br /><span class="italic">Member is Online</span>{/if}
</div><br />
{/if}
{if $[user.badges_miniprofile]}
<div class="$[user.badges_miniprofile_container_class]">
{foreach $[user.badges_miniprofile]}
$[user.badges_miniprofile.icon]
{/foreach}
</div>
{/if}
</div>

You can go to your own profile and make sure your new custom field is there and add a banner.
(here is one you can use until you get your own, if you don't have one now: storage.proboards.com/3028697/i/VNtuQjKJLsXJevvVyDPc.png  )

Next I head to your thread template in in the thread tab and find this...

<div class="control-bar ui-helper-clearfix $[scroll_class]">

and add this right above it so it looks like this.....

<p style="clear:both;"></p>
<div id="noshow" class="hidden">
<div id="left_sidie"><div id="move-image"></div></div>
<div id="right_sidie"></div>
</div>
<p style="clear:both;"></p>
<div id="mydiv"></div>

<div class="control-bar ui-helper-clearfix $[scroll_class]">


And then at the very bottom add this. This script makes the pop outs on the side:

<script>
window.onscroll = function (oEvent) {
 var mydivpos = document.getElementById("mydiv").offsetTop;
var scrollPos = $(document).scrollTop();
   if(scrollPos >= mydivpos)
   document.getElementById("noshow").className = "";
 else
   document.getElementById("noshow").className = "hidden";
   
};
</script>



Here is the whole thread template if case you want to just paste the whole thing in rather than adding the two parts above.

SPOILER: Click to show

<div class="container posts">
<div class="title-bar">
{if $[reply_button]}
<ul class="controls"><li>$[reply_button]</li></ul>
{/if}
<h1>$[thread.subject]</h1>
</div>

<p style="clear:both;"></p>
<div id="noshow" class="hidden">
<div id="left_sidie"><div id="move-image"></div></div>
<div id="right_sidie"></div>
</div>
<p style="clear:both;"></p>
<div id="mydiv"></div>

<div class="control-bar ui-helper-clearfix $[scroll_class]">
$[search]
<div class="controls">
$[action_menu]
</div>
<div class="float-left">$[thread.icons]</div>
$[pagination]
</div>

<div class="content cap-bottom">
$[thread.labels]
$[poll]
<table class="list" role="presentation">
<tbody class="$[list_class]">
$[post_list]
</tbody>
</table>
{if !$[quick_reply]}{if $[bottom_reply_button]}
<div class="reply_button pad-all-double">$[bottom_reply_button]<br class="clear" /></div>
{/if}{/if}
</div>
</div>
$[quick_reply]

<script>
window.onscroll = function (oEvent) {
var mydivpos = document.getElementById("mydiv").offsetTop;
var scrollPos = $(document).scrollTop();
if(scrollPos >= mydivpos)
document.getElementById("noshow").className = "";
else
document.getElementById("noshow").className = "hidden";

};
</script>

Now remember Ulises gave us that code to just toss into a plugin. And I know, so many things in different places but that is just how it worked out. So go Build a Plug in. Give it a name and click on the Components tab and then on the far right click the JS box. Add this to the JS code textarea:


$(document).ready(function(){
var first_pst_id = pb.data('page').thread.first_post_id;
var mini_profile = $('tr#post-' + first_pst_id).find('.mini-profile').html();
$('#right_sidie').append(mini_profile);
});


Now I needed a code to move the banner that shows in the pop out profile on the right and move it to the left side so I added this to my Global Header. (I know it could probably be in the plugin too but I didn't feel like messing with it)

<script type="text/javascript">
$(document).ready(function() {
     $('#move-image').append($('.da_banner'));
});
</script>

And finally the css that goes in the bottom of your style sheet.

/*popouts in posts*/
/*this is just making a div that goes across the page behind the forum*/
#noshow {
width:99%;
height:0px;
position: fixed;
top: 2px;
left: 0px;
z-index:1;
}
/*you can adjust the margin to make it closer or futher to the forum*/
#left_sidie{
   width:150px;
   height:60px;
   background-color:gray;
   border:1px solid red;
   margin-left:10px;
   float:left;padding:4px;
}
#right_sidie{width:150px;
   height:400px;
   background-color:gray;
   border:1px solid red;
   float:right;
   padding:4px;margin-right:-8px;
}
/*this positions the banner on the left*/
#left_sidie .da_banner{
   position:absolute;
   top:2px;
   left:16px;
width:130px;
height:60px;
}
/*this is just hiding things until you hit the scroll mark*/  
.hidden { display: none; }
/*these three classes/ids are hiding the banner on the default and right side profile*/
.mini-profile .custom-field-banner, .mini-profile .da_banner{
   display:none!important;}
#right_sidie .custom-field-banner{display:none!important;}
#right_sidie .da_banner{display:none;
}



[Former Member]

it kinda works i'v done everything right as you said. (double checked but we can check again) 


I'v have a lot of mod stuff in my templates, so it might need a little tweeking. 


so i'm going to leave my site on maintaince for today, i don't want to undo everything then you come saying " where's it all gone !""     so i'll leave it as is. 


looking forward to the awesomeness  

[Former Member]

you have an > missing  but i'v fixed that. 

[Former Member]

goldenbeatz.uk/thread/377/facebook-share-any-text-feature so you can see it

[Tumbleweed]

Aug 26, 2016 2:08:07 GMT -8 @joecool111 said:

you have an > missing  but i'v fixed that. 

Thanks for the catch. I fixed it in my previous post.

I should have asked what site you wanted this for because had I seen which site, I probably wouldn't have even attempted this and going by your screen cap, you have tons of things going on I just didn't account for.  My suggestion for you, as I said in my pm back to you,  is to download your theme to your computer and upload it to a test site where I would feel fine about you giving me access to your templates, etc.  Even if you took your current forum out of maint. mode so I could take a look, trying to pin point a problem by view source is very difficult and especially when something his hidden viewing the source, which what I gave is hidden.

But before you go to that trouble of downloading your theme, which side tables are you using? I can add that to my test site and see if I get the same thing you get.

[Former Member]

^^ my links in a post above you.


sidebar dulux

[Tumbleweed]

I replied to your pm rather than here. As I said, what I gave you doesn't want to work with the side bars. I can't get the z-index no matter what number I put in there,  to put this on top of the side bars and with the side bar enabled, it makes it show when you simply start scrolling rather than when the control bar goes in a fixed position. I left your test site with the side tables disabled so you can see that they are clashing and it works as planned with the side bar disabled. As I said in the pm, I just am not sure I can get both to work together unless the side bar is disabled on threads and posts. But I'll keep thinking about some fix.

[Former Member]

Aug 27, 2016 20:00:38 GMT -8 Tumbleweed said:

I replied to your pm rather than here. As I said, what I gave you doesn't want to work with the side bars. I can't get the z-index no matter what number I put in there,  to put this on top of the side bars and with the side bar enabled, it makes it show when you simply start scrolling rather than when the control bar goes in a fixed position. I left your test site with the side tables disabled so you can see that they are clashing and it works as planned with the side bar disabled. As I said in the pm, I just am not sure I can get both to work together unless the side bar is disabled on threads and posts. But I'll keep thinking about some fix.

ok well i was thinking of disabling the sidebars in the threads anyways because it looks messy behind them with them on top.

i'll go check your message. 

[Former Member]

It's all working now but we have a problem so i'm letting you know before i forget.

it's messed all the recent post up goldenbeatz.uk/posts/recent


i'm guessing this is a simple fix, but i can't figure it our myself.

[Tumbleweed]

@joecool111 ,

To get those links to working in the right side popout thingy, it was me and nothing to do with your plugins and such.

In the css, set the z-index to 1 and set the height to 0px like I have it here: (Verified all is o.k. in IE,FF,Chrome and Edge.)

#noshow {
width:99%;
height:0px;
position: fixed;
top: 40px;
left: 0px;
z-index:1;
}


I haven't figured out the recent posts thing yet and how to get it to not show up there.

[Former Member]

Aug 30, 2016 18:46:29 GMT -8 Tumbleweed said:

@joecool111 ,

To get those links to working in the right side popout thingy, it was me and nothing to do with your plugins and such.

In the css, set the z-index to 1 and set the height to 0px like I have it here: (Verified all is o.k. in IE,FF,Chrome and Edge.)

#noshow {
width:99%;
height:0px;
position: fixed;
top: 40px;
left: 0px;
z-index:1;
}


I haven't figured out the recent posts thing yet and how to get it to not show up there.

well done:) it works just fine.


so there's just recent posts bug to fix.


and think it'll be done then. 

[Former Member]

ok we have another problem in members recent posts, it's not showing the mp on the rightie, but the leftie banner works. 
goldenbeatz.uk/user/69/recent


i'm guessing it's to do with our other problem with recent posts. 







So 'recent posts' want to be disabled and my main sidebars back.

And the 'members recent posts' is just the mp on the right not showing.