What am I doing wrong? I don't want this to trigger until I click the text.
window.onload = eventMonitor;
html:
<div id="textBox">
<a id="mousee" href="#">Hidden Ships</a></div>
JavaScript:
function eventMonitor(){
document.getElementById('mousee').addEventListener('click', shipsSlider(), false);
function shipsSlider(){
slideWindow = window.open("shipslide.html")
}
}
what am I doing wrong?
you're calling the shipsSlider function in window.onload...
document.
getElementById('mousee').
addEventListener(
'click',
shipsSlider(), // <- right here
false
)
drop the parentheses. there's a difference between a function and whatever it returns.
Related
Since I'm injecting a <span ui-popover></span> after the DOM is constructed I need to reinitiate the popovers otherwise it won't show.
Is there away to do that?
HTML
<div ng-repeat="i in comments">
<div id={{i._id}} class="task" commentId={{i._id}}> {{i.text}} </div>
</div>
I'm using the external rangy library that injects 's around highlighted texts. You can also inject elementAttirbutes to accommodate these span, This is shown in this part of the code:
JS
function initHighLighter() {
var cssApplier = null;
highlighter = rangy.createHighlighter(document);
cssApplier = rangy.createClassApplier('highlight-a',{elementAttributes: {'uib-popover':"test"}}/*, {elementAttributes: {'data-toggle':"popover", 'data-placement':"bottom", 'title':"A for Awesome", 'data-selector':"true", 'data-content':"And here's some amazing content. It's very engaging. Right?"}}*/);
highlighter.addClassApplier(cssApplier);
cssApplier = rangy.createClassApplier('highlight-b', {elementAttributes: {'uib-popover':"test"}}/*, {elementAttributes: {'data-toggle':"popover", 'data-placement':"bottom", 'title':"B for Best", 'data-selector':"true", 'data-content':"And here's some amazing content. It's very engaging. Right?"}}*/);
highlighter.addClassApplier(cssApplier);
}
I'm calling on to highlight parts of the texts, only after I upload them from the server (highlighter1 calls on init highlight written above)
JS
(function(angular) {
'use strict';
angular.module('myApp', ['ui.bootstrap'])
.controller('Controller', function($scope, $http, $timeout) {
$http.get('/comments')
.success(function(response) {
$scope.comments = response;
var allEl=[];
var i;
for (i=0; i<response.length; i++) {
allEl.push(response[i]._id);
}
$http.post('/ranges', {"commentIds":allEl})
.success(function(result){
result.forEach(function(item){
highlighter1(item.dataAction, item.rangyObject, true);
})
})
});
})
})(window.angular);
So in the end my DOM is being changed AFTER I initiated everything and then the attributes associated with the span don't do anything.
your markup should be (notice the prefix)
<span uib-tooltip="hello world"></span>
or if you want dynamic content
$scope.welcomeMessage = "hello world"; // inside controller
..
<span uib-tooltip="{{welcomeMessage}}"></span>
if you want to reinitialize the tooltip, you can trigger a $destroy event and have it rebuilt, one way if by using ng-if and setting it to true when you need it.
<span ng-if="doneUpdating" uib-tooltip="hello world"></span>
I can't find any up to date documentation on this scenario, and it's really frustrating.
I have tel:555-555-5555 links and mailto:johndoe#555.com and I want to track each click separately.
Should I add two of these snippets, one for each type? I noticed there is a "Conversion_Label" field, so I assume I should?
<script type="text/javascript">
/* <![CDATA[ */
goog_snippet_vars = function() {
var w = window;
w.google_conversion_id = XXXXXXXXX;
w.google_conversion_label = "XXX1";
w.google_remarketing_only = false;
}
// DO NOT CHANGE THE CODE BELOW.
goog_report_conversion = function(url) {
goog_snippet_vars();
window.google_conversion_format = "3";
window.google_is_call = true;
var opt = new Object();
opt.onload_callback = function() {
if (typeof(url) != 'undefined') {
window.location = url;
}
}
var conv_handler = window['google_trackConversion'];
if (typeof(conv_handler) == 'function') {
conv_handler(opt);
}
}
/* ]]> */
<script type="text/javascript"
src="//www.googleadservices.com/pagead/conversion_async.js">
</script>
From here, now Google just says to add the onClick handlers but they are the same other than the link inside:
<a onclick="goog_report_conversion
('http://www.example.com/whitepapers/a.pdf')"
href="#" >DOWNLOAD NOW</a>
<a onclick="goog_report_conversion
('tel:555-555-5555')"
href="#" >CALL NOW</a>
Will Google tell the difference between the two click events?
Thanks for any advice!
No, there will be no difference between the two click events.
This is my workaround:
Setup one additional conversion code (for the download conversion). The difference from the first conversion code will be only in this line w.google_conversion_label = "XXX2";
Next change the line of the new code from goog_snippet_vars = function() { to goog_snippet_varsD = function() {
Next change the line of the new code from goog_report_conversion = function(url) { to goog_report_conversionD = function(url) {. Don't mind the warning // DO NOT CHANGE THE CODE BELOW. :)
Next change the line of the new code from goog_snippet_vars(); to goog_snippet_varsD(); Don't mind the warning // DO NOT CHANGE THE CODE BELOW. :)
Last change - from:
<a onclick="goog_report_conversion
('http://www.example.com/whitepapers/a.pdf')"
href="#" >DOWNLOAD NOW</a>
to
<a onclick="goog_report_conversionD
('http://www.example.com/whitepapers/a.pdf')"
href="#" >DOWNLOAD NOW</a>
Voila! Now you are ready to track two conversion actions in one page.
Does Dart have childSelector in event function like jQuery on()? Because I want fire contextmenu event only if mouse hover specific element type.
This is my javascript code.
var $contextMenu = $("#context-menu");
$("body").on("contextmenu", "table tr", function(e) {
$contextMenu.css({
display: "block",
left: e.pageX,
top: e.pageY });
return false;
});
But I don't know how to check if hover "table tr" in my Dart code.
var body = querySelector('body');
var contextMenu =querySelector('#context-menu');
// fire in everywhere
body.onContextMenu.listen((e) {
e.preventDefault();
contextMenu.style.display = 'block';
contextMenu.style.left = "${e.page.x}px";
contextMenu.style.top = "${e.page.y}px";
}
You can filter events :
body.onContextMenu.where((e) => e.target.matchesWithAncestors("table tr"))
.listen((e) {
e.preventDefault();
contextMenu.style.display = 'block';
contextMenu.style.left = "${e.page.x}px";
contextMenu.style.top = "${e.page.y}px";
});
the problem is the following:
$("body") gives you a set of elements that does not change. The `.on(..., 'sub selector') however is actually bad, because it checks the subselector against the target of the event EVERY TIME for every event.
I see two solutions here:
The first is to select all children and add the event listener to all of the elements:
var body = querySelector('body');
body.querySelectorAll('table tr')... onContextMenu...
But this will not work if you insert tr into the table later.
The other way is to check the .target of your event and see if it's a tr and if its in your table. I hope this already helps. If you need more detailed help let me know!
Regards
Robert
Are there any events fired by an element to check whether a css3 transition has started or end?
W3C CSS Transitions Draft
The completion of a CSS Transition generates a corresponding DOM Event. An event is fired for each property that undergoes a transition. This allows a content developer to perform actions that synchronize with the completion of a transition.
Webkit
To determine when a transition completes, set a JavaScript event listener function for the DOM event that is sent at the end of a transition. The event is an instance of WebKitTransitionEvent, and its type is webkitTransitionEnd.
box.addEventListener( 'webkitTransitionEnd',
function( event ) { alert( "Finished transition!" ); }, false );
Mozilla
There is a single event that is fired when transitions complete. In Firefox, the event is transitionend, in Opera, oTransitionEnd, and in WebKit it is webkitTransitionEnd.
Opera
There is one type of transition event
available. The oTransitionEnd event
occurs at the completion of the
transition.
Internet Explorer
The transitionend event occurs at the completion of the transition. If the transition is removed before completion, the event will not fire.
Stack Overflow: How do I normalize CSS3 Transition functions across browsers?
Update
All modern browsers now support the unprefixed event:
element.addEventListener('transitionend', callback, false);
https://caniuse.com/#feat=css-transitions
I was using the approach given by Pete, however I have now started using the following
$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',
function() {
//do something
});
Alternatively if you use bootstrap then you can simply do
$(".myClass").one($.support.transition.end,
function() {
//do something
});
This is becuase they include the following in bootstrap.js
+function ($) {
'use strict';
// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
// ============================================================
function transitionEnd() {
var el = document.createElement('bootstrap')
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd otransitionend',
'transition' : 'transitionend'
}
for (var name in transEndEventNames) {
if (el.style[name] !== undefined) {
return { end: transEndEventNames[name] }
}
}
return false // explicit for ie8 ( ._.)
}
$(function () {
$.support.transition = transitionEnd()
})
}(jQuery);
Note they also include an emulateTransitionEnd function which may be needed to ensure a callback always occurs.
// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) {
var called = false, $el = this
$(this).one($.support.transition.end, function () { called = true })
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
setTimeout(callback, duration)
return this
}
Be aware that sometimes this event doesn’t fire, usually in the case
when properties don’t change or a paint isn’t triggered. To ensure we
always get a callback, let’s set a timeout that’ll trigger the event
manually.
http://blog.alexmaccaw.com/css-transitions
All modern browsers now support the unprefixed event:
element.addEventListener('transitionend', callback, false);
Works in the latest versions of Chrome, Firefox and Safari. Even IE10+.
In Opera 12 when you bind using the plain JavaScript, 'oTransitionEnd' will work:
document.addEventListener("oTransitionEnd", function(){
alert("Transition Ended");
});
however if you bind through jQuery, you need to use 'otransitionend'
$(document).bind("otransitionend", function(){
alert("Transition Ended");
});
In case you are using Modernizr or bootstrap-transition.js you can simply do a change:
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd otransitionend',
'msTransition' : 'MSTransitionEnd',
'transition' : 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];
You can find some info here as well http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/
Just for fun, don't do this!
$.fn.transitiondone = function () {
return this.each(function () {
var $this = $(this);
setTimeout(function () {
$this.trigger('transitiondone');
}, (parseFloat($this.css('transitionDelay')) + parseFloat($this.css('transitionDuration'))) * 1000);
});
};
$('div').on('mousedown', function (e) {
$(this).addClass('bounce').transitiondone();
});
$('div').on('transitiondone', function () {
$(this).removeClass('bounce');
});
If you simply want to detect only a single transition end, without using any JS framework here's a little convenient utility function:
function once = function(object,event,callback){
var handle={};
var eventNames=event.split(" ");
var cbWrapper=function(){
eventNames.forEach(function(e){
object.removeEventListener(e,cbWrapper, false );
});
callback.apply(this,arguments);
};
eventNames.forEach(function(e){
object.addEventListener(e,cbWrapper,false);
});
handle.cancel=function(){
eventNames.forEach(function(e){
object.removeEventListener(e,cbWrapper, false );
});
};
return handle;
};
Usage:
var handler = once(document.querySelector('#myElement'), 'transitionend', function(){
//do something
});
then if you wish to cancel at some point you can still do it with
handler.cancel();
It's good for other event usages as well :)
I want to unbind all events when I change a page. I took this solution which extends the View's close function with this.unbind() call and I tried to combine it with JQM page transitions in a changePage function in the Router from here:
changePage: function(page){
$(page.el).attr("data-role", "page");
page.render();
$("body").append($(page.el));
var transition = $.mobile.defaultPageTransition;
if(this.firstPage){
transition = "none",
this.firstPage = false;
}
$.mobile.changePage($(page.el), {changeHash: false, transition: transition});
}
Then changePage looks like this:
changePage: function(page){
if (this.currentView)
this.currentView.close();
$(page.el).attr("data-role", "page");
this.currentView = page;
page.render();
$("body").append($(page.el));
var transition = $.mobile.defaultPageTransition;
if(this.firstPage){
transition = "none",
this.firstPage = false;
}
$.mobile.changePage($(page.el), {changeHash: false, transition: transition});
}
But then I get the JQM error:
Uncaught TypeError: Cannot call method '_trigger' of undefined jquery.mobile-1.1.0.js:2788
transitionPages jquery.mobile-1.1.0.js:2788
$.mobile.changePage jquery.mobile-1.1.0.js:3390
window.AppRouter.Backbone.Router.extend.changePage
I also have jqm-config.js which removes the page's DOM on pagehide event. Could I unbind all events here like: $(event.currentTarget).unbind(); ? But this doesn't work either.
$('div[data-role="page"]').live('pagehide', function (event, ui) {
$(event.currentTarget).remove();
});
I had the same problem. The JQM error occurs because you try to call this.remove() in close() backbone extended method, but the event "pagehide" has already removed the view from the DOM.
Backbone.View.prototype.close = function () {
if (this.beforeClose) {
this.beforeClose();
}
this.remove();
this.unbind();
};
If you comment this.remove() on close method, it works.
Another option is to comment $(event.currentTarget).remove(); on pagehide jqmobile event and doesn't comment this.remove() on close method.
You can't do both, you should choose one of the two options. I prefer the second option, but I think that it's similar to first option. I don't recommend call unbind() on pagehide event.
I was facing the same problem, for some reason the pagechange event was not being fired and the previous pages were not removed from the DOM. Once I removed the non-active pages the CSS was back in action.
So I added
$('div[data-role="page"]').bind('pagehide', function (event, ui) {
$(event.currentTarget).remove();
});
inside
$(document).bind('pagechange', function() {
});
So my jqm-config.js looks like this
$(document).bind("mobileinit", function () {
console.log('mobileinit');
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
//$.mobile.defaultPageTransition = "none";
});
$(document).bind('pagechange', function() {
$('div[data-role="page"]').bind('pagehide', function (event, ui) {
console.log("Removing page");
$(event.currentTarget).remove();
});
});
It took me a few hours and this SO thread to get to this. Hope this helps someone.