Hey am a new web developer and I am writing a html, css and javascript. I have created a "copy" button to copy the text inside the <p> element and a alert that the text is copied.
buttons.forEach((copystatus) => {
copystatus.addEventListener('click', (e) => {
const copylatest = e.target.closest(".latestatus").querySelector("p").innerText;
const copyText = document.createElement('textarea');
copyText.style.width = "0";
copyText.style.height = "0";
copyText.style.outline = "none";
copyText.style.border = "none";
copyText.value = copylatest;
document.body.appendChild(copyText);
copyText.select();
document.execCommand('copy');
document.body.removeChild(copyText);
copyalert.style.visibility = "visible"
e.target.closest(".latestatus").querySelector("p").appendChild(copyalert);
setTimeout(function() {
copyalert.style.visibility = "hidden"
}, 700);
})
})
.randomStatusCopyAlert {
position: relative;
background-color: #18b495;
color: #ffffff;
padding: 10px 10px;
border-radius: 5px;
z-index: 2;
visibility: hidden;
height: 45px;
float: right;
bottom: 2px;
left: 4%;
}
.randomStatusCopyAlert:before {
content: "";
position: absolute;
height: 10px;
width: 10px;
background-color: #18b495;
left: -5px;
z-index: 1;
transform: rotate(45deg);
top: 39%;
}
<div class="mainStatus">
<h2 class="statusHeading">Latest English Status</h2>
<div class="allStatus">
<div class="block">
<div class="latestatus">
<p>Life is good when you have books</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert show">Copied!</span></div>
</div>
<div class="latestatus">
<p>Google is a open source library by Larry Page and Sergey Brin!</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
</div>
<div class="block">
<div class="latestatus">
<p>Cats are better than dogs.</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
<div class="latestatus">
<p>Ferrets are better than rats</p>
<div class="flex"><button class="copystatus btn">Copy</button> <span class="randomStatusCopyAlert">Copied!</span></div>
</div>
</div>
</div>
</div>
My main intention is to make visible the respective <span class="randomStatusCopyAlert">Copied!</span> when respective <button class="copystatus btn">Copy</button> is clicked. Although the code is working correctly but the javascript creats itself span and display it.
See I will share some pics so that if I make ". randomStatusCopyAlert" myself visible.
[![See Now the the span is place correctly][1]][1]
Now the span is placed correctly.
When it is done by the above javascript
[![the span change its position and goes into elements when I used html code inspection tool][2]][2]
The span position is changed.
[1]: https://i.stack.imgur.com/aNevS.png
[2]: https://i.stack.imgur.com/b0az4.png
I tried to replicate your code into a simpler structure just for demonstration purpose
Here is the HTML
<div class="statuses-container">
<h2 class="statuses-heading">Latest English Status</h2>
<div class="statuses">
<div class="status">
<p class="status-text">Life is good when you have books</p>
<div class="status-copy-btn-container">
<button class="status-copy-btn btn">Copy</button>
</div>
</div>
<div class="status">
<p class="status-text">Google is an open source library by Larry Page and Sergey Brin!</p>
<div class="status-copy-btn-container">
<button class="status-copy-btn btn">Copy</button>
</div>
</div>
<div class="status">
<p class="status-text">Cats are better than dogs.</p>
<div class="status-copy-btn-container">
<button class="status-copy-btn btn">Copy</button>
</div>
</div>
</div>
</div>
Feel free to change the class names as you wish, I've changed them because I find it easier to read like this. Some of the divs were removed, because I think they were not really necessary in achieving this result.
Please notice that I've removed the span which indicated that the text was copied to clipboard. It is not necessary, because maybe at some point you will decide to change the message, and you will have to change it everywhere. Now, that label saying that the text was copied will be inserted using JS.
Here is the CSS:
status-copy-alert {
position: relative;
background-color: #18b495;
color: #ffffff;
padding: 10px 10px;
border-radius: 5px;
left: 8px;
}
.status-copy-alert:before{
content:"";
position: absolute;
height: 10px;
width: 10px;
background-color: #18b495;
left: -5px;
transform: rotate(45deg);
top: 39%;
}
Some of the properties here were removed as well, because they were not necessary. Since we are adding the span dynamically using the JS, there is no need for the span to be hidden in the beginning.
Here is the JS:
var buttons = document.getElementsByClassName('status-copy-btn');
for (let button of buttons) {
button.addEventListener('click', function() {
let statusElement = this.closest('.status');
let textToCopy = statusElement.getElementsByClassName('status-text')[0].innerHTML;
copyTextToClipboard(textToCopy);
addCopyStatusAlert(this.parentNode);
});
}
function copyTextToClipboard(text) {
const copyText = document.createElement('textarea');
copyText.style.position="absolute";
copyText.style.display="none";
copyText.value = text;
document.body.appendChild(copyText);
copyText.select();
document.execCommand('copy');
document.body.removeChild(copyText);
}
function addCopyStatusAlert(element) {
if (!element.getElementsByClassName('status-copy-alert').length) {
let copyAlertElement = document.createElement('span');
copyAlertElement.classList.add('status-copy-alert')
let copyMessage = document.createTextNode('Copied!');
copyAlertElement.appendChild(copyMessage);
element.appendChild(copyAlertElement);
setTimeout(function() {
element.removeChild(copyAlertElement);
}, 700);
}
}
I've taken all of the buttons and added a click listener on them. When it gets clicked, we take the entire status element and get the p element inside it. We pass the text of the p element to copyTextToClipboard function. Here is only the logic needed for copying the text to clipboard and nothing else.
The addCopyStatusAlert function is used just to append a newly created span as a sibling to the button. And after a short timeout, it gets completely deleted from the DOM.
Here is the link to the pen i've created on CodePen for this. Feel free to experiment with it there.
Related
The intension is to have a two column accordion, without limiting the "expand" field to the left or right column. The catch is that there will be multiple on one page. This is already created, but only button 1 is working. With the way my JS is going, it will get very very repetitive - I am looking for assistance with re-writing the JS to be multiple click friendly. Fiddle: https://codepen.io/ttattini/pen/abLzaaY
EDIT: It would also be perfect if one dropdown would close as the next is opened
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="row">
<div id="column">
<button id="button">I am Button #1</button>
<button id="button">I am Button #3</button>
</div>
<div id="column">
<button id="button">I am Button #2</button>
<button id="button">I am Button #4</button>
</div>
</div>
<div id="hidden">
<p id="content"> So here I am #1</p>
</div>
<div id="hidden">
<p id="content"> So here I am #2</p>
</div>
<div id="hidden">
<p id="content"> So here I am #3</p>
</div>
<div id="hidden">
<p id="content"> So here I am #4</p>
</div>
CSS
#hidden {
background: #ccc;
margin-top: 2%;
overflow: hidden;
transition: height 200ms;
height: 0; /* <-- set this */
}
#button {
padding: 10px;
margin-top: 5px;
width:50%;
margin-left: 10%;
cursor: pointer;
}
#row {
display: flex;
}
#column {
flex: 50%;
}
JS
$(function() {
var b = $("#button");
var w = $("#hidden");
var l = $("#content");
b.click(function() {
if (w.hasClass('open')) {
w.removeClass('open');
w.height(0);
} else {
w.addClass('open');
w.height(l.outerHeight(true));
}
});
});
The biggest issue is that you're using IDs when you should be using classes. IDs must be unique to each element in a page. When you repeat an ID, JS will only target the first element using that ID. That's why only the first one is working.
The second issue is that, because of the way the script is written, it will only target a single element. What you need to do is get all the elements you want to target by something like their class name and then loop through them, applying the event listener to each one and its appropriate children.
EDIT: Here is an example from some code I wrote for a page with multiple accordions a few weeks ago in vanilla JS
//Below I establish a counting variable and find all the accordions on the page
const acc = document.getElementsByClassName( 'accordion' );
let i;
//Looping through each accordion
for ( i = 1; i <= acc.length; i++ ) {
//Identify target for the event listener. In this case, a heading for each accordion, which I've numbered e.g. "title-1"
const title = 'title-' + i;
const label = document.getElementById( title );
//Identify target content, in this case a list that has a unique ID e.g. "list-1"
const listNum = 'list-' + i;
const list = document.getElementById( listNum );
//Add event listener to heading that toggles the active classes
label.addEventListener( 'click', function() {
label.classList.toggle( 'accordion--active' );
});
}
Of course, there's more than one way to skin a cat, but this is a working example.
I have tracked the clicked event of each button and showed the corresponding hidden content with the use of data- attribute.
I have used vanilla JavaScipt instead of jQuery.
const buttons = document.querySelectorAll('.button');
const hiddens = document.querySelectorAll('.hidden');
buttons.forEach((btn) => {
btn.addEventListener('click', btnClicked)
function btnClicked(e) {
hiddens.forEach((hidden) => {
if(e.target.dataset.btn == hidden.dataset.content) {
hidden.classList.toggle('height')
} else {
hidden.classList.remove('height')
}
})
}
})
.hidden {
background: #ccc;
margin-top: 2%;
padding-left:2%;
overflow: hidden;
transition: height 200ms;
height: 0; /* <-- set this */
}
.hidden.height {
height: 50px;
}
.button {
padding: 10px;
color: white;
background-color: #2da6b5;
border: none;
margin-top: 5px;
width:90%;
margin-left: 5%;
cursor: pointer;
}
.button:hover {
filter: brightness(.9);
}
#row {
display: flex;
}
.column {
flex: 50%;
}
<div id="row">
<div class="column">
<button class="button" data-btn="one">I am Button #1</button>
<button class="button" data-btn="three">I am Button #3</button>
</div>
<div class="column">
<button class="button" data-btn="two">I am Button #2</button>
<button class="button" data-btn="four">I am Button #4</button>
</div>
</div>
<div class="hidden" data-content="one">
<p class="content"> So here I am #1</p>
</div>
<div class="hidden" data-content="two">
<p class="content"> So here I am #2</p>
</div>
<div class="hidden" data-content="three">
<p class="content"> So here I am #3</p>
</div>
<div class="hidden" data-content="four">
<p class="content"> So here I am #4</p>
</div>
Also, please do not use the same ID at multiple elements.
Hey am a new developer and am trying to build a website. The main goal of website is to provide a piece of text to the visitors. Some of my helpers gave me a javascript to copy the text inside a <p></p> element and it gives a custom alert that the text is copied. But I needed a animation/transition that when I click the copy button the custom copy alert should come from left to right.
var buttons = document.getElementsByClassName('copystatus');
for (let button of buttons) {
button.addEventListener('click', function() {
let statusElement = this.closest('.latestatus');
let textToCopy = statusElement.getElementsByClassName('copytxt')[0].innerHTML;
copyTextToClipboard(textToCopy);
addCopyStatusAlert(this.parentNode);
});
}
function copyTextToClipboard(text) {
const copyText = document.createElement('textarea');
copyText.style.position="absolute";
copyText.style.display="none";
copyText.value = text;
document.body.appendChild(copyText);
copyText.select();
document.execCommand('copy');
document.body.removeChild(copyText);
}
function addCopyStatusAlert(element) {
if (!element.getElementsByClassName('status-copy-alert').length) {
let copyAlertElement = document.createElement('span');
copyAlertElement.classList.add('status-copy-alert')
let copyMessage = document.createTextNode('Copied!');
copyAlertElement.appendChild(copyMessage);
element.appendChild(copyAlertElement);
setTimeout(function() {
element.removeChild(copyAlertElement);
}, 700);
}
}
<div class="mainStatus">
<h2 class="statusHeading">Latest English Status</h2>
<div class="allStatus">
<div class="bock">
<div class="latestatus">
<p class="copytxt">Life is good when you have books</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
<div class="latestatus">
<p class="copytxt">Google is an open source library by Larry Page and Sergey Brin!</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
</div>
<div class="block">
<div class="latestatus">
<p class="copytxt">Cats are better than dogs.</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
<div class="latestatus">
<p class="copytxt">Cats are better than dogs.</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
</div>
</div>
</div>
Custom alert is the <span> created by JavaScript.
Than in advance
As suggested by #A Haworth in comments below is the code snippet that uses css transformation.
I've updated timeout from 700 to 800 to make the span stay little longer.
var buttons = document.getElementsByClassName('copystatus');
for (let button of buttons) {
button.addEventListener('click', function() {
let statusElement = this.closest('.latestatus');
let textToCopy = statusElement.getElementsByClassName('copytxt')[0].innerHTML;
copyTextToClipboard(textToCopy);
addCopyStatusAlert(this.parentNode);
});
}
function copyTextToClipboard(text) {
const copyText = document.createElement('textarea');
copyText.style.position = "absolute";
copyText.style.display = "none";
copyText.value = text;
document.body.appendChild(copyText);
copyText.select();
document.execCommand('copy');
document.body.removeChild(copyText);
}
function addCopyStatusAlert(element) {
if (!element.getElementsByClassName('status-copy-alert').length) {
let copyAlertElement = document.createElement('span');
let copyMessage = document.createTextNode('Copied!');
copyAlertElement.appendChild(copyMessage);
element.appendChild(copyAlertElement);
copyAlertElement.classList.add('status-copy-alert', 'slide-in');
setTimeout(function() {
element.removeChild(copyAlertElement);
}, 800);
}
}
.slide-in {
animation: slide-in 0.25s forwards;
-webkit-animation: slide-in 0.25s forwards;
}
#keyframes slide-in {
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slide-in {
100% {
-webkit-transform: translateX(0%);
}
}
.status-copy-alert {
position: absolute;
background-color: #18b495;
color: #ffffff;
padding: 10px 10px;
border-radius: 5px;
left: 65px;
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
.status-copy-alert:before {
content: "";
position: absolute;
height: 10px;
width: 10px;
background-color: #18b495;
left: -5px;
transform: rotate(45deg);
top: 39%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet" />
<div class="mainStatus">
<h2 class="statusHeading">Latest English Status</h2>
<div class="allStatus">
<div class="bock">
<div class="latestatus">
<p class="copytxt">Life is good when you have books</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
<div class="latestatus">
<p class="copytxt">Google is an open source library by Larry Page and Sergey Brin!</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
</div>
<div class="block">
<div class="latestatus">
<p class="copytxt">Cats are better than dogs.</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
<div class="latestatus">
<p class="copytxt">Cats are better than dogs.</p>
<div>
<button class="copystatus btn">Copy</button>
</div>
</div>
</div>
</div>
</div>
I ran into a problem that when I click on the button, it just flips the icon but only makes the invisible fields visible on the second click. Are there any idea how to do it?
(Heres a gif to show my problem: https://ibb.co/cvz7pWC )
Also heres my code :
function moreSoc() {
var moresoc = document.getElementById("moresoc");
var btnText = document.getElementById("mbtn");
if (moresoc.style.display === "none" ) {
moresoc.style.display = "block";
mbtn.innerHTML = "More ▲";
} else {
moresoc.style.display = "none";
mbtn.innerHTML = "More ▼"
}
}
.morebutton {
border: none;
background: #fff;
color: #111;
font-size: 32px;
}
#moresoc {
display: none;
}
<div class="wrapper more">
<button class="morebutton" id="mbtn" onclick="moreSoc()">More ▲</button>
</div>
<section class="social-links" id="moresoc">
<div class="wrapper">
<h2>Others</h2>
<div class="social-link facebook">
<p>Facebook</p>
</div>
<div class="social-link instagram">
<p>Instagram</p>
</div>
<div class="social-link twitter">
<p>Twitter</p>
</div>
<div class="social-link youtube">
<p>Youtube</p>
</div>
</div>
</section>
This could be to do with you not being to read element.style.display as none the first time round. This is because it has not yet been set by JavaScript, but just by css. I suggest changing your if statement to check for not "block".
function moreSoc() {
var moresoc = document.getElementById("moresoc");
var btnText = document.getElementById("mbtn");
if (moresoc.style.display != "block" ) {
moresoc.style.display = "block";
mbtn.innerHTML = "More ▲";
} else {
moresoc.style.display = "none";
mbtn.innerHTML = "More ▼"
}
}
.morebutton {
border: none;
background: #fff;
color: #111;
font-size: 32px;
}
#moresoc {
display: none;
}
<div class="wrapper more">
<button class="morebutton" id="mbtn" onclick="moreSoc()">More ▼</button>
</div>
<section class="social-links" id="moresoc">
<div class="wrapper">
<h2>Others</h2>
<div class="social-link facebook">
<p>Facebook</p>
</div>
<div class="social-link instagram">
<p>Instagram</p>
</div>
<div class="social-link twitter">
<p>Twitter</p>
</div>
<div class="social-link youtube">
<p>Youtube</p>
</div>
</div>
</section>
ElementCSSInlineStyle.style only returns (or sets) inline styles on an element. On your first click there is no inline display property to read so your condition sets it to none. On the second click your condition finds none and sets it to block.
The answer to look for !block solves this immediate problem but it stills ties your styling to your js rather than keeping it in your CSS. This means that if the default display property of your div needs to change in your layout (inline-block, flex, etc) you would need to change it in your js as well as your CSS.
For this reason I would recommend not using inline styles at all but rather rather use Element.classList to manage applied styles from your CSS – in this case just the adding/removing of a .hidden class that sets display to none without having to know what the appropriate visible display default is.
Also, since you are querying the button element in your code anyway, it would be better to apply the click listener from your js as well rather than inline.
function moreSoc() {
const moresoc = document.getElementById("moresoc");
if (moresoc.classList.contains('hidden')) {
moresoc.classList.remove('hidden');
mbtn.innerHTML = "More ▲";
} else {
moresoc.classList.add('hidden');
mbtn.innerHTML = "More ▼"
}
}
const mbtn = document.getElementById("mbtn");
mbtn.addEventListener('click', moreSoc);
.morebutton {
border: none;
background: #fff;
color: #111;
font-size: 32px;
}
#moresoc {
}
.hidden {
display: none;
}
<div class="wrapper more">
<button class="morebutton" id="mbtn">More ▲</button>
</div>
<section class="social-links hidden" id="moresoc">
<div class="wrapper">
<h2>Others</h2>
<div class="social-link facebook">
<p>Facebook</p>
</div>
<div class="social-link instagram">
<p>Instagram</p>
</div>
<div class="social-link twitter">
<p>Twitter</p>
</div>
<div class="social-link youtube">
<p>Youtube</p>
</div>
</div>
</section>
A solution suggested by #musicnothing in an older thread displays a content div below the row of inline divs, this works good when the div.wrapblock is clicked itself.
http://jsfiddle.net/SYJaj/7/
function placeAfter($block) {
$block.after($('#content'));
}
$('.wrapblock').click(function() {
$('#content').css('display','inline-block');
var top = $(this).offset().top;
var $blocks = $(this).nextAll('.wrapblock');
if ($blocks.length == 0) {
placeAfter($(this));
return false;
}
$blocks.each(function(i, j) {
if($(this).offset().top != top) {
placeAfter($(this).prev('.wrapblock'));
return false;
} else if ((i + 1) == $blocks.length) {
placeAfter($(this));
return false;
}
});
});
The issue I'm having.
I need to trigger the same effect, but by adding the click event to a link within the wrapblock itself.
My code is nearly identical.
What I have changed is the click event handle, from $('.wrapblock').click(function() to $('.more').on('click', function() I also needed to add .closest(".wrapblock") for the content div to position itself outside of the wrapblock.
$('.more').on('click', function() {
...
if ($blocks.length == 0) {
placeAfter($(this).closest(".wrapblock"));
return false;
}
Everything can be seen and tested http://jsfiddle.net/7Lt1hnaL/
Would be great if somebody could shed some light on how I can calculate which block it needs to follow with the offset method, thanks in advance.
As you can see in the latest fiddle example, the content div is not displaying below the row of divs.
I also apologise, I wanted to post on the thread in discussion but I only have a minor posting reputation which doesn't let me, thanks.
var $chosen = null;
var $allBlocks = [];
$(function(){
$allBlocks = $('.wrapblock');
})
$(window).on('resize', function() {
if ($chosen != null) {
$('#content').css('display','none');
$('body').append($('#content'));
$chosen.trigger('click');
}
});
$('.more').on('click', function() {
$chosen = $(this);
var position = $chosen.parent('.wrapblock').position();
$('#content').css('display','inline-block');
$allBlocks.filter(function(idx, ele){
return $(ele).position().top == position.top;
})
.last()
.after($('#content'));
});
.wrapblock
{
background: #963a3a;
display: inline-block;
width: 90px;
height: 90px;
color: white;
font-size: 14px;
text-align: left;
padding: 10px;
margin: 10px;
vertical-align:top;
position:relative;
}
#content
{
display:none;
vertical-align:top;
width:100%;
background: #5582c1;
font-size: 12px;
color: white;
padding: 10px;
}
.more {
position:absolute;
bottom:15px;
right:15px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="wrapblock">1
<span class="more" data-ref="1">more</span>
</div>
<div class="wrapblock">2
<span class="more" data-ref="2">more</span>
</div>
<div class="wrapblock">3
<span class="more" data-ref="3">more</span>
</div>
<div class="wrapblock">4
<span class="more" data-ref="4">more</span>
</div>
<div class="wrapblock">5
<span class="more" data-ref="5">more</span>
</div>
<div class="wrapblock">6
<span class="more" data-ref="6">more</span>
</div>
<div class="wrapblock">7
<span class="more" data-ref="7">more</span>
</div>
<div class="wrapblock">8
<span class="more" data-ref="8">more</span>
</div>
<div class="wrapblock">9
<span class="more" data-ref="9">more</span>
</div>
<div id="content">Some Content</div>
Seems to do what you want. Basically, it just filters down the set of all blocks to the row of the block you clicked on using the assumption that they'll all have the same vertical offset (top), then takes the last one, because jQuery will keep them in document order, so that'll be the last one in the layout row.
Oh, and I updated the fiddle http://jsfiddle.net/7Lt1hnaL/1/
SwitchWindow, Frame, Alert, everything I can think of and after lots of searching. Nothing has worked so far.
When I click on an "edit" button, a new window pops up with a text box, special character selection, save and exit buttons. All I want to do is enter text in the box but for some reason webdriver can not find the element.
Here's some HTML. The
textarea name="specHeading"
is what I'm trying to edit.
<script src="/js/componentlist.js" type="text/javascript">
<script src="/js/mrinformation.js" type="text/javascript">
<script src="/js/jquery.resources.js" type="text/javascript">
<script src="/js/validateresources.js" type="text/javascript">
<div class="ckmodal-next" style="top: 9px; left: 1281.5px;"></div>
<div class="ckmodal-prev" style="top: 9px; left: 261.5px;"></div>
<div class="ckmodal-close" style="top: -225px; left: 1239px;"></div>
<div class="ckmodal-background" style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: rgb(51, 51, 51); opacity: 0.8; z-index: 10000000;"></div>
<div class="modal-container" style="opacity: 1; position: fixed; top: -212.5px; left: 321.5px; display: block; z-index: 10000001;">
<form class="form">
<div class="row">
<div class="col24">
<div class="box box-gray">
<h2>
<div class="content">
<fieldset class="full">
<div class="form-field full">
<label>Heading:</label>
<textarea name="specHeading"></textarea>
</div>
<div class="form-field full">
<div class="form-field bottom full">
</fieldset>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
It looks like there's no windows to switch to, and it's not an iframe, nor an alert. Here's what I think is the JavaScript from the modal.
<script src="/js/productheaders.js" type="text/javascript">
;(function($){
var $currentEditHeader = null;
function setupForm(e) {
var $this = $(this),
value = $this.siblings('span').html();
$currentEditHeader = $this.parents('.product-header');
$('#edit-header').ckmodal({
onShow: function(){
$('textarea[name=specHeading]').val(value.replace(/<br\s*[\/]?>/g, '\n')).focus();
}
});
}
function saveHeader(e) {
var $this = $(this),
value = $('textarea[name=specHeading]').last().val();
if ( value == '' ) {
var defaultValue = $currentEditHeader.attr('data-default-value');
$currentEditHeader.children('span').text(defaultValue);
$currentEditHeader.addClass('default');
} else {
$currentEditHeader.children('span').html(value.replace(/<[^>]*>?/g, '').replace(/\n/g, '<br>'));
$currentEditHeader.removeClass('default');
}
The "popup" might be not a separate window/frame/alert, but part of your main page, which is just made visible.
You can treat it as such. Hard to tell with just this excerpt.
You might have to wait for it to be visible if there is some kind of animation involved.
Additionally, there are some issues inserting text in those text fields. The following worked for us in such cases:
Call textFieldElement.clear()
Then call textFieldElement.sendKeys()