run function on mousemove angularjs - javascript

I want create animation on mousemove in angularjs. I found example
https://docs.angularjs.org/api/ng/directive/ngMousemove
but i want to run function.
So inside of body
<body data-ng-mousemove="squareRotate()">
And js:
$scope.squareRotate = function(){
alert();
};
but i cant make it work. How can i manage it without puting it inside of controller ?

Since you didn't post your complete code, one can only guess. I am guessing that either the place of your body is really small, so you don't really move the move over the body, or angularjs application and controller are not properly initialised.
In order to give the html and body enough room, use the following:
html, body {
width: 100%;
height: 100%;
}
I created a working demo in fiddle. The only difference is that I don't use alerts, but a counter, which increases, when you move your mouse over the field.
testApp.directive('testDir', function () {
return function (scope, element) {
var el = element[0];
el.addEventListener(
'mousemove',
function () {
alert('test');
},
false
);
}
});
You may try it here: http://jsfiddle.net/AfNH9/4/
If you meant something different, please specify further.
Use directive:
I update the example to use a directive. The directive is bound to the body tag and uses an eventListener on "mousemove". If you move the mouse over the "Result" window in fiddle, you will see the alert window. http://jsfiddle.net/AfNH9/6/

Please see here : http://plnkr.co/edit/tpl:FrTqqTNoY8BEfHs9bB0f?p=preview
HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" data-semver="1.2.19"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl" data-ng-mousemove="squareRotate()">
<p>Hello {{name}}!</p>
</body>
</html>
js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.squareRotate = function(){
alert();
};
});

Related

Cannot read property 'href' of undefined when clicking inactive link a second time

I get Uncaught TypeError: Cannot read property 'href' of undefined
when I click the link a second time. Any thoughts why? It happens on line: var x = $(e.target).atributes.href.value;
And of the course the subsequent redirect doesnt work. Help much appreciated
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).tap(function (e) {
$('.pq').css("background-color", "white");
if ($(e.target).hasClass("tappedonce")) {
alert("tappedtwice");
var x = $(e.target).attributes.href.value;
alert(x);
window.location.href = x;
}
else {
$(e.target).addClass("tappedonce");
alert("tappedonce");
}
// if ($(e.target).hasClass("pq")) {
// $(e.target).css("background-color", "red");
// }
});
$(document).ready(function () {
$('.pq').addClass("not-active");
});
</script>
</head>
<body>
<a href="https://www.sit.com" class="pq">
paragraph1
</a>
<a href="https://www.sit2.com" class="pq">
paragraph2
</a>
<a href="https://www.sit3.com" class="pq">
paragraph3
</a>
</body>
</html>
<style>
.not-active {
pointer-events: none;
cursor: default;
}
</style>
$(e.target) is a jQuery object, you can get the href value via the attr method
$(e.target).attr("href")
if you want to use attributes you'll have to access the underlying dom node, which happens to be e.target
e.target.attributes.href.value
When you use:
$(e.target).atributes.href.value
the $(e.target) is a jquery object, not an html node; it doesn't have an "attributes" property (this is what the error is telling you).
You can do convert the jquery object back to an html node via .get(0) :
var x = $(e.target).get(0).atributes.href.value
or just use the original e.target:
var x = e.target.atributes.href.value
or, to use jquery:
var x = $(e.target).attr("href")

How to get parent's element offset in javascript with angularjs

console.dir(element[0].parentElement)
console.dir(element[0].parentElement.offsetTop)
I want to get parent's element offset in angularjs.
I try to get information about parentElement.
First row about parentElement has offsetTop like 385.
But when I check parentElement.offsetTop like second row, it return only 0.
I try to using parentElement.getBoundingClientRect(), but it return 0, too.
How cant I get parent's element offset?
if u put ur code in a link function AND the size or position of element's parentElement depends on how you render your html based on scope variable, u are not able to get the correct offsetTop in the link function directly.
Will u try the following way by getting it after current angular digest:
scope.$evalAsync(function(){
console.log(element[0].parentElement.offsetTop);
})
Check if this works.
Here is an example using jquery to get the offset of a parent (I will also create an example of how to do this with a custom attribute directive in angular shortly. Here is a quick example:
HTML
<div>
<div id="mydiv"></div>
</div>
JS
var element = $('#mydiv');
var parentOffset = $(element).offset();
console.log(parentOffset);
ANGULAR
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head runat="server">
<title></title>
</head>
<body ng-controller="myController">
<div>
<div parent-offset>Test</div>
</div>
<script src="scripts/jquery.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
JS
(function () {
angular.module('myApp', [])
.controller('myController', function ($scope) {
})
.directive('parentOffset', function () {
return {
restrict: 'A',
link: function (scope, element, attr) {
console.log(element.parent().offset());
}
}
})
}());

Angularjs: call other scope which in iframe

In my test, given 2 document, A and B. In A document, there is an iframe, the iframe source is B document. My question is how to modify B document certain scope of variable?
Here is my code: A document
<html lang="en" ng-app="">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<script type='text/javascript' src="js/jquery-1.10.2.js"></script>
<script type='text/javascript' src="js/angular1.0.2.min.js"></script>
<script>
var g ;
function test($scope,$http,$compile)
{
$scope.tryget = function(){
var iframeContentWindow = $("#iframe")[0].contentWindow;
var iframeDOM = $("#iframe")[0].contentWindow.document;
var target = $(iframeDOM).find("#test2");
var iframeAngular = iframeContentWindow.angular;
var iframeScope = iframeAngular.element("#test2").scope();
iframeScope.parentcall();
iframeContentWindow.angular.element("#test2").scope().tempvalue = 66 ;
iframeScope.tempvalue = 66;
iframeContentWindow.tt = 22;
iframeScope.parentcall();
console.log(iframeScope.tempvalue);
console.log(angular.element("#cont").scope());
}
}
</script>
</head>
<body>
<div ng-controller="test">
<div id="cont" >
<button ng-click="tryget()">try</button>
</div>
</div>
<iframe src="test2.html" id="iframe"></iframe>
</body>
</html>
My B document:
<!doctype html>
<html lang="en" ng-app="">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<script type='text/javascript' src="js/jquery-1.10.2.js"></script>
<script type='text/javascript' src="js/angular1.0.2.min.js"></script>
<script>
var tt =11;
function test2($scope,$http,$compile)
{
console.log("test2 controller initialize");
$scope.tempvalue=0;
$scope.parentcall = function()
{
$scope.tempvalue = 99 ;
console.log($scope.tempvalue);
console.log(tt);
}
}
</script>
</head>
<body>
<div ng-controller="test2" id="test2">
<div id="cont" >
<button ng-click="parentcall()">get script</button>
</div>
{{tempvalue}}
</div>
</body>
</html>
Note: Actually there is some way to do it, which i feel it like a hack instead of proper way to get it done:
that is create a button in b Document, and then bind with angularjs ng-click. After that A document jquery "trigger" click on button.
To access and communicate in two directions (parent to iFrame, iFrame to parent), in case they are both in the same domain, with access to the angular scope, try following those steps:
*You don’t need the parent to have reference to angularJS library…
Calling to child iFrame from parent
1.Get child iFrame element from the parent (link to answer):
document.getElementById("myIframe").contentWindow
2.Access the scope of the element:
document.getElementById("myIframe").contentWindow.angular.element("#someDiv").scope()
3.Call the scope’s function or property:
document.getElementById("myIframe").contentWindow.angular.element("#someDiv").scope().someAngularFunction(data);
4.Call $scope.$apply after running the logic of the function/updating the property (link to Mishko’s answer):
$scope.$apply(function () { });
Another solution is to share the scope between the iFrames, but then you need angular in both sides: (link to answer and example)
Calling parent from child iFrame
Calling the parent function:
parent.someChildsFunction();
Will update also on how to do it cross domain if it is necessary..
You should be able to get parent scope from iFrame:
var parentScope = $window.parent.angular.element($window.frameElement).scope();
Then you can call parent method or change parent variable( but remember to call parentScope.$apply to sync the changes)
Tested on Angular 1.3.4
The best way in my mind to communicate with the iframe is using window.top. If you want your iframe to get your parent's scope, you can set window.scopeToShare = $scope; within your controller and it becomes accessible for the iframe page at window.top.scopeToShare.
If you want your parent to get the iframe scope, you can use
window.receiveScope = function(scope) {
scope.$on('event', function() {
/* Treat the event */
}
};
and within the iframe controller call window.top.giveRootScope($rootScope);
WARNING: If you are using this controller multiple times, make sure to use an additional ID to identify which scope you want.
This one is quite simple and works for me:
in the controller code of iframe page:
$window.parent.window.updatedata($scope.data);
in the parent page controller code:
window.updatedata = function (data) {
$scope.$apply(function () {
$scope.data = data
}
}

Replacing an element on page using JavaScript

I have a video player that runs client-side, and I want to store a configuration for it so I don't have to write it each single time.
I had an idea where I could place a marker in the markup, such as:
<player id="Player1" #marker></player>
Or something to that effect, and then replace #marker with the settings I have stored in the javascript function.
I know some basic Javascript, but I have never done something so advanced.
Here is an example:
<script type="text/javascript" language="JavaScript">
flowplayer("player", "http://www.easymuaythai.com/Videos/FlowPlayer/flowplayer-3.2.7.swf", #marker);
</script>
Where it says #marker, I want to replace it with:
{
clip: {
Scaling: 'fit',
onStart: function (clip) {
var w = parseInt(clip.metaData.width, 10),
h = parseInt(clip.metaData.height, 10);
$(this.getParent()).css({
width: w,
height: h
});
}
}
}
You can use JQuery,
add this to the Head section of your page :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
then write this in your js file or section
$('#player1').attr('playerConfiguration', 'Value');
that will cause <player id="Player1" playerConfiguration="value"></player>
hope that helps...
Maybe this will help you ? It creates and sets an attribute (marker) to the player node and it gives it a value (config)
<html>
<head>
<script type="text/javascript">
var p = {
onload: function() {
var markerAttribute = document.createAttribute("marker");
document.getElementById("Player1").setAttributeNode(markerAttribute);
markerAttribute.nodeValue = "config";
}
};
</script>
</head>
<body onload="p.onload()">
<div>
<player id="Player1"></player>
</div>
</body>
</html>
You could include Jquery and do the following:
$("#Player1").attr('config', 'write=all&settings;you,need');
Or something like:
$("#Player1").replaceWith('The html code u want');

jQuery, call class before addClass and removeClass

The code works well, but I have no control of my layout. It toggles between two button states correctly once the link is pressed. How do I call the 'plus class' before the link is pressed? Please help. Also, I've tried divs and spans to organize it, but it needs some tweeking
Thanks,
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
</head>
<style type="text/css">
#h6{font-size: 12px; padding-right: 0px;}
.plus{left:0px;height:33px;width:32px; background:url('sprite.gif') 0 0px;}
.minus{left:0px;height:33px;width:32px; background:url('sprite.gif') 0 -34px;}
</style>
<h6 id="deToggle">Larger</h6>
<script language="javascript">
var click = 0%2;
var fontSizes = [14, 16]
$('#deToggle').toggle(
function(){
var sprot = $('#deToggle');//
var tog = $('#deToggle');
tog.html('Larger');
$('#OurText').css('fontSize', fontSizes[1] + 'px');
$(this).val("-");
tog.addClass('plus');
tog.removeClass('minus');
},
function(){
var tog = $('#deToggle');
tog.html('Smaller');
$('#OurText').css('fontSize', fontSizes[0]+ 'px');
$(this).val("+");
tog.removeClass('plus');
tog.addClass('minus');
});
</script>
<p id="OurText">My Text!!!</p>
</html>
sprit.gif rollover image
I reply 2 days before something like this
see here
ask for help
DEMO
Do you mean you want to apply the class on the initial page load?
Call the code to add the plus class on the initial page load. I've also refactored your code into functions and put it all in jQuery's document.ready function
$(document).ready(function(){
Plus();
$('#deToggle').toggle(function(){
Plus();
}, function(){
Minus();
});
});
function Plus(){
var sprot = $('#deToggle');//
var tog = $('#deToggle');
tog.html('Larger');
$('#OurText').css('fontSize', fontSizes[1] + 'px');
$(this).val("-");
tog.addClass('plus');
tog.removeClass('minus');
}
function Minus(){
var tog = $('#deToggle');
tog.html('Smaller');
$('#OurText').css('fontSize', fontSizes[0]+ 'px');
$(this).val("+");
tog.removeClass('plus');
tog.addClass('minus');
}
You need to add doctype for css to work. Add this before the head tag
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
This is because you didn't set the initial size. you can use either css or javascript for that.
Recommended way is to use CSS. Add this to your style
#OurText {
font-size: 14px;
}
See Demo. http://jsfiddle.net/RV5LE/
I have cleaned your code a bit. and next time post your question with a copy on jsfiddle
css('fontSize', fontSizes[0]+ 'px');
Should be:
css('font-size', fontSizes[0]+ 'px');
↑
That fontSize is used in animate().
Also you do not need that + 'px' all numeric css values can be given as numeric.

Categories