Demo wie man ein Plugin erstellt was die Navigation ab einen Bestimmten Punkt am oberen Bildschirmrand Fixiert

Antworten
#1
23.11.2014 10:22
avatar  TripleM
#1 Demo wie man ein Plugin erstellt was die Navigation ab einen Bestimmten Punkt am oberen Bildschirmrand Fixiert
avatar
TripleM
Mitglied

Nicht alle Plugins lohnen sich um es in den Store zu bringen. Ich habe seit ein Paar Tagen eine Möglichkeit gesucht die Navigation beim Runter Scrollen am Oberen Bildschirmrand zu Fixieren. Dieses ist nun Umgesetzt und um euch dennoch die Möglichkeit zu geben die Funktion zu nutzen hier mal ein Tutorial wie man das anstellt.

So in etwa sollte das aussehen

http://jsfiddle.net/yeco/4EcFf/

Um das nun an das Xobor Design Business anzupassen habe ich mal einen Code erstellt. Dieser wurde noch ein wenig von WolverineX verfeinert.

Dies ist nun der Code der Genutzt wird

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
{{plugin_fixedscrollnav_config_rechte==true.start}}
<style>
	#obere_leiste {
		width: 100%;
		
	}
</style>
 
<script>
  $(function() {
    var sticky_navigation_offset_top = $('#navigation').offset().top;
    var sticky_navigation = function(){
    var scroll_top = $(window).scrollTop(); 
        if (scroll_top > sticky_navigation_offset_top) { 
            $('#navigation').css({
				'position': 'fixed',
				'top': 0,
				'width': (($('#obere_leiste').width() / $(document).width()) * 100) + '%'
			});
        } else {
          $('#navigation').css({
			  'position': 'relative',
			  'width': '100%'
		  }); 
        }
    };
     sticky_navigation();
   	$(window).scroll(function() {
         sticky_navigation();
    });
 
});
</script>
 

{{plugin_fixedscrollnav_config_rechte==true.end}}
 



Wie kann nun jeder sein eigenes Plugin daraus erstellen. Dazu habe ich hier mal ein Video gemacht das es verdeutlicht.

Leider ist das Ohne Ton ich hoffe es ist dennoch alles sichtbar?

Zu sehen ist das Plugin hier in Action

http://www.offroadfreunde-nord.de/

Scrollt man auf der Seite nun nach unten ist nach Erreichen der Navigation diese am Bildschirmrand oben Fixiert und kann somit überall auf der Forumsseite genutzt werden. Ich erinnere mich das einige eine 2. Navigation unten eingebaut haben. Das wäre nun hiermit hinfällig da sie immer im Blickfeld ist.

Hier nun mal ein Demo Video wie das ganze erstellt wird.



Bei Fragen bitte dazu in diesen Thema stellen. Ich versuche das dann zu beantworten.


 Antworten

 Beitrag melden
#2
02.12.2014 12:50
avatar  Gabriella
#2 RE: Demo wie man ein Plugin erstellt was die Navigation ab einen Bestimmten Punkt am oberen Bildschirmrand Fixiert
avatar
Gabriella
Mitglied

Hallo Mario,

das Plugin würde mich reizen, da es sehr gut ist
Ich habe mir das Video angeschaut, leider ist es so klein, dass ich kaum sehen kann was zu tun ist, vorallem der Teil, wo Du dann die Variablen machst. Wie man ein normales Plugin erstellt, weiss ich ja, aber da Du danach noch zwei Sachen machst im Video, welche ich nicht sehen kann, traue ich mich nicht, das einfach als normales Plugin zu machen.

Mit freundlichen Grüssen
Gabriella

http://www.musengarten.com/
http://www.garten-der-poesie.de/

Layout: Business

 Antworten

 Beitrag melden
#3
02.12.2014 13:23
avatar  Alice ( gelöscht )
#3 RE: Demo wie man ein Plugin erstellt was die Navigation ab einen Bestimmten Punkt am oberen Bildschirmrand Fixiert
Al
Alice ( gelöscht )

Mit klick auf das Zeichen im grünen Kasten kannst du das Video (und jedes andere Video bei YT) so groß machen, dass es deinen ganzen Bildschirm ausfüllt. Dann siehst du auch alles.


 Antworten

 Beitrag melden
#4
02.12.2014 13:23 (zuletzt bearbeitet: 02.12.2014 13:32)
avatar  Ludger
#4 RE: Demo wie man ein Plugin erstellt was die Navigation ab einen Bestimmten Punkt am oberen Bildschirmrand Fixiert
avatar
Ludger
Mitglied


absolute Spitze, soeben eingebaut

viele Grüße
Lud

 Antworten

 Beitrag melden
#5
02.12.2014 13:34
avatar  Gabriella
#5 RE: Demo wie man ein Plugin erstellt was die Navigation ab einen Bestimmten Punkt am oberen Bildschirmrand Fixiert
avatar
Gabriella
Mitglied

Vielen Dank Alice,

hat die alte Frau wieder etwas gelernt

Danke Mario,

sehr gut, damit lässt sich echt arbeiten, durch das Video lernt man viel, was Plugins erstellen angeht

Mit freundlichen Grüssen
Gabriella

http://www.musengarten.com/
http://www.garten-der-poesie.de/

Layout: Business

 Antworten

 Beitrag melden
