We're testing a site for JAWS usability and are having an issue with the listbox tag from the ZK framework. When ZK processes a listbox, it is rendering a < button > (in IE) or an < a > (in FireFox) after the table (see IE button output below). JAWS is reading the href attribute contents of this button (or link). Is there anyway to have ZK not render this button (or link) or possibly change some of it's attributes? I've been searching extensively for this but the solution is eluding me. Thanks for any help!!
<button class="z-focus-a" id="j4yPd0-a" style="left: 0px; top: 0px;" onclick="return false;" href="javascript:;"></button>
Simply use Clients.evalJavaScript in the onCreated event handler of the listbox to execute some zk-jQuery code to find and manipulate/delete the button.
The jq command could look like this for deletion.
jq('button.z-focus-a').remove();
The code as it would be called in Java.
Clients.evalJavaScript("jq('button.z-focus-a').remove();");
Related
I'm pretty much new to Svelte framework. Recently I'm playing around with Svelte but confused how I would manipulate the DOM like in jQuery using Svelte.
I'm trying to show/hide an <li> on button click.
In Svelte, and other state-driven UI frameworks, you very rarely manipulate the DOM. Instead, you essentially tell the framework what the DOM should look like for some given data, and let it figure out all the details.
So to show or hide elements in response to a button click, you'd do something like this (REPL link):
<button on:click='set({ visible: !visible })'>toggle visibility</button>
{{#if visible}}
<p>hello!</p>
{{/if}}
Or, if you want to keep the element in the DOM but make it hidden (REPL link):
<button on:click='set({ visible: !visible })'>toggle visibility</button>
<p hidden='{{!visible}}'>hello!</p>
This is much better than manually manipulating the DOM, because you can change all the details — what kind of element it is and therefore what jQuery selector you'd use to target it, whether there are other things that also need to change based on visible, etc — without having to rewrite all your code.
I have changed the onclick(for li element) using the inspect element. In onClick I have called a function it was invoked twice.
Here is my sample code
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function a(val)
{
alert(val);
}
</script>
</head>
<body>
<ul>
<li onClick="a(1)"> 1 </li>
</ul>
</body>
</html>
I assume you are using Google Chrome. This is a bug/problem with the Inspect Element feature.
If you use Inspect Element to change or remove the onclick handler of an element, it doesn't work as expected. The new Javascript code is ADDED as a new handler to the existing list of the onclick handlers, rather than replacing the existing handler of the old code.
This is incorrect and a bug, because Inspect Element allows user to replace the code, and it looks like it's replaced - but hidden from the user, it's actually appended as a new handler - so the result is not what it would seem like.
If the code or the onclick attribute is deleted, the JS code is still executed as it remains registered as a handler.
This is highly misleading and makes the Inspect Element nearly useless for debugging event handler JS bugs.
To try it out:
Right-click any element and click Inspect element (or Inspect).
Add or modify its onclick handler to alert('stack');.
Again, modify the onclick handler to alert('overflow');.
Now, click the element to fire the handler.
You may think that you will just get one alert with the word overflow. But you will actually get two alerts, one with stack and another with overflow. This means the code alert('stack'); is still in the handler, even though it's not visible on the DOM tree.
There is no permanent fix for this problem. The following workarounds may help. Reporting it to Google may encourage them to fix it in a future version of the browser.
Workarounds
Use Mozilla Firefox. The behavior of Inspect Element in Firefox is as expected - the browser really replaces the old handler instead of adding a new handler to the list.
If you need to use Google Chrome, do the following:
With the element selected in the Developer Tools window's Elements tab, click the Event Listeners tab (this is on the other pane which may appear below or on the right side).
Make sure that the Ancestors checkbox is unchecked.
If your element already has an onclick handler, you should be able to see a click event handler listed. If you don't see anything, try clicking Refresh button (next to Ancestors checkbox).
If you still don't see it, close the Developer Tools and right-click the element in the page and click Inspect to open it again.
Click the rightward arrow next to the click event handler. It will open and you will get a list of all the registered handlers (listed with the tag#id.class notation).
In the DOM tree (top pane or left pane), double-click and edit the onclick handler code and confirm it by pressing Enter.
In the Event Listeners tab, click Refresh button again. You will see that a new handler has been added.
Hover over the handlers and you will see a Remove button appearing on each of them. Click this button on each handler until only one remains.
The order doesn't matter - you can start at the bottom, the top or even go randomly - internally, the Remove button removes handlers in the order they were added.
If there's only one handler left, you can be sure that's your latest code - it doesn't matter which handler was left.
To change the onclick code again, repeat steps 5 to 7.
I notice this bug as well. While working on my project this week with ajax calls.
Having a button like this:
<button id="mybutton" type="button" onclick="sendMessage('12345')"></button>
If you go into the inspector and edit '12345' to 'abcde'. Then clicking the button will cause the button to fire twice. Once as '12345' and once as 'abcde'.
To solve the double sending you can attach the event listener with an ID rather than using html's onclick. So instead use something like:
$("#mybutton").click(function(){
sendMessage('12345');
});
This will not suffer the same double sending bug.
However, anything you edit on the inspector will not do anything now, it will be disregarded.
I would like to ask how I can block richText from changing html text under source view.
I'm using Blossom module and defined richText as #Chris J advised me to do:
Add source button to Magnolia CMS richText control
Whenever I put html code in source code, switch to normal view and get back to source view the code is changed. For example the following part of code is missing :
<div class="components"> <div class="product col img-slider"> <div id="product-image" class="royalSlider productImage rsDefault"> <div class="rsContent"> <div class="rsTmb"><img src="/magnoliaPublic/resources/XXX/products/product_7.jpg" alt="">
and is replaced with folowing
<p><img alt="" src="/magnoliaPublic/resources/XXX/products/product_7.jpg" /></p>
I need to provide the possibility for the user to put html code and next to see in on the web page.
Regards
Jan
Jan. I'd ask why you are using a rich text area if you are entering HTML. It is not really designed for this usage. Would you be better off with an ordinary text field? In the STK (you mentioned this in your previous question) you will find a component that serves exactly this purpose.
Under "Configuration" you will find it at /modules/standard-templating-kit/templates/components/content/stkHTML
You will see that the template script is simply:
[#if content.editHTML?has_content]
${cmsfn.decode(content).editHTML}
[/#if]
If you want to stick with a purely Blossom approach, you may need to recreate this but it is an incredibly simple component.
Incidentally, in Magnolia 5.4 there is a code editing field used in a similar component that offers syntax highlighting. You can see this by logging into the demo site and trying to add an HTML component to the main area of the page travel/contact.
I am using CKEditor in DIV mode, as compared to an IFRAME and I am attempting to assign a class to the editor itself. I have found where to add it to things within the editor, but not the editor itself. And, I would prefer to not wrap the editor within another DIV to get the effect I want.
I am also using version 4 of CKEditor.
Edit: The following was my questions to Reinmar after he suggested the Shared Space plugin, which at least for now I have chosen not to use.
Edit: In response to Reinmar I have begun using the Shared Space plugin, and do see the potential benefits of using it over a DIV.
With that said I have the following code:
<div id="topSpace"></div>
<textarea name="data[ArchiveQuarter][description]" class="userContent" id="editor1" cols="30" rows="6"></textarea>
At the bottom of the page I have:
<script type="text/javascript">
CKEDITOR.disableAutoInline = true;
CKEDITOR.replace( 'editor1', {
extraPlugins: 'sharedspace',
sharedSpaces: {
top: 'topSpace',
}
});
</script>
It currently creates the toolbar within the top space, and has the textarea, but both of them are disabled. I probably just messed up some of the configuration, but I'm not sure what.
I would greatly prefer it to use the textarea configuration as it is part of a form instead of extracting the data from inline.
You might be interested in using Shared space plugin:
addon page,
sample.
I'm proposing this instead of using div, because I've got mixed feelings regarding divarea plugin. Your original container is wrapped with editor's structure what changes the real context. IMO it's better to use real inline editing + the shared spaces feature to place toolbar and bottom bar where you need them.
Update:
When you're using inline editor, you don't need textarea. Textarea is only a data container which framed or div based editors replace with themselves.
Inline editing is all about editing real existing elements. So this can be your HTML:
<div id="topSpace"></div>
<div class="userContent" id="editor1"><h1>My page</h1><p>Fooo!</p></div>
And JS:
<script type="text/javascript">
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'editor1', {
extraPlugins: 'sharedspace',
sharedSpaces: {
top: 'topSpace',
}
} );
</script>
Note that I used CKEDITOR.inline not CKEDITOR.replace.
And the huge advantage of inline editing is that that <div> is a real element on your page - it is not wrapped (as in div based editor) and its contents is not moved to the frame (as in framed editor). So your content will inherit styles of your page.
The downside is that you need to implement custom data saving, because there's no form. The simplest way is to add a "save" button which clicked will send editor.getData() via AJAX to your server.
BTW. You probably was confused by the fact that in the shared spaces sample 2 editors are framed and 2 are inline. All of them reuses one top space and one bottom space.
BTW2. To make use of inline editing you don't need shared spaces in fact. Then the "floating toolbar" will be used as in here: http://ckeditor.com/demo#inline
I've been desperately seeking a way to disable the facebook social text right next to the "Recommend" button. Is it possible, to simply render a "Recommend" button, without anything else (no counter, no text, JUST the button)?
The problem is, CSS wont be applied since all the elements are inside the iframe, so I cant just hide the element itself using CSS (which in this case would be a td).
Also, I cant just put everything in a div and give it overflow:hidden and a fix width, since the pop up which appears when actually clicking the "Recommend" Button would then not be fully visible.
My current implementation comes via AddThis:
<a class="addthis_button_facebook_like" fb:like:size="small" fb:like:layout="none" fb:like:action="recommend" fb:like:width="10"></a>
Any ideas?
Thanks
Alex
Facebook polcy IV 4 d:
You must not obscure or cover elements of our social plugins, such as the Like button or Like box plugin.
So if you can't do it by using their like button creation tool you shouldn't do it.
Using the Add This Facebook Like button you can avoid the count using this attribute
fb:like:layout="button"
So in your case you would have
<a class="addthis_button_facebook_like" fb:like:size="small" fb:like:layout="button" fb:like:action="recommend" ></a>
"Recommend" with a counter comes closest to your request. I too don't like the social text (e.g. "57 people like this. Be the first of your friends"), yet I do like the naked counter. The code that I use is:
<a class="addthis_button_facebook_like" fb:like:layout="button_count" fb:like:action="recommend" fb:like:width="135"></a>
See AddThis own documentation here.