JavaScript - Canvas Problems On Touch Devices

I'd be grateful for any help please. I've just started to build my first ever sencha app and am pleased with the results so far, but am now stuck on one thing. I've built a search form and want to be able to display the results on the same page, but this is where I'm stuck. The form works and sends the results using GET, but it doesn't send it to the correct place. I want to show it on the same page (I've built a php file called search.php to handle the results), but it reloads the whole app with the variables in the url.

I've tested all of the code away from the app and it works perfectly so I know the problem isn't with the code, but more with my lack of understanding of Sencha so would be extremely grateful for any help.
Code:

searchForms = new Ext.TabPanel({
    fullscreen: true,
    title: 'Search',
    displayField: 'text',
    sto  searchForm,
    iconCls: 'search',  
    items: [{
        id: 'searchSubmit',
        xtype: 'form',
        standardSubmit : true,
        scroll: 'vertical',
        items: [{
            xtype: 'fieldset',
            title: 'Keywords',
            defaults: {
                // labelAlign: 'right'
                labelWidth: '35%'
            },
            items: [{
                xtype: 'textfield',
                name: 'keywords',
             id: 'keywords',
                placeHolder: 'EG: Music, TV',
                autoCapitalize : true,
                required: true,
                useClearIcon: true
            }]
        }, {
            xtype: 'fieldset',
            title: 'Advanced Search',
            items: [{
                    xtype: 'selectfield',
                name: 'genre',
             id: 'genre',
                label: 'Genre',
                options: [{
text: 'All',
value: ' '
text: 'Country',
value: '1'
text: 'Sci-Fi',
value: '2'
text: 'Western',
value: '3'
                }]
            }, {
                xtype: 'selectfield',
                name: 'media',
             id: 'media',
                label: 'Media',
                options: [{
text: 'All',
value: ' '
text: 'Music',
value: '1'
text: 'TV',
value: '2'
text: 'Movie',
value: '3'
                }]
            }]
        }, {
            layout: 'vbox',
            defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
            items: [{
                text: 'Search',
                 ui: 'confirm',
                scope: this,
                hasDisabled: false,
                handler: function(){
                    searchForms.submit({
                    url: 'search.php'
                });
                }
            }, {
                text: 'Reset',
                ui: 'decline',
                handler: function(){
                    searchForms.reset();
                }
            }]
        }]
    }]
});

I've then tried to use this to display the results on the same page, but as I say this just doesn't work. It doesn't call the search.php page at all.

I've made sure all of the files (except the index.js file which is in a js folder) are in the same directory as the index.html file.

I've also tried to load the file in the app seperately by using:

Code:

 
Ext.regModel('mobile', {
    fields: [
       {name: 'text',        type: 'string'}
    ]
});

var searchForm = new Ext.data.TreeStore({
    model: 'mobile',
    proxy: {
        type: 'ajax',
        url: 'search.php?keywords=test',
        reader: {
            type: 'tree',
            root: 'items'
        }
    }
});

and that works perfectly so I know that all of the php stuff is working and does work with Sencha Touch, but I'm just not sure how to get it to only work when somebody clicks 'search'

I'd be grateful for any help with this as I've spent days searching the web to get this fix, but nothing seems to be working

I don't know if this is of help, but the main javascript file is:

Code:

var tabPanel;

var homePanel = new Ext.Panel({
    title: 'Home',
    iconCls: 'home',
    fullscreen: true,
    scroll:{direction:'vertical',threshold:7},
    items: [{
        html: '<center><p>Home</p></center>'    
    }]
});

var servicePanel = new Ext.Panel({
    title: 'Services',
    iconCls: 'team',
    fullscreen: true,
    items: [{
        html: '<center>Please choose a service</center>'    
    }]
});

var searchPanel = new Ext.Panel({
    title: 'Search',
    iconCls: 'search',
    fullscreen: true,
    items: [{
        html: '<center>Search</center>' 
    }]
});

var feedtabpanel = new Ext.Carousel({
    title: 'More',
    iconCls: 'more',
    fullscreen: true,
    sortable  : true,
    xtype:'panel',
    scroll:{direction:'vertical',threshold:7},
    items: [
        {
            title: 'Contact',
            html : '<center><h1>Contact Us</h1></center>',
        },
        {
            title: 'Feedback',
            html : '<center><h1>Let us know what you think<h1></center>',
        },
        {
            title: 'Tell a friend',
            html : '<center><h1>Tell your friends how much you love this app</h1></center>',
        }
    ]
});


