{"id":3488,"date":"2013-10-24T23:47:05","date_gmt":"2013-10-24T23:47:05","guid":{"rendered":"http:\/\/www.dognmonkey.com\/techs\/?p=3488"},"modified":"2017-11-14T10:39:31","modified_gmt":"2017-11-14T18:39:31","slug":"jquery-collapse-o-matic-plugin","status":"publish","type":"post","link":"https:\/\/www.dognmonkey.com\/techs\/jquery-collapse-o-matic-plugin.html","title":{"rendered":"Jquery Collapse-O-Matic Plugin"},"content":{"rendered":"
\n

01\/25\/2016 I no longer use the plug-in – I use bootstrap collapsible<\/a> now.<\/p>\n<\/blockquote>\n

I really like the Jquery Collapse-O-Matic plugin. It does make the long page looks better. Since I used so many Jquery application, I have to make .noconflict for this plugin to work with Fancybox using old jquery 1.25 which doesn’t work with Collapse-O-Matic using 1.9.1.<\/em><\/p>\n

The plugin loads “js\/collapse.min.js” and “dark_style.css” or “light_style.css” automatically to the header. I need to manually create modify “collapse.min.js” to ‘collapse_fix.js’ for noconflict jquery. Rename the “js” folder to ‘js1’ so the plugin doesn’t load the correct ‘collapse.min.js’.<\/em><\/p>\n

Modify ‘collapse.min.js’ for jquery noconflict.<\/em><\/p>\n

Replaced all jQuery in the script to jQuery_omatic then save it to collapse_fix.js, then apply noconflict script above the link of the “collapse_fix.js” in the footer like so.<\/em><\/p>\n

\n
\n

[expand title=”jquery noconflict set up in the footer instead of the header for faster loading”]
\n<!–Collapse-O-Matic–>
\n<!– load jQuery 1.9.1 –>
\n<script src=”\/\/code.jquery.com\/jquery-1.9.1.js<\/a>“><\/script>
\n<script type=”text\/javascript”>
\nvar jQuery_omatic = $.noConflict(true);
\n<\/script>
\n<script src=”\/idogjs\/collapseomatic\/collapse_fix.js<\/a>” type=”text\/javascript”><\/script>
\n<!–End Collapse-O-Matic–>
\n[\/expand]<\/p>\n<\/blockquote>\n

\n

[expand title=”Setup Codes”]'[‘expand title=”Setup Codes”]content is in here[\/expand’]’ remove the ‘[\/expand]<\/p>\n

[expand title=”customize color”] <\/em><\/p>\n

\"custom_color\"<\/a><\/p>\n

place these lines in the custom style section<\/em><\/p>\n

.collapseomatic {
\ncolor: #F3A333;
\n}
\n.colomat-close {
\ncolor: #5AF333;
\n}
\n.colomat-visited {
\ncolor: #F33333;
\n}<\/p>\n

[\/expand]<\/em><\/p>\n<\/blockquote>\n

There are many pop-ups (modals) software out there to make the page display pictures and other stuff looks beter. These are some of the ones I like.<\/em><\/p>\n

\n

[expand title=”ShadowBox”]<\/p>\n

\"\"<\/a> \"\"<\/a><\/p>\n

[\/expand]<\/p>\n<\/blockquote>\n

\n

[expand title=”PrettyPhoto”]<\/p>\n

\"\"<\/a> \"\"<\/a><\/p>\n

[\/expand]<\/p>\n<\/blockquote>\n

\n

[expand title=”FancyBox”]<\/p>\n

\"\"<\/a> \"\"<\/a><\/p>\n

[\/expand]<\/p>\n<\/blockquote>\n

\n

[expand title=”FancyBox 2″]<\/p>\n

\"\"<\/a> \"\"<\/a><\/p>\n

[\/expand]<\/p>\n<\/blockquote>\n

\n

[expand title=”Mediabox Advanced”]<\/p>\n

\"\"<\/a> \"\"<\/a><\/p>\n

[\/expand]<\/p>\n<\/blockquote>\n

\n

[expand title=”ImagePreview”] Used together with Mediabox Advanced<\/p>\n

<p style=”text-align: center;”><a title=”imagepreview” href=”\/media\/91alfaspider\/91alfa0.jpg” rel=”lightbox”><img style=”vertical-align: baseline; border: 3px solid black;” title=”My Alfa” src=”\/\/www.dognmonkey.com\/media\/91alfaspider\/91alfa0.jpg” alt=”My Alfa” width=”250″ \/><\/a><\/p><\/p><\/blockquote>\n

\"My<\/a><\/p>\n

Use together with PrettyPhoto<\/em><\/p>\n

<p style=”text-align: center;”><a title=”imagepreview” href=”\/\/dognmonkey.com\/media\/91alfaspider\/91alfa0.jpg” rel=”prettyPhoto”><img style=”vertical-align: baseline; border: 3px solid black;” title=”My Alfa” src=”\/\/www.dognmonkey.com\/media\/91alfaspider\/91alfa0.jpg” alt=”My Alfa” width=”250″ \/><\/a><\/p><\/p><\/blockquote>\n

\"My<\/a><\/p>\n

Use together with Shadowbox<\/em><\/p>\n

<p style=”text-align: center;”><a title=”imagepreview” href=”\/media\/91alfaspider\/91alfa0.jpg” rel=”shadowbox”><img style=”vertical-align: baseline; border: 3px solid black;” title=”My Alfa” src=”\/\/www.dognmonkey.com\/media\/91alfaspider\/91alfa0.jpg” alt=”My Alfa” width=”250″ \/><\/a><\/p><\/p><\/blockquote>\n

\"My<\/a><\/p>\n

[\/expand]<\/p>\n<\/blockquote>\n

Let’s see if all these pop ups and mooimagetip will work together in one page.<\/em><\/p>\n

Mooimagetip<\/em><\/a><\/p>\n<\/div>\n