Public Forums 71,145 posts

[Michael Casha Friend Michael CashaJoin date: September 2014Posts: 2561Downloads:1Uploads:32 Thanks: 41 Thanked: 119 times in 1 posts]

#120810

This is an UNOFFICIAL modification to the current products served by JoomlArt. To be legally entitled to use this modification you MUST use this on a licensed domain. The 2 scripts required for this template can be found in JA Quillaja or JA Teline
++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Yep, it’s time for me to bragg again. I hope you don’t mind watching my adventures of pulling apart bits of the JoomlArt templates.

Anyway, I sat down flicking through all the amazing JoomlArt templates (don’t we all) and then I saw Quillaja and Teline that has the hpanel (hidden panel aka. Members Area). Now yes, I’ve seen them before but it gave me inspiration.

Now, I’m using a seperate custom system than what those templates use, including my own custom designed Joomla template. But, I really really wanted that on my site but didn’t have any experience with javascript before.

So, I pulled bits, I prodded bits, until finally I have what I have on my site now. Go to http://www.miccas.net and press REGISTER. Or here’s some screenshots:

– Panel Closed
– Panel Opening
– Panel Open

How I did it – yes, you all want to know 🙂

Firstly, I copied and pasted the two script files (ja.script.js and ja.hiddenpanel.js) to your templates folder.

Next, open the index.php file found in your template and put these lines of code just before the </head> tag.

<script language="javascript" type="text/javascript" src="http://www.yoursite.com/joomla/templates/templatename/ja.script.js"></script>
<script language="javascript" type="text/javascript" src="http://www.yoursite.com/joomla/templates/templatename/ja.hiddenpanel.js"></script>
<script type="text/javascript">
/*<!]>*/
</script>

Make sure you change the site url to make sure it is directed at ja.script.js and ja.hiddenpanel.js

Next, copy and paste this code to where you’d like the panel to OPEN.

<div id="ja-hpwrap"><div id="ja-hp"><div class="ja-hpmodule">
Congratulations, you're hidden panel is working!
</div></div></div>

Obviously you can replace “Congratulations, you’re hidden panel is working!” with your own text or code.

Next is the code that will display your button. Copy/paste this line of code wherever you’d like the SHOW/HIDE button to go.

<span id="ja-hp-switch">SHOW/HIDE</span>

Next, open your CSS file (/css/template_css.css) and add these lines of code:

#ja-hp-switch {
float: right;
color: #CCCCCC;
display: none;
font-weight: bold;
cursor: pointer;
padding: 0 5px;
}

.ja-hp-active {
color: #FFFFFF !important;
background: #FF9A48;
border-bottom: 1px solid #000000;
}

#ja-hpwrap {
background: #EFEFEF;
font-size: 11px;
}

#ja-hp {
line-height: normal;
}

div.ja-hpmodule {
float: right;
padding: 3px 0 2px;
}

html>body div.ja-hpmodule {
float: right;
padding: 5px 0 5px;
}

div.ja-hpmodule form {
float: left;
}

div.ja-hpmodule form label {
float: left;
padding: 0 5px;
}

div.ja-hpmodule form input.button {
padding: 0px 3px;
background: #333333;
border: 1px solid #333333;
color: #CCCCCC;
font-size: 11px !important;
}

div.ja-hpmodule form #mod_login_username,
div.ja-hpmodule form #mod_login_password {
background: #F7F7F7;
border: 1px solid #CCCCCC;
width: 70px;
margin-bottom: 0;
}

div.ja-hpmodule form #mod_login_remember {
margin-bottom: 0;
}

div.ja-hpmodule form a {
padding-left: 5px;
border-left: 1px solid #CCCCCC;
}
#ja-hpwrap {
clear: both;
width: 100%;
}

#ja-hp {
margin: 0 auto;
width: 750px;
text-align: left;
}

.wide #ja-hp {
margin: 0 auto;
width: 950px;
text-align: left;
}
}

Now, for the fun part! Upload the files and check your site.. yep, should be working! Well done 🙂

[Hung Dinh Friend Hung DinhJoin date: September 2014Posts: 4408Downloads:11Uploads:189 Thanks: 309 Thanked: 3310 times in 3 posts]

#222052

Thank you MiCCAS for sharing this modification. I am thinking of developing more features for the module so that we can release for our JAEC members

[Michael Casha Friend Michael CashaJoin date: September 2014Posts: 2561Downloads:1Uploads:32 Thanks: 41 Thanked: 119 times in 1 posts]

#222053

<em>@Hung Dinh 18084 wrote:</em><blockquote>Thank you MiCCAS for sharing this modification. I am thinking of developing more features for the module so that we can release for our JAEC members</blockquote>
Now THAT would be awesome 🙂

[ErikThorsen Friend ErikThorsenJoin date: December 2005Posts: 1098Downloads:0Uploads:7 Thanks: 22 Thanked: 10 times in 1 posts]

#222056

Excellent stuff MiCCAS. What about getting a “contribution” part of the forum? I think this would be a great add-on to an already great forum. That way licensed users could have even more reasons to join!

[nkrfl Friend nkrflJoin date: February 2009Posts: 2Downloads:0Uploads:0]

#293045

I want to visible this panel.But I push to show/hide button, this panel hidden.

Which code edit ?

[nkrfl Friend nkrflJoin date: February 2009Posts: 2Downloads:0Uploads:0]

#293296

Sorry my english a little bad, maybe very bad 🙂

my question is > when the page opens, the panel will be seen open.when you press the show/hide button the panel will be closed.

I hope I could tell.

This question maybe to be valid JA Hidden-Panel.

[ShannonN Friend ShannonNJoin date: July 2006Posts: 1947Downloads:0Uploads:9 Thanks: 16 Thanked: 172 times in 49 posts]

#293315

nkrfl;114125I want to visible this panel.But I push to show/hide button, this panel hidden.

Which code edit ?

@nkrfi as an unlicensed member do you have a purchased JA template to use it on and a registered JA domain for your purchased template? This is to fulfil the designers requirements for use.

@miccas
Didn’t work for me on your site, mate, all I got was a static page with the forum rules

[mj1256 Friend mj1256Join date: June 2007Posts: 1473Downloads:10Uploads:35 Thanks: 84 Thanked: 225 times in 118 posts]

#293318

sorry miccas, signed up as user geekhead no hidden panel for me either :confused:

using opera 9.63

[Michael Casha Friend Michael CashaJoin date: September 2014Posts: 2561Downloads:1Uploads:32 Thanks: 41 Thanked: 119 times in 1 posts]

#293518

Sorry, I have since removed this feature but I will consider putting it back when I redevelop the site.

[ShannonN Friend ShannonNJoin date: July 2006Posts: 1947Downloads:0Uploads:9 Thanks: 16 Thanked: 172 times in 49 posts]

#293535

MiCCAS;114721Sorry, I have since removed this feature but I will consider putting it back when I redevelop the site.

Or when you actually get it working?

[Author]

Posts