searchForms = new Ext.TabPanel({
        fullscreen: true,
        title: 'Search',
        displayField: 'text',
        sto  searchForm,
        iconCls: 'search',  
        items: [{
            id: 'searchSubmit',
            xtype: 'form',
            standardSubmit : true,
            scroll: 'vertical',
            items: [{
                xtype: 'fieldset',
                title: 'Keywords',
                defaults: {
                    // labelAlign: 'right'
                    labelWidth: '35%'
                },
                items: [{
                    xtype: 'textfield',
                    name: 'keywords',
                 id: 'keywords',
                    placeHolder: 'EG: Music, TV',
                    autoCapitalize : true,
                    required: true,
                    useClearIcon: true
                }]
            }, {
                xtype: 'fieldset',
                title: 'Advanced Search',
                items: [{
                        xtype: 'selectfield',
                    name: 'genre',
                 id: 'genre',
                    label: 'Genre',
                    options: [{
    text: 'All',
    value: ' '
    text: 'Country',
    value: '1'
    text: 'Sci-Fi',
    value: '2'
    text: 'Western',
    value: '3'
                    }]
                }, {
                    xtype: 'selectfield',
                    name: 'media',
                 id: 'media',
                    label: 'Media',
                    options: [{
    text: 'All',
    value: ' '
    text: 'Music',
    value: '1'
    text: 'TV',
    value: '2'
    text: 'Movie',
    value: '3'
                    }]
                }]
            }, {
                layout: 'vbox',
                defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
                items: [{
                    text: 'Search',
                     ui: 'confirm',
                    scope: this,
                    hasDisabled: false,
                    handler: function(){
                        searchForms.submit({
                        url: 'search.php'
                    });
                    }
                }, {
                    text: 'Reset',
                    ui: 'decline',
                    handler: function(){
                        searchForms.reset();
                    }
                }]
            }]
        }]
    });

Ext.regModel('mobile', {
    fields: [
        {name: 'text',        type: 'string'}
    ]
});

var searchForm = new Ext.data.TreeStore({
    model: 'mobile',
    proxy: {
        type: 'ajax',
        url: 'search.php',
        reader: {
            type: 'tree',
            root: 'items'
        }
    }
});

var store = new Ext.data.TreeStore({
    model: 'mobile',
    proxy: {
        type: 'ajax',
        url: 'areas.php',
        reader: {
            type: 'tree',
            root: 'items'
        }
    }
});

var nestedList = new Ext.NestedList({
    fullscreen: true,
    title: 'Location',
    displayField: 'text',
    sto  store,
    iconCls: 'locate',  
});

nestedList.on('leafitemtap', function(subList, subIdx, el, e) {
    var store      = subList.getStore(),
        record     = store.getAt(subIdx),
        recordNode = record.node,
        title      = nestedList.renderTitleText(recordNode),
        card, preventHide, anim;

    if (record) {
        card        = record.get('card');
        anim        = record.get('animation');
        preventHide = record.get('preventHide');
    }

    if (card) {
        tabPanel.setCard(card, anim || 'slide');
        tabPanel.currentCard = card;
    }
});

var services = new Ext.data.TreeStore({
    model: 'mobile',
    proxy: {
        type: 'ajax',
        url: 'subcats.php',
        reader: {
            type: 'tree',
            root: 'items'
        }
    }
});

var servicesList = new Ext.NestedList({
    fullscreen: true,
    title: 'Services',
    displayField: 'text',
    sto  services,
    iconCls: 'team',    
});

servicesList.on('leafitemtap', function(subList, subIdx, el, e) {
    var store      = subList.getStore(),
        record     = store.getAt(subIdx),
        recordNode = record.node,
        title      = servicesList.renderTitleText(recordNode),
        card, preventHide, anim;

    if (record) {
        card        = record.get('card');
        anim        = record.get('animation');
        preventHide = record.get('preventHide');
    }

    if (card) {
        tabPanel.setCard(card, anim || 'slide');
        tabPanel.currentCard = card;
    }
});

Ext.setup({
    icon: 'icon.png',
    glossOnIcon: false,
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',

    onReady: function() {

        tabPanel = new Ext.TabPanel({
            tabBar: {
                dock: 'bottom',
                layout: {
                    pack: 'center'
                }
            },
            fullscreen: true,
            ui: 'dark',
            animation: {
                type: 'cardslide',
                cover: true
            },
            items: [
                homePanel,
                nestedList,
                servicesList,
                searchForms,
                feedtabpanel
            ]
        }); 
    }
})

