Solved

How to get fade words in over image?

Posted on 2012-12-21
21
410 Views
Last Modified: 2012-12-24
The text, 'Part Four Blue of White' fades in over the animated image here http://nyti.ms/RJpnp3.  Is there any CSS that can do that or is it built into the image?
0
Comment
Question by:brettr
  • 9
  • 6
  • 6
21 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38714265
That one looks like its done with javascript over an html5 video. You could also do it with a combination of javascript and CSS3 transitions.
0
 

Author Comment

by:brettr
ID: 38714286
Do you have some example code or references that do it?
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38714303
Are you using jquery on your site?
0
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 200 total points
ID: 38714322
Here's the gist of it. Let us know if you need more help
<style>
#container{
   postion:relative;
}
#bgimage{
   position:absolute;
   z-index:1;
}
#textDiv{
   position:absolute;
   z-index:2;
   display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
   $("#textDiv").fadeIn("slow");
});

</script>

<div id='container'>
<img id='bgimage' src='image.jpg'/>
<div id='textDiv'>text to fade in</div>
</div>

Open in new window

0
 

Author Comment

by:brettr
ID: 38714356
Ah, nice.  

Is it possible to get the image fading in and animating up slightly?  Similar to the above site.

Is it possible to get the text to align the same:

PART FOUR is left of the other text.  The other text doesn't wrap under PART FOUR.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38714433
anything possible:)

post a picture of what you are looking for, or if you have some html, post that.

remember to be specific
0
 

Author Comment

by:brettr
ID: 38714489
Using the code snippet you gave, how can I get the text to format like the text in the image?

text wrap
0
 
LVL 6

Expert Comment

by:lightspeedvt
ID: 38714635
Here is demo of formatting based on those snippet:
http://jsfiddle.net/XP4YH/
0
 

Author Comment

by:brettr
ID: 38714781
@lightspeedvt:  Nice.

I have to use the following after the overlay text divs

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<br/>

Open in new window

Otherwise, the paragraph below runs up into the image.  

I did try this after the overlay divs:

<div class="social-sprite" style="clear:both;">

Open in new window


clear:both didn't seem to have any effect.  Do you have some idea on how it should be handled?

Also, what is needed to move the bottom word ("Wild") up a little so it isn't nearly touching the bottom of the image?
0
 
LVL 6

Accepted Solution

by:
lightspeedvt earned 300 total points
ID: 38714816
"clear:both" is not working as we have absolute positioning.

Here is updated demo:
http://jsfiddle.net/XP4YH/1/
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:brettr
ID: 38714883
I'm not able to duplicate the same div structure you have.  I'm using a framework so there are some limitations.  I did try position:relative on the div under the text container, which of course had not effect...since it looks like that one needs to be in the container div.

I replaced the paragraph tags with three line break tags.  That seems to work fine.  Guess I will need to stay with that if there is not way to style it.  Thanks.
0
 
LVL 6

Expert Comment

by:lightspeedvt
ID: 38714887
If you will give the url to see the page - I may try to help.
0
 

Author Comment

by:brettr
ID: 38714889
Here ya go: http://bit.ly/XSvNPm.
0
 
LVL 6

Expert Comment

by:lightspeedvt
ID: 38714911
Ok. I will check it out tomorrow. Also, you have to fix one javascript error at site.

<script type='text/javascript'>//<![CDATA[
$(function(){
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
padding : 0
});
});//]]>
</script> 

Open in new window


Something is wrong with fancybox:



TypeError: $(...).attr(...).fancybox is not a function
[Break On This Error]       

padding : 0

/thebo...ge-one/ (line 57)
0
 

Author Comment

by:brettr
ID: 38714941
Which browser are you using?  I'm running FF 17 and Safari 6 and don't see any errors.

I've posted a new question for the line break issue so you can at least get some points for it: http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27975880.html.
0
 
LVL 6

Expert Comment

by:lightspeedvt
ID: 38715373
Those javascript issue appears to all browsers. Install this extension for FF and you will see it:
http://getfirebug.com/
#containerImageOverlay {
    height: 200px;
}

Open in new window

0
 

Author Comment

by:brettr
ID: 38715763
I have firebug installed but don't see the error.
0
 
LVL 6

Expert Comment

by:lightspeedvt
ID: 38717473
Hmm. I see the error at all browsers and even had checked it at couple of another computers.

Here is a screenshot attached.
screenshot.jpg
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38717558
you have three references to jquery. You only should have one. Use the latest version, and make sure it's above all your other jquery dependent scripts.


<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<title>The Slow Crawl To Page One</title>
<meta name="robots" content="noodp, noydir" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="http://www.bitesizebschool.com/wp-content/thesis/skins/classic/css.css" type="text/css" media="screen, projection" />
<link rel="shortcut icon" href="http://www.bitesizebschool.com/wp-content/uploads/2012/12/shield.png" />
<link rel="canonical" href="http://www.bitesizebschool.com/thebook/the-slow-crawl-to-page-one/" />
<link rel="alternate" type="application/rss+xml" title="Bitesize Business School feed" href="http://www.bitesizebschool.com/feed/" />
<link rel="pingback" href="http://www.bitesizebschool.com/xmlrpc.php" />
<style type="text/css">
html {overflow-y: scroll;}

#containerImageOverlay{
   postion:relative;
}
#bgimageImageOverlay{
   position:absolute;
   z-index:1;
}
#textDivImageOverlay{
   position:absolute;
   z-index:2;
   display:none;
}
</style>


<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <link rel="stylesheet" href="http://www.bitesizebschool.com/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
        <script type="text/javascript" src="http://www.bitesizebschool.com/fancybox/jquery.fancybox.pack.js"></script>

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-847715-9']);
  _gaq.push(['_setDomainName', 'bitesizebschool.com']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

<script type='text/javascript'>
$(function(){
$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        padding : 0
    });
    
    $("#textDivImageOverlay").fadeIn("slow");
});
</script>


<link rel="alternate" type="application/rss+xml" title="Bitesize Business School &raquo; The Slow Crawl To Page One Comments Feed" href="http://www.bitesizebschool.com/thebook/the-slow-crawl-to-page-one/feed/" />
<script type='text/javascript' src='http://www.bitesizebschool.com/wp-includes/js/comment-reply.min.js?ver=3.5'></script>
	<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<!-- All in one Favicon 4.1 --><link rel="shortcut icon" href="http://www.bitesizebschool.com/wp-content/uploads/2012/12/anvil4transformed1.png" />
</head>
<body class="landing">
<div id="container">
	<div id="header">
		<div class="header_columns_two">
			<div>
				<div class="text_box">
					<p><img class="alignleft size-full wp-image-43" title="Bitesize Business School Logo" src="http://www.bitesizebschool.com/images/shield.png" alt="Bitesize Business School Logo" width="75" height="75" style="padding-right:20px" /></p>
				</div>
			</div>
			<div>
				<ul id="menu-main" class="menu"><li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="http://www.bitesizebschool.com/">Home</a></li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://www.bitesizebschool.com/about/">About</a></li>
<li id="menu-item-70" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-70"><a href="http://www.bitesizebschool.com/ei/">Entrepreneurial Immersion</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-22"><a href="http://www.bitesizebschool.com/thebook/">The Book</a></li>
</ul>
			</div>
		</div>
		<div class="content">
			<div id="horizontalAlign">
				<div class="text_box">
					 
				</div>
				<div class="social-sprite">
					<ul class="spriteright">
