Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Change Script via Button Press on Blog

    Greetings!

    I have two scripts that loads RSS feeds.

    ScriptThisWeek
    Code:
    <script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Fcomiclistfeed%3Fformat%3Dxml&chan=y&num=1&utf=y&html=a"  charset="UTF-8" type="text/javascript"></script>

    ScriptNextWeek
    Code:
    <script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Fcomiclistnextweek%3Fformat%3Dxml&chan=y&num=1&utf=y&html=a"  charset="UTF-8" type="text/javascript"></script>

    Ideally, I would like to have two buttons at the top of a page. Upon clicking ButtonThisWeek, ScriptThisWeek will load below on the page. Upon clicking ButtonNextWeek, ScriptNextWeek will load below on the page. However, only one script will load at a time and replace the previously loaded one.

    I'm a bit out of my experience when it comes to user interactions. Any help would greatly be appreciated.

    To complicate matters, I'm restricted by what BlogSpot will allow.

    Thanks!
    Last edited by theert; 08-13-2012 at 02:19 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,947
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    There's probably one simple answer: Allow both feeds to load, but have your two buttons only control which one is VISIBLE.

    Since I have no idea what BlogSpot allows/supports, this may be the lowest possible "impact" on the page.

    So something like this:
    Code:
    <input type="button" value="This Week" 
     onclick="document.getElementById('DIVNEXTWEEK').style.display='none';
              document.getElementById('DIVTHISWEEK').style.display='block';"/>
    <input type="button" value="Next Week" 
     onclick="document.getElementById('DIVTHISWEEK').style.display='none';
              document.getElementById('DIVNEXTWEEK').style.display='block';"/>
    <div id="DIVTHISWEEK" style="display: none;">
    <script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Fcomiclistfeed%3Fformat%3Dxml&chan=y&num=1&utf=y&html=a"  charset="UTF-8" type="text/javascript"></script>
    </script>
    </div>
    <div id="DIVNEXTWEEK" style="display: none;">
    <script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Fcomiclistfeed%3Fformat%3Dxml&chan=y&num=1&utf=y&html=a"  charset="UTF-8" type="text/javascript"></script>
    </div>
    It's a bit hacky, but it just might work.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    theert (08-13-2012)

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That worked out great. Thank you very much.

    I had made a slight error in the second script that I had to fix (in the script you gave me and the original post). Totally my fault. I had accidentally pasted the first script a second time.

    There is only one thing I can ask of you. Is there a way to make the first script load by default?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,947
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    Of course.

    Just remove the style="display: none;" from the first <div>.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    theert (08-13-2012)

  • #5
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you so very much! Using your framework, I've expanded on the code to include a third button. You've helped me out greatly and I've learned a very good way of handling JavaScript.

    You can look at the final product here:
    http://paladintag.blogspot.com/p/comics.html

    Code:
    <input type="button" value="This Week" 
     onclick="document.getElementById('DIVTHISWEEK').style.display='block';
              document.getElementById('DIVNEXTWEEK').style.display='none';
              document.getElementById('DIVBEYONDWEEK').style.display='none';"/>
    <input type="button" value="Next Week" 
     onclick="document.getElementById('DIVTHISWEEK').style.display='none';
              document.getElementById('DIVNEXTWEEK').style.display='block';
              document.getElementById('DIVBEYONDWEEK').style.display='none';"/>
    <input type="button" value="Beyond" 
     onclick="document.getElementById('DIVTHISWEEK').style.display='none';
              document.getElementById('DIVNEXTWEEK').style.display='none';
              document.getElementById('DIVBEYONDWEEK').style.display='block';"/>
    <div id="DIVTHISWEEK">
    <script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Fcomiclistfeed%3Fformat%3Dxml&chan=y&num=1&utf=y&html=a"  charset="UTF-8" type="text/javascript"></script>
    </div>
    <div id="DIVNEXTWEEK" style="display: none;">
    <script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Fcomiclistnextweek%3Fformat%3Dxml&chan=y&num=1&utf=y&html=a"  charset="UTF-8" type="text/javascript"></script>
    </div>
    <div id="DIVBEYONDWEEK" style="display: none;">
    <script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Fcomiclistbeyondnextweek%3Fformat%3Dxml&chan=y&num=7&utf=y&html=a"  charset="UTF-8" type="text/javascript"></script>
    </div>
    
    <noscript>
    <a href="http://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Fcomiclistfeed%3Fformat%3Dxml&chan=y&num=1&utf=y&html=y">View RSS feed</a>
    </noscript>
    <noscript>
    <a href="http://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Fcomiclistfeed%3Fformat%3Dxml&chan=y&num=1&utf=y&html=y">View RSS feed</a>
    </noscript>
    <noscript>
    <a href="http://feed2js.org//feed2js.php?src=http%3A%2F%2Ffeeds.feedburner.com%2Fcomiclistbeyondnextweek%3Fformat%3Dxml&chan=y&num=7&utf=y&html=y">View RSS feed</a>
    </noscript>

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,947
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    Well, actually this is *NOT* a good way of handling JavaScript. Because using this code *ALL* those feeds have to run every time somebody hits the page, even if the person is only interested in one of them.

    There are surely much better ways to do this.

    But I have no idea what kind of insertions BlogSpot allows/disallows, so this was just a scheme that I thought would work in most any situation if JavaScript is allowed, at all.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •