Loading...

Forum Index > Support - English > Making Amazing Pop ups on your GROU.PS network!

Chidi and Chika Nwaogu 4 years ago
ActivityRank: 108
Have you ever tried to upload a picture on GROU.PS and a pop up is displayed with a content to upload your photo?
Isn't that cool? You didn't have to leave the page to upload your photo!

Now, you may want same for your own contents. You may want to display a content to your network members when they click a link without having to take them to a new page entirely. For instance, you want your members to click on a link "About" at the bottom/footer of your network and display a pop up with information about your network without having to take them to an entirely new "About" page. This is how to do it.

In your template HTML, you have to include a div. It's ID could be "about" as seen below. You have to display the div: none to your members so that it doesn't show up except the member clicks on the "About" link. It should look like this:

<div id="about" style="display: none;"> HTML of your About page goes here. </div>

Let's imagine the HTML of your About page is:

<b>Ladies And Gentlemen book</b> (popularly known as "LAGbook" and informally written as "Lagbook" or "lagbook") is an online social network where over 75,000 <b>people unwind, mix-upconnect with one another and share their daily experience</b>. 

Your final div will look like this:

<div id="about" style="display: none;">  <b>Ladies And Gentlemen book</b> (popularly known as "LAGbook" and informally written as "Lagbook" or "lagbook") is an online social network where over 75,000 <b>people unwind, mix-upconnect with one another and share their daily experience</b>.  </div> 

Now it's time to assign this div to a variable using javascript.

{literal}
<script type="text/javascript"> 
var aboutpop = document.getElementById ("about").innerHTML;
</script>
{/literal}

It is good practice to include {literal} ...  {/literal} before and after your javascript code on GROU.PS to avoid GROU.PS reading it as an error.

The div "about" is now stored in the variable "aboutpop". This javascript code should also go into your Template HTML right under the hidden div "about". 

Now it's time to pop it up when a member clicks the "About" link. Here's how to do it.

<a href="javascript:;" onclick="groups.modalBox.showHTML(aboutpop);" title="About LAGbook">About</a>

The html code above can go anywhere you want the "About" link to be displayed. In your Template HTML, Views, Modules, it's completely up to you!

Here's how the pop up should look like when the "About" link is clicked by a member.



Have a nice weekend exploring the awesome GROU.PS platform!

Cheers

- Chidi and Chika Nwaogu
  LAGbook.com


fermmyhorlartunjy 4 years ago
ActivityRank: 72
help pls tell me he name of ur template

Chidi and Chika Nwaogu 4 years ago
ActivityRank: 108
We use "The Book" theme. But ours has been modified greatly.
Michael Oduntan 4 years ago
ActivityRank: 44
i need some help with my website 
Yokohama 4 years ago
ActivityRank: 230
I tried your code but it does not work out for me. Can you help me if I had missed something. I have not added any extra code. I used the same code you posted here to test but it did not work. Do I need to add some more codes?
Chidi and Chika Nwaogu 4 years ago
ActivityRank: 108
You dont need more codes
Just add exactly what you see below in a new block on any module (eg. home):

<div id="about" style="display: none;">  <b>Ladies And Gentlemen book</b> (popularly known as "LAGbook" and informally written as "Lagbook" or "lagbook") is an online social network where over 75,000 <b>people unwind, mix-upconnect with one another and share their daily experience</b>.  </div> 

<script type="text/javascript"> 
var aboutpop = document.getElementById ("about").innerHTML;
</script>

<a href="javascript:;" onclick="groups.modalBox.showHTML(aboutpop);" title="About LAGbook">About</a>
Rey So-ong 35 months ago
ActivityRank: 166
Wow. I got it! www.csmgroupec.com
Rey So-ong 35 months ago
ActivityRank: 166
Those publisher wanted to have Marketplaces <PAGE> please use this html...   CLICK the page and CLICK HTML icon then Copy the HTML CODES then placed it on your PAGE as HTML File  


Rey So-ong 35 months ago
ActivityRank: 166
AMAZON PRODUCTS DATABASE

Enjoy Unlimited Streaming with Prime Instant Video: Stream over 40,000 movies and TV episodes on virtually any TV with compatible streaming devices starting under $100.






Rey So-ong 35 months ago
ActivityRank: 166
This is my CAMPAIGN.. I dont have deposit amount on my VISA as of now... Campaigns
  • img

    Mission Schools E-commerce Training Workshops

    Mission Schools E-commerce Training Workshops funds shall be used for Adventist Churches globally

    Balance: 0.00 USD End Date: 5784days 11hrs 7mins 57secs

    Campaign target: 2 USD

    %0
  • img

    Members Funds

    All members are required to promote this fund raising campaign for your own benefits and payment for hosting services and other events you are planning to take up. Proceeds shall be credited to your paypal account.

    Balance: 0.00 USD End Date: 1766days 11hrs 7mins 57secs

    Campaign target: 3 USD

    %0
  • img

    Adventist Church Childrens Ministry

    Adventist Church Childrens Ministry project will go to churches of the Hinterlands in Iligan City and other available funds will go to churches within Mindanao of the Republic of the Philippines

    Balance: 0.00 USD End Date: 1465days 10hrs 7mins 57secs

    Campaign target: 1 USD

    %0
  • img

    Civil Society E-commerce Programme

    Civil Society E-commerce Programme is paying much on the world cloud media hosting and other maintenance and its a free platform that connects, unites and shares resources and information within inter-faith based communities.

    Balance: 0.00 USD End Date: 329days 11hrs 7mins 57secs

    Campaign target: 2 USD

    %0

Top Contributors

1366
mephIStO
1171
jimbowales2011
897
asukru.goksu
590
Emre Sokullu
577
netgay