Hi developers

Needing some help.

My javascript/css drop down menu is not working on the ipad or other touch screen devices. It works fine on laptops & desktops which use a mouse.

I've discovered that this is because touchscreen devices like the Ipad do not recognise the onmouseover/onmouseout event handler that my script relies on. Is there any way I can modify my script so that it is compatiable both with traditional devices and touchscreen devices?

The code I am using is:
<script type="text/javascript"><!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;

//--></script>

Which drives the following html:

<ul id="links">

<li><a href="whats_new/whats_new.html">what's new</a></li>

<li><a href="#"

onmouseover="mopen('m1')"

onmouseout="mclosetime()">clothing</a>

<div id="m1"

onmouseover="mcancelclosetime()"

onmouseout="mclosetime()">

<a href="clothing/clothing_page1.html">clothing</a>

</div>

</li>

<li><a href="#"

onmouseover="mopen('m2')"

onmouseout="mclosetime()">accessories</a>

<div id="m2"

onmouseover="mcancelclosetime()"

onmouseout="mclosetime()">

<a href="bags/bags_page1.html">bags</a>

<a href="jewellery/jewellery_page1.html">jewellery</a>

</div>

</li>
</ul>

Any suggestions would be much appreciated.

Thank you.

Nonye

Hello all,
I've got a problem with a JS dropdown menu that I'm using. It's an unordered HTML list that is driven by a JS file.

The menu is at Watt You Need Electrical - Offering Electrical Services For Geelong, Bellarine Peninsula & The Surf Coast

Initially when I got the menu template all the top level items and all the list items were coded as links. What I've done is make the Electrical heading just text and the two dropdown list items below it are still links. The menu works both on a desktop with a pointer and also on a mobile device by touch. The problem is that on a mobile device when I touch the Electrical heading the dropdown doesn't appear. The Solar heading and the dropdown below it work fine because the Solar heading is still a link. Obviously I've created the problem by changing the Electrical heading to text from a link but I'd like to be able to have it that way.

I've tested using some online mobile device emulators and it works OK there but when I physically test on an Iphone 5 the bug is there. I haven't been able to get my hands on any other phones or devices to test yet so don't know if it's a problem just with Iphones or Ipads.

I've had a look through the Dropdown.src.js file but it's way beyond me, I've listed both the HTML and JS file below.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Watt You Need Electrical - Offering Electrical Services For Geelong, Bellarine 
Peninsula &amp; The Surf Coast</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="Watt You Need Electrical is your one stop shop for all types of electrical services. Whether you need some domestic, commercial, or even industrial electrical work done we can 
help. We also can advise on and install solar power systems and split air conditioners." />
<meta name="keywords" content="electrical services" />
<meta name="robots" content="index, follow" />
	
																				<link rel="stylesheet" type="text/css" href="css/styles.css" media="Screen" />
																				<link rel="stylesheet" type="text/css" href="css/mobile.css" media="handheld" />
																				<link media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" rel="stylesheet" />
																				
															
																				
									<script>
									// initialise the drop-down menus
									runOnLoad(Dropdown.initialise);
									</script>
				
												
</head>
<body>


<div id="wrapper">

	<a href="tel://+61425859742"><div id="mobile_header"></div></a>
	<a href="tel://+61425859742"><div id="phoneBlock"></div></a>

	
	<div id="header"></div>
	
	<div id="nav">
	<ul class="dropdown">
  <li>
    <a href="index.html">Home</a>
		</li>    
		<li>Electrical
    <ul>
      <li>
        <a href="domestic_electrician.html">Domestic</a>
      </li>
      <li>
        <a href="electrical_contractors.html">Commercial/Industrial</a>
      </li>
    </ul>
  </li>    <li>
	<a href="air_conditioner_installation.html">Air Conditioners</a>
	</li>			<li>
	<a href="solar_power_systems.html">Solar</a>
	<ul>
			<li><a href="solar_system_maintenance.html">Maintenance</a>
			</li>
			<li><a href="solar_energy_facts.html">About Solar</a>
			</li>
			</ul>
	</li>    <li>
	<a href="b_type_gas_service.html">Type B Gas</a>
	</li>  <li>
	<a href="formgenerator/forms/contact.html">Contact Us</a>
	</li>
