• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem div über Menu zu anchor scrollen

C

carsten_web

Neues Mitglied
Hallo
Bitte schaut Euch
www.testwebks1.esy.es/html5/company_en.html
an.

In der rechten Spalte sind anchors gesetzt. Habe ich schon mit name und id probiert.
Bei Mausklick auf das Menu links soll die rechte Spalte (div) zum anchor scrollen.
Leider funktioniert das nicht.
Offline scrollt die komplette Seite, weil das Kopfmenu aus unerfindlichen Gründen geladen wird.
Online geht garnichts.
Auch kann ich unten mit dem Button "Menu nicht wieder hochspringen.

Gibt es eine Möglichkeit die rechte Spalte so scrollbar zu machen, dass man keine Scrollbar sieht und die Spalte modern und soft zum anchor scrollt.

Ich lade die company_en.html als ZIP mit hoch.
Bitte wegen dem Template copyright nicht irgendwo veröffentlichen.

Danke
Carsten
 

Anhänge

Ich verstehe nicht, was du meinst. Das horizontale Scrolling funktioniert doch. Was nicht funktioniert, ist das vertikale Scrolling, bsw. wenn man auf der Seite Company auf Certificates klickt. Geht es darum?
 
Ja es geht um das verticale scrollen.
Im Grunde soll die Seite fest bleiben und nur die rechte Spalte nach Klick auf dem Menu automatisch scrollen.
 
Jemanden der sich die Seite runterlädt und kostenlos deinen Code debugt, wirst du wohl kaum finden. Aber ich zeige dir mal das Grundprinzip des vertikalen Scrollens mit jQuery:
HTML: 
<article id="foo">
  <section id="eins">
    <p><a href="#zwei">Zu Kapitel 2</a></p>
    <p>Viel Text</p>
  </section>
  <section id="zwei">
    <p><a href="#eins">Zu Kapitel 1</a></p>
    <p>Noch mehr Text</p>
  </section>
</article>

<script>
  // Beim Klick auf einen Anker innerhalb #foo
  $('#foo a[href*="#"]').click(function() {
    // lies den Link aus
    target = $(this).attr('href');
    // scroll zur entsprechenden Stelle
    $('html').animate({
      scrollTop: $(target).offset().top
      // und hänge den Anker an die URL an
    }, 1000 , function (){location.hash = target;});
  });
</script>
 
Danke
Ich habe den Code gleich ausprobiert.
Als stand-alone html geht das.
Ich weiss nur nicht, wie ich das in die company_eng.html integrieren kann.
Ich habe das Gefühl div col3 ist so aufgebaut, dass sie nicht scrollen kann.
Evtl muss ich in diese div eine weitere div setzen.
 
Für was steht die 1000 in Deinem Code.
Ist es auch möglich langsamer zu scrollen.
Ich habe auch mal als stand-alone mit diesem Code gespielt.:
<script>
$(function(){
// The speed of the scroll in milliseconds:
var speed = 1000;
// Find links that are #anchors and scroll to them
$('a[href^=#]').not('.lp-pom-form .lp-pom-button').click(function(event){
event.preventDefault();
$('html, body').animate({ scrollTop: $( $(this).attr('href') ).offset().top }, speed);
});
});
</script>

Aber wie gesagt. Ich bekomme das nicht in das template integriert.
VG
Carsten
 
Wie gesagt. Offline scrollt die gesamte Seite., dabei soll sich nur "div col3" bewegen.
Online geht garnichts.
Irgendwie ist "div col3" blockiert.
 
carsten_web schrieb:
Wie gesagt. Offline scrollt die gesamte Seite., dabei soll sich nur "div col3" bewegen.
Online geht garnichts.
Irgendwie ist "div col3" blockiert.
Zum Vergrößern anklicken....

Wenn es offline geht und online nicht, sind meist fehlende Dateien der Grund.
Schau mal in die console, ich bekomme da einen Fehler.
 
Zuletzt bearbeitet:
Möglicher Fehler wäre, dass der Click-Handler nicht funktioniert, weil er geladen wird, bevor der Browser das dazugehörige DOM Element erstellt. Verschiebe die JS Datei mal vor das schließende Bodytag, bzw. verwende ein $(document).ready() und die Funktion on() zur Delegation des Events: $(element).on('click', function(){}). Außerdem, bist du sicher, dass da ein event.stopPropagation() hingehört?
 
Ich tue was ich kann und habe versucht den Anweisungen zu folgen, aber dieses Niveau habe ich leider noch nicht.
Ist es nicht möglich spezifischere Anweisungen zu geben, wie ich "id col3" enblocken kann, bzw. so gestallten kann, dass sie bei Click auf das Menu an den anchor scrolt.
Odr soll ich noch mehr Dateien mit anhängen.
 
Dann fange klein an. Funktioniert das?
Code: 
$('a[href^=#]').not('.lp-pom-form .lp-pom-button').click(function(){
alert('Hello World');
});
 
Ich habe mit folgendem Code experimentiert:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$("#click").click(function (){
//$(this).animate(function(){
$('html, body').animate({
scrollTop: $("#").offset().top
<!-- eigentlich #div1 oder #div2 -->
}, 1000);
//});
});
});
</script>
<div id="div1" style="height: 1000px; width 100px">
Test
</div>
<br/>
<div id="div2" style="height: 1000px; width 100px">
Test 2
</div>
<!-- <button id="click('#div1')">Click me</button> geht nicht-->
<!-- <button id="click">Click me</button> geht wenn oben die div festgelegt ist -->
<!-- <a href="#div2">go to div2</a> geht natürlich aber ohne cript schnell-->
<!-- <a href="javascript:click">go to div2</a> geht nicht -->
<!-- <a href="javascript:click()">go to div2</a> geht nicht mit div im script und mit allen möglichen Kombinationen hinter click -->

</html>


Wie Du siehst geht es mit der "button"-Methode.
Hier ist die Bewegung sogar langsam.
Ich habe den Code in company_en.html integriert.
Es passiert wieder das gleiche.
Offline im Test scrollt die gesamte Seite. Das ist eigentlich nicht gewollt, aber wenigstens etwas. Wie gesagt wird hier das Kopfmenu nicht geladen.
Online wird es geladen und es bewegt sich garnichts.
Irgendwie ist company_en.html generell zum scrollen blockiert.

Ausserdem sollte aber nur die rechte Spalte scrollen.
Irgendwie muss company-en.html anders aufgebaut werden.

Welche Möglichkeiten gibt es generell, mehrer Spalten zu haben und eine zu scrollen ?
Warum scrollt nicht wenigstens die gesamte company_en.html ?
Was kann man machen damit nur die rechte Spalte scrollt ?
Wie kann man des obige script so umschreibe, das das div, wohin gescrollt werden soll, vom button aus übergeben wird.
 
Wie Du siehst geht es mit der "button"-Methode.
Zum Vergrößern anklicken....

Ist klar. Wenn du den Selektor in jQuery so übergibst, $("#click"), dann funktioniert natürlich nur das zweite Beispiel aus deinem Code. Ich hatte dir ganz am Anfang des Threads ein Script gepostet, das innerhalb eines Elterncontainers alle Anker targeted? Das hast du sicher nicht ausprobiert und abgewandelt, richtig?

Um die weiterführenden Fragen zu beantworten, müsste man das .zip herunterladen, die Dateien im Editor und Browser öffnen, das Script eventuell debuggen und entsprechend erweitern. Das ist allerdings mit Zeitaufwand verbunden, und deshalb wird es hier wahrscheinlich auch niemand kostenlos für dich erledigen. Also musst du entweder jQuery soweit lernen, um dein verwendetes Script zu verstehen oder den Weg über die Jobbörse antreten.
 
Ich hatte Dein Script nicht ausprobiert, weil ich schon früher ohne Ergebniss folgendes Script geprüft habe:

<script>
$(function(){
// The speed of the scroll in milliseconds:
var speed = 1000;
// Find links that are #anchors and scroll to them
$('a[href^=#]').not('.lp-pom-form .lp-pom-button').click(function(event){
event.preventDefault();
$('html, body').animate({ scrollTop: $( $(this).attr('href') ).offset().top }, speed);
});
});
</script>


Ich habe früher for ca. 10 Jahren mal eine Homepage hinbekommen. Es hat sich aber so viel geändert, dass ich jetzt schon etwas überfordert bin.
Ich bin arbeitslos und habe Zeit mich laienhaft für Freunde mit deren Projekt zu beschäftigen, aber mit Java kenne ich mich nicht aus.

Wúrdest Du das hinbekommen ?
Was würde so was kosten und wieviel Zeit nimmt es in Anspruch ?

Grüsse
Carsten
 
Ich kann es mir ja mal anschauen, allerdings nicht vor nächster Woche. Momentan bin ich mit einem anderen Projekt beschäftigt.
 
Wo soll ich das ZIP hinschicken ?
Was soll das kosten ?
Im Grunde benötige ich die company_en.html mit zwei Spalten: links Menu und rechts langsam scrollend
und die company_en.html in drei Spalten: links Menu, Mitte scrollend und rechts zum einfügen von Text u. Fotos
Das ganze natürlich eingebunden in das Gesamtkonzept.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben