Bootstrap switch with own text - css

I’d like to be able to add a LOCK / UNLOCK behaviour on the checkbox using twitter bootstrap. I found a similar sample at boostrap-switch.org at the section of Label Text. In this example they have used ON-TV-OFF, Similarly I want to give my own text in the place of ON, OFF. Like UNLOCK-Username-LOCK.
LOCK should be disappeared by clicking on UNLOCK then output should be like XXX-LOCK
UNLOCK should be disappeared by click on ON text then output should be like UNLOCK-XXX
How can I do this with bootstrap?

It's a Github repository. Go to /build/js and in the bootstrap-switch.js change the string in the following:
html = "ON";
It's the line 35 of the js file.
Similarly change the string in:
html = "OFF";
i.e. line 47.

This might not be exact same thing as boostrap-switch.org, but I have done it using fadeTo() property of jquery.
Here is the jsfiddle output link.

Related

GTM - CSS Element

I'm wanting to create a variable to grab the username from a landing page (assuming it's possible). In my attached examples, I'd like to grab the text "Landing_page_test".
I'm just learning CSS so I'm not able to single out just that text.
Any thoughts/suggestions would be much appreciated! enter image description here
Console
Elements Pane of Landing Page
document.querySelector returns an element, not the text. Add .innerText
Try it out on this page: document.querySelector("a.question-hyperlink").innerText to get the name of the question.
But you probably don't want to do it as custom html tag. You probably want to do it on click. in that case, you have {{Clicked Element}} variable in GTM, of which you can also get .innerText, or get its .parentElement and further navigate DOM from the clicked element as you wish and get whatever you need.
Here's the html of the Location & Date/Time text blocks
Text Block

Label html string being read by screen reader