</ul>
	</div>	 					
	
	
	
				<div id="content-2">
				<div class="clear">&nbsp;</div>
						 <div id="top_border"></div>
						 		 <div id="content-2-1">
								 
								 			<span class="blackheading">Watt You Need Electrical - 
											Offering Electrical Services For Geelong, Bellarine Peninsula &amp; The Surf Coast</span>
											
			<p>Watt You Need Electrical Services can help you with all your electrical needs. We're not one of the big franchise electrical contractors so we can 
			take that extra bit of time and effort to make sure you get the best service and advice.
			<br /><br />
			If it's just an extra power point you need all the way to a complete house rewire, thinking about making the switch to solar power, or if you want a 
			split airconditioner to keep your house or business cool and comfortable, our focus is on exceeding our customer's expectations and providing the best 
			quality job at a competitive price.
			<br /><br />
			Our service doesn't just stop at <a href="domestic_electrician.html">domestic electrical</a> and <a href="solar_power_systems.html">solar power</a>, 
			we can also attend to your <a href="electrical_contractors.html">commercial and industrial electrical</a> needs and we specialise in <a href="b_type_gas_service.html">B 
			Class gas appliance</a> repair and maintenance. Our range of services and quality workmanship are what sets us apart from other electrical contractors.
			<br /><br />
			<a href="formgenerator/forms/contact.html">Contact us</a> today and let Watt You Need Electrical take care of your domestic, solar, air conditioning and commercial and industrial electrical services.
			</p>


								</div>
						<div id="bottom_border"></div>
				</div>
	
	<div id="footer">
			 <table class="tableFooter">
			 <tr><td>Watt You Need Electrical Pty. Ltd. &copy; 2014</td></tr>
			 </table>
  </div>
	
</div>

</body>
</html>

Code:

/*

Dropdown.js

Creates touch-friendly drop-down menus

Created by Stephen Morley - http://code.stephenmorley.org/ - and released under
the terms of the CC0 1.0 Universal legal code:

http://creativecommons.org/publicdomain/zero/1.0/legalcode

*/

