var heading = $("#accordion h3").text();
if(heading != ''){
$('h2.title').text(heading);
}
I have list items with h3 as title and onclick(h3) lightbox gets open. I want to replace Lightbox title with text of respective Clicked h3. I have code but ALL h3 text gets added to title div.
Related
I need tooltips in Foundation to accept html. The html in the title tag is not being read as html. Here is a simple example: https://sc.imaginalmarketing.net/test/
Here's the code:
<h3 data-tooltip data-allow-html="true" class="has-tip" title="<p>This is the description</p>">This is a tooltip</h3>
I'm not sure how to do it directly, but you can use javascript to adjust it. I did this in the console in Google's inspector (with code cobbled together from other places):
Select the tooltip by role (assuming you only have one tooltip on the page):
tooltip = document.querySelectorAll('[role="tooltip"]')[0]
Create the html element you want to append:
var a = document.createElement('a');
var linkText = document.createTextNode("my title text");
a.appendChild(linkText);
a.title = "my title text";
a.href = "http://example.com";
document.body.appendChild(a);
Append the html element to the tooltip:
tooltip.appendChild(a)
Hope that helps!
I've enabled the legend on a amCharts v4 chart with the following code but I have issues with ellipsis:
// Add legend
chart.legend = new am4charts.Legend();
chart.legend.fontSize = 11;
// Truncate long labels (more than 160px)
chart.legend.labels.template.maxWidth = 160;
chart.legend.labels.template.truncate = true;
chart.legend.labels.template.fullWords = true;
// Set custom ellipsis as default one is not displayed correctly
chart.legend.labels.template.ellipsis = "...";
// Set tooltip content to name field
chart.legend.itemContainers.template.tooltipText = "{name}";
As you can see I had to set a custom ellipsis property because Firefox v76 displayed €| instead of … on the truncated legend labels. It happens even on the sample on the amChart website but, surprisingly, not if I open the same URL in a private tab... How can I fix that?
Then I would like to display the tooltip on the legend only for truncated labels. Adding an adapter:
chart.legend.itemContainers.template.adapter.add("tooltipText", function(text, target) {
// 'text' here contains the non-truncated string
return "My modified " + text;
})
of course works, but how can I identify inside the adapter code if the label that I'm processing is truncated and clear the text variable? It doesn't make sense to display tooltips for non-truncated legend items.
Not sure the most ideal way but...
You get the text inside the adaptor callback.
You can add a text.length check like:
chart.legend.itemContainers.template.adapter.add("tooltipText", function(text, target) {
// 'text' here contains the non-truncated string
return text.length > someValyeBasedOnMaxwidth> ? "My modified " + text: "";
})
I found the answer about the tooltip adapter; this works:
chart.legend.itemContainers.template.adapter.add("tooltipText", function(text, target) {
if (!target.dataItem.label.isOversized) {
// Legend label is NOT truncated, disable the tooltip
return "";
}
// Legend label is truncated, display the tooltip
return text;
})
Still I don't know why the ellipsis are not displayed correctly without setting the property...
I have an issue where I wish to re-style an item inside a selectmenu dropdown list when a new item is dynamically changed by other javascript.
The change event works when I pick the item from the dropdown list by clicking a desired option, but not when I do so via javascript (see last 2 lines).
The text value changes from "Black" to "White", but the color square still shows the old css.
$("#original-native-dropdown")
.selectmenu({
create: function (event, ui) {
var widget = $(this).selectmenu("widget");
// pass in style from a <span> inside the native <option> tags used in the selectmenu
const span = $('<span id="' + this.id + 'selected" class="color-option-selected"> ').html(" ").appendTo(widget);
const styleString = $(this).parent().find("select > option:first > span:first").data("style");
span.attr("style", styleString);
},
change: function (event, ui) {
// works when the user clicks an item in the selection dropdown but not from the outside.
$("#" + this.id + 'selected').parent().children(":last").attr("style", ui.item.element.children(":first").data("style"));
}
})
.selectmenu("menuWidget")
.addClass("ui-menu-icons color-option");
$("#original-native-dropdown").val("White");
$("#original-native-dropdown").selectmenu("refresh").trigger("selectmenuchange");
The color square changes only when user clicks.
The color square is not restyled when selection is changed via javascript.
I am loading UIWebView with html file. the html file contains some text in Div tags. I need to set cursor position in a div tag. the html file contains different div tags.based on some condition i need to locate cursor position.
This is helpful for setting the caret position.
Suppose my html is like this:
<div id="editable" contenteditable="true">
text text text<br>text text text<br>text text text<br>
</div>
<button id="button" onclick="setCaret()">focus</button>
and my javascript method is:
function setCaret() {
var el = document.getElementById("editable");
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[2], 5);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();
}
I using tab's JQuery plugin UI each tab contains TextArea then are manage by TinyMCE librarie.
I want to do : When you click on tab "+" , that add new tab which contains textarea too.
To create new tab with textearea , it's good. The problem is : I can't edit textarea value and if i click on TinyMCE 's option ( like Bold ) : J is null error on Javascript console
My JS Code :
$('li > a.moretxt').click(function(){
// Number of element in tabs
var size = $( "#tabs" ).tabs("length");
// Content to add on new tab
var content = "<div id='divcontent"+size+"'><textarea id=\'txtcontent"+size+"'\' cols=\'60\' rows=\'5\'></textarea></div>";
// Some variable
var path = '#divcontent'+size;
var title = 'content'+size;
var idtxt = 'txtcontent'+size;
// Add new div Textarea before the end
$('div#morecontent').before(content);
//Add control ?
tinyMCE.execCommand('mceAddControl', true, idtxt);
// Add new TAB
$( "#tabs" ).tabs("add",path,title,(size));
var index = $( "#tabs" ).tabs("option", "selected");
});
The follow code , well add tab with tiny TextArea but it doesn't works ...
TinyMCE needs to have the object in the DOM to apply itself. I'm not sure why TinyMCE isn't working as you appear to be are adding the container prior to adding TinyMCE, however if you move the "addControl" to after you've added the new Tab it should work.