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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    If URL contains hashtag, then do this

    If you go to thisiswhyimbroke.com and click any of the tabs, you'll see that an anchor/hash tag is added to each button. #a1,#a2, etc.

    I want to use a script where if the URL contains #a1, then it echos certain HTML/PHP.

    I was trying to use PHP for this but for some reason it can't detect anchors...

    Any help is appreciated!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,588
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    Not for "some reason". On purpose.

    That hash isn't sent to the server-side code.

    If you need the capability of a hash both server and client side, then hack it.

    somesite.com/somepage.php?hash=a1

    And then have the PHP code echo back
    Code:
    echo 'window.onload = function(){ location.hash="' . $_GET["hash"] . '"; };';
    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.

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I actually got javascript to verify if there was a hashtag in the URL with this code:

    Code:
    <script type="text/javascript">
                $(document).ready(function () {
                    if(window.location.href.indexOf("#a2") >= 0) 
                    {
                      //output specific HTML
                    }
    });
            </script>
    My only problem is I'm not sure how to outprint the HTML code I want there. I tried using a predefined PHP var, but to no success. Can anyone help me insert HTML with proper syntax? Here's the HTML for reference:

    Code:
    <ul class="tabset">
    	<li class="active" id="tab1"><a href="#tab-1" class="tab">Random</a></li>
    	<li id="tab2"><a href="#tab-2" class="tab">Price High</a></li>
    	<li id="tab3"><a href="#tab-3" class="tab">Price Low</a></li>
    	<li id="tab4"><a href="#tab-5" class="tab">Food &amp; Drink</a></li>
    	<li id="tab5"><a href="#tab-6" class="tab">Home &amp; Office</a></li>
    	<li id="tab6"><a href="#tab-8" class="tab">Gadgets</a></li>
    	<li id="tab7"><a href="#tab-7" class="tab">Geek</a></li>
    	<li id="tab8"><a href="#tab-4" class="tab">Latest</a></li>
    	<li id="tab9"><a href="#tab-9" class="tab">All</a></li>
    
    </ul>

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,588
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    So what do you want to do?

    Sounds like you want to click on the <li id="tab2"> ???
    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.

  • #5
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I just want to insert this HTML:
    Code:
    <ul class="tabset">
    	<li class="active" id="tab1"><a href="#tab-1" class="tab">Random</a></li>
    	<li id="tab2"><a href="#tab-2" class="tab">Price High</a></li>
    	<li id="tab3"><a href="#tab-3" class="tab">Price Low</a></li>
    	<li id="tab4"><a href="#tab-5" class="tab">Food &amp; Drink</a></li>
    	<li id="tab5"><a href="#tab-6" class="tab">Home &amp; Office</a></li>
    	<li id="tab6"><a href="#tab-8" class="tab">Gadgets</a></li>
    	<li id="tab7"><a href="#tab-7" class="tab">Geek</a></li>
    	<li id="tab8"><a href="#tab-4" class="tab">Latest</a></li>
    	<li id="tab9"><a href="#tab-9" class="tab">All</a></li>
    
    </ul>
    Where the comment is in that previous javascript " // Output HTML here "

    I just don't know how to properly format everything.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,588
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    I am utterly lost.

    Why would you want to use JavaScript to write that? If that code needs to be on the page EVERY TIME the page appears, why would you not just drop it into the HTML? Why is JavaScript involved?
    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.

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,401
    Thanks
    11
    Thanked 595 Times in 575 Posts
    when you build a single-page app, all the content of all the tabs is stored on the same page, so the hash changes don't load anything from php, so there's nothing to insert upon click either.

    typically, a click on a tab link hides all open tabs, and shows the tab named in the link. in order for the tab setup to be bookmarked and history'd, use a simple onload event to find location.hash, and .click() the appropriate tab link to show the tab content specified by the url. you can also likely just raise the onhashchange() event, and let the normal handlers display the correct content.

    you can also use the :target css pseudo-selector to match hashes with tab content, so that folks w/o js can still navigate the page and open/close tabs as expected (ex: div:target {display:block;})

    @old penant: you want to do this so you don't have to use ajax and/or so interaction widgets are bookmark-able.
    Last edited by rnd me; 10-09-2011 at 09:10 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,588
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    you want to do this so you don't have to use ajax and/or so interaction widgets are bookmark-able
    Do what? Create the HTML via JavaScript? Or use the tags in this way. I understand using the tags. I see no reason to create the HTML via JavaScript.

    Not to mention that it's not search-engine friendly.
    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.


  •  

    Posting Permissions

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