// create the Dropdown object
var Dropdown = (function(){

  // the delay, in milliseconds
  var DELAY = 250;

  // the list of menus
  var menus = [];

  // Initialises the drop-down menus.
  function initialise(){

    // listen for touch events on the document if appropriate
    if ('createTouch' in document){
      document.body.addEventListener('touchstart', handleTouchStart, false);
    }

    // loop over the menus, converting them
    var menus = document.querySelectorAll('ul.dropdown');
    for (var i = 0; i < menus.length; i ++) applyTo(menus[i]);

  }

  /* Handles a touch start event. The parameter is:
   *
   * e - the event
   */
  function handleTouchStart(e){

    // determine whether any menu is open
    var isOpen = false;
    for (var i = 0; i < menus.length; i ++){
      if (menus[i].isOpen) isOpen = true;
    }

    // return immediately if all menus are closed
    if (!isOpen) return;

    // move up the document tree until we reach the root node
    var node = e.target;
    while (node != null){

      // return immediately if we are inside a drop-down menu
      if (/\bdropdown\b/.test(node.className)) return;

      // move onto the parent node
      node = node.parentNode;

    }

    // close all menus
    close();

  }

  /* Closes all menus except the specified menu. The parameter is:
   *
   * menu - a menu not to close; this parameter is optional
   */
  function close(menu){

    // loop over the menus, closing them
    for (var i = 0; i < menus.length; i ++){
      if (menus[i] != menu) menus[i].close();
    }

  }

  /* Creates a drop-down menu. The parameter is:
   *
   * node - either the DOM node of the menu or the ID of the node
   */
  function applyTo(node){

    // fetch the DOM node if a string was supplied
    if (typeof node == 'string') node = document.getElementById(node);

    // create and store the new menu
    menus.push(new Menu(node));

  }

  /* Creates a drop-down menu. The parameter is:
   *
   * node - the DOM node of the menu
   */
  function Menu(node){

    // store the node
    this.node = node;

    // update the class name
    node.className += ' dropdownJavaScript';

    // listen for mouse events
    if ('addEventListener' in node){
      node.addEventListener(
          'mouseover', this.bind(this.handleMouseOver), false);
      node.addEventListener('mouseout', this.bind(this.handleMouseOut), false);
      node.addEventListener('click',    this.bind(this.handleClick),    false);
    }else{
      node.attachEvent('onmouseover', this.bind(this.handleMouseOver));
      node.attachEvent('onmouseout',  this.bind(this.handleMouseOut));
      node.attachEvent('onclick',     this.bind(this.handleClick));
    }

    // listen for touch events if appropriate
    if ('createTouch' in document){
      node.addEventListener('touchstart', this.bind(this.handleClick), false);
    }

  }

  // whether the menu is open
  Menu.prototype.isOpen = false;

  // the timeout
  Menu.prototype.timeout = null;

  /* Binds the specified function to the current object. The parameter is:
   *
   * f - the function
   */
  Menu.prototype.bind = function(f){

    // return the bound function
    var thisObject = this;
    return function(){ f.apply(thisObject, arguments); }

  }

  /* Handles a mouse over event. The parameters a 
   *
   * e         - the event
   * immediate - true to open the menu without a delay
   */
  Menu.prototype.handleMouseOver = function(e, immediate){

    // clear the timeout
    this.clearTimeout();

    // find the parent list item
    var item = ('target' in e ? e.target : e.srcElement);
    while (item.nodeName != 'LI' && item != this.node) item = item.parentNode;

    // if the target is within a list item, set the timeout
    if (item.nodeName == 'LI'){
      this.toOpen  = item;
      this.timeout =
          window.setTimeout(this.bind(this.open), (immediate ? 0 : DELAY));
    }

  }

  // Handles a mouse out event.
  Menu.prototype.handleMouseOut = function(){

    // clear the timeout
    this.clearTimeout();

    // set the timeout
    this.timeout = window.setTimeout(this.bind(this.close), DELAY);

  }

  /* Handles a click event. The parameter is:
   *
   * e - the event
   */
  Menu.prototype.handleClick = function(e){

    // close any other menus
    close(this);

    // find the parent list item
    var item = ('target' in e ? e.target : e.srcElement);
    while (item.nodeName != 'LI' && item != this.node) item = item.parentNode;

    // check that the target is within a list item
    if (item.nodeName == 'LI'){

      // check whether the item has a closed submenu
      var submenu = this.getChildrenByTagName(item, 'UL');
      if (submenu.length > 0 && !/\bdropdownOpen\b/.test(item.className)){

        // open the submenu
        this.handleMouseOver(e, true);

        // prevent the default action
        if ('preventDefault' in e){
          e.preventDefault();
        }else{
          e.returnValue = false;
        }

      }

    }

  }

  // Clears the timeout.
  Menu.prototype.clearTimeout = function(){

    // clear the timeout
    if (this.timeout){
      window.clearTimeout(this.timeout);
      this.timeout = null;
    }

  }

  // Opens the last item hovered over.
  Menu.prototype.open = function(){

    // store that the menu is open
    this.isOpen = true;

    // loop over the list items with the same parent
    var items = this.getChildrenByTagName(this.toOpen.parentNode, 'LI');
    for (var i = 0; i < items.length; i ++){

      // check whether there is a submenu
      var submenu = this.getChildrenByTagName(items[i], 'UL');
      if (submenu.length > 0){

        // check whether the submenu should be opened or closed
        if (items[i] != this.toOpen){

          // close the submenu
          items[i].className =
              items[i].className.replace(/\bdropdownOpen\b/g, '');
          this.close(items[i]);

        }else if (!/\bdropdownOpen\b/.test(items[i].className)){

          // open the submenu
          items[i].className += ' dropdownOpen';

          // determine the location of the edges of the submenu
          var left = 0;
          var node = submenu[0];
          while (node){
            left += node.offsetLeft;
            node = node.offsetParent;
          }
          right = left + submenu[0].offsetWidth;

          // move the submenu to the right of the item if appropriate
          if (left < 0) items[i].className += ' dropdownLeftToRight';

          // move the submenu to the left of the item if appropriate
          if (right > document.body.clientWidth){
            items[i].className += ' dropdownRightToLeft';
          }

        }

      }

    }

  }

  /* Closes the menus within the specified node. The parameter is:
   *
   * node - the node; if omitted, all menus are closed
   */
  Menu.prototype.close = function(node){

    // if no node was specified, close all menus
    if (!node){
      this.isOpen = false;
      node        = this.node;
    }

    // loop over the items, closing their submenus
    var items = node.getElementsByTagName('li');
    for (var i = 0; i < items.length; i ++){
      items[i].className = items[i].className.replace(/\bdropdownOpen\b/g, '');
    }

  }

  /* Returns an array containing the children of the specified node with the
   * specified tag name. The parameters a 
   *
   * node    - the node
   * tagName - the tag name
   */
  Menu.prototype.getChildrenByTagName = function(node, tagName){

    // initialise the list of children
    var result = [];

    // loop over the children, adding those with the right tag name to the list
    for (var i = 0; i < node.childNodes.length; i ++){
      if (node.childNodes[i].nodeName == tagName){
        result.push(node.childNodes[i]);
      }
    }

    // return the children
    return result;

  }

  // return the public API
  return {
    initialise : initialise,
    applyTo    : applyTo
  };

})();

