CSS-Klasse einer anderen DIV per Mouseover verändern

[iGoras]

Hallo,

ich habe schon viele Themen, Seiten und Foren durchsucht und habe leider keine passende Lösung zu meinem Problem gefunden. Daher wende ich mich an euch mit folgendem Problem:

Ich habe auf einer Website (Wordpress) ein TAB-Layout. Sprich, links sind Register, welche auf ein Klick der jeweiligen Registerkarte (link) einen entsprechenden Inhalt rechts anzeigt. Man kann sich das ganze ganz gut in einer Demo ansehen unter folgendem Link:

http://www.kriesi.at/themes/enfold/features/

Ich habe festgestellt, dass wenn man links auf eine "Kategorie" klickt, wird dem entsprechenden DIV eine weiter CSS-Klasse zugewiesen, nämlich active_tab. Das ganze passiert durch einen klick auf den entsrechenden Link. Ich möchte das ganze jetzt gerne per Mouseover verwenden.

Was ich gefunden habe, sind verschiedene Möglichkeiten, wie man per Java wohl die eigene Klasse anpassen, oder ändern kann. Nicht aber andere DIVs.

Leider kann ich nahezu gar kein Java, weshalb ich keine Ahnung habe, wie ich das ganze anpassen muss.

Noch interessant:
Die Tab-Inhalte, welche eben gerade nicht aktiv sind, bekommen das CSS: left:-200% zugewiesen - also ausblenden. Ggf. setzt man vielleicht hier an?

Könnt ihr mir weiterhelfen?

Vielen Dank und liebe Grüsse,
Sven

 

[Jan-Frederik Stieler]

Hi,
erstens ist Java nicht Javascript. Das ist ein ganz anderes Boot welches genau in die andere Richtung fährt .
Die Klasse bekommt der Tab nur damit sich die Schrift ändert.
Aber kannst du mir bitte sagen in welcher Javascriptdatei sich das SCript für die Tabs befindet?
Ich werd verrückt die ganzen JS-Dateien durchzugehen.

Grundsätzlich müsstest du nur den Click-Event auf den Hover-Event im Script setzen.

Grüße

PS: Ich verschieb den Beitrag mal ins JS-Forum.

 

[Quaese]

Hi,

das Ganze spielt sich wohl im Script shortcodes.js ab. Sicherlich wäre eine Änderung vom click- auf das hover-Event möglich.

Es stellt sich aber die Frage, ob das überhaupt so gewünscht ist. Denn damit würde bei jedem hover-Event nicht nur das Aussehen des Tabs sondern auch der zugehörige Inhalt geändert werden. Vielleicht wäre es an dieser Stelle einfacher, das Problem mit CSS zu lösen und dem zugehörigen tab-Element mit Hilfe der Pseudoclasse :hover die Eigenschaften der Klasse active_tab zuzuweisen.

Ein Ansatz das mit JavaScript zu lösen, wäre alle tab-Elemente zu selektieren und mit einem hover-Handling zu versehen. Das nachfolgende Beispiel funktioniert zwar, setzt jedoch auch tatsächlich aktive Tabs beim Verlassen zurück. Hier müsste das Script noch entsprechend angepasst werden.

jQuery('.tab').filter(function(){
	return this.className.search(/tab_counter_/) !== -1;
}).hover(function(){
	jQuery(this).addClass('active_tab');
}, function(){
	jQuery(this).removeClass('active_tab');
});

Würde ich selbst vor der Wahl stehen, würde ich es sicher mit der ersten Möglichkeit lösen.

Ciao
Quaese

 

[iGoras]

Erst mal Prima und vielen Dank für eure Hilfestellung.

Ich werde obigen Code gleich mal ausprobieren und entsprechenden Feedback geben. Die Frage nach dem "Wunsch" stellt sich mir in diesem Fall leider nicht, da ich im Auftrag handel.

Also den obigen Codeschnippsel setze ich demnach in die shortcodes.js ein ?! Ich vermute mal, dass ich einen entsprechenden Code austauschen, bzw. löschen muss, oder?

Sorry, wahrscheinlich Newbie-Fragen aber Java ist für mich leider völlig unbekannt... :/

Lg

EDIT: Hab gerade mal in die entsprechende Java-Datei reingesehen ... ab Zeile 369 beginnt eine Funktion für die Tabs, so wie ich das sehe (Kommentarbereich) ... ich poste mal diesen Abschnitt:

// -------------------------------------------------------------------------------------------
// Tab Shortcode
// -------------------------------------------------------------------------------------------

