We Keep Coding

Unable to update Materialize.css tooltips using jQuery after click event

I am using Materialize.css on my portfolio site, and am using the npm package clipboard.js. I am using this within a floating action button, and the copy to clipboard functionality is working as intended (when user clicks the button, it copies my email to their clipboard like it should).
However, I want the tooltip to update from ""Click to copy my email to your clipboard!" to a success message like "Copied to your clipboard ✅". I have tried the code below and it won't actually update the page, though I can sometimes see the new message (it's just very inconsistent, which I don't want).
This is my html element:
<li>
<a id="email" data-clipboard-text="example#gmail.com" class="btn-floating red waves-effect waves-light tooltipped" data-position="left" data-tooltip="Click to copy my email to your clipboard!"><i class="material-icons">mail</i></a>
</li>
and here's my javascript:
var clipboard = new ClipboardJS('#email');
clipboard.on('success', function(e) {
var anchorElement = $('#email');
anchorElement.attr('data-tooltip', 'Copied to your clipboard ✅');
anchorElement.addClass('success');
anchorElement.tooltip();
// Reset after a timeout
anchorElement.mouseleave(function() {
setTimeout( function(){
anchorElement.attr('data-tooltip', 'Click to copy my email address to your clipboard!');
anchorElement.removeClass('success');
anchorElement.tooltip();
}, 300);
});
e.clearSelection();
});
I would like for the tooltip to show the updated value consistently, but I haven't been able to figure out what's wrong with the code I have. I can tell that it does update the html element, as I can sometimes see the updated text, but it's very inconsistent and for this feature to be worth using at all I need it to be very consistent.
Any help would be greatly appreciated!

The problem you're running into is that materialize.css adds in other DOM elements that eventually appear on screen as the tooltips themselves - elements that you aren't targeting right now - elements that you didn't write in your HTML. You're targeting the original data-attributes that materialize.css uses to create those other elements. Updating those data-attributes after render is too little too late... by then, the materialize.css library has already looked at those attributes and gotten what it needs.
If you look at the official docs page on tooltips, we can investigate a little on that page. Open your dev console and scroll towards the bottom you'll see four DOM elements with the class material-tooltip - these were added by the library, and these are the DOM elements that actually get shown on screen.
Open those divs up and watch what happens to them when you mouse over the Bottom, Top, Left, Right buttons on the screen. As each tooltip appears, you should notice that the message-to-be-displayed gets injected as text into that element, and it animates some CSS properties.
If you want to change the text being displayed, you can probably skip editing the data-attributes (though if the library occasionally refreshes the content, changing the attributes might still be a good idea)... instead, we need to edit the text being shown in ^^THESE^^ elements.
If you only have one tooltip being displayed on that page, it should be as simple as something like this:
$('.material-tooltip').innerText = 'Copied to your clipboard ✅'
or if you have multiple on that page, you can attempt to identify which div is for which tooltip, but I suspect that could end up being unreliable. It would probably be safer to update ALL of the divs... the library will overwrite the content anyways next time it renders... which again, it gets from your data-attributes. Updating all of them would look something like:
$('.material-tooltip').each( eachDiv => {
eachDiv.innerText = 'Copied to your clipboard ✅'
})

here's only solution I found that works for me .. disclaimer - it's a bit hacky, basically it destroys tooltip on click and rebuilds it with new attr, then after a timeOut resets it back.
$('#shareLink').on('click', function (e) {
$('#shareLink').tooltip('dispose').removeClass('material-tooltip').attr('title', 'Link copied!');
$('#shareLink').addClass('material-tooltip').tooltip('show');
setTimeout( function () {
$('#shareLink').tooltip('dispose').removeClass('material-tooltip').attr('title', 'Copy link to Clipboard');
$('#shareLink').addClass('material-tooltip').tooltip('enable');
}, 2000);
});

Zeroclipboard, triggered by any element with class="copy"

