I'm trying to build a page so me and my team can position some images freely on the screen. The problem is that I can't figure out a way to make those images draggable. I tried to figure out by myself and came upon this nice topic about it: HTML5 drag and drop to move a div anywhere on the screen?
I've tried to apply this idea to my page and replace "getElementsByID" with "getElementsByClassName" but no dice.
In addition, it would be twice as nice if the draggable image were to respect the responsiveness of the page, if anyone knows how to do that.
Here is the codepen with my attempt: http://codepen.io/GuiHarrison/pen/EsHyr
Thanks!
Well, I just made this up, it's kinda buggy, but you can play around with it.
<html>
<head>
<style>
#mydiv{
width: 100px;
height: 100px;
border: solid black 1px;
position: absolute;
}
</style>
</head>
<body>
<div id="mydiv" onmousedown="ismousedown(1)" onmouseup="ismousedown(0)" onmousemove="mousemove(event)"></div>
<script>
var mousedown = false;
function ismousedown(tf){
if(tf == 1){
mousedown = true;
}
else{
mousedown = false;
}
}
function mousemove(event){
if(mousedown){
document.getElementById("mydiv").style.left=event.pageX;
document.getElementById("mydiv").style.top=event.pageY;
}
}
</script>
</body>
You can use kineticjs for this. Check this!
http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/
This is more relevant,
http://html5example.net/entry/html5-canvas/html5-canvas-drag-and-drop-multiple-images-with-kineticjs
Related
Greetings and thanks in advance for the help. My first hack at javascript. Just trying to add a 2em black border around the slider, and remove the mouse pointer when hovering over the slider (I don't wish to offer links from the pictures).
Link is: www.bakashana.org/test-slider
Here is the entire code:
<html>
<head>
<script language="JavaScript1.1">
<!--
var slideimages=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
//-->
</script>
</head>
<body>
<center><img src="https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/cropped-girls-jump-compressor-400x300_c.jpg" name="slide" border="2em" width=400 height=300></center>
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/cropped-girls-jump-compressor-400x300_c.jpg","https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/All-the-ladies-compressor-400x300_c.jpg","https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/highcompress-banner20-400x300_c.jpg","https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/banner10-1-compressor-400x300_c.jpg","https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/cropped-banner-testing-compressor-400x300_c.jpg")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
</body>
</html>
Okay this as you mentioned in comment so there it is. Removing cursor with simple CSS:By adding cursor:none property to slider and using pseudo class :hover to checking if the cursor is hovering the given div and then apply border property to it on other hand disabling the mouse clicks on your slider like this but we need to use jquery for this i have added the jquery in snippet working example below.
var event = $("#yourSlider").click(function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
// disable right click
$("#yourSlider").bind('contextmenu', function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
return false;
});
#yourSlider{
background:orange;
width:400px;
height:300px;
cursor:none;
}
#yourSlider:hover{
border:1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="yourSlider"></div>
Thank you all for your help! I tried the abovementioned solutions but wasn't able to get them to work properly (the mouse hand continued to be seen on scroll-over). I found the easiest possible solution, I thought I would post it for others to see.
<style>
#yourSlider{
width:400px !important;
height:300px !important;
border:.2em solid black;
pointer-events:none !important;
}
</style>
The 'pointer-events:none !important' taking care of the scroll-over issue (it didn't work without the !important added), and the border taking care of the border issue.
Thanks again to all who contributed!
I'm quite new to using the fullpage.js pluging and am using it for my portfolio site. The landing page uses the fullpage plugin and shows a couple of images of projects. I would like these background images to be links to different pages. Is there a way to achieve this? I've looked all over the place, but can't seem to find an answer.
Thanks!
You can't turn a background image into a link, but you can turn an element into one with a click handler and you can give that element a background image.
<div id="myDiv">
</div>
<style>
#myDiv {
background-image: url(http://i.imgur.com/xKUoV94.png);
height: 300px;
cursor: pointer;
}
</style>
<script type="text/javascript">
$(function () {
$('#myDiv').click(function () {
window.location.href = 'http://google.com';
});
});
</script>
http://codepen.io/Chevex/pen/NGKaPr
I am looking into adding a single page overlay when a user clicks the "Help" button in a web app I've created. Below is an example of what I want to achieve
I have jquery mobile implemented on my pages with javascript. I looked into the jquery mobile popup panels that overlay a page but it wouldn't serve my purposes.
What resources, libraries, language, etc would I go about doing this? I tried to google but the I get irrelevant results.
I haven't try it, but you can put the background in a div leaving it in behind the classic background (using low css z-index) with a fixed position (absolute position), a fixed width/height (100%/100%) and a trasparency.
When the user click the "Help" buttons you change the z-index putting it on the front of the page.
UPDATE
Assuming a html layout similar like this:
<html>
<head>...</head>
<body>
<div id="container">
<!-- some others divs with the content of the page and the help link -->
HELP
</div>
<div id="over_image"> <!-- add this -->
<img src="path_to_the_overlapping_image" alt="overlap image" />
</div>
</body>
</html>
A default CSS like this
div#container {
z-index: 100;
}
div#over_image {
z-index: -100; // by default the over image is "behind" the page
position: absolute;
top: 0px;
left: 0px;
width: 100%; // or puts the width/height of the "screen" in pixels
height: 100%;
}
div#over_image img {
width: 100%;
height: 100%;
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
And at the end the jQuery function
$("a#help_button").on("click", function(event){
event.preventDefault(); // it's not really a link
$("div#over_image").css("z-index", "1000");
})
You should implement the "hide" function too, to "reset" the overlapping image on some action, maybe something like this:
$("div#over_image img").on("click", function(){
// when the user click on the overlap image, it disappears
$("div#over_image").css("z-index", "-100");
})
I haven't try it, maybe there are some more little things to change to make it works correctly, but it is a good begin.
SOME REFERENCES
Opacity / transparency: http://www.w3schools.com/css/css_image_transparency.asp
jQuery css: http://api.jquery.com/css/
I wish I knew how to write this myself.
http://www.cubancouncil.com/work/project/coppola-winery/
The linked page has the exact function I would like to use. How I believe their script works. Click an image which hides the container div for that image by sliding it off to the right and loads/slides in a larger image from the right to left which is in a fixed position.
If someone here is nice enough to answer this question with a solution would you mind taking it a step further and commenting on portions of your code so I can link it to the proper html?
I think understanding this one script would set me on a path to nailing down more advanced Javascript & Jquery. Thanks.
EDIT: I found a better example with some code provided. Go to the section where it talks about how to slide your element left. If you have questions, just let us know.
I've also taken the liberty to give you a full working example (exact same as the one in the article) so you can just run it in your browser
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<style>
.slide {
position: relative;
background-color: gray;
height: 100px;
width: 500px;
overflow: hidden;
}
.slide .inner {
position: absolute;
left: -500px;
bottom: 0;
background-color:#e3e3e3;
height: 30px;
width: 500px;
}
</style>
<script>
$(document).ready(function() {
$('#slideleft button').click(function() {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() :
0
});
});
});
</script>
</head>
<body style>
<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner">Slide to the left</div>
</div>
</body>
</html>
The article explains most of it but I'll give you a quick run-down. In essence what we're doing is we're making it so that whatever you're trying to slide, we are altering the left position so that it comes out. Initially, I set the CSS to be -500px so it is outside the screen. The javascript then listens for the button click and moves the div by changing the left position. Jquery's animate() function does most of the work though.
The confusing bit about this is the ternary operator. You can find more info on that here. Essentially it just checks the left property to see if it's 0. If it is, we want to move it back outside to -500px. If the left isn't 0px, we know it must be outside the screen, so we move it back to 0px.
If there is anything else you're confused about let us know.
Created simple fiddle for you (notice it WORKS ON HOVER!!) but it should get you going, it's kinda late in my country so my brain doesn't work properly:)
Fiddle here
$(document).ready(function(){
var innerHeigth = $(".inner").outerHeight();
$(".wrapper").hover(function(){
$(".inner").stop().animate({top:-innerHeigth},1000);
//alert(innerHeigth)
},function(){
$(".inner").stop().animate({top:0},1000);
});
});
Im trying to use java script to center a page horizontally.
So far i got this:
<body onload="scrollBy((document.body['scrollWidth'] - 0) / 2, 0)">
It kinda works, but not very good. I have a large width flash component
that I need centered when the page loads and also after any click on the internal buttons.
I was thinking of making a call from flash to a javascript that would scroll the page to an HTML anchor.
Something along the lines of:
<script type="text/javascript">
function pageMid() {
window.location.href="#mid"
}
</script>
But the anchors don't align to middle.
Any ideas?
Thank you.
This worked:
<script type="text/javascript">
function pageMid() {
scrollTo(1000, 0);
}
</script>
<body onload="pageMid();">
Now I just cant figure it out on how to call this from flash catalyst...
It sounds like you want to center the element vertically, not horizontally. If you know the size of the element you're trying to center, use CSS:
<style>
#myThing {
height: 300px;
width: 400px;
position:absolute;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-200px;
}
</style>
<div id="myThing"></div>
This works
$(function () {
scrollTo(($(document).width() - $(window).width()) / 2, 0);
});
Edit:
I got 2 downvotes for this. Maybe because I did not specify that this solution requires jQuery?