I'm working on fixing a bug on a web page created in .NET that integrates jQuery UI and uses it to replace the default tooltips generated by the browser.
These tooltips occasionally render in code, as you can see below. Sometimes the tooltip will not render (only when the mouse goes to the center of the button) and then the title attribute will not return to the link element.
This .gif should help illustrate my problem clearly:
I understand why the title element is being removed. It is mentioned by jQuery on their own web page stating that this behavior is expected so that browsers will not render their own versions of tooltips.
The behavior I am confused about is why occasionally the tooltip will not show, and as a result the title attribute is stripped off of my link element.
Even after exploring the jQuery-UI.js source code I still don't understand why the button.hover() doesn't always create the tooltip.
Thanks for your help.
Related
I am trying to implement a custom widget plugin for CKEditor5, but am having hard time creating a widget that would prevent link clicks so that user stays on the same page and can edit the component itself.
I've initially started with this structure:
pluginWrapper > contentItemA + contentItemB + contentItemC
but although that mostly worked, balloons for that widget were misaligned. Meaning if I set a link it wrapped properly and link clicks actions were prevented, but the floating bar for link edit was misaligned as pluginWrapper was also positioned to "float: right";
So, I've tried to get some inspiration with a figure as e.g. visible here in the editor demo at the top of the page: https://ckeditor.com/docs/ckeditor5/latest/features/images/images-overview.html
Here, if you set a link it works properly, including the balloons. Apparently because the figure is floating but all content is not. So I tried doing the same. Unfortunately unlike in the official example my link now became clickable when editing, which is far from desirable :(. And I can't prevent that with css to keep the content clickable and editable and my attempts in JS were not successful.
I was somehow hoping it does this automatically, either by the evt.stop() or data.preventDefault() here: https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-link/src/linkediting.js#L267 (definitely looks like it should), but it doesn't seem to like my plugin.
I have also tried doing something like that as part of my plugin, but that made no difference.
Either I am missing something or I am thinking I perhaps set the link up incorrectly. But if I omit that from my plugin and set the link up manually it still behaves this incorrect way :(.
However yes, this may not be the proper way to do this from the code, as I just add these attributes:
attributes: {
linkHref: "https://www.xxx.zz",
target: "_blank"
},
to the pluginWrapper (under pluginTopWrapper > pluginWrapper), and it ends up doing pluginTopWrapper > a > pluginWrapper with the a tag having the proper link, but seems to also ignore the target attribute :/. But I guess me being unable to set the link properly in code still doesn't explain why would the link be clickable when set up manually (using the link button in the editor toolbar) around my widget.
If you have any thoughts on this it would be very much appreciated. Thank you!
I've got what should be a fairly simple "please wait" overlay that should pop up during a variety of different tasks on a data-review/dashboard website I'm working on (data queries, chart rendering using ChartJS, putting data into a file for download, etc.) that is not consistently working as desired in Chrome.
I toggle the overlay via Javascript at the beginning and end of each function that I need it for. The overlay successfully displays/turns off on IE11 and Firefox every time I do a function that calls it, but on Chrome it is consistently inconsistent (ALWAYS displays during specific functions, NEVER displays during other functions) despite calling the same few lines of code every time. When it does not display, the console confirms that the method to toggle it is being called and I can see the page's HTML update, but the user's display does not change.
The functions that the overlay does not display for involve creating/updating ChartJS charts, including an AJAX call to get data. I have functions that the overlay displays properly on that involve just doing AJAX requests. On the functions where it does not display, it never shows up on the user's screen at all, even well before I get to ChartJS stuff. It's confusing as heck. I can give out a little of that code if it would be useful, but again since the overlay never even shows despite toggling the overlay as the first line of those functions, I don't think that's the the problem...
It's a style thing more than a function thing; I also disable other user-interface elements while the overlay is supposed to be active (which Chrome's display also does NOT reflect but again definitely occurs). But I'd still like the overlay to consistently display, particularly since those ChartJS functions can take a few seconds, and I'm wondering if people have any ideas.
HTML for overlay, as it appears on page-load
<div id="overlay">
<img src="img/loader.gif"></img><br><strong>Data loading, please wait</strong>
<div id="overlayAdditonalMesages">
</div>
</div>
Javascript for overlay toggle
function overlayToggleOn(additionalMsg) {
console.log("overlay should be on");
document.getElementById("overlay").innerHTML = '<img src="img/loader.gif"></img><br><strong>Data loading, please wait</strong>'+additionalMsg;
document.getElementById("overlay").setAttribute("style", "display: flex;");
$("overlay").show(); //just trying to fix the thing with Chrome
}
function overlayToggleOff() {
console.log("overlay should be off");
document.getElementById("overlay").innerHTML = '<img src="img/loader.gif"></img><br><strong>Data loading, please wait</strong>';
document.getElementById("overlay").removeAttribute("style");
}
Like I said, should be simple, and I struggle to understand why it's not working consistently in Chrome. Thoughts appreciated.
Why using .setAttribute() for you inline styles.
I also saw where you added a closing tag for your image element </img> why?
Use
id.style.property = value
Instead of setAttribute()
It's really hard to understand how Tinymce can be considered as WYSIWYG, because I cannot get what I see (visually exactly). So it is more likely "what you see is just what you see".
Currently I use getContent() to get the HTML. But it lacks embedded style and if we show that output html in some container, the visual rendering will look different.
I've tried implementing my own solution to help embed the current style (based on getComputedStyle) to each element. But that's not very efficient (many redundant styles can be included) and not always works (such as for embedded video, I'm not so sure why the <video> is not kept with getContent() and all <video>s disappear in the final output html).
The Tinymce team has done a lot of works, but really not sure why they did not even think about this feature? We need the exact HTML that renders what you see in the editor. We can sanitize the HTML after that by ourselves.
Here is a demo helping you imagine better what's so bothersome with this WYSISWYG editor:
https://jsfiddle.net/L83u5v0n/1/
Clicking on the Show HTML button shows this:
So you can clearly see it's just more likely to be WYSIWYS rather than WYSIWYG. Is there a solution to get the exact output HTML based on some hidden feature of Tinymce that I've not known of? If it's based on some custom script using getComputedStyle then really I do not need it (actually my solution is fairly good).
This is a function of demos that are set up to look good in the editor versus real world usage. The intention of the content_css configuration is to provide the CSS that will be used to render the content.
If you apply the content CSS elements to the page then "Show HTML" works perfectly.
https://jsfiddle.net/xzh8utbp/
Alternatively, delete the content_css configuration (but that won't quite work in your example because JSFiddle adds CSS to the result window).
Note that I've added mce-content-body to the view div because it turns out our codepen demo CSS leverages it. Normally that wouldn't be required, but then I don't think normal integrations use our codepen CSS.
I use Fabric.js to make a product customizer.
To get an interface with other interactions, I use jQuery. On Firefox everything works fine, but on Chrome, the jQuery part fails. No error is displayed.
I use other javascript scripts on this same page (Tinymce, jQuery Form Plugin). But I made a first debug and if I do not load Fabricjs on the page, the jQuery part executes well.
You will see other plugins loaded, it's from the CMS we use.
The jQuery* part is the one I have problems with. It is the one handling the three tabs on the right part of the page (on click content under them should change).
I try to make a JSFiddle but the problem doesn't appear, so here is the page :
page
You can login with:
Name: demo
Password: demo
Thank you :)
EDIT : I have found a way to avoid the problem : I comment the ""Click" event proxy" in Fabric.js file. This redefinition seems to be in conflict with jQuery.
I was recently on CodeSchool's website and took the JQueryAir course that features a web-based text editor that shows - in real time - what elements of the DOM are being selected as you write your JQuery code. It does this by highlighting the selected elements of the html page in light gray.
Does anyone know of text editor (or plugin) that can recreate that functionality? I'm mainly looking to use it for practice purposes. Or if you know of a website that would allow me to do they same thing, that would be great too.
Here is a screenshot to give you an idea of what I mean:
As the JQuery in the bottom panel changes, the html above is highlighted.
Any advice appreciated - thanks!
A simple way to do this (although perhaps not quite as dynamic as you would like) is to use FireBug's console (or similar in Chrome, IE9 etc.). After loading a page containing a jQuery reference in FireFox, go to FireBug's Console tab and paste this.
$("p").css("background-color", "gray");
Hit Enter. You can change the selector to see the results, though they will be additive until you refresh the page. Use the up arrow to bring back your most recent selector to edit.
EDIT: OK, this was before you added the screenshot showing the desired HTML source highlighting. Still, perhaps this method will come in handy at some point.