Inspiring

Answered

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

Forum|Forum|4 years ago
December 27, 2021
1 reply
2288 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>

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.

osgood_

Legend

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>

JoyceOdellAuthor

Inspiring

Well, it does work. It was a fight, since whenever I tried to format the appearance of the tabs or buttons, it broke. But I got it eventually. The underlying tab appears to need a fixed height to be visible. I would have liked it to be the height of the images, but since they all are different heights, that's unfeasible, since you can't change the dimensions of anything in a child page. But the button panel works on its own without the visible tab, and that will do. I'm assuming that the script can sit idle in the template when not needed, since only a fraction of the pages have multiple images which will need to be collected into the tab content containers and swapped back and forth.

I'll need to figure out a way to get it to share a page with text gracefully, since the text tries to wrap, and I'd rather it didn't. I would prefer to have the button panel at the top of the page than down below all of the text, since some of the pages have rather a lot of text in their curret iterations. But that's just a design issue that needs a better solution.

I'm a bit concerned, since I've had some issues copy/pasting things into different pages and having them not work, and I have been working on a copy of the template. But I suspect that if I can get it to work in the copy, I ought to be able to get it to work in the actual template eventually.

Thank you again for the help.

osgood_

Legend

I think we're talking two slightly different languages, so we're a bit at cross-purposes. My background is print graphics, so I'm talking about the appearance of the page as a whole, not the code that goes into it. And, yeah, I suspect the code I got off the W3Schools site probably is showing its age.

I'd have liked the appearance of the button container (the tab) to extend down the length of the displayed image so the buttons and the tabs would effectively serve as a left border for the image. But that isn't feasible, so I'll do without it.

And the text wrapping I was talking about was the page text wrapping around the displayed image Adding a small right margin to keep it from butting up against the image edge is probably as much improvement on that issue as I can hope for. It gives me a corresponding margin on the left edge of the image between it and the buttons, but that's a reasonable trade-off

Same with the business of the buttons at top or bottom. I'm talking about the buttons being above or below the rest of the text on the page, since the page will have both images. and text discussing the images.

Re-sizing some of the images so they're large enough to just push the text down below instead of having a few words stragling down the right edge is probably the only way to stomp out that particular brush fire.

Yes, moving the script to an external js file is what I need to do. That's not described in the Classroom in a Book (if it isn't in that book, I don't know about it). The site has a js folder, and there are three js files already in it, which I gather are automaticly generated when one creates a site. Am I correct in my suspicion that what I need to do is create a new file to hold this script and link the pages which will be using it to it?

How do I do that? I'm on a Mac, so my text editor is Apple's TextEdit program. That doesn't have an export function, and .js isn't one of its save as options. Nor is plain .txt any more. Do I save it as the default .rtf, or .odt and then manually change that to the .js extention? And is there a specific format needed, or do I just copy/paste into a new file, save it as the site name, and add .js ?

I'm assuming that the link goes at the top of the document.

The document I'm working in has what appeears to be such a link there which may be a default, or may have come in from the source document that I built things off of. I've ignored it so far, since removing such things often seem to break the whole page. It also seems to be referring to Internet Explaorer 9 which isn't something that I personally feel a need to be concerned with.

In any case, this is what it says:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">

</head>

I'm also assuming that the same kind of process will be needed when I start building my external .css files? After having lost my entire start at building the site when Dreamwaver crashed and wiped out everything that was based off the .css file I was using, I've kept the pages isolated and built the rules in the internal <style> area, but I don't intend for that to be permanent. I'll end up with more than one .css file since the dmensions of the areas in the pages is different for the different collections, but I gather that one is not limited to only one .css file per site.

Well I too am from a graphic design/print background dating back to the 1970's, still participating in it up until recently, so 47 years if you include the 4 years I was at design college - I doubt you can teach me much about graphic/print design, that I don't already know.

It's a shock to the system when you first start getting into web development that much I can tell you, rip up and throw away almost everything you know about graphic design/print when it comes to web design/development, the two are so far apart, wider than the Grand Canyon.

I do hear your concern and agree with the way the website pages look and that's to be admired, you can achieve almost anything if you know how but you have to think about 200 steps beyond how you think when producing a static DTP page. I've encounterd many an ignorant graphic deisgner who sits and drags around a few boxes in InDesign/Quark and think thats a highly skilled process, its not, graphic design these days is kindergarten stuff compared to web development.

It's difficult to follow your response fully, a visual of what you are trying to achieve is usually helpful in these situations but it seems like you are still thinking in DTP mode where things are static, so you may be a bit frustrated initially until you embrace a new way of thinking.

No need for an Apple Text editor just create a new file in Dreamweaver and name it myFancyScript.js or whatever name you require so long as it has the .js extention. Then copy the script, minus the opening and closing <script></script> tags and paste it in the js file and save it. Link it to your page/s:

This usualy goes before the closing body tag so the html code loads before the script executes. You can also link it in the <head></head> section of your page if you use the 'defer' attribute

The script will then only load after the html.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded