1

I have a page which loads dynamic content inside a modal popup box called TINY box. The content is generated only when the respective links are clicked. I then have a variable called var innerhtml = "<div id ='"+d.name+"'> which generates divs inside the modal box.

where d.name is a variable that dynamically produces a value based on my data. This div is inside the main modal box div which is generated and destroyed whenever the user opens the link and closes the box.

Infact even the box is generated on-the-fly: var innerhtml2 = "<div id ='box'>

But WHILE the box is open, I want the box to autoscroll to a particular div (based on the ids I've mentioned above).

I tried ScrollTop, ScrollTo and Scrollintoview - but I haven't had any luck because the modal box is created and destroyed on the fly and I've read around that those functions work only once the page is fully loaded. Is it possible to write a program that can automatically scroll a dynamically generated modal box to dynamically generated divs inside it?

So how can I do this? Do you need code snippets?

Thanks in advance!

Kaushik

KaushikTD
  • 257
  • 3
  • 17

2 Answers2

0

Assuming I'm understanding you right, you might be able to use the following jquery code within the function that opens the created box and after the div has been added to DOM:

$('html, body').animate({
     scrollTop: $("#"+d.name).offset().top
}, 1000);

This will scroll to the top of the element with the id stored in the variable d.name,

bouscher
  • 1,300
  • 1
  • 9
  • 18
  • I don't want to scroll to the top. I want to be able to navigate through the modal box top to bottom, using automated scrolling based on where the user clicks after the page is fully loaded. Also, my console on Chrome still gives me a "Cannot read property top of undefined" – KaushikTD Jun 03 '13 at 16:43
  • If you would even bother having a look at jQuery's documentation, you would see, what scrollTop does. Have a look at this fiddle, which in a very basic form, does exactly what you want: http://jsfiddle.net/57DS6/ – bouscher Jun 04 '13 at 06:58
  • Okay so I'm using this for my modal box: http://sandbox.scriptiny.com/tinybox2/. The thing is since it's a modal box, your code doesn't really apply for me. I did try it though but for some reason, it doesn't find the inner elements of the modal box when I try to scroll to the element. ScrollTop gives me a "Cannot read property top of undefined" – KaushikTD Jun 04 '13 at 10:19
  • A "modal" (which is no official term or anything) is still just an HTML element and if you give it a proper id, you can address it properly. The error you get indicates, that the element in the selector ($("#"+d.name), does not exist. What's d.name anyway, can't be a javascript variable with the dot, can it? Some kind of object? Maybe there lies the error. Did you try to debug the d.name ('console.log(d.name)')? – bouscher Jun 04 '13 at 10:36
  • Okay so d is an object and "d.name" contains the name of my element. There is no issue with that. But I realized my issue was due to a time delay. The modal box loads with a time delay and so when the DOM element is finally generated, the code to scroll is already executed and hence the program couldn't recognize the DOM element Using Jquery's triggerHandler and a longer time delay for scroll, my issue go resolved! Also, I think these sort of bugs are what are known Heisenbugs - http://stackoverflow.com/questions/636474/why-would-jquery-return-0-for-an-offsetheight-when-firebug-says-its-34 – KaushikTD Jun 05 '13 at 09:48
0

The modal box loads with a time delay and so when the DOM element is finally generated, the code to scroll is already executed and hence the program couldn't recognize the DOM element Using Jquery's triggerHandler and a longer time delay for scroll, my issue go resolved! Also, I think these sort of bugs are what are known Heisenbugs -Why would jquery return 0 for an offsetHeight when firebug says it's 34?

Community
  • 1
  • 1
KaushikTD
  • 257
  • 3
  • 17