JavaScript

Kornfeld Eliyahu Peter30-Jun-14 1:16

30-Jun-14 1:16

You code looks extremely complicated for a simple mouseOver test... I can't see what the logic behind detach/attach the event handler every time. It also possible that because of the complexity of your code it takes too much time to handle one event so the second is wasted (JavaScript is single threaded!!!)...
First check your 'frame' code without complication, than add functionality bit-by-bit to check when problems start to show...

I'm not questioning your powers of observation; I'm merely remarking upon the paradox of asking a masked man who he is. (V)

ThetaClear30-Jun-14 1:26

30-Jun-14 1:26

Thanks for your response Peter.
The code that you see is what needs to be there in order for the code to run.
I removed some of the stuff and changed some things but it doesn't matter.
I know that JS is single threaded. Maybe that could be the reason.
I will check it.

ThetaClear30-Jun-14 3:38

30-Jun-14 3:38

I checked the code - it's the bare minimum I need for the mouse over\out so I don't have a lot to remove - although I removed parts.

http://jsfiddle.net/aK5Cz/3/[^]

What do you mean "I can't see what the logic behind detach/attach the event handler every time". There's no logic behind it - I just remove it. It's a built-in function.

The code sometimes reaches the end of mouseover and doesn't execute the mouseout when the cursor is out.
In case you are right about the thread issue: what are my alternatives?

Kornfeld Eliyahu Peter30-Jun-14 3:43

30-Jun-14 3:43

ThetaClear wrote:
"I can't see what the logic behind detach/attach the event handler every time"

What I see that when you are int the mouseOver you detach it and attach mouseOut, in mouseOut you detach mouseOut and attach mouseOver. Why?! Attach both mouseOver and mouseOut once at the beginning...IMHO that's your main problem. You can see that you miss mouseOut when you move mouse too fast...So the thread can't keep up with you and drops events...

I'm not questioning your powers of observation; I'm merely remarking upon the paradox of asking a masked man who he is. (V)

ThetaClear30-Jun-14 4:22

30-Jun-14 4:22

Ok.
I don't know if you had a chance of working with easeljs library but if I want to change the color of a certain shape i.e. my rectangle, I need to draw another rectangle and give it a different color and give it a handler for the mouseOut.
To do that, I need to remove the previous rectangle.
I can't just attach mouseOver and mouseOut once in the beginning because I'm removing and adding shapes all the time when the user hover on them so I have to add handlers to them.

Now, for your second remark:

Quote:
You can see that you miss mouseOut when you move mouse too fast...So the thread can't keep up with you and drops events...

If that is the problem (moving too fast). how can I solve it?

Kornfeld Eliyahu Peter30-Jun-14 7:11

30-Jun-14 7:11

You have not recreate the shape to change its color, otherwise what use the library has?! Use graphics.beginFill and stage.update in the mouseOver too! Here a very nice sample of it - http://www.createjs.com/#!/EaselJS/demos/dragdrop[^]

I'm not questioning your powers of observation; I'm merely remarking upon the paradox of asking a masked man who he is. (V)

User 483504730-Jun-14 8:41

User 4835047

30-Jun-14 8:41

If it's only about a color change on hover, you don't really need any JavaScript. css would suffice:
http://www.w3schools.com/cssref/sel_hover.asp[^]

modified 20-Oct-19 21:02pm.

Kornfeld Eliyahu Peter30-Jun-14 9:21

30-Jun-14 9:21

Read OP carefully - it's about changing the color of a shape on a HTML canvas! No CSS for that Smile | :)

I'm not questioning your powers of observation; I'm merely remarking upon the paradox of asking a masked man who he is. (V)

User 483504730-Jun-14 9:49

User 4835047

30-Jun-14 9:49

Right, well, this seems to work as requested:
var stage = null;
var sh = new createjs.Shape();

$(document).ready(function(){
var canvas = document.getElementsByTagName("canvas")[0];
var context = canvas.getContext("2d");
stage = new createjs.Stage(canvas);
// main stage surface
stage.enableMouseOver();
drawInitialShape();
});

function drawInitialShape(){
var cont = new createjs.Container();
stage.addChild(cont);

sh.graphics.beginFill('#FF0000').drawRoundRect(0, 0, 20, 20, 1.5);
sh.x = 150;
sh.y = 150;
cont.addChild(sh);
stage.addChild(cont);

sh.addEventListener('mouseover', function(e){
onSeatMouseOver(e);
});

sh.addEventListener('mouseout', function (e) {
onSeatMouseOut(e);
});

stage.update();
}

var onSeatMouseOver = function (e) {
$('body').css('cursor', 'pointer');

sh.graphics.beginFill('#dddddd').drawRoundRect(0, 0, 20, 20, 1.5);
stage.update();
}

var onSeatMouseOut = function (e) {
$('body').css('cursor', 'auto');

sh.graphics.beginFill('#FF0000').drawRoundRect(0, 0, 20, 20, 1.5);

stage.update();
}

modified 20-Oct-19 21:02pm.

Kornfeld Eliyahu Peter30-Jun-14 9:58

30-Jun-14 9:58

Exactly!

I'm not questioning your powers of observation; I'm merely remarking upon the paradox of asking a masked man who he is. (V)

ThetaClear1-Jul-14 1:10

1-Jul-14 1:10

Great, it works!!!
Thanks guys!

S code to have an image with different clickable points that play sound

DecompileCodex18-Jul-14 21:19

DecompileCodex

18-Jul-14 21:19

I just sat there for exactly a minute going over the square. every time the over and out events triggered every time, may just be your CPU or something similiar

Jennifer Estrada26-Jun-14 13:27

Jennifer Estrada

26-Jun-14 13:27

I have a code that works, but I need to find another way of writing the JS. The code has 1 image, but 4 mp3 for sounds. There are different dots on the image that when you click on the dots should be a different sound.

html part:

XML

<html>
<head>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <title>OdysseyWare</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="" ie="8">
    <link href="/globmedia/ow/css/main_2012_12_12.css" rel="stylesheet">
    <link href="/globmedia/ow/css/curric_2012_12_12.css" rel="stylesheet" type="text/css" media="screen">
    <link href="/globmedia/lib/jquery-ui/css/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css">
    <link href="/globmedia/lib/jquery/css/magnific-popup.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/globmedia/lib/jquery/js/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript" src="/globmedia/lib/jquery-ui/js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
    <script type="text/javascript" src="/globmedia/lib/requirejs/js/require.js" type="text/javascript"></script>
</head>
<body id="body">

    <div id="section_0" style="margin: 0px auto; width: 970px">
        <div class="presentation">
            <presentation>
                <div class="section">
                    <h3>Test 1 New</h3></div>
                    <p>However, the introduction and conclusion to "The Way to Wealth"   show that the author’s
            advice is presented in a somewhat ironic way. While the crowd that has gathered to listen to
            Father Abraham agrees with him until the "vendue," or sale, begins, they forget the old man’s
            and begin to "buy extravagantly."</p>
                    <p style="TEXT-ALIGN: center">
                        <div id="test1" data-asset-basepath="media/html5" data-data-basepath="media/html5" data-media-basepath="/globmedia"  data-am-controller="media/html5/test1/js/test1.js"  style="border: 1px solid black; margin-right: auto; margin-left: auto;"></div>
                    </p>
                </div>
            </presentation>
        </div>
    </div>

    <script type="text/javascript">
        require.config({
            baseUrl:'/globmedia'
        });
    </script>

    <script type="text/javascript" src="/globmedia/html5/animationmanager/js/animationmanager.js"></script>
</body>
</html>

js part

/*globals require */
(function(doc){

    'use strict';

    return function init(){

        var _this = this;

        //require in the require module itself and creatjs
        require(['createjs','SimpleInteractiveAnimationModule', 'jquery'],function(c, _anm, jq){
                        var queue = [{id:_this.id + 'audio1',src: _this.assetBasePath + '/test1/media/roles-1_olderMen.mp3', type:'audio'},
                        {id:_this.id + 'audio2',src: _this.assetBasePath + '/test1/media/roles-1_youngMen.mp3', type:'audio'},
                        {id:_this.id + 'audio3',src: _this.assetBasePath + '/test1/media/roles-2_olderWomen.mp3', type:'audio'},
                        {id:_this.id + 'audio4',src: _this.assetBasePath + '/test1/media/roles-2_youngWomen.mp3', type:'audio'},
                        {id:_this.id + 'image1',src: _this.assetBasePath + '/test1/media/roles.png', type:'image'}];

            var pointsNum = 4,
                pointsArray = [],
                pointColor = '#0040ff';

            var pointsObject = {

                point1:{
                    x:382,
                    y:102},

                point2:{
                    x:146,
                    y:172},

                point3:{
                    x:455,
                    y:102},

                point4:{
                    x:312,
                    y:245},

            };

            var anm = _anm.getNewInstance();

            anm.createSimpleInteraction({parentContainer:_this.element,
                                        queue:queue,
                                        copyright:'2009',
                                        callback:setupClickPoints});

            function setupClickPoints(){

                for(var i = 0; i < pointsNum; i++)
                {
                    var tempNum = i + 1;

                    var clickPointShape = new c.Shape();
                    clickPointShape.graphics.beginFill(pointColor).drawCircle(0,0,16).endFill();

                    var clickPoint = anm.createSimpleButton(clickPointShape, getClickPoint(i));

                    anm.updateContainer(clickPoint,{x:pointsObject['point' + tempNum].x,
                                                    y:pointsObject['point' + tempNum].y,
                                                    alpha:0.01});

                    pointsArray.push(clickPoint);
                }
            }

            function getClickPoint(audioIndex){
                return function(event){
                    anm.playAudio(audioIndex);
                };
            }

        });

    };
}(document));

I just need a different JS code.
Thank you

Re: S code to have an image with different clickable points that play sound

Kornfeld Eliyahu Peter29-Jun-14 1:50

devextreme mobile apps call webmethod return only html source code

29-Jun-14 1:50

You probably can use <map> element - http://www.w3schools.com/tags/tag_map.asp[^]

I'm not questioning your powers of observation; I'm merely remarking upon the paradox of asking a masked man who he is. (V)

Member 938843524-Jun-14 16:29

Member 9388435

24-Jun-14 16:29

I using devextreme to develop mobile apps to call my web method wrote in c#. It is success call the web method but the data return is all html source code. I has enable the cross origin in the IIS for the web service.

Below is the jquery get i use to call the web method.

$.get('http://192.168.2.104:81/TwinCatWebServices.aspx/writetempo2', {
btempo2: "'" + viewModel.btempo + "'" }).done(function (result) {
//result is your data
alert("success");
console.log(result);
})
.error(function (result) {
alert(result);
console.log(result);
})

my web method as below

[WebMethod]
public static string writetempo2(string btempo2)
{

string test = "ABC";

return test;

}

I try this as well but also the same

[WebMethod]
public static string writetempo2(string btempo2)
{
string test = "ABC";

var oseries = new System.Web.Script.Serialization.JavaScriptSerializer();
return oseries.Serialize(test);

}

In the browser console, i saw the return result as below:

<title>

AAAAAA

What the mistake I make. Please help.

I am having problem invoking form fields from my js. Any ideas?

samflex24-Jun-14 4:32

samflex

24-Jun-14 4:32

Greetings Experts,

I have the following javascript:

<script type="text/javascript">
    $(document).ready(function () {

        $('#txtToDate').datepicker({ showOn: 'button',
            buttonImage: 'images/20/calendar200.gif',
            buttonImageOnly: true, onSelect: function (dateText, inst) {
                //Calculate the days here
                var days = ($("#txtToDate").datepicker('getDate') - $("#txtFromDate").datepicker('getDate')) / (24 * 60 * 60 * 1000);
                //Assign it to textbox
                $('#numOfDays').val(days);
            },
            onClose: function () { $(this).focus(); }
        });

        $('#txtFromDate').datepicker({ showOn: 'button',
            buttonImage: 'images/20/calendar200.gif',
            buttonImageOnly: true, onSelect:
        function (dateText, inst) {
            $('#txtToDate').datepicker("option", 'minDate', new Date(dateText));
        }
      ,
            onClose: function () { $(this).focus(); }
        });


    });  
    </script>

   <script type='text/javascript'>//<![CDATA[
       $(window).load(function () {
           //Attach click event to button
           $('#Button1').on('click', function () {
               //Get Values from dropdownlist
               var sHour = $('#startHour').val(),
                eHour = $('#endHour').val();

               //create date format from dropdownlist selected values      
               var timeStart = new Date(txtFromDate + sHour).getHours();
               var timeEnd = new Date(txtToDate + eHour).getHours();

               //Calulate the time difference
               var hourDiff = timeEnd - timeStart;

               //Check if hour difference is less than or equal to 2 hours and show the message accordingly
               if (hourDiff <= 2) {
                   alert("A mininum of 2 hours per reservation is required!");
               }
           });
       });//]]>  

</script>

PHP

<asp:TextBox ID="txtFromDate" class="fptextbox12"  placeholder="MM/DD/YYYY" runat="server"  style="width:160px;"></asp:TextBox>
<asp:TextBox ID="txtToDate" class="fptextbox12"  placeholder="MM/DD/YYYY" runat="server"  style="width:160px;"></asp:TextBox>

The top part of Javascript is used for our datepicker functionality.

A user selects a startdate and an enddate and the total number of days between the startdate and enddate are stored in a control ID called numOfDays.

This works fine.

The second part of the javascript is where I am having issues.

A user selects start time and end time.

