Guide on loading a div with a flash object without showing it on the screen (element is loaded but remains hidden)

Question

Guide on loading a div with a flash object without showing it on the screen (element is loaded but remains hidden)

Is there a way to achieve an effect that is somewhere between using display: none and visibility: hidden? Specifically, I am trying to have a div element (containing flash content) loaded but not displayed on the page.

Just for clarification: I have embedded a flash object using swfobject.embedSWF within this div. When I use JavaScript to switch the display property from block to none and then back from none to block, it behaves differently across different browsers:

In Internet Explorer, it functions as intended - changing the display back to block retains the object. However, in Chrome and Firefox, it reloads like it did during the initial call of swfobject.embedSWF.

javascript html css flash swfobject

Answer 1

Answer №1

What about placing it in the HTML code on a specific part of the page?

You can do this by enclosing your object or embed code within a div with the id "my-div". This way, you will keep it hidden from view while still being loaded.

<body>
  <!-- other code -->
  <div id="my-div">
    <!-- your object / embed code -->
  </div>
</body>

To ensure that the div stays out of view, apply the following CSS:

#my-div {
  left: -9999px;
  position: absolute;
}

Upon reviewing your question once more, it seems like you aim to hide the div completely. In this case, the provided CSS should suffice. Nevertheless, if you decide to reveal the div later, you can use one of the jQuery methods below:

$("#my-div").css({ position: "static" });

// alternatively
$("#my-div").css({ left: 0 });

Answer 2

What about placing it in the HTML code on a specific part of the page?

You can do this by enclosing your object or embed code within a div with the id "my-div". This way, you will keep it hidden from view while still being loaded.

<body>
  <!-- other code -->
  <div id="my-div">
    <!-- your object / embed code -->
  </div>
</body>

To ensure that the div stays out of view, apply the following CSS:

#my-div {
  left: -9999px;
  position: absolute;
}

Upon reviewing your question once more, it seems like you aim to hide the div completely. In this case, the provided CSS should suffice. Nevertheless, if you decide to reveal the div later, you can use one of the jQuery methods below:

$("#my-div").css({ position: "static" });

// alternatively
$("#my-div").css({ left: 0 });

Guide on loading a div with a flash object without showing it on the screen (element is loaded but remains hidden)

Answer №1

Similar questions

How can I create a carousel-style container in HTML that functions similarly to the one on Upwork?

Experiencing Difficulty Retaining Checkbox State Using LocalStorage Upon Page Reload

The scope of a JS array is being lost in Firebase

Loop through the JSON data and dynamically display corresponding HTML code based on the data

Using document.getElementById will only target a single item

Combining multiple rows into one using either mysql or lodash was achieved by Node

Is your Scrollmagic failing to function once your website is uploaded to the server?

The <h1> element is not responding to the style attribute

requiring a page reload for an AJAX-loaded webpage

Selecting a date in a pop-up

iOS experiences a lag in loading dynamic images

Storybook encounters an undefined error with the Vuex store

Easily create an HTML page from a multitude of intricate JavaScript objects with this convenient method

Creating a Custom Form Control in Angular 2 and Implementing Disable Feature

Elements featured in the header: logo, tagline, graphics, and more

Adding a translucent background image across the entire page in Angular: What's the best method?

jQuery datatables provide a powerful feature for column filtering using jQuery functions

Exploring the Features of Bottom and Right in jQuery

Avoid automatic semicolon insertion in Visual Studio Code

Effortlessly automate clicking with JavaScript or HTML - learn how now!