show and hide shoutbox with a checkbox

[Mike]

I want to control the shout box from within my plugin.
I would like to show and hide it by checking a checkbox.
I really need to now how the shoutbox selector would look like.
can anybody help me please?
thanks in advance

[Todge]

Dec 8, 2020 16:59:41 GMT -8 Mike said:

I want to control the shout box from within my plugin.
I would like to show and hide it by checking a checkbox.
I really need to now how the shoutbox selector would look like.
can anybody help me please?
thanks in advance

Are you using JQuery or JavaScript?

JQuery...

$('.shoutbox ').css('display', 'none');

JavaScript...

var sb = document.getElementsByClassName('shoutbox');
sb[0].style = 'display: none';

[Mike]

Todge
Thanks for your help
I'm using jquery
I have 3 plugins setup in the same way but different uses.
I created 3 different pages for them but getting some conflict with them.
if I separate them in the manager would that clear up the conflict?
Also I was using hide and show for the shoutbox. Why wouldn't that work were css worked?

[Todge]

Dec 9, 2020 8:21:20 GMT -8 Mike said:

Todge
Thanks for your help
I'm using jquery
I have 3 plugins setup in the same way but different uses.
I created 3 different pages for them but getting some conflict with them.
if I separate them in the manager would that clear up the conflict?
Also I was using hide and show for the shoutbox. Why wouldn't that work were css worked?

.hide() and .show() should work just fine too.

As for your conflicts, you must be either sharing variable names or trying to manipulate objects that have already been changed with one of your other plugins, separating them may help, but I'd concentrate on one, get that working as you like then move onto the next, that way you should be able to resolve any conflicts as you find them.

[Mike]

Thank you Todge

[Mike]

Todge

It seems the only thing not working properly is shout box
I have it setup were if you don't have a url for the source on audio player(podcastor) it will hide the source player and hide the shoutbox.
On the other plugin it is a video player(new video caddy)  there is a url for that one and the shout box is supposed to show on that. but the shout box is not showing like it is supposed to.
Could you please take a look maybe you will see the problem?
my forum: link

[Lynx]

Dec 10, 2020 13:54:29 GMT -8 Mike said:

Todge

It seems the only thing not working properly is shout box
I have it setup were if you don't have a url for the source on audio player(podcastor) it will hide the source player and hide the shoutbox.
On the other plugin it is a video player(new video caddy)  there is a url for that one and the shout box is supposed to show on that. but the shout box is not showing like it is supposed to.
Could you please take a look maybe you will see the problem?
my forum: link

If you want to post, or PM, your complete JavaScript code, it can be taken a look at. If not, how are you testing for a URL presence in your JS? Looking at your forum, it looks like you should be going along the lines of something like this:


if (pb.plugin.get('new_video_caddy').settings.url.length) {
  // code to run if there's something in the URL field
}
else {
  // code to run if URL field is blank
}


will result in true if there's something in the URL field (there's a length to it). It will result to false if the length is 0 (empty field). Be wary of unseen spaces in an apparently empty field. I typically do a CTRL+A in the field then hit the DELETE key to make sure everything is cleared out when I want it empty.

[Todge]

Dec 10, 2020 13:54:29 GMT -8 Mike said:

Todge

It seems the only thing not working properly is shout box
I have it setup were if you don't have a url for the source on audio player(podcastor) it will hide the source player and hide the shoutbox.
On the other plugin it is a video player(new video caddy)  there is a url for that one and the shout box is supposed to show on that. but the shout box is not showing like it is supposed to.
Could you please take a look maybe you will see the problem?
my forum: link

It sounds like one plugin is ignoring the result of the other, in this case it would be better for both plugins to be written as one, then you can compare the two URL settings and if either one is not blank, follow one set of rules, otherwise follow another.

Taking Lynx 's example you could then do something like...

if (pb.plugin.get('plugin_name').settings.video_url.length || pb.plugin.get('plugin_name').settings.audio_url.length) {
// code to run if there's something either URL field
}
else {
// code to run if URL both fields are blank
}

[Mike]

Todge
How would that work on two different pages?

[Mike]

Todge
Hi
I would really like to have these plugins separate so I can have two separate pages because one is mp3 and the other video.
my code is below:
I used MSG's if statement.
Now I used the if statement on both plugins but still when the url is filled in the shout box will not show and #stop will not hide.
I looks like it works on the podcastor plugin


$(document).ready(function(){

       var sap=pb.plugin.get('new_video_caddy').settings.url;
       var title=pb.plugin.get('new_video_caddy').settings.title;
       var color=pb.plugin.get('new_video_caddy').settings.color;
       var size=pb.plugin.get('new_video_caddy').settings.size;
       var border=pb.plugin.get('new_video_caddy').settings.style;
       var bcolor=pb.plugin.get('new_video_caddy').settings.bcolor;
       var comm=pb.plugin.get('new_video_caddy').settings.comments;
       var wt=pb.plugin.get('new_video_caddy').settings.wt;
       var back=pb.plugin.get('new_video_caddy').settings.background_color;
               
   var n_caddy='<center><div id="featured">';
         n_caddy+='<h2 id="mes" style="color:#'+color+';font-size:'+size+'px;font-weight:'+wt+'">'+title+'</h2>';
         n_caddy+='<iframe id="God" width="510" height="300" src="'+sap+'" frameborder="2" allowfullscreen></iframe><br>';
         n_caddy+='<h2 id="com" style="color:#'+color+';font-size:'+size+'px;font-weight:'+wt+'">'+comm+'</h2>';
         n_caddy+='</div>';
         n_caddy+='<img id="stop" src="https://www.dropbox.com/s/gnrw874fyrtwgl7/smilepoint.png?raw=1"width="30% height="200px"></img></center>';
         n_caddy+='<br>';
         
       
           
         (function(){
           if (pb.plugin.get('new_video_caddy').settings.url.length) {
               $('#God').show();
               $('#com').show();
               $('#stop').hide();
               $('.shoutbox').css('display','block');
               }else{
               $('#God').hide();
               $('#com').hide();
               $('.shoutbox').css('display','none');
               $('#stop').show();
               
               }
         });
          $('#featured').html(n_caddy);
});


[Todge]

You are going to have to make sure each plugin only runs on the required page(s) then, otherwise one will always conflict with the other..

There are a couple of way to do this.. Either check the page URL, the page title or you can add something to each page for your plugins to check for, be it a variable or a cell ID or whatever.

[Mike]

Todge
Is it possible to use forum search to select the page?
I did see custom page in the list.

[Todge]

Dec 14, 2020 8:03:25 GMT -8 Mike said:

Todge
Is it possible to use forum search to select the page?
I did see custom page in the list.

I have never used custom pages, so you've got as much idea as I have, but if it appears in the list then I'd say yes.

[Lynx]

Just my $0.02 - but I typically just have the JS check:


if ((pb.data('route').params.page_id == "PAGE_ID") && (pb.plugin.get('my_plugin').settings.video_url)) {
  // code to run if we're on the right page and the vido_url setting is not blank
}
...


[Mike]

Lynx
Does that if statement require a "for/loop"?