Scroll To Top

Buy Now ($65) | SML Home | Documentation

Show More or LessThe Ultimate Responsive and Adaptive Widgets for Dreamweaver

Some times you have a lot of content to show, and you really have to show it, but if you show it all, your page becomes quite long—long enough to make it difficult for folks to quickly scan your headings...especially on small devices.

PVII SML allows you to offer the whole story, while initially presenting just a headline, a first line, or as much as you want. You define how the SML handles your content and the appropriate links are added automatically. You can place an SML link in the middle of a paragraph or you can bind one to a single element, which can be an entire paragraph, or a DIV that contains paragraphs, lists, images, and even videos.

Selection

There are four ways to select the page content that you wish to Show Less of:

  1. Select the page element by clicking on that element's tag name in the Tag Selector bar at the bottom of the Dreamweaver window and then .
  2. Place your cursor inside the page element.
  3. Select the HTML markup in Code View.
  4. Select a string of text.
  5. Select a multi-element wrapper element.

Then open the User interface by clicking the Show More-Less icon in the Insert Panel.

Removing

To remove an existing SML click on the Show More link and use the Remove button in the Modify interface.

Creating a New Show More-Less Link

-Select the page element or text to which you want to apply an SML action.

-Click the SML icon Icon in the PVII Section of Dreamweaver's Insert Bar/Insert Panel or choose Insert > Studio VII > Show More-Less by PVII.

Classic Dreamweaver Insert Bar

The Insert Bar

Note: Some newer versions of Dreamweaver will only able to display icons in shades of gray, rather than in color. Dreamweaver CC does away with the Insert Bar but the programmers left a back door, which is explained in this tutorial.

Dreamweaver Insert Panel

CS4 Insert Panel

The Show More-Less interface will open.

The Create Interface

You can create multiple SML instances on your page. Add as many as you like.

Asset Folders

The system creates an assets folder named p7sml at the same level as the page that contains your widget. This folder will contain the SML JavaScript and CSS files.

PMM file folder

When you publish your site, make sure you upload the entire p7sml folder.

Modifying an Existing SML link

You can modify any of the existing SML links on your page at any time.

-Click inside the SML link that you wish to modify.

-Click the SML icon Icon in the PVII Section of Dreamweaver's Insert Bar/Panel

The SML UI will open in the Modify Existing SML mode.

Modify Interface

Configure your options and then click OK.

Managing the User Interface Items

Mode

Displays the current operational Mode for the user interface: either Create or Modify. When in Modify mode, the id of the existing SML trigger link will also be displayed.

Selection Type

Displays the current content selection mode being used:

1. Complete <x> Tag -An entire page element is selected for treatment by the SML system.

2. Partial selection in <x> Tag -A portion of text inside the listed page element is selected for treatment by the SML system.

Show More Link Text

This box contains the text of the Show More link, enter anything you like.

Show Less Link Text

This box contains the text of the Show Less link, enter anything you like.

Styling

These settings allow you to control how the SML links and content look.

Styling Selection -select the look you wish for the SML links.

Indent Content -check this box to indent the SML content.

Mode

Scroll Restore

With this box checked the SML system will auto scroll the page back to the original location of the Show More link. This assures that the user does not get disoriented when closing open SML content; it's especially useful when there is a long amount of content.

Fixed Reveal

Use Fixed Reveal to reveal a fixed amount of content, with an SML link to reveal the entire block. The fixed content set to show will be elegantly blurred.

Height

This sets the amount of content that will always show in Fixed Reveal mode.

Animation

Select the desired animation use when the SML opens or closes.

Note: Only the None and Fade options are available when in Partial text selection mode.

Duration

Set the animation speed for the SML open and close. The default 600ms (6/10ths of a second) works well across a wide range of devices. To speed up the animation, enter a lower number. To slow down the animation, enter a higher number.

Remove

Click the Remove button to remove the SML link from your page.

What will be Removed

The system will completely remove the html markup for the selected SML link from your page. If there are other SML links on the page they will not be affected. If there are no remaining SML links on your page, the system will also remove the link to the SML JavaScript file.

What will Not be Removed

The system will not remove any of the SML content, only the SML links will be removed and the original content will be restored back to the page. The system will not remove the p7sml folder, which contains the SML JavaScript file. This ensures that you will not lose any assets you may have modified and any other pages that depend on those modified assets will continue to look and behave as expected.

SML CSS

In most cases, you will not need to edit the SML CSS. In some cases you might need to change colors for links or for the blur element that is used in Fixed Reveal mode. Here are the relevant CSS rules to edit:

Text Mode Links

a.sml-more {
color: #000000;
font-weight: bold;
text-decoration: none;
display: inline-block;
font-style: normal;
border-bottom: 1px dotted;
border-color: #000;
transition: all linear .5s .1s;
}
a.sml-more.open {
color: #000;
}
a.sml-more:hover {
border-bottom-style: solid;
}

Tabbed Style Links

a.sml-more.tabbed {
color: #000000;
text-decoration: none;
display: inline-block;
font-style: normal;
border: 1px solid;
border-color: #000;
border-top-style: hidden;
border-bottom-style: solid;
padding: .5em 1em;
border-radius: 0px 0px 5px 5px;
}

a.sml-more.tabbed:hover, a.sml-more.tabbed.open {
border-top-style: hidden;
border-bottom-style: solid;
background-color: #222;
color: #FFF;
}

Button Style Links

a.sml-more.button {
color: #000000;
background-color: #DDD;
text-decoration: none;
display: inline-block;
font-style: normal;
border: 1px solid;
border-color: #AAA;
padding: 1em;
border-radius: 5px;
}

a.sml-more.button:hover, a.sml-more.button.open {
background-color: #222;
border-color: #222;
color: #FFF;
}

Inline Partial Tag Mode Links

a.sml-more-inline, a.sml-less-inline {
color: #000000;
text-decoration: none;
display: inline-block;
font-style: normal;
border-bottom: 1px dotted;
border-color: #000;
font-weight: bold;
}
a.sml-more-inline:hover, a.sml-less-inline:hover {
border-bottom-style: solid;
}

Indented Option

.sml-content.indented {
width: 90%;
margin: auto;
padding-left: 1em;
border-left: 1px dotted;
}

Fixed Reveal Blur Mask

The blur mask uses RGBA colors in a linear gradient to create the blurred-text effect. The default color is white noted by the first three numbers inside the parentheses: (255,255,255). To change the reveal color to black, use (0,0,0).

.sml-blur {
height: 50px;
position: absolute;
width: 100%;
bottom: 0px;
background: -webkit-linear-gradient(rgba(255,255,255,.5) 0%, rgba(255,255,255,1) 80%);
background: linear-gradient(rgba(255,255,255,.5) 0%, rgba(255,255,255,1) 80%);
}

Editing and determining RGBA colors

The following procedures will enable you to convert HEX colors to RGBA in Dreamweaver CS5 and under. Dreamweaver CS5.5 and up have native support for RGBA built in.

RGBA stands for Red-Green-Blue-Alpha. Each value is separated by a comma. The alpha value allows you to set a transparency level for the element being colored—be it a background color, a text color, or a border color. White (255, 255, 255) and black (0, 0, 0) are easy. Dreamweaver can help you to determine the RGB values using its standard color picker tool.

In your CSS Styles panel, select the rule you want to edit. Start by assigning a Hex color. Let's say #6C6. Open the color picker. Then click the System Color Picker icon:

The System Color Picker will open:

Your RGB numbers are listed as the Red, Green, Blue values: 102, 204, 102. So change your color value to:

rgba(102,204,102,1);

Remember, the "1" at the end is the alpha value and means your color is fully opaque (no transparency). To set transparency, choose a decimal value between 1 and 0. For example, to set 50% transparency, your values would be:

rgba(102,204,102,.5);

Creating or using a multi-element wrapper

In the event you wish to target a block of content that includes multiple elements (headings, paragraphs, DIVs, images, etc.) you simply need to wrap those elements inside of a new DIV. This is best done in Code View. Consider the following example. Let's say you have these elements that you wish to target:

<h4>Classic Dreamweaver Insert Bar</h4>
<p><img src="images/help_1.jpg" alt="The Insert Bar" width="702" height="99" class="constrained"></p>
<p class="tip"><strong>Note</strong>: Some newer versions of Dreamweaver will only able to display icons in shades of gray, rather than in color. Dreamweaver CC does away with the Insert Bar but the programmers left a back door, which is explained in <a href="http://www.projectseven.com/tutorials/dreamweaver/insert-bar/index.htm">this tutorial</a>.</p>

Select the block of code, in Code View, and then press CTRL + T to wrap the code block in a new tag:

Select div for the tag and then press Enter (or return) twice to select and then close the Wrap Tag box.

That's it. Now you can switch back to code view and select the DIV before opening the SML interface.

Note: If your multi-element block already is wrapped inside a DIV, select that DIV on Dreamweaver's Tag Selector bar.