jquery have 2 functions work in succession on click

Question

I have this JS code:

function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

which opens up a new window on click. What I want it to do next from that first click is go to another function. That function entails a scroller that has 5 divs in it. Say I want it to go to the third div or ID, how would I go about writing that type of function? So a HTML example would be:

<div id="this">
   <div class="outer">
       <div class="innerdiv">
           <div class="1" id="1">1</div>
           <div class="2" id="2">2</div>
           <div class="3" id="3">3</div>
           <div class="4" id="4">4</div>
           <div class="5" id="5">5</div>
        </div>
   </div>
</div>

This would represent my scroller. So on that initial first click, the idea is that it would open up a new window and scroll to that 3rd div, or if scrolling to it is to difficult, then go to that first div. http://jsfiddle.net/qYTK4/

<div class="arrowbox">
      <div style="display:inline-block; width:155px; height: 50px; float:left;"></div>
      <div class="leftbox" id="leftbox"></div>
      <div class="backtohome"><a href='#' onclick='overlay()' style="text-decoration:none;">BACK TO HOME PAGE</a></div>
<div class="rightbox" id="rightbox"></div>

How are you opening the new window? It's possible you could embed arguments in the query string of it's location, then implement a function onload of the new window that reads in those parameters. — Dexygen, Oct 01 '13 at 18:24
That JS code just toggles the `visibility` property between `visible` and `hidden` on the target element `#overlay`, it doesn't open a new window. — Ennui, Oct 01 '13 at 18:24
What do you mean by "Go to the 3rd div" What exactly is "go" ? — Colandus, Oct 01 '13 at 18:24
please be more specific, your code does nothing because you don't have any eventhandlers defined... — kasper Taeymans, Oct 01 '13 at 18:24
what i do is i have an onclick that goes to this function that toggles a window open — Keith, Oct 01 '13 at 18:24
@GeorgeJempty that code clearly shows/hides an overlay. I think that's what OP means by "new window." — Evan Davis, Oct 01 '13 at 18:25
Go means that when you click on the image it scrolls to the 3rd div — Keith, Oct 01 '13 at 18:27

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

Using window.scrollTo() and move it to the objects position. Retrieve the position (X,Y) of an HTML element

edited May 23 '17 at 10:25

Community

1
1

answered Oct 01 '13 at 18:27

Colandus

1,634
13
21

score 0 · Answer 2 · answered Oct 01 '13 at 18:29

0

jQuery.ScrollTo is a great, simple plugin for smooth scrolling animations. It has tons of options for ways to define the scroll behavior and is pretty easy to use. There are a ton of demos and examples on the site linked you should be able to use. In yours you would just tell it to scroll to either the DOM element itself or jQuery object/selector for the 3rd div.

Also, you can't have id attributes start with numbers (like your divs), it's not valid. Classes can but not IDs.

It is also a good idea to rely on click event handlers (i.e. $('.backtohome a').on('click', function() { // your code });) rather than onclick attributes.

answered Oct 01 '13 at 18:29

Ennui

10,102
3
35
42

The scroll element works by itself, I just have a problem scrolling to a specific div onclick – Keith Oct 01 '13 at 18:30
I don't know what you mean by the 'scroll element'. That plugin allows you to easily scroll the window to a target location (such as a specific `div`) with a single line of jQuery. All you need to do is attach that line of code to a click event handler for your button. – Ennui Oct 01 '13 at 18:34

jquery have 2 functions work in succession on click

2 Answers2