Take charge of JavaScript over CSS using Flash technology

Optimal scenario/arrangement: Imagine a webpage with one Flash movie and a separate section containing several hyperlinks. Each of these hyperlinks is given a distinct class name, like this: Copy code

  <ul>
  <li><a href="" class="randomname1"></a></li>
  <li><a href="" class="randomname2"></a></li>
  <li><a href="" class="randomname3"></a></li>
  <li><a href="" class="randomname4"></a></li>
  </ul>

The Flash movie features four buttons. When a user clicks on one of these buttons, the Flash should communicate with Jquery/JavaScript to highlight the specific classname.

Current Concepts

For the JavaScript segment, it might appear like this

$(function() {
function setClass(className) {$("."+className).css("background","red");}
});

And in certain keyframes within Flash

   1. button 1
   ExternalInterface.call("setClass","randomname1");

   1. button 2
   ExternalInterface.call("setClass","randomname2");

   1. button 3
   ExternalInterface.call("setClass","randomname3");

   1. button 4
   ExternalInterface.call("setClass","randomname4");

The issue is that the interaction between Flash and JS is not functioning as intended, and I am uncertain if they are properly communicating. Any suggestions or guidance to steer me back on track? Thank you for your help, J.

javascriptcssflash

Answer №1

The setClass method will not be visible to the flash code because it is enclosed within the $(document).ready() function.

