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
Related
Is there any way to use nightmare (the nodeJS module) to press an arrow key? Either by sending the key to the specific element or by clicking on the element and sending the keypress to the page as a whole?
My problem is that there is a dropdown menu which, when clicked on, displays some options below it. These options do not appear to be clickable, I have tried click and even the realClick nightmare extension. Neither seem able of selecting any element of the dropdown. While playing around with the page, I found that by using the arrow keys and the enter key, I could select the options without clicking. So is there any way to send the keypress events to electron? Either through nightmare or by accessing electron directly?
It is called auto complete menu and there is no standard way of doing it.
I tried working with Google and came up with a method. I think, it will be tough to make generic solution, as it depends on how auto complete is implemented. Hope this helps!
var Nightmare = require('nightmare');
var nightmare = Nightmare({
show: true,
webPreferences: {}
})
nightmare
.goto('http://www.google.co.in')
.evaluate(function(searchTerm) {
var elem = document.querySelector('#lst-ib');
elem.value = searchTerm;
//Do mousedown to initiate auto complete window
var event = document.createEvent('MouseEvent');
event.initEvent('mousedown', true, true);
elem.dispatchEvent(event);
}, 'Leo')
.then(function() {
//Wait for results to appear
nightmare.wait(1000)
.evaluate(function() {
//Click the first option of List
var first = document.querySelector('#sbtc > div.gstl_0.sbdd_a > div:nth-child(2) > div.sbdd_b > div > ul > li:nth-child(1)');
first.firstElementChild.click();
}).then(function() {
console.log('All Done');
});
});
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 have a Google earth plug-in and I have made various Placemarks and the balloon using the Winform library in c#. Now, i can see those Placemarks on the map and when i click the placemark, i can see the content i have parsed.
Now, my requirement is that when user clicks the balloon, i want to display the content of that balloon displayed in a text box outside the plug-in.
I am not finding any way where it can be recorded a which Placemark has been clicked and i can access the content of the balloon.
Can anybody help on this?
You should be able to find all the info you need here
https://developers.google.com/earth/documentation/balloons
Edit:
I am not sure of your approach to show the text in your webpage, try something like this
function addData(text) {
// var TheTextBox = document.getElementById("Mytextbox");
// TheTextBox.value = TheTextBox.value + text;
document.getElementById('Mytextbox').innerHTML = '<p>' + text + '</p>';
// if still having problems, try using an alert to see value of your 'text'
alert(text);
}
another idea - instead of listening for a balloonopening, listen for a click
google.earth.addEventListener(ge.getGlobe(), 'click', placemarkClicked);
function placemarkClicked(event) {
var obj = event.getTarget();
// determine if the user clicked on a Placemark
if (obj.getType() == 'KmlPlacemark') {
event.preventDefault();
var placemark = obj;
var placemark_name = placemark.getName();
var placemark_desc_active = placemark.getBalloonHtmlUnsafe();
// proceed to use the name and description as you like
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 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.