Adobe Community: onload popped up add

Currently Being Moderated

1. Nancy O.,

Jun 18, 2012 4:16 PM in reply to mbentz

Report

You could do this with FancyBox (a jQuery plugin).

http://fancybox.net/blog

Then style your Fancybox window with CSS opacity.

http://www.w3schools.com/css/css_image_transparency.asp

Nancy O.

Alt-Web Design & Publishing

Web | Graphics | Print | Media Specialists

http://alt-web.com/

|

Mark as:

Currently Being Moderated

2. mbentz,

Jun 19, 2012 9:33 AM in reply to Nancy O.

Report

Any idea about the code in order to have the fancy box open on page load?

|

Mark as:

Currently Being Moderated

3. Nancy O.,

Jun 19, 2012 10:24 AM in reply to mbentz

Report

Tip #5 in the link I posted suggests using a manual call like this one:

jQuery(document).ready(function() {

$.fancybox(

'<h2>Hi!</h2><p>Your custom message here...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis et neque</p>',

{

'autoDimensions' : false,

'width' : 400,

'height' : 'auto',

'transitionIn' : 'elastic',

'transitionOut' : 'elastic',

'overlayOpacity' : 0.8,

'speedIn' : 600,

'speedOut' : 400,

'overlayColor' : '#FFF'

}

);

});

</script>

Nancy O.

|

Mark as:

Currently Being Moderated

4. mbentz,

Jun 19, 2012 10:27 AM in reply to Nancy O.

Report

Tanks Nancy....i noticed on the link you posted that #6 was the code so that it would be an onload box so when the page opens the fancy box would too. to be honest i am totally new to java script and i am not sure where to place the code within my webpage?...thoughts?

|

Mark as:

Currently Being Moderated

5. Nancy O.,

Jun 19, 2012 11:18 AM in reply to mbentz

Report

Download Fancybox and extract it to your local site folder.

This link tells how to use it.

http://fancybox.net/howto

These links go between the <head> and </head> tags in your HTML document

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

The function code to invoke fancybox on page load goes above the end of </body> tag.

jQuery(document).ready(function() {

$.fancybox(

'<h2>Hi!</h2><p>Your custom message here...</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis et neque</p>',

{

'autoDimensions' : false,

'width' : 400,

'height' : 'auto',

'transitionIn' : 'elastic',

'transitionOut' : 'elastic',

'overlayOpacity' : 0.8,

'speedIn' : 600,

'speedOut' : 400,

'overlayColor' : '#FFF'

}

);

});

</script>

Nancy O.

|

Mark as:

Currently Being Moderated

6. mbentz,

Jun 19, 2012 1:01 PM in reply to Nancy O.

Report

I understand If youd ont want to help me but it doesn't seem to be working. After i extract it I now have it chillin in a site folder but do I need to apply the documents within somehow?..here is the code I am working with:

<?php

session_start();

if ($_SESSION['authorized'] != true) {

header("Location: login.html");

exit;

}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<!--

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

<? php

Include 'path/to/googletracking.html';

?></head>

<!--

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

<h1><a href="index.html" title="Zenger | Folkman">Zenger | Folkman</a></h1>

</div>

<p><strong><a href="How-to-be-exceptional-book.html">Pre-order the New Book Today!</a></strong> Drive leadership success by magnifying your strengths.<em></em></p>

</div>

</div>

</div>

<li><a href="about.html" class="MenuBarItemSubmenu">About us</a>

<ul>

<li><a href="who-is-zenger-folkman.html">Who is Zenger Folkman?</a></li>

<li><a href="our-history.html">Our History</a></li>

<li><a href="what-sets-us-apart.html">What Sets us Apart</a></li>

<li><a href="business-issues.html" class="MenuBarItemSubmenu">Business Issues</a>

<ul>

<li><a href="boost.html">Employee Productivity</a></li>

<li><a href="motivate-others.html">Inspiring Leadership</a></li>

<li><a href="leadership-matters.html">Leadership Effectiveness</a></li>

<li><a href="extraordinary-leaders-double-profits.html">Profitability</a></l i>

</ul>

<li><a href="our-clients.html">Client List</a></li>

<li><a href="testimonials.html">Testimonials</a></li>

<li><a href="pressroom.html">Press Room</a></li>

<li><a href="international-partners.html">International Partners</a></li>

</ul>

</li>

<li><a href="programs.html" class="MenuBarItemSubmenu">Programs & Services</a>

<ul>

<li> <a href="#" class="MenuBarItemSubmenu">Development Programs</a>

<ul>

<li><a href="extraordinary-leader.html">The Extraordinary Leader</a></li>

<li><a href="inspiring-leader.html">The Inspiring Leader</a></li>

<li><a href="extraordinary-performer.html">The Extraordinary Performer</a></li>

<li><a href="extraordinary-coach.html">The Extraordinary Coach</a></li>

</ul>

</li>

<li><a href="#" class="MenuBarItemSubmenu">Follow-up Programs</a>

<ul>

<li><a href="actionplan-mapper.html">ActionPlan Mapper</a></li>

<li><a href="extraord-leader-follow-up.html">Advancing the Extraordinary Leader</a></li>

</ul>

</li>

<li><a href="#" class="MenuBarItemSubmenu">Assessment & Measurement</a>

<ul>

<li><a href="360-degree-assessments.html">360-Degree Assessments</a></li>

<li><a href="organizational-employee-surveys.html">Organizational Employee Surveys</a></li>

<li><a href="team-surveys.html">Team Surveys</a></li>

<li><a href="customization.html">Customized Surveys</a></li>

</ul>

</li>

<li><a href="#" class="MenuBarItemSubmenu">Services</a>

<ul>

<li><a href="facilitation.html">Facilitation</a></li>

<li><a href="facilitation-certification.html">Facilitator Certification</a></li>

<li><a href="independent-coaching-channel.html">Independent Coaching Channel</a></li>

<li><a href="coaching-extraordinary-leader.html">Coaching The Extraordinary Leader</a></li>

<li><a href="executive-coaching.html">Executive Coaching</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="research-thought-leadership.html" class="MenuBarItemSubmenu">Research & Thought Leadership</a>

<ul>

<li><a href="books.html" class="MenuBarItemSubmenu">Books</a>

<ul>

<li><a href="How-to-be-exceptional-book.html">How To Be Exceptional</a></li>

<li><a href="extraordinary-leader-book.html">The Extraordinary Leader</a></li>

<li><a href="inspiring-leader-book.html">The Inspiring Leader</a></li>

<li><a href="extraordinary-coach-book.html">The Extraordinary Coach</a></li>

<li><a href="additional-books.html">Additional Books</a></li>

</ul>

</li>

<li><a href="http://www.zengerfolkman.com/speakers-center.html">Speaker's Center</a></li>

<li><a href="http://www.zengerfolkman.com/webinars.html">Webinars</a></li>

<li><a href="featured-articles.html">Featured Articles</a></li>

<li><a href="case-studies.html">Featured Case Study</a></li>

<li><a href="featured-videos.html">Featured Videos</a></li>

<li><a href="newsletter-sign-up.html">Newsletter Sign Up</a></li>

<li><a href="podcast.html">Podcasts</a></li>

</ul>

</li>

<li class="bar"><a href="events.html" class="MenuBarItemSubmenu">Events</a>

<li><a href="contact.html" class="MenuBarItemSubmenu">Contact Us</a></li>

<li class="last"><a href="login.html">Leadership Resource Center</a></li>

</ul>

</div>

<div class="col1"><!--/box

<ul>

<h4><a href="#">THE INSPIRING LEADER</a></h4>

<p>Now available for pre-order</p>

</li>

<li>

<h5>WEBINAR</h5>

<h4><a href="#">Passive to Passionate:</a></h4>

<p>The Impact of Inspirational Leadership, Part Two<br />

</li>

<li>

<h5>SPEAKING ENGAGEMENT</h5>

<h4><a href="#">2009 ASTD CONFERENCE</a></h4>

<p>Dr. Zenger and Dr. Folkman will speak.</p>

</li>

<h4><a href="#">LEADERSHIP EXCELLENCE</a></h4>

<p>Dr. Zenger addresses leading without a title.</p>

</li>

</ul>

</div> -->

<tr>

<h2>WELCOME TO THE LEADERSHIP RESOURCE CENTER</h2>

<p><strong>Congratulations! your name will be entered into a drawing to win a <br />

free signed copy of Zenger Folkman's newest book <em>How To Be Exceptional</em></strong></p>

<p>The Leadership Resource Center is one of the most in-depth, dynamic, and multi-faceted online resource centers in the industry. Packed with detailed and thorough information--all delivered with data driven, research-based ideas--the Leadership Resource Center is designed to help leaders everywhere stay on the path to becoming extraordinary.</p>

