I have this jQuery for a gallery in my website so when i click on a i mage i can swipe to right or left. Only problem is, when i release the click. It selects the image my mouse landed on.
Can i prevent this in anyway?
<script>
$(function () {
var scroll = 0;
$(function () {
var clicked = false, clickX;
$("#gallery").on({
'mousemove': function(e) {
clicked && updateScrollPos(e);
},
'mousedown': function(e) {
clicked = true;
clickX = e.pageX;
scroll = $('#gallery').scrollLeft();
e.preventDefault();
},
'mouseup': function() {
clicked = false;
$('html').css('cursor', 'auto');
}
});
var updateScrollPos = function(e) {
$('#gallery').scrollLeft(scroll + (clickX - e.pageX));
}
});
});
</script>
good example of my current code http://jsfiddle.net/qtfLjb3n/
after each image sits content what gets loaded after the click. ( so annoying if it clicks when you are just scrolling).
Related
Hello i have this code which works for redirect back
Redirect Users leaving your site - Javascript back button hack
<?php
$javascript = <<<DOC
<script>
var ref = document.referrer;
var siteurl = "YOUR URL HERE";//if you have www, then use www. http://www.yoursite.com
if (ref.indexOf(siteurl)!= -1){
}
else{
(function(window, location) {
history.replaceState(null, document.title, location.pathname+"#!/auth");
history.pushState(null, document.title, location.pathname);
window.addEventListener("popstate", function() {
if(location.hash === "#!/auth") {
history.replaceState(null, document.title, location.pathname);
setTimeout(function(){
location.replace("http://www.blackhatworld.com/");
},0);
}
}, false);
}(window, location));
}
</script>
DOC;
echo $javascript;
?>
I want to add it a counter that will only redirect after 3 clicks on back.
How to do it?
try this javascript code :
<button id="button">Click Back 3 Times </button>
<script>
var counter = 0;
$("#button").click(function () {
counter++;
if (counter == 3) {
window.history.back();
}
});
</script>
This code also works but i need to add the counter
this code which works for redirect back Redirect Users leaving your site - Javascript back button hack:
<script>
// managage back button click (and backspace)
var count = 0; // needed for safari
window.onload = function () {
if (typeof history.pushState === "function") {
history.pushState("back", null, null);
window.onpopstate = function () {
history.pushState('back', null, null);
if(count == 1){window.location = 'http://google.co.il';}
};
}
}
setTimeout(function(){count = 1;},200);
</script>
Looking for a code to make redirect to page after clicking browser back button on the 3rd time... first 2 clicks should remain at the page
I have an application for podcasts and accurate when press the "enter" just change the attribute of the corresponding item of the video, however can not reload the page, just change the video. Anyone know how to do?
javascript:
$.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'http%3A%2F%2Frss.cnn.com%2Fservices%2Fpodcasting%2Fac360%2Frss.xml'%20AND%20itemPath%3D%22%2F%2Fchannel%22&format=json&diagnostics=true&callback=?", function (data) {
// Load Titles patch Json
console.log(data.query.results.channel.item);
var titles = data.query.results.channel.item.map(function (item) {
return item.title;
});
var urls = data.query.results.channel.item.map(function (item) {
return item.origLink;
});
console.log(titles);
$(".container-list-podcast ul").append('<li>' + titles.join('</li><li>'));
$(".container-list-podcast ul li").each(function (key, value) {
var text = $(this).text();
$(this).html('' + text + '');
});
$(".container-list-podcast ul li a").click(function () {
var href = $(this).attr('href');
alert(href);
$("#myvideo").attr("src", href).get(0).play();
return false;
})
// Load Navigation Only Key
a = $('.nav_holder li').keynav(function () {
return window.keyNavigationDisabled;
});
});
jsfiddle
I am working on Image upload and I need to add functionality to zoomin and zoomout and shapes (like landscape, portrait) of image on click of buttons. But nothing happens when I am clicking on the buttons. My code is:
$(document).ready(function() {
var imagesize = $('img').width();
alert(imagesize);
$('#zoomout').on('click', function() {
imagesize = imagesize - 5;
$('img').width(imagesize);
});
$('#zoomin').on('click', function() {
imagesize = imagesize + 5;
$('img').width(imagesize);
});
});
I guess you are missing the jQuery library:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
var imagesize = $('img').width();
alert(imagesize);
$('#zoomout').on('click', function() {
imagesize = imagesize - 5;
$('img').width(imagesize);
});
$('#zoomin').on('click', function() {
imagesize = imagesize + 5;
$('img').width(imagesize);
});
});
</script>
Try adding a library first before this script.
I have a AJAX upload working and all ready to go, there really isnt any information the user can see except a percent and a progress bar. what i want to do is create a div for each file and show progress for each. Do i have to use flash or can i do this all from jquery because i got the ajax part done all thats left is to make the divs for each file and show a progress bar for each. if i were to upload multiple files it would show 1 progress bar that is uploading all the files together, i want to do it seperate for each. so basicly have one form to select multiple files and create a div for each file to show the percent complete of each.
JavaScript:
$('#Submit').click(function(event)
{
if ( !("FormData" in window) ) {
$('#Wrapper').append('<div class="DMsg"><label class="DText">You Are Using An Outdated Browser, Please Upgrade To Google Chrome Or Firefox, If You Dont Most Features Will Not Work. Click Anywhere To Dismiss.</label></div>');
$('#Wrapper').find('.DMsg').hide().slideDown('slow');
var Close = setTimeout(function()
{
$('.DMsg').slideUp('slow', function()
{
$('.DMsg').remove();
});
}, 10000);
}
else
{
function Upload()
{
event.preventDefault();
event.stopPropagation();
var FInput = $('#Files').val();
if(FInput != '')
{
var Data = new FormData();
var Files = document.getElementById('Files');
for(var I = 0; I < Files.files.length; ++I)
{
var FilesName = Files.files[I].name;
Data.append('File[]', Files.files[I]);
}
var Request = new XMLHttpRequest();
Request.upload.addEventListener('progress', function(event)
{
if(event.lengthComputable)
{
Percent = event.loaded / event.total;
Progress = document.getElementById('Progress');
Loaded = Math.round(Percent * 100);
$('#Progress').progressbar({
value: Loaded
});
$('#Loaded').text(Loaded + '%');
}
else
{
$('#Progress').text('There Was An Error Getting The Percent');
}
});
Request.upload.addEventListener('load', function(event)
{
});
Request.upload.addEventListener('error', function(event)
{
alert('Upload Failed.');
});
Request.addEventListener('readystatechange', function(event)
{
if(this.readyState == 4)
{
if(this.status == 200)
{
$('#Wrapper').append('<div class="DMsg"><label class="DText">Your Files Have Finished Uploading. Click Anywhere To Dismiss.</label></div>');
$('#Wrapper').find('.DMsg').hide().slideDown('slow');
$('#Loaded').text('100%');
$('#Progress').progressbar({
value: 100
});
var Close = setTimeout(function()
{
$('.DMsg').slideUp('slow', function()
{
$('.DMsg').remove();
});
}, 10000);
}
else
{
$('#Wrapper').append('<div class="DMsg"><label class="DText">There Was An Error In Uploading Your Files. Click Anywhere To Dismiss.</label></div>');
$('#Wrapper').find('.DMsg').hide().slideDown('slow');
var Close = setTimeout(function()
{
$('.DMsg').slideUp('slow', function()
{
$('.DMsg').remove();
});
}, 10000);
}
}
});
Request.open('POST', 'Upload.php');
Request.setRequestHeader('Cache-Control', 'no-cache');
Progress.style.display = 'block';
Request.send(Data);
}
else
{
$('#Wrapper').append('<div class="DMsg"><label class="DText">Please Select A File / Files. Click Anywhere To Dismiss.</label></div>');
$('#Wrapper').find('.DMsg').hide().slideDown('slow');
var Close = setTimeout(function()
{
$('.DMsg').slideUp('slow', function()
{
$('.DMsg').remove();
});
}, 10000);
}
}
var EachFile = 0
$.each($('#Files')[0].files, function()
{
++EachFile;
Upload();
});
}
});
HTML:
<div id="UForm">
<form action="" method="post" enctype="multipart/form-data">
<input type="file" class="Files" id="Files" name="File[]" />
<input type="submit" name="Submit" class="AB" id="Submit" value="Upload!" />
<div id="Progress"></div>
<div class="Caption"><label id="Loaded"></label></div>
</form>
</div>
Sorry for lots of code.
It shows a big load bar because you are searching for elements with the DMsg class and jquery searches from top-down so it will always find the first loading bar you set.
You need a way to set a different id to each new bar or when you do the
$('#Wrapper').find('.DMsg').hide().slideDown('slow');
find a way to get the last result.
I have a form with number of submit type as images. Each image has a different title. I need to find out the title of the clicked image. But my click function inside form submit is not working.
My form is:
<form action='log.php' id='logForm' method='post' >
<?
for($j=1;$j<=5;$j++)
{
?>
<input type="image" src="<?=$img;?>" title="<?=$url;?> id="<?="image".$j?> class="images" />
<?
}
?>
</form>
Jquery:
$("#logForm").submit(function(e)
{
$(".advt_image").click(function(event) {
var href=event.target.title;
});
var Form = { };
Form['inputFree'] = $("#inputFree").val();
// if($("#freeTOS").is(":checked"))
Form['freeTOS'] = '1';
$(".active").hide().removeClass('active');
$("#paneLoading").show().addClass('active');
var url="http://"+href;
$.post('processFree.php', Form, function(data)
{
if(data == "Success")
{
$("#FreeErrors").html('').hide();
swapToPane('paneSuccess');
setTimeout( function() { location=url }, 2500 );
return;
}
swapToPane('paneFree');
$("#FreeErrors").html(data).show();
});
return false;
});
How can I get the title value of clicked image inside this $("#logForm").submit(function())?
How can I use the id of clicked image for that?
You can use event.target property
$("#logForm").submit(function(e)
alert($(e.target).attr('title'));
});
http://api.jquery.com/event.target/
[UPDATE]
I just realized it wouldn't work. I don't think there is a simple solution to this. You have to track the click event on the input and use it later.
jQuery submit, how can I know what submit button was pressed?
$(document).ready(function() {
var target = null;
$('#form :input[type="image"]').click(function() {
target = this;
alert(target);
});
$('#form').submit(function() {
alert($(target).attr('title'));
});
});
[Update 2] - .focus is not working, but .click is working
http://jsfiddle.net/gjSJh/1/
The way i see it, you have multiple submit buttons. Instead of calling the function on submit, call it on the click of these buttons so you can easily access the one the user chose:
$('input.images').click(function(e) {
e.preventDefault(); //stop the default submit from occuring
alert($(this).attr('title');
//do your other functions here.
});
// Runtime click event for all elements
$(document).on('vclick', '.control', function (e) { // .control is classname of the elements
var control = e.target;
alert(e.currentTarget[0].id);
});
if you are not getting proper message in alert, just debug using Firebug.
Check following code you can get the title of clicked image.
Single click
$(document).ready(function()
{
$('#logForm').submit(function(e){
$(".images").click(function(event) {
alert(event.target.title);
});
return false;
});
});
Double click
$(document).ready(function()
{
$('#logForm').submit(function(e){
$(".images").dblclick(function(event) {
alert(event.target.title);
});
return false;
});
});
add following ondomready in your rendering page
$(document).ready(function(){
$("form input[type=image]").click(function() {
$("input[type=image]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
});
Now in your form's submitt action add follwing behaviour and yupeee!... you got it!....
$("#logForm").submit(function(e)
{
var title = $("input[type=image][clicked=true]",e.target).attr("title");
.....
.....
});