Peekaboo Side Table ( Right )

[Pebble]

Apr 15, 2014 10:57:50 GMT -8 April Jay said:

I'm totally new to this and I was wondering what widgets you were using in your preview and how I could add them (or similar ones) to mine.

Version 5 is blowing me away lol, there's so much new stuff to learn!

Sorry, I don't remember what the widgets were called, or where they were from.

You should be able to add most widgets to the side bars by adding the code they supply you with to the content area in the manage section for this plugin.

[ponzinomics]

Hi, I was trying to show this component only for threads. I would like to take metadata for each thread from the 'ProBoards Thread Meta Data' plugin and, based on thread metadata, build charts on the peekaboo, by using some external widgets. As first task, I was trying to show the peekaboo only for threads by adding something as:


if(proboards.data('route').params.thread_id != null) {
alert('is thread');
// use something as [???].style.display="none";
}


in the content section, BUT I just realized that only supports HTML code.

So, in order to achieve what I want, where would be the place to add the javascript and how to hide the component for anything but threads?

Thanks

[Pebble]

If I'm understanding correctly, you only want the widget to show on the thread page?

Wait , pressed wrong button!

If so, you can add your widget inside a div or span with an id, and then put this in your global footer:


<script>
$(document).ready(function () {
if ( proboards.data('route').name != "thread" ){
$('#idhere'). hide();
}
});
</script>


[ponzinomics]

Hi Pebble, I did something similar. As I wanted to hide the whole Peekaboo bar when is not showing a thread I added the code below and worked. I added to the Header of 'Sidebar Redux' plugin (?).


$(document).ready(function () {
if (proboards.data('route').name != "thread" ) {
document.getElementById('Pbar').style.display="none";
}
});
You proposal just hides widgets within the Peekaboo but keeps the Peekaboo. I wanted to hide the whole Peekaboo.

If you figure out some better solution (e.g. not adding the Peekaboo instead hiding it) or a better placement (other than Header of 'Sidebar Redux') please let me know. Otherwise, just close the issue. This can be ok.

Now, I will try to add the widgets dynamically to the Peekaboo but this is a different issue and hopefully I will have not problems on it.

Thanks

[ponzinomics]

I am trying to add dynamically scripts to Pcont (the content of Peekaboo).

There is not problem adding the script in the content section, when all parameters are known. It is properly rendered within the Peekaboo.

But when some parameter of the script depends on the thread, I must add them at runtime. Things I have tried in the Header Section of Sidebar Redux plugin:

* by trying to add as a HTML stream, if you edit the dynamic code with chrome, it is properly added but no executed, nothing is rendered. I tried to include eval(htmlContent) but nothing is rendered to the browser. Code:

var htmlContent = '<script type="text/javascript" src="https://d33t3vvu2t2yu5.cloudfront.net/tv.js"><\/script><script type="text/javascript">new TradingView.widget({"width": 300,"height": 300,"symbol": "OFDP:INDEX_BDI_1","interval": "W","timezone": "exchange","theme": "White","style": "3","toolbar_bg": "#f1f3f6","hide_top_toolbar": true,"save_image": false,"hideideas": true});<\/script>';

document.getElementById('Pcont').innerHTML = htmlContent;
* by adding as an object, the object is added and loaded properly. Problem is that it looks to be loading on the top of the page and removes everything else. The whole page is gone except the widget. Code:

var chart = new TradingView.widget({"width": 300,"height": 300,"symbol": "OFDP:INDEX_BDI_1","interval": "W","timezone": "exchange","theme": "White","style": "3","toolbar_bg": "#f1f3f6","hide_top_toolbar": true,"save_image": false,"hideideas": true});

document.getElementById('Pcont').addChild(chart);
Any reference to how adding dynamically content to Peekaboo?

Thanks

[Rogue Marie]

Hey,

Recently we switched from a left peekaboo side table to a right one. The conversion was fine, but some of our members are telling us that it shifts the site over to right left. 

CONTENT SHIFT

That is what it looks like whenever we open the right peekaboo table. 


believeinheroes.proboards.com This is the site URL. 

I am trying to figure out why it is doing that for some people but not for other? Can anyone help?

[Pebble]

