If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

jquery and offsetting content.

Hi,

I have been browsing a load of tutorials and found one which I can understand and which is easy to implement. When I hover over an image, I want it to display a larger image next to it as a sort of 'preview' feature of the image.

I have added some of my own code (the opacity bits) and edited the other jquery to suit my needs. The problem I am having is as well as displaying the corresponding image, I also want it to display a bit of text underneath the image. I am successfully appending the paragraph to the body but when I try to manipulate the Y offset, it doesn't seem to work.

I have highlighted the line which doesn't seem to be working. As you can see I have created another variable with a value of 300 (this is the total height I set my 'preview' images to. I have to also accommodate for a bit of padding, but that can be done later). Trouble is when I try to add offsetY to offsetTextY, it doesn't seem to add them correctly. The paragraph offsets to the same area which the image does but the 300 pixels are not being accounted for thus covering the top half of the image. I have tried all kinds of different ways to make sure the the calculation of offsetY and offsetTextY is done first, but it doesn't seem to be working anyway.

Otherwise, as soon as the mouse moves a little bit it will ignore the text-offset.

BTW This is probably not the best way to do this - dynamically creating the elements. Preferable would be to have the image and paragraph contained within a hidden div, and use events to change the image src, the p-text, and then show (or fade, etc.) the div.

"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS

Make the div visible initially and use css on all three elements until it looks good. The div should be position: absolute with a z-index so that it sits above other content - I'm assuming this is your requirement?

What I am trying to achieve is, when the click function runs, to slide the current image up and then display the next by sliding down at the end of the function as usual. As it starts sliding up, the content changes to the next index of the array and displays the image before it's reached the top, then slides down the very same image and text.

Is there a way I can tell jquery to stop what it's doing until the slideUp function finishes it's job.

I tried putting .stop().slideUp bla bla and it didn't work. I know we can use stop() with animate() but clearly not with the basic css style functions. I also tried moving the iteration around to before the jquery functions(inside the click) and afterwards and no difference.

Users who have thanked AndrewGSW for this post:

Top man, thanks very much indeed. I noticed a lot of the functions have the callback parameter but never really known what it meant or how to use it.

My images are displayed from a database so when trying to implement something like this in my site, how can I go about filling the array with the images which are retrieved rather than having to hardcode each src attribute?

Edit: think i might have an idea, ill go ahead and attempt to do it. Just need to grab the src of the image which was retrieved the same as I did before and loop the values into an array?

At some point you might want to look into pre-loading (caching) the images - if there are a number of them, or they are quite big. Essentially, you create a new-images array and setting there src's loads them in the browsers cache.

Would this be done completely separate from the jQuery and does it need to be done before any of the jQuery is run?

Sorry I've never even looked at caching. Heard a lot but never read into it. :s

Regards,

LC.

The pre-loading can be done as the page is constructed, or afterwards in $(document).ready(). I'm guessing it would be sensible to do it in document.ready, so that it doesn't interfere with the initial construction of the page(?) - assuming the user is not likely to start hovering while the page is still loading.

Perhaps you could ignore the pre-loading aspect until everything else is working.

"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS

Yea I will definitely keep this all in mind, thanks for the tips. I am going to get the functionality working between being able to select the correct image and text when I hover over that certain image. I will go back and read up on caching though once I've got this sorted.

I forgot how much I like jQuery!

Was a long night and found myself debugging other peoples code so I didn't work much on the jquery from around 10pm last night. Going to do my bits and get back on it today. Will update the thread later on with any issues which arise (let me assure you there will be!)

I think I need a loop but I'm not sure how to get the length of how many images they are. I know the length but didn't want to hardcode it incase I add more. I am trying to target all the images which comes from my database. (when they are retrieved, I give them a class of 'pos') I thought doing this I could target them with jquery using the class I'm just not sure on the functions of jquery and how to retrieve all the images. Using the second code everytime I click the alert box off, it pops up with another but displays this: