Stop Page Jumping

  • onlyican.com
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1589
  • Loc: Hants, UK

Post 3+ Months Ago

Hey people
got a question, not sure if its possible, but a pint up for grabs (or other drink)

I have a page, that has little images, and you click on the images, and a JavaScript function works, to change the image, without page reload
The link is something like

<a href='#' onclick='toggleseat("TopLeft", "A/1", "seatA1", document.seatA1.src, "1-1");'>

Some times, the little images are at the bottom of the page, and requires the end user to scroll down to see them
This is not a problem, but when the user clicks on the link, they are jumped to the top of the page

Any advice, suggestions on how to stop this.

If you dont understand my example, go to
http://www.onlyican.com/work_example/po ... p.php?id=7
Note, you have to scroll to get to the bottom of the seats

If you scroll, and want to change the whole bottom line to Green Seats (Click on the image twice), then each time you click on the image, you have to scroll back down

I want to stop that

Any Advice.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

It drives me insane to see,
Code: [ Select ]
<a href="#" onclick="...">

I don't understand what makes people use an anchor element for attaching a click handler when it doesn't default to an actual link.

You have two options, option one is to require Javascript to be enabled & attach that onclick event to a different type of element, preferably a 'button' element, but any element will do.

Some CSS
Code: [ Select ]
<style type='text/css'>
button[type="button"]{
  border: 0;
  background-color: transparent;
}
button img{
  vertical-align: middle;
}
.clicker{
  cursor: pointer;
}
</style>
  1. <style type='text/css'>
  2. button[type="button"]{
  3.   border: 0;
  4.   background-color: transparent;
  5. }
  6. button img{
  7.   vertical-align: middle;
  8. }
  9. .clicker{
  10.   cursor: pointer;
  11. }
  12. </style>


Some [X]HTML
Code: [ Select ]
<button type='button' onclick='eventHandler()'>
  <img src='icon.png' alt='Icon' /> Anything under the sun
</button>

<span class='clicker' onclick='eventHandler()'>Inline Elements</span>
  1. <button type='button' onclick='eventHandler()'>
  2.   <img src='icon.png' alt='Icon' /> Anything under the sun
  3. </button>
  4. <span class='clicker' onclick='eventHandler()'>Inline Elements</span>


Option two is to use anchors that actually point to the file in case Javascript is disabled, then swap thoose anchors out with span elements like the "clicker" span above when the page loads & before anything can be clicked.
  • onlyican.com
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1589
  • Loc: Hants, UK

Post 3+ Months Ago

if you looked at the example, you will note that a button is not an option.
As I am using swap image on the little images.
  • onlyican.com
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1589
  • Loc: Hants, UK

Post 3+ Months Ago

any, I have solved the issue
I removed the href from the link

so now the link is

<a class='MousePointer' onclick='toggleseat("TopLeft", "A/1", "seatA1", document.seatA1.src, "1-1");'>

and I wrote in the CSS
Code: [ Select ]
.MousePointer{
cursor: pointer;
}
  1. .MousePointer{
  2. cursor: pointer;
  3. }


it seems to work in IE and FF
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

*smacks forehead*

You realize you're mis-using the anchor element right ?
  • onlyican.com
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1589
  • Loc: Hants, UK

Post 3+ Months Ago

I did not build this, my boss did, I just had to make it work with the database.

It works on both browsers, what is wrong with that?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

There's nothing wrong with it working on the two browsers you're aiming for, but just because a brick will pound a nail in doesn't mean that's what it's for.
  • onlyican.com
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1589
  • Loc: Hants, UK

Post 3+ Months Ago

Just to let people know, incase they find this in the future.

I have found another solution to stop the page jumping, which I think works better

<a href='#' onClick='DoSomething(); return false'>Click Me</a>

Adding the "return false" will stop adding the # into the address bar, and also stop the page jumping.

No need to add a class, and change the Mouse Properties in CSS, and I think it works better.

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 90 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.