Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How do I put codes from jsfiddle.net into my website?

Posted on 2016-10-14
4
Medium Priority
?
103 Views
Last Modified: 2016-10-24
I'm trying to put code from jsfiddle into an html page but I couldn't get it work.

how can I do this ?

I have attached the files

Regards
jsfiddle.js
index.html
css.css
0
Comment
Question by:john a
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 35

Expert Comment

by:ste5an
ID: 41843358
Exactly as you see it in index.html. Just add the css and script links. And of course a link to jQuery.
0
 

Author Comment

by:john a
ID: 41843375
I addedd the css and script links in index.html file , but it doesn't show the jsfiddle script .

how jOuery is added ?
0
 

Author Comment

by:john a
ID: 41843380
I have added the jsfiddle and jquery like this :


<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		
      <script type = "text/javascript">
       
		 $(document).ready(function()
{

    var width = 900,
        height = 650;

    var radius = 30; /* radius of circles */
    var numCircles = 10; /* number of circles - you must update link source/target values to match changes in the number of circles */

    var d3color = d3.interpolateRgb("#BAE4B3", "#006D2C"); /* color range for flow lines */

    //A LIST OF LINKS BETWEEN CIRCLES
    var links = [
        {
            source: 0,
            target: 5,
            strength: Math.round(Math.random() * 10)},
        {
            source: 0,
            target: 2,
            strength: Math.round(Math.random() * 10)},
        {
            source: 1,
            target: 3,
            strength: Math.round(Math.random() * 10)},
        {
            source: 2,
            target: 4,
            strength: Math.round(Math.random() * 10)},
        {
            source: 3,
            target: 5,
            strength: Math.round(Math.random() * 10)},
        {
            source: 5,
            target: 0,
            strength: Math.round(Math.random() * 10)},
        {
            source: 2,
            target: 0,
            strength: Math.round(Math.random() * 10)},
        {
            source: 3,
            target: 1,
            strength: Math.round(Math.random() * 10)}
    ];

    function createDefs(defs) {
        var dropShadowFilter = defs.append('svg:filter').attr('id', 'dropShadow');
        dropShadowFilter.append('svg:feGaussianBlur').attr('in', 'SourceAlpha').attr('stdDeviation', 1);
        dropShadowFilter.append('svg:feOffset').attr('dx', 0).attr('dy', 1).attr('result', 'offsetblur');
        var feMerge = dropShadowFilter.append('svg:feMerge');
        feMerge.append('svg:feMergeNode');
        feMerge.append('svg:feMergeNode').attr('in', "SourceGraphic");
    }

    var drag = d3.behavior.drag().origin(Object).on("drag", function() {
        dragmove(this);
    });

    //RANDOMLY GENERATE COORDINATES FOR CIRCLES
    var circles = d3.range(numCircles).map(function(i, d) {
        return [Math.round(50 + (i / numCircles) * (width - 50)), Math.round(30 + Math.random() * (height - 80))];
    });

    //GLOBAL STRENGTH SCALE
    var strength_scale = d3.scale.linear().range([2, 10]) /* thickness range for flow lines */
        .domain([0, d3.max(links, function(d) {
            return d.strength;
        })]);

    var color_scale = d3.scale.linear().range([0, 1]).domain([0, d3.max(links, function(d) {
        return d.strength;
    })]);

    var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

    var g_lines = svg.append("g").attr("class", "lines");
    var g_circles = svg.append("g").attr("class", "circles");
    var g_midpoints = svg.append("g").attr("class", "midpoints");

    //SHADOW DEFINITION
    createDefs(svg.append('svg:defs'));


    $.each(circles, function(i, d) {
        g_circles.append("circle").attr('filter', 'url(#dropShadow)').attr("class", "circle").attr("id", "circle" + i).attr("r", radius).attr("cx", d[0]).attr("cy", d[1]).call(drag);
    });

    g_lines.selectAll(".link_line").data(links).enter().append("path").attr("class", "link_line").attr("fill", function(d) {
        return d3color(color_scale(d.strength));
    }).attr("id", function(i, d) {
        return "link_line" + d;
    }).attr("d", function(d) {
        return drawCurve(d);
    });

    function dragmove(dragged) {
        var x = d3.select(dragged).attr("cx");
        var y = d3.select(dragged).attr("cy");
        d3.select(dragged).attr("cx", Math.max(radius, Math.min(width - radius, +x + d3.event.dx))).attr("cy", Math.max(radius, Math.min(height - radius, +y + d3.event.dy)));
        $.each(links, function(i, link) {
            if (link.source == dragged.id.match(/\d+/)[0] || link.target == dragged.id.match(/\d+/)[0]) {
                d3.select('#link_line' + i).attr("d", function(d) {
                    return drawCurve(d);
                });
            }
        });
    }

    function drawCurve(d) {
        var slope = Math.atan2((+d3.select('#circle' + d.target).attr("cy") - d3.select('#circle' + d.source).attr("cy")), (+d3.select('#circle' + d.target).attr("cx") - d3.select('#circle' + d.source).attr("cx")));
        var slopePlus90 = Math.atan2((+d3.select('#circle' + d.target).attr("cy") - d3.select('#circle' + d.source).attr("cy")), (+d3.select('#circle' + d.target).attr("cx") - d3.select('#circle' + d.source).attr("cx"))) + (Math.PI / 2);

        var sourceX = +d3.select('#circle' + d.source).attr("cx");
        var sourceY = +d3.select('#circle' + d.source).attr("cy");
        var targetX = +d3.select('#circle' + d.target).attr("cx");
        var targetY = +d3.select('#circle' + d.target).attr("cy");

        var arrowOffset = 20;
        var points = [];
        points.push([sourceX + radius * Math.cos(slope) - strength_scale(d.strength) * Math.cos(slopePlus90), sourceY + radius * Math.sin(slope) - strength_scale(d.strength) * Math.sin(slopePlus90)]);
        points.push([sourceX + radius * Math.cos(slope), sourceY + radius * Math.sin(slope)]);
        points.push([targetX - radius * Math.cos(slope), targetY - radius * Math.sin(slope)]);
        points.push([targetX - (radius + arrowOffset) * Math.cos(slope) - strength_scale(d.strength + (arrowOffset / 2)) * Math.cos(slopePlus90), targetY - (radius + arrowOffset) * Math.sin(slope) - strength_scale(d.strength + (arrowOffset / 2)) * Math.sin(slopePlus90)]);
        points.push([targetX - (radius + arrowOffset) * Math.cos(slope) - strength_scale(d.strength) * Math.cos(slopePlus90), targetY - (radius + arrowOffset) * Math.sin(slope) - strength_scale(d.strength) * Math.sin(slopePlus90)]);
        return d3LineLinear(points) + "Z";
    }

});
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
	
