• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Spry collapsible panels ?

Explorer ,
Sep 01, 2022 Sep 01, 2022

Copy link to clipboard

Copied

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

Views

496

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 3 Correct answers

Community Expert , Sep 01, 2022 Sep 01, 2022

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.

Votes

Translate

Translate
Community Expert , Sep 01, 2022 Sep 01, 2022

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="Col
...

Votes

Translate

Translate
Community Expert , Sep 06, 2022 Sep 06, 2022

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 be

...

Votes

Translate

Translate
Community Expert ,
Sep 01, 2022 Sep 01, 2022

Copy link to clipboard

Copied

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.

 

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 01, 2022 Sep 01, 2022

Copy link to clipboard

Copied

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 03, 2022 Sep 03, 2022

Copy link to clipboard

Copied

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 01, 2022 Sep 01, 2022

Copy link to clipboard

Copied

… 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…

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 01, 2022 Sep 01, 2022

Copy link to clipboard

Copied

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.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 01, 2022 Sep 01, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 01, 2022 Sep 01, 2022

Copy link to clipboard

Copied

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

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 02, 2022 Sep 02, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 01, 2022 Sep 01, 2022

Copy link to clipboard

Copied

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 01, 2022 Sep 01, 2022

Copy link to clipboard

Copied

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

Paul-M - Community Expert

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 01, 2022 Sep 01, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 04, 2022 Sep 04, 2022

Copy link to clipboard

Copied

FYI Spry is very old technology from 2006.

Adobe abandoned Spry in 2012.

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

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 05, 2022 Sep 05, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 06, 2022 Sep 06, 2022

Copy link to clipboard

Copied

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 06, 2022 Sep 06, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 06, 2022 Sep 06, 2022

Copy link to clipboard

Copied

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.

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 06, 2022 Sep 06, 2022

Copy link to clipboard

Copied

LATEST

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

Thank you!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines