0

I've been trying prevent a page from scrolling after clicking an anchor link.

This is what page looks like currently. When the user clicks an image in the left panel and this should make a larger version image appear in full view in the right panel (with text underneath). The page specifically needs to look like this. Thought anchors might be the best way to do it, but open to other suggestions.

left panel, right panel images with scrollbar

I've tried a href="!#" which unfortunately didn't work.

Have also attempted a number of javascript methods such as e.preventdefault(), e.stopPropagation(), and return false, return false simply stops the link from working at all.

Here is a thumbnail image button with the anchor link, it's in a div with a scrollbar (overflow: scroll) with a set of similar thumbnail images.

              <div class="col-lg-6 col-md-4 col-6">
                  <a href="#alexandru-zdrobau-200768-unsplash" class="d-block mb-4 h-100">
                        <img class="img-fluid img-thumbnail" src="Fashwell/ImagesFashwell/alexandru-zdrobau-200768-unsplash.jpg" alt="">
                  </a>
              </div>

              <div class="col-lg-6 col-md-4 col-6">
                <a href="#anthony-ginsbrook-294309-unsplash" class="d-block mb-4 h-100">
                      <img class="img-fluid img-thumbnail" src="Fashwell/ImagesFashwell/anthony-ginsbrook-294309-unsplash.jpg" alt="">
                    </a>
              </div>

              <div class="col-lg-6 col-md-4 col-6">
                <a href="#brooke-cagle-195860-unsplash" class="d-block mb-4 h-100">
                      <img class="img-fluid img-thumbnail" src="Fashwell/ImagesFashwell/brooke-cagle-195860-unsplash.jpg" alt="">
                    </a>
              </div>

And here is the image containing the anchor, also in a div with a scrollbar among other images too.

<div class="output" id="alexandru-zdrobau-200768-unsplash">
                <h1>
                  Alexandru Zdrobau
                </h1>
                <img class="img_output" src="Fashwell/ImagesFashwell/alexandru-zdrobau-200768-unsplashBOX.jpg">
              </div>
              <div class="products">
                <ul>
                  <li style="color:red">
                    <span style="color:red">
                      Category: Jackets &amp; Coats.
                      <a href="https://www.zalando.co.uk/modstroem-pamela-coat-classic-coat-mo421u00h-m11.html" style="color:red" target="_blank">
                        Best match: Modstroem Pamela Coat Classic Coat
                      </a>
                    </span>
                  </li>
                  <li style="color:blue">
                    <span style="color:blue">
                      Category: Bags.
                      <a href="https://www.zalando.co.uk/zac-zac-posen-eartha-iconic-soft-top-handle-solid-handbag-zz151h056-g11.html" style="color:blue" target="_blank">
                        Best match: Zac Zac Posen Eartha Iconic Soft Top Handle Solid Handbag
                      </a>
                    </span>
                  </li>
                </ul>
              </div>

              <div class="output" id="anthony-ginsbrook-294309-unsplash">
                <h1>
                  Anthony Ginsbrook
                </h1>
                <img class="img_output" src="Fashwell/ImagesFashwell/anthony-ginsbrook-294309-unsplashBOX.jpg">
              </div>
              <div class="products">
                <ul>
                  <li style="color:red">
                    <span style="color:red">
                      Category: Eyewear.
                      <a href="https://www.zalando.co.uk/ray-ban-sunglasses-trasparent--brown-gradient-mirror-silver-ra254e00r-a11.html" style="color:red" target="_blank">
                        Best match: Ray Ban Sunglasses Trasparent  Brown Gradient Mirror Silver
                      </a>
                    </span>
                  </li>
                  <li style="color:blue">
                    <span style="color:blue">
                      Category: Tops &amp; Tees.
                      <a href="https://www.zalando.co.uk/g-star-vim-loose-print-t-shirt-khakiarmy-green-gs121d0i5-t11.html" style="color:blue" target="_blank">
                        Best match: G Star Vim Loose Print T Shirt Khakiarmy Green
                      </a>
                    </span>
                  </li>
                  <li style="color:green">
                    <span style="color:green">
                      Category: Jackets &amp; Coats.
                      <a href="https://www.zalando.co.uk/levisr-original-trucker-denim-jacket-soft-as-butter-dark-le221g031-k11.html" style="color:green" target="_blank">
                        Best match: Levisr Original Trucker Denim Jacket Soft As Butter Dark
                      </a>
                    </span>
                  </li>
                  <li style="color:orange">
                    <span style="color:orange">
                      Category: Jeans &amp; Trousers.
                      <a href="https://www.zalando.co.uk/dorothy-perkins-rip-darcy-jeans-skinny-fit-black-dp521n076-q11.html" style="color:orange" target="_blank">
                        Best match: Dorothy Perkins Rip Darcy Jeans Skinny Fit Black
                      </a>
                    </span>
                  </li>
                  <li style="color:black">
                    <span style="color:black">
                      Category: Shoes.
                      <a href="https://www.zalando.co.uk/converse-run-star-ox-trainers-blackalmost-black-co411a0uz-q11.html" style="color:black" target="_blank">
                        Best match: Converse Run Star Ox Trainers Blackalmost Black
                      </a>
                    </span>
                  </li>
                </ul>
              </div>

              <div class="output" id="brooke-cagle-195860-unsplash">
                <h1>
                  Brooke Cagle
                </h1>
                <img class="img_output" src="Fashwell/ImagesFashwell/brooke-cagle-195860-unsplashBOX.jpg">
              </div>
              <div class="products">
                <ul>
                  <li style="color:red">
                    <span style="color:red">
                      Category: Eyewear.
                      <a href="https://www.zalando.co.uk/ray-ban-clubmaster-sunglasses-brown-ra254f002-703.html" style="color:red" target="_blank">
                        Best match: Ray Ban Clubmaster Sunglasses Brown
                      </a>
                    </span>
                  </li>
                  <li style="color:blue">
                    <span style="color:blue">
                      Category: Jeans &amp; Trousers.
                      <a href="https://www.zalando.co.uk/american-eagle-next-jeans-skinny-fit-am421n000-q11.html" style="color:blue" target="_blank">
                        Best match: American Eagle Next Jeans Skinny Fit
                      </a>
                    </span>
                  </li>
                  <li style="color:green">
                    <span style="color:green">
                      Category: Jumpers &amp; Cardigans.
                      <a href="https://www.zalando.co.uk/aaiko-trilly-jumper-aa321i02m-c11.html" style="color:green" target="_blank">
                        Best match: Aaiko Trilly Jumper
                      </a>
                    </span>
                  </li>
                </ul>
              </div>

Here's the javascript I attempted stop the scrolling with:

$("a[href^='#']").click(function(e){
     e.stop();
});



$('.d-block mb-4 h-100').click(function(event) {

    event.preventDefault();

    return false;

});



$(".d-block mb-4 h-100").click(function (event) {
  event.stopPropagation()
})

Any ideas? Thanks!

bmarc4321
  • 13
  • 3
  • 2
    May I ask why you need an anchor? – Joseph Varilla Dec 30 '19 at 01:46
  • Post the actual JavaScript you tried please – j08691 Dec 30 '19 at 01:47
  • There is a neat example on this one that uses css. It enables an element to display when another element is hovered on. https://stackoverflow.com/questions/5210033/using-only-css-show-div-on-hover-over-a – Dean Dec 30 '19 at 13:49
  • @JosephVarilla Tried various jquery galleries instead, but couldn't apply image mapping to main image selected, so thought html anchors might work alternative. – bmarc4321 Dec 30 '19 at 13:50
  • @j08691 Just updated the post – bmarc4321 Dec 30 '19 at 13:50
  • You might consider storing you images and related data in a javascript object/array and generating your thumbnails. You could then add onclick listeners that would call a function with the array location to generate your modal. – Dean Dec 30 '19 at 13:55
  • FYI `$('.d-block mb-4 h-100')` doesn't match anything, as there are no `` or `` elements in your HTML. If you want to match elements with all three classes, it would be `$('.d-block.mb-4.h-100')`. – Heretic Monkey Dec 30 '19 at 14:15

3 Answers3

0

First solution: define some html anchors around the gallery position (or where you want the browser jumps when the user clicks), using for example:

<a id="alexandru-zdrobau-200768-unsplash"></a>

Define all the ones you need. If you define the anchors like this browser will jump the anchor's position and will not interfere with gallery js's code, so you can define wherther you want the browser jumps.

Second option, more refined, is to find the place where the gallery you are using detect the url hash (the anchor in the url) and replace the links with href="javascript:thatfunction('anchor')". Please specify your code/gallery that your are using because without seeing the actual code cannot be more explicit in this second option.

Third option: finally if for some reason you want the event-controller solution that your proposed; probably the click events controllers that you defined are even not called at all... because there are no elements matching your jquery selectors when the setup is done.

To solve this problem you can:

  • delay your event controller setup (I don't like this kind of solutions, but sometimes are required)... or...
  • you can use a global body event controller and detect which events must be stopped/prevented/cancelled by using the event.target argument property, which should have defined the dom element over the event was originally launched, probably the a href element and if not a children (so you can get parents and find a "a" tag and check it's href). If it does not work you can finally test also the use of mousedown/touch events instead.
user1039663
  • 1,230
  • 1
  • 9
  • 15
0

You Can Use href="JavaScript:void(0)" Instead of href="#"

For Example : <a href="JavaScript:void(0);">Click Here!</a>

Vivekparashar
  • 11
  • 2
0

Thought I'd quickly chime in and mention that my managed to resolve this issue in the end. Basically was using scrollIntoView() function in javascript to make the images appear in the righthand box. Later changed the function to scrollToTop() instead, and for some reason, this stopped the entire page moving whenever you select an image in the left panel.

bmarc4321
  • 13
  • 3