Web Analytics Made Easy -
StatCounter change text on click? - CodingForum

Announcement

Collapse
No announcement yet.

change text on click?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • change text on click?

    I have a link on my website

    "Click here to show more artwork"

    When clicked i am using AJAX display the rest of my images..

    however the text still displays "Click here to show more artwork"

    I would like to be able to change it to "show only top artwork" or just disapear all together

    i have a div that is either revealed or hidden up on clicking this link.

    so i could use something like (in english):

    if #ToggleSection is hidden display 'show more artwork' otherwise display 'show only top artwork' (or it could dissapear..)

    Thanks

    my failed attempt using jquery:
    <script type="text/javascript">
    if ($('#toggleSection').is(":hidden"))
    {
    document.write("<a href="javascript:void(0);" id="toggleButton" style="padding:15px;">Click here to view more artwork!</a>");
    } else {
    document.write("<a href="javascript:void(0);" id="toggleButton" style="padding:15px;">Show top artwork only!</a>");
    }
    </script>

  • #2
    You should probably modularize your functions a bit for more precise control:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="css/" />
    <style type="text/css">
    </style>
    <script type="text/javascript">
    // <![CDATA[
    
    function simulateAJAX(success)
    	{
    	if (success) displayAjaxedArtwork();
    	}
    
    function displayAjaxedArtwork()
    	{
    	document.getElementById("ajaxed_artwork").style.display = "block";
    	var a = document.getElementById("my_link");
    	a.innerHTML = "Show Top Artwork Only";
    	a.onclick = function()
    		{
    		return showTopArtwork();
    		}
    	}
    
    function hideAjaxedArtwork()
    	{
    	document.getElementById("ajaxed_artwork").style.display = "none";
    	var a = document.getElementById("my_link");
    	a.innerHTML = "Show More Artwork";
    	a.onclick = function()
    		{
    		return showMoreArtwork();
    		}
    	}
    
    function showMoreArtwork()
    	{
    	simulateAJAX(true);
    	return false;
    	}
    
    function showTopArtwork()
    	{
    	hideAjaxedArtwork();
    	return false;
    	}
    
    // ]]>
    </script>
    </head>
    <body>
    
    <div id="ajaxed_artwork" style="display:none;">my artwork</div>
    
    <a id="my_link" href="#" onclick="return showMoreArtwork()">Show More Artwork</a>
    
    </body>
    </html>
    But your main issue is document.write, which you cannot use after the page has loaded or else whatever you write() will replace your entire DOM.
    Feel free to e-mail me if I forget to respond ;)
    [email protected]

    Comment

    Working...
    X