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.
Related
I am fighting with CKEditor in order that after CKEditor is loaded with a content and without selecting any style from toolbar, the changes (new text) made from an user, are automatically set in bold (no toolbar needed for the user).
I tried executing a command on the "click" event setting the bold style but it does not work very well
myEditor.on("instanceReady", function() {
var editable = myEditor.editable();
editable.attachListener( editable, 'click', function() {
myEditor.commands.bold.exec();
});
});
so I changed inserting element with bold style on click event
myEditor.on("instanceReady", function() {
var editable = myEditor.editable();
editable.attachListener( editable, 'click', function() {
var parent = myEditor.getSelection().getStartElement()
//simplified code without check if span already exist
myEditor.insertHtml('<span class="boldStyle">');
myEditor.insertHtml('</span>');
});
});
This works a bit better but I wonder if this approach is a good idea or how I could do better
Thanks
I'm trying to accomplish two things:
Left Column: Steps are faded by default, but individual steps fade in to full color on hover.
Right Column: A different image is displayed based on the step being hovered in the left column. By default, the first image should be displayed.
I am using the fadeIn function, but I cant get it to work the way I'm hoping. Whats the best way to go about doing this?
Jsfiddle Example
$(document).ready(function() {
$('#step-one')
.hover(
function() {
$('#step-one-image-holder').fadeIn('slow');
}, function() {
$('#step-one-image-holder').fadeOut('fast');
}
);
$('#step-two')
.hover(
function() {
$('#step-two-image-holder').fadeIn('slow');
}, function() {
$('#step-two-image-holder').fadeOut('fast');
}
);
$('#step-three')
.hover(
function() {
$('#step-three-image-holder').fadeIn('slow');
}, function() {
$('#step-three-image-holder').fadeOut('fast');
}
);
});
If you use "hover" the images will disappear always when you leave the left column (I not sure if you want it). You may use "fadeIn" and "fadeOut" inside a "mouseenter" event:
(Maybe you need to put the images on absolute position to avoid the flickering)
//---Show images on mouseenter
$("div[id^='step-']").on("mouseenter", function(){
var image = $("img[id='" + $(this).attr("id") + "-image-holder']");
$("img[id^='step-']").not(image).fadeOut();
image.fadeIn();
});
//---Hide images by default
$("img[id^='step-']:gt(0)").hide();
jsfiddle
I'm working with RaphaelJS.
I've noticed that you can add dynamic data to the elements, for example:
to assign a value:
el.data("key",value);
to get a value:
el.data("key")
How can I copy this behaviour using JQuery or Javascript?
Hi I'm trying a wild guess here: as I understand correctly you'd like to communicate from Rapahel to jQuery.
The best I've come up so far is to keep references of both and use them accordingly as Raphael seems not to insert data into dom directly (apart from ID attribute):
$(document).ready(function () {
var paper = Raphael("div", 400, 150);
var circle = paper.circle(80, 80, 30).data('title', 'Red dot').attr({
fill: '#f00'
});
circle.node.id = 'my_circle';
$el_circle = $(circle[0]); // get DOM element out of Rapahel's object
$el_circle.on('click', function () {
// use Raphael reference:
alert("My is title: " + circle.data('title'));
});
});
http://jsfiddle.net/saxxi/Z35NV/
References.
the possibilities: raphael.js - custom attributes
the explanation: Where does Raphael.js store an element's data that is set with the element.data() method?
Combining Raphael and jQuery to achieve browser compatibility
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 had tried looking up on here many different answers to this question and tried using their solutions, but it didn't seem to work, such as this solution:
Is it possible to hide href title?
My question is how am I able to hide the title attribute tooltip when the user mouses over the picture? I tried using the <span title=" ">text</span> but it only caused the title tooltip to show the space or the span's title attribute.
Here is my website.
I figured out the answer to my question. Thank you Gert G for getting me started! =]
What I did in order to hide the title attribute, was first to put everything into a loop because otherwise, it will take the first link's title and apply it to the picture clicked on:
$("a[rel='portfolio']").each(function(e) {
}
Then, I declared a variable that contains the title to whatever elements you want them applied to:
var title = $(this).attr("title");
Once I declared the variable, I then created a function that hides the title when it's moused over, then adds the title back on when I mouseout on it (for the purpose of having my lightbox, ColorBox).
$(this).mouseover(
function() {
$(this).attr('title','');
}).mouseout(
function() {
$(this).attr('title', title);
});
In order for the title to be viewed when click on, you have to add another function:
$(this).click(
function() {
$(this).attr('title', title);
}
);
Putting it all together, it looks like this:
$("a[rel='portfolio']").each(function(e) {
var title = $(this).attr('title');
$(this).mouseover(
function() {
$(this).attr('title','');
}).mouseout(
function() {
$(this).attr('title', title);
});
$(this).click(
function() {
$(this).attr('title', title);
}
);
});
I hope this helps everyone else looking for a similar or this exact solution!
You can check out the changes here.
Thanks Abriel for the solution, I have converted it to YUI 3 and below is the code in case anyone needed it
YUI().use('node', function(Y) {
Y.all("a[rel='portfolio']").each(function(node) {
var title = node.get('title');
node.on('mouseover', function(ev) {
ev.target.set('title', ev.target.get('text'));
ev.target.on('mouseout', function(e) {
e.target.set('title', title);
})
})
node.on('click', function(ev) {
ev.target.set('title', title);
})
})
})
I was looking for a jquery solution but I am using a javascript solution that works fine for me. I needed the "title" attribute to pass descriptive information about a product / image and within that descriptive information there was basic html tags that were needed. And so whenever someone passed the mouse over the image this mixed code and description will popup. This was less than desirable so I am using the following code so that the "title" information is hidden during mouseover but the title information is still available onclick.
Add this in your link code! Hope this helps someone:
onclick=\"javascript: this.title='description and or html goes here' ;\"
onMouseOver=\"javascript: this.title='' ;
Cheers!
Its works like this:
1:Create your own attribute and call it from lightbox
click me
2:Rename the title attribute in jquery file to:
getAttribute('stitle')
I used it for my tooltip, but it should work even without it.
I nested my link and putted title inside it. Than into nested image I´ve wrote title=" " (with that space).
<a href="http://myweb.com" class="tooltip" id="facebook" title="Sing up to my Newsletter"
<img title=" " src="../img/email.png" alt="email icon" width="32">
</a>
Than, when I hover on my email icon, no title is shown.