$.fn.avia_sc_tabs= function(options)
{
	var defaults =
	{
		heading: '.tab',
		content:'.tab_content',
		active:'active_tab',
		sidebar: false
	};

	var win = $(window)
		options = $.extend(defaults, options);

	return this.each(function()
	{
		var container 	= $(this),
			tab_titles 	= $('<div class="tab_titles"></div>').prependTo(container),
			tabs 		= $(options.heading, container),
			content 	= $(options.content, container),
			newtabs 	= false,
			oldtabs 	= false;

		newtabs = tabs.clone();
		oldtabs = tabs.addClass('fullsize-tab');
		tabs = newtabs;

		tabs.prependTo(tab_titles).each(function(i)
		{
			var tab = $(this), the_oldtab = false;

			if(newtabs) the_oldtab = oldtabs.filter(':eq('+i+')');

			tab.addClass('tab_counter_'+i).bind('click', function()
			{
				open_content(tab, i, the_oldtab);
				return false;
			});

			if(newtabs)
			{
				the_oldtab.bind('click', function()
				{
					open_content(the_oldtab, i, tab);
					return false;
				});
			}
		});

		set_size();
		trigger_default_open();
		$(window).on("debouncedresize", set_size);

		function set_size()
		{
			if(!options.sidebar) return;
			content.css({'min-height': tab_titles.outerHeight() + 1});
		}

		function open_content(tab, i, alternate_tab)
		{
			if(!tab.is('.'+options.active))
			{
				$('.'+options.active, container).removeClass(options.active);
				$('.'+options.active+'_content', container).removeClass(options.active+'_content');

				tab.addClass(options.active);

				var new_loc = tab.data('fake-id');
				if(typeof new_loc == 'string') location.replace(new_loc);

				if(alternate_tab) alternate_tab.addClass(options.active);
				var active_c = content.filter(':eq('+i+')').addClass(options.active+'_content');

				if(typeof click_container != 'undefined' && click_container.length)
				{
					sidebar_shadow.height(active_c.outerHeight());
				}
			}
		}

		function trigger_default_open()
		{
			if(!window.location.hash) return;
			var open = tabs.filter('[data-fake-id="'+window.location.hash+'"]');

			if(open.length)
			{
				if(!open.is('.active_tab')) open.trigger('click');
				window.scrollTo(0, container.offset().top - 70);
			}
		}

	});
};

 

[Quaese]

Hi,

wenn es so gewünscht ist, kannst du an der bereits von mir genannten Stelle (shortcodes.js), die du ja auch schon gefunden hast, folgende zwei Stellen ersetzen:

tab.addClass('tab_counter_'+i).bind('click', function()

durch

tab.addClass('tab_counter_'+i).on('mouseenter', function()

Und

the_oldtab.bind('click', function()

durch

the_oldtab.on('mouseenter', function()

Vielleicht erzielt das das gewünschte Ergebnis.

Ciao
Quaese

 

[iGoras]

Ich danke euch vielmals. Das hat geklappt. Prima!

Jetzt noch ein letztes anliegen:

Kann man das auch irgendwie kombinieren? Sprich, kann man den Hover-Effekt noch irgendwie "abschalten"? Was ich meine ist eine art "Pin"-Funktion. Wenn angepinnt verschwindet der Hover-Effekt und wenn nicht mehr angepinnt, ist er eben wieder da.

Kann man sowas realisieren?

LG

PS: Hab das Thema schon mal als "Erledigt" eingestellt, da mein Hauptanliegen ja erst mal geklärt ist.

 

[Jan-Frederik Stieler]

Hi,
ich versteh deine Pin-Funktion nicht ganz.
Meinst du das man eines anklickt, dieser Tab bleibt stehen und über alle anderen kann man dann aber trotzdem hovern?

Gruß

PS: Nochmal Java ist eine objektorientierte Programmiersprache. Javascript eine dynamisch typisierte, objektorientierte, aber klassenlose Skriptsprache.
Das sind zwei Paar Schuhe.

 

[Quaese]

Hi,

ein solches Handling kann realisiert werden - allerdings wird die Lösung nicht so trivial sein.

Es müssen die hover-Events beim Pinnen von den jeweiligen Elementen genommen werden (off) und entsprechend in der anderen Richtung wieder gesetzt werden (on).

Die Stelle an der das umgesetzt werden könnte, wurde ja schon mehrfach genannt.

Die Umsetzung sollte von dir vorgenommen werden. Treten Schwierigkeiten auf, helfen wir dir gerne. Willst du es komplett gelöst bekommen, wirst du dich an das entsprechende Forum wenden müssen und einen Auftrag erteilen.

Ciao
Quaese

 

[iGoras]

Sorry, war krank und konnte daher nicht reagieren.

Also das mit der PIN-Funktion war so gemeint: Angenommen ich lese TAB 1, finde ich im Content-Bereich eine art Reißzwecke, also einen Link, der den Hover-Effekt der linken TAB-Seite eben deaktiviert, sprich komplett bis der PIN eben wieder angeklickt und somit deaktiviert wird. Beim verlassen der Seite soll dies natürlich automatisch geschehen (PIN=AUS).

Okay, ich werde mal schauen, ob ich das selber gelöst bekomme. Bedanke mich recht Herzlich für die Unterstützung bis hier her. Ich denke ich melde mich wieder, falls ich auf Probleme stoße ...

LG