I have started working on a poetry app for the iOS platform which highlights the relevant text as the recording plays (as selected by the user). The user will see a list of options to play the audio (i.e. starting line, ending line), and as the app plays the recording, the relevant line will also be highlighted. My question is this:

My CSS code which is responsible for highlighting the relevant text looks like this:

#container {
    positioon:relative;
}
#highlight {
    position:absolute;
    width:75px;
    height:75px;
    top:75px;
    left:75px;
    background: rgba(255, 0, 0, 0.4);
}

The values for width, height, top, left, and background are not static, they are dynamic (i.e. they will differ for each line). Is there a way for me to pass these values to the CSS from the JavaScript function that is calling it (which would in turn, be pass to the JavaScript from Objective-C)? Just wondering.

I have started working on a poetry app for the iOS platform which highlights the relevant text as the recording plays (as selected by the user). The user will see a list of options to play the audio (i.e. starting line, ending line), and as the app plays the recording, the relevant line will also be highlighted. My question is this:

My CSS code which is responsible for highlighting the relevant text looks like this:

#container {
    positioon:relative;
}
#highlight {
    position:absolute;
    width:75px;
    height:75px;
    top:75px;
    left:75px;
    background: rgba(255, 0, 0, 0.4);
}

The values for width, height, top, left, and background are not static, they are dynamic (i.e. they will differ for each line). Is there a way for me to pass these values to the CSS from the JavaScript function that is calling it (which would in turn, be pass to the JavaScript from Objective-C)? Just wondering.

• javascript
• jquery
• ios
• objective-c
• css

• Pass it how? You can change an elements styling with javascript! – adeneo Commented May 6, 2013 at 20:20
• I guess what I'm asking is, can I pass parameters to CSS from a JavaScript function the way I can pass parameters to a method from within a programming language like Java or Objective-C? – syedfa Commented May 6, 2013 at 20:22
• Similar can be found [here][1] [1]: stackoverflow./questions/566203/… – S.N Commented May 6, 2013 at 20:26

4 Answers 4

May I propose a different solution? I hope this is a little easier than your current attempt.

If you have some HTML like this:

<div class="lyrics">
   <div class="line">I went down to the demonstration</div>
   <div class="line">To get my fair share of abuse</div>
   <div class="line">Singing, We're gonna vent our frustration</div>
   <div class="line">If we don't we're gonna blow a 50-amp fuse</div>
</div>

So that each 'line' is it's own element, then it makes it very easy for your code to cycle through the lyrics line by line at an interval. This could be song lyrics, sheet music, even audio captions...

As you cycle through the lines you can target each one and add and remove classes. You don't have to use the jQuery library, but I use it pretty extensively so you could do something like:

// before transition
$(this).removeClass('highlight');
$(this).next('.line').addClass('highlight');

Then in CSS just give the ".line.highlight" or ".lyrics .highlight" some style definitions:

.lyrics .highlight {
   font-weight:bold;
   background:#ccc;
}

Things like the width and height would then be inherited, and you could reference them by calling:

$(this).css('width');

jQuery - css() - http://api.jquery./css/ jQuery - next() - http://api.jquery./next/ jQuery - removeClass() - http://api.jquery./removeclass/ jQuery - addClass() - http://api.jquery./addclass/

yes, what you do is in your javascript, look up the value.

$("#highlight").width()

for example, will get you the actual width.

Use jQuery to get and manipulate CSS properties of elements, as detailed here

You can add css to an element using jquery:

$("highlight").css('width','200px');

and you can replace 'width' with any valid css property, as well as pass in multiple properties.