I've looked through this site along with many others and I can't see the answer anywhere.
I currently have a site with multiple buttons and a preview pane. The text shown in the preview pane differs depending on the button that the user is currently hovering over.
<body>
<div="preview_pane"> <!--ALL TEXT IS SHOWN HERE --> </div>
<div id="button_group">
<div class="copy_me" id="stock1"></div> <!--THIS SHOWS STOCK TEXT-->
<div class="copy_me" id="stock2"></div> <!--COMPLETELY DIFFERENT TEXT-->
<div class="copy_me" id="stock3"></div> <!--YET SOME OTHER DIFFERENT TEXT-->
<div class="copy_me" id="stock4"></div> <!--OTHER COMPLETELY DIFFERENT TEXT-->
</div>
</body>
What I want to do is have zeroclipboard create the flash overlay on any button with the class copy_me. All of these buttons need to copy the text shown in the preview pane.
This way when the user hovers over the button the text in the preview pane will change and then when they click, the text in the preview pane will be copied to the users clipboard.
I can't manually add the script to every button as there will be over 50 stock text buttons.
I have no experience in flash or javascript (only dabbled in jQuery) so this is something completely new for me.
Any help will be greatly appreciated.

answered a similar question at https://stackoverflow.com/a/26200988/3471658
Try using http://www.steamdev.com/zclip/ it allows you direct access to jquery and you can use your own logic in the return statement.
include jquery.zclip.js
download and save ZeroClipboard.swf
Here is a snippet:
$(".class-to-copy").zclip({
path: "assets/js/ZeroClipboard.swf",
copy: function(){
return $(this).attr("data-attribute-with-text-to-copy");
}
});
Make sure you change the path of the swf.

I looked at the api docs for zeroclipboard right quick, and I you want to use the glue method, and pass an array of dom nodes. In this case, you want all the nodes with the class name "copy_me", so:
var clip = new ZeroClipboard();
clip.glue(document.getElementsByClassName('copy_me'));

You mentioned jQuery. This should make things easier for you:
var client = new ZeroClipboard($('.copy_me'));
See:
https://github.com/zeroclipboard/zeroclipboard/blob/master/docs/instructions.md
Also see:
http://jsfiddle.net/rimian/45Nnv/

enabling/disabling javascript for alternate style sheets

I have two style sheets for the page I'm working on. When the alternate style sheet is selected i need to run an extra function to get the effect I desire. So my question is, how can I write the javascript to only execute this block of code when the alternate style sheet is active?
The css is switched via two buttons and styleswitcher.js like so:
<ul class="viewbuttons">
<li><a class="threedview" href="#" onclick="setActiveStyleSheet('default'); return false;">3D View</a></li>
<li><a class="twodview" href="#" onclick="setActiveStyleSheet('alternate'); return false;">2D View</a></li>
</ul>
and as far as the javascript goes, i've taken the alternate style sheet specific code (twodview) and placed it within a click function to be activated when the style sheet is switched
$("a.twodview").click(function(){
all my terrible noob code
});
so this obviously works for the first time it is switched to the 2dview, but upon switching back the code remains. What I am currently looking for is how to set a function along these lines:
$("a.threedview").click(function(){
remove all my terrible noob code activated by the twodview
});
the first option I explored was trying to define the active stylesheet as a variable in a while loop, but much to my astonishment the in the head don't really change using styleswitcher.js so I don't understand how it is switching the css (magic i presume)
This brings me back to trying to use .click() events as seen above, any suggestions?
Thanks all.
update:
$("a.twodview").click( function() {
$('img.small01').off('mouseenter');
$('div#makeMeScrollable01').off('mouseleave')
$('img.small02').off('mouseenter');
$('div#makeMeScrollable02').off('mouseleave')
$('img.small03').off('mouseenter');
$('div#makeMeScrollable03').off('mouseleave')
});
$("a.threedview").click( function() {
$('img.small01').on('mouseenter');
$('div#makeMeScrollable01').on('mouseleave')
$('img.small02').on('mouseenter');
$('div#makeMeScrollable02').on('mouseleave')
$('img.small03').on('mouseenter');
$('div#makeMeScrollable03').on('mouseleave')
$('div#booma').off('click');
});
$("a.twodview").click( function() {
$('div#booma').click( function() {
setTimeout(function(){$("div#makeMeScrollable01").addClass("currentslide");},2100);
setTimeout(function(){$("div#makeMeScrollable01").appendTo("body");},2100);
$("div#makeMeScrollable01").smoothDivScroll("enable");
setTimeout(function(){$("div#makeMeScrollable01").smoothDivScroll();},2100);
setTimeout(function(){$("img.small01").hide();},2100);
});
});
So i've figured out how to kind of toggle the hover/click functionality between the 3D view and the 2D view, the problem is that the .on() portion that should rebind hoverIntent() when switched back to the 3D view doesn't work.
Maybe the problem is in hoverIntent()? separating the .off() into mouseenter and mouseleave works fine though so I'm not sure that is the case.
I feel as if my .on() is the right method but not implemented correctly, any suggestions?

