modified example
Hover the mouse pointer over this paragraph.
How about this one?
And here.
how would we do this by the word?
This is the fifth of these code examples. First I was experimenting with how to use the hover events that jquerry allows. I set up to get the page span element to be a slightly larger font.
From that I applied the same ideas to an image element. That made everything else in the flow jump around. I didn't like that behavior. And so next I decided to try and get the enlarged image that is shown with the hover callback to be 'absolute' in its positioning. That way it is outside of the flow and will not make the rest of the content move around.
But that all worked here. It worked well here. But this is an unreal page. Really the node needs to be inserted as the first element, or be put into the singleton node as I first envisioned (an idea that I decided to deprecate). The reason that I decided to not use the singleton node was that it seemed a lot easier for me to just clone an node, putting it outside of document flow, placing it at the contnet that will be enlarged, and then removing it when I am done.
I've almost got it all working like I want it to (in a beta way) but it is still very flawed. Apparently the node needs to be inserted at the base node of the document in the DOM in order for the locational placement to be put in correctly. Absolute means putting the thing absolutely within it's own context. So the absolute that is reported by the offset function is not quite the one that I want to use for the way that I am inserting my content. I need to just copy the left and top I believe, in this case.
It is all based upon where you put the throw-away clone node. If you put it in the main document, you want to use the offset() call to get the node's offset from the main body of the browswer. If you get it left and top from the position() call, you place it absolute and if it is relative to the div that it is in, it will position correctly. I still like the idea of putting in a dummy div so that there aren't two nodes of the same thing. That would be a solution if, for some reason, making a clone is not allowed.
well, it is a beta and it is working live on my main website and it seems to be pretty good. Obviously I need to do more with this.
If the clone is done incorrectly with a 'true', then the thing ought to create a stack overrun as the image keeps getting bigger and bigger (and the callback is fired as the new one appears). I'm curious.
I like that this method doesn't make the rest of the page jump around. But the algorithm needs a lot more work so that the image elements that get put in the document don't go out side the bounds of the screen.
I made the slight modifications to this code and that allowed me to have the hover over an image result in a scaled copy of that image displaying. Now I need to work on some other things: like I probably need to unset the max width so that this doesn't result in a bad aspect ratio because I set the width to be max width of the containing parent (100%). This is an easy fix.
Also I need to pull the code out and not have it be part of the file, but a separate download. I would also like to invetiagete the use of namespaces so that multiple coding examples can exist on the same page, each from it's own html file that is included.
Well, I sure did learn a lot doing all of this. The next steps are as follows:
The items that pop out are only there briefly. This is not good and the effect of the on-hover gives a feedback so that sometimes the image is jumping and keeps disappearing. This is not smooth nor cool. It is, in fact, annoying. And so, while this demonstration of how to do this is 'OK' as a demonstrtation, and a lot less broken than the braindead stuff at the Jquerry tutorial website, it is still not ready for prime time.
I was experimenting on how to make the object appear over the one that it magnifies. I was looking at the use of the offset verses the position calls. offset gets the location relative to the browser. position gets the location relative to the parent object. If using the offset call the temporary node needs to be placed at the highest level inside of the main document. If using parent the temporary object needs to be nested with the same parent. That is the key: who is the parent. If the parent is the body of the document then the item should appear above all of the others. If not it is down inside of some object that has it's own rules on overflow and those would need to be modified to make the item 'pop' over everything else if those rules do not let that happen now.
Currently I demonstrate two effects: one on the <p> and the other on the <img> elements. Also I styled two classes of <p>. This suggests that moving forward involves exploring other types of effects for other classes of various types of elements.
© 2010, 2012 2013 Amillia Publishing Company. © 2010, 2012 Amillia Publishing Company.