Hello, i have the following script that i use to save web links. The way it works is like this: I have a first page containg an index A-Ö and when you click a index letter you are directed to the links page of this letter. In this page you can click Add link to add a new link and a Title for the link, The links are then shown on the same page. What i need is a script so that i can move and change position on the links. Check out the Web links - Index page here: [URL=“http://test3.fcab.se/links/index.php”] and click eg, on C it is on this page i have added the most links (not only links beginning with C, bot it’s easier to see the funkction of the script on this page).
This is the code i use:
<?php
require("../config.php");
if ($enablegzip == "1")
{
ob_start("ob_gzhandler");
header("Content-Encoding: gzip");
}
session_start();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<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 language="JavaScript" src="../collapse_expand_single_item.js"></script>
<script language="JavaScript" src="../jquery-1.11.1.js"></script>
</head>
<body topmargin="0" leftmargin="0">
<br>
<div class="link_back"><a href="../index.php"><< Back to Directory</a></div>
<br>
<div a href="#first" onClick="shoh('first');" class="add_link">Add new link <b>+</b></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">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr><td width="100"><div class="box_title">Title:</td></div><td width="600"><INPUT TYPE=TEXT name=text size="56"></td></tr>
<tr><td width="300"><div class="box_link">Drag & Drop Link:</td></div><td width="600"><INPUT TYPE=TEXT value="" name=link size="56"></td></tr>
<tr><td width="100"> </td><td width="500"><br><INPUT TYPE=SUBMIT id="add_button" value="Add"></td></tr>
</table>
</form>
</div>
</div>
</div>
<br>
<?
$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);
sort($records);
//For each record get each field
foreach ($records as $rec) {
$tmp = explode($separator, $rec);
$title = $tmp[0];
$link = $tmp[1];
//=================================
//Outputting
?>
<table id="table-1" border="0" cellpadding="0" cellspacing="" align="left" width="240" height="0">
<tr>
<td>
<a href="<?=$link?>" target="">
<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": "10px"
});
});
</script>
<li class="title"><?php echo("$title");?>
</tr></td>
<table border="0" cellpadding="0" cellspacing="0" align="right" width="240" height="0">
</li></table></a>
<?
}
//Pagination
if ($start>$show) {
$start-=$show;
$end-=$show;
$start--;
$end--;
echo "<a href=index.php?start=$start&end=$end><div class=\\"next\\"><< Previous</a></div>";
if (count($records)!=0) {
$start+=$show*2;
$end+=$show*2;
$start=$start+2;
$end=$end+2;
echo "<a href=index.php?start=$start&end=$end><div class=\\"next\\">Next >></a></div>";
$start--;
$end--;
}
else {
echo "<h3>No more records found!</h3>";
}
}
else {
$start+=$show;
$end+=$show;
$start++;
$end++;
"<a href=index.php?start=$start&end=$end><div class=\\"next\\">Next >></a></div>";
$start--;
$end--;
}
?>
</body>
</html>
Hello, and than’s for the reply. I have looked at the jQuery UI draggable/sortable, but i have not got it to work. The reason for the repeat inline script 37 times it that i have 37 links on the page.
I will have to check out the W3C errors.
Hello, i have now change some code, only 2 W3C errors now, cant get rid of them. I have tried several other jQuery draggable script but i cant get them to work. Any ideas?
Hello, i worked on the jQuery UI draggable/sortable now, but i can only get the first link in list to move, and not chang pace with the other links. Any ideas?
Demo page: http://test3.fcab.se/links/index.php But i dont even have the draggable/sortable code in it at the moment. But if you are familiar with this maybe you have some ideas? Just enter C in the index page.
This part of the code is only mentiond once in the entire code. This is the code that gets the favicon from the page that i save as a link. So this code is run for avery link. 40 link’s = code 40 times.
New demo page: http://test3.fcab.se/links/temp/index.php No errors. What do you mean by open/stray tags?
I now have this code:
<?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 src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#sortable" ).sortable({
placeholder: "ui-sortable-placeholder"
});
});
</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">
<div class="box_link">Drag & Drop Link:</div><input type=text value="" name=link size="56">
<div>
<br><br>
<input type=submit class="add_button" value="Add"></div>
</form>
<br>
</div>
</div>
<br>
<?
$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);
sort($records);
//For each record get each field
foreach ($records as $rec) {
$tmp = explode($separator, $rec);
$title = $tmp[0];
$link = $tmp[1];
//=================================
//Outputting
?>
<div class="wraper">
<a href="<?=$link?>" target="_self">
<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": "56px"
});
});
</script>
<p class="title"><?php echo ("$title");?>
</p></a></div>
<?
}
//Pagination
if ($start>$show) {
$start-=$show;
$end-=$show;
$start--;
$end--;
echo "<a href=index.php?start=$start&end=$end><div class=\\"next\\">Previous</a></div>";
if (count($records)!=0) {
$start+=$show*2;
$end+=$show*2;
$start=$start+2;
$end=$end+2;
echo "<a href=index.php?start=$start&end=$end><div class=\\"next\\">Next</a></div>";
$start--;
$end--;
}
else {
echo "<h3>No more records found!</h3>";
}
}
else {
$start+=$show;
$end+=$show;
$start++;
$end++;
"<a href=index.php?start=$start&end=$end><div class=\\"next\\">Next</a></div>";
$start--;
$end--;
}
?>
</body>
</html>
This, will iterate over all links on your page, whose href attributes start with “http”.
The code inside the anonymous function will be executed for each link.
$(this).css({ ... });
$(this) is a jQuery object which contains a reference to the current link.
It will change with every iteration.
So it is entirely sufficient to execute the code above once, not 40 times.
Think of it this way: running this code once will iterate over 40 links and do something to them.
Running the code 40 times will iterate over 40 links 40 times (so 1,600 times in total).
Could you include it in the page just once and verify that the code still works.
OK, how about now. I moved the $(“a[href^=‘http’]”).each(function() { …
below: <p class=“title”><?php echo (“$title”);?> pleas have a look and tell me if this is ok.
Ooohh, it works i just had to put the last </div> under this:
<?
}
{
$start+=$show;
$end+=$show;
$start++;
$end++;
“<a href=index.php?start=$start&end=$end><div class=\“next\”>Next</a></div>”; [I’m not using this line, if i would use it i can just echo it and i will have a link to the next page of links. This is if i set eg, show 20 links in the config.php file.]
$start–;
$end–;
}
?>
HERE I PUT THE LAST</div>
THANK YOU SO MUCH FOR YOUR HELP.
But now to the next problem. If i change the position for the links, and then update the page all links will be ordered as they use to be. I have to update the changed positions in the links.txt file.
Any idea how i would do this?
Looking at the source code you have <div id="sortable"> 40 times. You only need it once!
But apart from that, glad it worked
Yeah, changes won’t persist beyond a page refresh, so you’ll need some way of remembering them.
Sortable offers an update event which is triggered when the user stopped sorting and the DOM position has changed.
My suggestion would be to use that, however … what do you want to remember?
Currently you have a load of <div> tags with no unique identifier, so your best bet will be to dump the entire HTML to a text file (or whererever) every time the update event is fired.
A more elegant solution would be to us an unordered list (as this is essentially what this is) and give each list item an unique id.
That way you would only need to remember the order of the ids:
Regarding the <div id=“sortable”> 40 times. I have tried to chagne the position for the last </div> to run this code only one time but with no luck.
I removed target = “_self”.
Nothing worked when i change the <div id=“sortable”> to <ul id=“sortable”> and change the <p> to <li>, just a long vertical/diagonal/stair list and i can not change position on the links.
what do you want to remember? - Well i’m geting the links from the links.txt file so it is in this file i want to save the new order of the links after i change position of them in the live list.
