INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Dynamic Pop-up Image

Dynamic Pop-up Image

(OP)
I'm using CSS for mouse-overs to make a larger version of an image appear but I am having trouble getting it to go where it should! They seem to pop up wherever they want. The HTML is:

CODE --> HTML

<a class="thumbnail" href="#thumb"><img src="/images/photoalbums/35/thumbnails/$_19.jpg" width="250" height="188" border="0" /><span><img src="/images/photoalbums/35/$_19.jpg" width="500" height="375"></span></a> 

. . . and the CSS is:

CODE --> CSS

.thumbnail {
	position: relative;
	z-index: 49;
}

.thumbnail:hover {
	background-color: transparent;
}

.thumbnail span { /*CSS for enlarged image*/
	background-color: lightyellow;
	padding: 5px;
	border: 1px dashed gray;
	visibility: hidden;
}

.thumbnail span img { /*CSS for enlarged image*/
	position: absolute;
	border-width: 20;
	margin-top: 10px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	float: center;
	clear: all;
	border: 2px solid gray;
	padding: 2px;
	z-index: 50;
	clear: all;
}

.thumbnail:hover span { /*CSS for enlarged image on hover*/
	visibility: visible;
        display: block;
} 

Perhaps I've made it overly-complicated and something is cancelling out what's needed!

RE: Dynamic Pop-up Image

Its hard to say without knowing what its doing exactly.

But a few things that stand out:

1. There is no such thing as a float:center; only left or right. So that is doing absolutely nothing.
2. You only need to clear floats once. So the second clear is extra and unneeded.
3. Changing the visibility of an element makes its invisible, however it still takes up space on the page, so other elements move to fit it. This may or may not be desirable.
4. Giving the position:absolute to the image means the span will never surround it. Making the span a block element then may cause additional movement of things.
Perhaps giving the absolute position to the span may be a better option.

Also instead of making things invisible, change their display to none, and then to block or inline.









----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: Dynamic Pop-up Image

(OP)
I ended up with something that seems to work well enough in IE, Firefox and even Safari on Windows but it does not work in Safari in an iDevice. Any tweeks that will help with the latter?

Although the image refuses to be centered, it does stay totally on the page horizontally and seems to scroll with the page vertically so, other than the iDevice issue which I need to solve, it's fine. On Firefox and IE, the larger image slides in from the left while on Safari, it drops down from the top but that doesn't especially matter. I know there seem to be multiple -webkit-transition and a couple others but when one or the other of the extras is removed, the images jump all over the place so is there a simplification that might stop the oddness while removing the extras?:

CODE --> CSS

a.mouseover-thumbnail-holder {
	position: relative;
	margin-left: 10px;
}

.large-thumbnail-style {
	display: block;
	border: 10px solid #fff;
	box-shadow: 0px 0px 5px #aaa;
}

a.mouseover-thumbnail-holder .large-thumbnail-style {
	position: absolute;
	margin-top: -385px;
	left: -9999px;
	top: 50%
	z-index: 50;
	opacity: 0;
	filter: alpha(opacity=40);
        -webkit-transition: opacity .5s linear;
	transition: opacity .5s ease-in-out;
	-webkit-box-shadow: 0px 0px 4px 2px #D50E0E;
	-moz-box-shadow: 0px 0px 4px 2px #D50E0E;
	box-shadow: 0px 0px 4px 2px #D50E0E;
	-webkit-transition: all 1s linear;
	-o-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-ms-transition: all 1s linear;
	-kthtml-transition: all 1s linear;
	transition: all 1s linear;
}

a.mouseover-thumbnail-holder:hover .large-thumbnail-style {
	position: fixed;
	left: 50%;
	top: 50%;
	z-index: 100;
	opacity: 1;
} 

RE: Dynamic Pop-up Image

iDevices and for that matter most touch based devices have no hover state since you are using your finger. If your finger is hovering i.e. does not touch the screen, there is no action.

When your finger touches the screen the click event is triggered.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: Dynamic Pop-up Image

(OP)
Yes, of course I know that (no mouse: no mouse-over!) but what I meant was that in touching the images they are not working. In some cases the image appears momentarily but moves down off the screen and sometimes it is behind other images as it moves by.

RE: Dynamic Pop-up Image

Do you have a link where we can see this?

Since there is no hover, the click or tap may not be holding so the image goes away quickly.

Its hard to say without seeing hat its doing.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: Dynamic Pop-up Image

(OP)
You can try this direct link to one of the photo albums: Packards / Imperials Page.

Note, however, that per another tek-tips posting the vertical scrolling is not working so on an iPad you'll see only the first row of photos in the album but on an iPhone, iPad or other small device, you might not see any. I've not yet found a solution to the known bug.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close