Any help is appreciated.

Hi,
On my website I use CSS Fixed Positioning, but unfortunately on many mobile devices in particular this doesn't work I'd like to be able to turn these into static (e.g. Go to bottom of page) on some devices, but I'm a bit stuck (The Div btw is called apDiv2)

So far I've got

Code:

if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod' || navigator.platform == 'BlackBerry')
{
     $("#apDiv2").css("position", "static");
};

but no dice. Does anybody know what I'm doing wrong? The full css file is at http://atomicbuilds.com/general.css

Thanks, Ed

P.S. Eventually I'd also like to change the actual positioning so -142px goes to 0px, so if anybody knows that that'd be great, but I'm more worried about this first

Im working on a mobile site for a friend and im curious, can i trigger javascript events on screen flick (By flick i mean the way to scroll through homepage screens). Id love to run a few things like that but i dont know if thats possible. If it is is there a tutorial about i could look at?

Hi--

I have a quiz embedded on my site that originates elsewhere (QuizRevolution.com) and is embedded on my site via a link (plus some other code), part of that code being in an iframe. The quiz contains YouTube videos that, because of how the quiz is set up by QuizRevolution, will not play in browsers/devices without Flash (for example, the iPad).

What I would like to do is put some script on my site that will load a SECOND quiz from QuizRevolution (this one without video) for browsers/devices without Flash. This second quiz will substitute for the first one.

Does anyone know how to do this? The tricky part seems to be how I have embedded the quiz in my site, so I have included that part of the page he Code:

 
                 <!--QUIZ BEGINS-->
                
                <article id="page_7c">
			  <div class="box" id="page1">
						<a href="#page_1" class="close"></a>
					<div class="wrapper pad_bot1">
						<div class="grid_16 prefix_4">
							
                            <p></p>
							
 <img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzMTUzNDA1NTM1MjAmcHQ9MTMxNTM*MDU1NTUwMCZwPTIwNDMyMSZkPSZnPTEmbz*wMWFhMzNjMDI4ZWM*NjNmYTZh/NGU1M2FiNzRmZTZlMSZvZj*w.gif" /> <iframe id=test src="http://www.quizrevolution.com/act147691/mini/go/test_your_knowledge_about_ufos" width="380" height="400" frameborder="0" scrolling="no" name="mystudiyoIframe" title="QuizRevolution.com"><a href="http://www.quizrevolution.com/act147691/mini/go/test_your_knowledge_about_ufos">test_your_knowledge_about_ufos</a></iframe> 
 
                          
						</div>
					</div>
				</div>
				</article>
                
                
                 <!--QUIZ ENDS-->

Many thanks for any help! I am entirely stupid when it comes to coding, so if you could be specific in your suggestions, that would be really terrific. Again, thanks!

I am incorporating this menu into a site and for desktop users I need the mouseover. However, after referencing the link below for mobile devices (most management has Blackberrys). I am concerned the mouseover will not work on their phones. How do I add an option that will work on phones - like mouseover OR click option?

http://www.quirksmode.org/m/table.html

Thanks!

Hey everyone,

I have been practicing using canvas to make designs. My current code below will load the word the user inputs and makes it bounce around the canvas as well as a text spinner. However, whenever the user inputs a second word, the bounce below stops to start a new one and the text spinner messes up.
I was wondering if anyone could help me so when the user inputs another word, that it either reloads a new textspinner or adds another one, as well as just add the word to the canvas without stopped the old one.

Here's my current script.
Thanks already,
Joey

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
var ctx;
var a=0.0;
var as=true;//true a is increasing, false decreasing
var x,y;
var xs = 1;
var ys = 1;
var userWord
var myDiv, t;
var test = 0;
var ds ="";//display string
var sli =0; //spinning letter index;

function init(){
	ctx = document.getElementById("myCvs").getContext("2d");
	userWord = document.getElementById("userWord").value;
	x=Math.floor(Math.random()*801)
	y=Math.floor(Math.random()*601);
	drawText();
	setInterval("onEnterFrame()", 50);
	myDiv = document.getElementById("myDiv");	
	for (i =0; i<=userWord.length;i++){
		ds += "*";
	}
	myDiv.innerHTML =ds;
		textSpin();
}

function textSpin(){
	myChar = randomChar();
	var newString = userWord.slice(0, sli);
	newString +=myChar;
	newString += ds.slice(sli+1, ds.length-1);
	myDiv.innerHTML = newString;
	if (myChar == userWord.charAt(sli)){sli++;}
	if (sli<userWord.length){
		t = setTimeout("textSpin()", 80);
	}
}

function randomChar(){
	var rc = Math.random()*26 + 97; //random lowercase char code
	return String.fromCharCode(rc);
}

function onEnterFrame(){
if(a>1){as = false;}
	if(a<0){as = true;}
	if(as){
		a+=0.01;
	}else{
		a-=0.01;
	}
	if(x>800){xs = -1}
	if(x<0){xs=1}
	if(y>600){ys = -1}
	if(y<0){ys=1}
	x+=10 *xs;
	y+=10 *ys;
	drawText();

}



function drawText(){
	ctx.font =  "20px Times New Roman";
	//ctx.fillStyle= "rgb(256,256,256)";
	//ctx.fillText("Hello", x, y);
	ctx.fillStyle = randomColor();
	ctx.fillText(userWord, x,y);
} 
function randomColor(){
	var r = Math.floor(Math.random()*150)+55;
	var g = Math.floor(Math.random()*256)+150;
	var b = Math.floor(Math.random()*20)+50;
	var a = Math.random();
	return "rgba("+ r+ ","+g+","+b+","+ a+")";
}

//function randomFont(){
//	var s = Math.floor(Math.random()*100) +100;
//	return s; //+ "px Times New Roman";}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
	background-color:#000;
}
#myDiv {
	color:#FFF;
}
</style>
</head>

<body onLoad=""><center>
<input type="text" id="userWord" value=""> </input><br>
<input type="button" id="enterWord" value="Enter Word" onClick="init()" ></input><br><br>
<div id="myDiv" > </div>
<canvas id="myCvs" width="800px" height="600px" /><br>
<br>
</center>
</body>
</html>

Hi there!

How should I write this - better than it's now - so that when I rotate a figure, in the next "frame" it would stay rotated? Second thing - if you run this code, and set the angle for, let's say 180 degrees the figure is being drawn in some random location. How do I fix this? Code:

Code:

function GenericFigure(context) {
	this.states = ["wait", "moving", "rotating", "stop"];
	this.state = this.states[0];
	this.ctx = context;
	this.sqrW = this.sqrH = 20;
	this.ctxW = 200;
	this.ctxH = 350;
	
	this.colorsO = {
		red : "#ee1515",
		green : "#45d137",
		blue : "#17a3f3",
		orange : "#ff910f",
		purple : "#680077"
	};
	
	this.colorsA = ["#ee1515", "#45d137", "#17a3f3", "#ff910f", "#680077"];
	
	this.pickColor = function() {
		var num = Math.floor(Math.random() * 5);
		return this.colorsA[num];
	}
}

function Rectangle(context) {
	this.inheritFrom = GenericFigure;
	this.inheritFrom(context);
	this.width = this.sqrW;
	this.height = this.sqrH * 3;	
	this.x = this.ctxW / 2;
	this.y = 0;
	this.rotation = -1;
	
	this.setRotation = function(angle) {
		this.rotation = angle;
	}
	
	this.rotate = function() {
		this.ctx.clearRect(0, 0, this.ctxW, this.ctxH);
		this.ctx.translate(this.x + 2 * this.width, this.y - 2 * this.height + 20);
		this.ctx.rotate(this.rotation * Math.PI / 180);
		this.ctx.fillRect(this.ctxW / 2, 0, this.width, this.height);
		this.ctx.restore();
	}
	
	this.moveDown = function() {
		this.y += 20;
		this.ctx.restore();
		this.ctx.clearRect(0, 0, this.ctxW, this.ctxH);
		this.ctx.fillRect(this.x, this.y, this.width, this.height);
		this.ctx.save();
		
		if(this.rotation > -1) {
			this.rotate();
		}
		l("A");
	}
		
	this.draw = function() {
		this.ctx.fillStyle = this.pickColor();
		this.ctx.save();
		this.ctx.fillRect(this.x, this.y, this.width, this.height);
	}
}

//a tak można wywołać:

var ctx = document.getElementById("game").getContext("2d");
var rect = new Rectangle(ctx);				
      rect.draw();
				
      var inte = setInterval(function(){if(rect.y >= rect.ctxH - rect.height){clearInterval(inte);return;}if(rect.y == 60) rect.setRotation(90);rect.moveDown();}, 500);

And the third problem:

Code:

this.ctx.translate(this.x, 0);

I thought, that this line should set orientation point to top left corner of my figure, but it seems, that it doesn't - after rotation my figure is being drawn two heights lower. Again - how do I fix it?

Any help will be much appreciated .

I've been reading a lot of tutorials on the canvas tag and seen a lot of people using JavaScript that looks something like:

ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.fill();

I understand that ctx is just the variable name and I can replace that with any variable I define, however, I'm looking for a list of all of the methods such as (moveTo, lineTo, fill etc...), as well as what they do.


I hope I'm explaining this or asking this correctly.

Thanks!

-Mike

So I've been making a game using html canvas.

Here is a link to the game. (Move around with wasd, rotate turret with left and right arrows)
http://db.tt/ei3LlR

The problem is that the shadow flickers when it is rotated. This does not happen in firefox.

The shadow is not an image, but another canvas element, generated dynamically from the image of the tank. So the problem seems to be with webkit drawing rotated canvas elements inside another. Could this possibly be the reason behind this, or is it more likely to be a problem on my end?

I just cant wrap my mind around canvas. As far as I can tell theres no logical reason as to why the code would not work. Could someone take a look at it and possibly figure out whats wrong?

I'm trying to intialize and draw a canvas with a simple image. I have the functions in a custom namespace in javascript. I am also using Jquery

Code:

var birdr = new Image();
var birdl = new Image();

$(document).ready(function(){

if(Modernizr.canvas){
   var c = document.createElement('canvas');

   LK.animLoad();

   document.getElementById('backg-canvas').appendChild(c);

   $('canvas').attr({'width':'500','height':'500','id':'canvas'}); 

   var context = LK.returnCanvas();
   context.drawImage(birdl, 400,487,10,10);
}


});

var LK = {
	birdx: 400, //unused (lets just get it to draw the image first :\)
	birdy: 487, //unused
	animLoad: function(){
		birdl.src = "images/bird2.png";
		birdr.src = "images/bird.png";
		//alert(birdl);
		//alert(birdr);
	},
	returnCanvas: function(ca){
		var b_canvas = LK.getCanvas();
		var b_context = b_canvas.getContext('2d');
		return b_context;
	},
	getCanvas: function(){
		var a_canvas = document.getElementById('canvas');
		//alert(a_canvas);
		return a_canvas;
	}

}

Any help would be greatly appreciate thanks.

Btw safari web inspector indicates the canvas is getting properly created and appended to the container div. So that all works fine.

Anyone got any suggestions on techniques? The main one I find is to use translate to move the canvas around, which just seems odd to me. I don't even fully understand how it works. But the one I was looking at used clearRect. In examples given looked as though it had to redraw the canvas every frame.
I'm just mucking around with a simple poker game, figured i'd have the table in one layer and anything that moves on a top layer? By doing that I could only clear each card as it moved around...yes? Anyone know of a better way of doing things?

Hello guys! I need your help!
I want to create a rectangle with a line in the middle with the canvas object. The problem is that the line in the middle gets bigger than the rest of the rectangle. How do I solve this? I believe it has something to do with shadows. If so, how do I turn them off. My code is:
<html>
<head>
<title></title>
</head>
<body>
<canvas id='chart' width='400' height='200'>
<script type="text/javascript">
var canvas = document.getElementById('chart');
var ctx = canvas.getContext('2d');

ctx.lineWidth = 10;
ctx.strokeRect(0, 0, 400, 200);

ctx.moveTo(0, 100);
ctx.lineTo(400, 100);

ctx.stroke();

</script>
</body>
</html>

Code:

<form>
  <input  id="a" size=4 name="neg" placeholder="1st Screen size in inch">
  <input  id="b" size=4 name="hoyr" placeholder="2nd Screen size in inch">
  <input type="submit" value="GO!" onclick="getValue()">
</form>
</div>


<canvas id="MyCanvas" width="1000" height="1000"></canvas>

<script type="text/javascript">
function getValue()
{
	var x = document.getElementById("a").value;
    var y = document.getElementById("b").value;

var aWidth;
var aHeight;
var bWidth;
var bHeight;


var c= document.getElementById("MyCanvas");
var ctx= c.getContext("2d");

ctx.fillStyle="#4AA02C";
ctx.fillRect(0,0,x,y);
}

Here, it draws canvas then disappears immediately.