Search Results

Search found 124 results on 5 pages for 'raphael essoo snowdon'.

Page 1/5 | 1 2 3 4 5  | Next Page >

  • Attach text on path in Raphaël?

    - by hex
    Does anyone know how to attach a text to a path in Raphaël? Something like http://www.w3.org/TR/SVG11/images/text/toap02.svg I know that jQuery SVG can do that, but I can't find an easy way to do this by using Raphaël js. I want to attacht this text to a bezier curve and move it.

    Read the article

  • Raphael js text positioning: centering text in a circle

    - by j-man86
    Hey everyone, I am using Raphael js to draw circled numbers. The problem is that each number has a different width/height so using one set of coordinates to center the text isn't working. The text displays differently between IE, FF, and safari. Is there a dynamic way to find the height/width of the number and center it accordingly? Here is my test page: http://jesserosenfield.com/fluid/test.html and my code: function drawcircle(div, text) { var paper = Raphael(div, 26, 26); //<< var circle = paper.circle(13, 13, 10.5); circle.attr("stroke", "#f1f1f1"); circle.attr("stroke-width", 2); var text = paper.text(12, 13, text); //<< text.attr({'font-size': 15, 'font-family': 'FranklinGothicFSCondensed-1, FranklinGothicFSCondensed-2'}); text.attr("fill", "#f1f1f1"); } window.onload = function () { drawcircle("c1", "1"); drawcircle("c2", "2"); drawcircle("c3", "3"); }; Thanks very much!

    Read the article

  • Detecting wether a point is inside or outside of a raphael.js shape

    - by betamax
    I have a raphael.js shape which I am plotting circle's on top of. I only want a circle to appear if the circle does not go off the boundary of the shape it is being plotted on to. To make this more clear, here is an example of what I do not want to happen: I want the circles outside of the grey area not to appear. How would I detect wether a circle is inside or outside of the grey shape?

    Read the article

  • Why does Raphael's framerate slow down on this code?

    - by Bob
    So I'm just doing a basic orbit simulator using Raphael JS, where I draw one circle as the "star" and another circle as the "planet". It seems to be working just fine, with the one snag that as the simulation continues, its framerate progressively slows down until the orbital motion no longer appears fluid. Here's the code (note: uses jQuery only to initialize the page): $(function() { var paper = Raphael(document.getElementById('canvas'), 640, 480); var star = paper.circle(320, 240, 10); var planet = paper.circle(320, 150, 5); var starVelocity = [0,0]; var planetVelocity = [20.42,0]; var starMass = 3.08e22; var planetMass = 3.303e26; var gravConstant = 1.034e-18; function calculateOrbit() { var accx = 0; var accy = 0; accx = (gravConstant * starMass * ((star.attr('cx') - planet.attr('cx')))) / (Math.pow(circleDistance(), 3)); accy = (gravConstant * starMass * ((star.attr('cy') - planet.attr('cy')))) / (Math.pow(circleDistance(), 3)); planetVelocity[0] += accx; planetVelocity[1] += accy; planet.animate({cx: planet.attr('cx') + planetVelocity[0], cy: planet.attr('cy') + planetVelocity[1]}, 150, calculateOrbit); paper.circle(planet.attr('cx'), planet.attr('cy'), 1); // added to 'trace' orbit } function circleDistance() { return (Math.sqrt(Math.pow(star.attr('cx') - planet.attr('cx'), 2) + Math.pow(star.attr('cy') - planet.attr('cy'), 2))); } calculateOrbit(); }); It doesn't appear, to me anyway, that any part of that code would cause the animation to gradually slow down to a crawl, so any help solving the problem will be appreciated!

    Read the article

  • Raphael.js: Adding a new custom element

    - by Claudia
    I would like to create a custom Raphael element, with custom properties and functions. This object must also contain predefined Raphael objects. For example, I would have a node class, that would contain a circle with text and some other elements inside it. The problem is to add this new object to a set. These demands are needed because non-Raphael objects cannot be added to sets. As a result, custom objects that can contain Raphael objects cannot be used. The code would look like this: var Node = function (paper) { // Coordinates & Dimensions this.x = 0, this.y = 0, this.radius = 0, this.draw = function () { this.entireSet = paper.set(); var circle = paper.circle(this.x, this.y, this.radius); this.circleObj = circle; this.entireSet.push(circle); var text = paper.text(this.x, this.y, this.text); this.entireSet.push(text); } // other functions } var NodeList = function(paper){ this.nodes = paper.set(), this.populateList = function(){ // in order to add a node to the set // the object must be of type Raphael object // otherwise the set will have no elements this.nodes.push(// new node) } this.nextNode = function(){ // ... } this.previousNode = function(){ // ... } }

    Read the article

  • Raphael Scope Drag n drop multiple paper instances

    - by donald
    I have two Raphael paper instances. In both I want to drag and drop an element (circle). It is important for me to assign both these circles the same id. I expected no problem, as both are in different paper instances and therefore in different scope. What happens is, that somehow both elements react, when I have clicked both elements at least once. If I however give these elements different IDs everything works fine (each element only calls its "start", "drag" and "up" function if draged around). Is this intended behaviour of Raphael and do I have to assign different IDs to the elements in the different paper instances? Hopefully not and you can point me to the right direction :-) Thanks a lot for your Help in advance, Here comes the code: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>DragNDrop</title> <script src="raphael-min.js"></script> </head> <body> <h1>Paper1</h1> <div id="divPaper1" style ="height: 150px; width: 300px; border:thin solid red"></div> <h1>Paper2</h1> <div id="divPaper2" style ="height: 150px; width: 300px; border:thin solid red"></div> <script> start1 = function () { console.log("start1"); } drag1 = function () { console.log("move1"); } up1 = function () { console.log("up1"); } start2 = function () { console.log("start2"); } drag2 = function () { console.log("move2"); } up2 = function () { console.log("up2"); } var paper1 = Raphael("divPaper1", "100%", "100%"); var circle1 = paper1.circle(40, 40, 30); circle1.attr("fill", "yellow"); circle1.id = "circle"; //both circles get the same id circle1.drag(drag1, start1, up1); paper2 = Raphael("divPaper2", "100%", "100%"); var circle2 = paper2.circle(40, 40, 30); circle2.attr("fill", "red"); circle2.id = "circle"; //both circles get the same id circle2.drag(drag2, start2, up2); </script> </body>

    Read the article

  • scaling svg paths in Raphael 2.1

    - by user1229001
    I'm using SVG paths from a wikimedia commons map of the US. I've singled out Pennsylvania with its counties. I'm feeding the paths out of a database and using Raphael 2.1 to put them on the page. Because in the original map, Pennsylvania was so small and set at an angle, I'd like to scale up the paths and rotate Pa. so that it isn't on an angle. When I try to use Raphael's transform method, all the counties look strange and overlapped. I gave up on setting the viewBox when I heard that it doesn't work in all browsers. Anyone have any ideas? Here is my code: $(document).ready(function() { var $paths = []; //array of paths var $thisPath; //variable to hold whichever path we're drawing $.post('getmapdata.php', function(data){ var objData = jQuery.parseJSON(data); for (var i=0; i<objData.length; i++) { $paths.push(objData[i].path); //$counties.push(objData[i].name); }//end for drawMap($paths); }) function drawMap(data) { // var map = new Raphael(document.getElementById('map_div_id'),0, 0); var map = new Raphael(0, 0, 520, 320); //map.setViewBox(0,0,500,309, true); for (var i = 0; i < data.length; i++) { var thisPath = map.path(data[i]); thisPath.transform(s2); thisPath.attr({stroke:"#FFFFFF", fill:"#CBCBCB","stroke-width":"0.5"}); } //end cycling through i }//end drawMap });//end program

    Read the article

  • Raphael JS image animation performance.

    - by michael
    Hi, I'm trying to create an image animation using Raphael JS. I want the effect of a bee moving randomly across the page, I've got a working example but it's a bit "jittery", and I'm getting this warning in the console: "Resource interpreted as image but transferred with MIME type text/html" I'm not sure if the warning is causing the "jittery" movement or its just the way I approached it using maths. If anyone has a better way to create the effect, or improvements please let me know. I have a demo online here and heres my javascript code: function random(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function BEE(x, y, scale) { this.x = x; this.y = y; this.s = scale; this.paper = Raphael("head", 915, 250); this.draw = function() { this.paper.clear(); this.paper.image("bee.png", this.x, this.y, 159*this.s, 217*this.s); } this.update = function() { var deg = random(-25, 25); var newX = Math.cos(Raphael.rad(deg)) * 2; var newY = Math.sin(Raphael.rad(deg)) * 2; this.x += newX; this.y += newY; if( this.x > 915) { this.x = 0; } if( this.y > 250 || this.y < 0 ) { this.y = 125; } } } $(document).ready(function() { var bee = new BEE(100, 150, 0.4); var timer = setInterval(function(){ bee.draw(); bee.update(); }, 15); }

    Read the article

  • Target iframe Raphael Js

    - by user299343
    Ive been trying to target iframe using Raphael JS heres some sample code var c = paper.circle(10, 10, 10); c.attr({href: "http://google.com/", target: "top"}); v var t = paper.text(250, 50, "Raphaël\nkicks\nbutt!"); t.attr({href: "http://google.com/", target: "_blank"}); Also..cant get href to work with text ar t = paper.text(50, 50, "Raphaël\nkicks\nbutt!"); t.attr({href: "http://google.com/", target: "_blank"});

    Read the article

  • How to define paper in raphael JS liberary?

    - by cj333
    Hi, I want to learn raphael JS liberary to draw a square. I copied the official code, but it is not work, "paper is not defined on line 34". how to define it? The demo is on http://www.irunmywebsite.com/raphael/additionalhelp.php the left menu "animate" ,Thanks. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Raphaël · Gear</title> <style type="text/css"> body { background: #333; color: #fff; font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif; } #holder { height: 480px; left: 50%; margin: -240px 0 0 -320px; position: absolute; top: 50%; width: 640px; } #copy { bottom: 0; font: 300 .7em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif; position: absolute; right: 1em; text-align: right; } #copy a { color: #fff; } </style> <script src="raphael-min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> var a = paper.circle(320, 100, 60).attr({fill:'#FF0000'}); a.animate({ 'translation': '0,300' }, 500, 'bounce'); var b = paper.circle(320, 100, 60).attr({fill:'#FFFF00'});; b.animate({ cx: 320, cy: 300 }, 500, 'bounce'); var path1=paper.path("M114 253").attr({"stroke": "#f00", "stroke-width":3}); path1.animate({path: "M114 253 L 234 253"},3000,function(){ var path2=paper.path("M234 253").attr({"stroke": "#f00","stroke-width":3}); path2.animate({path: "M234 253 L 234 134"},3000,function(){ var path3=paper.path("M234 134").attr({"stroke": "#f00","stroke-width":3}); path3.animate({path: "M234 134 L 97 134"},3000); }); }); </script> </head> <body> <div id="stroke"></div> </body> </html>

    Read the article

  • Why is Raphael.JS creating paper with dimensions 1000x1000?

    - by Bryan
    I have a demo using raphael.js. The code for it is very simple but when viewed in Internet Explorer (less that version 9) I get a Raphael canvas that is 1000px by 1000px and I can't figure out why. I'm using version 1.5.2 of Raphael. Code below: HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Raphael Test</title> <link rel="stylesheet" type="text/css" href="test.css"> <link href="../shared/img/favicon.png" rel="shortcut icon"> </head> <body> <div id="graph"></div> <script src="../shared/js/raphael/raphael-min.js" type="text/javascript"> </script> <script src="test.js" type="text/javascript"> </script> </body> </html> CSS /* Graph */ #graph { padding: 5px; width: 477px; height: 299; } JS var holder = document.getElementById('graph') , width = holder.scrollWidth , height = Math.round(width * 0.5625) + 25 , p = Raphael(10, 50, width, height) , c = p.circle(p.width - 50, p.height - 50, 50); alert(p.width + ' & ' + p.height); I found a discussion in Raphael's Google group with the same problem but no resolution.

    Read the article

  • Raphael JS - Parsing an SVG on the fly

    - by Chris
    I found a neat SVG parser at http://bkp.ee/atirip/ which parses an SVG file and outputs it into javascript that uses the Raphael JS library (raphaeljs.com). You'll notice in the source code at http://bkp.ee/atirip/svg2rdemo.php : <script> jQuery(document).ready( function() { $("#c1").each(function(){ var c = Raphael(this, 190, 154, 0, 0); var g1 = c.set(); ... it creates variables like g1, g2, etc. But it also reuses these variables. I would like to create unique variables for each group. In my .ai file, I have named my groups and I would like to use these names to create the variable names. Where in http://bkp.ee/atirip/f/svgToRaphaelParser.php.zip should I look to make this change?

    Read the article

  • Raphael js library: problems with animateAlong in IE7

    - by Andrei
    Hi there, I'm having trouble making a simple shape move along a path in IE7 (the only version of IE I tried, actually). The following code works fine in chrome and firefox, but not IE. I couldn't find an obvious reason, has anybody seen something similar? canvas.path(rPath.path).attr("stroke", "blue"); var circle = canvas.circle(rPath.startX, rPath.startY, 5); circle.animateAlong(rPath.path, 3000, true); My rPath variable has the path and the starting point coordinates. Microsoft script debugger points to this line as the one where the code breaks: os.left != (t = x - left + "px") && (os.left = t); (line 2131 inside the uncompressed raphael.js script file, inside Element[proto].setBox = function (params, cx, cy) {...}) Any ideas? Any experience (good or bad) with raphael's animateAlong in IE7? TIA, Andrei

    Read the article

  • Font-face, Raphael and IE8

    - by Sucrenoir
    I am desesperatly trying to get some google font faces to work with Raphael (SVG / VML rendering JavaScript library) on IE8. At first i tried the google fonts code. My second try has been to download and convert the fonts to host my own more complete css. Now the fonts show in the html part of the page (inside a modified bootstrap nav dropdown), but it does not work in the VML canvas (generated by Raphael). Example here : http://beta.yetiprint.com/fr/etiquettes-autocollantes/4-etiquettes-couleur-ronde.html Is it possible to get that working in iE8? Any clue?

    Read the article

  • Problem saving as png a SVG generated by Raphael JS in a canvas

    - by ClemDesm
    Hi fellow SOers, I'm trying to convert a SVG generated by Raphael JS (and the user, since you can drag and rotate the images). I followed this Conversion of SVG to Jpeg but still can't get it. It must be easy but I can't put my finger on what I get wrong. I got my svg in a div with #ec as id and the canvas's one is #canvas. function saveDaPicture(){ var img = document.getElementById('canvas').toDataURL("image/png"); $('body').append('<img src="'+img+'"/>'); } $('#save').click(function(){ var svg = $('#ec').html(); alert(svg); canvg('canvas', svg, {renderCallback: saveDaPicture(), ignoreMouse: true, ignoreAnimation: true}); }); The alert gives me : <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="512"> <desc>Created with Raphael</desc> <defs></defs> <image x="0" y="0" width="300" height="512" preserveAspectRatio="none" href="imageurl.jpg"></image> <rect x="168" y="275" width="52" height="70" r="0" rx="0" ry="0" fill="none" stroke="#000" stroke-dasharray="8,3" transform="rotate(21.91207728 194 310)" style="opacity: 1; display: none; " opacity="1"></rect> <circle cx="50" cy="50" r="50" fill="none" stroke="#000"></circle> <image x="358" y="10" width="39" height="138" preserveAspectRatio="none" href="imageurl2.png" style="cursor: move; "></image> <image x="397" y="10" width="99" height="153" preserveAspectRatio="none" href="imageurl3.png" style="cursor: move; "></image> <image x="184" y="286" width="10" height="10" preserveAspectRatio="none" href="imageurl4.png" style="cursor: pointer; opacity: 1; display: none; " opacity="1"></image> <image x="204" y="286" width="10" height="10" preserveAspectRatio="none" href="imageurl5.png" style="cursor: pointer; opacity: 1; display: none; " opacity="1"></image> <image x="170" y="277" width="48" height="66" preserveAspectRatio="none" href="imageurl6.png" style="cursor: move; opacity: 1; " r="50" opacity="1" transform="rotate(21.91207728 194 310)"></image> </svg> which is the xml of the svg and if I believe canvg documentation, it's good. Anyway, with this code, the variable img, which should have the converted image data, got the data of an empty png with the dimensions of the svg. The only thing I guess is that the svg generated by Raphael JS is not well formated for canvg (like, href of image should be xlink:href if I follow the W3C recommandations ) Anyone got an idea on this problem ? :D

    Read the article

  • SVG animation along path with Raphael

    - by Toby Hede
    I have a rather interesting issue with SVG animation. I am animating along a circular path using Raphael obj = canvas.circle(x, y, size); path = canvas.circlePath(x, y, radius); path = canvas.path(path); //generate path from path value string obj.animateAlong(path, rate, false); The circlePath method is one I have created myself to generate the circle path in SVG path notation: Raphael.fn.circlePath = function(x , y, r) { var s = "M" + x + "," + (y-r) + "A"+r+","+r+",0,1,1,"+(x-0.1)+","+(y-r)+" z"; return s; } So far, so good. This all works. I have my object (obj) animating along the circular path. BUT: The animation only works if I create the object at the same X, Y coords as the path itself. If I start the animation from any other coordinates (say, half-way along the path) the object animates in a circle of the correct radius, however it starts the animation from the object X,Y coordinates, rather than along the path as it is displayed visually. Ideally I would like to be able to stop/start the animation - the same problem occurs on restart. When I stop then restart the animation, it animates in a circle starting from the stopped X,Y.

    Read the article

  • Drawing half of a Bezier path in Raphael

    - by Fibericon
    Let's say I have a cubic Bezier path as follows (formatted for use with the Raphael path function): M55 246S55 247 55 248 Just an example. This was taken from my drawing application, where I use the cursor to draw a line when the user holds the mouse button down, kind of like a pencil or marker. I'm using jquery's mousemove event to draw the line between two points every time the user moves the mouse. There is another (the reference point) that is taken before the line is drawn, so that the Bezier curve can be created. Here's my question: is it possible to make Raphael only draw half of a given path? I'm aware of the getSubpath() function, but if my understanding of Bezier curves is correct, it would be rather difficult to calculate the second argument. The problem with the animate function is that it creates double lines (that is, it creates the curved line that I want, and the boxy line around it which should not be shown, possibly because the mouse is being moved faster than the animation can handle). Of course, if my approach itself is flawed in some way (or my understanding of the possible solutions), I'd like to hear it. Any help would be appreciated.

    Read the article

  • Raphael SVG VML Implement Multi Pivot Points for Rotation

    - by Cody N
    Over the last two days I've effectively figured out how NOT to rotate Raphael Elements. Basically I am trying to implement a multiple pivot points on element to rotate it by mouse. When a user enters rotation mode 5 pivots are created. One for each corner of the bounding box and one in the center of the box. When the mouse is down and moving it is simple enough to rotate around the pivot using Raphael elements.rotate(degrees, x, y) and calculating the degrees based on the mouse positions and atan2 to the pivot point. The problem arises after I've rotated the element, bbox, and the other pivots. There x,y position in the same only there viewport is different. In an SVG enabled browser I can create new pivot points based on matrixTransformation and getCTM. However after creating the first set of new pivots, every rotation after the pivots get further away from the transformed bbox due to rounding errors. The above is not even an option in IE since in is VML based and cannot account for transformation. Is the only effective way to implement element rotation is by using rotate absolute or rotating around the center of the bounding box? Is it possible at all the create multi pivot points for an object and update them after mouseup to remain in the corners and center of the transformed bbox?

    Read the article

  • Raphael.js map default fill colors

    - by RIDER
    I am trying to familiarize myself with raphael.js. I want to create a USA map that already has default colors for each state and those colors stay there. Here is what I came up with. If you look at AK, I'm getting the default color loaded, but if I highlight another state, the default color for AK disappears. I want AK - and other states - to stay the same color. Specifically, I don't know what is clearing out my AK full color. I think part of this statement is clearing out the fill cover when I mouseover a different state: for (var state in aus) { //aus[state].color = Raphael.getColor(); (function (st, state) { st[0].style.cursor = "pointer"; st[0].onmouseover = function () { current && aus[current].animate({fill: "#333", stroke: "#666"}, 500) && (document.getElementById(current).style.display = ""); st.animate({fill: st.color, stroke: "#ccc"}, 500); st.toFront(); R.safari(); document.getElementById(state).style.display = "block"; current = state; }; })(aus[state], state); } Any ideas where I might be going wrong?

    Read the article

  • Can RaphaelJS be object aware?

    - by Rob Wilkerson
    In the course of trying to figure out whether it's possible to contain text within the boundaries of a rectangle using RaphaelJS (and without doing what would seem to be a lot of work), I came across this question (and its answer) which intrigued me. I haven't seen--either before or since reading the answer--any indication that Raphael can do anything like this. My sense, therefore, is that it's a glib answer, but the concept is compelling and I'm just breaking into some Raphael work, so I thought it was worth shining the spotlight on that answer and asking for any clarification someone may be able to give. Thanks.

    Read the article

  • Positioning SVG Elements

    - by Rob Wilkerson
    In the course of toying with SVG for the first time (using the Raphael library), I've run into a problem positioning dynamic elements on the canvas in such a way that they're completely contained within the canvas. What I'm trying to do is randomly position n words/short phrases. Since the text is variable, its position needs to be variable as well so what I'm doing is: Initially creating the text at point 0,0 with no opacity. Checking the width of the drawn text element using text.getBBox().width. Setting a new x coordinate as Math.random() * (canvas_width - ( text_width/2 ) - pad). Altering the x coordinate of the text to the newly set value (text.attr( 'x', x ) ). Setting the opacity attribute of the text to 1. I'll be the first to admit that my math acumen is limited, but this seems pretty straightforward. Somehow, I still end up with text running off beyond the right edge of my canvas. For simplicity above, I removed the bit that also sets a minimum x value by adding it to the Math.random() result. It is there, though, and I see the same problem on the leading edge of the canvas. My understanding (such as it is), is that the Math.random() bits would generate a number between 0 and 1 which could then be multiplied by some number (in my case, the canvas width - half of the text width - some arbitrary padding) to get the outer bound. I'm dividing the width of the text in half because its position on the grid is set at its center. I hope I've just been staring at this for too long, but is my math that rusty or am I misunderstanding something about the behavior of Math.random(), SVG, text or anything else that's under the hood of this solution?

    Read the article

  • SVG -- Replacement for Flash application

    - by Vadi
    We are currently looking at developing flash based applications (using Flex) in a web application. We are now leaning towards to use SVG rapheljs for developing this components. The questions are: Is still SVG platform is widely adopted by browsers (without any plug-ins) are at least down the line of 8-10 months, any adoption is expected by browsers? Cross-browser support is god for us. Is SVG can replace for a small time animation based programming instead of Flash Any comments will be greatly appreciated...

    Read the article

  • How do I apply multiple rotation transforms on a Raphael text object?

    - by Pridkett
    I have a Raphael text object that I would like to rotate around an axis some distance away and also rotate the text accordingly so it stays horizontal. I know this is possible using SVG transformation matrices, but the author of Raphael has stated that they won't be a part of the toolkit anytime soon. Here's some code of what I'd like to do: txt_obj = paper.text(100, 0, "Hello!"); txt_obj.rotate(90, 100, 100); // rotate text so it is sideways at (200,100) txt_obj.rotate(-90); // rotate text back to horizontal Unfortunately, the second rotate command obliterates the translation and rotation accomplished by the first. Ideally I'd like to animate the operation, but I'll take it one step at a time for right now.

    Read the article

  • Raphael - what is the native delay function to draw circles?

    - by 3gwebtrain
    I am using Raphael, to draw 3 circles. how to i make the circles draw each one by one with some time gap? I know there is a option with settimeout, but apart from is there any native function to make delay to draw the circles? my simple code: <div id="paper"></div> var paper = Raphael('paper',500,500); var c1 = paper.circle(50,50,25); var c2 = paper.circle(100,50,25); var c3 = paper.circle(150,50,25); jsfiddle here

    Read the article

1 2 3 4 5  | Next Page >