How to get an X in link for deleting the link

JavaScript
1

Hello, i have this code, it’s a script that can be used to save url links in a index A-Ö one can move drag and drop the links to change position, the new position is then saved in the links.php file. So this script is not using Myqsl only a flat file (links.txt) to save the links). Now if you look att the demo page you will see all the links i have i Index “temp” and want a X to the right of avery link field so if i click the X the link will bee removed. Any ideas plaease. Thank you.
Demo page: http://test3.fcab.se/links/temp/index.php

index.php:

<?php
require("../config.php");
if ($enablegzip == "1")
{
ob_start("ob_gzhandler");
header("Content-Encoding: gzip");
}
session_start();
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, target-densitydpi=high-dpi">
<title>Web links - List (<?php echo basename(dirname(__FILE__));?>)</title>
<link rel=StyleSheet href="style.css" type="text/css">
<script type="text/javascript" src="../collapse_expand_single_item.js"></script>
<script type="text/javascript" src="../jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
</head>
<body>
<br>
<div class="link_back">
<a href="../index.php">Back to Index</a></div>
<br>
<div class="add_link">
<a href="#first" onClick="shoh('first');">Add new link +</a></div>
<br>
<div class="index_letter"><?php echo basename(dirname(__FILE__));?></div>
<div class="add_links" style="display: none;" id="first">
<div class="box">
<br>
<form action=addurl.php method=POST name="addurlform">
<div class="box_title">Title:</div><input type=text name=text size="56"  placeholder="Enter your title">
<div class="box_link">Drag & Drop Link:</div><input type=text value="" name=link size="56" placeholder="http://">
<div>
<br><br>
<input type=submit class="add_button" value="Add"></div>
</form>
<br>
</div>
</div>
<br>

<ul id="sortable">
<?php
$gbfile='links.txt';
$separator= '|';
//====================================
//This function will add one line to
//the end of file
//====================================
function add($str){
global $gbfile;
      $tmp = trim($str);
      $fp=fopen($gbfile,'a+');
           flock($fp, LOCK_EX);
                fwrite($fp, $tmp. "\
");
           flock($fp, LOCK_UN);
      fclose($fp);
}
//====================================
//Function below gets specified number
//of lines and returns an array
//====================================
function get($start, $end){
global $gbfile;
      $records=array();
      $filename="links.txt";
	  $fp=fopen($gbfile,'r');
           flock($fp, LOCK_SH);
           $i=1;
           $tmp=TRUE;
           while($i<$start && !feof($fp)) {
                $tmp=fgets($fp);
                $i++;
           }
           while($i<=$end && !feof($fp)) {
                $tmp=trim(fgets($fp));
                if ($tmp) { array_push($records, $tmp); }
                $i++;
           }
           flock($fp, LOCK_UN);
      fclose($fp);
      return($records);
}
//Listing part
$start=$_GET['start'];
$end=$_GET['end'];
if (!$end || $start<=0) { $start=1; }
if (!$end) { $end=$linkspage; }
if ($end<$start) { $end=$start+1; }
$show=$end - $start;

//Get records from file into array
      $records = get($start, $end);
	if ($enablesort == "1")
{
sort($records);
}

//For each record get each field
      foreach ($records as $rec) {
           $tmp = explode($separator, $rec);
$title = $tmp[0];
$link = $tmp[1];

//=================================
//Outputting

?>
<li><a href="<?=$link?>">
<p class="title"><?php echo ("$title");?>
</p></a></li>
<?php
}
{
      $start+=$show;
	  $end+=$show;
	  $start++;
	  $end++;
	  $start--;
	  $end--;
}

?>
</ul>

<script>
$("a[href^='http']").each(function() {
    $(this).css({
		background:"url(http://g.etfv.co/"+ this.href +") left center no-repeat",
		"-webkit-background-size": "20px",
		"-moz-background-size": "20px",
		"-o-background-size": "20px",
		"background-size": "20px",
		"padding-left": "20px",
		"margin-left": "16px"
	});
});
function getLinkList(){
  var list = ""
  $("ul#sortable>li").each(function(){
    list += $(this).find("p.title").text();
    list += "|";
    list += $(this).find("a").attr("href");
	list += "\
";
  });

  return {linkList: list}
}

$( "#sortable" ).sortable({
  opacity: 0.5,
  update: function( event, ui ) {

    $.ajax({
      type: "POST",
      url: "process.php",
      data: getLinkList(),
      dataType: "text",
      success: function(res){
        console.log(res)
      },
    });
  }
});
$( "#sortable" ).disableSelection();
$('#sortable').mousedown(function(){ $(this).css('cursor', 'move');});
$('#sortable').mouseup(function(){ $(this).css('cursor', 'pointer');});
$('.title').mousedown(function(){ $(this).css('cursor', 'move');});
$('.title').mouseup(function(){ $(this).css('cursor', 'pointer');});
</script>
</body>
</html>

style.css:

a:link, a:visited, a:active { color:#282828; text-decoration:none;}
a:hover { color:#4b4b4b;}
a { display: block; text-decoration: none; width: 270px;}
form { font-family: tahoma;font-size:10pt; }
li { list-style: none; float:left; height: 42px;}
input { background-color: #eeeeee; font-family:tahoma;font-size:10pt;color:#4b4b4b;border:1px solid #4cffff; border-radius: 4px; margin-bottom: 8px; height: 22px; padding-bottom: 2px;}
input:hover { background-color: #bfffff;}
h1{color: #26C9FF;}
h3{color: #FF6347; padding-left: 30px;}

.add_link  a{
font-family: Tahoma;
font-size:12pt;
color: #eee;
width: 148px;
padding-top: 10px;
text-align: center;
}

.add_link  a:hover{
color: #fff;
}

.add_link {
width: 148px;
height: 42px;
margin-left: 56px;
transition: all 0.5s ease;
background-color: #333;
border-radius: 4px;
transition: all 0.5s ease;
}

.add_link:hover{
color: #fff;
cursor: pointer;
background-color: #FF6347;
padding-left: 2px;
}

.box{
margin-left: 56px;
font-size:10pt;
color:#4b4b4b;
background-color: #99FFFF;
border: 1px solid #4CFFFF;
border-radius: 4px;
padding-left: 30px;
padding-bottom: 10px;
width:396px;
height:225px;
}

.link_back{
width: 148px;
height: 42px;
margin-left: 56px;
background-color: #333;
border-radius: 4px;
cursor: pointer;
transition: all 0.5s ease;
}

.link_back:hover{
background-color: #FF6347;
padding-left: 2px;
}

.link_back  a{
width: 148px;
font-family: Tahoma;
font-size:12pt;
color: #eee;
transition: all 0.5s ease;
padding-top: 10px;
text-align: center;
}

.link_back:hover  a{
color: #fff;
}

.add_button{
font-family: Tahoma;
font-size:12pt;
color: #fff;
text-align: center;
width: 80px;
height: 32px;
background-color: #444;
padding-bottom: 2px;
border: 0px solid #444;
border-radius: 4px;
cursor: pointer;
transition: all 0.5s ease;
}

.add_button:hover{
background-color: #FF6347;
padding-left: 2px;
}

.box_title{
font-family: Tahoma;
font-size:12pt;
color: #4b4b4b;
}

.box_link{
font-family: Tahoma;
font-size:12pt;
color: #4b4b4b;
}

.title{
padding-left: 10px;
margin-left: 5px; /* Change this if you change the Icon size */
height: 28px;
width: 260px;
background-color: #26C9FF;
border-radius: 4px;
font-family: Tahoma;
color: #fff;
font-size:12pt;
transition: all 0.5s ease;
padding-top: 6px;
list-style-type: none;
}

.title:hover{
background-color: #FF6347;
padding-left: 8px;
}

.index_letter{
font-family: Tahoma;
FONT-SIZE:16pt;
font-weight: bold;
color: #26C9FF;
margin-left: 56px;
}

.title{
 cursor:pointer;
}
2

Hi,

This looks more like a php and JS question rather than a ccs one?

You can easily add an ‘X’ to the end of the field (just put it in a span and float it right) but then you would need to program the action of deleting the link and applying it to your existing routines etc.

If you just need help with the css then I can help but otherwise we should move this thread to PHP or JS forums instead/

3

Yes i only need help with the span and css, i fix the rest later. Thank you for your help.

4

Hi,

I see you’ve added an X since the original post and all you probably need to do is float it to the right now.

e.g.


input.del_button{
float:right;
margin:0 5px 0 0;
}

For older browsers (ie7) you would need to put the input before the text because otherwise it will float right on a new line.

5

Thank’s for the reply. Well the X is to the right now but it’s a part of the link, so the X will direct to the same link as the link it self. Any ideas? Thank you.

6

Hi,

You could always intercept it with your script but if you want a css method then you will need to move the button out of the anchor like so.


<ul id="sortable">
		<li>
				<div class="title">
						<button class="del_button" type="button" onclick="window.location='proces.php'" name="delete" value="X">X</button>
						<a href="http://google.se"> <span>Title </span> </a></div>
		</li>

etc....

The css remains the same as before with the button floated right but you’d probably now need to style the span in the anchor.


.title span{color:#fff}

Whether or not that breaks your draggable elements remains to be seen :slight_smile:

7

Yepp, this breaks my draggable elements. so must find some other solution.

8

It’s probably this script that is looking for p.title which doesn’t exist any more.

list += $(this).find(“p.title”).text();

Try changing to just .title and see if it works.


function getLinkList(){
  var list = ""
  $("ul#sortable>li").each(function(){
    list += $(this).find(".title").text();
    list += "|";
    list += $(this).find("a").attr("href");
	list += "\
";
  });

  return {linkList: list}
}
9

No dident work, now it adds a link with no title pointing to index.php?

10

You added an id not a class!


   list += $(this).find("#title").text();

It should be:


   list += $(this).find(".title").text();
11

No it works with list += $(this).find(“#title”).text();

because i change the <a href=“<?=$link?>”><span><?php echo (“$title”);?></span></a></div>
to
<a href=“<?=$link?>”><span id=“title”><?php echo (“$title”);?></span></a></div>

So now how can i use the .remove()). function?

12

That’s not valid as Id’s are unique and there can only be one on the page. The method I suggested will find all the text within .title as it did in your original version. The JS will not work on multiple ids as it will only find the first one.

So now how can i use the .remove()). function?

I think this is now a JS question so I will move to the JS forum for further help (@Pullo) :slight_smile: (I have to sign off now so back tomorrow).

13

OK i change the <a href=“<?=$link?>”><span id=“title”><?php echo (“$title”);?></span></a></div>
to
<a href=“<?=$link?>”><span class=“titles”><?php echo (“$title”);?></span></a></div>

and chagne back to .titles, note that i’m using titles not title because i have the class title on the <div class=“title”>

Will this work as it suppose to?

Thank you.

14