I'm using this tickertype jquery plugin:
http://www.hungry-media.com/code/jQuery/tickerType/
And I'm trying to attach a hover effect to a link, the website can be found here:
http://dougmolineux.com/json/
But it's simply not working, my hover code looks like this:
$(".mylink").hover(
function () {
alert("test");
console.log("is this working?");
//$("#test").html($(this).attr("id"));
//$(this).addClass("hover");
},
function () {
//$(this).removeClass("hover");
}
);
And my link looks like this:
"home": "example glossary",<br />
When I hover over the link nothing happens, is something wrong with my code? I have the js inside A document.ready function. I think that it may have something to do with the inclusion of the tickerType plugin, but its possible something maybe wrong with me code :)
Any advice would help!
Thanks
It is because the typewriter code serializes the HTML, therefore dropping any events attached to the elements.
It works with the effect off.
You can use the live() method to bind your events and it works. This works because it doesn't directly attach events, just lets events bubble to document where thier origin is checked and if it matches the selector, the event is fired.
jsFiddle.
Related
I am trying to implement the following qTip tooltip script on my page:
// Create the tooltips only when document ready
$(document).ready(function()
{
// MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
$('a').each(function() {
$(this).qtip({
content: {
text: $(this).next('.tooltiptext')
}
});
});
});
I got the script directly from the JS Fiddle documentation page, but unfortunately, the script doesn't work on JS Fiddle either. I am sure there is a typo somewhere in this, but I don't have the JS skills to find it.
Can someone help me to correct this script?
thanks
I like qTip2 but the one thing that I hate about it is that its documentation blows. The creator gives sample code but omits certain necessary parts of it which makes it confusing. He also includes broken fiddles like the one you gave above.
Not to mention, that fiddle is unnecessarily complicated if he is just displaying one tooltip.
I created a very basic example of a qTip2 at the link here: http://jsfiddle.net/ah653at2/1/
I hope you can use this instead to gain a basic understanding of the library.
HTML:
<a id="test">A very basic tooltip example</a>
JavaScript:
$("#test").qtip({
content: {
text: 'This is some tooltip content',
},
});
$('#my-view').on('show', showHandler)
Doesn't work. Using data-show is not an option either because the code that sets/unsets the event is within class that is instantiated later. Also creating the view programatically and passing in the event handler doesn't work because I need to set the event on/off at different times.
Is this not possible with kendoUI? If not, why? This seems like such an incredibly obvious feature to relay those events to the element themselves similar to what is possible with jquery ui widgets.
This works:
var view = $('#my-view');
var widget = kendo.widgetInstance(view);
widget.bind('show', showHandler);
Better answer, just delegate the events yourself so the code in the question actually works:
<div data-role="view" ... data-show="onShow">...</div>
and
function onShow () {
this.element.trigger('show');
}
Now the it works :). The problem I still has was that 'show' isn't triggered when a view is first shown if it is the first view shown. Er, so yeah I had to add some extra code for that too like this:
if ($('#my-view').is(':visible')) {
$('#my-view').trigger('show');
}
Lame but it works.
I am using the following directive to create a ckEditor view. There are other lines to the directive to save the data but these are not included as saving always works for me.
app.directive('ckEditor', [function () {
return {
require: '?ngModel',
link: function ($scope, elm, attr, ngModel) {
var ck = ck = CKEDITOR.replace(elm[0]);
ngModel.$render = function (value) {
ck.setData(ngModel.$modelValue);
setTimeout(function () {
ck.setData(ngModel.$modelValue);
}, 1000);
}; }
};
}])
The window appears but almost always the first time around it is empty. Then after clicking the [SOURCE] button to show the source and clicking it again the window is populated with data.
I'm very sure that the ck.setData works as I tried a ck.getData and then logged the output to the console. However it seems like ck.setData does not make the data visible at the start.
Is there some way to force the view window contents to appear?
You can call render on the model at any time and it will simply do whatever you've told it to do. In your case, calling ngModel.$render() will grab the $modelValue and pass it to ck.setData(). Angular will automatically call $render whenever it needs to during its digest cycle (i.e. whenever it notices that the model has been updated). However, I have noticed that there are times when Angular doesn't update properly, especially in instances where the $modelValue is set prior to the directive being compiled.
So, you can simply call ngModel.$render() when your modal object is set. The only problem with that is you have to have access to the ngModel object to do that, which you don't have in your controller. My suggestion would be to do the following:
In your controller:
$scope.editRow = function (row, entityType) {
$scope.modal.data = row;
$scope.modal.visible = true;
...
...
// trigger event after $scope.modal is set
$scope.$emit('modalObjectSet', $scope.modal); //passing $scope.modal is optional
}
In your directive:
ngModel.$render = function (value) {
ck.setData(ngModel.$modelValue);
};
scope.$on('modalObjectSet', function(e, modalData){
// force a call to render
ngModel.$render();
});
Its not a particularly clean solution, but it should allow you to call $render whenever you need to. I hope that helps.
UPDATE: (after your update)
I wasn't aware that your controllers were nested. This can get really icky in Angular, but I'll try to provide a few possible solutions (given that I'm not able to see all your code and project layout). Scope events (as noted here) are specific to the nesting of the scope and only emit events to child scopes. Because of that, I would suggest trying one of the three following solutions (listed in order of my personal preference):
1) Reorganize your code to have a cleaner layout (less nesting of controllers) so that your scopes are direct decendants (rather than sibling controllers).
2) I'm going to assume that 1) wasn't possible. Next I would try to use the $scope.$broadcast() function. The specs for that are listed here as well. The difference between $emit and $broadcast is that $emit only sends event to child $scopes, while $broadcast will send events to both parent and child scopes.
3) Forget using $scope events in angular and just use generic javascript events (using a framework such as jQuery or even just roll your own as in the example here)
There's a fairly simple answer to the question. I checked the DOM and found out the data was getting loaded in fact all of the time. However it was not displaying in the Chrome browser. So the problem is more of a display issue with ckEditor. Strange solution seems to be to do a resize of the ckEditor window which then makes the text visible.
This is a strange issue with ckeditor when your ckeditor is hidden by default. Trying to show the editor has a 30% chance of the editor being uneditable and the editor data is cleared. If you are trying to hide/show your editor, use a css trick like position:absolute;left-9999px; to hide the editor and just return it back by css. This way, the ckeditor is not being removed in the DOM but is just positioned elsewhere.
Use this java script code that is very simple and effective.Note editor1 is my textarea id
<script>
$(function () {
CKEDITOR.timestamp= new Date();
CKEDITOR.replace('editor1');
});
</script>
Second way In controller ,when your query is fetch data from database then use th
is code after .success(function().
$http.get(url).success(function(){
CKEDITOR.replace('editor1');
});
I know, that this thread is dead for a year, but I got the same problem and I found another (still ugly) solution to this problem:
instance.setData(html, function(){
instance.setData(html);
});
I am trying to build an automatic carousel as a Backbone.js View so that it slides every so often. Ideally what I would like is a timer event. Something like
events{
"timer 5000" : "slide"
}
I don't see this happening. I tried firing the function from the outside.
window.setInterval(carouselView.slide, 5000);
That works. BUT, I can't access the instance of the view anymore. If i do a console.log(this); it gives me Window. I guess this is because the function is being called from Window and not from the view instance.
Any help would be much appreciated.
I realize this is an old question by now but you can do this without binding.
(function(view) {
window.setInterval(function() { view.slide(); }, 5000);
})(this);
If you stick that in your view's initialize it should work. What it does is basically creating a closure so that you still have access to the view inside your setInterval block.
I do agree that a timer event like "timer 5000" : "slide" would have been a nice feature for Backbone as I googled my way here looking for something exactly like that.
You have to bind the function to the context. I'm not 100% sure but I think this should work:
slide: _.bind(function(){ ... }, this)
See Backbone FAQ
I've seen a few posts on this, but none with a solution that works for me - and I've tried a lot. I'm just executing a simple sequence - fade div out, load content, fade dive in, but the content that is loaded appears for a moment in full opacity and then disappears, then executes the fade. I've tried setting the display property of the loaded div to none and then showing it in the fade in function, setting delays, for showing, etc. I've tried fadeTo, fadeOut, etc. Incidentally, hide() works fine, but it's not the effect I want.
Here's my code:
...
$('#bio_container').fadeOut(500,loadContent(ident));
});
function loadContent(ident){
$('#bio_container').load('/index.php/ajax/bios/' + ident,showContent);
}
function showContent(){
$('#bio_container').fadeIn(500);
}
Any ideas would be appreciated.
Try this.
$('#bio_container').fadeOut(500, function(){
loadContent(ident)
});
Edit: If you look at fadeOut's definition it accepts a callback as an argument and invokes that function when the animation has finished. So a callback reference is either an inline function definition like the above one or just a function name without paranthesis. If you give something like this someFunction() it evaluates the function and then takes the return value as an argument. And possibily throws a suppressed exception when the animation is finished and invoking the result.
It's happend, because javascript is executed in lineal form, and fadeOut(time,fn) execute the fn and THEN execute te fade.
To fix this i use some JQuery plugins, for your case i suggest this simple slideshow, or if you are looking for something more specific see this list.
PS: Sorry for my bad english.