I used the following command to make a popup balloon each time mouse move on a div tag in a web page and I am trying to insert this command in any web page I am parsing so I append the command in the head as follows:
head.append("$('div').attr('onmouseover', 'balloon.showTooltip(event,You are hovering, I said click me! <a href=www.google.com>Click</a>)');");
where
ballon is the object I defined it previously
But it does not work
Besides not understanding what the question really is, there are a lot of things wrong with this code. The main issue I see is that the showTooltip function call is not legal javascript because the message is not a quoted string. In addition, this is not a good way to use event handlers in jQuery. Assuming that head is a jQuery object in your page (and not the head tag), try this:
head.append($("<div class='test'>").mouseover(function() {
balloon.showTooltip(event, "You are hovering, I said click me! <a href='http://www.google.com'>Click</a>");
});
The other issue with this is that the <div> that you create and append to the page has no size so you can never get a mouseover event on it. If you give it a finite size, it can work. You can see that here: http://jsfiddle.net/jfriend00/Y6LGT/ where I give it a class name and use CSS to give it a size.
Related
I am working heavily with iframes, and would like to know if this is possible. Say there is an input with id search. If I hovered over a link (in an iframe) then is it possible to make it so the input would update via some event listener? I am okay with jQuery although I always prefer JS without any libraries. If it isn't possible it's OK with me. Just wanted to know
Is this something you can do with onmouseover? https://www.w3schools.com/jsref/event_onmouseover.asp
Click!
<script>
function hoverMe(x) {
console.log(x);
}
</script>
Then just open a document.write with the iframe to write the function hoverMe to all links.
I am trying to contenteditable attribute of summernote html editor pluging making false on page loading , but it doesnt affect.
Here My JS Code:
<script>
$(function(){
$('div#son_durum').children('.note-editor')
.children('.note-editing-area')
.children('.note-editable')
.attr('contenteditable',false);
});
</script>
What Can I Do Achive This?
Thanks
Why did you try to set contenteditable as false? Just leave it and don't initiate summernote on div#son_durum when your page is loading.
Or, do you want to toggle enable/disable state of summernote? A similar issue was already reported. See https://github.com/summernote/summernote/issues/1109
Using v0.8.2.
Here's my solution, though it's not perfect, especially if the developers change the html and or class names, but it works for what I need.
My MVC application has many summernote controls being dynamically added to a page, and each has an ID assigned to it. Some controls only display the image (upload) button, while others only display the text style buttons. For my image-only summernote controls I don't want the user to have the ability to type text, so I have to only disable the text-entry/image panel, not the whole control. This way I still allow the buttons to be used.
Here is my solution, and this works! Make sure this fires after the summernote control initialization.
var container = $('#summernote2').nextAll('div.note-editor:first').find('.panel-body');
if ($(container).length)
{
$(container).prop('contenteditable', 'false');
}
What's Happening?
Within my specific summernote control (id = summernote2), I locate the first div immediately below it with the specific class ('note-editor'). All of these are added dynamically to the page when the control is initialized. See the image below:
Then, using FIND, continue to work down the tree looking for the class 'panel-body', which is where the text is actually placed, highlighted in the image above.
Assuming I find it, then I change the contenteditable property to false. BAM!
There is probably more chaining that could be done, and perhaps more efficient methods but this works pretty neatly.
Why this way?
Because I have multiple controls on the page, and nothing directly linking my ID'd summernote DIV to all those other DIVs that are created as part of the initialization, I thought this was a good solution. Otherwise, how could I guarantee getting the correct panel-body class?
Good luck and let me know what you think! If this answers your question sufficiently, remember to check it as answered!
In a perfect world you'd think the developers would have made it easier. This should be all it takes, but no it doesn't work...:
$('#summernote2').summernote('contenteditable','false');
I have a button on my cover page and I need to assign to it 1 line of javascript code (namely javascript:languageClicked(0); to work with this neat addon: Multilingualizer) .
So the button should execute that line of code and do its usual job, namely to send the user to my main webpage.
thx in advance
Is the languageClicked function code from Multilingualizer? If so, maybe that addon isn't enabled correctly on your page or something and the js files for it are not being loaded.
But, once they are loaded. You can replace your button with this code:
ENTER
Screenshot
Since you want the user to be redirected to /expnew after activating languageClicked.
Hope this helps! Also, there is one catch though; don't change this unless you know for sure you have those JS libraries loaded. ^_^
Without some HTML snippets and the name of the button you are working with, it is hard to know exactly how to help. However, I can share some general knowledge that may provide the answer for you.
The two most common ways that JavaScript triggers are implemented are:
1. <a> "link buttons":
Your code might look something like:
Click me!
2. <input>/<button>/any element onclick events:
Your code might look something like:
<button onclick="javascript:languageClicked(0)">Click me!</button>
I want to include images in an aloha editable after a drop event, thus not using the toolbar button.
While some aloha commands may be executed programmatically, there is not so much doc about it and one must look into the code.
With the debugger i found that the relevant function is here so now i would go for copying the insertImg function body somewhere in my code and build my function.
On the other hand it would be much cleaner to reuse that code calling something like
Aloha.plugins.image.insertImg();
In a way similar to how it is done here. Is it possible to do such a thing?
A colleague explained me that there is nothing special required in order to insert an image. The function used by aloha is just a way to substitute jQuery and is not necessary.
Once the common/image plugin is loaded, it is sufficient to append an <img> tag inside the editable, also with jQuery, and the plugin will be triggered on it, adding the resize handle and showing the image toolbar when needed.
For example I get this as part of a third-party embed code
<a class="cs_import">Add from Address Book</a>
Not surprisingly "Add from Address Book" does not link to anything...but it is allegedly supposed to. How is this possible and if it is possible for this to be a link..what could be the reason my link is broken?
Yes. It is possible.
Why would someone do it?
Is is being used as a fragment anchor. This is not the case in your example because there is no name attribute. But if it had a name="myfragment" and the page file name was page.html, then page.html#fragment would automatically scroll the browser to that point on the page.
It is being used only for styling purposes. This could be a reason for doing it, but it is not a good reason, because styling can be accomplished either way.
It is being assigned an href attribute programmatically with javascript. For example, I could have a script that selects all the a tags with a specific class and assigns an href based on the text value, such as $("a.cs_import").attr("href",getHref(this.text()));, where getHref(innerText) is a javascript function that gets the URL from the description text. There is almost always a better way to do things than this, but there are some circumstances that warrant it.
It's possible with JavaScript. One could, upon page load, run some JS code that looks for this element and adds an onClick handler to it.
If the link is supposed to be "enhanced" with some javascript code, the third party probably gave you a javascript file to include as well. Be sure you're including that javascript file, and that you're doing it in the right place according to the vendor's instructions.
href is just an attribute of the link tag. You can leave it out but it wouldn't be very semantic (might not even validate). I know that some browsers just show the element but doesn't allow you to click it.
In your case, maybe the link might be enhanced with JS later on. If it doesn't get enhanced, it's pretty much a glorfied span element.
If an '<a>' element does not have a href attribute it is not focusable, and is not included in the tab order for keyboard access. href='#element' works by appending the hash to the current location, and '#' with no anchor identifier works like an id that is not found on the page, ususally by scrolling to the top of the page unless caught and handled.