If the difference between starttime and endtime is not up to atleast 2 hours, the user is notified that a minimum of two hours is required.

The issue is that I am trying to store the value of startDate and endDate in the two lines below and append time to them but this not working:

PHP

//create date format from dropdownlist selected values
var timeStart = new Date(txtFromDate + sHour).getHours();
var timeEnd = new Date(txtToDate + eHour).getHours();

Any ideas what I am doing wrong?

Re: I am having problem invoking form fields from my js. Any ideas?

Pablo Estrada24-Jun-14 4:57

Pablo Estrada

24-Jun-14 4:57

Hi, samflex, you check if the values

var timeStart = new Date(txtFromDate + sHour).getHours();
               var timeEnd = new Date(txtToDate + eHour).getHours();

have the correct value?? Futhermore you need be carefully with the behavior of dropdownlist

Regarts

Re: I am having problem invoking form fields from my js. Any ideas?

samflex24-Jun-14 5:11

samflex

24-Jun-14 5:11

Hi Pablo,

Thanks for the prompt response.

What you just posted is what I have though. What am I missing?

Just to explain further, when you select a date value from the datepicker, say for instance, the FromDate, it goes into the control below:

PHP

<asp:TextBox ID="txtToDate" class="fptextbox12"  placeholder="MM/DD/YYYY" runat="server"  style="width:160px;"></asp:TextBox>

What I am trying to do is grab that value and stick it into this:

PHP

var timeStart = new Date(txtFromDate + sHour).getHours()

This way, if I select start time of 12:00PM, it should show something like:

06/24/2014 12:00PM.

Same goes with txtToDate. Am I not doing it correctly?

Re: I am having problem invoking form fields from my js. Any ideas?

Pablo Estrada30-Jun-14 7:01

Pablo Estrada

30-Jun-14 7:01

Hi Samflex, probably you need to use other method to obtain the correct time. JS have a little tricks with the dates and it is a little confused.

Is better than you check this page
http://www.w3schools.com/js/js_dates.asp[^]
that have a lot of information about that.

With the  few details that I can see, me mainly suppose that your problem is the format. So please check the page for more information

Regarts.

PD: If need more help, feel free to ask. Smile | :)

problem to enter to fullscreen mode when playing video using addEventListener

Asaf Shay21-Jun-14 22:25

Asaf Shay

21-Jun-14 22:25

i have two files , because i have the line document.getElementById(“aa”).addEventListener(‘play’, asaf, false);
when i press play i enter to function asaf , but the video not showing in fullscreen mode,
but if i remove the line i mention
and i just call to asaf() instead then it’s work good .
what is the problem with thw line that i mention ?

here is the post on my blog so you can see also the files
http://asafshay.wordpress.com/2014/06/22/problem-to-enter-to-fullscreen-mode-when-playing-video-using-addeventlistener/[^]

Javascript code to automatically check the checkbox of duplicate record in gridView

Member 1048440017-Jun-14 20:41

Member 10484400

17-Jun-14 20:41

In GridView, one column is of checkboxes, I need that if any duplicate record is there for e.g. Name is duplicate and we check its checkbox then record of its duplicate name should also get checked.

Re: Javascript code to automatically check the checkbox of duplicate record in gridView

Raviranjan_Kumar_Sinha18-Jun-14 1:30

Raviranjan_Kumar_Sinha

18-Jun-14 1:30

Hi,

Lets assume that you want to do on Name so if check one checkbox with Name Ravi and there are 3 record with Name Ravi then all 3 checkbox should get checked,

so you can do like below, lets say that you are having checkboxes

<div id="mainGridDiv">
<input type="checkbox" value="<Name>"/>
<input type="checkbox" value="<Name>"/>
<input type="checkbox" value="<Name>"/>
</div>

JQuery Code
$("#mainGridDiv input[type=checkbox]").change(function(){
var currValue = $(this).val();
$("#mainGridDiv input[type=checkbox]").find("[value='"+currValue+"']").attr("checked",$(this).checked)
});

NOTE:Assuming checkbox is one column of your grid.

Thanks
Raviranjan

Javascript Regex validation

Arunkumar.Koloth9-Jun-14 19:36

Arunkumar.Koloth

9-Jun-14 19:36

Hello,

I am using regex to validate some patterns in javascript

My pattern is

JavaScript

[VF][0-9]

And required output is V1-V9 , F1-F9 in any order (eg:V1,V3,V2,F1,F5,F3) OR (eg: F1,F5,F3,V1,V3,V2)

But it is not working can any one help me?

Thanks and regards.

Re: Javascript Regex validation

Kornfeld Eliyahu Peter9-Jun-14 23:14