CONCEPT
This page features a combination of visible and hidden div elements, with the hidden ones becoming visible upon clicking a specific span element. One of these hidden elements contains multiple images with overlaid text that are randomly positioned on the page with a 20px margin from each edge.
HTML (includes jQuery 1.8.3, jQuery UI 1.10.1, and jQuery UI touch-punch):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div class="pattern" style="background-image: url('m.png');"></div>
<div class="shadow pat-main-block">
<span class="mood-board">Show container</span>
</div>
<!-- Container div -->
<div id="mood-board">
<span class="hide-mood shadow">Hide container</span>
<div id="img1" class="drag mood-img">
<img id="mimg1" class="shadow" src="mood/brick-mood-1.png">
<span class="mood-name shadow">text</span>
</div>
[...]
</div>
<!-- End of the container div -->
</body>
The aim is to create a dynamic template that can accommodate various images and quantities while ensuring they are not positioned too close to the edges of the screen. Despite some issues in Chrome and Safari regarding image sizes and calculations, the overall functionality works well when tested in Firefox.
Additionally, there is a desire to optimize the JavaScript code to make it more generic, eliminating the need to specify individual elements within the script.
Different outcomes between website and JSfiddle: http://jsfiddle.net/n3q92/1/ This disparity poses a challenge, especially since disabling certain parts does not impact the functionality as expected.
UPDATE: While the code performs adequately in Chrome, Safari presents compatibility issues.
UPDATE 2: Notably, Firefox exhibits distinct behavior concerning image width and height retrieval compared to Chrome and Safari, particularly when loading fresh pages without cache. The discrepancy warrants further exploration into why this occurs despite the images being theoretically loaded behind the scenes.