(For your information, the $(function()... is just a shortcut for $(document).ready(function()...)

To make the method accessible to Flash, you should attach it to the window object or another globally accessible object. For example:

$(function() {
    window.setClass = function(className) {$("."+className).css("background","red");}
});

This is the most straightforward solution.

...or to prevent namespace clutter:

$(function() {
    var ns = window.myNamespace = {};
    ns.setClass = function(className) {$("."+className).css("background","red");}
});

....then in Flash:

ExternalInterface.call("myNamespace.setClass","randomname1");

It's worth noting that I'm not well-versed enough in Flash to confirm whether the second example will work.

Answer №2

Did you verify the availability of ExternalInterface using ExternalInterface.available?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on generating an HTML element using JavaScript and storing it in a MySQL database

I need help with saving a created element to the database so that it remains on the page even after refreshing. Any assistance would be greatly appreciated. Thank you. document.getElementById("insert").onclick = function(){ if(document.getElementById( ...

javascriptjqueryhtmlmysql

Tips for managing the response from a POST request using jQuery

I'm currently working on sending data via POST to my ASP.Net MVC Web API controller and retrieving it in the response. Below is the script I have for the post: $('#recordUser').click(function () { $.ajax({ type: 'POST', ...

javascriptjqueryajaxasp.net-mvc-4asp.net-web-api

Guide to switching content within a DIV when the up and down buttons are pressed using JavaScript and jQuery

I have a functional code with a timeline where each event is connected to the other. There are buttons to delete and copy data, but I want to implement functionality for swapping elements when the up or down button is clicked. I have provided a sample code ...

javascriptjqueryhtmlreplace

Adjust the size of the font for the placeholder text

I've been attempting to adjust the font size of the placeholder text. I added the font size property to the listed classes below, but for some reason, it's not taking effect. Could you please advise me on how to resolve this issue so that I can ...

javascripthtmlcssreactjsmaterial-ui

Ajax UpdateProgress not functional

How can I resolve the issue where my AJAX UpdateProgress bar in ASP.NET is not running when executing a query in the correct format upon button click? Any solutions or help would be greatly appreciated. <html xmlns="http://www.w3.org/1999/xhtml"> ...

javascriptasp.netajax

Can anyone point me in the direction of the source code for JSON.parse in Node.js, JavaScript, or V8?

When using JSON.parse(fileName_or_stringOfJSON), the string is converted into an object. I'm curious about how this conversion process works in NODEJs and where the source code can be found. ...

javascriptnode.js

The Android smartphone is experiencing issues with the responsive design not aligning properly on the

I'm encountering difficulties with creating a Viewport that functions properly on an android smartphone. My website is fully responsive, scaling down to 480 pixels wide. At this point, a min-width of 480px is set on the body tag. Initially, my viewp ...

javascriptandroidhtmlviewportmeta-tags

The data returned by the Axios response.data object is full of nonsensical information when making a

I tried experimenting with Axios by writing a quick test function, but the response.data object I received was all jumbled up. I've been searching online for a solution, but I haven't been able to find one. It seems like all the Axios tutorials o ...

javascriptnode.jsaxios

Tips for positioning a chat box at the bottom of a v-card's visible area

My goal is to create a chat app using Vuejs 3 and Vuetify 3, but I'm encountering an issue aligning the chatbox with the v-card component. Instead of being positioned at the bottom of the v-card, the chatbox (green) appears at the bottom of the page. ...

javascriptcssvue.jsflexboxvuetify.js

Learn the steps to switch the language settings in select2

Hello, I am currently using select2 version 4.0.3. I am trying to change the default language from English to Spanish. I have checked the internationalization section in the documentation, but unfortunately, the method suggested did not work for me. I am ...

javascriptjqueryjquery-select2

Unable to scroll horizontally in tr element due to overflow-x issue

I am having an issue with a table that contains a "tr." Within this row, there are several "td" elements and I am trying to enable horizontal scrolling using the "overflow-x: scroll" property but it is not working as expected. <tr id="TR_TESTS_BY_CAT ...

htmlcss

Headlining the Border

My goal is to separate various headlines (along with their images) by using a bottom-border. I attempted this, but instead of putting a border between headlines, it ends up on the image. Using jQuery $(document).ready(function() { $.ajax({ url: "h ...

jqueryhtmlcss

Dynamic CSS class alteration on scrolling using Vue.js

I am currently in the process of developing a web application using vueJs and bootstrap. I am interested in figuring out how to dynamically change the CSS class of an element based on scrolling behavior. Is there a vue-specific method that can achieve this ...

htmlcsstwitter-bootstrapvue.js

Adjust the styling of elements when they are positioned 300 pixels from the top of the viewport

Hey there, I don't have much experience with JavaScript, but I gave it a shot. I managed to create a script that changes the properties of an element based on its position relative to the viewport of the browser. It took me a couple of days to get it ...

javascripthtmlcssviewport

AngularJS routing with html5mode causing 404 error when using htaccess

I am currently working on my very first angularjs application using version 1.6x, and I am encountering some 404 errors with my router. Here is how my router is set up: app.config(function($routeProvider, $locationProvider) { $locationProvider.html5M ...

javascriptangularjsapache.htaccess

Link with an embedded background image

When I click on the 'law firms' image in my project, instead of displaying a short HTML page with text as intended, it shows a '>' character. I have three circular images on my jsFiddle, and when hovered over, a background shadow ima ...

htmlcss

What is the best way to transfer an element and all its children to another div without losing any jQuery functionality?

At first, sharing an example of the JavaScript and HTML from my page is challenging because I couldn't make it work on JSfiddle. The issue I'm facing involves jQuery on a page where I've created two tabs. Essentially, it's the same con ...

javascriptjqueryhtmlcssdom

Understanding the variance between the created and mounted events in Vue.js

According to Vue.js documentation, the created and mounted events are described as follows: created The created event is called synchronously after the instance is created. By this point, the instance has completed setting up data observation, compute ...

javascriptvue.js

Tips for showing and modifying value in SelectField component in React Native

At the moment, I have two select fields for Language and Currency. Both of these fields are populated dynamically with values, but now I need to update the selected value upon changing it and pressing a button that triggers an onClick function to update th ...

javascriptreactjsreact-nativereact-dropdown-tree-select

Completing online form text entries in WebView without the need for identifying elements

I am currently working on a project to automate filling out an online login form using local string variables. This is the progress I have made so far: web = (WebView) findViewById(R.id.webview); WebSettings webSettings = web.getSettings() ...

javajavascriptandroid