We Keep Coding

Copy hidden text in div or button element to clipboard with click function

I have spent a couple of days looking at examples of this. I believe I am either missing something or simply misusing it. I created my own version with slight modifications but it isn't working for me. I believe it is Javascript not jQuery but I do have other functions in the site with jQuery so I kept this in the header.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Below this, I have the following script. I have seen a lot of examples using input containers but I need a simple click function to copy text that is not visible but in the element as a value. I want to be able to let the user click a "SPAN12" button and the elements needed to create a span12 for layout should copy to the clipboard. Then the user can paste the div element with a span12 class into the textarea. I guess another option is to let the code add it directly to the textarea with a click of the button labeled span12 but if not, then at least copying to clipboard is a great start. I just don't want to have the text show and I don't want it to be in the input to copy from, just a button. I have seen lots of examples with the 2 just mentioned but none in the way I am picturing.
<script type="text/javascript">
$(document).ready(function(){
$("#toCopy").on('click', function(){
document.getElementById("toCopy").addEventListener("copy", myFunction);
});
});
function myFunction() {
document.getElementById("copied").innerHTML = "You copied text!"
}
</script>
The element I am trying to manipulate is as follows.
<button type="text" id="toCopy" onclick="myFunction()" value="<div class='span12'></div>">Span 12</button>
<p id="copied"></p>

Checking to see if element is visible

I have a list of apps that are listed on a non angular page. The list of apps that are available depends on what subscription level was paid for. If the subscription level does not have an app purchased the app is still listed however there is an overlay over the app. (please see picture).
The html looks like this:
<div class="apps-item apps-no-border disabled">
<div class="apps-name">
<span>Interactive Event Diagrams</span>
</div>
<div class="divider">
<div class="apps-description">Interactive Event Diagrams is an indispensable online tool, allowing website visitors to view your meeting rooms and create their own customized event layouts according to their specific needs, all while using your venue’s available inventory. Users
can email and save diagrams or images for future reference.</div>
<div class="apps-image-preview">
<img alt="Interactive Event Diagrams" src="/Content/Images/AppsPreview/interactive_event_diagrams.png">
</div>
<div class="apps-action">Not Purchased</div>
<div class="overlay"></div>
</div>
</div>
Now if an app is purchased the overlay element is shaded gray in the html and is not view-able on screen. (Ex. no grey shading over Hotel Venue Explorer) I want to be able to check and see if the overlay is seen or not seen.
I've tried this:
elm = element.all(by.css('div.apps-item')).get(5);
expect(elm.$('div.overlay').isDisplayed()).toBeTruthy();
However the expect is returning false.
Other apps html, notice the grey over the overlay class

