Tag: hyperlink
Nabin Nepal (Starx) css html html-lists hyperlink
March 16, 2013

Link not working in LI

Question by Pjack

PjackPjack

OMG I’m pulling my hair out trying to figure out why some links don’t work in the UL. However if your right click open in new tab that works. I don’t understand why some are not clickable. The first two links work but they are events used by jQuery. 3rd and 4th links are actual pages and those don’t work and never does the last javascript/jquery link. Just the first two using jQuery. The others do not. I’ve reformatted my CSS several times and no difference. The unusual tags is because I use Smarty. BTW using Chrome.

This is the HTML

Edit: rendered markup

<div id="phomenu" class="photoMenu">
    <ul>
    <li><a id="avatar_13885_10028" class="set_avatar" href="#13885">Use This Photo As Avatar</a></li>
    <li><a id="cover_13885_10028" class="set_cover" href="#13885">Use This Photo As Album Cover</a></li>
    <li><a href="/page-13885-k4cjGSDSG4K.html">Page Photo</a></li>
    <li><a href="/?page=photo&amp;section=desc&amp;pho_id=13885">Edit Photo Information</a></li>
    <li><a id="remove_k4cjGSDSG4K_13885" class="remove_photo" href="javascript:void(0)">Delete this photo</a></li>
    <li><a id="feature_13885" class="feature_photo" href="javascript:void(0)">Feature Photo</a></li>
    </ul>
</div>

And this is the CSS

.photoMenu ul{
        list-style-type: none;
        list-style-position: outside;
        margin: 0;
        padding: 0;
        font-size:9pt;
        border-top: 2px solid #ffa449;
    }
    .photoMenu li {
        margin: 0;
    }
    .photoMenu li a {
        color: #FFFFFF;
        border-bottom: 1px solid #e6e6e6;
        display:block;
        min-height:25px;
        padding-top:10px;
        background-color:#C6711B;
        text-decoration: none;

    }
    .photoMenu li a:hover {
        color: #FFF;
        background-color: #f2a83a;
    }

Answer by Starx

StarxStarx

The code you have shown so far does not have any problem. The problem is somewhere else, may be your script is interfering with the link.

Proof

If the browser is just made at you, it can get angry with the javascript:void(0) part

Although unnecessary it may require a ; at the last

<li><a id="remove_k4cjGSDSG4K_13885" class="remove_photo" href="javascript:void(0);">Delete this photo</a></li>
<li><a id="feature_13885" class="feature_photo" href="javascript:void(0);">Feature Photo</a></li>
Nabin Nepal (Starx) css hyperlink javascript readonly
October 5, 2012

What is the best way to make entire web page links non clickable

Question by Codemator

CodematorCodemator

Possible Duplicate:
Override default behaviour for link ('a') objects in Javascript

What is the best way for making entire page links in home page read only (non clickable like href=# or href="javascript:void()" based on a user action.

I wanted to use only Javascript and CSS to achieve this.

Answer by Veli

VeliVeli

try

with jquery

$("a").click(function() { return false; });

vanilla js

        var elements = document.getElementsByTagName("a");
        for (var i = 0; i < elements.length; i++) {
            elements[i].onclick = function () { return false; }
        }

Answer by Starx

StarxStarx

Here is a wonderful solution by CMS, by using event delegation technique.

document.onclick = function (e) {
  e = e ||  window.event;
  var element = e.target || e.srcElement;

  if (element.tagName == 'A') {
    someFunction(element.href);
    return false; // prevent default action and stop event propagation
  }
};

Demo

Nabin Nepal (Starx) email encoding hyperlink php regex
April 20, 2012

Prevent links from auto hyperlinking in Outlook etc using PHP

Question by Ben Carey

Ben CareyBen Carey

I know that this can be done using settings in Outlook, but that only sorts the issue for myself.

What I would like to do is use PHP to prevent text from being hyperlinked just because there is an @ sign etc…

As far as I can see, the only option for me is to encode all @ signs to their HTML numeric entity like so:

Something like this:

$message = str_replace('@','&#64;',$message);

However, if possible, I do not want this to happen if the @ sign is part of an email address.

Therefore I need something like this:

// SOME_REGEX will match any @ sign that is NOT part of an email address
$message = preg_replace('SOME_REGEX','&#64;',$message);

Can anybody think of any other better methods? Are there any flaws in this plan? Can anyone suggest a good regular expression for this? I am struggling to write a regex that matches an @ sign if it is not part of an email address

Thanks in advance

Answer by Anthony

AnthonyAnthony

This will not work if the email address is wrapped in anything not defined in the trim list. 

$chunked_message = explode(" ", $message);

foreach($chunked_message as $chunk) {
    $clean_chunked_message[] = 
               (!filter_var(trim($chunk, " -().?!trn", FILTER_VALIDATE_EMAIL)) 
               ? str_replace('@', '&#64;' $chunk) : $chunk;
}

$clean_message = implode(" ", $clean_chunked_message);

Good luck.

Answer by Starx

StarxStarx

This is a feature of mail application to detect link when it is found and make it click able.

A dirty trick to escape this situation is to use space in between the links.

Example: 

http://ww w.you tube.com/v=.......
Nabin Nepal (Starx) hyperlink javascript jquery return-value
April 11, 2012

Return false not working sometimes

Question by Vladimir

VladimirVladimir

I have a page with photo gallery http://dev.dolina-imeniy.ru/fotogalereya/kp_usadba_tishnevo/
I use this to bind click event and return it false

$('a.link_photo').click(function(e) {
var new_img = $(this).attr('href');
var photo_title = $(this).attr('title');
var photo_info = $('.photo_info', this).html();
$('#photo_view img').attr({
    src : new_img
});
$('#photo_title').html(photo_title);
$('#photo_info').html(photo_info);
return false;
    });

But on some images it not work! Why it appears?

Try click on 10 image (ut-1-foto.jpg) in my example to see it.

Answer by c9220

c9220c9220

The reason for this is that the function only binds to the elements that are already in existent when it is called. Every link created after the the document has loaded will not be bound to this function. To listen for the creation of these elements and to then bind the function to them, you could use the jQuery plugin liveQuery. I hope that helps.

Answer by Starx

StarxStarx

For some reason you code is breaking, so it does not reach to return false.

You can use e.preventDefault(); to stop the default action

e.preventDefault();
Nabin Nepal (Starx) hyperlink mysql php user
April 4, 2012

Check which user clicked on which link

Question by user1295105

user1295105user1295105

I have few links on my website, how can I record into database which user clicked on which link. I have records of the links into database and users. I have created a table in which there will be userid, linkid. But im not sure how to code this php. Any ideas?

EDIT:

<a hef="page.php?id=27">pagename</a>

the link above goes to a page where the link is counted and it looks for the url into the database and redirects to that page. But i want to see which user clicked it.

Answer by Starx

StarxStarx

Most easiest way would be to pass a link-identifier as the URI parameter

An example:

<a href="page.php?id=27&clicked=pagename">pagename</a>

Now you can get what the user clicked by checking $_GET['clicked']

It seems I misunderstood the question

You can do this on your page.php

$id = $_GET['id']; //Get the page id
$userid = $_SESSION['id']; // Get the user id if stored in session

//Do something with the user id

header("location: ..."); //redirect to a different place
exit;
Nabin Nepal (Starx) html hyperlink mailto
March 31, 2012

How to make a link navigate to another page and also mailto an email?

Question by Doug Firr

Doug FirrDoug Firr

I’d like a link where if someone clicks a mailto link they are also shown a different page.

What would the html look like? Currently:

<a href="mailto:someone@mail.com">email</a>

Any ideas?

Answer by Starx

StarxStarx

Use Javascript’s window.location on the click event of the link

<a href="mailto:someone@mail.com" onclick="window.location=another.html">email</a>

Update:

If you have to stack up lots of code in the onclick event, create a function instead

function handleClick() { 
   _gaq.push(['_trackEvent', 'emails', 'clicked', 'lead']); //first this
   window.open = 'anotherpage.html'; //or window.location for redirection
}

HTML

<a onclick="handleClick()" href="mailto:someone@mail.com">email.com</a>
Nabin Nepal (Starx) css hyperlink
March 30, 2012

Why is this css overriding this other one?

Question by leora

leoraleora

I have 2 css files in my page:

  1. Site.css
  2. jquery-ui.css

Site.css is listed BELOW the jquery-ui css

I have a link that looks like this on my page:

 <a class='closeClueTipLink'>close</a>

and the issue is that the link is showing up black instead of the normal blue text. When i use firebug to figure out why, i see this:

enter image description here

I don’t understand why .ui-widget-content (which has the color #222222) is overriding .closeClueTipLink (which as color:blue) given that site.css is below the jquery one.

Any ideas or suggestions why this ordering is happening ?

Answer by BoltClock

BoltClockBoltClock

Because there’s an a selector just after .ui-widget-content:

.ui-widget-content a

Making it more specific than .closeClueTipLink, even though .closeClueTipLink is found in a later stylesheet.

You could easily balance this out by adding the same type selector to your other rule so you get a.closeClueTipLink, making both selectors equally specific (1 type and 1 class). Then that, being the rule that’s defined and loaded later, will apply and your link text will be blue.

Answer by Starx

StarxStarx

Because .ui-content-content a { } is loaded after the previous style .closeClueTipLink.

I am pretty sure jquery...tom.css is loaded after site.css, so the styles defined later overrides previously defined styles.

There are ways you are amend this problem:

  1. Pinpoint the selector like .ui-content-content a.closeClueTipLink
  2. Use !important at the end of color defination. color: #222 !important;[not recommended]
Nabin Nepal (Starx) anchor hyperlink php string
March 27, 2012

Adding A Dynamic Link In Php

Question by Iain Simpson

Iain SimpsonIain 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 by Quentin

QuentinQuentin

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 by Starx

StarxStarx

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.
Nabin Nepal (Starx) hyperlink php php-session
May 22, 2010

PHP Link to session_destroy

Question by nosedive25

nosedive25nosedive25

I need to make a link that when clicked will run this in php:

session_destroy();

I know how to make a link in html, but I don’t know how to make it interact with php. Thanks for any help.

Answer by Starx

StarxStarx

For an example, you want to use this script for logging out.

Your HTML has to be something like this for “index.php” (just an example)

<a href="logout.php">Log Out</a>

Then on the “logout.php”

session_start(); //to ensure you are using same session
session_destroy(); //destroy the session
header("location:index.php"); //to redirect back to "index.php" after logging out
exit();

In case you want to use JavaScript, I can tell you that too?

...

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