<head>
<script>
$("body").on("contextmenu", "img", function(e) {
return false;
});
</script>
</head>
<?php
session_start();
include 'connection.php';
include 'sessions.php';
$image_id = $_GET['id'];
$query = "SELECT * FROM medical_data WHERE md_id = '$image_id'";
$result = mysqli_query($con,$query) or die(mysqli_error($con));
if (mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{
$image = $row['md_pt_image'];
}
}
echo '<img src="data:image/jpeg;base64,'.base64_encode($image).'" height="auto" width="auto"/><br>';
?>
This is my code, I want display an image from database and disable right click on it.
But the JS is not working, i still can right click on the image.
Is it because I am using < img > in echo ? or my JS is wrong!?
As #haxxxton already said that you need to wrap your code in document.ready to make it work.
<script type="text/javascript">
$(document).ready(function(){
$('img').on('contextmenu', function(e) {
return false;
});
});
</script>
Another way of doing it with pure javascript is
<script type='text/javascript'>
function nocontext(e) {
var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
if (clickedTag == "IMG") {
return false;
}
}
document.oncontextmenu = nocontext;
</script>
Neel had a perfectly good answer and in fact I upvoted it.
Consider this a second implementation: You can use preventDefault();
function nocontext(e) {
var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
if (clickedTag == "IMG") {
e.preventDefault();
}
}
document.oncontextmenu = nocontext;
Just Use Like:
<div id="disabled"></div>
$(document).ready(function() {
$("#disabled").on("contextmenu",function(e){
return false;
});
});
Working JS FIDDLE LINK
Related
Hi have made a php function that uploads script to pages with "cart" is_cart() and it all seems to be working properly. But when I try to use is_product() it doesn't register it on the single product page. How do I get my php to render script on the single product page?
I call this function in my functions.php
function refresh_update_qty() {
if (is_cart() || is_product()):
?>
<script type="text/javascript">
jQuery('div.woocommerce').on('click', ' button.plus, button.minus', function(e){
var math_method = '';
if(jQuery(this).hasClass('plus')) {
math_method = "1";
}else if(jQuery(this).hasClass('plus')) {
math_method = "-1";
} else {
// Do nothing
}
var this_input = this.parentNode.querySelector('input[type=number]');
var current_val = this_input.value;
var new_val = parseInt(current_val) + parseInt(math_method);
this_input.value = new_val;
document.getElementById('update_cart_button').disabled = false;
<?php
if(is_cart()):
?>
jQuery("[name='update_cart']").trigger("click");
<?php
endif;
?>
e.preventDefault();
});
</script>
<?php
endif;
}
add_action( 'wp_footer', 'refresh_update_qty' );
Based on woocommerce documentation the is_product() should work, but it doesn't. https://woocommerce.wp-a2z.org/oik_api/is_product/
I figured out the problem. It seems like my products page had the woocommerce class inside the body and my cart has it inside a div. so once I changed jQuery('div.woocommerce') to jQuery('.woocommerce') it worked.
Final code below
function refresh_update_qty() {
if (is_cart() || is_product()):
?>
<script type="text/javascript">
(function($) {
$('.woocommerce').on('click', ' button.plus, button.minus', function(e){
var math_method = '';
if($(this).hasClass('plus')) {
math_method = "1";
}else if($(this).hasClass('minus')) {
math_method = "-1";
} else {
// Do nothing
}
var this_input = this.parentNode.querySelector('input[type=number]');
var current_val = this_input.value;
var new_val = parseInt(current_val) + parseInt(math_method);
this_input.value = new_val;
<?php
if(is_cart()):
?>
// IF CART PAGE UPDATE CART
document.getElementById('update_cart_button').disabled = false;
$("[name='update_cart']").trigger("click");
<?php
endif;
?>
e.preventDefault();
});
})( jQuery );
</script>
<?php
endif;
}
add_action( 'wp_footer', 'refresh_update_qty' );
I use this code inside our header to display our cart.
Currently the dropdown is displayed on hover.
How can I modify this so that the dropdown is displayed onclick?
<a href="#header-cart" class="skip-link skip-cart <?php if($_cartQty <= 0): ?> no-count<?php endif; ?>">
<span class="icon"></span>
<span class="label"><?php echo $this->__('Cart'); ?></span>
<span class="count"><?php echo $_cartQty; ?></span>
</a>
<div id="header-cart" class="block block-cart skip-content">
<?php echo $this->getChildHtml('minicart_content');?>
</div>
I use this code for the dropdown on the website:
<?php //Drop-down ?>
var ddOpenTimeout;
var dMenuPosTimeout;
var DD_DELAY_IN = 200;
var DD_DELAY_OUT = 0;
var DD_ANIMATION_IN = 0;
var DD_ANIMATION_OUT = 0;
$('.clickable-dropdown > .dropdown-heading').click(function() {
$(this).parent().addClass('open');
$(this).parent().trigger('mouseenter');
});
//$('.dropdown-heading').on('click', function(e) {
$(document).on('click', '.dropdown-heading', function(e) {
e.preventDefault();
});
$(document).on('mouseenter', '.dropdown', function() {
var ddToggle = $(this).children('.dropdown-heading');
var ddMenu = $(this).children('.dropdown-content');
var ddWrapper = ddMenu.parent(); <?php //$(this); ?>
<?php //Clear old position of dd menu ?>
ddMenu.css("left", "");
ddMenu.css("right", "");
<?php //Show dd menu ?>
if ($(this).hasClass('clickable-dropdown'))
{
<?php //If dropdown is opened (parent already has class 'open') ?>
if ($(this).hasClass('open'))
{
$(this).children('.dropdown-content').stop(true, true).delay(DD_DELAY_IN).fadeIn(DD_ANIMATION_IN, "easeOutCubic");
}
}
else
{
<?php //Add class 'open' to dd ?>
clearTimeout(ddOpenTimeout);
ddOpenTimeout = setTimeout(function() {
ddWrapper.addClass('open');
}, DD_DELAY_IN);
//$(this).addClass('open');
$(this).children('.dropdown-content').stop(true, true).delay(DD_DELAY_IN).fadeIn(DD_ANIMATION_IN, "easeOutCubic");
}
<?php //Set new position of dd menu.
//This code is delayed the same amount of time as drop-down animation. ?>
clearTimeout(dMenuPosTimeout);
dMenuPosTimeout = setTimeout(function() {
if (ddMenu.offset().left < 0)
{
var space = ddWrapper.offset().left; <?php //Space available on the left of dd ?>
ddMenu.css("left", (-1)*space);
ddMenu.css("right", "auto");
}
}, DD_DELAY_IN);
}).on('mouseleave', '.dropdown', function() {
var ddMenu = $(this).children('.dropdown-content');
clearTimeout(ddOpenTimeout); <?php //Clear, to close dd on mouseleave ?>
ddMenu.stop(true, true).delay(DD_DELAY_OUT).fadeOut(DD_ANIMATION_OUT, "easeInCubic");
if (ddMenu.is(":hidden"))
{
ddMenu.hide();
}
$(this).removeClass('open');
});
change 'mouseenter' --> 'click' , as 'click' will do it for you with significantly less brain damage. Still I see that your problem statement is not complete If you want complete solution for what you want to achieve,then perhaps you have to give some more details on the problem statement as the statement what you want to achieve and please provide the full html. Use Fiddler and upload the html and scripts and share the link.
change this line $(document).on('mouseenter', '.dropdown', function() {
to $(document).on('click', '.dropdown', function() {
you should probably remove the on('mouseleave') function completely and put it into your click logic
EDIT here is a complete solution in one JS (and please dont use a <?php tag for commenting )
var ddOpenTimeout;
var dMenuPosTimeout;
var DD_DELAY_IN = 200;
var DD_DELAY_OUT = 0;
var DD_ANIMATION_IN = 0;
var DD_ANIMATION_OUT = 0;
$('.clickable-dropdown > .dropdown-heading').click(function() {
$(this).parent().addClass('open');
$(this).parent().trigger('mouseenter');
});
//$('.dropdown-heading').on('click', function(e) {
$(document).on('click', '.dropdown-heading', function(e) {
e.preventDefault();
});
$(document).on('click', '.dropdown', function() {
if($(this).hasClass('open')) {
var ddMenu = $(this).children('.dropdown-content');
clearTimeout(ddOpenTimeout); <?php //Clear, to close dd on mouseleave ?>
ddMenu.stop(true, true).delay(DD_DELAY_OUT).fadeOut(DD_ANIMATION_OUT, "easeInCubic");
if (ddMenu.is(":hidden"))
{
ddMenu.hide();
}
$(this).removeClass('open');
} else {
var ddToggle = $(this).children('.dropdown-heading');
var ddMenu = $(this).children('.dropdown-content');
var ddWrapper = ddMenu.parent();
ddMenu.css("left", "");
ddMenu.css("right", "");
if ($(this).hasClass('clickable-dropdown'))
{
if ($(this).hasClass('open'))
{
$(this).children('.dropdown-content').stop(true, true).delay(DD_DELAY_IN).fadeIn(DD_ANIMATION_IN, "easeOutCubic");
}
}
else
{
clearTimeout(ddOpenTimeout);
ddOpenTimeout = setTimeout(function() {
ddWrapper.addClass('open');
}, DD_DELAY_IN);
//$(this).addClass('open');
$(this).children('.dropdown-content').stop(true, true).delay(DD_DELAY_IN).fadeIn(DD_ANIMATION_IN, "easeOutCubic");
}
clearTimeout(dMenuPosTimeout);
dMenuPosTimeout = setTimeout(function() {
if (ddMenu.offset().left < 0)
{
var space = ddWrapper.offset().left; <?php //Space available on the left of dd ?>
ddMenu.css("left", (-1)*space);
ddMenu.css("right", "auto");
}
}, DD_DELAY_IN);
}
});
What could be wrong with my code.
when I click the text enclosed with anchor tags. alert function is not showing up.
but when i try console.log();
it shows the id in the console.
I generated the table data with php.
please help.
thanks
<tbody>
<?php
include('config.php');
$qry = $handler->prepare( "SELECT * FROM inspection WHERE inspect_status = ?");
$qry->execute(array('Booked'));
$row = $qry->rowCount();
while($row = $qry->fetch(PDO::FETCH_ASSOC)){
$iid = $row['inspect_id'];
$service = $row['inspect_service'];
$refno = $row['inspect_refnum'];
$insdate = $row['inspect_date'];
$intrno = $row['inspect_internalrno'];
$inspect_status = $row['inspect_status'];
?>
<?php
echo"
<tr>
<td>$iid</td>
<td>$refno</td>
<td>$intrno</td>
<td>$service</td>
<td>$insdate</td>
<td>
<a idd=$iid class='marks' href='?i=$iid'>Confirm</a>
</td>
</tr>
";
?>
<?php } ?>
<script type="text/javascript">
$(function () {
$('body').delegate('.marks', 'click', function () {
var idconf = $(this).attr('idd');
alert(idconf);
return false;
});
});
</script>
</tbody>
You should rather use .on() for event delegation:
$('body').on('click','.marks',function(){
var idconf = $(this).attr('idd');
alert(idconf);
return false;
});
Try with -
$('.marks').on('click', function(e) {
alert($(this).attr('id'));
return false;
})
And change -
<a id=$iid class='marks' href='?i=$iid'>Confirm</a>
If you dont want to use id then you can try data attribute also.
I got problem with jquery code.It somehow doesn't work in safari browser. Rest of the browsers working fine but in safari I dont know why not any solution?
Index.php - I have this code inside HEAD
<script type="text/javascript">
$(document).ready(function () {
var prilohy = <? php echo json_encode($linkpar); ?> ;
if (prilohy == "Pizza") {
$('#content_donaska_extra').show();
} else if (prilohy == null) {
$('#content_donaska_extra').show();
} else {
$('#content_donaska_extra').hide();
}
});
</script>
Remove the space between <? and php
var prilohy = <?php echo json_encode($linkpar); ?> ;
script be
$(document).ready(function () {
var prilohy = <?php echo json_encode($linkpar); ?> ;
if (prilohy == "Pizza" || prilohy == null) {
$('#content_donaska_extra').show();
} else {
$('#content_donaska_extra').hide();
}
});
I have a php webpage where a user enters their details into a form and after submitting two sections, named profile and images, must then appear. Here is the javascript code:
jQuery(document).ready(function($) {
var registered = <?php echo $registered; ?>;
alert(registered);
if (registered == 'false') {
$("#profile").hide();
$("#images").hide();
}
if (registered == 'true') {
alert('hello');
$("#profile").show();
$("#images").show();
}
});
For some reason it does not go into the if statement at all, even though the alert shows registered's value as true. What could be the problem here?
var registered = <?php json_encode($registered) ?>
if(registered == true) {
alert(registered);
$("#profile").hide();
$("#images").hide();
} else {
alert('hello');
$("#profile").show();
$("#images").show();
}
You are mixing up the string 'true' with the boolean true. Try a version that uses booleans from start to finish instead:
var registered = <?= json_encode($registered) ?>;
if (registered) {
$("#profile").hide();
$("#images").hide();
} else {
$("#profile").show();
$("#images").show();
}
Edit - Thanks to Jon in another comment for suggesting using json_encode.
use JSON.parse() Takes a well-formed JSON string and returns the resulting JavaScript object.
//JSON.parse(registered);
var registered = <?php echo $registered; ?>;
if (!(JSON.parse(registered))) {
$("#profile").hide();
$("#images").hide();
}
else {
$("#profile").show();
$("#images").show();
}
Remove the quotes and try
jQuery(document).ready(function($) {
var registered = <?php echo $registered; ?>;
alert(registered);
if (registered == false) { //Remove the quotes
$("#profile").hide();
$("#images").hide();
}
if (registered == true) { //Remove the quotes
alert('hello');
$("#profile").show();
$("#images").show();
}
});
Reason in this demo.
var registered = true;
alert(registered == 'true'); //return false
alert(registered == 'false'); //return false
In JavaScript data type comparison is a bit inconsistent. So always try to compare same data-types.
so try:
var registered = true;
alert(registered == true); //return true
alert(registered == false); //return false
Change your code to:
if (registered) {
alert('hello');
$("#profile").show();
$("#images").show();
}
else {
$("#profile").hide();
$("#images").hide();
}
Try with this
jQuery(document).ready(function($) {
var registered = "<?php echo $registered; ?>";
alert(registered);
if (registered == false) {
$("#profile").hide();
$("#images").hide();
}
else if (registered == true) {
alert('hello');
$("#profile").show();
$("#images").show();
}
});