<li class="social-email">
<a target="_blank" href="mailto:info@bitesizebschool.com">Email</a>
</li>
<li class="social-pinterest">
<a target="_blank" href="http://pinterest.com/bitesizebschool/">Pinterest</a>
</li>
<li class="social-twitter">
<a target="_blank" href="http://twitter.com/bitesizebschool">Twitter</a>
</li>
</ul>
				</div>
			</div>
			<div id="post-185" class="hidestickypost top type-post status-publish format-standard category-thebook" itemscope itemtype="http://schema.org/Article">
				<h2 class="headline" itemprop="name"><a href="http://www.bitesizebschool.com/thebook/the-slow-crawl-to-page-one/" rel="bookmark">The Slow Crawl To Page One</a></h2>
				<div class="post_content" itemprop="articleBody">
<div id='containerImageOverlay' style="height:200px;">
<img id='bgimageImageOverlay' src='http://www.bitesizebschool.com/images/thebook/toc.jpg'/></p>
<div id='textDivImageOverlay'>
<p><span style="color:#000000">DAY 35</span></p>
<h2 style="color:#000000">Into The Wild</h2>
</div>
</div>
<div class="social-sprite" style="position:relative;">
<ul class="alignright" style="margin-top:8px;margin-right:10px">
<li class="social-pinterest">
<a href="http://pinterest.com/pin/create/button/?url=http://www.bitesizebschool.com/thebook/the-slow-crawl-to-page-one/&#038;media=http://www.bitesizebschool.com/images/thebook/toc.jpg&#038;description=Initial draft of first 14 chapters" class="pin-it-button" count-layout="horizontal">Pinterest</a>
</li>
</ul>
</div>
<p><span class="dropcap">A</span>draft.  Finally a draft if only one chapter.  And not exactly into the wild but to my editor.  At times it has been a slow crawl.  More from not knowing what happens next than some amount of time passing by.  But things are now starting to fall into place.   Yesterday chapter 1 was sent off for its first editorial. It isn&#8217;t complete but the main content is there. This is ahead of schedule, since the plan was for a draft to be done by December 16.</p>
<p>On December 11, I sent the TOC (table of contents), which includes an outline of chapters, along with sub outlines for each chapter. Basically, I took the earlier book outline and divided each section into chapters. Then stood back (metaphorically speaking) to analyze the content in this new format. After any structural change or presentation of a new viewpoint, it&#8217;s a good idea to let your mind absorb it rather than diving right in. During this small resting period, your mind is subconsciously processing the new information. Generally, this can lead to new ideas.</p>
<p>My editor liked the chapter layout. I&#8217;ve been wondering about a timeline for coming up with a title. At this point, my editor mentioned I should be brainstorming titles and subtitles. I haven&#8217;t yet found one but there are several to stay away from, since a number of books within my genre are using similar titles:<br />
<br/></p>
<ul>
<li>MBA Game Plan</li>
<li>Which MBA Is Right For You?</li>
</ul>
<p>This book isn&#8217;t about acing the MBA application process or getting into a top school. Although there will be some information that falls into those areas.  The book is directed at three general groups:<br />
<br/></p>
<ul>
<li>Those that are entertaining the idea of getting an MBA but just aren&#8217;t sure</li>
<li>Those that know they want an MBA but need a way to shortcut the research process</li>
<li>Entrepreneurs</li>
</ul>
<p>I&#8217;d like to find a title sooner than later. It will certainly make marketing easier.</p>
<p>We talked about book length a little as well. This is still open. I&#8217;m unsure at this point how much content will go into the book. But I have a ballpark figure of where it will land. I&#8217;ll be posting a word progress meter soon, which I plan to start at a target word count of 20,000. This figure will continue to grow.</p>
<p>We also talked about publishing the TOC. There was some initial hesitation on this but then we decided it can&#8217;t hurt anything. Below is the early listing of chapters, which is subject to change:</p>
<p>Chapter 1 &#8211; I’m not sure what I want to do<br />
Chapter 2 &#8211; I know I want an MBA.  Help Me Shortcut The Research<br />
Chapter 3 &#8211; Does An Entrepreneur Need An MBA?<br />
Chapter 4 &#8211; Formats<br />
Chapter 5 &#8211; Cost<br />
Chapter 6 &#8211; Rankings: What’s The Big Deal?<br />
Chapter 7 &#8211; Approach Taken At Various Schools<br />
Chapter 8 &#8211; Electives And Areas of Focus<br />
Chapter 9 &#8211; Entrepreneurship<br />
Chapter 10 &#8211; Alumni Involvement<br />
Chapter 11 &#8211; Tips on Admissions Preparation<br />
Chapter 12 &#8211; Your Profile And Which Options Fit It<br />
Chapter 13 &#8211; Future of the MBA<br />
Chapter 14 &#8211; Interesting Facts About The MBA</p>
<p>In regards to voice (1st, 2nd, 3rd), I will simply speak to the reader as if we&#8217;re having a conversation.  Voice will eventually shake out.  The first chapter will be used as a template for future chapters.  We might later decide to be strict with the voice or continue to let it evolve a little.  With only a chapter 1 draft complete, it is still very early in the process.</p>
<p>It is likely my editor and I will not meet again until after the New Year, at which point we&#8217;ll begin planning our next steps.  Until then, I will be seeking out people to interview and gathering stats.</p>
<p>Questions for you to ponder:<br />
<br/></p>
<ul>
<li>How far along would you go without a title?</li>
<li>Would you have some idea on your book length at this point?</li>
<li>How would you go about estimating it at this early point in the game?</li>
</ul>
<p>Happy Holidays to everyone.</p>
				</div>
				<meta itemprop="datePublished" content="2012-12-21" />
				<meta itemprop="dateModified" content="2012-12-22" />
				<span class="date_on">on</span> <span class="post_date" title="2012-12-21">December 21, 2012</span>
				<p class="comments_intro"><span class="bracket">{</span> <span class="num_comments">0</span> comments&#8230; <a href="#commentform" rel="nofollow">add one</a> <span class="bracket">}</span></p>
				<form id="commentform" method="post" action="http://www.bitesizebschool.com/wp-comments-post.php">
					<p id="comment_form_title">Leave a Comment</p>
					<a rel="nofollow" id="cancel-comment-reply-link" href="/thebook/the-slow-crawl-to-page-one/#respond" style="display:none;">Cancel reply</a>
					<p id="comment_form_name">
						<label for="author">Name <span class="required" title="Required">*</span></label>
						<input type="text" id="author" class="input_text" name="author" value="" tabindex="1" aria-required="true" />
					</p>
					<p id="comment_form_email">
						<label for="email">Email <span class="required" title="Required">*</span></label>
						<input type="text" id="email" class="input_text" name="email" value="" tabindex="2" aria-required="true" />
					</p>
					<p id="comment_form_url">
						<label for="url">Website</label>
						<input type="text" id="url" class="input_text" name="url" value="" tabindex="3" />
					</p>
					<p id="comment_form_comment">
						<label for="comment">Comment</label>
						<textarea name="comment" id="comment" class="input_text" tabindex="4" rows="6"></textarea>
					</p>
					<p id="comment_form_submit">
						<input type="submit" id="submit" class="input_submit" name="submit" tabindex="5" value="Submit" />
					</p>
<p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="6e458463d2" /></p><input type='hidden' name='comment_post_ID' value='185' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
				</form>
			</div>
		</div>
	</div>
	<div id="footer">
		<div class="text_box">
			<p>© 2012 Bitesize Business School. All Rights Reserved.</p>
		</div>
	</div>
</div>
<script type='text/javascript' src='http://s0.wp.com/wp-content/js/devicepx-jetpack.js?ver=201251'></script>

</body>
</html>

Open in new window

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38717560
You should ask a new question at this point.
0
 

Author Comment

by:brettr
ID: 38718941
I've resolved the script errors and now working through the W3C validations errors.  Thanks.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now