CODEWITHSUNDEEP
jqueryscrollshow-hidehashtag
user756659
user756659

Reputation: 3512

no scrolling with hashtag/bookmark

I made a simple jquery script to sort content of the page on clicking of classes... in this example, all products, windows, or macintosh. The script works just as I want it to EXCEPT since I am using a # in the href the window scrolls... is there anyway to stop the window from scrolling and staying exactly where it is when the user clicks on one of the links?

Also, I put the script together pretty quick - if anyone wants to offer some optimization please go ahead...

basic html :

<a class="all" href="#">All Products</a>
<a class="win" href="#">Windows</a>
<a class="mac" href="#">Macintosh</a>

<div class="windows">1 win</div>
<div class="macintosh">2 mac</div>
<div class="windows">3 win</div>
<div class="windows">4 win</div>
<div class="windows">5 win</div>
<div class="macintosh">6 mac</div>
<div class="windows">7 win</div>

the script :

var $zproducthide = jQuery.noConflict();
$zproducthide(document).ready(function() {

$current = 'all';

$zproducthide(".all").click(function () {
if ($current != 'all'){
       $zproducthide(".windows").hide();
       $zproducthide(".macintosh").hide();
       $zproducthide(".windows").fadeIn(1500);
       $zproducthide(".macintosh").fadeIn(1500);
       $current = 'all';
}
});

$zproducthide(".win").click(function () {
if ($current != 'windows'){
       $zproducthide(".windows").hide();
       $zproducthide(".macintosh").hide();
       $zproducthide(".windows").fadeIn(1500);
       $current = 'windows';
}
});

$zproducthide(".mac").click(function () {
if ($current != 'macintosh'){
       $zproducthide(".windows").hide();
       $zproducthide(".macintosh").hide();
       $zproducthide(".macintosh").fadeIn(1500);
       $current = 'macintosh';
}
});
});

Upvotes: 0

Views: 925

Answers (4)

Zach Smith
Zach Smith

Reputation: 11

Try using javascript:void(0) as the href:

<a href="javascript:void(0)"></a>

Upvotes: 1

Andr&#233; Zoufahl
Andr&#233; Zoufahl

Reputation: 96

To answer your question: When the event is fired (click on the link) you need to prevent the default behaviour and continue as usual. Means you need to handle in the event in each function and call event.preventDefault(). This way no hashtag will be added.

One of your functions will look like this:

$zproducthide(".all").click(function (event) {
    event.preventDefault();    // no hashtag please

    if ($current != 'all'){
       $zproducthide(".windows").hide();
       $zproducthide(".macintosh").hide();
       $zproducthide(".windows").fadeIn(1500);
       $zproducthide(".macintosh").fadeIn(1500);
       $current = 'all';
    }
});

apart from that, here are some suggestions:

1: since you use JS to show/hide the elements you can get rid of the a-tags and use anything you like and add a click-trigger to it, e.g. buttons

  <button class="all" href="#">All Products</button>
  <button class="windows" href="#">Windows</button>
  <button class="macintosh" href="#">Macintosh</button>

2: add more metainformation, which aid you later (e.g. all 7 items are some sort of products right? )

<div class="prod windows">1 win</div>
<div class="prod macintosh">2 mac</div>

3: unify the click-trigger for all 3 buttons and use the new class

$("button").click(function(event) {
    event.preventDefault();

    prod = $(this).attr('class');
    if(prod!="all") {
        // mac,win
        $(".prod")
            .hide()                 // hide all elements
            .filter("."+prod)       // filter win/mac
                .fadeIn(1500);      // show those

    } else {
        // all
        $(".prod")
            .hide()
            .fadeIn(1500);
    }
});

Upvotes: 1

fsodano
fsodano

Reputation: 548

How are you?

New answer (some optimization included):

//Start with the default class
$current = 'all';

//Setup an object which is configured as { class : 'jQuery selectors' }
//This is neat because you can add more items and only modify this array like this:
//arr = {'lin': '.linux', 'win' : '.windows', 'mac' : '.macintosh' };
arr = {'win' : '.windows', 'mac' : '.macintosh' };

//Get all the object properties in order to make it dynamic (so you don't have to add new classes manually, only in our "arr" object
var sel = '';
$.each(arr,function(k,v){ sel += ',.' + k; });
//at this point aSelector equals to ",.win,.mac";

//create the .all selector
arr.all = sel;

//Equals to $('.all,.win,.mac'
$('.all' + sel,function(){

  $current = $(this).attr('class');

  $(arr['all']).hide(); //Hide all elements
  $(arr[$current]).fadeIn(1500); //Show only the current one (in case it's 'all', all elements will be shown)

  //Prevent default behaviour!
  return false;
});

Original answer:

The way to prevent this is to return false in the click event, this way, the default behaviour won't execute! So:

//Select all the anchors with the desired classes
$("a.all,a.win,a.mac").click(function(){ return false; });

I believe this should work!

Cheers!

Upvotes: 0

optimisticupdate
optimisticupdate

Reputation: 1689

If you use a tags like

<a class="all" href="#">All Products</a>
<a class="win" href="#">Windows</a>
<a class="mac" href="#">Macintosh</a>

it forces the browser to refresh, set the elements to divs and if you need the a href look set css to

cursor: pointer;

Upvotes: 0

Related Questions