Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2019
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image Carousel scrolls page when I click to advance to next slide

    My website is Home. The problem I am having is when you click on the arrow to go to the next picture in the image carousel the page scrolls down to put the image at the top of the page.
    I don't want this to happen. What do I need to change or add in this code? I am working in Netsuite. The HTML is embedded in my "Home" tab and the CSS is in the body of the theme. I feel like I had to add that because if you've ever worked in Netsuite you'll understand why it's so awful.

    CSS:

    Code:
    .carousel-wrapper{
    height:250px;
    position:relative;
    width:450px;
    margin:0 auto;
    }
    .carousel-item{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    padding:25px 50px;
    opacity:0;
    transition: all 0.5s ease-in-out;
    }
    .arrow{
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 12px;
    }
    
    .arrow-prev{
    left:-30px;
    position:absolute;
    top:50%;
    transform:translateY(-50%) rotate(135deg);
    }
    
    .arrow-next{
    right:-30px;
    position:absolute;
    top:50%;
    transform:translateY(-50%) rotate(-45deg);
    }
    
    .light{
    color:white;
    }
    
    @media (max-width: 480px) {
    .arrow, .light .arrow {
    background-size: 10px;
    background-position: 10px 50%;
    }
    }
    }
    
    /*Select every element*/
    [id^="item"] {
    display: none;
    }
    
    .item-1 {
    z-index: 2;
    opacity: 1;
    background:url('https://system.na3.netsuite.com/core/media/media.nl?id=572020&c=977154&h=ae506f8de23979a2876f ');
    background-size:cover;
    }
    .item-2{
    background:url('https://system.na3.netsuite.com/core/media/media.nl?id=572021&c=977154&h=ec9a3a8e3f71b208df7a ');
    background-size:cover;
    }
    .item-3{
    background:url('https://system.na3.netsuite.com/core/media/media.nl?id=572022&c=977154&h=b4d81fab63e379446172 ');
    background-size:cover;
    }
    
    *:target ~ .item-1 {
    opacity: 0;
    }
    
    #item-1:target ~ .item-1 {
    opacity: 1;
    }
    
    #item-2:target ~ .item-2, #item-3:target ~ .item-3 {
    z-index: 3;
    opacity: 1;
    }
    }


    HTML

    Code:
    <div class="carousel-wrapper">
    <span id="item-1"></span>
    <span id="item-2"></span>
    <span id="item-3"></span>
    <div class="carousel-item item-1">
    <h2></h2>
    <p></p>
    <a class="arrow arrow-prev" href="#item-3"></a>
    <a class="arrow arrow-next" href="#item-2"></a>
    </div>
    
    <div class="carousel-item item-2">
    <h2></h2>
    <p></p>
    <a class="arrow arrow-prev" href="#item-1"></a>
    <a class="arrow arrow-next" href="#item-3"></a>
    </div>
    
    <div class="carousel-item item-3">
    <h2></h2>
    <p></p>
    <a class="arrow arrow-prev" href="#item-2"></a>
    <a class="arrow arrow-next" href="#item-1"></a>
    </div>
    </div>
    Last edited by VIPStephan; Feb 1st, 2019 at 12:26 AM. Reason: added code BB tags

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,955
    Thanks
    36
    Thanked 1,064 Times in 1,060 Posts
    Hi Ray
    When you have a anchor like this:
    Code:
    <a class="arrow arrow-next" href="#item-2"></a>
    The #item-2 does exactly as you say; Moves it to the top of the page. What you need to do is change the image in the section next to the arrow and that means JavaScript.
    I'd do it for you but your site is hard to navigate. You have tables inside of tables inside of tables in ad infinitum. You have CSS in your HTML as is your JS. For a fix, just use JS to change the href of the <TD> where the image is - then in your free time rewrite your site to make fixing problems easier -- yeah, we know that's never going to happen, right?
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    New to the CF scene
    Join Date
    Jan 2019
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have absolutely no idea why it was made this way. I just started with this company and this is what I was given. Turd polishing to say the least. I think the table stacking might have something to do with the way SiteBuilder in Netsuite is set up. They thought they were making it easier but now things are just all over the place with portlets and suitelets and ..... well you get it. Plus I am not incredibly savvy with this stuff so you are telling me to use JS to change the href but I don't even know where the damn JS is. Not to mention I'm fairly certain there are links to js that aren't even currently active (probably a trial and failure with no cleanup) Netsuite is a mess.

    If you are not familiar with netsuite, let me do a horrible job at explaining it: There are three main areas to edit content. You have a File Cabinet with all of your images and css files and other content. Then there are areas within the platform itself that are set up to edit content inside of pre-setup areas for items and categories. Then there is a section where you can edit the theme which is basically all of the compiled css.

    I have attached some visuals for further help.

    With this gradeschoolesque reply, would it be possible to give me a better idea into editing the js that I am unable to locate?

    -netsuite1-jpg

    -netsuite2-jpg

    -netsuite3-jpg


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •