Question

So I’ve been working on a new blog system for my website, which I’m eventually hoping to package as a free download. I have dynamic read more/less links that work perfectly in IE and Firefox, but not Chrome; the last browser in that list displays the entry without the fadeIn effect, doesn’t hide the summary span and ignores the read less link.

Below is my code. I’m using jQuery 1.7.0. Thank you in advance, anyone who can give me the right answer will get a mentiogn in my blog. I appreciate your help 🙂

<script type="text/javascript">
function readMore(entNo)
{
    $("#entSum" + entNo).fadeOut(function()
    {
        $("#ent" + entNo).fadeIn();
    });

function readLess(entNo)
{
    $("#ent" + entNo).fadeOut(function()
    {
        $("#entSum" + entNo).fadeIn();
    });
}

function loadPage(startNo,endNo)
{
    $("#blogLoad").fadeOut(function()
    {
            $.ajax(
            {
                url: "getBlog.php",
                type: "GET",
                data: {start: startNo, end: endNo},
                success: function(data)
                {
                    $("#blogLoad").html(data);
                    $(".ent").hide();
                    $("#blogLoad").fadeIn();
                }
            });
    });
}

function facebookShare(id)
{
    window.open("http://www.facebook.com/sharer.php?u=http://jamesswright.co.uk/blog.php?id=" + id + "&t=James S. Wright| Blog", "ShareOnFacebook", "width=600,height=400,scrollbars=yes,location=no,status=no,screenx=" + ((screen.width / 2) - 300) + ",screeny=" + ((screen.height / 2) - 200));

}

function twitterShare(id)
{
    window.open("http://twitter.com/share?url=http://jamesswright.co.uk/blog.php?id=" + id + "&text=Cool blog from James Wright: &via=JamesSWrightWeb", "Twitter", "width=600,height=400,scrollbars=yes, location=no, status=no, screenx=" + ((screen.width / 2) - 300) + ", screeny=" + ((screen.height / 2) - 200));

}
</script>
<?php

$start;
$end;

if($_GET["start"] == NULL) $start = 0;
else $start = $_GET["start"];

if($_GET["end"] == NULL) $end = 5;
else $end = $_GET["end"];


$connection = mysql_connect("localhost", "jamwri9_sql", "******");
if(!$connection) echo "<p><b>Could not retrieve banner data: database connection failed";

mysql_select_db("jamwri9_sql", $connection);

$query;
$totalRows;
if($_GET["id"] == NULL)
{
    $query = mysql_query("SELECT ID, Title, Date, Entry FROM jswBlog ORDER BY ID DESC LIMIT " . $start . ", " . $end);
    $totalRows = mysql_num_rows(mysql_query("SELECT ID FROM jswBlog"));
}
else $query = mysql_query("SELECT Title, Date, Entry FROM jswBlog WHERE ID = " . $_GET["id"] . " ORDER BY ID");

$rows = mysql_num_rows($query);


$i = 0;
for($i; $i < $rows; $i++)
{
    echo "<p class=\"title\">". mysql_result($query, $i, 'Title') . "</p><p>Posted " . mysql_result($query, $i, 'Date') . "</p>";
    if(strlen(mysql_result($query, $i, 'Entry')) > 250 && $_GET["id"] == NULL) echo "<span id=\"entSum" . $i . "\"><p>" . substr(mysql_result($query, $i, 'Entry'), 0, 250) . "... | <a href=\"javascript:void(0)\" onclick=\"readMore(" . $i . ")\">read more >></a></p></span><span id=\"ent" . $i . "\" class=\"ent\"><p>" . mysql_result($query, $i, 'Entry') . " | <a href=\"javascript:void(0)\" onclick=\"readLess(" . $i . ")\"><< read less</a></p></span>";
    else echo "<p>" . mysql_result($query, $i, 'Entry') . "</p>";
    echo "<p>Share: <a href=\"javascript:void(0)\" onclick=\"facebookShare(" . mysql_result($query, $i, 'ID') . ")\"><img src=\"img/facebook.png\" style=\"vertical-align: middle;\" /></a> <a href=\"javascript:void(0)\" onclick=\"twitterShare(" . mysql_result($query, $i, 'ID') . ")\"><img src=\"img/twitter.png\" style=\"vertical-align: middle;\" /></a> <input type\"text\" value=\"http://jamesswright.co.uk/blog.php?id=" . mysql_result($query, $i, 'ID') . "\" /></p><hr />";
}

if($_GET["id"] == NULL)
{
    echo "<p>Page: ";
    $pages = $totalRows / 5;
    $j = 0;
    $startNo = 0;
    $endNo = 5;
    for($j; $j < $pages; $j++)
    {
        echo "<a href=\"javascript:void(0)\" onclick=\"loadPage(" . $startNo . "," . $endNo . ")\">" . ($j + 1) . "</a>";
        if($j < $pages - 1) echo "|";
        $startNo += 5;
        $endNo += 5;
    }
    echo "</p>";
}
else echo "<a href=\"blog.php\">View all blog entries</a>";
?>

Answer 1

Just to let you know, I solved the problem. For some reason, all versions of Google Chrome (my version being 18.0.1025.162) released at the time this answer was posted do not support the visibility of <span> elements being altered by jQuery (didn’t try with manual JavaScript, however, so perhaps that’s a possibility).

Quite simply, I replaced the <span> elements containing the blog entry data with <div>s. Problem solved.

Just in case you’re interested, the blog can be found here. I will make further improvements to it and hope to eventually release the software for free as open source.