Develop Reference

How to trigger javascript pop-up box by if-condition within the HTML code?

I created an html site where the user can input a code in a text input and then this code is being inserted in a MYSQL database if certain conditions are met. In case of a successfull database entry I would like to notify the user with a little pop up message, which displays something like "Success" and also stating some data from the table row, the code was inserted into.
I found a nice looking pop up message on the following page, which I would like to use: https://www.gitto.tech/posts/animated-modal-box-using-html-css-and-javascript/.
However, in the implementation from the page, the pop-up is triggered by the click of a button:
document.getElementById("open-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.add("active");
});
document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.remove("active");
});
I would like to execute the pop-up based on an if-condition, in which I check whether an php variable is already set:
<?php
if (isset($group)) {
?> ......HTML code.....
So, can anybody tell me how to successfully remove that "onClick" function of the pop-up?
Thanks in advance!

I understand that you reload the page after said data was inserted into database?
If so, what you can do to show pop-up initially, is to simply add class active to your popup (element with class popup, like that:
<div class="popup center active">
...
</div>
BUT
in order to be able to close the popup, you still will have to attach the second part of the provided script (you can simply insert it within script tags inside php if statement (at the end of HTML body element), like:
<script>
document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.remove("active");
});
</script>
note: It doesn't change the fact that, as said above - it would be better to handle this with XHR (e.g. via ajax)

how to run javascript when sql has loaded

I am using some github jquery code https://github.com/viralpatel/jquery.shorten to automatically shorten a paragraph and add a read more button, so i made the div element and it works fine when i use normal text, but i tried to add some sql (inside php) to show a value of something in a sql table, but when i load the page it just says "more" and when i click it, it loads the value from the sql, but it is supposed to just shrink the value and then when you click more it is supposed to show the rest instead it shows nothing and then when you click "more" it shows all of it, I am really stuck on this, have been trying to find an answer already for a few days.
example code
<div class="example">
<?php echo $sql_query; ?>
</div>
<script>
$(document).ready(function() {
$(".example").shorten({showChars: 100});
});
</script>

I figured out why it was causing such problems, I had comments inside the div element before the php echo, so it was counting the comments as chars, so when i removed the comments it all worked.

Click the button print selected page(while click button send no of pages) in window.print()?

while click button print the selected html page. Selected html have 5 pages but i want to print first two pages only. is it possible to send first two pages only while clicking the button . window.print() is have any function to send print first 2 page only instead of 5 pages?

The Simple answer is No. Just because there is no parameter in window.print() method, or such a configuration to do so. See the MDN Docs. But there is a simple workaround for achieving the thing you want. What you can do is just set style="max-height: 400px; overflow: hidden" to the body of HTML just before calling window.print() method. Here in sample 400px size is just for demo. You have to find that using trial and error. You also have to remove the style otherwise you won't be able to go through entire page.

You can use ngx-print, which is an angular component that can be used to print parts of a page. - https://www.npmjs.com/package/ngx-print
With ngx-print, you can use something like this :
<div id="sectionToPrint"> your content.. </div>
And then, for the print button, you can use ngx-print attribute like this :
<button printSectionId="sectionToPrint" ngxPrint> Print </button>
This will only print contents inside the "sectionToPrint" id.
Hope this helps.

I use featherlight for an image gallery, but it causes an error when I click on an input field in a form (not modal)

I have images appearing in a repeating region — each region is a recordset of an item in an auction.
Clicking the images loads a featherlight gallery. However, in each item's region, there is a form that the user can submit to make a bid on the item.
As soon as I click inside the input field before even entering a dollar amount with the form as of yet unsubmitted, somehow featherlight interferes and throws an error : "Featherlight: no content filter found (no target specified)".
To be clear : the form doesn't pop up in a modal window... and there is no connection between the form and featherlight apart from the fact that the form is inside the section that contains this : data-featherlight-gallery data-featherlight-filter="a.gallery".
I'm not sure why there is this interference in the first place.
I've searched online and some people have mentioned that using id may be the problem, so I have removed the text input's id and left only the name, but the error persists.
I found a page on github "forms with dynamic content impossible in featherlight?" at https://github.com/noelboss/featherlight/issues/122
but while the title sounds promising, the comments are mostly beyond me and don't seem to be relevant to my situation.
<form id="encanform<?=$cordre?>" name="encanform<?=$cordre?>" action="encan.php" method="post" onSubmit="storeValues(this);miseNote(<?=$latestbid+10;?>,'<?=$lang?>',this.form.miseamount.value)" class="encanclass">
<input type="text" required class="frmess" name="miseamount" title="This field is required." value="" />
var cordre = 'section#<?=$cordre?> a.gallery';
$(document).ready(function(){
$(cordre).featherlightGallery();
});
Any time I click the field, that error happens :
Featherlight: no content filter found (no target specified)
Even though featherlight is supposed to be bound only to a.gallery, the input field/form is catching its attention.
Thanks in advance for your time!

OK I finally managed to work it out. I had to remove the data-featherlight string that bound everything, even if I specified only links with class of gallery.
But removing it from the HTML and only apply the class to the image links and then specifying the correct selector in jQuery fixed it for me.
Thanks anyway!

How to find/detect any textarea in page in javascript

(document.getElementById('textarea').length > 0) doesn't work. Does anyone know anything else other than this?
Will
Here is the scenario from my previous question which was unanswered. I have Rich text Editor(Openwysiwyg) which is loaded into textarea when I go to that particular page where textarea is placed. The function uses textarea id to identify textarea to replace it with Rich Text Editor(RTE). Now the script to call this function is in header part of the page. I select a drop-down option for sending email, so my textarea for email shows up. With this script added for RTE, my textarea for email is replaced by RTE and I can send formatted emails. So this works perfectly fine in Firefox. With IE7, RTE shows up even before I select drop-down option for email and this makes whole page messed up.When I select drop-down option for email, I just see normal text area and RTE still sitting at top of page.

document.getElementsByTagName('textarea').length > 0

You can use (note the plural form!)
var e = document.getElementsByTagName("textarea");
You can use jQuery as well:
$("textarea").each( function() { /* ... */ } );
EDIT:
I faced a similar problem once. I was using fckedit, and when I tried reading the value of my textedit (document.getElementById('blabla').value) I was getting null, even tough the rich text edit was ddefinetly showing something on screen.
It turns out that the fckedit API opens a new element on top of the textearea, and only when you navigate from the page is syncs it's internal data (which is on an iframe, if I am not mistaking) into the original textarea.
The moral of the story: if you are using some richtext API - use it's API to query the status of your "textarea". Hope this helps you, as I don't know the library you are using.
PS: I actually used $("blabla").val() ... which is also JavaScript... for some reason people think that jQuery is not javascript. Why is that?

Pure JavaScript (You can use this code)
textarea is HTML element tag
JavaScript :
if(document.getElementsByTagName('textarea').length > 0) {
}
HTML CODE:
<div class="flavor">
<div class="value">
<textarea name="name" rows="8" cols="80"></textarea>
</div>
</div>
<script type="text/javascript">
var flavorbox = document.getElementsByClassName('flavor')[0]
.getElementsByClassName('value')[0]
.getElementsByTagName('textarea').length;
alert(flavorbox);
</script>

Since openWYSIWYG generates a iframe on the fly, its not so simple to get/set its content.
I am currently working on changing these settings in the source. will post here a link as soon as i get the changes.