Spry collapsible panels ?

[alpshiker]

Hi,

I recently upgraded from Dreamweaver CS6 to current, and I'm having a hard time figuring how I can get the action in title to show in the Insert menu. It's not the Bootstrap accordion that I want, but single collapsible boxes that I use with show-hide click for excess text. Has this taken another name, or is there a way I can pick it in my old Dreamweaver and import in the new one, or from the pages that have it?

A side question: I was hoping that the new version would not be plagued by the contextual menu following the pointer (press command to show the table's strucure). Is there a way I can deactivate this?

Thank you

Best regards, Paul

[BenPleysier]

Spry is no longer supported. See https://github.com/adobe/Spry

If you want to continue using spry, which I would discourage, then you can use the repository at Github.

I would suggest replacing the Spry modules with the relevant Bootstrap modules.

[alpshiker]

Thank you Ben. Even though that's not really something I liked hearing…

I found this Bootstrap collapse code, but to get it to work in my page will probably cost me some further headaches. Copying pasting the code doesn't suffice.

Or I might just keep updating this website with the old computer and DW CS6.

Best regards,

Paul

[Nancy OShea]

Bootstrap components depend on Bootstrap dependencies.  Without the Bootstrap CSS and JavaScripts, the components don't do anything.

Go to File > New > Starter Templates > Bootstrap Templates. 

Select a Sample Page layout. Hit the CREATE button. 

Voila!  A Bootstrap document right before your eyes.

Bootstrap is a mobile-first responsive framework for creating sites that work on ALL devices, no tables are used for layouts.  All the heavy CSS is all taken care of for you.  Frameworks greatly speed up production so you can focus more on content and less on coding.

To get the most out of Bootstrap, learn to use the 12-box grid system and utility classes. Start here:

https://www.w3schools.com/bootstrap4/

Hope that helps.

[alpshiker]

… I also wished I could understand why copying pasting the Spry code within the same page doesn't make it work in DW CC. Since the page already contains the support lines, it should work, or is there an explanation? As you see, I'm still novice in web design even after 20 years…

[BenPleysier · Accepted solution]

Without seeing the code, I am only guessing. If you have two of the same widgets in one page, then the ID needs to be changed. Only one ID with the same name is allowed in one page.

Best is if you supply the online link. That way we can see what is happpening.

[alpshiker]

That's exactly the answer !

ex: id="CollapsiblePanel23" , or else. Luckily they don't seem to have to be placed in progressive order.

I'll try to save that code as a shortcut and numbering the new ones by hand, and see. 

Contents might be controversial for some, but sure! "Read more" buttons.

Lots of html errors in the pages but they seem to work nevertheless.

Many thanks!

Paul

[BenPleysier · Accepted solution]

No sure if it is fixed or not.

Just in case it is not, Spry widgets consist of 3 parts, HTML, CSS and JS. The CSS and JS are usually contained within their own files. The HTML consists of the markup as well as a constructor. The constructor looks like

var CollapsiblePanel6 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel6", {contentIsOpen:false});

where the div containing the collapsible panel looks like - containing a number which in this case is '6'.

<div id="CollapsiblePane6" class="CollapsiblePanel">

 The constructors are usually found at the end of the HTML document.

I hope this helps.

This are a couple of sites that I have created

• https://bunchoblokes.org/
• https://bunchokids.org/

[alpshiker]

Oh that's why just copying the command and setting a new number for it, didn't work: it had also to be referenced at the bottom of the page with the div line. I completed it as just you pointed and now it works as expected!  It is a tedious process without the automated placing, but I don't have to use it that often so it should be OK. Many thanks for your kind help through it !

Thank you also for the links to the websites you built. Important matters, and it's great that good things are made available for the kids who are so targetted by the wrong contents these days. Keep it up.

Kind regards, Paul

[alpshiker]

Doesn't work. It's more complicated than I thought, but never mind. I'll keep working in the old DW where all is set.

Thank you again!

[Paul-M]

I think you need to consider ditching Spry. I don't think think the library had been updated for 10+ years at a guess...

[alpshiker]

You are right and I certainly will if all it takes is for every occurence, to replace some lines of code with another code. I'll be looking for a replacement solution.

[Nancy OShea]

FYI Spry is very old technology from 2006.

Adobe abandoned Spry in 2012.

It's fair to say, nobody should be using it anymore.

[alpshiker]

Hi, would you by chance know of an alternative collpasible panel to show / hide contents? Preferably implementable in DW CC on an automated process like the Spry was? I had no luck with the Bootstrap V5 kit.

[Nancy OShea]

There is no automated way in Dreamweaver CC without Bootstrap or manually coding with JavaScript.

Bootstrap 5 working example:

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.1.3 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--latest minified Bootstrap 5.1.3 CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="d-flex flex-column min-vh-100">
<div class="container-fluid">
<div class="row">
<div class="col h-100 p-4 bg-light border rounded-3 mx-auto text-center">
<h2>Bootstrap 5.1 in Dreamweaver</h2>
<p>Button Collapse</p>
</div>
</div>
<!--begin demo-->
<div>
<button class="btn-lg  btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Click Me!
</button>

<div class="collapse" id="collapseExample">
<div class="card card-body">Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.</div>
</div><!--/end collapse-->
</div><!--/demo-->
</div><!--/container-->

<!--latest minified Bootstrap 5.1.3 JS bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

For reference: https://getbootstrap.com/docs/5.1/components/collapse/#example

Hope that helps.

[alpshiker]

Nancy, I have to apologize for giving you such work, so thank you for your illustrate explanation!

I have to say that between the interface and the working of DW CC, which is so different (for me) than what I was used to with DW CS6, and the Bootstrap components which so far refuse to install in the pages when I (double) click on them, or drag and drop, I have a fair amount to digest and it will probably take me a little time to understand. I have now the tools, and I will learn at my pace. Thank you!

Cheers

Paul

[Nancy OShea · Accepted solution]

To use Bootstrap componenents, you must begin with a Bootstrap document.

The simplest way to do that is have a defined site.  And create a new document from a Starter Template > Bootstrap Template.

Once created, save as index.html.

From there you can edit and add components.

DO NOT mix Bootstrap versions. DW contains Bootstrap 4.  It has not been updated to support Bootstrap 5.  I don't know if it ever will.  I am comfortable coding with Bootstrap manually, so I use whichever version is best for my project. If you're not comfortable coding, use Bootstrap 4.

[alpshiker]

I had no idea. So I have to rebuild the pages from scratch. Your advice is most helpful.

Thank you!