How to prevent apparent downloading photos when displaying them with photobox?
I've disabled right-click on thumbnails shown on website but when I start slideshow with photobox I still can do it.
Here's the part where I display photos on website:
<div class="gallery">
<a href="<?=$path1; ?>">
<img src="<?= $path1; ?>">
</a>
<div contentEditable="true"><?=pathinfo($path1, PATHINFO_FILENAME)?></div>
</div>
Here photobox displaying
<script type='text/javascript'>
$(document).ready(function(){
$('.gallery').photobox('a',{ time:0 });
});
</script>
And here right-click preventing
<script>
$("a").mousedown(function(e) {
return false;
});
</script>
Not sure how this prevents right clicking on the elements:
<script>
$("a").mousedown(function(e) {
return false;
});
</script>
Because I've tested that and the context menu still appears.
Since you're also passing e to the function but not doing anything to it.
But this one does:
<script>
$(document).ready(function(){
$("a").mousedown(function(e) {
document.addEventListener('contextmenu', e =>
e.preventDefault()
);
});
});
</script>
Note the ready() event listener to wait until the DOM has loaded for it to affect all "a" elements.
Another thing about this is that such rules can be overriden right from the browser debugger tools so it's not effective to prevent right clicking on the elements.
Related
I am working on a project in which the navigation does not really changes pages but gets data using services based on which navigation link I click and update data using jquery .html() method, I want to use a loader that shows up on clicking any link and hides the content, when ajax services is successfull i want to remove the loader and show back the content, but somehow the animations are overlapping causing animations to fail,
in example code here i am not using ajax to update my page but a simple button
and jquery to update the data
<body>
<div id="loader">
<img src="loader.gif" alt="">
</div>
<br>
<div id="content">
This is the content
</div>
<input type="button" id="update" value="Update Data">
</body>
<script>
function showContent(){
$('#loader').fadeOut(200).promise().done(function(){
$('#content').fadeIn(200).promise().done(function(){
});
});
}
function hideContent(){
$('#content').fadeOut(200).promise().done(function(){
$('#loader').fadeIn(200).promise().done(function(){
});
});
}
$("#update").click(function(){
hideContent();
$("#content").html("New Data");
setTimeout(showContent(), 10000);
});
</script>
on clicking update, this should happen
content should disappear,
loader should appear,
update content,
loader disappear,
content appear,
but i get both loader and content appeared in the end
I used setTimeout to give some delay but it doesnt works , i also used some flags earlier but that didnt work too .
JsFiddle : JsFiddleLink
Why use setTimeout()? You can return, chain the promise
function showContent(){
return $('#loader').fadeOut(200).promise().done(function(){
return $('#content').html(data).fadeIn(200).promise()
});
}
function hideContent(){
return $('#content').fadeOut(200)
.done(function() {
this.empty();
return $('#loader').fadeIn(200).promise()
});
}
$("#update").click(function() {
hideContent().then(showContent)
})
I have a link on my php file which when has an event listener attached to it and clicks another link on the same page.
<p>Upload the image you want on your cake:Upload </p>
<div id="openModal" class="modalDialog">
<div>X
<?php require 'image-upload.php'; ?>
</div>
</div>
<script>
$('#upload-button').on('click', function () {//This works fine
$('#upload-link')[0].click(); //This doesn't work.
});`
</script>
Now click event should click the upload-link and a modal should pop.However, nothing happens.What could be the reason and the solution?
Add jQuery to your HTML by putting
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
before your custom script.
Besides as it is now, your div will always show up. you should set up a dynamic way to hide/show it.
You can use jQuery hide() and show() methods on your elements like
$("#close").click(function(e){
$("#openModal").hide();
});
also your identifiers syntax should always be the same . All camelCase or all i-dont-know-how-this-case-is-called .
I don' know why it didn't work previously but when i made some changes to the upload button link.Everything worked and the modal pops up just fine.
<p>Upload the image you want on your cake:Upload </p>
I Just changed the href from # to javascript: void(0) and everything just worked fine.
This works for me. But, (FYI), id's should not contain hyphens.
NOTE: I am only using an inline HTML event handler on #openModal to show that its click event is being triggered, but you haven't added any actions to that link, so otherwise it would do nothing. DO NOT USE INLINE HTML EVENT HANDLERS IN PRACTICE.
$(function(){
$('#uploadButton').on('click', function () {
alert("Upload Button has been clicked");
$('#uploadLink').trigger("click");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Upload the image you want on your cake:Upload </p>
I am the Open Modal link
<div id="openModal" class="modalDialog">
<div>I am the Close link
<?php require 'image-upload.php'; ?>
</div>
</div>
In the dashboard from my project, the follow code handle all clicks in hyperlinks:
$('document').ready(function(){
$('#box').draggable();
$('#box').hide();
$('#button').click(function(){
$('#box').hide();
$('a').unbind();
});
$('a').click(function(e){
if($(this).attr('href') != 'logout.html') {
e.preventDefault();
$.get($(this).attr('href'), function(data){
var $temp = $('<div/>', {html:data});
$('#title').text($temp.find('title').text());
$('#text').html($temp.remove('head').html());
$('#box').show();
});
}
});
});
The content of the pages is opened in this <div>:
<div id="box">
<div id="header"> <span id="title"></span> <span id="button">X</span> </div>
<div id="text"> </div>
</div>
My problem is: after I "close" the <div> by clicking in 'button', I can't access the other options anymore, because all of them stay blocked. When I refresh the page all back to work.
Someone knows how to solve this?
Ok, after more tryouts I managed to find the problem: happens that the pages I open in the <div> have some included scripts on them. When I remove this scripts, the behaviour in the parent window back to normal. Probably some type of conflict between the two scripts are happening.
My page is at www.danielcw.info.
At the bottom I am calling:
$(document).ready(function() {
$("#single_1").fancybox({});
});
On:
<div id="single_1">
TESTTESTEST
</div>
Nothing happens. Can anyone please explain where I am going wrong, I see all the JS and CSS loaded and on the page.
Thank you,
Daniel
Typically, Fancybox is initialized on an anchor tag which points to a div element or a link housing the content to be shown on the Fancybox:
HTML:
Click here to launch Fancybox
<div style="display:none">
<div id="single_1">
Content goes here
</div>
</div>
Javascript:
$(function(){
$('a#fancybox').fancybox({
// Fancybox options here
})
.trigger('click'); //Optional - if you wish to trigger the Fancybox after initialization
});
Try using,
$(document).ready(function() {
$("a #single_1").fancybox();
});
<a id="single_1" href="#">
TESTTESTEST
</a>
You've merely instantiated the plugin. You have to trigger it now.
So you can add any DOM element and watch for an event then trigger the plugin.
Click me
The JS
$('fancyme').on("click", function() {
$.fancybox('#single_1');
});
OR
You can trigger on page load
$(function(){
$.fancybox('#single_1');
});
I learned how to pass the argument with a simpler javascript confirm box, but now I'm working with this SimpleModal script, and I'm a bit lost.
I have a page with several buttons that will link to different external pages. When I click any button, the confirm box will pop up and when user clicks ok, then they are taken to that specific external link. Right now, it's hard coded for one link, but I'm not sure how to set the link for each button.
The link is currently set on this line:
window.location.href = 'https://www.sandbox.paypal.com/xxx';
The function:
$(document).ready(function () {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
e.preventDefault();
// example of calling the confirm function
// you must use a callback function to perform the "yes" action
confirm("<h3 class='register'>Please read and understand the Terms of these lessons before purchasing...this is important.<br /><br />By purchasing these lessons, you agree that:</h2><ul class='popup'><li class='lessonslist'><img class='imgpad' src='/images/bullet.png' alt='bullet' />You may reteach any material you have learned here, but you may NOT use the materials provided in the lessons to do so. In other words, you can do the lessons, learn the material, and teach your friend. You CAN NOT print out the transcriptions or download the videos and give them to a friend.</li><li class='lessonslist'><img class='imgpad' src='/images/bullet.png' alt='bullet' />Derivative works are ok to produce, but you can not directly copy the musical examples and profit off them without the written consent of Joel Laviolette.</li></ul>", function () {
window.location.href = 'https://www.sandbox.paypal.com/xxx';
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
closeHTML:"<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%",],
overlayId:'confirm-overlay',
containerId:'confirm-container',
onShow: function (dialog) {
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
$.modal.close();
});
}
});
}
html:
<div id='confirm-dialog'><h2>Confirm Override</h2>
<p>A modal dialog override of the JavaScript confirm function. Demonstrates the use of <code>onShow</code> as well as how to display a modal dialog confirmation instead of the default JavaScript confirm dialog.</p>
<input type='button' name='confirm' class='confirm' value='Demo'/>
</form>
</div>
<div id='confirm'>
<div class='header'><span>Confirm</span></div>
<p class='message'></p>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>OK
</div>
</div>
</div>
There is also the jquery.simplemodal.js which is probably too big to post here.
So... you want to attach confirm popup for every link?
${"selector that returns all external links").click(function(e){
e.preventDefault();
confirm("Do you want to leave?", function () {
window.location.href = (e.target).attr('href');
});
});
${"selector that returns all external links")
Is not a real selector. You need to write correct one inside ${} in order to find buttons you are looking for.
Simple ready to run sample (save in html file and open) =>
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='http://www.ericmmartin.com/wordpress/wp-content/themes/emm-v3/scripts/jquery.simplemodal.js?ver=1.3.3'></script>
</head>
<body>
<a class="external-link" href="http://www.google.com">google</a>
<a class="external-link" href="http://www.bing.com">bing</a>
<a class="external-link" href="http://www.yahoo.com">yahoo</a>
<div id='modal' style='display: none; background: Silver;'>
<a href="#" class='simplemodal-close' id='yes'>leave</a>
<a href="#" class='simplemodal-close' id='no'>don't leave</a>
</div>
<script type='text/javascript'>
$(".external-link").click(function(e){ //on external link click
e.preventDefault(); //cancel immediate redirect of link
$("#modal") //selecting modal window div
.data('href', $(this).attr('href')) //saving href to modal window itself
.modal(); //showing modal window
});
$("#yes").click(function(){window.location=$("#modal").data('href')}); //if user clicks yes, redirect
</script>
</body>
</html>