using jQuery to add a class of active to navigation items when the corresponding page div is visible?

So I'm very much a jQuery noob and I don't know whether the following is possible - at least as I'm thinking of it - or how to do it.
The current setup
http://joelglovier.com
So I have a one page mini-site with a fixed navigation at the top of the screen. All (but one) of the navigation elements simply scroll the user down to the corresponding div down the page. I have that all set up just fine.
What I want to do...
I want to use jQuery to add a class of "active" to the list item anchors when they are positioned over their respective div on the page. Preferably it would not use the click function, so that even users who simply scroll down the page without clicking on the nav elements to get their would experience the same thing. Similar to the phpfog home page.
I peeked at the way phpfog.com has it setup and from what I could see it's using some type of calculation with the window selector to apply the class, but A) I don't completely understand what it's doing or how to build something similar, and B) I don't know if they are doing it in the most straightforward manner.
I wrote out what I want to accomplish in a plain english statement, since I don't have a mastery on jQuery enough yet to write it out in a syntax:
If .section-link is in the window on the
href value of same id, add class of
"active"
So here's the code I have (HTML only, the CSS is irrelevant bc I already know how I want to style it, just want to add the active class at the appropriate place):
<div id="site-nav">
<div class="wrap">
<ul id="nav-links">
<li class="section-title-nav top">
<h4>Home</h4>
</li>
<li class="section-title-nav skills">
<h4>Background</h4>
</li>
<li class="section-title-nav projects">
<h4>Projects</h4>
</li>
<li class="section-title-nav blog">
<h4>Blog</h4>
</li>
<li class="section-title-nav random">
<h4>Random</h4>
</li>
<li class="section-title-nav credits">
<h4>Credits</h4>
</li>
</ul>
</div>
</div>
And further down the page, sections that are linked to in the nav are marked up about like this:
<div id="random-section" class="main-section wrap clearfix">
<h2 class="section-title"><span class="bg">Random</span></h2>
<span class="section-title-border"></span>
<h2 class="coming-soon">COMING SOON</h2>
</div><!--/#random-section-->
So, and tips on how to accomplish this, or whether I'm thinking about it the wrong way is what I'm looking for. Thanks!

Here's a working example I put together; I will be the first to admit it can be improved but it might give you a decent starting point to work from.
http://jsfiddle.net/nogoodatcoding/KMwhZ/1/
The basic idea is to listen for scroll events on the window and then, for each navigation link, extract the href value and check if the corresponding element is visible or not. If it is, then it's link is selected and the previously highlighted element is deselected. I'm breaking early when the first visible section is found, you can get slightly different behaviour by going all the way through the list.
My example breaks when the divs are small enough in height that multiple divs are visible when the page is scrolled all the way to the bottom - in the case, the links for the lowest few divs will never get hightlighted. But that appears to be the case even with the phpfog page you linked to - the links for Testimonials and Free Tools never get activated because my display is tall enough to show the last 3 sections when scrolled all the way down. Note that this won't be the case if don't break early - there, the last visible section will be highlighted. But you can then see the opposite problem - the top section's link is never activated since something else is always visible.

