hi..
this is another tweak to make the blocks collapsible.. they collapse when some one clicks on the head of the block ( you can work on it to make a button or any thing you like ).
it did take a quit long time to do but it's finally done..
the problem i have faced is that the blocks are not made of tables they are made of dives so i had to put them inside a table to make them collapsable..
the other one was a compatibility issue with Firefox and google chorme (whitespace text nodes)
any ways who cares  ...
so to do this go to your templates folder and fined "_header.html" then add the following after the <head> tage
<!-- start of table collapse made by nazzal !-->
<script language="javascript" type="text/javascript">
/******************** the "remove whitespace text nodes" section is to make it compatible with firefox and chrome **********************/
/******************** start : remove whitespace text nodes **********************/
const notWhitespace = /\S/
function cleanWhitespace(node) {
for (var x = 0; x < node.childNodes.length; x++) {
var childNode = node.childNodes[x]
if ((childNode.nodeType == 3)&&(!notWhitespace.test(childNode.nodeValue))) {
// that is, if it's a whitespace text node
node.removeChild(node.childNodes[x])
x--
}
if (childNode.nodeType == 1) {
// elements can have text child nodes of their own
cleanWhitespace(childNode)
}
}
}
/******************** end : remove whitespace text nodes **********************/
/******************** start : Expand Collapse Table **********************/
document.addEventListener("load", function() {
cleanWhitespace(document)
}, true)
function ExpandCollapseTable(titleRow)
{
if(titleRow.parentNode.childNodes.length > 1)
{
if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="")
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "none";
}
}
else
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "block";
}
}
}
}
/******************** end : Expand Collapse Table **********************/
</script>
<!-- end of table collapse made by nazzal !-->
colse and save ..
then open the "designbox_1.html" file ( it is in the same directory)
and replace it's contents with
<div class="disignBoxFirst">
<table border=0 width=100% >
<tr onclick="ExpandCollapseTable(this);" style="cursor:pointer;">
<td >
<div class="boxFirstHeader"><div class="dbTitle">__title__</div>__caption_item__</div>
</td>
</tr>
<tr >
<td>
<div class="boxContent">__designbox_content__</div>
__bottom_item__
</td>
</tr>
</table>
</div>
your all done and ready to go and yeah for the lazy ppl i have attached the files (for the base template)
always remember that this is a free mod .. no guaranties no support .. but sure thing sure i will try to help..
if i did help you .. it wont hurt to go to my profile and add a recommendation for me ;) |
ill be posting bugs as long as it is still need fix .. if i did help you .. it wont hurt to go to my profile and add a recommendation for me ;) |
found one ...
change the code in the _header.html into
<!-- start of table collapse made by nazzal !-->
<![if !IE]>
<script language="javascript" type="text/javascript">
/******************** the "remove whitespace text nodes" section is to make it compatible with firefox and chrome **********************/
/******************** start : remove whitespace text nodes **********************/
const notWhitespace = /\S/
function cleanWhitespace(node) {
for (var x = 0; x < node.childNodes.length; x++) {
var childNode = node.childNodes[x]
if ((childNode.nodeType == 3)&&(!notWhitespace.test(childNode.nodeValue))) {
// that is, if it's a whitespace text node
node.removeChild(node.childNodes[x])
x--
}
if (childNode.nodeType == 1) {
// elements can have text child nodes of their own
cleanWhitespace(childNode)
}
}
}
/******************** end : remove whitespace text nodes **********************/
</script>
<![endif]>
<script language="javascript" type="text/javascript">
/******************** start : Expand Collapse Table **********************/
document.addEventListener("load", function() {
cleanWhitespace(document)
}, true)
function ExpandCollapseTable(titleRow)
{
if(titleRow.parentNode.childNodes.length > 1)
{
if(titleRow.parentNode.childNodes[1].style.display=="none" || titleRow.parentNode.childNodes[1].style.display=="")
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "block";
}
}
else
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "none";
}
}
}
}
/******************** end : Expand Collapse Table **********************/
</script>
<!-- end of table collapse made by nazzal !-->
if you fined any thing else please contact me
if i did help you .. it wont hurt to go to my profile and add a recommendation for me ;) |
ManOfTeal.COM a Proud UNA site, six years running strong! |
Just what Ive been looking for!!!
Will give this a go later...!
Thanks for the work and sharing!
|
The greatest hack ever!!!!!
Why Boonex not insert so simple code in Dolphin and make it so much better???
Many thanks Nazzal!!!
The next thing is to save the blockstatus from the member so every member can open or close every block he like. 
Rappi
Bezirzer.de, elbrocker.de, tierschutz-community.de |
sorry dont have any but if any body did try this please post your site as a demo (you ill get more traffic )
if i did help you .. it wont hurt to go to my profile and add a recommendation for me ;) |
Hi.
Here is the demosite from free-dolphin.de
http://www.free-dolphin.de/demo
This page is my test page and can not work temporarily.
Rappi
Bezirzer.de, elbrocker.de, tierschutz-community.de |
Hi.
Here is the demosite from free-dolphin.de
http://www.free-dolphin.de/demo
This page is my test page and can not work temporarily.
Rappi
thanks Rappi .. really a big help ..
also if you fined any thing not working as it supposes to then please leave a reply over here
if i did help you .. it wont hurt to go to my profile and add a recommendation for me ;) |
Just a little thing.
I am on Firefox for Mac.
I have to double click the arrow to collapse the block.
For the first instance it reduces a bit the width of the content of the block, then if I click again it finally collapse.
So check that.
Web Development, Multimedia Design and Social Media. |
The only "bug":
When you first access you have to make a doubleclick to close the block.
After that, one click works fine...
Bezirzer.de, elbrocker.de, tierschutz-community.de |
Just a little thing.
I am on Firefox for Mac.
I have to double click the arrow to collapse the block.
For the first instance it reduces a bit the width of the content of the block, then if I click again it finally collapse.
So check that.
thanks for the help .. i don't really use fire fox to check (cuz the problems only happens with IE )
any ways i'' be back with solution
if i did help you .. it wont hurt to go to my profile and add a recommendation for me ;) |
The only "bug":
When you first access you have to make a doubleclick to close the block.
After that, one click works fine...
thanks i'll also check that
if i did help you .. it wont hurt to go to my profile and add a recommendation for me ;) |
Hi Nazzal,
nice work you did, I like that. Besides double click to collapse, by refreshing or reloading page the collapsed boxes are set back to normal.... why not storing checked 0/1 function into db? are Java items as well collapsible?
Cheers
Sleepless |
Hi Nazzal,
nice work you did, I like that. Besides double click to collapse, by refreshing or reloading page the collapsed boxes are set back to normal.... why not storing checked 0/1 function into db? are Java items as well collapsible?
Cheers
This could be also achieved with jQuery cookies.
Web Development, Multimedia Design and Social Media. |
about the double click thing it was just a small mistake that i made ...
edit the headers to be like this
<!-- start of table collapse made by nazzal !-->
<![if !IE]>
<script language="javascript" type="text/javascript">
/******************** the "remove whitespace text nodes" section is to make it compatible with firefox and chrome **********************/
/******************** start : remove whitespace text nodes **********************/
const notWhitespace = /\S/
function cleanWhitespace(node) {
for (var x = 0; x < node.childNodes.length; x++) {
var childNode = node.childNodes[x]
if ((childNode.nodeType == 3)&&(!notWhitespace.test(childNode.nodeValue))) {
// that is, if it's a whitespace text node
node.removeChild(node.childNodes[x])
x--
}
if (childNode.nodeType == 1) {
// elements can have text child nodes of their own
cleanWhitespace(childNode)
}
}
}
/******************** end : remove whitespace text nodes **********************/
</script>
<![endif]>
<script language="javascript" type="text/javascript">
/******************** start : Expand Collapse Table **********************/
document.addEventListener("load", function() {
cleanWhitespace(document)
}, true)
function ExpandCollapseTable(titleRow)
{
if(titleRow.parentNode.childNodes.length > 1)
{
if(titleRow.parentNode.childNodes[1].style.display=="block" || titleRow.parentNode.childNodes[1].style.display=="")
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "none";
}
}
else
{
for(var i=1;i<titleRow.parentNode.childNodes.length;i++)
{
titleRow.parentNode.childNodes[i].style.display = "block";
}
}
}
}
/******************** end : Expand Collapse Table **********************/
</script>
<!-- end of table collapse made by nazzal !-->
if i did help you .. it wont hurt to go to my profile and add a recommendation for me ;) |
Bezirzer.de, elbrocker.de, tierschutz-community.de |
@Nazzal a little help from me here.
When the blocks have been collapsed if you try to use the ajax top links on each block, the loading image will show out of place.
Also I would advice to change the arrow icon, up when not collapsed and down when collapsed.
Also I would not use the database to store the user decision (also because you are using it for guests too), but using the jQuery cookies plugin that will do the very same thing.
Good luck!
Web Development, Multimedia Design and Social Media. |
@Nazzal a little help from me here.
thanks for it ;)
When the blocks have been collapsed if you try to use the ajax top links on each block, the loading image will show out of place.
i cant really think aobut any thing to do about it
Also I would advice to change the arrow icon, up when not collapsed and down when collapsed.
the arrow icon is added by Rappi i didnt put it there ( and i would like to advice him to make the arrow clickable not the whole header)
Also I would not use the database to store the user decision (also because you are using it for guests too), but using the jQuery cookies plugin that will do the very same thing.
nothing is stored in the data base it just give the use the ability to collapse the blocks he doesnt like .. but when the page refresh every thing goes back to what it was
if i did help you .. it wont hurt to go to my profile and add a recommendation for me ;) |
Hi nazzal and other involved!
First of all, thanks for your work on this so far.
Im not a 'coder' so wouldnt know how to build something like this, but its something I have been needing recently so timing is perfect!
If I could make 1 further suggestion, even request to turn this into a sales mod... (I would buy)
It would be perfect, after the other suggestions if this could be added to page builder in admin so that it can be selected for individual page blocks instead of completely sitewide.
I really dont know if this is possible, as Im not a coder...
If this is possible, though, you would have a mod on your hands that I would pay for, and Im sure others would also. (actualy, I would pay for it as it is, but more if it was block by block!)
Just a thought!
Thanks again for your work on this.
Daihlo
|
Yep I know it does not store any data right now, it was just to follow what @francisca_carv adviced. I think it is a good idea. As per the arrow well then is Rappi the criminal!! (just kidding). As for the loading issue I think that could be solved by some tricks in the CSS. But maybe we are making it more complicated than it should be.
Also I think what @daihlo suggested is a good thing. Maybe a little complicated to realize, but very interesting. Dolphin is missing this possibility that I think is necessary when you have thousands of blocks in one page.
Think about it, you could also sell this mod in the market or get hundreds of good reviews on your profile if you release it for free! =)
Keep up with the good work.
Web Development, Multimedia Design and Social Media. |
Hi nazzal and other involved!
First of all, thanks for your work on this so far.
Im not a 'coder' so wouldnt know how to build something like this, but its something I have been needing recently so timing is perfect!
If I could make 1 further suggestion, even request to turn this into a sales mod... (I would buy)
It would be perfect, after the other suggestions if this could be added to page builder in admin so that it can be selected for individual page blocks instead of completely sitewide.
I really dont know if this is possible, as Im not a coder...
If this is possible, though, you would have a mod on your hands that I would pay for, and Im sure others would also. (actualy, I would pay for it as it is, but more if it was block by block!)
Just a thought!
Thanks again for your work on this.
Daihlo
very nice suggestion .. but im really stuck studying right now so i can really get into it in the moment
but i had that thought on my mined that i should do a better templating system for dolphin ..
to make it more easy to edit .. cuz i really did have a hard time doing this littel modification even though i had the java code for collapsing the table but the problem was at "where to put it " dolphin really need a much more templating system .
also i'll include ajax moves to make it look better .. with the full power of selecting where and when do you want them to show .
i guess i have it all in mined cuz ive been a while with dolphin and with it's (administration panel ) which has a longer-name than the list of the features you can do with it ..
if i did help you .. it wont hurt to go to my profile and add a recommendation for me ;) |
sorry yobilab i didnt mean to click that damn thing (i dont know why they have it next to the Quote it's the second time that it happens to me im really sorry ..
anyways .. im really thinking about selling modules but im just waiting for the right moment to do that
and about this code it's just a little tweak (didnt take more than 2 hours ) .. and sure i cant put every thing in it .
>> again sorry for the report didn't mean it
if i did help you .. it wont hurt to go to my profile and add a recommendation for me ;) |
sorry yobilab i didnt mean to click that damn thing (i dont know why they have it next to the Quote it's the second time that it happens to me im really sorry ..
anyways .. im really thinking about selling modules but im just waiting for the right moment to do that
and about this code it's just a little tweak (didnt take more than 2 hours ) .. and sure i cant put every thing in it .
>> again sorry for the report didn't mean it
Ehehe not a problem. Don't worry.
Web Development, Multimedia Design and Social Media. |
Question!
The 2nd block of code changed in this was for design box 1
IF this was changed to design box 2, then user could select which blocks to be collapsable and which to be normal by selecting design box 2 in page builder right?
|
when i apply this on 7.0.7 fresh install, yes, it works to some degree:
when i click a block header, it reduces width, instead of collapsing the block, then i click the block header again, and it collapses.
really like this option to collapse the block, and actually would like to see the blocks in collapse state by default, and have the user expand if they wish to use the block.
so right now my problem is it reduces the width on the blocks, then you have to click it again, to collapse the block.
nice work though nazzal.
When a GIG is not enough --> Terabyte Dolphin Technical Support - Server Management and Support |
