1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Tooltip Stutters

Discussion in 'jQuery' started by makamo66, Oct 17, 2015.

0
  1. #1
    Hi,

    If you hover over the images at http://quinnmoore.com you will notice that there is a slight delay as if it is stuttering. How can I get rid of this stutter effect and see it hover over more smoothly? Thanks in advance.
     
    makamo66, Oct 17, 2015 IP
  2. makamo66

    makamo66 Active Member

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #2
    I was able to solve the problem using relative positioning on the parent and absolute positioning on the child (the img tag).
     
    makamo66, Oct 17, 2015 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Some advice:

    In terms of those hovers, don't waste JavaScript on doing CSS' job. you aren't doing ANYTHING there that even warrants the PRESENCE of javascript when CSS has a perfectly good :hover attribute. I'd also consider making those anchors even if the href is self referring so keyboard navigators aren't left out in the cold.

    Second, if there's JUST the image, with no "figCaption", and it's not a mathematical, scientific or engineering figure, <figure> is probably a pointless semantically incorrect tag.

    Third, it's probably a BAD idea to be putting a title attribute on something that's identical to the ALT text. For graceful degradation purposes I'd put that in as actual text in it's own element (like P) AFTER the image. That way you have a hook for li:hover.

    Of course with six stylesheets doing the job of one, no media targets on those link, a slew of scripting on a site that shouldn't even need any, HTML 5 bloat / pointless elements, no document structure thanks to no headings, no charset declaration, no graceful degradation on the social links, presentational use of classes, DIV for nothing, etc, etc, etc... You've got a laundry list of how NOT to build a website.

    Not surprising and probably not your fault -- there's a LOT of bad advice and worse practices out there.

    I'm heading to bed right now, but I'll try to revisit this tomorrow and do a quick rewrite since your page is REALLY simple, just to show you what I mean... generally speaking for what you have that page doing, I'm HIGHLY doubtful that it would need to be significantly larger than this for markup:

    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">

<meta
	name="viewport"
	content="width=device-width; height=device-height; initial-scale=1"
>

<link
	rel="stylesheet"
	type="text/css"
	href="screen.css"
	media="screen,projection,tv"
>

<title>
	Quinn Moore
</title>

</head><body>

<ul class="hoverGallery">
	<li>
		<a href="#">
			<img
				src="images/1.jpg"
				alt="This is an older picture but we're so stupid so yep."
			><span>
				This is an older picture but we're so stupid so yep.
			</span>
		</a>
	</li><li>
		<a href="#">
			<img
				src="images/2.jpg"
				alt="with Quinn Moore and Stephen Moore."
			><span>
				with Quinn Moore and Stephen Moore.
			</span>
		</a>
	</li><li>
		<a href="#">
			<img
				src="images/3.jpg"
				alt="with Sandy Moccaldi."
			><span>
				with Sandy Moccaldi.
			</span>
		</a>
	</li><li>
		<a href="#">
			<img
				src="images/4.jpg"
				alt="with Andrea Sittnick Moss, Stuart Graves and Quinn Moore."
			><span>
				with Andrea Sittnick Moss, Stuart Graves and Quinn Moore.
			</span>
		</a>
	</li><li>
		<a href="#">
			<img
				src="images/5.jpg"
				alt="with Walaa Adam and Quinn Moore."
			><span>
				with Walaa Adam and Quinn Moore.
			</span>
		</a>
	</li><li>
		<a href="#">
			<img
				src="images/6.jpg"
				alt="with Carrie and Stephan Moore"
			><span>
				with Carrie and Stephan Moore
			</span>
		</a>
	</li><li>
		<a href="#">
			<img
				src="images/7.jpg"
				alt="with Quinn and Mattie Moore"
			><span>
				with Quinn and Mattie Moore
			</span>
		</a>
	</li><li>
		<a href="#">
			<img
				src="images/8.jpg"
				alt="with Quinn Moore, Claudet Mitchell and Amy Sittnick Graves at Occoquan Historic District."
			><span>
				with Quinn Moore, Claudet Mitchell and Amy Sittnick Graves at Occoquan Historic District.
			</span>
		</a>
	</li>
</ul>

<div id="footer">
	<hr>
	<ul id="footerMenu">
		<li><a href="#">About us</a></li>
		<li><a href="/blog/">Blog</a></li>
		<li><a href="#">Press</a></li>
		<li><a href="#">iOS App</a></li>
		<li><a href="#">Android App</a></li>
	</ul>
	<ul id="footerSocial">
		<li class="facebook">
			<a href="https://www.facebook.com/quinn.moore.142">
				FaceBook<i></i>
			</a>
		</li>
		<li class="twitter">
			<a href="#">
				Twitter<i></i>
			</a>
		</li>
		<li class="googlePlus">
			<a href="#">
				Google<i></i>
			</a>
		</li>
		<li class="instagram">
			<a href="#">
				Instagram<i></i>
			</a>
		</li>
	</ul>
	<div>
		&copy; 2015 by
		<a href="http://www.maureenmoore.com">Maureen Moore</a>
	</div>
<!-- #footer --></div>

</body></html>
    Code (markup):
    Basically half the markup. EVERYTHING else done on that page so far can be done in modern browsers (and a lot of it in older browsers) WITHOUT resorting to JavaScript whatsoever. Letting CSS do the heavy lifting is often WAY more reliable / useful than JavaScript anyways... and usually easier to turn off for things like mobile/touch that don't even HAVE hover states.
     
    deathshadow, Oct 18, 2015 IP
  4. makamo66

    makamo66 Active Member

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #4
    I tried adding the HTML you provided but it didn't work with my css. What did you use for your css?
     
    makamo66, Oct 20, 2015 IP
  5. makamo66

    makamo66 Active Member

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #5
    Never mind, I got it to work.
     
    makamo66, Oct 20, 2015 IP
  6. makamo66

    makamo66 Active Member

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #6
    <figure class="meal-photo">
    <a href="#" class="tooltip">
    <span>
    This is an older picture but we're so stupid so yep.
    </span>
    <img src="resources/img/facebook/1.jpg" alt="This is an older picture but we're so stupid so yep. ">

    </a>
    </figure>
    with this CSS;
    a.tooltip span {
    z-index:0;display:none; padding:14px 20px;
    margin-top:60px; margin-left:-160px;
    width:300px; line-height:16px;
    }

    a.tooltip:hover span{
    display:block; position:absolute;
    top: 0px;
    left: center;
    border:2px solid #000; color:#000;
    background:#fff;
    z-index: 12;
    }
     
    makamo66, Oct 20, 2015 IP
  7. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #7
    And none of the tooltips work on the top row of pictures on a small screen (read: mobile)
     
    PoPSiCLe, Oct 20, 2015 IP
  8. makamo66

    makamo66 Active Member

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #8
    I created the top row with CSS animation and the bottom row with jQuery. I would like for anyone reading this post to check both rows and let me know how they were displayed. Thanks.
     
    makamo66, Oct 21, 2015 IP
  9. makamo66

    makamo66 Active Member

    Messages:
    125
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #9
    @ PoPSiCLe: Thank you for the feedback.
     
    makamo66, Oct 21, 2015 IP