If your div.overlay is always present in the DOM, then its hard to check if its displayed because it will always be there in the DOM and your css and javascript might be handling the display property(like add overlay if its needed or don't add when its not needed). Also checking isDisplayed function for an empty html element doesn't work as far as i know.
In order to verify it you can check for css attributes that are responsible for the greying out functionality. Here's how -
elm = element.all(by.css('div.apps-item')).get(5);
//Use your css attribute that greys the apps-item div like height, width, color, etc...
expect(elm.$('div.overlay').getCssValue('background-color')).toEqual('grey');
expect(elm.$('div.overlay').getCssValue('width')).not.toBeNull(); //If you know the width then you can check for equality or greaterThan(someVal).
expect(elm.$('div.overlay').getCssValue('height')).not.toBeNull();
Hope it helps.

adding sharing buttons (like "addtoany") to a single image in lightbox plugin

I have developed my own theme in wordpress using bootstrap.
I am using lightbox for image gallery and I am both trying to add sharing buttons on a single image opened in pop up,both trying to excercise a bit in using Jquery.
The single image in lightbox of course comes without the option of sharing buttons for social network.
the div that contains the image is an element to consider, and then there is the code of the snippet. i tried to do this...
$sharingButtons = $("</div>");
$sharingButtons.css({top: 100, left: 20, 'absolute'});
$sharingButtons.addClass("");
$sharingButtons.appendTo( '.lb-outerContainer' );
$('lb-outerContainer').append("<div class='addtoany_share_save_container addtoany_content_bottom'><div style='line-height: 32px;' class='a2a_kit a2a_kit_size_32 addtoany_list a2a_target' id=''> )etc... (here all the snippet code of addtoany)...
</div></div>");
$('img.lb-outerContainer').css("opacity", "0.8");
the element $sharingbuttons is the div that contains the snippet...
it does not work., anyone has better ideas?
I use last version of Jquery.
thanks
Paolo
p.s. do i have to use
"Insert After" to add a div beside the lb-outer container_?
you can view my website here
http://www.paolobergomi.it/new-gallery/indoor-portraits/
if yo uclick on an image, i wish that on the right, in vertical layout..just attached to the image, appear the list of the sharing buttons
i guess insertAfter could be an option? thanks to EO
added:
I would start like this?
$("
and then add the snippet code of addtoany in the new div?
any tips? thanks
paolo

After you append your a2a div code, you need to execute the function a2a.init('page') because the addtoany script need to add your new code. First of all, insert a class a2a_target, an ID for the div and create a javascript code like above:
$('lb-outerContainer').append("<div class='addtoany_share_save_container addtoany_content_bottom'><div style='line-height: 32px;' class='a2a_kit a2a_kit_size_32 addtoany_list a2a_target' id='myShareLinks'> )etc... (here all the snippet code of addtoany)...
a2a_config.target = '#myShareLinks';
a2a.init('page');
Note: a2a_config and a2a are global variables created by addtoany script.

Show/Hide On Click

I have one area of space and two body's of text to show. I have two "hyperlinks" above this area and would like to use those to show/hide the text below. Upon first loading the page, nothing will be showing except for the two links. When you click one link it shows the body of text. When you click the other link it will hide the previous body of text and show the new text. There are only two hyperlinks, but I would like for the user to be able to toggle back and forth at their convenience. Is this possible? Previously I was using javascript to unhide the text because they were in two different areas. I am not too experienced with writing code. I have found some other answers on this topic useful but most of them use buttons and on click listeners. Is there a way to do this using a hyperlink? Code examples are very much appreciated!

You could define a class in CSS that says "Don't show the text in here" then use JS from the hyperlink click to switch the class of the element?
so your html will contain:
<a onclick="showText('text1','text2')" href="javascript:void(0);">Show Text 1</a>
<div id="text1" class="hide"> text1 </div>
<a onclick="showText('text2','text1')" href="javascript:void(0);">Show Text 2</a>
<div id="text2" class="hide"> text2 </div>
Your CSS would contain:
div.hide { display:none; [your properties]; }
div.show { [your properties]; }
and the your JS would look something like this:
function showText(show,hide)
{
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
Does this help at all?

<a id="myLink" href="javascript:void(0)" onclick="javascript:myLinkButtonClick();"> </a>
in javascript you can do this if you use jQuery:
function myLinkButtonClick()
{
$("#myDiv").hide();
}
or
function myLinkButtonClick()
{
$("#myDiv").show();
}
Alternatively you can do .toggle
function myLinkButtonClick()
{
$("#myDiv").toggle();
}

Many will agree that using anchor tags to execute Javascript (and do nothing else) is a little on the messy side, since, among other things, it generates a hash tag in the address bar which can confuse users. That isn't to say that they don't have their place in JS execution.
It is very possible to achieve this however. Here is one possible solution:
Link1
Link2
<div id="div1">Text1</div>
<div id="div2" style="display:none;">Text2</div>
<script>
var currentDiv = document.getElementById("div1");
function show(divID) {
var div = document.getElementById(divID);
currentDiv.style.display = "none";
div.style.display = "block";
currentDiv = div;
}
</script>
The script tag defines a variable and a function: currentDiv, which references the currently displayed div element and a show function, which is used for hiding the currently displayed div and showing a new one.
The anchor tags at the top, when clicked, call the show function, replacing the currently shown element with the one the anchor tag specifies.
In order to get elements to show/hide, the code changes the element's CSS display attribute. A value of block shows the div element, and a value of none hides it. The second div has its display property set to none when the page loads. Javascript will change this attribute when a link is clicked.
No, you do not need JQuery to do this, but it can help.

There's a nice jQuery script that does something along these lines, have a look to see if it's any good for you:
http://api.jquery.com/slideToggle/

This is possible, but a more user friendly way of doing this would be with something like jquery tabs. It's very easy to do it with jquery UI's tab feature, it's all HTML markup with a script that just runs .tabs(); as the function on the ID of the tab element.
Here is a link: Jquery Tabs

Tabs would be the best way to do this. There's plenty of tutorials around for jQuery tabs - here's a fairly basic one which outlines the concepts pretty well, and here's a more advanced one (which goes into using CSS to generate rounded corners on tabs).

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.