It's happening because you have a lot of incorrect HTML. The best way to see this is, if you use firefox, right click on the background of your forum and select 'view page source' and then scroll down the page. Each item you see in red is incorrect HTML. Hovering your mouse over any red text will tell you what the problem is.

One of the fixes, is that you have tables with a <div> after a <tr>. After a <tr> should be a <td>.

[blc]

Pebble, is it possible to make the side tables only appear in certain categories?

[Pebble]

Mar 25, 2015 10:25:17 GMT -8 blc said:

Pebble, is it possible to make the side tables only appear in certain categories?

Add this to your global footer:


<script>
 if( proboards.data('route').name == "home" || proboards.data('page').category.id != 2 ){
   $('div#Pouter').hide();
 }
</script>
Changing the 2  to the category id that you want it to show on.

Rinse and repeat for other categories.

[blc]

Mar 25, 2015 12:51:51 GMT -8 Pebble said:

Mar 25, 2015 10:25:17 GMT -8 blc said:

Pebble, is it possible to make the side tables only appear in certain categories?

Add this to your global footer:


<script>
 if( proboards.data('route').name == "home" || proboards.data('page').category.id != 2 ){
   $('div#Pouter').hide();
 }
</script>
Changing the 2  to the category id that you want it to show on.

Rinse and repeat for other categories.

Thank you so much! I have found these plug ins to be to clever and been wanting to use them since I first joined PB and I think I finally have a perfect use for them at my site.

I added the code as you posted and it works nicely, BUT it still shows up in the pm/messages area. Is there something I can add to get it out of there?

Thank you again. This is so cool.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Mar 25, 2015 18:20:25 GMT -8 blc said:

Mar 25, 2015 12:51:51 GMT -8 Pebble said:

Add this to your global footer:


<script>
 if( proboards.data('route').name == "home" || proboards.data('page').category.id != 2 ){
   $('div#Pouter').hide();
 }
</script>
Changing the 2  to the category id that you want it to show on.

Rinse and repeat for other categories.

Thank you so much! I have found these plug ins to be to clever and been wanting to use them since I first joined PB and I think I finally have a perfect use for them at my site.

I added the code as you posted and it works nicely, BUT it still shows up in the pm/messages area. Is there something I can add to get it out of there?

Thank you again. This is so cool.

Add:

<script>
if( proboards.data('route').name.indexOf('conversation')!=-1){

$('div#Pouter').hide();

}

</script>
To remove it from message areas. 
Also, as developer of the Prize Wheel, I love your custom wheel image.

[blc]

Mar 26, 2015 1:25:29 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Mar 25, 2015 18:20:25 GMT -8 blc said:

Thank you so much! I have found these plug ins to be to clever and been wanting to use them since I first joined PB and I think I finally have a perfect use for them at my site.

I added the code as you posted and it works nicely, BUT it still shows up in the pm/messages area. Is there something I can add to get it out of there?

Thank you again. This is so cool.

Add:

<script>
if( proboards.data('route').name.indexOf('conversation')!=-1){

$('div#Pouter').hide();

}

</script>
To remove it from message areas. 
Also, as developer of the Prize Wheel, I love your custom wheel image.

Thanks for the additional code for getting it out of the message area. But, it's still there when you reply to a message.

I do have another question that you might be able to help me with.

If I decide to use the left as well but put that in certain boards with different data, how do I change the code?

I added an affiliate image to the Easy Affiliate where I thank the various coders etc whose plug ins or codes etc that I use. You have no site listed so I linked it back to your profile here at support. Is that okay?

I noticed you were -$400. Glad you like the wheel.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Mar 26, 2015 1:54:50 GMT -8 blc said:

Mar 26, 2015 1:25:29 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Add:


To remove it from message areas. 
Also, as developer of the Prize Wheel, I love your custom wheel image.

Thanks for the additional code for getting it out of the message area. But, it's still there when you reply to a message.

I do have another question that you might be able to help me with.

If I decide to use the left as well but put that in certain boards with different data, how do I change the code?

I added an affiliate image to the Easy Affiliate where I thank the various coders etc whose plug ins or codes etc that I use. You have no site listed so I linked it back to your profile here at support. Is that okay?

I noticed you were -$400. Glad you like the wheel.

Try this instead. That has added a hide to the new_message portion.

<script>
if( proboards.data('route').name.indexOf('conversation')!=-1 || proboards.data('route').name.indexOf('new_message')!=-1){

$('div#Pouter').hide();

}

