Skip to main content
J
JoyceOdell
Inspiring
December 27, 2021
Answered

Newbie times 4: modifying a script, which may be opening a can of worms

  • December 27, 2021
  • 1 reply
  • 2260 views

I'm making progress and getting a bit more familiar with the program, but now I'm coming up aginst a rather tricky issue which entails modifying some outside elements for use in Dreamweaver. The specific information that I'm looking for at the moment has to do with W3Schools little "how to" tutorial on hover tabs. If you have a better suggesion I'll listen to it.

 

Background: the old CS6 site which I want to port into the CC2021 version of Dreamweaver has a graphics collection. It's not that well built, I was in the process of learning Dreamweaver when I built it and would like to do it a bit better this time. (No, still not wanting to deal with Bootstrap until I am a good deal more familiar with Dw itself.) 

 

Several pages in the collection have multiple images. I'd rather not make people have to scroll forever to see them all as is the case in the current site. The problem is that the images in the collection are not a uniform size. I've found that templates in Dw do not let you change the dimensions of things in child pages. so I need to use something in the template that will put the images in a container which can be set to 'auto'. I also need a solution which is not going to interfere with the dropdown menu and button rules which are already in the template.

 

The hover tab appears to be a possibility. I've saved a copy of my present template in a working folder and have copy/pasted the hover tab tutorial into it. It includes a script. I have no clue on how to modify a script in a manner in which will still work.

 

I have messed with it and the tabs will take graphics (I haven't tried some of the larger ones, or ones of different sizes yet) and it will switch the display by clicking on the buttons. But any attempt to rename anything but the visible button label breaks it, and I can't add any new ones. The example uses city names. I want numbers. And I want more than three of them. A half dozen at least. 

 

Here is the code from the tutorial:

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}

/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}

/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
display: none;
}

/* Clear floats after the tab */
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>

<h2>Hover Tabs</h2>
<p>Move the mouse over a button inside the tabbed menu:</p>

<div class="tab">
<button class="tablinks" onmouseover="openCity(event, 'London')">London</button>
<button class="tablinks" onmouseover="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onmouseover="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>

<div class="clearfix"></div>

<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>

 

What do I change to get plain numbered buttons, that I can add more of? As things stand it stops working if I change pretty much of anything.

    This topic has been closed for replies.
    Correct answer Nancy OShea

    Well I can certainly save out another copy of the template and try it. Thank you!


    You're welcome. 

     

    Copy & paste entire code exactly as presented  -- WITHOUT any other nonsense.

    1. Go to File > Save and name it Fancybox-test.html.

    2. Right-click the open document tab in DW > select Open in Browser to see it action.

    3. Adjust your browser viewport by dragging the application frame handles to test it's responsiveness.

     

    Fancybox has many options that are detailed at length in the online documentation.  Post back if you have any questions.

     

    1 reply

    O
    osgood_
    Legend
    December 27, 2021

    Try the below code, it's a slight improvement on the code you have provided. I can't help thinking though if you are showing graphics it might be better to show them in an overlay modal window gallery.

     

    The below is activated by 'onclick' rather than 'onmouseover' as that will do nothing in mobile devices. If you're not bothered by mobile footfall then you can always change 'onclick' to 'onmouseover'.

     

     

     

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical tab panel example</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
}
/* Style the 'tabsContent' div */
.tabsContent {
display: flex;
width: 90%;
margin: 0 auto;
} 

/* Style the 'tabs' div */
.tabs {
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
}
/* Style the 'tabs' buttons */
.tabs button {
display: block;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
font-size: 17px;
}
/* Change background color of 'tab link' on hover */
.tabs button:hover {
background-color: #ddd;
}
/* Create an active/current tab link class */
.tabs button.active {
background-color: #ccc;
}
/* Style the 'content' div */
.content {
flex: 1;
border: 1px solid #ccc;
border-left: none;
}
/* Style the 'tabcontent' div */
.tabcontent {
padding: 0px 12px;
display: none;
opacity: 0;
transition: all 0.5s ease-in-out;
}
/* Set first 'tabcontent' div open as default */
.tabcontent.active {
display: block;
opacity: 1;
}
.fadeInPanel {
opacity: 1;
}
/* Mobile */
@media screen and (max-width: 768px) {
.tabsContent {
flex-direction: column;
} 
.tabs {
width: 100%;
}
.tabs button {
display: block;
padding: 10px 16px;
text-align: center;
}
.content {
border: 1px solid #ccc;
}	
}
</style>
</head>
<body>
	


<div class="tabsContent">
	
<div class="tabs">
<button class="tablinks active">Graphic 1</button>
<button class="tablinks">Graphic 2</button>
<button class="tablinks">Graphic 3</button>
<button class="tablinks">Graphic 4</button>
<button class="tablinks">Graphic 5</button>
<button class="tablinks">Graphic 6</button>
</div>
<!-- end tabs -->

<div class="content">
	
<div class="tabcontent active">
<h3>Graphic 1</h3>
<p>Graphic 1 content</p>
</div>
<!-- end tabcontent -->

<div class="tabcontent">
<h3>Graphic 2</h3>
<p>Graphic 2 content</p>
</div>
<!-- end tabcontent -->

<div class="tabcontent">
<h3>Graphic 3</h3>
<p>Graphic 3 content</p>
</div>
<!-- end tabcontent -->

<div class="tabcontent">
<h3>Graphic 4</h3>
<p>Graphic 4 content</p>
</div>
<!-- end tabcontent -->

<div class="tabcontent">
<h3>Graphic 5</h3>
<p>Graphic 5 content</p>
</div>
<!-- end tabcontent -->

<div class="tabcontent">
<h3>Graphic 6</h3>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
<p>Graphic 6 content</p>
</div>
<!-- end tabcontent -->

</div>
<!-- end content -->

</div>
<!-- end tabContentWrapper -->



<script>
// Assign elements to variables
let tablinks = document.querySelectorAll('.tablinks');
let tabcontent = document.querySelectorAll('.tabcontent');

tablinks.forEach(function(tablink, index) {
// Add onclick event to each tab link
tablink.onclick = function() {
// Remove active class from all tab links	
tablinks.forEach(function(tablink) {
tablink.classList.remove('active');
});
// Set all tab content panels to display none, remove 'active and 'fadeInPanel' classes	
tabcontent.forEach(function(tabcontent) {
tabcontent.style.display = "none";
tabcontent.classList.remove('active' , 'fadeInPanel');
});
// Set current tab content panel to show and fade in
tabcontent[index].style.display = "block";
setTimeout(function() {
tabcontent[index].classList.add('fadeInPanel');	
}, 500)	
// Add active class to current tab link
this.classList.add('active');
};
});
</script>

</body>
</html>

     

     

      J
      JoyceOdellAuthor
      Inspiring
      December 27, 2021

      Thank you! I'll give that a go and let you know how it worked out.

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      December 27, 2021

      If you're interested, Fancybox 4 makes a full featured, responsive image viewer that provides a good experience for mobile device users.   There is a nominal one time fee for commercial use.

      https://fancyapps.com/docs/ui/fancybox/

       

       

      Nancy O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices