Navigation Hyperlinks Only Work When Mouse Is on The Text

a link not working by clicking, only work by Open link in new tab command

You have some javascript code which is preventing the default action of the anchor tag to be executed. You could inspect the Network tab in FireBug or Chrome DevTools to see if some AJAX request is being made when you click on the link. You could try excluding javascript files until you find the one that is doing this.

Setting a link to an li instead of just Text

I don't want the number on the right to be on a seperate line that's
the problem, it should be on the right of the Text

I think I understand what you're trying to do here. Though, I'm not sure because your question has been quite confusing..

First, do set display: block on the a. That is the right thing to do here.

Then, move the number inside the a, and add a span inside:

<li class="cat-item cat-item-147">
    <a href="http://test.vps.graenseguiden.dk/newscat/food/" title="Vis alle indlæg i kategorien Food">
        <span>Food</span> (4)
    </a>
</li>

Then, some extra CSS is needed. You should merge the new CSS with what you already have - for the demo, I've added it within the HTML pane for simplicity (marked with <!--new css right here-->):

http://jsfiddle.net/thirtydot/b7S4L/3/

div.gg_newscats li a {
    display: block;
    padding: 16px 0;
    color: #333
}
div.gg_newscats ul li {
    padding-top: 0;
    padding-bottom: 0
}
div.gg_newscats li a span {
    color: #cc0014
}
div.gg_newscats li a:hover {
    text-decoration: none
}
div.gg_newscats li a:hover span {
    text-decoration: underline
}

The messing around with span and :hover is to keep the colour and underline exactly as you had it.

Prevent link dragging, but still allow text highlighting

@Julien Grégoire's answer above put me on the right track for this, but the below code is the basics of what I ended up using.

var clickedEl = document.getElementById("test");var limit = 5;var mouseMoved = false;
function resetEvents() {    clickedEl.onmousemove = null;    clickedEl.ondragstart = null;    clickedEl.onmouseleave = null;    mouseMoved = false;}
clickedEl.onmousedown = function (downEvent) {    if (clickedEl.attributes.href) {        clickedEl.onclick = function (clickEvent) {            if (mouseMoved) {                clickEvent.preventDefault();            }            resetEvents();        };    }        clickedEl.onmouseleave = function () {        resetEvents();    };
    clickedEl.onmousemove = function (moveEvent) {        // This prevents the text selection being dragged        clickedEl.ondragstart = function (dragEvent) {            dragEvent.preventDefault();        };
        if (Math.abs(moveEvent.x - downEvent.x) >= limit || Math.abs(moveEvent.y - downEvent.y) >= limit) {            // If user clicks then moves the mouse within a certain limit, select the text inside            window.getSelection().selectAllChildren(clickedEl);            mouseMoved = true;        }    };
};

<a id="test" href="http://stackoverflow.com">Click or select</a>

Javascript, change a link color when mouse is over it, only after I click a button

If I understand correctly, you want the link only to change colors AFTER you press a button. To do this, you could use a boolean. Something like

var clicked = false;
var onButtonClick = function() { clicked = !clicked; }
x.onmouseover = function () {
    x.style.color = clicked ? 'green' : 'blue'
}
x.onmouseout = function () {
    x.style.color = 'blue'
}

CSS/HTML: Disable link hover text

The only way to do this is to remove the data in 'href', and change it to a javascript onclick where you set the window.location to the url you want.

<a href="http://www.stackoverflow.com/">Go To SO</a>

becomes

<a style="cursor: pointer" onclick="javascript: window.location = 'http://www.stackoverflow.com/';">Go To SO</a>

Hide URL when mouse hover over asp:HyperLink

You need to store the url you are wanting to navigate to in a hidden field and just set NavigateUrl = "#" in the markup as shown below. This way when user's cursor hovers over the link, the actual navigate URL will never be displayed at bottom of browser.

Then attach a click event handler on client-side for the hyperlink which you do by just setting onclick attribute of the hyperlink to a JavaScript function called navigate. The actual redirection to a new page is done by this navigate function.

In this situation, you will only see the URL of current page suffixed with #. For example, if your current page URL is http://localhost/mysite/view.aspx then it will show http://localhost/mysite/view.aspx# at bottom of browser.

Markup needed

<asp:HyperLink runat="server" ID="hl" NavigateUrl="#" 
           onclick="navigate();">Some Text</asp:HyperLink>
<asp:HiddenField ID="hdnURL" runat="server" Value="http://www.microsoft.com" />

JavaScript needed

<script type="text/javascript">
        function navigate() {
            window.location.href = document.getElementById("<%=hdnURL.ClientID%>").value;
        }
</script>

Another approach that you can use if you must set the NavigateURL for the hyperlink in code-behind is as below. In this approach, you need to remove the NavigateURL before the content renders and store it in a global variable called linkUrl. The event that fires before the content renders is pageLoad and we will use that event to do this hack.

Global variable in JavaScript must always be declared outside all methods.

Then on clicking the hyperlink, we can obtain the value from the global variable of linkUrl and redirect user to that location.

Note: Keep the markup of the hyperlink the same as in first approach. But remove the hidden field from that markup.

<script type="text/javascript">
    function navigate(event) {
         window.location.href = linkURL;
    }
    var linkUrl = null;
    function pageLoad() {
        var link = document.getElementById("<%=hl.ClientID%>");
        linkURL = link.getAttribute("href");
        link.setAttribute("href","#");
    }
</script>

---

Related Topics