0

I'm a graphic designer. So my code knowledge pretty much includes what I need to get done for myself. First time I've had to post a question. But i've been looking and testing for about 5 hours and am completely missing something with my limited knowledge. I'm sure this is simple and I'm missing something. My dev site is here http://www.heybuddy.tv/temp/dev/005.html

The problem I have is with the navigation links. I have jquery toggle stuff going on between design and photography, but I have no idea how to disable the links that are active. I don't know if its a IF/ELSE type statement, or if its a javascript onmouseover event. Or even if my basic approach is completely wrong. I cant find a example site to look at and all google searchs not doing anything for me with my search terms. I'm desperate and frustrated. And sorry if this isnt the "best practices" on showing a problem. I'm new to askin for help.

  • 1
    can you put some code with your question? maybe just simplified html and the JS you've already tried or are currently using specific to this issue or those links? also - when are you trying to disable them? always or on a certain event...? (yeah, i just looked, not sure why everything is bouncing up and down or what you want or don't want) – gloomy.penguin Oct 26 '13 at 07:23
  • there are some ideas in this question: http://stackoverflow.com/questions/5376444/how-do-i-disable-a-href-link-in-javascript – Kokozaurus Oct 26 '13 at 07:26
  • so I did look at the page. When I click multiple times on one link (like photography) everything moves up and down the page. Personally... i would clear off all the JS/JQuery and get simple behaviors (disabling) to consistently work, then add harder stuff (moving things). You can try to... store the current page in a JS variable and check it each time something is clicked... if link <> current then do something, else nothing. – gloomy.penguin Oct 26 '13 at 07:32

2 Answers2

0

but I have no idea how to disable the links that are active.

if that's your question, in your case I can see on active item class changed to photography-disabled or design-disabled. In jQuery you can do then:

$(document).ready(function(){
    $('#navbar .nav-text a[class*="disabled"]').on('click', function(){
        return false;
    });
});
electroid
  • 603
  • 8
  • 20
0

It would help to be a bit more specific but I'm always down to help a greenhorn.

There are plenty of ways to disable a link using jquery and javascript. What you are looking to do is access the disabled attribute (e.g. disabled='disabled'/disabled="true"/just plain old disabled in your code).

Jquery Solution

First of all, if you want to dynamically change what happens when the user clicks the link, you will need to use a javascript link, a link that calls a javascript function when you click it.

<a id="myId" name="myName" href="javascript:void(0)" onClick="function()">BlahBlah</a>

Next, you can run anything on page load using the following and will need to do so to immediately disable the links with my code.

$( document ).ready(function() { 
    //code and function calls go here
 });

Otherwise, jquery or javascript can be used to simply change a DOM Element (the document element).

To see why you use this method, read this

You can reference a link attribute using its tag (e.g. a, div;etc.) in the following format. ('tag').event(function(){}); To access a specific link, you need to give it an id. The format would become ('#id').event(function(){});

You are looking for something that looks like the following code.

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

You may also be looking to filter your link requests.

$('a').click(function(){return ($(this).attr('disabled')) ? false : true;});

This code uses the turnary operator((condition)?perform if true:else perform if false) and a return statement to change the status on a click.

If you wish to add the link to a list so you can track what is clicked, that is possible to. That way, if you disable after clicking, you can keep track of what has been disabled. The following code can be manipulated for use in enabling or disabling particular page sections but javaScript is always open to injection or scraping. It is better to use server side script in that instance. This is mostly so you get the idea of what is going on.

var disabled=[]
...
$('a').click(function(){
     var isSet=$(this).attr('disabled');

     if(isSet==false)
     {
       disabled.push(event.target.id);
     }

     return false;
});

To disable on the load simply add an onload tag to your script which should be in a .js file for ease of reading and security of your code.

More information is available here disable a hyperlink using jQuery

JavaScript Solution

You can change the status of the link by accessing all of the links on the DOM (like XML) using tag names and then setting the disabled attribute.

var list=document.getElementsByTagName("a");

for(var i=0;i<list.length;i++)
{
   list[i].disabled='disabled';
}

This code accesses all of your links and uses a for loop to disable them using the disable attribute.

If you wish to disable a particular link use the following which accesses an element by its Id. document.getElementById("id").disabled='disabled';

To renable all of your links:

var links=document.getElementsByTagName("a");

for(var i=0;i<links.length;i++)
{
   links[i].removeAttribute("disabled");
}
Community
  • 1
  • 1
Andrew Scott Evans
  • 1,003
  • 12
  • 26