I know that Chrome don't support onfinish event on marquee tag.
I decide to use JQuery plugin here: http://remysharp.com/2008/09/10/the-silky-smooth-marquee/
In this post, the author say it can capture stop event.
How ever, I cannot use it. Please help me out.
you should call .bind() for the the stop event. please see my example code below. hope it helps.
$(document).ready(
function(){
$('div.demo').marquee('pointer')
.bind('stop', function() {alert($(this).text())})
.mouseover(function () {
$(this).trigger('stop');
//alert($(this).html());
}).mouseout(function () {
$(this).trigger('start');
}).mousemove(function (event) {
if ($(this).data('drag') == true) {
this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
}
}).mousedown(function (event) {
$(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
}).mouseup(function () {
$(this).data('drag', false);
})
});
Related
I want to restrict the drag of an element to only horizontal or vertical direction. I am using HTML5 drag and drop API and not Jquery UI. Here is simplified code I am using to move an element:
$("#movedElem").on("dragstart", (event) => {
event.originalEvent.dataTransfer.effectAllowed= "move";
return true;
});
$("#targetElem").on("dragenter", (event) => {
//...
});
$("#targetElem").on("dragover", (event) => {
//
event.preventDefault();
});
$("#targetElem").on("drop", (event) => {
event.preventDefault();
event.stopPropagation();
$('#targetElem').append($('#movedElem'));
});
I am not looking for code, though that would be good too, but some direction would be enough... I think this must be a common requirement but could not find any example.
I hope I am clear enough with this request for assistance, as it is hard to explain and I can't post all the code here. I have downloaded code to enable TinyMCE to be used in a NgRepeat with AngularJS:
angular.module('ui.tinymce', [])
.value('uiTinymceConfig', {})
.directive('uiTinymce', ['uiTinymceConfig', function (uiTinymceConfig) {
uiTinymceConfig = uiTinymceConfig || {};
var generatedIds = 0;
return {
require: 'ngModel',
link: function (scope, elm, attrs, ngModel) {
var expression, options, tinyInstance;
// generate an ID if not present
if (!attrs.id) {
attrs.$set('id', 'uiTinymce' + generatedIds++);
}
options = {
// Update model when calling setContent (such as from the source editor popup)
setup: function (ed) {
ed.on('init', function (args) {
ngModel.$render();
});
// Update model on button click
ed.on('ExecCommand', function (e) {
ed.save();
ngModel.$setViewValue(elm.val());
if (!scope.$$phase) {
scope.$apply();
}
});
// Update model on keypress
ed.on('KeyUp', function (e) {
ed.save();
ngModel.$setViewValue(elm.val());
if (!scope.$$phase) {
scope.$apply();
}
});
},
mode: 'exact',
elements: attrs.id
};
if (attrs.uiTinymce) {
expression = scope.$eval(attrs.uiTinymce);
} else {
expression = {};
}
angular.extend(options, uiTinymceConfig, expression);
setTimeout(function () {
tinymce.init(options);
});
ngModel.$render = function () {
if (!tinyInstance) {
tinyInstance = tinymce.get(attrs.id);
}
if (tinyInstance) {
tinyInstance.setContent(ngModel.$viewValue || '');
}
};
}
};
}]);
var gwApp = angular.module('gwApp', ['ui.tinymce']);
I don't really understand this code, but it works fine initially. My page starts with a list of Posts. I click on 'Show Reply' for the first post, and using NgSwitch the multiple replies become visible (nested NgRepeat). I submit a new reply message (the reply text is entered using tinymce) using a RESTful API service and a http call (too much code to post here). Then after clicking the submit button for the new reply message, the NgSwitch kicks in again unexpectedly to make the replies no longer visible. When I expand the replies again, the tinymce is just a regular textarea again, and the proper editor is gone.
I know this is not very clear, but I'm hoping someone can make sense of what I've written and can help me solve this problem..
I was having the same problem using ng-switch and ng-show so i added:
scope.$watch('onHidden()',function(){ tinymce.editors = [] });
after the setTimeout function.
Also replace the
ed.on('init',function(args){ ngModel.$render(); });
with
ed.on('init',function(args){ ed.setContent(ngModel.$viewValue); });
and remove the $render function.
This is the link to the working code in JsFiddle
sorry if this is a repost, I've looked around and cannot find a solution that works.
I have to radio buttons, and I want to execute a function when they are changed. From other posts I thought this should work
$(function() {
$("#isMale").change( function() {
alert("test");
location.href = 'http://google.com'
}
});
http://jsfiddle.net/BfMYF/1/
But it doesn't, can anyone help ?
The selector is wrong, but you need to close .change function brackets properly too:
$(function() {
$("input[name=isMale]").change( function() {
alert("test");
location.href = 'http://google.com';
});
});
$(function() {
$("#male,#female").change(function () {
alert("test");
location.href = 'http://google.com';
});
});
You also had a missing semi and paran!
I have tried everything possible.. unminified all javascript, still can't get the map to load properly inside the tab.
Trying to use this custom code too with no success
jQuery('.tabs-shortcode > ul').bind('tabsshow', function(e, ui) {
if (ui && ui.panel) {
jQuery('.mapp-canvas', ui.panel).each(function() {
var id = jQuery(this).attr('id');
if (id) {
window[id].resize();
}
});
}
});
webpage: http://bit.ly/UTHskS
thanks in advance,
Andy
I think you might need to trigger the Resize event to the map when the tab opens.
google.maps.event.trigger(map, "resize");
I didn't try though, this code would solve the problem.
Please try this code.
jQuery('.tabs-shortcode > ul').bind('tabsshow', function(e, ui) {
if (ui && ui.panel) {
jQuery('.mapp-canvas', ui.panel).each(function() {
var id = jQuery(this).attr('id');
if (id) {
window[id].resize();
}
setTimeout(function(){
if (mapp0) {
google.maps.event.trigger(mapp0.getMap(), "resize");
}
}, 1000);
});
}
});
I'm using Malsup's excellent Form plugin to dynamically load search results onto the same page.
It works great with a standard form submit, however I have 2 select elements in my form and would love for the results to update as the select is changed.
My code at the moment is thus:
$(document).ready(function() {
var options = {
target: '#bands-results',
beforeSubmit: showRequest
};
$('#bandsearch').ajaxForm(options);
});
// Show loading message and submit form
function showRequest(formData, jqForm, options) {
$('#bands-results').prepend('<span>Searching</span>');
return true;
}
I haven't seen other examples that do the same.
Help appreciated.
Got it licked with this
$(document).ready(function() {
$("#genre-filter").change(function() {
$("#band_search").submit();
});
// bind to the form's submit event
$('#band_search').ajaxForm({
beforeSubmit: showRequest,
target: '#band_list',
success: function() {
$('#premlim').hide();
}
});
})
function showRequest(formData, jqForm, options) {
return true;
}