/    Sign up×
Community /Pin to ProfileBookmark

Prevent Jump to Top of Page When Clicking Link

Copy linkTweet thisAlerts:
Sep 04.2014

Hello all,

I have been stuck on how to prevent jumping to the top of the page when clicking on a link that has parsing PHP data.

I have tried so many AJAX examples on the internet, but unfortunately ending unsuccessful.

A link looks like this:

<a class=”bottle” href=”index.php?step=<?php echo$step; ?>&bottle=b0″><img class=”bottle” src=”images/b0.jpg” /></a>

…with there being 113 of these bottle links, each jumping to the top of the page when clicked.

A preview of the program is: [url]http://www.mtschools.net/aurasoma[/url]

I am helpless!
Many Thanks in Advance,

Kris

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@jedaisoulSep 05.2014 — You won't find the answer in AJAX because it is pure HTML. What you need is an ID part way down the page to jump to. E.g.
<i>
</i>&lt;body&gt;

&lt;!-- some code --&gt;

&lt;div [b]id="something"[/b]&gt;

Then amend:
<i>
</i>&lt;a class="bottle" href="index.php?step=&lt;?php echo$step; ?&gt;&amp;bottle=b0"&gt;&lt;img class="bottle" src="images/b0.jpg" /&gt;&lt;/a&gt;

to:
<i>
</i>&lt;a class="bottle" href="index.php[b]#something[/b]?step=&lt;?php echo$step; ?&gt;&amp;bottle=b0"&gt;&lt;img class="bottle" src="images/b0.jpg" /&gt;&lt;/a&gt;

or to:
<i>
</i>&lt;a class="bottle" href="index.php?step=&lt;?php echo$step; ?&gt;&amp;bottle=b0[b]#something[/b]"&gt;&lt;img class="bottle" src="images/b0.jpg" /&gt;&lt;/a&gt;

I forget the order, just try both!
Copy linkTweet thisAlerts:
@deathshadowSep 05.2014 — What you basically should have there are checkboxes linked to labels, NOT individual anchors. You have the user making choices for a form; treat it as a form. You shouldn't be doing a submit of anchors OR wasting time with AJAX on something that simple.

You just make each of them:

&lt;input type="checkbox" name="bottles[]" id="bottle0" value="0"/&gt;
&lt;label for="bottle0"&gt;
&lt;img src="bottleImage.png" alt="describe the bottle here" /&gt;
&lt;/label&gt;

You could then hide the input and use :checked with a sibling selector to apply a style to the one the user selected. This would let you have a page that works without scripting, that could then be enhanced with scripting.

With said scripting enhancement I'd first hide the text field and submit, and trap onchange on all the checkboxes. Once you hit the four limit of selections you hide all non-checked INPUT and LABEL, then reveal the show area.

One form, no endless submits for nothing, gracefully degrading.
×

Success!

Help @stabbsy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...