aktive Anker-Links markieren mit Javascript (Wordpress)

celiadee · 21. April 2012

Liebes JS-Forum,

bei meinem Wordpress-Blog befinden sich alle Inhalte (Artikel) auf einer Seite.
Die Kategorien sortiert man mit einer Navigation aus Anker-Links (dynamisch).

Das sieht dann so aus: link zum projekt

Hier der Code der Navigation:

PHP:

<ul class="cate_list">
            
            
        	<?php //list_tags(); ?> 


<li><a class="all" href="#all">linienf&uuml;hrung</a>
</li> 
            
            <?php 
			  $categories=  get_categories('title_li'); 
			  foreach ($categories as $category) 
			  {
				$option = '<li><a href="#'.$category->category_nicename.'" class="'.$category->category_nicename.'">';
				$option .= $category->cat_name;
				$option .= '</a></li>';
				echo $option;
			  }
			 ?>

Ich möchte den aktiven Zustand andersfarbig markieren, dafür habe ich folgende Javascript-
Funktion gefunden: von Maik 08/2010

PHP:

	<script language="JavaScript" type="text/javascript">	
		
			<!--	
function aktivieren(strHref)
{
    if(document.getElementById)
        {
            for(i=0;i<document.links.length;++i)
                {
                    if(String(document.links[i].className).match(/^(nav|clicked)$/))
                        {
                            document.links[i].className=(document.links[i].href==strHref)?'clicked':'nav';
                        }
                }
        }
}
	
				-->	
	
		
		</script>

der link dazu sieht dann so aus:

PHP:

    <li><a href="#anker1" class="nav" onclick="aktivieren(this.href)">Anker 1</a>
    <li><a href="#anker2" class="nav" onclick="aktivieren(this.href)">Anker 2</a></li>
    <li><a href="#anker3" class="nav" onclick="aktivieren(this.href)">Anker 3</a></li>
</li>

und das CSS:

PHP:

	<style type="text/css">
.navi a.nav{
        -webkit-transition:color .2s ease-out;
        color: red;
}
.navi a.nav:hover, .navi a.clicked{
        color: blue;
}


		</style>

das funktioniert auch wunderbar!
Aber wie kann ich die Funktion in den Links einbinden, da 'class' ja jeweils schon anderweitig belegt ist?

PHP:

<a class="all" href="#all">linienf&uuml;hrung</a>
<a href="#'.$category->category_nicename.'" class="'.$category->category_nicename.'">'

Ist das übrhaupt zu realisieren?
Wenn ja, wie? Hat jemand eine Idee?

Lieben Dank und viele Grüße
Celiadee

SpiceLab · 21. April 2012

celiadee hat gesagt.:
Aber wie kann ich die Funktion in den Links einbinden, da 'class' ja jeweils schon anderweitig belegt ist?

Das class-Attribut kann/darf auch mehrere Klassennamen - getrennt durch Leerzeichen - enthalten.

HTML:

<a href="..." class="imagebekleidung-corporate-fashion nav" onclick="aktivieren(this.href)">

bzw.

PHP:

<a href="..." class="'.$category->category_nicename.' nav" onclick="aktivieren(this.href)">

Oder hab ich dein Anliegen mißverstanden?

celiadee · 22. April 2012

moin spicelab,
das funktioniert leider nicht. habe es ausprobiert.
das sind auch keine "einfachen" css klssen, sondern die stehen mit javascript-funktionen in verbindung.
An <a class="all" href="#all">linienführung</a> class = "all" hängt z.B. ein Javascript im Header:

HTML:

/* filtering the Boxes */
		$('.cate_list li a').click(function(){
		
		  var colorClass = '.' + $(this).attr('class');
		
		 if(colorClass=='.all') {
			// show all hidden boxes
			$wall.children('.invis')
			  .toggleClass('invis').fadeIn(speed);
		  } else {  
			// hide visible boxes 
			$wall.children().not(colorClass).not('.invis')
			  .toggleClass('invis').fadeOut(speed);
			// show hidden boxes
			$wall.children(colorClass+'.invis')
			  .toggleClass('invis').fadeIn(speed);
		  }
		  $wall.masonry();
		
		  return false;
		});
		/* End Filtering the Boxes */

Grüße, celidee

SpiceLab · 22. April 2012

Im Falle dieses jQuery-Scripts bietet sich doch eine entsprechende Funktionserweiterung an, um das CSS (=Klasse oder Eigenschaftswert/e) des geklickten Objekts (=Link) zu tauschen, womit die zusätzliche "gesucht & gefundene" JS-Funktion obsolet ist.

celiadee · 22. April 2012

Hi Spicelab, erstmal, danke für Deine Antwort.

Die Funktionserweiterung liegt natürlich nahe. Weisst Du denn, wie das geht?
Die jqueries sind plugins, deren Code meinen Horizont leider weit überschreiten. So weiss ich nicht, an welchen Stellen in den Scripts ich die Funktion ergänzen müsste.

Ich poste mal das vollständige Javascript in meinem Header:

HTML:

<script src="<?php bloginfo('template_url'); ?>/js/jquery.tools.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.masonry.min.js" 
type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.infinitescroll.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){

		$(".box a").each(function(i){
			i=i+1;
			$(this).hover(function(){
			var $box_height = $(this).find("img").height();
			var $var_padding = $box_height/2;		  
			$(".blog_info").css({"padding-top":$var_padding-8 ,"padding-bottom":$var_padding-8})			   
			});			
		});		

		
				var
				speed = 1000,  // animation speed
				$wall = $('#wrap');
			 

		
		/* filtering the Boxes */
		$('.cate_list li a').click(function(){
		
		  var colorClass = '.' + $(this).attr('class');
		
		  if(colorClass=='.alle') {
			// show all hidden boxes
			$wall.children('.invis')
			  .toggleClass('invis').fadeIn(speed);
		  } else {  
			// hide visible boxes 
			$wall.children().not(colorClass).not('.invis')
			  .toggleClass('invis').fadeOut(speed);
			// show hidden boxes
			$wall.children(colorClass+'.invis')
			  .toggleClass('invis').fadeIn(speed);
		  }
		  $wall.masonry();
		
		  return false;
		});
		/* End Filtering the Boxes */
		
		
		/* Loader */
	

		$wall.masonry({ 
		  columnWidth: 20, 
		  itemSelector: '.box:not(.invis)',
		  animate: true,
			animationOptions: {
			  duration: 650,
			  easing: 'linear',
			  queue: true
			}
		});
		$wall.infinitescroll({
		  navSelector  : '',  // selector for the paged navigation 
		  nextSelector : '',  // selector for the NEXT link (to page 2)
		  itemSelector : '.box',     // selector for all items you'll retrieve
		  loadingImg : 'images/loader.gif',
		  donetext  : '',
		  debug: false,
		  errorCallback: function() { 
			// fade out the error message after 2 seconds
			$('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   
		  }
		  },
		  // call masonry as a callback
		  function( newElements ) {
		  setTimeout(function() {
			$wall.masonry({ appendedContent: $(newElements) });
		  }, 1000);
		}
		);
		
	});

</script>

'jquery.infinitescroll.min.js' ist das Plugin für die Sortier-Funktion der Links,
'masonry' macht die Animation.

Ich habe im Netz diese Demo gefunden: http://development.shiftedwork.de/pagescroll/#stuff

Hier steht die Funktion für das Austauschen der Klassen nur in den ausgelagerten JS, kann das also nicht so recht auf meinen Fall übertragen.

Oder weiss sonst noch jemand Rat?

Danke & Viele Grüße
Celiadee

SpiceLab · 22. April 2012

Schau dir hierzu unter CSS - jQuery API mal etwas näher .css() und .toggleClass() an

celiadee · 22. April 2012

Danke für den Tipp, spicelab, werde ich machen.
Meinst Du denn, es ist ausreichend, die Funktionserweiterung im Head zu ergänzen, oder muss da auch noch etwas in die ausgelagern JS?

SpiceLab · 22. April 2012

.click(function () {...}) in /* filtering the Boxes */ ist der Arbeitsort

celiadee · 22. April 2012

danke spicelab, schaue ich mir mal an!

Also:
versuche mich im Kleinen erstmal an der 'toggle' Funktion.

Dabei klappt dieses hier:

HTML:

<style type="text/css">


.black {color: black;}
.blue {color: blue;}


		</style>

		
<script src="http://code.jquery.com/jquery-latest.js"></script>		
        

		
	</head>
	<body>
 
    
    
<ul>
<li><a href="#" id="a1" class="black">eins</a></li>
<li><a href="#" id="a2"  class="black">zwei</a></li>
<li><a href="#" id="a3"  class="black">drei</a></li>
<li><a href="#" id="a4" class="black">vier</a></li>
</ul>

<script>

$("a").click(function(){
$(this).toggleClass("blue black");
});	

</script>    
    
    
</body>

beim Klicken wird die Linkfarbe von Black auf Blue geändert, allerdings bleibt sie dann auch so und ändert sich beim zweiten Mal Klicken wieder von Blue auf Black. Nicht 100% das was ich möchte.

Probiere daher mit der Funktion adOrRemove was leider nicht funktioniert.

HTML:

<style type="text/css">

.black {color: black;}
.blue {color: blue;}


		</style>

		
<script src="http://code.jquery.com/jquery-latest.js"></script>		
        

		
	</head>
	<body>
 
    
    
<ul>
<li><a href="#" id="a1" class="black">eins</a></li>
<li><a href="#" id="a2"  class="black">zwei</a></li>
<li><a href="#" id="a3"  class="black">drei</a></li>
<li><a href="#" id="a4" class="black">vier</a></li>
</ul>

<script>
$("a").click(function(){
if (addOrRemove) {
    $(this).addClass("blue");
  }
  else {
    $(this).removeClass("black");
  }

});	</script>    
    
    
    
</body>

Sind da irgendwelche Denk/Code Fehler?

Maniac · 23. April 2012

Wo ist deine Variable "addOrRemove" definiert? somit ist es immer false.

aktive Anker-Links markieren mit Javascript (Wordpress)

celiadee

Mitglied

SpiceLab

ZENmechanic

celiadee

Mitglied

SpiceLab

ZENmechanic

celiadee

Mitglied

SpiceLab

ZENmechanic

celiadee

Mitglied

SpiceLab

ZENmechanic

celiadee

Mitglied

Maniac

Erfahrenes Mitglied

Neue Beiträge