Solved

Diferent values for each instance

Posted on 2015-02-19
2
404 Views
Last Modified: 2015-02-19
Hi folks, I'm loading several values from a search and depending on the amount of results it should show a certain number of circles each with the value retrieved inside it.
Like if the person searched for the name "mark" it should show a circle with the name "mark" inside the circle and when the user clicked on the circle it should "call" into a server side script which will return certain values, like "mike", "edward" and "marcia". Each of these should be inside a circle linked to the first circle, but the most important when one clicked on one of these other names it would call a server side script passing the value inside as a variable.
I've got a link to show how it is at the moment:

LINK

Right now the server side is shown bellow:
<?php

$return = array(
	1,2,3,4,5,6);
die(json_encode($return));

?>

Open in new window


File worked with a lot of help from folks in here:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Test</title>
<style type="text/css">
#circle-container {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  border: 0px solid green;
}
.circle {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background: grey;
  left: 230px;
  top: 230px;
  z-index: 1;
}
#circle {
  z-index: 2000;
}
.blue {
  background: black;
}
.green {
  background: black;
}
.yellow {
  background: black;
}
.orange {
  background: black;
}
.pink {
  background: black;
}
.purple {
  background: black;
}
</style>
</head>
<body>
<div id="circle-container">
  <div class="circle child black" data-id="1"></div>
  <div class="circle child black" data-id="2"></div>
  <div class="circle child black" data-id="3"></div>
  <div class="circle child black" data-id="4"></div>
  <div class="circle child black" data-id="5"></div>
  <div class="circle child black" data-id="6"></div>
  <div id="circle" class="circle"></div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var distanceToMove = 100;

function hideCircles(selected)
{

  $('#circle-container div.circle').addClass('closing').each(function(indx, item) {
    if (indx != selected) { 
      $(item).fadeOut(1000, function() {$(this).remove();});
    }
  });
}

function expandCircles()
{
  if ($('#circle').hasClass('expanded')) return;
  $('#circle').addClass('expanded');
  var total_circles = $('#circle-container .circle.child').length;
  var angle = (Math.PI * 2 / total_circles)
  $('#circle-container div.child').each(function(indx, item) {
    var top = distanceToMove * Math.cos(angle*(indx-1));
    var left = distanceToMove * Math.sin(angle *(indx-1)); 
    $(this).animate({left: "+=" + left, top: "+=" + top}, 1000);
  });
}
$(function() {

  $('#circle-container').on('click','#circle', function() {
    expandCircles();
  });
  
  $('#circle-container').on('click','.child', function() {
	if ($(this).hasClass('closing') || $(this).attr('id') == 'circle') return;
    var current = $(this);
    var index = $(this).index();
    $.ajax({
      url: 'getsubmenu.php',
      data: {id: $(this).data('id')},
      type: 'POST',
      dataType: 'JSON',
      success: function(response) {
        hideCircles(index);
		var left = $('#circle').css('left');
		var top = $('#circle').css('top');
        current.removeClass('child').attr('id','circle').animate({left: left, top: top}, 1000, function() {
          for(i=0; i<response.length;i++) {
            $('#circle-container').append(
              $('<div/>').addClass('circle child type' + i).data('id', response[i])
            );
          }
          expandCircles()
        });
      }
    });
  });
});
</script>



<script src="plugin.js" type="text/javascript"></script></body></html>

Open in new window


Plugin:
function closeC(){
  document.getElementById('baixarpremium_div').style.display = 'none';
  document.getElementById('baixarpremium_close').style.display = 'none';
}

function decode64(input) {
	var keyStr = "ABCDEFGHIJKLMNOP" + "QRSTUVWXYZabcdef" + "ghijklmnopqrstuv" + "wxyz0123456789+/" + "=";
     var output = "";
     var chr1, chr2, chr3 = "";
     var enc1, enc2, enc3, enc4 = "";
     var i = 0;

     // remove all characters that are not A-Z, a-z, 0-9, +, /, or =
     var base64test = /[^A-Za-z0-9\+\/\=]/g;
     if (base64test.exec(input))
		return false;
		
     input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

     do {
        enc1 = keyStr.indexOf(input.charAt(i++));
        enc2 = keyStr.indexOf(input.charAt(i++));
        enc3 = keyStr.indexOf(input.charAt(i++));
        enc4 = keyStr.indexOf(input.charAt(i++));

        chr1 = (enc1 << 2) | (enc2 >> 4);
        chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
        chr3 = ((enc3 & 3) << 6) | enc4;

        output = output + String.fromCharCode(chr1);

        if (enc3 != 64) {
           output = output + String.fromCharCode(chr2);
        }
        if (enc4 != 64) {
           output = output + String.fromCharCode(chr3);
        }

        chr1 = chr2 = chr3 = "";
        enc1 = enc2 = enc3 = enc4 = "";

     } while (i < input.length);

     return unescape(output);
}

function is_a_servidor(href){
	return ((href.indexOf("crocko.com/") != -1 ||
	href.indexOf("datafile.com/d/") != -1 ||
	href.indexOf("uploadjet.net") != -1 ||
	href.indexOf("uploading.com/") != -1 ||
	href.indexOf("file4go.com/d") != -1 ||
	href.indexOf("file4go.com/r") != -1 ||
	href.indexOf("letitbit.net/download/") != -1 ||
	href.indexOf("fboom.me/file/") != -1 ||
	href.indexOf("uploaded.to/file/") != -1 ||
	href.indexOf("uploaded.net/file/") != -1 ||
	href.indexOf("novafile.com/") != -1 ||
	href.indexOf("cloudnator.com/files/") != -1 ||
	href.indexOf("brupload.net/") != -1 ||
	href.indexOf("uploadrocket.net/") != -1 ||
	href.indexOf("ryushare.com/") != -1 ||
	href.indexOf("turbobit.net/") != -1 ||
	href.indexOf("uploadable.ch/") != -1 ||
	(href.indexOf("2shared.com") != -1 && href.indexOf(".html") != -1) ||
	href.indexOf("minhateca.com.br") != -1 ||
	href.indexOf("luckyshare.net/") != -1 ||
	href.indexOf("share-online.biz/dl/") != -1 ||
	href.indexOf("tusfiles.net/") != -1 ||
	href.indexOf("rapidgator.net") != -1 ||
	href.indexOf("rockfile.eu") != -1 ||
	href.indexOf("uptobox.com") != -1 ||
	href.indexOf("fileparadox.com/") != -1 ||
	href.indexOf("1fichier.com") != -1 ||
	href.indexOf("cepzo.com/") != -1 ||
	href.indexOf("keep2share.cc/") != -1 ||
	href.indexOf("keep2s.cc/") != -1 ||
	href.indexOf("k2s.cc/") != -1 ||
	href.indexOf("filecloud.io") != -1 ||
	href.indexOf("fileparadox.in/") != -1 ||
	href.indexOf("rapidshare.com/files/") != -1 || href.indexOf("rapidshare.com/#!download") != -1 || 
	href.indexOf("youporn.com/watch/") != -1 ||
	href.indexOf("filepost.com/files/") != -1 ||
	href.indexOf("videozer.com/video/") != -1 ||
	href.indexOf("firedrive.com/file/") != -1 ||
	href.indexOf("filefactory.com/file") != -1 ||
	href.indexOf("jumbofiles.com") != -1 ||
	href.indexOf("xvideos.com/video") != -1 ||
	href.indexOf("bayfiles.net/file/") != -1 ||
	href.indexOf("ul.to") != -1 ||
	href.indexOf("4shared.com/") != -1 || href.indexOf("4shared.com/get") != -1 ||
	href.indexOf("freakshare.com/files/") != -1 ||
	href.indexOf("goo.gl/") != -1 ||
	href.indexOf("filesflash.com/") != -1 ||
	href.indexOf("bitshare.com/files/") != -1 || href.indexOf("bitshare.com/?f=") != -1 || href.indexOf("bitshare.com/?d=") != -1 ||
	href.indexOf("mediafire.com/?") != -1 || href.indexOf("mediafire.com/download") != -1 ||
	href.indexOf("depfile.com/") != -1 ||
	href.indexOf("netload.in/") != -1 ||
	href.indexOf("sendspace.com/file/") != -1 ||
	(href.indexOf("goo.gl/") != -1 && href.indexOf("?") == -1) ||
	(href.indexOf("ifile.it/") != -1 && href.indexOf("ifile.it/_") == -1 && href.length > 22) ||
	href.indexOf("bit.ly/") != -1 ||
	(href.indexOf("zpag.es/") != -1 && href.indexOf("?") == -1) ||
	href.indexOf("linkbucks.com") != -1 ||
	href.indexOf("ugalleries.net") != -1 ||
	href.indexOf("terafile.co/") != -1 ||
	href.indexOf("megashares.com/") != -1 ||
	href.indexOf("secureupload.eu/") != -1 ||
	(href.indexOf("vimeo.com/") != -1 && href.indexOf("vimeo.com/user") == -1) ||
	href.indexOf("extabit.com/file") != -1 ||
	href.indexOf("protetorbr.com") != -1 ||
	href.indexOf("ubucks.net") != -1 ) && href.indexOf("googleads") == -1);
}
	
function insertAfter ( newObj, target){
  target.parentNode.insertBefore ( newObj, target.nextSibling);
}

function KeepLink(data){var b16_digits='0123456789abcdef';var b16_map=new Array();for(var i=0;i<256;i++){b16_map[i]=b16_digits.charAt(i>>4)+b16_digits.charAt(i&15)}var result=new Array();for(var i=0;i<data.length;i++){result[i]=b16_map[data.charCodeAt(i)]}return result.join('')}
function ShowLink(data){var b16_digits='0123456789abcdef';var b16_map=new Array();for(var i=0;i<256;i++){b16_map[b16_digits.charAt(i>>4)+b16_digits.charAt(i&15)]=String.fromCharCode(i)}if(!data.match(/^[a-f0-9]*$/i))return false;if(data.length%2)data='0'+data;var result=new Array();var j=0;for(var i=0;i<data.length;i+=2){result[j++]=b16_map[data.substr(i,2)]}return result.join('')}

function criar_limpador(href){
	var link,img;
	img = document.createElement('img');
	img.border = 0;
	img.src = "http://baixarpremium.net/plugin/img/clear-link.png";
	link = document.createElement('a');
	link.href='http://baixarpremium.net/plugin/limpar.php?link='+KeepLink(href);
	link.target='_blank';
	link.appendChild(img);
	return link;
}
	
var matches;
	
for(var run =0;run==0;run++){

	if( window.location.href.indexOf('comprarpremium.com') !== -1 || window.location.href.indexOf('desproteja.com') !== -1 ) break;
	
	var href = window.location.href;
	
	if(href.indexOf("google.com") != -1 || href.indexOf("huccio.com") != -1) break;
	if((href.indexOf("search.4shared") != -1 || href.indexOf("4shared.com/account/") != -1) || (href.indexOf("4shared.com/") != -1 && href.indexOf(".") == -1)) break;
	if(href.indexOf("wupload.com") != -1 && href.indexOf("file/") == -1) break;

	if(is_a_servidor(href) || href.indexOf("ptth") != -1 || href.indexOf("cdscompletos.org/download/") != -1 || href.indexOf("http://dgmg.org/?url=") != -1 || href.indexOf("http://dgmg.org/?url=") != -1 ){
	
		if(href.indexOf("mediafire.com") != -1 && document.getElementById("folders_tab") !== null )
			break;
		
		document.body.innerHTML = '<div id="baixarpremium_close" style="position: fixed; top: 8px; left: 8px; z-index: 9999999; margin: 20px 0 0 20px; padding-right: 25px;"><a style="cursor:pointer" onclick="closeC();"><img src="http://baixarpremium.net/plugin/img/CloseButton.gif" /></a></div><div id="baixarpremium_div" style="width: 100%;background-color: #CCDEE8;border-bottom-width: 2px;border-bottom-style: solid;border-bottom-color: #CCC;height: 70px;z-index: 9999998;top: 0px;left: 0px;position: fixed;" ><iframe id="baixarpremium_plugin" class="baixarpremium_plugin" scrolling="no" src="http://baixarpremium.net/plugin/plugin.php?link='+window.location.href+'" style="width:100%;height:70px" frameBorder="0"></iframe></div>'+document.body.innerHTML;
		break;
	};
		
	links = document.getElementsByTagName('a');
	
	if( window.location.href.indexOf('baixarfilmesdublados.net') !== -1 )
	{
		function convertToText(obj) {
			var string = [];
			if (typeof(obj) == "object" && (obj.join == undefined)) {
				string.push("{");
				for (prop in obj) {
					string.push(prop, ": ", convertToText(obj[prop]), ",");
				};
				string.push("}");
			} else if (typeof(obj) == "object" && !(obj.join == undefined)) {
				string.push("[")
				for(prop in obj) {
					string.push(convertToText(obj[prop]), ",");
				}
				string.push("]")
			} else if (typeof(obj) == "function") {
				string.push(obj.toString())
			} else {
				string.push(JSON.stringify(obj))
			}
			return string.join("")
		}
	}
	
	for (var i = 0; i < links.length; i++) {
	
		node = links[i];
		href = node.href;
		
		if( window.location.href.indexOf('baixarfilmesdublados.net') !== -1 && href.indexOf('javascript:void') !== -1 )
		{
			onclick = node.onclick;
			New = convertToText(onclick).split("'");
			Link = New[5];
			
			if( Link != undefined && Link.indexOf("filmesmegavideo") == -1 )
				insertAfter(criar_limpador(Link), node);
		}
	

		if(href.match(/twitter/gi) || href.match(/shopping/gi))
			continue;
		
		if(matches = href.match(/ir\/id\/(.*)\//gi))
		{
			var TryNormal = decode64(matches[0].replace('ir/id/','').replace('/',''));
				insertAfter(criar_limpador(TryNormal), node);
			if(TryNormal.indexOf("http://") != -1){
				i++;
				continue;
			}
		}
		if( (href.match(/\?go!/gi) || href.match(/url=/gi) || href.match(/(\?|&)d=/gi) || href.match(/lnk=/gi) || href.match(/cdscompletos/gi) ) && (href.match(/filmes/gi) || href.match(/download/gi) || href.match(/baixa/gi) || href.match(/sapomusicas/gi) || href.match(/jogos/gi) || href.match(/protetor/gi) || href.match(/limite/gi) || href.match(/protegido/gi) || href.match(/celular/gi) || href.match(/out/gi) || href.match(/dgmg/gi))  )
		{
			insertAfter(criar_limpador(href), node);
			i++;
			continue;
		}
		
		if( href.match(/safelinking.net/gi) || href.match(/baxai.org/gi) )
		{
			insertAfter(criar_limpador(href), node);
			i++;
			continue;
		}
		
		if( href.match(/adf.ly/gi) && href.match(/lix.in/gi) )
		{
			insertAfter(criar_limpador(href), node);
			i++;
			continue;
		}
		
		if(href.match(/\?id=(.*)/gi))
		{
			matches = href.match(/\?id=(.*)/);
			if(matches[1].indexOf("http://") == -1)
			{
				href = ShowLink(matches[1]);
			}
		}
		
		if(href==false) continue;
		
		if(href.indexOf("ptth") != -1 || (is_a_servidor(href) && href.indexOf("youporn.com") == -1 )){
			if(is_a_servidor(href) && href.indexOf("xvideos.com") == -1 ){
				insertAfter(criar_limpador(href), node);
				i++;
			}
		}
	}
}

Open in new window


Any help would be much appreciated.

Cheers.
0
Comment
Question by:Rodric MacOliver
[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 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 40619258
I've made you a small example here: http://schutt.nl/ee/Q_28620058/

I've made the php side a bit more random but left it simple assuming you will be changing that later to a database call anyway.
<?php

function prefix($n) {
  return $_POST['id'].':'.$n;
}

$return = array_map("prefix", range(1,rand(3,8)));
die(json_encode($return));

?>

Open in new window


In the html/javascript I made a few small changes: no more child DIVs in the code up front, so the inital click code is now a partial copy of the existing child click code to load the child nodes. You could of course also trigger that right away.
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Test</title>
<style type="text/css">
#circle-container {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  border: 0px solid green;
}
.circle {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background: grey;
  left: 230px;
  top: 230px;
  z-index: 1;
}
.circle span {
  color: white;
  font-size: 0.6em;
  /* http://www.w3.org/Style/Examples/007/center.en.html#viewport3 */
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#circle {
  z-index: 2000;
}
.blue {
  background: black;
}
.green {
  background: black;
}
.yellow {
  background: black;
}
.orange {
  background: black;
}
.pink {
  background: black;
}
.purple {
  background: black;
}
</style>
</head>
<body>
<div id="circle-container">
  <div id="circle" class="circle" data-id="0"></div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
var distanceToMove = 100;

function hideCircles(selected)
{
  $('#circle-container div.circle').addClass('closing').each(function(indx, item) {
    if (indx != selected) { 
      $(item).fadeOut(1000, function() {$(this).remove();});
    }
  });
}

function expandCircles()
{
  if ($('#circle').hasClass('expanded'))
    return;
  $('#circle').addClass('expanded');
  var total_circles = $('#circle-container .circle.child').length;
  var angle = (Math.PI * 2 / total_circles)
  $('#circle-container div.child').each(function(indx, item) {
    var top = distanceToMove * Math.cos(angle*(indx-1));
    var left = distanceToMove * Math.sin(angle *(indx-1)); 
    $(this).animate({left: "+=" + left, top: "+=" + top}, 1000);
  });
}
$(function() {

  $('#circle').html('<span>'+$('#circle').data('id')+'</span>');

  $('#circle-container').on('click','#circle', function() {
    $.ajax({
      url: 'getsubmenu.php',
      data: {id: $(this).data('id')},
      type: 'POST',
      dataType: 'JSON',
      success: function(response) {
        for(i=0; i<response.length;i++) {
          $('#circle-container').append(
            $('<div/>').addClass('circle child type' + i).data('id', response[i]).html('<span>'+response[i]+'</span>')
          );
        }
        expandCircles()
      }
    });
  });
  
  $('#circle-container').on('click','.child', function() {
    if ($(this).hasClass('closing') || $(this).attr('id') == 'circle')
      return;
    var current = $(this);
    var index = $(this).index();
    $.ajax({
      url: 'getsubmenu.php',
      data: {id: $(this).data('id')},
      type: 'POST',
      dataType: 'JSON',
      success: function(response) {
        hideCircles(index);
        var left = $('#circle').css('left');
        var top = $('#circle').css('top');
        current.removeClass('child').attr('id','circle').animate({left: left, top: top}, 1000, function() {
          for(i=0; i<response.length;i++) {
            $('#circle-container').append(
              $('<div/>').addClass('circle child type' + i).data('id', response[i]).html('<span>'+response[i]+'</span>')
            );
          }
          expandCircles()
        });
      }
    });
  });
});
</script>



<!-- script src="plugin.js" type="text/javascript"></script -->
</body></html>

Open in new window


Hopefully you will find it useful. I will be out for a couple of hours but any questions just shoot, I'll get back to you asap.
0
 

Author Comment

by:Rodric MacOliver
ID: 40619702
Thanks Robert it was very useful, I'l try the script with the parts I do have and if I have any doubt I'll post it here.
Thanks a lot.
Cheers!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

729 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