I'm new to Raphael as well as to JS.. I need to be able to drag the Canvas itself, not the object in it, to various locations on the screen. I looked everywhere on the web and can't find a clue. Of course, the user would have to try and grab the canvas at some free spot ... free from child objects...
Any clue would be greatly appreciated.
Here is how I constructed the Canvas on this site:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Raphael Play</title>
<script type="text/javascript" src="js/raphael.js"></script>
<script type="text/javascript" src="js/mood.js"></script>
<style type="text/css">
#canvas_container {
position:absolute;
width: 803;
left:200px;
top:100px;
border: 0px solid #555;
-webkit-box-shadow: 0px 0px 84px #999;
-moz-box-shadow: 0px 0px 84px #999;
box-shadow: 0px 0px 84px #000;
border-radius: 20px 20px 20px 20px;
background-color:#fff;
background-image:url(static/VAZZZ.png);
}
</style>
</head>
<body>
<div id="canvas_container" ></div>
</body>
</html>
Here is a cross-browser drag function and event listener for the <div>.
http://jsfiddle.net/MtbJe/
Your CSS was incomplete (no height specified and width was missing "px").
The box-shadow significantly reduces the smoothness of the dragging, you may actually want to use an image in this instance (remove the box-shadow to see how much smoother it is).
If you want to make something else in the UI be the actual drag handler (but still move the entire <div>) you will have to change the event listener to be for that element and change the 15th line of the JavaScript from:
var dragObj = e.target ? e.target : e.srcElement;
to something like:
var dragObj = e.target ? e.target.parentNode : e.srcElement.parentNode;
I've had this code saved for many years and I believe the original author is http://www.quirksmode.org/ though I don't see it there anymore. You will find a lot of great information about JS on this site. Again, this is a cross-browser script which I'm not sure you need given you are using canvas. If you are very new to JS and working with the DOM, then I'm sure the code will look a bit confusing and I encourage you to ask additional questions.
Related
I'm trying to figure out how to create up to 4 vertical stripes on the background of a DIV. Each stripe is 4 pixels wide and is the same h=height as the div. Also I need to have the stripes be dynamic. There could be any number of the 4 stripes visible at runtime based on some data in an object.
Here's an image of the general idea.
I've been trying to implement this with css and sass as well as javascript but not making progress. Any help would be greatly appreciated.
Thanks
If I am correctly understanding your question, box-shadow might help you solve this problem. Here is what I have tried,
Initialize a div with some height and width
Now we have psuedo elements :before and :after use it to create strips, i.e 2 strips will appear.
Now, box-shadow comes into picture for every strip you can n number of strips using box-shadow .
Here is my attempt.
.progress{
width:140px;
height:40px;
background-color:white;
border:2px solid black;
}
.progress::after{
content:'';
position:absolute;
width:4px;
height:inherit;
background-color:red;
box-shadow:4px 0 lightgreen
}
.progress::before{
content:'';
position:absolute;
width:4px;
height:inherit;
background-color:blue;
left:18px;
box-shadow:4px 0 pink
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="progress"></div>
</body>
</html>
Hope it helps you.
Hey guys im trying to use a ie feature or bug, but it works fine for my solution.
In IE if i have a smaller svg with a larger polyline, the polyline shows through the svg edges.
The same code not work on other browsers and i need to understand why works only on IE.
Has any css or js that i can change to set all browsers to make results equal ie ?
Here is the code, run on IE and run on other browsers, you only view the line in ie and is what i need.
svg
{
border: solid 1px red; margin: 40px 40px 20px 20px;
}
<!DOCTYPE html> <html> <style> svg { border: solid 1px red; margin: 40px 40px 20px 20px; } </style> <body> <svg height="20" width="50"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180 200,-10" style="fill:none;stroke:black;stroke-width:3" /> </svg> </body> </html>
See that only IE draws the line over the edges.
Setting a style overflow: visible; for the svg element should help.
For details on the rules, see the SVG overflow spec. A overflow: hidden; is set by a conforming browser stylesheet if a <svg> element is not the root of a stand-alone document.
Note that you will still have to deal with the overflow rules of all parent elements.
Though I can see this question has been asked before I really need a solution without the use of JQuery, its for an embedded web interface and I don't want the overhead of loading jQuery. I need to be able to manipulate sprites using just the JS on the single page, the state of the sprite is dependent on certain JS variables. I'm sure this must be possible, but can't find anything without the use of JQuery.
The easiest way (I think) is to define your own css classes and change those clasess on certan events. i.e.
<style type="text/css">
.bg1{
/* Some attributes set here */
background-position:center;
}
.bg2{
/* Some attributes set here */
background-position:left;
}
</style>
and then you put your javascript like this
document.getElementById("some_id").class = "bg2";
I think you can use Object.style.backgroundPosition="position" to change your desired background position .
Try this code
<!DOCTYPE html>
<html>
<head>
<style>
div
{
background-image: url('example.png');
background-repeat: no-repeat;
width: 400px;
height: 400px;
border: 1px solid #000000;
}
</style>
<script>
function displayResult()
{
document.getElementById("div1").style.backgroundPosition="center bottom";
}
</script>
</head>
<body>
<button type="button" onclick="displayResult()">Position background image</button>
<br>
<div id="div1">
</div>
</body>
</html>
Reference
I am setting up a website like this (vertical slideshow almost):
http://mikelegacywebdesign.com/scrollpage_test/index.html
The one thing I am looking to do that I can't figure out is how to make the scrolling SNAP to the point where the color change is while scrolling.
For example, when scrolling, you get to about 50-100 px near the top of the next color you are scrolling to, it would be nice if that would snap to that point, instead of just continuing to scroll, because it is hard to get that "frame" to perfectly align. It's dependent on the user to scroll the perfect amount so that they are viewing the full frame, and not pieces of the former or next frame in the sequence.
Anyone that knows if there is a jQuery plugin or something for this would be my hero.
Here is the ENTIRE page so far. It's simple coding to get the current effect:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Scrollpage Test</title>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
.container { height: 400%; width: 100%; }
.section { height: 35%; width: 100%; }
#section1 { background-color: #1d9ad7; }
#section2 { background-color: #c83e3d; }
#section3 { background-color: #75b946; }
#section4 { background-color: #f4be2f; }
</style>
</head>
<body>
<div class="container">
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
<div class="section" id="section4"></div>
</div>
</body>
</html>
Yes, it's possible. Their code is quite awful though. While animating scrollTop, you'll want to make sure that additional user-input that normally leads to scrolling is ignored. Have a look at this test-case to get an idea about how to prevent a user from scrolling.
You can get the desired effect using the
scroll() jumpScroll() scrollBy()
and a little bit of your own code.
For example,
function jumpScroll() {
window.scroll(0,250);
}
Would scroll to that point on the page
I was after the same thing so asked a similar question a few weeks ago. I found an addon called stellar.js that had the functionality but the demo was in horizontal and I couldnt for the life of me change it to vertical. Anyways, someone posted a solution, which I edited for mousescroll instead of click: http://jsfiddle.net/djsbaker/dxzk4/
On a site note, I had issues with it being quite laggy with huge fixed background images. In fact very laggy, but I was using parallax which didn't mix well.
I have a question regarding image alignment with CSS. For example I have created a css class as below:
.link {
background: url("images/image1.gif") scroll right;
}
and below is the markup
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<p class="link">This is a link</p>
</head>
<body>
</body>
</html>
When I check in the browser I get the image on the text. I want it after the text i mean
This is a link (this is where I want the image to appear)
Try
.link {
background: url("images/image1.gif") top right no-repeat;
padding-right: 32px; /* or the width of your image */
}
Not sure if I understand right, but assuming you trying to display image right after text ends you might try something like that:
.link {
background: url("images/image1.gif") scroll right;
padding-right: 20px; /* adjust to fit nicely with your design */
}
hope it helps :)
shouldn't it be position right not scroll right?
You can also give the link text some padding to clear the background picture.