I was wondering if it is possible to create a flash movie that rotates values that are stored in HTML. For example if i have these 3 containers:
<div style="display:none">
<img src="someimage1" />
<span class="text1">text1</span>
<span class="text2">text2</span>
</div>
<div style="display:none">
<img src="someimage2" />
<span class="text1">text1</span>
<span class="text2">text2</span>
</div>
<div style="display:none">
<img src="someimage3" />
<span class="text1">text1</span>
<span class="text2">text2</span>
</div>
I want to have some flash movie rotate these values every 10 seconds. I don't want to program it hard into flash, it has to be variable. It has to display the first set, then after 10 sec the second, and so on.
Maybe if it is possible something that stops the toggle, and skip to just the second, or just the third.
I also don't want to use javascript to do this (jQuery etc.), because this conflicts with another timer on the website.
Is there a way of doing this?
If someone could help me get a good resource for this i would be glad, as i have no knowledge of flash, and i have searched the net but just can't find what i am looking for.
Thank you guy!
Look up how to use ExternalInterface. You can call any Javascript you like from Flash/Flex, and you can call any exposed method in your movie from the browser.
Flash finds HTML tough, and your use of element class attributes make me suspect that you might find that Flash would find this kind of rendering tricky. In my most generous moments, I would say that CSS support in Flash is basic and buggy.
Related
Problem:
I'm not sure whether it is technically better to bind generic events to inner or outer tags.
Also concerns deeper nested tags.
Aspects:
Does either use less CPU?
Does either have side effects?
Does either trigger more or less delayed?
Inheritance?
this?
What I/we already found out:
onclick on <a /> does trigger right before following the link
onload does only get triggered by a few tags which really load and display (works on <img />, not on <a />)
Variant example A:
<a href="#" onclick="function();">
<img src="picture.jpg" />
</a>
Variant example B:
<a href="#">
<img src="picture.jpg" onclick="function();" />
</a>
The following is rather unrelated but an explanation has been demanded in the comments:
"whats the point of having an <a> tag surrounding the image if
you are binding the onclick to the <img> tag?" - #Trug
The point is SEO friendly links with the ability to sidechain effects like an exit modal with a warning, an exit transition animation, an analytics event, or just as a kind of destructor.
Example:
<a href="http://seo.friendly.url/deeplink.htm"
onclick="triggerSpecialAnalyticsForExample(); triggerExitModal();">link</a>
Simple - variant B every day of the week and 4 times on the 29th of Feb. Why? Simple - the anchor element doesn't support the load event, thus waiting for it will take a very long time.
Using .addEventListener would be an even better method of attaching the handler to the element for all kinds of reasons.
I am trying to embed audio files on a website for a client (who composes music as her job).
Since she is very specific about quality, she gave me a 20 minute mp3 track # 320 Kbps (approx 50Mb). This track would ideally autoplay on the home page of the website when we arrive on the website, but have controls to pause it if needed.
There will be other players elsewhere (not on autoplay, though), so I need to find a way to do all this with the same look, in a way that I understand and that's simple to install (I'm not so good with JS). Also, I need it to work on all devices, no flash.
I first tried embedding with HTML5 (simple to use, no-flash), but the HTML5 player wouldn't start playing right away (or "stream"), it would wait for the 50Mb file to be fully loaded before playing, which took too long.
I also just tried to install the player "BAR-UI / Compact UI single Item" from SoundManager2, it looked really good in its design, and would be ideal, but I cannot make it work or find a complete enough tutorial for installing a player with controls, even after trying for two hours - either the file doesn't play but the player shows up (although without song names displaying), or the song plays immediately in the browser, but the controls don't show. It's hard to troubleshoot SoundManager2 considering there are 4000 lines just in the CSS in their code, and I've found very few explanations to install SoundManager's Bar-UI and its very confusing files.
WikiAudio has a great page about SoundManager, but it doesn't go into installing and displaying controls.
Other options I've looked at (jPlayer) were either extremely complex for what I'm trying to do (it's just a simple mp3 file playing as it loads on a website!), or were flash-based...
To make the BAR-UI work in your webpage you must insert the HTML fragment. It can be customized with different class names (for example full-width for full width plauer):
<div class="sm2-bar-ui compact">
<div class="bd sm2-main-controls">
<div class="sm2-inline-texture"></div>
<div class="sm2-inline-gradient"></div>
<div class="sm2-inline-element sm2-button-element">
<div class="sm2-button-bd">
Play / pause
</div>
</div>
<div class="sm2-inline-element sm2-inline-status">
<div class="sm2-playlist">
<div class="sm2-playlist-target">
</div>
</div>
<div class="sm2-progress">
<div class="sm2-row">
<div class="sm2-inline-time">0:00</div>
<div class="sm2-progress-bd">
<div class="sm2-progress-track">
<div class="sm2-progress-bar"></div>
<div class="sm2-progress-ball"><div class="icon-overlay"></div></div>
</div>
</div>
<div class="sm2-inline-duration">0:00</div>
</div>
</div>
</div>
<div class="sm2-inline-element sm2-button-element sm2-volume">
<div class="sm2-button-bd">
<span class="sm2-inline-button sm2-volume-control volume-shade"></span>
volume
</div>
</div>
</div>
<div class="bd sm2-playlist-drawer sm2-element">
<div class="sm2-inline-texture">
<div class="sm2-box-shadow"></div>
</div>
<div class="sm2-playlist-wrapper">
<ul class="sm2-playlist-bd">
<li><b>SonReal</b> - I Tried</li>
</ul>
</div>
</div>
</div>
Then you have to load the resources for the player:
The JavaScript file that detects the previous HTML fragment and convert it to a player: bar-ui.js
The CSS file to style the player: bar-ui.css
All these files are in the "demo" folder of the downloadable SoundManager 2: download
would Amazing Audio Player meet your needs? http://amazingaudioplayer.com/ they supply the js with some straightforward customization, and you can finetune the css for your needs.
I've used it successfully with 320kbs files, 12 minutes long.
I have a template which contains (in part) exactly the same content repeated two or three times with minor changes to the bindings, eg:
<div class="xyz-state0" data-ng-hide="data.error || !data.states[0].name">
<div class="xyz-content">
<img data-ng-src="{{data.states[0].image}}" width="48" height="48">
<span>{{data.states[0].name}}</span>
</div>
</div>
<div class="xyz-state1" data-ng-hide="data.error || !data.states[1].name">
<div class="xyz-content">
<img data-ng-src="{{data.states[1].image}}" width="48" height="48">
<span>{{data.states[1].name}}</span>
</div>
</div>
How do I write this to avoid duplicating this HTML? This is specific to its parent view (it won't be used anywhere else) so creating a full-blown widget seems wrong.
Basically I want something similar to ngRepeat, but I can't use that for the following reasons:
I need a specific (and different) style on each parent div.
I need to render a specific number of divs (2 in this case, 3 in another) regardless of whether or not they exist in the scope (ie. data.states could only have 1 element in it, but it still needs to create both divs).
In the other case the items need to be rendered out of order (first 1, then 0, then 2).
I've managed to get a template fragment in a separate HTML file and included it with ngInclude, but I don't know how to get a single name in its new scope to refer to a specific item. My first attempt was this, which doesn't work:
<div class="xyz-state0" data-ng-include="'state.tpl.html'" data-ng-init="state=data.state[0]"></div>
<div class="xyz-state1" data-ng-include="'state.tpl.html'" data-ng-init="state=data.state[1]"></div>
I suspect I could probably do it with a custom controller, but that seems like a heavy solution too. What's the Right Way™?
This is pretty much a textbook case for a custom directive. Define a directive, and then you can do
<state ng-repeat="item in data.states" item="item">.
Alternatively, if a custom directive is too much overkill (depends on whether you'll be reusing that view component elsewhere, mainly), you could just put an ng-repeat on the entire div. The only real issue is the class="xyz-stateN" stuff, but I bet you could hoke that up with ng-class usage.
EDIT:
if you do an ng-repeat, you can just use the $index key (as long as you're always counting up from zero and the state class is the same as the index). Something like
<div ng-class="{{'xyz-state'+$index}}" ng-repeat="state in data.states" data-ng-hide="data.error || !state.name">
<div class="xyz-content">
<img data-ng-src="{{state.image}}" width="48" height="48">
<span>{{state.name}}</span>
</div>
</div>
Would probably work fine. All that said, it's almost always worth making a directive in my opinion. Code gets recycled all the time, plus you can be cautious with namespacing and modularizing if that makes you nervous.
Well, this seems to do the trick (thanks to pfooti for the hint). I'm still not entirely happy with it as the directive is registered globally, whereas I really only want it in this one place.
state.tpl.html:
<div class="xyz-content" data-ng-show="state.name">
<img data-ng-src="{{state.image}}" width="48" height="48" />
<span>{{state.name}}</span>
</div>
view.tpl.html:
<div data-xyz-state="data.states[0]" class="xyz-state0"
data-ng-hide="data.error"></div>
<div data-xyz-state="data.states[1]" class="xyz-state1"
data-ng-hide="data.error"></div>
app.js:
app.directive('xyzState', [function() {
return {
templateUrl: 'state.tpl.html',
scope: {
state: '=xyzState',
},
};
}]);
Interestingly it doesn't work if I try to declare the introducing element as <xyz-state ...> instead of <div data-xyz-state="" ...>, despite the docs saying that this ought to work too. I assume there's some sort of validation thing interfering here.
Just as an FYI, I later revisited this code and decided to do it like this instead: (I'm letting my original answer stand as that is more like what I was originally asking for, and they both seem reasonable in different cases.)
view.tpl.html
<div data-ng-repeat="state in data.states" data-ng-if="!data.error"
data-ng-class="state.class">
<div class="xyz-content" data-ng-show="state.name">
<img data-ng-src="{{state.image}}" width="48" height="48" />
<span>{{state.name}}</span>
</div>
</div>
app.js
...
while ($scope.data.states.length < 2)
$scope.data.states.push({});
$scope.data.states[0].class = 'xyz-state1';
$scope.data.states[1].class = 'xyz-state2';
...
I've done something similar for the other (3-item) case, except there as I wanted to rearrange the order of the items I added an order property for the desired order in the controller and then used data-ng-repeat="button in data.buttons|orderBy:'order'" in the view.
This does mean that a bit of view definitions (display order and CSS classes) have leaked into the controller, but I think the benefit to code clarity outweighs that.
So I have 4 different room transitions (up, down, left & right). I want to be able to set each transition to go to a specific page, and repeat if the same transition is clicked again.
For example, have "left" (data-animation 55) goto "Page1.html", and if I was already on "Page1.html", then it would just transition right back into the page. And I would have the "right" button, go to "Page2.html", etc.
https://github.com/cweigen/page_transition_room
There's the github repo, but this is the code that I've been messing with, experimenting with different versions of it to attempt going to a specific page and repeating if the same button is clicked, but go to another specific page is another menu button is clicked.
<div class="pt-triggers">
<div id="dl-menu" >
<ul class="dl-menu">
<li data-animation="54"><a href="#" > right </a></li>
<div class="pt-triggers1">
<li data-animation="55"><a href="#" > left</a></li>
<div class="pt-triggers2">
<li data-animation="56"><a href="#" > down</a></li>
<div class="pt-triggers3">
<li data-animation="57"><a href="#" > up</a></li></div>
</ul>
</div>
</div>
<div id="pt-main" class="pt-perspective">
<div class="pt-page pt-page-1"><iframe src="http://visiondigit.al/VisionDigital_Launch/" width="100%" height="100%"> </iframe></div>
<div class="pt-page pt-page-2"><iframe src="http://scsuchat.com" width="100%" height="100%"> </iframe></div>
</div>
You can't expect others to download the repo and build it for you. Time matters! That's the first thing you need to learn how to ask a question properly on StackOverflow.
As you are a new user, I'm going to make one-off excuse for you.
The library you are using is not the best choice for your task. However, it does provide as many as 67 different transition effects, which are defined in **pagetransions.js** and called using data-animation attribute. Have a look at the js file and you can choose the specific animation you are looking for.
To solve your other problem, you'll have to write a bit of your own code as the author doesn't provide a function to link each button with specific page, nor hiding the button when you are already on that page. You can use jQuery to do so.
But like I said, this is not the best nor the only option you have.
Check
THIS DEMO
I have created a structure that mostly mimics your requirements. Have a play and try to understand the demo. The structure is quite simple. It uses two external resources which you can see and download from the fiddle.
What do I have to do to get my images to show up on my webpage. I am trying to put the images in my html document. The box shows up but not the image. This the code <img scr="smile.jpg" width="120" height="90"/> I have not put the web page on the internet yet.
<HTML>
<HEAD>
<TITLE> Tay first Web page </TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center"> Why do I want to learn to code? </H1>
<P> I want to learn to code because it will help me develop the skills I need in web development and game development. My goal is to learn how to code in many different languages. It is amazing to me to be able to create something from scratch and making it into your vision.</P>
<H2 ALIGN="center"> Why is coding fun? </H2>
<P> Computer coding is <STRONG> wonderful.</STRONG> You get to make a web page with whatever info you want and add so many things to it to make it mind blowing.There are colours, images, flash, and you can even make a video game if you wanted too. The possibilities are endless and mind blowing.</P>
<H3 ALIGN="center"> How can coding be important in the real world? </H3>
<P> <EM>Technology</EM> is everywhere and is constantly changing. <MARK>Computers</MARK> are so intertwined in our lives. People view web pages all the time and are looking at code everyday. Being able to code can get you a job if you are efficient with different languages.
<P><STRONG>These are the best consoles ever!!!!</STRONG></P>
<UL>
<LI>N64</LI>
<LI>SEGA GENESIS</LI>
<LI>XBOX</LI>
<LI>XBOX 360</LI>
</UL>
<TABLE BORDER="1">
<TR><TD>First</TD></TR>
<TR><TD>Second</TD></TR>
<TR><TD>Third</TD></TR>
</TABLE>
<IMG SRC="smile.jpg" WIDTH="120" HEIGHT="90"/>
</BODY>
</HTML>
You have to spell src correctly (SouRCe). You have two of its letters reversed.
This would have been picked up if you had performed some basic automated QA by using a validator.
your img tag was wrong,it should be
<img src="smile.jpg" width="120" height="90"/>
Check the following:
Could your image possibly be in another folder than your your file?
Could there be other divs or elements on the page that might be "on top" of your image?
Could your layout place things "off-screen"?
Could there be code that sets something to visibility: none?
Could you have spelled the filename of the image wrong?
Are you absolutely certain you force refresh your browser window when trying to load again?
Please give us the entire code; preferably as a JS-fiddle.
If you're looking to find it on a Linux server, the file name is case-sensitive. If you set it up and tested it and found that it tests fine on a Windows system, you will perhaps not have noticed that smile.JPG and SMILE.jpg and Smile.jpg will all be treated as though they're the same thing as smile.jpg. On a Linux host, if you call for smile.jpg and it's been stored as smile.JPG (for example), you'll get the result you're observing.
Width and Height attributes should have units. You want them in pixels?
Try this:
<img src="smile.jpg" width="120px" height="90px"/>