Develop Reference

Opening a window in Javascript with the value of a PHP variable

I would like to open a window with a 5 second delay when a button is clicked. I'm trying:
<script type="text/javascript">
function sample() {
setTimeout(function() {
window.open('<?php echo esc_attr(wpcoupon_coupon()->get_go_out_url()); ?>', '_self');
}, 5000);
}
</script>
which I call in the onclick attribute of the <button>:
<button class="ui right labeled icon button btn btn_secondary" onClick="sample();">
<i class="copy icon"></i>
<span><?php esc_html_e('Copy', 'wp-coupon'); ?></span>
</button>
The problem is that <?php echo esc_attr(wpcoupon_coupon()->get_go_out_url()); ?> doesn't return the correct value, and correct URL doesn't open.
What could be going wrong?

You need ajax to read that php variable asynchronously from javascript. Otherwise i think your question is better answered here:
Get variable from PHP file using JQuery/AJAX

Is the page address correct?
esc_attr(wpcoupon_coupon()->get_go_out_url())
For test your script in php file use construction:
<?php
//php code
?>
<script>
function sample() {
setTimeout(function() {
window.open('<?php echo('https://google.com'); ?>', '_self');
}, 5000);
}
</script>
<button class="ui right labeled icon button btn btn_secondary" onClick="sample();">test</button>
<?php
//php code
?>

mCustomScrollbar Disabling scroll animation

For some reason, I can't get the scroll bar to appear when initializing via javascript, but I can by initializing via html.
The scroll bar is meant to appear inside of #popup-scroll, which has php content. This is all inside of a gallery, with the popup acting as the lightbox for each item in the loop.
<?php
$the_query = new WP_Query(array(
'post_type' => 'post')); while ( $the_query->have_posts() ) : $the_query->the_post();?>
<?php
echo'<figure><a class="popup-with-zoom-anim" href="#'.$post->post_name.'">'.the_post_thumbnail().'<div class="title"><h2>'.$post->post_title.'</h2></div></a></figure>';
echo'<div id="'.$post->post_name.'" class="zoom-anim-dialog mfp-hide">
<div id="popup-scroll">'.$content.'</div></div>'; ?>
<?php endwhile; wp_reset_postdata(); ?>
Initializing by javascript (does not work):
<script>
(function($){
$(window).on("load",function(){
$("#popup-scroll").mCustomScrollbar({scrollInertia: 0});
});
})(jQuery);
</script>
Initializing by HTML (works):
<div id="popup-scroll" class="mCustomScrollbar" data-mcs-theme="dark">
<!-- the content -->
</div>
The goal is to disable the scroll animation scrollInertia: 0, which can only be done through the javascript initialization.
The developer site, for reference

Ok, because the scroll bar is in a div that only appears once the lightbox / modal window is opened, I had to add the following to my script:
live: true
So, in complete, the javascript function is this:
<script>
(function($){
$(window).on("load",function(){
$("#popup-scroll").mCustomScrollbar({
scrollInertia: 0,
live: true
});
});
})(jQuery);
</script>
It works now.

Javascript Show for a php login form

I am trying to make a login form, when you log in then the Login in button disappears and gets replaced with a My account button.
So far i have made it that when you login the login hides however i need to show a different div when logged in.
This is so far what i have :
<?php
if (!isset($_SESSION['user'])) {
?>
<script>
jQuery(function ($) {
$('#pre_header_content_right').remove();
});
</script>
<?php
} else {
?>
<script>
</script>
<?php
}
?>
I am looking for a piece of code similar to this however instead or removes a div it shows it.
jQuery(function ($) {
$('#pre_header_content_right').remove();
});
I have dried .show instead of .remove however this does not work
Thanks for any help

you can try this
<script>
<?php
if (!isset($_SESSION['user'])) {
?>
$(document).ready(function(){
$('#button_login').show();
$('#button_my_account').hide();
});
<?php
} else {
?>
$(document).ready(function(){
$('#button_login').hide();
$('#button_my_account').show();
});
<?php
}
?>
</script>

PHP echo JQuery Click

I am trying to get some jquery to click on a div.
I've got the ID of the div that I need to be clicked and it's inside some php code:
if(isset($_GET['something'])) {
echo "<script> $('#huge_it_dots_3_20').click(); </script>";
}
The div I'm targetting looks like this:
<div id="huge_it_dots_3_20" class="huge_it_slideshow_dots_20 huge_it_slideshow_dots_deactive_20" image_key="3" image_id="33" onclick="huge_it_change_image_20(parseInt(jQuery('#huge_it_current_image_key_20').val()), '3', data_20,false,true);return false;"></div>
My issue is that for some reason it's not clicking on the div.
And ideas why?

Try with this:
echo "<script> $('#huge_it_dots_3_20').trigger('click'); </script>";

warp the code with dom ready function.. then it should work
if(isset($_GET['something'])) {
echo "<script> $(document).ready(function(){$('#huge_it_dots_3_20').click();}) </script>";
}

Do something like
<?php if(isset($_GET['something'])) { ?>
<script>
$('#huge_it_dots_3_20').click();
</script>
<?php } ?>

The JS code will run before your DOM will be ready so.. here's a readyState.
<?php if(isset($_GET['something'])) { ?>
<script type="text/javascript">
$(function(){
$("#huge_it_dots_3_20").click()
});
</script>
<?php } ?>

JS tooltip works in a wrong way

My PHP:
<?php
foreach ($query as $row){
echo '<tr>
<td>
<label class="checkbox">
'.form_checkbox('delete[]', $row['link']).anchor("site/see_art/".$row['article_id'],$row['title']).'
<div class="tooltip-inner">'
.$row['description'].
'</div>
</td>
<td>'
.substr($row['pub_date'], 5, 12).
My jQuery:
<script>
$(".checkbox").mouseenter(function(){
var $tooltip = $('.tooltip-inner', this);
clearTimeout($tooltip.data('timeoutId'));
$tooltip.show(200);
}).mouseleave(function(){
var $tooltip = $('.tooltip-inner', this),
timeoutId = setTimeout(function(){
$tooltip.hide(200);
}, 650);
$tooltip.data('timeoutId', timeoutId);
});
$(".tooltip-inner").mouseenter(function(){
clearTimeout($(this).data('timeoutId'));
}).mouseleave(function(){
var $tooltip = $(this),
timeoutId = setTimeout(function(){
$tooltip.hide(200);
}, 650);
$tooltip.data('timeoutId', timeoutId);
});
</script>
'
</label>
</td>
</tr>';
}?>
In the PHP, I have some titles that display their description when I hover over them. Everything works fine except when I load the page the. When the page loads, the tooltips are visible until I hover over the link. After I hover over the link, the tooltips hide like they should. I know this happens because I echo the div. Some help?

You are not hiding your tooltips when you load the page.
$(document).ready(function(){
$('.tooltip-inner').hide();
});
If you already have a $(document).ready() then just put the hide code at the very top.

if you don't want them to flicker on then off use css to hide them instead of js.
so something like this in your css
.tooltip-inner {
display:none;
}