I'm trying to create a tooltip for a few radio button options on a page. I've got the tooltips displaying the [title] attribute easily enough, but I want to selectively format the tooltip text in a couple elements. I know I can provide content as HTML, and I've created some classes to style the content, but now the tooltips are no longer showing. I think my problem is that I am not specifying the "items" option properly. In fact, I'm not quite sure how to define my html "content" option as an item at all. Halp plays!
JS
$('#tooltip').tooltip({
tooltipClass: "tooltip-class"
items: what do?
content: "<div class="tooltip-header">header</div><div class="tooltip-description">text</div>"
});
HTML selected by JS
Thanks for reading. :)
UPDATE:
Ok! I figured it out... kinda. I was encasing my strings improperly: "<>"bad code"<>" . The solution to my problems with the content option was to put my html inside a variable and set it to content. JQuery seems to have liked that much better. My styles are showing up properly for the tooltip, but for some reason it is only working on one of three items selected for tooltips. There's nothing in the console that indicates it shouldn't work. No syntax errors, I'm selecting the correct id. I'm so confused.
I think I know what you are running into. When you use the content option you still have to include the title attribute on the element OR specify the items option as something different.
I have NO IDEA why the jQuery team decided to do this, as it seems the selector you are applying the tooltip to, would be the same thing used for the items option. Quite duplicative.
Anyway, you can change the content but make sure the element you are applying a tooltip to has the title attribute or you specify the items option with a selector which could simply match the selector you are applying the tooltip to. Odd indeed.
Example:
$('#selector').tooltip({ content: 'your content', items: '#selector' });
when you have problems with quotes, you have many options, like you said:
use another variable as you finally did
escape the "inner" qoutes with backslashes like this:
$('#tooltip').tooltip({
tooltipClass: "tooltip-class",
items: "what do?",
content: "<div class=\"tooltip-header\">header</div><div class=\"tooltip-description\">text</div>"
});
combine single and double quotes:
$('#tooltip').tooltip({
tooltipClass: "tooltip-class",
items: "what do?",
content: '<div class="tooltip-header">header</div><div class="tooltip-description">text</div>'
});
you second problem after UPDATE:
if you have created your link with id and you are applying tooltip with id selector
there can be only one link with same id in one html page! so if you declared more links with the same id, most likely it wont work.
content: "<div class="tooltip-header">header</div><div class="tooltip-description">text</div>"
This produces a syntax error.
Please do the following:
learn how to use your browser’s JS error console
learn the absolute basics of the JS syntax, and how to operate with strings/text literals
Related
We work with a backend that tags words like Persons or locations. I send text to the backend and it tags me words. I have to create tags in the ckeditor frontend.
So I have the task to create editable inline elements, means they should be addable to where text is addable.
The tag must be editable.
The tag should also be visible if its empty (should be a own tree node not text attribute).
The tag should have visual highlighting, like a background-color and border radius.
If the tag is empty, its type should be added via css' ::before pseudo class and content property.
It would be nice if you can toggle it's edtiable part. Since we also need readonly tags, their are developed as seperate elements so far.
My approach so far was using text attributes applying:
writer.createText('my tag', {tag: tagType})
I was basically creating tags like you would create bold text. I was applying css styles like background-color and border radius to make it look like a tag, but this approach came to it's limits. Also with this approach you cannot have editable and non-editable tags be the same ckeditor entity, since you cannot have non-editable text, I guess.
Then I found editableElement's in the view side. The Problem is you cannot have emtpy tags since empty text is nothing. You also cannot modify the "tag" at index 0 because then you are outside of the tag, see bold behavior for this. I mean I could somehow fix it all, but I would like the tags to be their own element on model side. so I have tried this approach:
// in editingDowncast conversion:
viewWriter.createEditableElement('div', {class: 'inline'})
// this is the whole code in the ui:
this.editor.model.schema.register( 'test-tag', {
allowChildren: '$text',
allowWhere: '$text',
allowAttributesOf: '$text',
isObject: true
});
// if it is isInline: true it behaves mostly like my approach with text attributes
this.editor.conversion.for('editingDowncast').elementToElement({
model: 'test-tag',
view: (modelItem, conversionApi) => {
let { writer: viewWriter } = conversionApi;
const tagView = viewWriter.createEditableElement( 'div', {
class: 'inline'
});
return tagView;
}
})
basically EdtiableElement's work only with block elements, so I have tried to make them inline via css, setting their display property to inline-block. Here I have again the problem that when the element is empty you cannot access it anymore via cursor. So it will stay empty forever. Generelly it seems that it's behavior is kind of buggy because I guess you should not use it as inline. Basically I have many similiar issues like with the approach above.
I will keep implementing it with the first solution but I wanted to ask the community if there is any other way, maybe a less hacky way to create inline editable elements that are actual nodes in the model. Something like a span tag but on model side.
Any Ideas?
So my website is built using a company's software called Inksoft which leaves me very little to work in the way of customization. So I have to do many workarounds.
Here is my site's homepage.
The header on top of the page only has two links right now. "Products" and "Design Studio". My goal is to add an "About Us" link and "Buyers Guide" to the header as well.
I cannot add new content to the header using Inksoft's backend. So I coded a workaround to replace the content of existing DIV's within the header to say and link to where I want them to go.
The only issue is, the responsive mobile-nav loses functionality when this is implemented. As seen here on this test page.
The test page has the About Us in the top header, added by the use of this code:
<script>
$("#header-nav-designs").html('<document.write="<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
So, the simplified question is: how do I implement this code without losing the responsive functionality of the nav bar?
The jQuery .html function will replace the HTML inside the target element. If you want to just append the one value, you likely want to .append to the element.
In addition, you aren't setting the HTML to a valid html string. You probably just want to get rid of the <document.write=" at the beginning of the string. The rest of it looks fine with just a cursory glance.
So:
<script>
$("#header-nav-designs").append('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
Edit:
After looking at it a little more, it appears as though the $('#header-nav-designs') that you are selecting is already an <li> which means you need to either select the parent <ul> list or you can use the jquery .after function instead.
<script>
$("#header-nav-designs").after('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
And as someone else commented above, you are getting an error on the page. It appears as though you are trying to get an element with the id divID and the appending some html to it, but there is no element with the id divID and so you are getting an error saying that you can't read the property innerHTML of null as the call to document.getElementById is returning null (element not found).
Element id header-nav-designs witch your code is referring have CSS style on line 170:
#header-nav-designs {display:none;}
The element will be hidden, and the page will be displayed as if the element is not there. With display:none;
If I understand you correctly your code selector points to wrong element id. It should point $(".header-nav > ul"). Document.write is not needed inside jQuery you need to give only an valid html string as argument.
jQuery html function erase html that is all ready inside element and replace it with html string given as argument. You have to use append if you want to add more html but not remove what is allready in element.
$(".header-nav > ul").append('<li><font color="#000000">About Us</font></li>');
$(".header-nav > ul").append('<li><font color="#000000">Buyers Guide</font></li>');
I have a large Joomla CMS Website I'm working on.
Problem: I need to hide a menu tab globally across the entire site. The menu item I need to have does not have a unique ID or class; but instead shares the same class as the other tabs I need to keep on the page. 70% of the tab I need to remove shows in 4th order so I started with the below.
.tabs:nth-of-type(4)
{
display:none !important;
}
But! Seeing as how the rest is in different order, this wont work. The tab in question I need to remove looks like the below across the mark-up.
Update: This is what I currently have via the suggestions below but it isn't working:
$(document).ready(function() {
$('.djaccTitle:contains("Location").css( "display: none;" )')
});
<span class="tabs">Location</span>
Is there a way to write an if statement or similar lightweight solution that can sniff out text content within the class, so if it says Location, then hide?
I would like to find a solution like this, as opposed to going through 1000 files of mark-up removing manually. Cheers for any pointers
Update: This is what I have via the current suggestions below but it isn't working!
$(document).ready(function() {
$('.tabs:contains("Location").css( "display: none;" )')
});
I do not believe what you are asking for exists with pure CSS at this time.
What I would do is use jQuery's :contains() selector:
$('span.tabs:contains("Location")')
or even better:
$('#idOfTabsContainer span.tabs:contains("Location")')
And of course, don't forget to put this in a document.ready to ensure that your DOM element has been loaded successfully:
$(document).ready(function() {
$('#idOfTabsContainer span.tabs:contains("Location")')
});
Jquery :contains() Selector should work. I think you have an error in .css() function syntax.
Please try with:
jQuery(document).ready(function(){
$( '.tabs:contains("Location")' ).css( 'display', 'none' );
});
Hope this helps
There used to be a :contains selector that they were going to add to CSS.
But alas, you may have to resort to some JS, as addressed already here
jQuery's got your back though:
$('.tabs:contains("Location")')
Problem: I need to hide a menu tab globally across the entire site.
Solution 1: Disable the menu item. Boom, it is gone from your menus, site wide.
Solution 2: Hide the menu item with css by adding a unique class to the menu item itself and then hiding it with css.
.hide-me-with-css {display: none;}
First of all this is how the script works: jsfiddle
The 'searchList' setting specifies the content that will be searched. In this case it is searchable tr. Finally, the 'searchItem' setting allows to dive in and specify an individual element to search. In this case, I use 'td'.
In this fiddle
I have a list of thumbnail images with some informations, what I want to do is to be able to search for "something" and then to show the image and the text related to that specific thumbnail.
Hope you understand what I'm trying to achieve.
Out on a limb, but your selector for searchList looks wrong:
'searchList' : '.imgscontainer portfolio-v6-items ',
Surely that second class should have a dot before it, and they're on the same element, so no space:
class="imgscontainer portfolio-v6-items"
James here. Quick, and simple question for you guys. I'm working with a tumblr theme which uses a text option, which means the user can type whatever they want, and it'll display on the blog. The text options however do not work with javascript, so I can't use the text option for amount of columns and the text option for spacing between posts in my script that organizes the whole page. I know there is a way, but I don't know how to do this, to just create an invisible div with the boo lean text in it, and then use jQuery to get the text inside the div to use as a variable? I was thinking like .text(); or .html(); but I have no clue. Any codes or help would be greatly appreciated. I'm new at this jquery thing, so it'd mean a lot.
EDIT: If this is confusing for anyone, I basically need to use jQuery to get text inside an invisible element and use that text as a variable.
I'm not sure what you mean by 'boolean' here, but per your edit you want:
$('#id-of-element').text()
if you only want the text in the div or,
$('#id-of-element').html()
if you want the HTML. So if the div contains:
<h1>foo</h1>,
text() will give you "foo", while html() will give you "<h1>foo</h1>".