#6
02.12.2014 13:50
avatar  TripleM
#6 RE: Demo wie man ein Plugin erstellt was die Navigation ab einen Bestimmten Punkt am oberen Bildschirmrand Fixiert
avatar
TripleM
Mitglied

Ich werde in Zukunft bei Kleinen Dingen die kein Plugin rechtfertigen mal ein Video mit Ton machen. Dann kann man sich so einfache sachen nachbauen.


 Antworten

 Beitrag melden
#7
02.12.2014 14:26 (zuletzt bearbeitet: 02.12.2014 14:27)
avatar  Gabriella
#7 RE: Demo wie man ein Plugin erstellt was die Navigation ab einen Bestimmten Punkt am oberen Bildschirmrand Fixiert
avatar
Gabriella
Mitglied

*grinst* einfache Sachen ist gut, also das ist mitsamt Video nicht so einfach Kollege. Du musst mir mal erklären (PN) wie man so ein Video macht.
Statt Screens in der Forenhilfe zu machen, würde ich dann auch so Videos basteln.

Mit freundlichen Grüssen
Gabriella

http://www.musengarten.com/
http://www.garten-der-poesie.de/

Layout: Business

 Antworten

 Beitrag melden
#8
07.12.2014 11:27 (zuletzt bearbeitet: 07.12.2014 11:30)
avatar  TripleM
#8 RE: Demo wie man ein Plugin erstellt was die Navigation ab einen Bestimmten Punkt am oberen Bildschirmrand Fixiert
avatar
TripleM
Mitglied

Wäre nun Unfair es per PN zu machen, da es auch andere Interessieren könnte. Ich habe nun diverse Programme getestet und bin bei einen Hängen geblieben. Poste hier mal den Link, sollte ja in Ordnung sein da keine Konkurenz Software zu Xobor. Falls nicht bitte Löschen.



Dort wird eben auch immer die Maus Gelb dargestellt um genau zu sehen wo was gemacht werden muß.
Generell bekommt jeder Infos Tips und Tricks im FoXum wo es um die Erstellung von Plugins geht. Wer also Interesse hat etwas zu Lernen ist dort genau Richtig.


 Antworten

 Beitrag melden
#9
08.12.2014 09:14
avatar  Christian
#9 RE: Demo wie man ein Plugin erstellt was die Navigation ab einen Bestimmten Punkt am oberen Bildschirmrand Fixiert
avatar
Christian
Techniker

http://www.ffsplit.com/

nur mal so als Tipp


 Antworten

 Beitrag melden
#10
30.01.2015 06:46 (zuletzt bearbeitet: 30.01.2015 06:53)
avatar  TripleM
#10 RE: Demo wie man ein Plugin erstellt was die Navigation ab einen Bestimmten Punkt am oberen Bildschirmrand Fixiert
avatar
TripleM
Mitglied

Hier nun mal die Funktion für das Gaia Design. Auch da ist dann die Navigation beim Scrollen oben Fixiert:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<style>
	#nav_n.nav_n {
		width: 92%;
		/* margin: 0 auto; */ /* bereits in .wrap enthalten */
	}
</style>
 
<script>
  $(function() {
 	var sticky_navigation_offset_top = $('#nav_n.nav_n').offset().top;
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); 
        if (scroll_top > sticky_navigation_offset_top) { 
            $('#nav_n.nav_n').css({
				'position': 'fixed',
				'top': 0,
				'width': (($('#nav_n.nav_n').width() / $(document).width()) * 100) + '%'
			});
        } else {
          $('#nav_n.nav_n').css({
			  'position': 'relative',
			  'width': '100%'
		  }); 
        }
    };
     sticky_navigation();
   	$(window).scroll(function() {
         sticky_navigation();
    });
 
});
</script>
 




Wenn ich bei der Style Anweisung oben zusätzlich

1
2
3
4
5
6
7
 
<style>
	#nav_n.nav_n {
		width: 92%;
               z-index:9000;
		/* margin: 0 auto; */ /* bereits in .wrap enthalten */
	}
</style>
 



Den Z-Index mit aufnehme passt es auch im Pro Silver Design.
Für das Standard Design habe ich es noch nicht hin bekommen. werde die Tage noch mal schauen.


 Antworten

 Beitrag melden
#11
31.01.2015 09:53 (zuletzt bearbeitet: 31.01.2015 09:55)
avatar  TripleM
#11 RE: Demo Fixed Navi als Plugin für alle Templates Anleitung
avatar
TripleM
Mitglied

Und auch beim Standard Design ist dies möglich Hier der Code dafür:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<style>
				#obere_leiste 			{width: 92%;}
				</style>
 
				<script>
  				$(function() {
    			var sticky_navigation_offset_top = $('#nav_n.nav_n').offset().top;
    			var sticky_navigation = function(){
    			var scroll_top = $(window).scrollTop();
    			if (scroll_top > sticky_navigation_offset_top) {
      			$('#nav_n.nav_n').css({
				'position': 'fixed',
				'top': 0,
				'width': (($('#nav_n.nav_n').width() / $(document).width()) * 100) + '%'
				});
                } else {
          		$('#nav_n.nav_n').css({
			  	'position': 'relative',
			  	'width': '100%'
		  		}); 
        		}
    			};
     			sticky_navigation();
   				$(window).scroll(function() {
         		sticky_navigation();
    			});
 				});
				</script>
 
 


 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!