I'm using nanoscroller.js and tiptip.js , although for my question I'm not sure specific libraries matter that much (but they may).
I have a working tool tip, I have a working scrollbar. When used seperately.
My goal is to have a working custom scrollbar inside the tooltip.
HTML:
<a class="tooltip">Open tooltip</a>
<div class="tooltip-html" style="display:none;">
<div id="main-content" class="nano">
<div class="Content">
<div class="blue">
</div>
</div>
</div>
</div>
JS:
var tip_html = $('.tooltip-html').html();
$('.tooltip').tipTip({activation: 'click', maxWidth: "230px", defaultPosition: "bottom", keepAlive: true, content: tip_html });
$("#main-content.nano").nanoScroller();
First thing I noticed about the above: With this arrangement the nanoscroller was only applied to the first set of html, not the set that is in the tooltip.
So I then applied the scrollbar first before grabbing the html and adding it to the tooltip, this applied the scrollbar to the tooltip but it wasn't functional.
Tried a lot of different approaches here (applying the scrollbar to every id that matched, different order of when to call which, etc), and I'm definitely stuck. Any help is appreciated, thanks!
Without having used either of those libraries, my guess is that what tiptip does is create a copy of the DOM node, and that nanoScroller saves some reference to the node to which it is applied.
Combined, these these two behaviors could cause what you're seeing: $(#mail-content.nano) will always point to the original HTML, and if you copy the HTML after adding the scroller, the scrollbar may still be trying to scroll the original node.
Therefore, you may want to try adding nanoScroller after the tipTip is created. Something like this (untested):
var tip_html = $('.tooltip-html').html();
$('.tooltip').tipTip({
activation: 'click',
maxWidth: "230px",
defaultPosition: "bottom",
keepAlive: true,
content: tip_html,
enter: function () {
$(this).find("div.nano").nanoScroller();
}
});
This uses the enter property of tipTip to add a function that's executed when the tip is opened, which then adds the nanoScroller to the new DOM elements.
Related
I'm currently using Tooltipster for some tooltips. It works 'fine', when I place 'tooltip' class in the element (Ok, it's needed) and data-tooltip as well. My problem is that I want to give this element a HTML tooltip (aligned text and colours). From my search, I know we can do this:
$('.tooltip').tooltipster({
content: tooltipHTML,
contentAsHTML: 'true',
minWidth: 250
});
I'm sure the tooltipHTML is a valid HTML. Already tryed a $(tooltipHTML) as well. The problem is that Tooltipster is completly ignoring this options. No min-width is given (only forcing this by CSS - something I've done) and the content is not changed at all. I've replaced the data-tooltip content to this tooltipHTML but the problem is that the tooltip is not interpreted as HTML.
My HTML:
<div data-tooltip="{{this.locations}}" class="tooltip location__point location__point--client tooltipContainer " style="top: {{this.coordinates.y}}%; left: {{this.coordinates.x}}%;" data-locations="{{this.locations}}" data-timezones="{{this.timezones}}">
<span class="location__pointDot locattion__pointDot--client"></span>
</div>
Anyone knows any solution? Being on this for hours, trying soo many different solutions and nothing happens..
As you say you need to have the class tooltip in the element where you want you tooltip. Or just use another class, but then you need to call the right class in
$(".tooltip") or you own calss $("myToolTip")
See my fiddle to understand what I mean.
Basically, I want to place an anchor element as the top level element, but TinyMCE enforces it's own ideas every time the source code panel is closed.
Disclaimer: TinyMCE is an amazing free wysiwyg editor tool. I am just having a really bad day with it.
It pains me that TinyMCE, supposedly "the most advanced wysiwyg html editor", often can't even let you enter the html you want without screwing it all up for you the second you save or close the source code view.
All I want to do, is to be able to close the editor, leaving my code (or even just anchor elements) intact. But no matter what options or configuration I pass to TinyMCE, it repeatedly tears my code asunder; carelessly scattering elements about the document like shards of broken dreams.
<!-- Casually transforming this -->
<a class="box" href="#">
<div class="title">Box Title</div>
<p>This is the box content!</p>
</a>
<!-- into this -->
<p><a class="box" href="#"></a></p>
<div class="title"><a class="box" href="#">Box Title</a></div>
<p><a class="box" href="#">This is the box content!</a></p>
<p></p>
For some reason best known to themselves they have removed the life-saving cleanup option allowing you to disable this abomination entirely, and I cannot get any of the valid_elements/children options to work correctly. (a[*], etc)
I have spent the last 3 hours scouring their documentation, forums and stack overflow, but to no avail whatsoever. My only solace was finally being able to put block-level elements within anchor tags, but this only solves part of my problem.
The main issue I am facing is that TinyMCE will not allow me to place an anchor tag, containing block-level elements, at the top level. Anybody know how to configure TinyMCE to allow this?
TinyMCE Code (stripped down to relevant):
tinymce.init({
selector: 'textarea.wysiwyg',
schema: "html5",
element_format : 'html',
plugins: ['codemirror'],
convert_urls: false,
valid_elements: "*[*]",
valid_children: "+body[a],+a[div|h1|h2|h3|h4|h5|h6|p|#text]",
//apply_source_formatting: false, // removed I think
//verify_html: false, // removed :'(
codemirror: { indentOnInit: true },
content_css: '/Content/Styles/Sass/main.css'
});
The solution is to disable forced_root_block.
tinymce.init({
...
forced_root_block : false, // default = 'p' >= 3.0a1
});
This feature automatically ensures that any non block elements or text nodes are wrapped in block elements.
For example <strong>something</strong> will result in output like <p><strong>something</strong></p>.
Documentation Reference
I have two hidden <div> elements which are hidden at the bottom of my page like so:
<div class="hidden-unit" style="display:none;">
<h1>ad unit one</h1>
</div>
<div class="hidden-unit" style="display:none;">
<h1>ad unit two</h1>
</div>
Further up my page I have another two div elements, like so...
<div class="visible-unit"></div>
<div class="visible-unit"></div>
I would like to loop through each of the hidden units, place the content from the first .hidden-unit into the first .visible-unit and then likewise for the second.
The content that sits within each .hidden-unit will actually be an inline script used for displaying ads, this is passed through from an array into a view that I have created in PHP so there is a strong possibility that more content could be added to the array or removed, so this loop needs to accommodate for such situations.
I have tried a number of solutions using jQuery's .each() but I can't seem to get it right. I've also created a JSFiddle should anyone want to demonstrate a solution:
https://jsfiddle.net/p89sq2df/3/
I've tried loads of different combinations and the latest attempt only seems to be populating the .visible-unit elements with the 'ad unit two' text.
$('.hidden-unit').each(function() {
$('.visible-unit').html($(this).html());
});
Anyone had to do anything like this before? I appreciate it's an odd one.
You can try using the index:
$('.hidden-unit').each(function(index) {
$('.visible-unit').eq(index).html($(this).html());
});
var visibleUnits = $('.visible-unit').toArray();
var x = 0;
$('.hidden-unit').each(function() {
visibleUnits[x].html($(this).html());
x++;
});
The gotcha is that there could be more .hidden-unit elements than .visible-unit elements, which would cause an exception. But this you put you on the right track.
You need to use the index the elements so you update matching instances. This can be done using each or html(function)
$('.visible-unit').html(function(index){
return $('.hidden-unit').eq(index).html();
});
Since you mention that the content is loaded by script originally, you may need to allow time for any asynchronous loading (if any) in the scripts
DEMO
Rather than trying to match indices and having to maintain two lists of divs, you can clone the hidden divs and add them to a container, or insert them before or after another element if you really don't want a container element.
$(".hidden-unit").clone()
.removeClass("hidden-unit")
.removeAttr("style")
.addClass("available-unit")
.appendTo(".container");
Working fiddle here: https://jsfiddle.net/ygn34zL8/
I'm trying to produce a lightbox when a user clicks a link. I'm using this light box code here. I'm working with this jsbin.
I have this code here:
<button ng-click="add_overlay()">Button</button>
<div class="lightbox" ng-lightbox='{"trigger": "manual"}' id="lightbox">
<h1>This is some content</h1>
</div>
I thought by adding in the ng-click to call the overlay it would display it on click but it doesn't seem to work. I'm never to angular so any help in general would be appreciated. How can I produce the lightbox on click?
First, add_overlay() isn't accessible to you outside of the ngLightbox directive, so Angular has no idea what that method is in the context of your ng-click.
You're also using two versions of the Angular source, 1.2.1 and 1.0.7.
If you look at the angular-lightbox source, you'll see an override-able defaults object, such that you can provide the element you wish the lightbox be applied to:
var defaults = {
'class_name': false,
'trigger': 'manual',
'element': element[0],
'kind': 'normal'
}
So, set up your button like this, specifying the intended element:
<button ng-lightbox='{"trigger": "manual", "element": "lightbox"}'>Button</button>
Here's a working demo.
There's this website http://www.phpvideotutorials.com/ I basically wanted to get some insights on how each right and left columns expands dynamically when these respective columns are clicked and contracts from expanded state when clicked again.
I'm new to web development, at least dynamic website development using jQuery and stuff.
You can check out the source code. The (simplified) operative part is here:
var dm = $('#developermonkey');
dm.bind('click', function(e) {
dm.animate({'right' : 400 });
});
So it's binding a click event to a function, which animates the element's right CSS property.
It's done with a javascript library called jQuery http://jquery.com you can read more about it there and see examples of how it works.
This can be found from view source. Please refer this code,
HTML
<div id="left">text
<a id="lefta">click</a>
</div>
JavaScript
$('#lefta').bind('click', function(e) {
$('#left').css({'width' : 200 });
$('#left').animate({'left' : 150 }, 400);
});
Here in example I am increasing width of div also so as to explain you how jQuery css function works so that you can use to set additional css style while moving your div. Please refer following fiddle.
http://jsfiddle.net/TqCmB/