Issue with buttons and "jumping"

  • Unknown's avatar
    moshekahol · Member ·

    Hi, in my home page. the first gold button when clicked first time show a form. now you can see – when looking at the scroll bar that the page “jump” a little… now I managed to make it “little” with 2 tricks: space above the box and really big button… but I wish there was more “elegant” way that will give me more freedom… – how can I make the scroll “fixed” so when cliking the button it won’t jump?

    the scroller jumps to this div : #show-home-newsletter as it should.
    what I wish is to open the div without the “jumping”

    hope there is some way! thanks!!!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    siobhyb · Member ·

    Can you please share a direct link to the site that the button you’re referring to appears on? If possible, creating a screenshot that clearly highlights the button would be helpful.

    I’m not certain what you’re referring to and haven’t been able to replicate strange behaviour when scrolling through your site.

  • Unknown's avatar
    moshekahol · Member ·

    Some screen shots:

    ** it should go to the div : #show-home-newsletter, what I wish is it wont jump when doing it.

    thanks siobhyb!

  • Unknown's avatar
    siobhyb · Member ·

    Thank you for clarifying!

    There isn’t a way for you to change the position of the browser’s scroll bar. It will always remain at the point of the page a user is viewing.

    One option is for you to remove the padding above #show-home-newsletter so that it, and the browser’s scroll bar, are then further up the page.

    You could also consider completely removing the browser’s scrollbar from view, so that the jump isn’t visible, with the following:

    body {
    overflow-y:hidden;
}

    Let me know if that helps out.

  • Unknown's avatar
    moshekahol · Member ·

    Hi Sionhyb, thanks for replying :)
    1. about the first idea: “remove the padding above #show-home-newsletter”
    I add padding to #post-603 so the jump will be less noticeable – do you mean to remove the padding in #post-603? how can I remove the padding only from #show-home-newsletter?
    2. about the second idea, when I use: `body {
    overflow-y:hidden;
    }`
    it makes the jump less visible but also I cant scroll down at all – I mean the page is stuck at the top – how ca I hide the scroller only in home page an still make the scrolling down possible?

    thanks Siobhyb

  • Unknown's avatar
    moshekahol · Member ·

    by the way: “There isn’t a way for you to change the position of the browser’s scroll bar. It will always remain at the point of the page a user is viewing.” the jumping happens when the scroller even at the top before clicking (as in the screenshots)

  • Unknown's avatar
    siobhyb · Member ·

    Hi @moshekahol,

    Apologies, I had previously misunderstood the meaning of “jumping” here.

    Looking at your issue now: Could you target #content instead of #show-home-newsletter in your CSS? #content sits at the very top of the page and targeting it, therefore, may get rid of the jumping effect.

    This would involve changing the button’s link from #show-home-newsletter:

    <a id="open" class="button" href="#show-home-newsletter">ברור, אשמח שתעדכן אותי</a>

    To #content:

    <a id="open" class="button" href="#content">ברור, אשמח שתעדכן אותי</a>

    In addition, you would need to replace the following references to #show-home-newsletter in your custom CSS:

    #show-home-newsletter:target #content-home-newsletter {
	display: inline-block;
	width: 100%;
}

#show-home-newsletter:target #open {
	display: none;
}

    With the following:

    #content:target #content-home-newsletter {
    display: inline-block;
    width: 100%;
}

#content:target #open {
	display: none;
}

    Let me know how that goes!

  • Unknown's avatar
    moshekahol · Member ·

    Hi Siobyhyb this is the html after changes: 

    <div id="show-home-newsletter">
<img class="wp-image-1809 aligncenter" src="https://kacholcoaching.files.wordpress.com/2016/08/d79ed793d7a8d799d79a-d7a4d79cd790.png?w=612" alt="%d7%9e%d7%93%d7%a8%d7%99%d7%9a-%d7%a4%d7%9c%d7%90" width="272" height="302" />
<div class="box-newsletter">
<p><span style="color:#000000;"><strong>להירשם עכשיו ולקבל תוכן איכותי שיקפיץ אותך לרמה הבאה!</strong></span></p>
<p><span style="color:#000000;">העניין הוא לא תיבת דואר מפוצצת שעושה לך בלאגן בראש</span></p>
<p><span style="color:#000000;">אלא איך התוכן שלי יעשה לך מיד סדר בראש.</span></p>
<a id="open-home-newsletter" class="button" href="#content-home-newsletter">ברור, אשמח שתעדכן אותי</a>
<div id="content-home-newsletter">
[contact-form][contact-field label="שם" type="name" required="1" /][contact-field label="אימייל" type="email" required="1" /][/contact-form]
</div>
</div>
</div>

    and this is the css after the changes: 

    /* Home-newsletter */
#post-603 .entry-content {
	outline: 0;
}

#content-home-newsletter {
	display: none;
}

#content-home-newsletter:target #content-home-newsletter {
	display: inline-block;
	width: 100%;
}

#content-home-newsletter:target #open-home-newsletter {
	display: none;
}

    now it won’t “jump” but alsop won’t show the form at all…
    Am I doing something wrong?

    the endreslut should be: clicking the button > showing form *and no jumping

    thanks!

  • Unknown's avatar
    siobhyb · Member ·

    Hi @moshekahol,

    I can see you’ve replaced with #show-home-newsletter with #content-home-newsletter instead of #content. Can you please try with #content instead?

  • Unknown's avatar
    moshekahol · Member ·

    yes, the issue is I changed also the html also: `ברור, אשמח שתעדכן אותי
    `

    I mean I made my css and html more understandable to me so I cahnged the names but the are coresponding… you can see it in the code in the previous example

    thanks Siobhyb

  • Unknown's avatar
    siobhyb · Member ·

    I suggested #content as there’s a HTML div with that ID at the very top of the page. When clicked on, therefore, the button would link to the very top of the page and the jump effect wouldn’t be noticeable.

  • Unknown's avatar
    moshekahol · Member ·

    Hey Siobhyb, thanks!!! I dont understand why it worked: is there a #content built in to the the html?

    I have similar button here: https://kahol.co.il/2016/09/29/ds/
    will the same trick work here to avoid the jump?
    (by the way – as you can see in the link there is a mess… I opened a question hereif you can help me with that to: https://en.forums.wordpress.com/topic/single-post-page-problemm?replies=1)

    really thankful for you professionality and patience!
    thanks!!!

  • Unknown's avatar
    siobhyb · Member ·

    I’m glad that got things working!

    Yes, #content references HTML that is already built into the theme and appears at the top-most part of the page.

    I’ll go ahead to answer your other question now but, as a heads up, we generally work from oldest to newest on the CSS forum. Every thread opened will get an answer.

  • Unknown's avatar
    moshekahol · Member ·

    Hi siobhyb, thanks :)
    about my question here:

    I have similar button here: https://kahol.co.il/2016/09/29/ds/
    will the same trick work here to avoid the jump?

    what can I do to elimnate jumping in this page?

    thanks!

  • Unknown's avatar
    siobhyb · Member ·

    The same trick would work on that page, yes. :)

  • Unknown's avatar
    moshekahol · Member ·

    Hi siobhyb… I tried diffrent variations of the trick you suggest with another area of my site… Couldn’t get the result I want …. strange things show up…
    what im trying to do is that the same “show up” trick will happen in a “banner” that stick on the left bottom of my posts…
    here is a link: https://kahol.co.il/2016/09/29/ds/

    I opened a new question about it but since I thought you already understand because you helped me with that in other place, I hope you can give it a look here: https://en.forums.wordpress.com/topic/problem-with-button-show?replies=1#post-2771219

    thanks! and hope its ok

  • Unknown's avatar
    moshekahol · Member ·

    Ok Im thinking im getting this right for now… Ill ask for help again if needed… for now I think I can do it :)

  • Unknown's avatar
    moshekahol · Member ·

    Hi Siobhyb, I managed to figure out most of the thing I wanted…
    inly thing left is here: https://kahol.co.il/2016/08/05/%D7%90%D7%99%D7%9A-%D7%9C%D7%94%D7%99%D7%95%D7%AA-%D7%AA%D7%97%D7%A8%D7%95%D7%AA%D7%99/

    in the buttom of that page and evey post that will be there is a box, when you press the button a form show up…
    same issue here is that the scroller “jump”… I tried #content but as we know it directing it to the top… what can I do to elimnate the jumping here?

    thanks!

  • Unknown's avatar
    thesacredpath · Member ·

    Is this still an issue? It appears you have gotten this taken care of.

  • The topic ‘Issue with buttons and "jumping"’ is closed to new replies.