Hide anchor tag from url

Question 1

Question by soft_developer

Possible Duplicate:
How to hide anchor tag from URL

I have a menu which contains submenus, I want that onclick if each submenu, that will redirect me on a div of the php page :

For example if I want to go from :

Menu Menu1 –> Submenu1 I want that onclick of my sbmenu1 it redirect my on a div on page1#div_name without dipslay on the URL : www.page1.php#div_name, I just want www.page1.php

    <ul>
        <li><a href="#">Menu1</a>
            <ul>
                <li><a href="page1.php#div_name">Submenu1</a></li>
                <li><a href="page2.php#div_name">Submenu2</a></li> 
            </ul>
        </li>
    </ul>

How can I fix this?

Answer

Answer by Starx

Starx

You can modify the URL after it completes loading

window.history.pushState(“object or string”, “Title”, “page.php”);

FOr more info, check this tutorial.

Question 2

Question by Iain Simpson

Iain Simpson

I have been using the following to add a dynamic link on a page I am writing, it works ok and appears how it should on the page but I cant help but think that I am going a bit backwards with the way its written as it looks messy. What is the correct way to write it, as if I put it all in one line it doesn’t work ?..

echo '<a href="./customer-files/';
        echo $customerID;
        echo '/';
        echo $filename->getFilename();
        echo '">';
              echo $filename->getFilename();
    echo '</a>';

Answer

Answer by Quentin

Quentin

I’d approach it like this:

$safe_customer_id = htmlspecialchars(urlencode($customerID));
$safe_filename = htmlspecialchars(urlencode($filename->getFilename()));
$safe_label = htmlspecialchars($filename->getFilename());
echo "<a href="./customer-files/$safe_customer_id/$safe_filename">$safe_label</a>";

Answer

Answer by Starx

Starx

Concatenation is your friend. Use a . to combine multiple string expression into one.

echo '<a href="./customer-files/'.$customerID.'/'.$filename->getFilename().'">'.$filename->getFilename()/'</a>';

Even better way would be

$filename = $filename -> getFilename(); //cache the filename
echo "<a href='/$customerId/$filename'>$filename</a>";
  // ^ On this echo NOTICE that variables can be DIRECTLY placed inside Double qoutes.

Question 3

Question by jeffkee

jeffkee

While retrieving items via AJAX etc., the links are set to do this:

$(this).click(function(){
ajax_function(); // hypothetical ajax call that puts data into a <div> of my choice
return false;
});

In this scenario, I’m wondering what the best way is to utilize jQuery to add things to my URL in this format:

http://www.mydomain.com/products

turns into

http://www.mydamain.com/products#category-12,page-4

Further note- I’m talking about the actual URL of the browser (in the URL bar) not a URL that is part of the DOM.

Answer

Answer by jeffkee

jeffkee

After searching some more (with better keywords than before on Google) I found the answers I needed, and I wrote the following functions:

    function get_url_hash(argument) {
    var hash = location.hash.replace('#','');
    if(argument=='' || argument==undefined) {
        return hash;
        alert(blank);
    } else {
        var foundhash = false;
        // specific argument given - let's find the value attached. 
        var hashblock = hash.split(',');
        for(x in hashblock) {
            var hasharray = hashblock[x].split('-');
            if(hasharray[0]==argument) {
                return hasharray[1];
                foundhash = true;
            }
        }
        if(foundhash==false) {
            return false;
        }
    }
}

function modify_url_hash(argument, value) {
    // This function goes through the entire hash,
    // figures out which parts of the hash should be added, updated or removed based on entry, 
    // and then spits out final result. 
    var hash = get_url_hash();
    var foundhash = false; // foundhash is set to false by default. if this hash is NOT found, then we add it at the end! 
    var hashcount = 0; // keep count of total # so as to determine where to put the commas etc. 
    var newhash = '';
    if(hash.length>0) {
        var hashblock = hash.split(',');
        for(x in hashblock) {
            var hasharray = hashblock[x].split('-');
            if(hasharray[0]==argument) {
                hasharray[1] = value;
                foundhash = true;
            }

            if(hasharray[1]!=false && hasharray[1]!='') { // if new value is NOT false, we keep it in.. otherwise don't feed it to newhas so it disappears.
                if(hashcount>0) { newhash = newhash+','; }
                newhash = newhash+hasharray[0]+'-'+hasharray[1];
                hashcount++;
            }

        }
    }

    if(foundhash==false) {
        // this is a new hash block. 
        if(hashcount>0) { newhash = newhash+','; }
        newhash = newhash+argument+'-'+value;
    }
    location.hash = newhash;
}

Answer

Answer by Starx

Starx

May be something like

oldlink = $('#mylinkselector').attr("href");
newlink = oldlink="#category-12,page-4";
$("#mylinkselector").prop("href",newlink);

Question 4

Question by qntmfred

qntmfred

I have the following embedded iframe

<iframe width="100%" height="400" src="reallylongpage.html" />

reallylongpage.html has 2 anchors #top and #bottom

I want my iframe to load reallylongpage.html at the bottom of the page so I did

<iframe width="100%" height="400" src="reallylongpage.html#bottom" />

But this has the undesirable effect of scrolling both the iframe AND the parent page. The parent page shouldn’t scroll at all. This happens in Chrome and Firefox.

here is an example with full code

parent.html

<html>
 <body>
    <div style="padding:100 200;">
      <iframe WIDTH="100%" HEIGHT="400" SRC="CHILD.HTML#BOTTOM" ></iframe>
    </div>
    <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br></div>
 </body>
</html>

child.html

<html>
  <body>
    <a name="top" href="#bottom">go to bottom</a><br>
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>
    <a name="bottom" href="#top">go to top</a>
 </body>
</html>

this is what i want it to look like
correct

this is what i get instead
incorrect

Answer

Answer by brianpeiris

brianpeiris

This appears to be the de facto behavior in browsers (At least I couldn’t find any written standard about anchors and scrolling).

The browser tries its best to scroll all windows until the desired fragment is visible. (You’ll notice this even when you click on the “got to top” link and also if you add “padding-bottom: 3000px;” to the div in your example.)

Consider using jQuery’s scrollTo plugin which actually manipulates scroll position of the appropriate container for you.

To demonstrate with your own example:

Hosted Demos:

With jQuery scrollTo

Without jQuery scrollTo

Full Source:

parent.html

<!doctype html>
<html>
    <head>
        <title>parent</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="jquery.scrollTo-min.js"></script>
        <script type="text/javascript">
            $(function(){
                var iframe = $('iframe');
                iframe.load(function(){
                    iframe.scrollTo('a[name=bottom]');
                });
            });
        </script>
    </head>
    <body>
        <div style="padding:100px 200px 3000px;">
            <iframe width="100%" height="400" src="child.html"></iframe>
        </div>
        <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br></div>
    </body>
</html>

child.html

<!doctype html>
<html>
    <head>
        <title>child</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="jquery.scrollTo-min.js"></script>
        <script type="text/javascript">
            $(function(){
                $('a').click(function(){
                    $(window).scrollTo('a[name=' + this.hash.substring(1) + ']');
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <a name="top" href="#bottom">go to bottom</a><br>
        1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>
        <a name="bottom" href="#top">go to top</a>
 </body>
</html>

Answer

Answer by Starx

Starx

Well, its just a confused browser. I did a quick look, and found out that the your name="bottom" has nothing beyond it. As the browser needs to focus on that element and place it window on its top, it didn’t find anything inside the iframe which can scroll the #bottom to the top, so it scrolled the parent, but only to bring the #buttom to top.

I have set a page with your code here it is http://jsfiddle.net/VGN2k/ to explain what I am saying. Check it out

What I have done is added bunch of <br/> after the “#bottom” in order to create space, now browser has space which it can use to bring #bottom on the top.

Tag: anchor

Hide anchor tag from url

Question by soft_developer

Answer by Starx

Adding A Dynamic Link In Php

Question by Iain Simpson

Answer by Quentin

Answer by Starx

Using jQuery to append URL with anchor #

Question by jeffkee

Answer by jeffkee

Answer by Starx

<iframe src="reallylongpage.html#bottom" /> doesn't work

Question by qntmfred

Answer by brianpeiris

Hosted Demos:

Full Source:

parent.html

child.html

Answer by Starx

Please fill the form - I will response as fast as I can!