Draggable and clickable at same time - javascript

I need some help please.
How do I make this work on an ipad. It needs to allow me to drag a group of images around that are each linked to a separate file when clicked. Right now the dragging is working but the image links are not. Now, if a comment out the initTouch();, then the image links will work.
I would like to get the links and the dragging to work together.
example:
<head>
<link rel="stylesheet" href="Page2.css" />
<link rel="stylesheet" href="jquery.ui.all.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.mouse.js"></script>
<script src="jquery.ui.draggable.js"></script>
<meta charset="utf-8">
<script>
$(function() {
$(document).ready(function (){initTouch(); });
$( "#draggable" ).draggable({ handle: "p.ui-widget-header" });
$( "#draggable" ).draggable({ cursor: "crosshair" });
$( "#draggable" ).draggable({ containment: "none" });
// these two lines of code are currently not working unless I delete first line after word function//
$( "#image2" ).wrap('');
$( "#image3" ).wrap('');
});
</script>
</head>
<body>
<div id="primaryContainer" class="primaryContainer clearfix">
<div id="box" class="clearfix">
</div>
<div id="box1" class="clearfix">
</div>
<p id="text">
<span id="effect">Commercial</span><br />
</p>
<div id="wood" class="clearfix">
<div id="draggable" class="ui-widget-content">
<p class="ui-widget-header"><img id="image" src="img/film1_01.png" class="image" /></p>
<img id="image1" src="img/film1_02.png" class="image" />
<img id="image2" src="img/film1_03.png" class="image" />
<img id="image3" src="img/film1_04.png" class="image" />
<img id="image4" src="img/film1_05.png" class="image" />
<img id="image5" src="img/film1_06.png" class="image" />
<img id="image6" src="img/film1_07.png" class="image" />
</div></div>
<p id="text1">
<span id="textspan1">Drag a film strip and select the video you want to see.</span><br />
</p>
</div>
</body>

Since the drag-event only gets called if the element actually gets moved.
On mouseup: check if the draggable drag event was invoked, and if not, do click action.
var dragInvoked=false;
$( "#draggable" ).draggable({
drag:function(){
dragInvoked= true;
}
});
$("#draggable").mouseup(function(){
if (!wasMoved){
doClickAction();
}
wasMoved=false;
});

You could try to attach touchstart and touchend events, and measure the time between start and end to check if it's a "tap" or if they are "dragging". Then if it's a tap you could just open the image. If it's longer than say, 500ms they are obviously dragging the image so you would make the image draggable from there.

Related

Display image legend on hover (not as tooltip) using innerHTML?

I have a webpage with many images, each of which has a title attribute. When I hover over the image, I want the title text to display in a separate legend element I have created (not as a tiny hover tooltip). I have a mouseover function which works fine - i.e. when I hover over the image the legend changes value. But I want that value to be the title text of the individual image - which I don't know how to access. I have tried …innerHTML = this.title which is obviously incorrect.
[The number of images is large and changing (like an album), so I can't add separate code for each <img> tag. I can use alt or any other <img> attribute to make this work. I'm not wedded to the innerHTML method, either, but am hoping for some simple code to do the trick!]
Please help? Thanks! (FYI, I'm a novice coder.)
<!DOCTYPE html>
<html>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver()" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver()" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver()" title="Dinner">
</div>
<script>
function mouseOver() {
document.getElementById("legend").innerHTML = this.title;
}
</script>
</body>
</html>
It looks like you are trying to use this.title to represent the different images? If you want their titles to appear in the <h1> tag you need to pass the information to the function shown below.
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver(this)" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver(this)" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver(this)" title="Dinner">
</div>
<script>
function mouseOver(x) {
document.getElementById("legend").innerHTML = x.title;
}
</script>
I guess its helpful .
But i use Jquery
just need call this code in your <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" class="class_of_div" title="Breakfast">
<img src="image2.jpg" class="class_of_div" title="Lunch">
<img src="image3.jpg" class="class_of_div" title="Dinner">
</div>
<script>
$(document).on('mouseover', '.class_of_div', function () {
var thiss=$(this);
$('#legend').text(thiss.attr('title'));
});
</script>
</body>
</html>

Simple HTML Image Slideshow

I'm looking for a very simple and straightforward image slideshow. No extra features just a selection of images fading in and out. Potrait and Landscapes need to be shown in their full size without any scrollbars being enabled. I managed to find this one:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fadeSlideShow.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#slideshow').fadeSlideShow();
});
</script>
</head>
<body>
<div id="slideshow">
<img src="../images/large/nature/BokehPlant1.jpg" width="640" height="480" border="0" alt="" /> <!-- This is the last image in the slideshow -->
<img src="../images/large/nature/BokehPlant2.jpg" width="640" height="480" border="0" alt="" />
<img src="../images/large/nature/BokehPlant3.jpg" width="640" height="480" border="0" alt="" />
<img src="../images/large/nature/RusticLeaf1.jpg" width="640" height="480" border="0" alt="" /> <!-- This is the first image in the slideshow -->
</div>
</body>
However it doesn't seem to want to work though. All it does it renders the images on after another.
Apologies in advance I haven't played with HTML in a while and I don't have much experience regarding JavaScript.
Many thanks in Advance!
Harry
I don't know if this might help you
HTML
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="slideshow">
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/pool.jpg" style="width:550px;height:250px" />
</div>
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/cave.jpg" style="width:550px;height:250px" />
</div>
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/fruits.jpg" style="width:550px;height:250px" />
</div>
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/dog.jpg" style="width:550px;height:250px" />
</div>
</div>
</body>
</html>
JS
$(document).ready(function(){
SlideShow();
});
function SlideShow() {
$('#slideshow > div:gt(0)').hide();
setInterval(function () {
$('#slideshow > div:first')
.fadeOut(6000)
.next()
.fadeIn(6000)
.end()
.appendTo('#slideshow');
}, 6000);
}
LINK
http://jsbin.com/duyoyuyiwu/1/edit?html,js,output

Can't click div

I am working on a website to view your stats from my Minecraft Pocket Edition server, and I am having a problem.
I have one div with the id "tabs-minigames" and in this div there are 4 boxes with icons, which are these "tabs", and this div is currently not shown (in css display none)
Now, I have a image at the top of the website that you should be able to click to show the div "tabs-minigames", and the tabs show, but don't disappear after clicking a second time. I cannot see what I am doing wrong.
I am using this function in jQuery to show and hide the minigames tab:
$(document).ready(function(){
var status = false;
$('#sliderimg').on('click', function(){
if(!status){
$("#tabs-minigames").show();
status = true;
}else{
$("#tabs-minigames").hide();
status = false;
}
});
});
I don't see anything wrong with the function, and here is the HTML
<html>
<head>
<title>
View your stats - Legion PE
</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"></link>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var status = false;
$('#sliderimg').on('click', function(){
if(!status){
$("#tabs-minigames").show();
status = true;
}else{
$("#tabs-minigames").hide();
status = false;
}
});
});
</script>
</head>
<body>
<div id="tabs">
<div class="tabs-back">
<div id="tabs-middle">
<img id="sliderimg" src="graphics/slider.png" height="100" width="100" style="position: fixed;padding-left:20px;padding-top: 10px;" style="outline:none;cursor: pointer;"></img>
<div style="padding-left:150px;padding-top:25px;">
<div id="tab-light-box">
Legion PE
</div>
</div>
</div>
</div>
</div>
<div id="tabs-minigames" style="display: none;outline: none;">
<div class="tabs-minigame">
<img src="icons/kitpvp_fullsize.png" width="120" height="110" style="padding-left:15px;padding-top:20px;"></img>
</div>
<div class="tabs-minigame">
<img src="icons/spleef_fullsize.png" width="120" height="120" style="padding-left:15px;padding-top:15px;"></img>
</div>
<div class="tabs-minigame">
<img src="icons/bowandarrow_fullsize.png" width="120" height="120" style="padding-left:15px;padding-top:15px;"></img>
</div>
<div class="tabs-minigame">
<img src="icons/diamond_fullsize.png" width="120" height="120" style="padding-left:15px;padding-top:15px;"></img>
</div>
</div>
<center>
<div id="center">
</div>
</center>
</body>
</html>
You can see the website live here: http://legionpvp.eu/pe/login/stats.html
Thanks!
you don't have any element with id="div", and that's what you're binding your click to... There's an image with another id, did you mean to use
.delegate("#sliderimg", "click", function(){
}
Also as others have pointed out it's best to use jquery.on(), or in your case you can even just use $('#sliderimg').click() unless you plan to add / remove the element with that id to the page.
you can try this with no need for anything to be true or false
$('#sliderimg').on('click',function(){
$('#tabs-minigames').slideToggle(); // you can use fadeToggle() as well
});
Declare the variable in the $(document).ready function
$(document).ready(function () {
var status = false;
$("#sliderimg").on("click", function () {
if (status === false) {
$("#tabs-minigames").show();
status = true;
} else {
$("#tabs-minigames").hide();
status = false;
}
});
});

Not rendering masonry layout

I am trying to build a masonry page with some images. here is my code
CSS
<style>
.masonryImage{float:left;}
</style>
JavaScript
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<!--<script src="<?=base_url('assets/js/bootstrap.min.js')?>"></script>-->
<script src="<?=base_url('masonry/masonry.min.js')?>"></script>
<script src="<?=base_url('masonry/masonry.js')?>"></script>
<script type="text/javascript">
var container = $('#container');
container.imagesLoaded( function(){
container.masonry({
itemSelector : '.masonryImage'
});
});
</script>
HTML
<body id="container" style="height:100%;width:100%;background-color:#309be9;">
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Playing-fetch.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Polar-bear.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-precious.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-baby-penguin.....jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-And-just-because-well-just-because-we-CAN.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Bunnies-and-flowers...jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-captionme.jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Its-mum-is-called-Alinga..jpg" alt="">
</div>
<div class="masonryImage">
<img src="http://cdn.cutestpaw.com/wp-content/uploads/2013/11/s-Curious-bobcat-cub-by-Megan-Lorenz.jpg" alt="">
</div>
</body>
I dint understand where the bug is, the page is not rendering in mansory style.
please suggest.
UPDATE:
After trying the two suggested javascripts the images started overlapping . Actually the code itself is not responsible for this. But something is going wrong with masonry. here is the screen shot
If you notice clearly i highlighted with a red mark, it shows some of the images and hiding!!
Ahh this is playing with me
If i try inspect element, the images are returning to their position
Too puzzeled
I don't see an initialization of Masonny in your code:
$(document).ready(function (){
var $container = $('#container');
$container.masonry({
columnWidth: 200,
itemSelector: '.masonryImage'
});
})
Check if your js is properly called.
Either use masonry.min.js or masonry.js it's good to use masonry.min.js if your are deploying.
To check if your js is called properly, view source and open the js link or place a simple alert inside your js.
EDIT: You seem to use imagesloaded which is not part of mansory, but can be used with mansory. If you want to initiate masonry, you have to replace your code with
$( document ).ready(function() {
$('#container').masonry({
columnWidth: 200,
itemSelector: '.item'
});
});
or with your current code you have to add imagesloaded.js

how to change the background images with fade

I have the code below,and I want to images to be change with a fade,the images now are been replaced by the function 'changeBg',but they are just been replaced without fade.
how can I "merge" between the function that's changing the images and the function that in charge of the fade.
thanks.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title>none</title>
<link rel="stylesheet" type="text/css" href="Css/design.css" >
<script src="query-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(document).ready(function() ({$('').fadeIn(1000);
});
</script>
<script language="JavaScript">
function changeBg (color) {
document.getElementById("wrapper").style.background="url(Images/"+color+".jpg) no-repeat";}
</script>
</head>
<body>
<div id="wrapper" class="wrapper">
<div class="logo"><img border="0" src="Images/logo.png" >
</div>
<div class="menu">
<img border="0" src="Images/arrowleft.png" >
<img border="0" src="Images/black.png" onclick="changeBg(this.name);" name="black">
<img border="0" src="Images/blue.png" onclick="changeBg(this.name);" name="blue">
<img border="0" src="Images/fuksia.png" onclick="changeBg(this.name);" name="fuksia">
<img border="0" src="Images/brown.png" onclick="changeBg(this.name);" name="brown">
<img border="0" src="Images/orange.png" onclick="changeBg(this.name);" name="orange">
<img border="0" src="Images/red.png" onclick="changeBg(this.name);" name="red">
<img border="0" src="Images/grey.png" onclick="changeBg(this.name);" name="grey">
<img border="0" src="Images/white.png" onclick="changeBg(this.name);" name="white">
<img border="0" src="Images/arrowright.png" >
</div>
</body>
</html>
Thanks!
If I understand you correctly, you might be able to fade the background out, change it, then fade it back in again? Like this:
function changeBg (color) {
$('#wrapper').fadeOut(1000,function(){
$(this).css('background','url(Images/'+color+'.jpg) no-repeat').fadeIn(1000);
});
}
The cross-fading (fade out while fading in) is achieved in jQuery by having the statements straigh in line and not inside functions from previos animation.
Also, I understand that you want JUST THE BACKGROUND IMAGE to fadeout and fadein; not the actual contents of the page.
To achieve that, make your background image a separate item altogether but inside of the main div you have backgrounded:
<div id='wrapper' style='position:relative' > <!-- must be relative -->
<img id='bg1' src='initial.image' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
<img id='bg2' src='initial.imageTWO' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
</div>
function changeBackground(which) {
$('#bg'+which).attr('src','current-image.xxx').fadeOut('slow');
which = (which = 1) ? 2 : 1;
$('#bg'+which).attr('src','next-image.xxx').fadeIn('slow');
setTimeout('changeBackground('+which+')',2000);
}
$(document).ready( function () {
$('#bg1').attr('src','image-name.xxx').fadeIn('slow');
setTimeout('changeBackground(1)',2000); //every 2 seconds?
. ......
});
In case you have various images for the "slide show", you might want to add a random
number generation for which picture to show next.

Categories

Resources