I was wondering if there is any way to update a function in javascript for a html site I have.
My code if below and I just want to execute my function constantly. Almost like how the Unity3D game engine has a "void Update()" and what ever is put into it is constantly ran through.
I am using cordova to make my site an app and need to have a way to detect if the device is landscape or portrait.
Thanks!
if(window.innerWidth > window.innerHeight){all of my code....}
This will do it for you, see fiddle https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/54/
The onresize="myFunction()" is what will trigger the event everytime the page is resized.
javascript
function myFunction() {
var width = window.innerWidth;
var height = window.innerHeight;
if (width > height) {
document.getElementById('test').innerHTML = '<h1>landscape</h1>';
} else {
document.getElementById('test').innerHTML = '<h1>portrait</h1>';
}
}
Related
I am using Adobe Flash Builder with actionscript to make a desktop application.
I am getting some html code from a webpage and putting it into an mx:html element, then attempting to get the content height in order to determine if I should hide the vertical scrollbar or not. However, when using contentHeight it seems to return the height of the previous state of the element, rather than the one just set.
This is the code to fetch the html page
var htmlPageRequest:URLRequest = new URLRequest(url);
htmlPageRequest.method = URLRequestMethod.GET; //set request's html request method to GET
htmlPageLoader.addEventListener(Event.COMPLETE, onHtmlLoaded); //listen for page load
htmlPageLoader.load(htmlPageRequest);//when loaded continue logic in new function
This is the function that is run when the page request is complete
private function onHtmlLoaded(e:Event):void { //logic after html page has loaded
HtmlElement.data = htmlPageLoader.data; //set content
//determine if vscroll bar should be visible
if(HtmlElement.contentHeight > HtmlElement.height) {
scrollbar.visible = true;
}
else {
scrollbar.visible = false;
}
trace(HtmlElement.height);
trace(HTMLELEMENT.contentHeight);
}
I have realised the solution to the problem:
htmlElement.data = htmlPageLoader.data;
Rendering the HTML takes a certain amount of time - the contentHeight is being accessed before the page has actually rendered, causing the previous value to be returned.
In order to fix this, I added an event listener for (htmlRender) in order to not access contentHeight until the rendering is complete.
private function onHtmlLoaded(e:Event):void { //logic after html page has loaded
htmlElement.addEventListener(Event.HTML_RENDER, onHtmlRendered); //once the html has rendered, move on
htmlElement.data = htmlPageLoader.data; //render content
}
private function onHtmlRendered(e:Event):void { //logic for after the page has rendered
//if the content of the HTML element is bigger than the box, show the scrollbar
if(htmlElement.contentHeight > htmlElement.height) {
scrollbar.visible = true;
}
else {
scrollbar.visible = false;
}
}
I am assuming that you are using a URLLoader (htmlPageLoader) instance here to load the webpage into the mx:HTML element, which may not be actually required.
The mx:HTML component actually provides an inbuilt way to load an webpage into itself. This can be done using the location property of the mx:HTML class. It expects a simple string which could be the URL of your webpage you are trying to load.
Once the webpage is loaded, the Event.COMPLETE method is fired, within which you should be able to get your content height properly. So please try the following code:
htmlElement.addEventListener(Event.COMPLETE, onHtmlLoaded);
htmlElement.location = "your URL goes here";
private function onHtmlLoaded(e:Event):void
{
htmlElement.removeEventListener(Event.COMPLETE, onHtmlLoaded);
trace(htmlElement.contentHeight);
}
I've tried the above with a couple of URL's and it seems to be working fine. Also, I took the liberty of using camel case naming convention for htmlElement. It's just best practice.
Hope this helps. Cheers.
I need to add the width property to the canvas .By traceing the value iam geting its value as zero though it contain images and has a width.
//code of adding 5 canvases to the main canvas
public function addcanvas(canarr:Array):void
{
var can_arr:Array=new Array();
can_arr=canarr;
for(var c:int=0;c<can_arr.length;c++)
{
canvasA=new Canvas();
canvasA.id="canvasA";
trace("ccc:"+c);
canvasA.x=(c*10)+10;
canvasA.y=0;2
this.addChild(canvasA);
}
trace("canvasA.width: "+canvasA.width);
}
and next i will add images into each canvas
//enter code here
public function ClubCards(imgarr:Array):void
{
var Gimg_arr:Array = new Array();
Gimg_arr =imgarr;
for(var j:int=0;j < Gimg_arr.length;j++)
{
myimage1 = new Image();
myimage1.x=0+(j*20);
myimage1.y=40;
myimage1.source=gameModule.getStyle(Gimg_arr[j].toString());
GroupingImageListeners(myimage1);
canvasA.addChild(myimage1);
trace("canvasA.width: "+canvasA.width );
}
iam unable to know the width of the canvas which has images in it . can u please help me out.how can i get that canvas width
Thank you in advance
I can't add a comment, so I will add an answer saying this code should be triggered by a call to the updateDisplayList method (during the appropriate phase of the flex component life-cycle). I would suggest reading and understanding this update cycle before doing any further Flex development (it will save you a lot of time in the long-run).
More info can be found here: http://livedocs.adobe.com/flex/3/html/help.html?content=ascomponents_advanced_2.html
UPDATE
Since you mentioned Canvas, I updated the link to point to the 3.x version of the article
You did not make your canvas invalidate its size. Without an order to redraw, I don't think you'll get the correct size. Without Event.RENDER dispatched your component will not calculate its size.
Maybe you should try:
canvas.invalidateSize();
before accessing its width and see the result. This should make your canvas call its method measure() and calculate its size.
I have a problem that I will explain.
I'm doing an animation in HTML5 and CSS3. My idea is that a plane is flying around and it launches a missile after a while. What I want to do is to make the missile appear after that time. I thought about doing that changing the z-Index property of my div (because I have the missile image into a div container) using javascript after a while (any time I choose). For doing that I found the sleep function at the bottom. I created the "appear" function that I know it works because It changes my zIndex value but it doesn't wait the 2 seconds I want.
I also thought I had the solution by using the visibility property, but I have the same problem, sleep function doesn't wait at all.
Any suggestions? Thanks
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
function appear(object){
sleep(200000);
var objective = document.getElementById(object);
objective.style.zIndex=1;
You can pass a function to the setTimeout function which will call that function in x milliseconds.
function waitForMe() {
alert('triggered!');
}
// Call waitForMe in 200000ms
setTimeout(waitForMe, 200000);
So for your example, you would want to use 2000 (2 seconds), not 200000 (200 seconds):
function appear(object) {
setTimeout(function () {
var objective = document.getElementById(object);
objective.style.zIndex=1;
}, 2000);
}
Hiding and showing an element
You can hide and show a method in a few ways:
Use z-index as you suggest, probably not the best way as we can actually hide it instead of sending it to the back of the page.
objective.style.zIndex = 1;
Use display, this hide the object completely.
// hide
objective.style.display = 'none';
// show
objective.style.display = 'block';
Use visibility, this will hide the object but it will still take up space in the page. This wouldn't matter if you're using position:fixed or position:absolute.
// hide
objective.style.visibility = 'hidden';
// show
objective.style.visibility = 'visible';
You can either create a div around the objective, and add it in with javascript like this
document.getElementById('objectivespan').innerHTML=imagehere;
Other than that, you can use
objective.style.visibility='hidden';
and change it to
objective.style.visibility='visible';
for the delay, use
function sleep(){
alert('slept');
}
SetTimeout('sleep', 10000);
I am making a Flash Photogallery and I have a problem with my preloader. My gallery works fine offline(in simulating download) but the problem is when it's online the loading percentage won't show up. So far I figured out that the ProgressEvent is not triggering when gallery loads full size image. Sometimes it triggers on 100%, sometimes it triggers on time but usually it don't trigger. Here is the link of my gallery and some code: solarratko.netii.net
public function kreni(f:String) //function that start when user click on thumbnail
{
URLrequest=new URLRequest(f); //URLrequest for image in full size
dspLoader.load(URLrequest); //loading the image
preloader.visible = true;//prelaoder that shows up is visible
h.visible=true;//text area for percentage is visible
dspLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progres);//adding progress event
dspLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, kraj);//adding complete event
}
public function progres(e:Event):void
{
var perc:Number = e.target.bytesLoaded / e.target.bytesTotal;//calculatin percentage
h.text = Math.ceil(perc*100).toString();//displaying percentage wich is not working online or it start too late
}
public function kraj(e:Event):void
{
h.text="";
preloader.visible = false;
h.visible=false;
}
I have created a video player, but need to add a button that, when clicked, puts the video into full-screen viewing mode. I don't want to scale everything on the stage - just the video. I can't seem to find how to do this - I thought it would be easy.
See if this works:
stage.displayState = StageDisplayState.FULL_SCREEN;
videoPlayer.x = 0;
videoPlayer.y = 0;
//save the width and height in temp vars
//for restoring them later.
videoPlayer.width = stage.fullScreenWidth;
videoPlayer.height = stage.fullScreenHeight;
My understanding is that you can only set the entire stage to full screen, not elements selectively, as you are effectively scaling up the stage object at the root of the display tree. The best way to accomplish the effect that you are looking for would be to arrange/hide/show any objects that you don't want to be visible in a FullScreenEvent.FULL_SCREEN event handler.
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/events/FullScreenEvent.html
Also, a relevant tidbit from the Stage docs, displayState section:
The scaling behavior of the movie in full-screen mode is determined by the scaleMode setting (set using the Stage.scaleMode property or the SWF file's embed tag settings in the HTML file). If the scaleMode property is set to noScale while the application transitions to full-screen mode, the Stage width and height properties are updated, and the Stage the resize event.
Came across this problem recently and this worked like charm. So putting it up here in case it helps anyone.
Flex Client code:
private function startFullScreen(event:MouseEvent):void
{
videoHolder.removeChild(vid); //videoHolder is an spark VideoDisplay
Component
this.stage.addChild(vid);
this.stage.displayState = StageDisplayState.FULL_SCREEN;
oldWidth = vid.width; //store old values required while going back
oldHeight = vid.height;
vid.width = this.stage.width;
vid.height = this.stage.height;
this.stage.addEventListener(FullScreenEvent.FULL_SCREEN,fullScreenHandler);
}
}
/* handler for Fullscreen */
private function fullScreenHandler(event:FullScreenEvent):void
{
//This function is called when user presses Esc key
//on returning to normal state, add the video back
if(!event.fullScreen)
{
this.stage.removeChild(vid);
videoHolder.addChild(vid);
vid.width = oldWidth;
vid.height = oldHeight;
this.stage.removeEventListener(FullScreenEvent.FULL_SCREEN,fullScreenHandler )
}
}
If elements on the stage are scaling it sounds as though you're using the fullScreenRect property rather than simply instructing the stage object to go into fullscreen mode.
Amarghosh has the right approach, but it can be made more flexible by attaching a listener:
stage.addEventListener(Event.RESIZE, _onStageResize, false, 0, true);
stage.displayState = StageDisplayState.FULL_SCREEN;
private function _onStageResize(event:Event):void
{
if(stage.displayState == StageDisplayState.FULL_SCREEN)
{
// Proportionally resize your video to the stage's new dimensions
// i.e. set its height and width such that the aspect ratio is not distorted
}
else
{
// Restore the normal layout of your elements
}
}
To Enter Full Screen Mode
var fullScreenButton:Button = new Button();
...
addChild(fullScreenButton);
fullScreenButton.addEventListener(MouseEvent.CLICK, fullScreenButtonHandler);
...
private function fullScreenButtonHandler(event:MouseEvent)
{
var screenRectangle:Rectangle = new Rectangle(video.x, video.y, video.width, video.height);
stage.fullScreenSourceRect = screenRectangle;
stage.displayState = StageDisplayState.FULL_SCREEN;
}
To Leave Full Screen Mode
...
stage.displayState = StageDisplayState.NORMAL;
...
Note: You can also press escape.
Source: http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS44B1892B-1668-4a80-8431-6BA0F1947766.html