</script>
With the left, all you would need is to know what the div ID is. Which I think is #leftPouter
But I'm not positive without seeing the code running. So basically wherever your code says $('div#Pouter').hide();
You will add below it $('div#leftPouter').hide();
So in the end my code would look like

<script>
if( proboards.data('route').name.indexOf('conversation')!=-1 || proboards.data('route').name.indexOf('new_message')!=-1){



$('div#Pouter').hide();


$('div#leftPouter').hide();

}

</script>
So to change his code it would basically be a copy and paste but in the copy you change the line $('div#Pouter').hide();
to $('div#leftPouter').hide();

As far as affiliates that's fine. I think my Compilation of Plugins would be a better link though.
Oh and I changed my amount of money to $39,934,234,243,234.00. I hope you don't mind lol.

[blc]

Mar 27, 2015 1:39:40 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Mar 26, 2015 1:54:50 GMT -8 blc said:

Thanks for the additional code for getting it out of the message area. But, it's still there when you reply to a message.

I do have another question that you might be able to help me with.

If I decide to use the left as well but put that in certain boards with different data, how do I change the code?

I added an affiliate image to the Easy Affiliate where I thank the various coders etc whose plug ins or codes etc that I use. You have no site listed so I linked it back to your profile here at support. Is that okay?

I noticed you were -$400. Glad you like the wheel.

Try this instead. That has added a hide to the new_message portion.

<script>
if( proboards.data('route').name.indexOf('conversation')!=-1 || proboards.data('route').name.indexOf('new_message')!=-1){

$('div#Pouter').hide();

}

</script>
With the left, all you would need is to know what the div ID is. Which I think is #leftPouter
But I'm not positive without seeing the code running. So basically wherever your code says $('div#Pouter').hide();
You will add below it $('div#leftPouter').hide();
So in the end my code would look like

<script>
if( proboards.data('route').name.indexOf('conversation')!=-1 || proboards.data('route').name.indexOf('new_message')!=-1){



$('div#Pouter').hide();


$('div#leftPouter').hide();

}

</script>
So to change his code it would basically be a copy and paste but in the copy you change the line $('div#Pouter').hide();
to $('div#leftPouter').hide();

As far as affiliates that's fine. I think my Compilation of Plugins would be a better link though.
Oh and I changed my amount of money to $39,934,234,243,234.00. I hope you don't mind lol.

Ok, I'm mildly confused here. I did take and replace the one section with the newer code and it is gone from the message and reply area. thanks for that.

Now if I want to use the left too, how would I do that. I tried using the same code but replace the one category id with the new one and adding left in both of the codes but it doesn't work.

I'll change the url to your compilation thread now that I have that!

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Mar 27, 2015 2:34:18 GMT -8 blc said:

Mar 27, 2015 1:39:40 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Try this instead. That has added a hide to the new_message portion.

<script>
if( proboards.data('route').name.indexOf('conversation')!=-1 || proboards.data('route').name.indexOf('new_message')!=-1){

$('div#Pouter').hide();

}

</script>
With the left, all you would need is to know what the div ID is. Which I think is #leftPouter
But I'm not positive without seeing the code running. So basically wherever your code says $('div#Pouter').hide();
You will add below it $('div#leftPouter').hide();
So in the end my code would look like

<script>
if( proboards.data('route').name.indexOf('conversation')!=-1 || proboards.data('route').name.indexOf('new_message')!=-1){



$('div#Pouter').hide();


$('div#leftPouter').hide();

}

</script>
So to change his code it would basically be a copy and paste but in the copy you change the line $('div#Pouter').hide();



As far as affiliates that's fine. I think my Compilation of Plugins would be a better link though.
Oh and I changed my amount of money to $39,934,234,243,234.00. I hope you don't mind lol.

Ok, I'm mildly confused here. I did take and replace the one section with the newer code and it is gone from the message and reply area. thanks for that.

Now if I want to use the left too, how would I do that. I tried using the same code but replace the one category id with the new one and adding left in both of the codes but it doesn't work.

I'll change the url to your compilation thread now that I have that!

Well now that you have it showing it's not leftPouter
It's LPouter
So it would be $('div#LPouter').hide(); instead of leftPouter