• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 235
  • Last Modified:

Could anyone please explain the functioning of this HTML code?

On this site:
http://www.bartleboglehegarty.com/#!/global

the following code (as you can verify by viewing the source of the html page):
 
<div class="entry">
<div class="avideo poster:::http://www.bartleboglehegarty.com/global/files/2011/09/Mentos_Squeeze_Still.jpg src:::http://www.bartleboglehegarty.com/global/files/2011/09/Mentos_Squeeze.mov"></div>
<p>Mentos Squeeze is the latest innovation in chewing gum to come out of Perfetti Van Melle. Whilst many variations of fruit flavoured gum exist in the market, the R&amp;D guys behind Mentos Squeeze have somehow managed to invent a gum with actual fruit inside it. Mentos Squeeze rolls out across Europe over the coming months and to support the launch, we were asked to create a 30” TV ad communicating the product truth in a fun and surprising way. Enjoy.</p>
</div>

Open in new window


produces the following output (which I can check by right clicking on the elements in question and using firebug to analyse the underlying code):
<div id="site-global-post-party" class="article">
                                                                                                                                                                                <h2 class="georgia">Party</h2>
                                                                                                                                                                                <div class="sitepostcontent">
                                                                                                                                                                                                <h3 class="caps">Mentos (Perfetti Van Melle)</h3>
                                                                                                                                                                                                <div class="sitepostbody"><div class="img video" style="background-image: url(&quot;http://www.bartleboglehegarty.com/global/files/2011/09/Mentos_Squeeze_Still.jpg&quot;);"><a class="playicon" style="top: 151.5px; left: 291px;"></a></div><div class="sitepostmeta">
                                                                                                                                                                                                                <div class="siteposttags box col">
                                                                                                                                                                                                                                <h4>Tags:</h4>
                                                                                                                                                                                                                <a href="#!/global/tag/mentos">Mentos</a>, <a href="#!/global/tag/mentos-perfetti-van-melle">Mentos / Perfetti Van Melle</a></div>
                                                                                                                                                                                                                <div class="box col sociallinks">
                                                                                                                                                                                                                                <ul>
                                                                                                                                                                                                                                                <li>
                                                                                                                                                                                                                                                                <a class="facebook external" href="http://www.facebook.com/sharer.php?u=http%3A//www.bartleboglehegarty.com/global/2011/09/26/party/&amp;t=Party"></a>
                                                                                                                                                                                                                                                </li>
                                                                                                                                                                                                                                                <li class="separater"></li>
                                                                                                                                                                                                                                                <li>
                                                                                                                                                                                                                                                                <a class="twitter external" href="http://twitter.com/share?url=http%3A//www.bartleboglehegarty.com/global/2011/09/26/party/&amp;via=GlobalBBH&amp;text=Party"></a>
                                                                                                                                                                                                                                                </li>
                                                                                                                                                                                                                                                <li class="separater"></li>
                                                                                                                                                                                                                                                <li>
                                                                                                                                                                                                                                                                <a class="buzz external" href="http://www.google.com/buzz/post?message=Party&amp;url=http%3A//www.bartleboglehegarty.com/global/2011/09/26/party/"></a>
                                                                                                                                                                                                                                                </li>
                                                                                                                                                                                                                                </ul>
                                                                                                                                                                                                                </div>
                                                                                                                                                                                                </div>
 
<p>Mentos Squeeze is the latest innovation in chewing gum to come out of Perfetti Van Melle. Whilst many variations of fruit flavoured gum exist in the market, the R&amp;D guys behind Mentos Squeeze have somehow managed to invent a gum with actual fruit inside it. Mentos Squeeze rolls out across Europe over the coming months and to support the launch, we were asked to create a 30” TV ad communicating the product truth in a fun and surprising way. Enjoy.</p></div>
                                                                                                                                                                                               
                                                                                                                                                                                                <a class="siteposttop"></a>
</div>
</div>

Open in new window


Could anyone please explain how this is possible?

Also could anyone explain the usage of this strange syntax with three ":::"
 
<div class="avideo poster:::http://www.bartleboglehegarty.com/global/files/2011/09/Mentos_Squeeze_Still.jpg src:::http://www.bartleboglehegarty.com/global/files/2011/09/Mentos_Squeeze.mov"></div>

Open in new window




thanks in advance
0
badwolfff
Asked:
badwolfff
1 Solution
 
Rouneh10Commented:
I suspect the page is using jQuery, possible in combination with other javascript libraries in order to parse the class attributes of the div elements, and also the contents of the <h1> tags.. The script then takes the values it finds and uses them to generate html.
At first glance it looks like the "avideo poster:: etc." tags define parameters for the video player on the page, and I can only guess that the data from the <h1> links to some content fetched through an XHR request.
0
 
ZvonkoSystems architectCommented:
An Expert form EE made a betufull Tool called PageSpy: http:M_1344026.html
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now