Quantcast

Can someone tell me what is wrong with this - it doesn't work at all...

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Can someone tell me what is wrong with this - it doesn't work at all...

davidpeart
This post was updated on .
I'm trying to launch a Shadowbox using a Shadowbox.open function. I have read all the posts on this, tried all the code therein, and nothing works - when I click on the link, nothing happens. Here is the code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">	<head>

	<link rel="stylesheet" type="text/css" href="/shadowbox/shadowbox.css">
<script type="text/javascript" src="/shadowbox/shadowbox.js"></script>
<script language="JavaScript" type="text/javascript">
Shadowbox.init({
    handleOversize:     "drag",
    displayNav:         false,
    handleUnsupported:  "remove",
    autoplayMovies:     false,
    players:    ["img","iframe","html"]
});
</script>
<script language="JavaScript" type="text/javascript">
$('#cl').click(function(){
Shadowbox.open({
  content: 'http://www.davidpeart.com',
  player: 'iframe',
  width: '580',
  height: '400'
});
}
</script>

<style type="text/css">
	#cl {
		color: #561A8B;
  cursor: pointer;
	}

	</style>
		<title> Video</title>

	</head>
	<body style="margin:0px;">
	
<span id="cl">Click Here Span</span> 
	</body>
</html>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can someone tell me what is wrong with this - it doesn't work at all...

arttronics
It looks like you missed the post about  pasting your markup on the forum correctly.

To be sure, provide code that's readable and is not formatted incorrectly when just pasting it as text. When it's pasted correctly the HTML markup is then preserved.

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can someone tell me what is wrong with this - it doesn't work at all...

davidpeart
Apologies - all fixed now!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can someone tell me what is wrong with this - it doesn't work at all...

arttronics
In reply to this post by davidpeart
In your Shadowbox.init settings, the use of players is no longer valid with the latest version of Shadowbox.

First, ensure your using the latest version which is v3.0.3. Open your shadowbox.js file and look at the beginning section for version info. Also, your using jQuery which means you need to have jQuery Adapter for Shadowbox as well as installing jQuery framework since that is missing from your markup.

After you delete the reference to players, remove the last comma to the preceding Shadowbox autoplayMovies Option you have listed, as any last Option should not end with a comma.

Your DOCTYPE is also missing it's html counterpart tag which needs to be provided.

Your HTML has the title tag listed in the wrong place and also there is no primary meta tag indicating the character set your using. It's always best to start with a HTML template and work from there so important elements and structure is retained.

The link tag for shadowbox.css is missing a self-closing tag.

The use of language="JavaScript" is deprecated so that should be removed wherever listed.

Your jQuery click event function is missing a closing parenthesis and semicolon so that it functions correctly. Also, it's not going to work unless you have it in a jQuery Document Ready function.

Changing the SPAN tag to a DIV tag which then t can be configured for inline or block-inline operation is the right way to proceed with a click handler since the span tag in used in an incorrect manner. That said, since your just applying styling you should reserve an ID for when it's needed and use a Class Name instead.

Your Shadowbox displayNav Option prevents users from accessing the Close Button located on Shadowbox.

Working with sloppy markup will quickly lead to unwanted errors, make your markup look nice to begin with.

Once the above has been taken care of, your markup should look like this and function without issue:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
  <title>Video</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

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

  <link rel="stylesheet" type="text/css" href="shadowbox.css" />
  <script type="text/javascript" src="shadowbox.js"></script>

  <style type="text/css">

      body{
       margin:0px;
      }

      .cl{
       cursor: pointer;
       display: inline-block;
       text-decoration:underline;
       color: #561A8B;
      }

  </style>

  <script type="text/javascript">

      Shadowbox.init({
          handleOversize:     "drag",
          //displayNav:       false,
          handleUnsupported:  "remove",
          autoplayMovies:     false
      });

  </script>

  <script type="text/javascript">

      $(document).ready(function(){

          $('.cl').click(function(){

              Shadowbox.open({
                content: 'http://www.davidpeart.com',
                player: 'iframe',
                width: '580',
                height: '400'
              });

          });

      });

 </script>
</head>
<body>

<div class="cl">Click Here</div>

</body>
</html>

For ready to use Shadowbox Template examples, see this LINK.

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can someone tell me what is wrong with this - it doesn't work at all...

This doesn't work at all.
In reply to this post by davidpeart
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
        <head>
        <title> title </title>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>                <link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css" />
                <script type="text/javascript" src="shadowbox/shadowbox.js"></script>               
                <script type="text/javascript"> Shadowbox.init({ handleOversize: "drag", //displayNav: false, handleUnsupported: "remove", autoplayMovies: false }); </script> 
  <script type="text/javascript"> $(document).ready(function(){ $('.cl').click(function(){ Shadowbox.open({ content: 'http://www.davidpeart.com', player: 'iframe', width: '580', height: '400' }); }); }); </script>        </head>
       
        <body>
               
        </body>
</html>
Loading...