<script type="text/javascript">
jQuery(document).ready(function($) {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$("#navbar li a").each(function() {//alert('dsfgsdgfd');
if(urlRegExp.test(this.href.replace(/\/$/,''))){
$(this).addClass("active");}
});`enter code here`
});
</script>

Facebook FBML Questions

I have a client looking to create a Facebook page very similar to http://www.facebook.com/enchantment
Inside the "Enchantment" page, you can see that there is a list of sub-tabs, "Enchantment, Blurbs, Excerpts, Order". I'm looking to create the same style, but I can't seem to figure out how. I've looked through the code and it appears they're using the "FBML Static" application for the main tab, and there's a ton of javascript to show and hide the tabs that I highly doubt was all written by hand.
Does anybody have any experience with this? Thanks in advance.

You will have to create a Facebook application via the My Applications link in the developers page. After you have filled in all the of the fields your app page should be up and running.
Now you need to begin developing the actual app on your website (you will have to specify the link in your application settings). Go through the Developer documentation, as they have quite a good documentation.
So, in order to actually create those tabs, its actually very simple, all you have to do is utilize FBMls clicktoshow and clicktohide attributes. Essentially all you need is the following code:
Link 1
Link 2
Link 3
<div id="nav1">
//content for first tab
</div>
<div id="nav2">
//content for second tab
</div>
<div id="nav3">
//content for third tab
</div>
When Facebook 'imports' this (only via FMBL, I'm unsure if this works with iframe) it conveniently does all the work and converts the above links to something like:
<a href="#" clicktoshow="nav1" clicktohide="nav2, nav3" class="test"
onclick="(new Image()).src = '/ajax/ct.php?app_id=7146470109&action_type=3&post_form_id=fd583a515fe76b1d3d300e974aba931d&position=16&' + Math.random();FBML.clickToHide("app7146470109_nav2");
FBML.clickToHide("app7146470109_nav3");
FBML.clickToHide("app7146470109_nav4");FBML.clickToHide("app7146470109_nav5");FBML.clickToHide("app7146470109_nav6");
FBML.clickToHide("app7146470109_nav7");FBML.clickToHide("app7146470109_nav8");FBML.clickToShow("app7146470109_nav1");return false;">Test</a>
But, you only have to worry about the first part, as Facebook takes care of the second. As you can see it is a fairly straightforward process.

They're probably just capturing the click event, and simply showing and hiding different divs based on that. You can create a static FBML tab, and do something like this inside of it:
<ul>
<li><a id="afoo" href="#foo" onclick="gotoFoo(this); return false;">Foo</a></li>
<li><a id="abar" href="#bar" onclick="gotoBar(this); return false;">Bar</a></li>
</ul>
<div id="foo">
This is content of the foo tab
</div>
<div id="bar" style="display:none;">
This is content of the bar tab
</div>
<script>
var foo = document.getElementById('foo');
var bar = document.getElementById('bar');
var afoo = document.getElementById('afoo');
var abar = document.getElementById('abar');
var gotoFoo = function(target) {
abar.removeClassName('selected');
bar.setStyle({display: 'none'});
afoo.addClassName('selected');
foo.setStyle({display: 'block'});
};
var gotoBar= function (target) {
afoo.removeClassName('selected');
foo.setStyle({display: 'none'});
abar.addClassName('selected');
bar.setStyle({display: 'block'});
};
</script>
I haven't created any styles for you, but what the code above does is it hides and shows the "foo" and "bar" divs depending on what you click on. It also adds the class name "selected" to the anchor tag that was clicked on so that you can set some styles to give a visual cue as to which tab is currently active. You'll definitely want to add some styles to pretty this up.
I hope this helps.

You cannot see directly the code since the code written in FBML gets parsed by Facebook before it's delivered to the browser and transformed into HTML; that's why you see a lot of JavaScript.
Actually it doesn't look so complex so I believe it was actually written by hand with JavaScript.