I´m using the http://qtip2.com/ tooltips. I want to use a hidden element, for that i´m using this code:
<script type="text/javascript">
// <![CDATA[
// Grab all elements with the class "hasTooltip"
$('.hasTooltip').each(function() { // Notice the .each() loop, discussed below
$(this).qtip({
content: {
text: $(this).next('div') // Use the "div" element next to this for the content
}
});
});
// ]]>
And under this code:
<div class="hasTooltip">Hover me to see a tooltip</div>
<div class="hidden">
<!-- This class should hide the element, change it if needed -->
<p><strong>Complex HTML</strong> for your tooltip <em>here</em>!</p>
</div>
If you hover over the "Hover me to see a tooltip", no tooltip is shown? No idea, why?
events: {
render: (event, api) ->
show: (event, api) ->
$('.qtip:visible').qtip('hide')
elements = $(api.get('content.text')).removeClass('hidden')
api.set('content.text', elements)
,
hide: (event, api) ->
}
I think its a bug in Qtip2, i had to manually remove the class
Related
I think my question is similar with this. However, event keypress on input text still not worked.
My Question here is how to add custom binding into input text box and trigger 'something' when pressing enter button.
Here is another sample when the target is kendo widget; and it's working.
HTML code:
<div id="app">
<input type="text" data-bind="keyPress: onKeyPress" />
<div id="output"></div>
</div>
Java script code:
kendo.data.binders.keyPress = kendo.data.Binder.extend({
init: function (element, bindings, options) {
kendo.data.Binder.fn.init.call(this, element, bindings, options);
var binding = this.bindings.keyPress;
$(element.input).bind("keypress", function (e) {
if (e.which == 13) {
binding.get();
}
});
},
refresh: function () { }
});
var viewModel = kendo.observable({
onKeyPress: function () {
$("#output").append("<div>keyPress</div>");
}
});
kendo.bind($("#app"), viewModel);
Jsfiddle code:
http://jsfiddle.net/ikomangmahendra/4uL8Y/2/
Thanks in advance
The problem was connected with the following line:
before:
$(element.input).bind("keypress", function (e) {
after:
$(element).bind("keypress", function (e) {
I should bind the event to the element, not to element.input.
I am currently using the following script to create a button to show/hide comments on WordPress. However, I would like to wrap the <button> the code generates in a <div>, but I cannot seem to get that portion of the code working properly. Here's the code:
jQuery(document).ready(function() {
// Get #comment-section div
var commentsDiv = jQuery('#comment-section');
// Only do this work if that div isn't empty
if (commentsDiv.length) {
// Hide #comment-section div by default
jQuery(commentsDiv).hide();
// Append a link to show/hide
jQuery('<button/>')
.attr('class', 'toggle-comments')
.attr('href', '#')
.html('Show Comments <span class="icon_comment"></span>')
.insertBefore(commentsDiv);
// Encase button in #toggle-comments-container div
jQuery('<div/>')
.attr('id', 'toggle-comments-container')
.wrap('.toggle-comments');
// When show/hide is clicked
jQuery('.toggle-comments').on('click', function(e) {
e.preventDefault();
// Show/hide the div using jQuery's toggle()
jQuery(commentsDiv).toggle('slow', function() {
// change the text of the anchor
var anchor = jQuery('.toggle-comments');
var anchorText = anchor.html() == 'Show Comments <span class="icon_comment"></span>' ? 'Hide Comments <span class="icon_comment"></span>' : 'Show Comments <span class="icon_comment"></span>';
jQuery(anchor).html(anchorText);
});
});
} // End of commentsDiv.length
});
The code generates the button as expected, but does not wrap it in the <div> as intended.
I think you got the wrap() function wrong
jQuery('.toggle-comments').wrap(jQuery('<div/>', {
id: 'toggle-comments-container'
}))
You need to call the wrap() function on the elements which has to be wrapped(in this case toggle-comments), then pass the element which has to wrap the elements as the argument(in this case the div)
Can anyone explain why this
js:
var ViewModel = function() {
this.myValue = ko.observable(25);
};
ko.applyBindings(new ViewModel());
html:
<div data-bind="kendoRadialGauge: myValue"> </div>
will allow the pointer to transition nicely to the new value, when the databound value changes.
However when passing additional options, like this
js:
var ViewModel = function() {
this.myValue = ko.observable(25);
//various gauge settings omitted for brevity
this.pointerOptions = ko.computed(function() {
return { color: this.pointerColor(), value: this.myValue() };
}, this);
};
ko.applyBindings(new ViewModel())
html:
<div data-bind="kendoRadialGauge: { value: myValue, gaugeArea: gaugeOptions, pointer: pointerOptions }"> </div>
...the pointer just jumps immediately to the new value.
Knockout 2.3.0, JQuery 2.0.3, Kendo UI Dataviz 2013.2.716
When you are specifying any of the KO "tracked" options (gaugeArea, pointer, scale) the gauge gets re-drawn by KO with using the Kendo's redraw method.
In itself it shouldn't cause the lost of the transition but KO also slightly changes the gauge's value which causes the transition lost.
Source on github:
this.value(0.001 + this.value());
Removing this line from the source code fixes your problem, so I would say this is bug in Knockout-Kendo.
I am looking for a way to make the CKEDITOR wysiwyg content interactive. This means for example adding some onclick events to the specific elements. I can do something like this:
CKEDITOR.instances['editor1'].document.getById('someid').setAttribute('onclick','alert("blabla")');
After processing this action it works nice. But consequently if I change the mode to source-mode and then return to wysiwyg-mode, the javascript won't run. The onclick action is still visible in the source-mode, but is not rendered inside the textarea element.
However, it is interesting, that this works fine everytime:
CKEDITOR.instances['editor1'].document.getById('id1').setAttribute('style','cursor: pointer;');
And it is also not rendered inside the textarea element! How is it possible? What is the best way to work with onclick and onmouse events of CKEDITOR content elements?
I tried manually write this by the source-mode:
<html>
<head>
<title></title>
</head>
<body>
<p>
This is some <strong id="id1" onclick="alert('blabla');" style="cursor: pointer;">sample text</strong>. You are using CKEditor.</p>
</body>
</html>
And the Javascript (onclick action) does not work. Any ideas?
Thanks a lot!
My final solution:
editor.on('contentDom', function() {
var elements = editor.document.getElementsByTag('span');
for (var i = 0, c = elements.count(); i < c; i++) {
var e = new CKEDITOR.dom.element(elements.$.item(i));
if (hasSemanticAttribute(e)) {
// leve tlacitko mysi - obsluha
e.on('click', function() {
if (this.getAttribute('class') === marked) {
if (editor.document.$.getElementsByClassName(marked_unique).length > 0) {
this.removeAttribute('class');
} else {
this.setAttribute('class', marked_unique);
}
} else if (this.getAttribute('class') === marked_unique) {
this.removeAttribute('class');
} else {
this.setAttribute('class', marked);
}
});
}
}
});
Filtering (only CKEditor >=4.1)
This attribute is removed because CKEditor does not allow it. This filtering system is called Advanced Content Filter and you can read about it here:
http://ckeditor.com/blog/Upgrading-to-CKEditor-4.1
http://ckeditor.com/blog/CKEditor-4.1-Released
Advanced Content Filter guide
In short - you need to configure editor to allow onclick attributes on some elements. For example:
CKEDITOR.replace( 'editor1', {
extraAllowedContent: 'strong[onclick]'
} );
Read more here: config.extraAllowedContent.
on* attributes inside CKEditor
CKEditor encodes on* attributes when loading content so they are not breaking editing features. For example, onmouseout becomes data-cke-pa-onmouseout inside editor and then, when getting data from editor, this attributes is decoded.
There's no configuration option for this, because it wouldn't make sense.
Note: As you're setting attribute for element inside editor's editable element, you should set it to the protected format:
element.setAttribute( 'data-cke-pa-onclick', 'alert("blabla")' );
Clickable elements in CKEditor
If you want to observe click events in editor, then this is the correct solution:
editor.on( 'contentDom', function() {
var element = editor.document.getById( 'foo' );
editor.editable().attachListener( element, 'click', function( evt ) {
// ...
// Get the event target (needed for events delegation).
evt.data.getTarget();
} );
} );
Check the documentation for editor#contentDom event which is very important in such cases.
I have a Kendo splitter control with left/right panes. Inside the left pane I have a Kendo panel bar control that builds a navigation menu. Unfortunately I inherited this from another developer that left the company and I'm not familiar with the Kendo control.
It all works, but when the user clicks on a menu item, the entire page refreshes, That's for the birds! I want only the right panel to refresh.
Here's the code for the for the layout page:
<body>
#(Html.Kendo().Splitter().Name("splitter").Panes(panes => {
panes.Add().Size("220px").Collapsible(true).Content(#<text>
#Html.Partial("_Panelbar")
</text>);
panes.Add().Content(#<text>
<section id="main">
#RenderBody()
</section>
</text>);
}))
<script type="text/javascript">
$(document).ready(function () {
$('input[type=text]').addClass('k-textbox');
});
</script>
#RenderSection("scripts", required: false)
</body>
and here's the code for the panel partial view:
#(Html.Kendo().PanelBar().Name("panelbar")
.SelectedIndex(0)
.Items(items => {
items.Add().Text("Corporate").Items(corp =>
{
corp.Add().Text("Vendors").Action("Index", "Vendor");
corp.Add().Text("Materials").Action("Index", "CostMaterials");
corp.Add().Text("Packaging").Action("Index", "CostPackaging");
corp.Add().Text("Reports").Action("UnderConstruction", "Home", new { pageTitle = "Reports" });
});
}))
I tried replacing the .Action method on the PanelBar with LoadContentsFrom method. That replaced the content in the left pane. So I guess my question is, how do I target the right side of the splitter control?
Any help would be appreciated.
Thanks
-Alex
Your code maybe like this:
#(Html.Kendo().PanelBar().Name("panelbar")
.SelectedIndex(0)
.Items(items => {
items.Add().Text("Corporate").Items(corp =>
{
corp.Add().Text("Vendors").Url("javascript:void(0);")
.HtmlAttributes(
new {
#class= "helloWorld",
#data-href="/Vendor/Index"
});
});
}))
<script>
$document.ready(function(){
$('.helloWorld').click(function(){
var href = $(this).attr('data-href');
$('#main').load(href);
});
});
</script
UPDATE
There is one thing very important: I think the view /Vendor/Index have the same template with your current page.
It means that when you load /Vendor/Index into the right side. The right side will include entire content (include left panel again).
Solution
You have to create a new view(a template) , which just include your left menu,banner,...
Then, You have to remove all template of other views (which will be loaded into right side - /Vendor/Index , /CostMaterials/Index,...)
2.This way is not a good approach. But I think It will work.
//Reference : Use Jquery Selectors on $.AJAX loaded HTML?
<script>
$document.ready(function(){
$('.helloWorld').click(function(){
var href = $(this).attr('data-href');
$.ajax({
type: 'GET',
url: href,
success: function (data){
var rHtml = $('<html />').html(data);
$('#main').html(rHtml.find('#main'));
}
});
});
});
</script