CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Michelle Flandin
Michelle Flandin

Reputation: 32

How can I avoid repetitive information in multiple html files?

I am making a website, and have a template for all my pages, but 2/10 of my pages are different versions of the same thing. One is a gallery of pictures, which when you click and image a popup with all of the image information comes up. The second is a list view of the exact same images with popups of the exact same information.

The information that pops up is "hidden" until you click the link, and is done so using divs. This makes the code very long and when I make a change to the information on one page, I have to make it on the other. I don't want to add this information to the template though, because then I would be making all the pages extremely long.

Is there any way to take the information and put it into a separate html file, and then have the List and Gallery html files both access the separate html file? Or are there any other methods of making it less repetitive?

This is an example of the Gallery html file: 

<ol id="selectable">
    <a href="#" data-reveal-id="1">
        <li class="ui-state-list"><b>CT8002</b>
            <img src="IMG">
        </li>
    </a>
</ol>

This is the information both pages access:

<div id="1" class="reveal-modal">
    <h1>CT8002</h1>
    <p>Product information goes here.</p>
    <a class="close-reveal-modal">&#215;</a>
</div>

CSS:

#selectable { 
    list-style-type: none; 
    margin: 0; 
    padding: 0;
    width: 900px; 
}

.reveal-modal { 
    visibility: hidden;
    top: 100px; 
    left: 50%;
    margin-left: -300px;
    width: 600px;
    background: #EEE url(modal-gloss.png) no-repeat -200px -80px;
    position: absolute;
    z-index: 101;
    padding: 30px 40px 34px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -box-shadow: 0 0 10px rgba(0,0,0,.4); 
}

Upvotes: 1

Views: 953

Answers (1)

Shafiq Jetha
Shafiq Jetha

Reputation: 1554

Are you using any framework of any kind? If you aren't then you could explore switching to PHP, and then using include for all of the parts that are similar.

So your code might look like this: 

<ol id="selectable">
    <a href="#" data-reveal-id="1">
        <li class="ui-state-list"><b>CT8002</b>
            <img src="IMG">
            </li>
        </a>
</ol>
<? include 'gallery.php' ?>

would produce (assuming that gallery.php has the second section of code you posted): 

<ol id="selectable">
    <a href="#" data-reveal-id="1">
        <li class="ui-state-list"><b>CT8002</b>
        <img src="IMG">
        </li>
    </a>
</ol>

<div id="1" class="reveal-modal">
    <h1>CT8002</h1>
    <p>Product information goes here.</p>
    <a class="close-reveal-modal">&#215;</a>
</div>

It's a bit of a quick and dirty way of doing it, but it would be the best solution for a small site.

If you're site gets bigger than 10 or 15 pages, you should start looking at some sort of framework to help with this and other problems you may come across.

No point re-inventing the wheel!

Upvotes: 1

Related Questions