</html>

Open in new window

0
 
LVL 35

Accepted Solution

by:
ste5an earned 2000 total points
ID: 41843448
Basically like this:

<!-- saved from url=(0016)http://localhost -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Title</title>
		<style>
			svg {
				background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAdCAMAAACKeiw+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////9fb3h/JDwQAAABtJREFUeNpiYMQLGBgZ8IJR6VHpUWnKpAECDACcGgA72QxfPgAAAABJRU5ErkJggg==);
				border: solid 1px #ddd;
			}
			svg .circle {
				fill: steelblue;
				stroke: white;
				stroke-width: 2;
			}
			svg circle:hover{
				cursor: pointer;
			}
			svg circle:active{
				stroke: yellow;
			}
			svg .link_line {
				stroke: rgba(255,255,255,.5);
				stroke-width: 1.5;
			}	
		</style>		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.7/d3.min.js" type="text/javascript"></script>	
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.10/jquery.min.js" type="text/javascript"></script>	
		<script type="text/javascript">
			$(document).ready(function() {

				var width = 900,
					height = 650;

				var radius = 30; /* radius of circles */
				var numCircles = 10; /* number of circles - you must update link source/target values to match changes in the number of circles */

				var d3color = d3.interpolateRgb("#BAE4B3", "#006D2C"); /* color range for flow lines */

				//A LIST OF LINKS BETWEEN CIRCLES
				var links = [
					{
						source: 0,
						target: 5,
						strength: Math.round(Math.random() * 10)},
					{
						source: 0,
						target: 2,
						strength: Math.round(Math.random() * 10)},
					{
						source: 1,
						target: 3,
						strength: Math.round(Math.random() * 10)},
					{
						source: 2,
						target: 4,
						strength: Math.round(Math.random() * 10)},
					{
						source: 3,
						target: 5,
						strength: Math.round(Math.random() * 10)},
					{
						source: 5,
						target: 0,
						strength: Math.round(Math.random() * 10)},
					{
						source: 2,
						target: 0,
						strength: Math.round(Math.random() * 10)},
					{
						source: 3,
						target: 1,
						strength: Math.round(Math.random() * 10)}
				];

				function createDefs(defs) {
					var dropShadowFilter = defs.append('svg:filter').attr('id', 'dropShadow');
					dropShadowFilter.append('svg:feGaussianBlur').attr('in', 'SourceAlpha').attr('stdDeviation', 1);
					dropShadowFilter.append('svg:feOffset').attr('dx', 0).attr('dy', 1).attr('result', 'offsetblur');
					var feMerge = dropShadowFilter.append('svg:feMerge');
					feMerge.append('svg:feMergeNode');
					feMerge.append('svg:feMergeNode').attr('in', "SourceGraphic");
				}

				var drag = d3.behavior.drag().origin(Object).on("drag", function() {
					dragmove(this);
				});

				//RANDOMLY GENERATE COORDINATES FOR CIRCLES
				var circles = d3.range(numCircles).map(function(i, d) {
					return [Math.round(50 + (i / numCircles) * (width - 50)), Math.round(30 + Math.random() * (height - 80))];
				});

				//GLOBAL STRENGTH SCALE
				var strength_scale = d3.scale.linear().range([2, 10]) /* thickness range for flow lines */
					.domain([0, d3.max(links, function(d) {
						return d.strength;
					})]);

				var color_scale = d3.scale.linear().range([0, 1]).domain([0, d3.max(links, function(d) {
					return d.strength;
				})]);

				var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

				var g_lines = svg.append("g").attr("class", "lines");
				var g_circles = svg.append("g").attr("class", "circles");
				var g_midpoints = svg.append("g").attr("class", "midpoints");

				//SHADOW DEFINITION
				createDefs(svg.append('svg:defs'));


				$.each(circles, function(i, d) {
					g_circles.append("circle").attr('filter', 'url(#dropShadow)').attr("class", "circle").attr("id", "circle" + i).attr("r", radius).attr("cx", d[0]).attr("cy", d[1]).call(drag);
				});

				g_lines.selectAll(".link_line").data(links).enter().append("path").attr("class", "link_line").attr("fill", function(d) {
					return d3color(color_scale(d.strength));
				}).attr("id", function(i, d) {
					return "link_line" + d;
				}).attr("d", function(d) {
					return drawCurve(d);
				});

				function dragmove(dragged) {
					var x = d3.select(dragged).attr("cx");
					var y = d3.select(dragged).attr("cy");
					d3.select(dragged).attr("cx", Math.max(radius, Math.min(width - radius, +x + d3.event.dx))).attr("cy", Math.max(radius, Math.min(height - radius, +y + d3.event.dy)));
					$.each(links, function(i, link) {
						if (link.source == dragged.id.match(/\d+/)[0] || link.target == dragged.id.match(/\d+/)[0]) {
							d3.select('#link_line' + i).attr("d", function(d) {
								return drawCurve(d);
							});
						}
					});
				}

				function drawCurve(d) {
					var slope = Math.atan2((+d3.select('#circle' + d.target).attr("cy") - d3.select('#circle' + d.source).attr("cy")), (+d3.select('#circle' + d.target).attr("cx") - d3.select('#circle' + d.source).attr("cx")));
					var slopePlus90 = Math.atan2((+d3.select('#circle' + d.target).attr("cy") - d3.select('#circle' + d.source).attr("cy")), (+d3.select('#circle' + d.target).attr("cx") - d3.select('#circle' + d.source).attr("cx"))) + (Math.PI / 2);

					var sourceX = +d3.select('#circle' + d.source).attr("cx");
					var sourceY = +d3.select('#circle' + d.source).attr("cy");
					var targetX = +d3.select('#circle' + d.target).attr("cx");
					var targetY = +d3.select('#circle' + d.target).attr("cy");

					var arrowOffset = 20;
					var points = [];
					points.push([sourceX + radius * Math.cos(slope) - strength_scale(d.strength) * Math.cos(slopePlus90), sourceY + radius * Math.sin(slope) - strength_scale(d.strength) * Math.sin(slopePlus90)]);
					points.push([sourceX + radius * Math.cos(slope), sourceY + radius * Math.sin(slope)]);
					points.push([targetX - radius * Math.cos(slope), targetY - radius * Math.sin(slope)]);
					points.push([targetX - (radius + arrowOffset) * Math.cos(slope) - strength_scale(d.strength + (arrowOffset / 2)) * Math.cos(slopePlus90), targetY - (radius + arrowOffset) * Math.sin(slope) - strength_scale(d.strength + (arrowOffset / 2)) * Math.sin(slopePlus90)]);
					points.push([targetX - (radius + arrowOffset) * Math.cos(slope) - strength_scale(d.strength) * Math.cos(slopePlus90), targetY - (radius + arrowOffset) * Math.sin(slope) - strength_scale(d.strength) * Math.sin(slopePlus90)]);
					return d3LineLinear(points) + "Z";
				}

			});	
		</script>
	</head>
	<body>	
		Test
	</body>
</html>

Open in new window


But one problem is: You're also using d3.js, but which version?? The actual does not work..

btw, jsfiddle has on the left side a external files section. You need all those references. And last but least: can you post a link to the working one??
0

Featured Post

Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question