I've got some dynamically generated html building a drop down menu using the Dojo library. I need to make my code Accessibility compliant and right now the screenreader looks at the menu item and reads it as plain html:
menu.addChild(new MenuItem({
label: "<a onclick=window.location.href='sampleurl.com'
href="sampleurl.com">Sample Link</a> ...
Excuse the onclick, it's for a different issue, but what I'm getting is basically:
Tab down to first menu item
Screenreader: "Less than a onclick equals window dot location dot href equals sampleurl"... etc
I've tried using aria-hidden, but the screen reader just reads that as text, I'm using voice over on Mac OS, but I need it compliant for JAWS as well. Any tips or advice? Thanks!
label is used for the label (which can be in HTML), not for putting the full link html tag.
See on the following page how to use the Dojo library to generate menu items:
https://dojotoolkit.org/reference-guide/1.10/dijit/Menu.html
Example:
menu.addChild(new MenuItem({
label: "Sample Link",
onclick: function() {window.location.href='sampleurl.com';}}));
This would be easier to debug with a working example along with something stating what screen reader / browser combo you are using. At the bare minimum, show us the HTML output of your script, considering it is writing HTML for the screen reader to parse.
That being said, I suspect the missing / inconsistent quotes. Note that you start a string with double quotes, then go into the onclick attribute with no quotes around, then single quotes around its value, and then use double quotes around the href.
Alternatively, you are writing the entire string into the page and somehow HTML encoding it.
I suggest using a linting tool to check your JS.

Jira Need to Add Button to Comment Toolbar

So we currently have Jira in our workplace and no Jira Administrator. I'm feeling up to the task and would like to know if Jira has the functionality I'm looking for.
So when you have comments in Jira or even in the body of a Jira ticket. You can italicize the text from the comment ribbon
As you can see I am interested in being able to have the same functionality as bold or italicize or underline
but I want to be able to highlight some code that i insert in a ticket comment and click a button and make it into a code block. Or add curly brackets and make it a quote... Exactly like how StackOverflow does it.
Anyone know how I can accomplish this?
This is quite old question but it might help someone else looking for an answer later...
If you're familiar with JavaScript, simply inject a button via JS onto the toolbar. I've done this for a couple of custom fields. Such JS can be included in the custom field's description.
Example
In my case, I've added two buttons on two custom fields to copy original content from Summary/Description. You can adjust the code to do a whatever action on any custom field or comment field.
Screenshot
Code
Code to be included in the custom field's description. Adjust your code to place the JS into appropriate elements.
<script>
var cfAltDescription = 14705;
var elAltDescription = AJS.$("#customfield_" + cfAltDescription);
function addDescriptionButton() {
var buttonHTML = ' <button type="button" class="aui-button" style="font-size: 11px;padding: 1px 5px;" title="Paste original description into this field" onclick="copyDescription()">< Description</button>';
AJS.$(".jira-wikifield[field-id=customfield_" + cfAltDescription + "] ~ .wiki-button-bar").append(buttonHTML);
}
function copyDescription() {
var origDescription = AJS.$("#description").attr("value");
elAltDescription.attr("value", origDescription);
// set focus in the input box after copying...
elAltDescription.focus()[0].setSelectionRange(0, 0);
elAltDescription.scrollTop(0);
}
addDescriptionButton();
</script>
For comments, you cannot inject JS into the custom field description (comments are not a custom field). You will need to include your JS either via Announcement Banner (this would be global JS for any Jira page). Alternatively, you can utilize simple yet powerful JsIncluder add-on to inject your own JS code only for certain project/issuetype or globally and/or for edit/transition screens only.
I think you can use plugin for this. jeditor plugin gives you more options in text editors. all information you need is provided in above link.after installing this plugin you can change the text renderer as "JEditor Renderer".
Marketplace: https://marketplace.atlassian.com/plugins/com.jiraeditor.jeditor
or you can use.....
Note:-I guess this is not the exact answer you need but I think you can use macros inside the comment field. ex:if you want to add panel in inside of comment you can simply use
{panel}Some text{panel}
{panel:title=My Title}Some text with a title{panel}
{panel:title=My Title| borderStyle=dashed| borderColor=#ccc| titleBGColor=#F7D6C1| bgColor=#FFFFCE}
a block of text surrounded with a *panel*
yet _another_ line
{panel}
and if you want to add code you can use...
--- Java example ---
{code:title=Bar.java|borderStyle=solid}
// Some comments here
public String getFoo()
{
return foo;
}
{code}
*--- XML example ---*
{code:xml}
<test>
<another tag="attribute"/>
</test>
{code}
here is a example screenshot..
follow this link for more information..
UPDATE
with the plugin you can get something like this..I think this will helps you.

Qt set line edit text to link clicked link?

Using this:
void MainWindow::on_webView_linkClicked(const QUrl &arg1)
{
}
How can I set a lineEdit to the link text? I can't figure it out.
If I'm understanding you correctly, you have a link like the following ...
bar
.. and you want to get the value "bar." If that's what you are trying to do, you can't from that method. A few options, depending on how much control you have over the page:
Embed the text of the hyperlink into the URL and extract it. Something like: bar
If you are generating these links yourself, and there is a one-to-one relationship between URL and text, set up a map from url to text and look up the text in the map.

How to control cursor (carat) position in TextInput in Flex 4.5

I need to handle diagraphs and then convert them on the fly to the proper unicode representation. For example when the user types in:
Sx
My app needs to replace it with:
Ŝ
Now, I've been able to do the replacement no problem. The issue though is that once I've done the replacement, the cursor goes to the beginning of the textbox rather than the end. As I'm trying to update the user's text on the fly, this obvious doesn't work.
How can I get it so that once I replace the text in the TextInput box, the cursor is on the right hand side rather than the left?
Found a solution.
All you have to do is instead of updating the whole text, wipe the current content and then use:
textInput.appendText()
Hopefully this will help someone else :)
The setSelection method is how you set the cursor
textInput.setSelection(textInput.text.length, textInput.text.length);
You can get the current beginning of the selection with TextInput.selectionAnchorPosition and the end of the selection with TextInput.selectionAnchorPosition
Take a look at this SO Question: How do you programmatically move the caret of a Flex TextArea to the end?
If you are using a textArea then this will work (from the selected answer):
textArea.selectionBeginIndex = textArea.length;
textArea.selectionEndIndex = textArea.length;
For the people coming here for the solution for the Spark textInput, this is the way:
textInput.selectRange(textInput.text.length, textInput.text.length);

Resources