I'm using the clEditor control and I need to add text at cursor position in textarea when I selected an item in a select control.
Somebody can help me, please.
Thank you!
This code will add text from variable text_to_add at cursor position :
var text_to_add = 'Welcome to Senegal !';
var editor = $('.my_textarea').cleditor()[0];
editor.focus();
setTimeout(function() {
editor.execCommand('inserthtml', text_to_add, false);
}, 0);
Related
Dear community is there any way to do a text next to the cursor hover effect (in css?) like on this site here?
http://manuelraeder.co.uk/
I tried it with abbr and span style, but it doesn't seem to work. Text should be changeable with every picture.
Thanks in advance!
From the website you linked, they appear to be using Javascript. I don't think there is a way to do this purely with CSS.
When you hover your mouse over an image on the website, a new HTML tag is created at the end of the body:
<p class="tooltip" style="display: block; top: ...; left: ...;">TEXT</p>
Where top and left correspond to the pixel values that your cursor is at, and the text would be whatever text you want to float next to the cursor.
In the Javascript, you would create a hover observer for the associated images, and inside the trigger function create the new p tooltip element. You would set the text for your p element to be the respective image's alt title. Looking at the website's Javascript, this is what they did for their tooltip:
$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function(){
// Hover over code
var title = $(this).attr('title');
$(this).data('tipText', title).removeAttr('title');
$('<p class="tooltip"></p>')
.text(title)
.appendTo('body')
.fadeIn('fast');
}, function() {
// Hover out code
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coordinates
var mousey = e.pageY + 10; //Get Y coordinates
$('.tooltip')
.css({ top: mousey, left: mousex })
});
});
I would like to have a qtip2 tooltip without a title bar, but with a close icon in the corner. Is there a way to spec that, or do I have to muck with the code that creates it? I am thinking of something that floats the button to the left or to the right, allowing the rest of the content to fill the tooltip div.
Always keep the close markup separately and update with your current qTip Text.
$('.selector').qtip({
content: {
text: function(api) {
var qTipContent = $('.close-markup').html();
qTipContent += $('.qtip-content').html();
return $('.qtip-content').html();
}
}
});
$('.close-markup').qtip('destroy');
Try the above code.
Note: Does not require to muck the qTip Close code snippet!
I am using menu using dijit.menu and Its work with right click and left click.
How I open the menu on mouse over and close on onmouseout?
dijitActionMenu = new dijit.Menu({
targetNodeIds:[actionMenuId],
leftClickToOpen:"true"
});
Have you tried something like
// Create a new Tooltip
var tip = new dijit.Tooltip({
// Label - the HTML or text to be placed within the Tooltip
label: '<div class="myTipType">This is the content of my Tooltip!</div>',
// Delay before showing the Tooltip (in milliseconds)
showDelay: 250,
// The nodes to attach the Tooltip to
// Can be an array of strings or domNodes
connectId: ["myElement1","myElement2"]
});
More details are here dialogs_tooltips.Even dijit.Menu have onMouseOver even.
onMouseOver Event
I am able to get the dijit/Menu onmouseover.
Create an element which will invoke onmouseover event.
Element
show() will call custom widget which will create menu for you.
E.g.,
show = function() {
var roll = new rollover()
}
And rollover.js will be the custom widget.
From the constructor of it, you can invoke the function and create the menu.
pMenu = new Menu({ class: "rollovermenu", id: "rolloverid" });
I want to position Dojo's Dijit Dialog relative to one of my html element. is it Possible?
If yes. How?
currently it always shows dialog in middle of viewport.
Can any one help me regarding the matter?
Thanks.
amar4kintu
Another way that I do this (not great because I override a private method but it gives me the flexibility I want):
var d = new Dialog({
title:"Your Dialog",
_position:function(){
if(this.refNode){
p = Geo.position(this.refNode);
Style.set(this.domNode,{left:p.x + "px", top:p.y + "px"});
}
},
showAround:function(node){
this.refNode = node;
this.show();
}
});
d.showAround(dojo.byId("someNode"));
This example uses "dojo/dom-style" as Style and "dojo/dom-geometry" as Geo.
I did that by adjusting default absolute position of dijit.dialog using dojo..
I used following code to readjust absolute position of dialog to what I want..
dijit.byId('dialog').show();
dojo.style('dialog','background-color','#AAAAAA');
var co = dojo.coords('period'); // element below which I want to display dialog
dojo.style('md1','top',(co.y + 25)+'px');
dojo.style('md1','left', co.x+'px');
Hopefully this will help someone..
Thanks.
amar4kintu
I think dijit.TooltipDialog is what you need.
var dialog = new dijit.Dialog({
title: myTitle,
content: myDialogContent,
style: "width: 300px;",
onShow: function() { dojo.style(this.containerNode.parentNode,'visibility','hidden'); },
onLoad: function() { dojo.style(this.containerNode.parentNode,{top:'100px', visibility:'visible'}); }
});
Instead top:'100px' you can use also top:'20%' but not tested well. My dojo is 1.7.1.
My menu shows the active links when clicked on it except for the home link (http://www.obsia.com). It is never highlighted.
I tried playing around but I can't seem to figure it out. This is the jquery code I used to highlight the links?
$(function(){
var path = location.pathname.substring(1);
if ( path )
$('.nav a[href$="' + path + '"]').attr('class', 'active');
});
I also have another menu on the products pages where I would like to highlight the parents of the siblings and the our products on the global menu. This is the jquery code for the products menu:
$(function() {
var pathname = location.pathname;
var highlight;
//highlight home
if(pathname == "")
highlight = $('ul#accordion > li:first > a:first');
else {
var path = pathname.substring(1);
if (path)
highlight = $('ul#accordion a[href$="' + path + '"]');
}highlight.attr('class', 'active');
// hide 2nd, 3rd, ... level menus
$('ul#accordion ul').hide();
// show child menu on click
$('ul#accordion > li > a.product_menu').click(function() {
//minor improvement
$(this).siblings('ul').toggle("slow");
return false;
});
//open to current group (highlighted link) by show all parent ul's
$('a.active').parents('ul').show();
$('a.active').parents('h2 a').css({'color':'#ff8833'});
//if you only have a 2 level deep navigation you could
//use this instead
//$('a.selected').parents("ul").eq(0).show();
});
});
I tried adding this:
$(this).parents('ul').addClass('active');
but that does not seem to do the trick?
Does anybody have a simple way of accomplishing it?
Any help would be appreciated from you guys.
Kind Regards,
G
I debugged your Javascript. The home link does not highlight because, for the home page, location.pathname is evaluated to the string "/". The variable 'path' is therefore assigned the empty string. This means that the variable 'highlight' is not assigned to.
// path is assigned the empty string
var path = location.pathname.substring(1);
// evaluating to false
if (path) {
// we never get here
highlight = $('ul#accordion a[href$="' + path + '"]');
}
// getting a null pointer exception
highlight.attr('class', 'active');
In Firebug I get highlight is undefined on the line }highlight.attr('class', 'active'); looks like you might need to correct the brackets around the If statement above it?
I figured out how to get the home page link to highlight in the menu bar (That was the only link that would not highlight on the menu bar). Here is what I did:
$(function(){
var pathname = location.pathname;
var path = pathname.substring(1);
if(path == "")
$('.nav a:first').addClass('active');
else (path)
$('.nav a[href$="' + path + '"]').attr('class', 'active');
});