Highlighted

Slide Show next picture button takes me to top of page

Community Beginner ,
Jul 23, 2018

Copy link to clipboard

Copied

I created a Slideshow using javascript and html coding. All works fine. Only when I use the button to go to the next picture the page jumps to the top. How can I fix this? Thanks for help.

It's jumping to the top of the page because the href attribute of the anchor tag is "#".  Replace that with "javascript:void(0);" and that should stop.

V/r,

^ _ ^

Views

256

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Slide Show next picture button takes me to top of page

Community Beginner ,
Jul 23, 2018

Copy link to clipboard

Copied

I created a Slideshow using javascript and html coding. All works fine. Only when I use the button to go to the next picture the page jumps to the top. How can I fix this? Thanks for help.

It's jumping to the top of the page because the href attribute of the anchor tag is "#".  Replace that with "javascript:void(0);" and that should stop.

V/r,

^ _ ^

Views

257

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 23, 2018 0
LEGEND ,
Jul 23, 2018

Copy link to clipboard

Copied

It could be anything.  We need to see the source code.  Do you have a link that we can use to view it?

V/r,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 23, 2018 1
LEGEND ,
Jul 23, 2018

Copy link to clipboard

Copied

arisa53851427  wrote

I created a Slideshow using javascript and html coding. All works fine. Only when I use the button to go to the next picture the page jumps to the top. How can I fix this? Thanks for help.

Try adding onclick return false; to the next link or add it to the javascript code.

<a href='#' onclick='next(), return false;'>

Show us the code - someone will most likely be able to provide you with a solution.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 23, 2018 0
Community Beginner ,
Jul 23, 2018

Copy link to clipboard

Copied

This is the html-code with the javascript included: I think the problem is by clicking on the link it jumps to the top of the item selected by the id.

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Sira Accola: Home</title>

<link href="../css/home.css" rel="stylesheet" type="text/css">

<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->

<script>var __adobewebfontsappname__="dreamweaver"</script>

<script src="http://use.edgefonts.net/actor:n4:default;source-sans-pro:n4,i4,n2,n3,n7,n9,i2:default.js" type="text/javascript">

</script>

</head>

<body>

  <div id="wrapper">

  <header class="header" >

   <figure class="Background">

     <figure>

  <img src="../images/DAMARIS_SCHRIFTZUG.png" alt="" class="Damaris">

  </figure>

     <figure> <img src="../images/SIRA_ACCOLA.png" alt="" class="Sira">

  </figure>

      </figure>

   <nav>

     <h2 id="menulink"><a href="#navlinks">Menu</a></h2>

     <ul class="displayed" id="navlinks">

       <li><a href="home.html" class="thispage">Home</a></li>

       <li><a href="about_me.html">About me</a></li>

       <li><a href="#">Team</a></li>

       <li><a href="#">Horses</a></li>

       <li><a href="#">Gallery</a></li>

        </ul>

      </nav>

</header>

<main id="main">

  <div class="intro">

  <p>Herzlich willkommen auf meiner Web Site. Ich freue mich über Deinen Besuch.

  Mit unserer Home Page wollen wir über meinen reiterlichen Werdegang, über unserer Pferde und unser Team informieren sowie Eindrücke unserer Passion vermitteln.

  Die Resultate unserer Arbeit mit den Pferden sind via Link auf der Homepage des Schweizerischen Verbands für Pferde Sport (fnch.ch) einzusehen.

  Weil wir unsere Basis im Tessin in der Scuderia von Linda Gianella Crotta haben, reiten wir meistens im Tessin und besuchen die Concorsi in Norditalien. Diese sind für uns pferdeschonend innert 1-2  Stunden erreichbar und bieten ein wunderbares und interessantes Umfeld mit Italienischem Flair.

    </p>

  </div>

  <div class="slider-container">

  <div class="slide">

  <div class="img-container">

  <img src="../images/PHOTO-2018-07-08-07-22-38.jpg" alt="" width="1198" height="800">

  </div>

  </div>

  <div class="slide">

  <div class="img-container">

  <img src="../images/PHOTO-2018-07-08-07-22-39.jpg" alt="" width="1198" height="800">

  </div>

  </div>

  <div class="slide">

  <div class="img-container">

  <img src="../images/IMG_5880.jpg" alt="" width="1069" height="800">

  </div>

  </div>

  <a href="#" id="left"  onClick="previousSlide(-1)" class="btn">&lt;</a>

  <a href="#" id="right" onClick="nextSlide(+1)" class="btn">&gt;</a>

  </div>

  <div class="news">

  <h3 class="h3"> Neuigkeiten</h3>

  <h4> Reittunier in Busto Arsizio

  </h4>

  <p> Tina de l'Yserande</p>

  <p> Grace XII

  </p>

  <p> Simeon de l'Herbage

  </p>

  <h4> Reittunier in Gorla Minore

  </h4>

  <p> Tina de l'Yserande</p>

  <p> Grace XII

  </p>

  <p> Simeon de l'Herbage

  </p>

  </div>

  <div class="news">

  <h3> Kalender

  </h3>

  <p> Reitunier in Ascona</p>

  </div>

</main>

  <footer id="footer">

   <p>Copyright © 2018 DAMARIS & CO. All rights reserved</p>

  </footer>

</div>

<script type="text/javascript" src="../js/menu.js"></script>

<script type="text/javascript">

  var index = 1;

  imageSlide();

  manualSlide(index);

  function previousSlide(n){

  index = index + n;

  manualSlide(index);

  }

  function nextSlide(n){

  index = index + n;

  manualSlide(index);

  }

  function imageSlide (){

  var slide = document.getElementsByClassName("slide");

  if(index > slide.length){

  index = 1;

  }

  for (var i = 0; i < slide.length; i++) {

  slide.style.display = "none";

  };

  slide[index-1].style.display = "block";

  index = index + 1;

  setTimeout(imageSlide,5000);

  }

  function manualSlide(n){

  var slide = document.getElementsByClassName("slide");

  if(n > slide.length){

  index = 1;

  }

  if(n < 1){

  index =slide.length;

  };

  for (var i = 0; i < slide.length; i++) {

  slide.style.display = "none";

  };

  slide[index-1].style.display = "block";

  }

  </script>

</body>

</html>

CSS-Code:

@charset "UTF-8";

/* CSS Document */

/* Simplify width and height calculations */

html {

  box-sizing: border-box;

}

*, *:before,

*:after {

    box-sizing: inherit;

}

*

{

padding:0px;

margin:0px;

}

/* ganze Seite */

body {

  font-family: source-sans-pro;

  font-style: normal;

  font-weight: 400;

  font-size: medium;

}

#wrapper {

  margin-right: auto;

  margin-left: auto;

  margin-top: auto;

  margin-bottom: auto;

  background-color:#FBFBFB;

}

/* Kopf */

.Damaris {

  max-width: 100%;

  max-height: 100%;

  width: 345px;

  display: block;

  margin-left: auto;

  margin-right: auto;

  margin-top: 0px;

  margin-bottom: 0px;

  position: relative;

  top: 30px;

}

.Background {

  max-width: 100%;

  width: auto;

  height: 250px;

  margin-left: auto;

  margin-right: auto;

  background-image: -moz-linear-gradient( 85deg, rgb(153,201,250) 60%, rgb(3,9,252) 100%);

  background-image: -webkit-linear-gradient( 85deg, rgb(153,201,250) 60%, rgb(3,9,252) 100%);

  background-image: -ms-linear-gradient( 85deg, rgb(153,201,250) 60%, rgb(3,9,252) 100%);

  position: relative;

  top: 0px;

  left: 0px;

  right: 0px;

  min-width: 100%;

  min-height: 100%;

  display: inherit;

  margin-top: 0px;

  margin-bottom: 0px;

}

.Sira {

  max-width: 100%;

  max-height: 100%;

  display: block;

  margin-left: auto;

  margin-right: auto;

  margin-top: 20px;

  margin-bottom: 20px;

  position: relative;

  top: 30px;

}

.header {

  position: relative;

}

/* Navigationsmenu */

#nav {

  background-color: #29009E;

  color: #29009E;

  text-transform: none;

  font-variant: normal;

  font-style: normal;

  font-weight: 200;

  text-align: center;

  text-decoration: none;

}

.navmenu {

  margin: 0;

  text-align: center;

  background-color: #29009E;

}

.navmenu a {

  color: #29009E;

  font-weight: 200;

  text-decoration: none;

  text-transform: uppercase;

  display: block;

  padding-top: 0.1em;

  padding-bottom: 0.1em;

}

a {

  font-weight: bold;

  text-decoration: none;

}

a:link {

  color: #000000;

}

a:visited {

  color: #000000;

}

a:hover, a:active, a:focus {

  color: #000000;

  text-decoration: none;

}

#menulink {

  background-color: #29009E;

  margin: 0;

  text-align: center;

}

#menulink a {

  color: #000000;

  text-transform: uppercase;

  font-weight: 400;

  text-decoration: none;

  padding-top: 0.1em;

  padding-bottom: 0.1em;

  font-family: source-sans-pro;

  font-style: normal;

  font-size: 5em;

}

#navlinks {

  width: 100%;

  list-style-type: none;

  padding: 0;

  margin: 0;

  text-align: center;

  background-color: #29009E;

  background-color: rgba(20,3,186,0.87);

  position: absolute;

  -webkit-transition: all ease-out 0.5s;

  transition: all ease-out 0.5s;

  font-family: source-sans-pro;

  font-style: normal;

  font-weight: 200;

}

#navlinks.displayed {

  top: auto;

  z-index: 1;

  opacity: 1;

}

#navlinks.start {

  display: none;

}

#navlinks.collapsed {

  top: auto;

  opacity: 0;

}

#navlinks a {

  display: block;

  padding-top: 10px;

  padding-bottom: 10px;

  color: #000000;

  font-weight: 400;

  text-decoration: none;

  text-transform: uppercase;

  font-size: large;

}

#navlinks a:hover, #navlinks a:active, #navlinks a:focus, #navlinks a.thispage {

  color: #000000;

}

/* Hauptteil */

.intro {

  background-color: #01AF5F;

  color: #000000;

  font-family: source-sans-pro;

  font-style: normal;

  font-weight: 300;

  font-size: x-large;

  text-align: justify;

  text-decoration: none;

  text-transform: none;

  padding-top: 20px;

  padding-bottom: 20px;

  padding-left: 40px;

  padding-right: 40px;

}

/*SlideShow*/

  .slider-container{

  width:100%;

  height: 810px;

  background:#6B6A6A;

  }

  .slide{

  position:absolute;

  width:100%;

  height: 800px;

  overflow: hidden;

  }

  .slide>.img-container{

  position: relative;

  width: 100%;

  height: 800px;

  text-align: center;

  padding: 10px 0px;

  }

  .btn{

  position: absolute;

  font-size: 50px;

  font-weight: bold;

  font-family: arial, sans serfif;

  color: #000000;

  text-decoration: none;

  text-shadow: 0 2px 2px #333;

  top: 800px;

  cursor: pointer;

  margin: 1%;

  }

  #right{

  right:0

  }

.news {

  background-color: #046BCC;

  color: #000000;

  font-family: source-sans-pro;

  font-style: normal;

  font-weight: 300;

  font-size: large;

  text-align: justify;

  text-decoration: none;

  text-transform: none;

  padding-top: 20px;

  padding-bottom: 20px;

  padding-left: 40px;

  padding-right: 40px;

}

/* Fuss */

footer {

  color: #000000;

  background-image: -moz-linear-gradient( 90deg, rgb(253,3,3) 0%, rgb(251,191,74) 44%);

  background-image: -webkit-linear-gradient( 90deg, rgb(253,3,3) 0%, rgb(251,191,74) 44%);

  background-image: -ms-linear-gradient( 90deg, rgb(253,3,3) 0%, rgb(251,191,74) 44%);

  padding-bottom: 50px;

  padding-top: 50px;

  }

/* Darstellung */

@media (min-width:700px){

  #menulink {

  display: none;

  }

#navlinks {

  position: static;

  background-color: #2804B6;

  }

#navlinks.collapsed {

  opacity: 2;

  }

#navlinks a {

  width: 20%;

  padding-top: 10px;

  padding-bottom: 10px;

  margin-bottom: 20px;

  float: left;

  color: #000000;

  background-color: #2804B6;

  }

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 23, 2018 0
LEGEND ,
Jul 23, 2018

Copy link to clipboard

Copied

Does adding return false; (see below) solve the issue?

<a href="#" id="right" onClick="nextSlide(+1), return false;" class="btn">&gt;</a>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 23, 2018 0
LEGEND ,
Jul 23, 2018

Copy link to clipboard

Copied

It's jumping to the top of the page because the href attribute of the anchor tag is "#".  Replace that with "javascript:void(0);" and that should stop.

V/r,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 23, 2018 0
Community Beginner ,
Jul 23, 2018

Copy link to clipboard

Copied

Thanks a lot for your help!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 23, 2018 0
LEGEND ,
Jul 23, 2018

Copy link to clipboard

Copied

Glad to help.  Thank you for marking my answer as correct.  I do appreciate it.

V/r,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 23, 2018 0