<p>To help you get started, we've divided up the resources by type and research area. For example, if you want to watch Jack talk about building strengths, simply click 'Videos' and scroll down to "The Extraordinary Leader" section. Or, if you want to find resources that are based on our best-selling works <em>The Inspiring Leader</em> or <em>The Extraordinary Leader</em> simply click a book image to your right and you'll discover a host of resources to further your learning. Either way, you're sure to find something that will help you become an extraordinary leader.</p>

</div> </td>

<h3 align="center">ADDITIONAL RESOURCES</h3>

<div class="btn-click fl"> <a href="til.php">Click here for resources based on "The Inspiring Leader"</a></div>

<div class="btn-click fl"> <a href="tel.php">Click here for resources based on "The Extraordinary Leader"</a></div>

<div class="btn-click fl"><a href="tec.php">Click here for resources related to “The Extraordinary Coach”</a></div>

</div></td>

</tr>

<tr>

<h3>Videos</h3>

</div></td>

<h3>ARTICLES/WHITE PAPERS</h3>

</div></td>

</tr>

<tr>

<h3>PODCASTS</h3>

</div></td>

<h3>WORKSHEETS/TOOLS</h3>

</div></td>

</tr>

<tr>

<h3>CASE STUDIES</h3>

</div></td>

<h3>Webinar: steve jobs</h3>

</div></td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<br />

</div>

</div>

<div class="c1"> Zenger Folkman © 2011 <a href="index.html">Home</a> | <a href="contact.html">Contact Us</a> | <a href="privacy-policy.html">Privacy Policy</a> | <a href="terms-conditions.html">Terms and Conditions</a><br />

1550 N. Technology Way., Bldg. D | Orem, UT 84097 | Ph: 801-705-9375 | Fax: 801-705-9376 </div>

</div>

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-6409787-2']);

_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>

</div>

<!--

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

//-->

</script>

</body>

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script>

try{

var pageTracker = _gat._getTracker("UA-6409787-1");

pageTracker._trackPageview();

} catch(err) {}

</script>

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script>

try {

var pageTracker = _gat._getTracker("UA-6409787-1");

pageTracker._trackPageview();

} catch(err) {}</script>

</html>

|

Mark as:

Currently Being Moderated

7. Nancy O.,

Jun 19, 2012 1:28 PM in reply to mbentz

Report

File > New > blank HTML page.

Follow the instructions I gave you.

Upload your test page and Fancybox folder to your server.

If Fancybox box doesn't invoke on page load, come back & post the URL to your test page so we can look at it.

Nancy O.

|

Mark as:

Currently Being Moderated

8. mbentz,

Jun 19, 2012 2:00 PM in reply to Nancy O.

Report

still no go: http://www.zengerfolkman.com/FancyboxTest.html

|

Mark as:

Currently Being Moderated

9. Nancy O.,

Jun 19, 2012 2:19 PM in reply to mbentz

Report

No fancybox folder found on server.

http://www.zengerfolkman.com/fancybox/

You need to upload the fancybox folder to your server for this to work.

When you do that, let me know and we'll check the paths.

Nancy O.

|

Mark as:

Currently Being Moderated

10. John Waller,

Jun 19, 2012 2:22 PM in reply to mbentz

Report

That code points to http://www.zengerfolkman.com/fancybox/jquery.fancybox-1.3.4.pack.js = File Not Found

You need to upload the Fancybox folder to the server. That's where the scripts live which drive Fancybox.

If the server cannot find the folder containing the scripts then the browser ignores the code in your page and nothing happens.

|

Mark as:

Currently Being Moderated

11. mbentz,

Jun 19, 2012 2:34 PM in reply to Nancy O.

Report

It Worked! : http://www.zfco.com/FancyboxTest.html next question how can I make it so that this little fancy box will open over the page that i am working on? the code to that page is what I posted before.?

|

Mark as:

Currently Being Moderated

12. Nancy O.,

Jun 19, 2012 2:42 PM in reply to mbentz

Report

Hurray! Now do the same thing with your other document.

Put scripts and CSS links inside the <head> tags after <title>.

Put the function code in the <body> right above the </body> tag.

Nancy O.

|

Mark as:

Dreamweaver

onload popped up add

Jun 18, 2012 4:02 PM

More Like This

Bookmarked By (0)

Answers + Points = Status