CODEWITHSUNDEEP
javascriptjquery
Jshee
Jshee

Reputation: 2686

Why isn't this jquery window working?

I'm trying to just get this to run: http://fstoke.me/jquery/window/ (Example 2 Specifically)

My code:

<html>

    <head>
    <title>Example of Windows</title>
    <link rel="stylesheet" type="text/css" href="window.css" />
    <script type="text/javascript" src="jquery.js"> </script>
    <script type="text/javascript" src="window.js"> </script>
    </head>

    <body>
    <script type='text/javascript'>
    $.window({
   showModal: true,
   modalOpacity: 0.5,
   icon: "http://www.fstoke.me/favicon.ico",
   title: "Professional JavaScript for Web Developers",
   content: $("#window_block2").html(), // load window_block2 html content
   footerContent: "<img style="vertical-align:middle;" src="img/star.png"> This is a nice plugin :^)";
});
    </script>


    <div id="example2" class='example_block'> 
            <h3>Demo</h3> 
            <div class='demo'> 
                <div id='window_block2' style='display:none;'> 
                    <div style='padding:10px;'> 
                        <div style='font-size:24px; font-weight:bold; margin-bottom:10px; color:#44aaff;'>Introduction</div> 
                        <img style='border:0; float:left; margin:10px;' src='http://lh5.ggpht.com/_W-5oCUN3-sQ/TNUfmAY_mFI/AAAAAAAADwc/Dav33v1iBlY/s144/Professional%20JavaScript%20for%20Web%20Developers.jpg'/> 
                        <div> 
                            If you want to achieve JavaScript's full potential, it is critical to understand its nature, history, and limitations. 
                            This book sets the stage by covering JavaScript from its very beginning to the present-day incarnations that include 
                            support for the DOM and Ajax. It also shows you how to extend this powerful language to meet specific needs and create
                            seamless client-server communication without intermediaries such as Java or hidden frames.
                        </div> 
                    </div> 
                </div> 
                <input type='button' value='Click Here to Create Window' onclick='createWindowWithHtml();'/> 
            </div> 
        </div> 

    </body>

</html>

Error: When I click the button, it does nothing! Anyone see any problems here? I feel like it might have to do with the embedded script.

Page now loads... just looks like this as if its firing the event when you onload, instead of when you click the buttton is something out of order here? img

Anyone?!

Upvotes: 0

Views: 324

Answers (1)

bdparrish
bdparrish

Reputation: 2764

if that text is exactly how you have then you probably can't do this ...

"<img style="vertical-align:middle;" src="img/star.png"> This is a nice plugin :^)";

you more than likely need this ...

footerContent: "<img style='vertical-align:middle;' src='img/star.png'> This is a nice plugin :^)"

you don't need the semi-colon at the end...or shouldn't at least

EDIT:

function createWindowWithHtml() {
    $.window({
        showModal: true,
        modalOpacity: 0.5,
        icon: "http://www.fstoke.me/favicon.ico",
        title: "Professional JavaScript for Web Developers",
        content: $("#window_block2").html(), // load window_block2 html content
        footerContent: "<img style='vertical-align:middle;' src='img/star.png'> This is a nice plugin :^)"
    });
}

Upvotes: 2

Related Questions