Login/Register
embedding jquery.prettyPhoto causes script to show on page
Asked Answered
Solved javascriptjqueryhtmlminifyprettyphoto
R

3

6

When I move:

<script src="js/jquery.prettyPhoto.js"></script>

To:

<script type="text/javascript">
   ...
</script>

Then the script starts showing on the page from the bold part onwards:

style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true">'},s);var o=this,u=false,a,f,l,c,h,p,d=e(window).height(),v=e...

The script is attributed with this information:

Class: prettyPhoto
Use: Lightbox clone for jQuery
Author: Stephane Caron (http://www.no-margin-for-errors.com)
Version: 3.1.5

How can I move the script from a .js file to the page correctly?

Rik answered 26/6, 2016 at 19:51 Comment(0)
H
3

When the content of a javascript contains the closing script tag </script> it can cause the browser's parser to interpret wrongly the script block code.

The code here:

<script type="text/javascript">
    alert("</script>");
</script>

Will not work and the output you will see in the browser will be

");

As if the browser read the script block as

**script start tag ->** <script type="text/javascript">
    alert("</script> **<- script end tag**

The Solution

There are two known solutions for having the <script>...</script> string inside a script block:

  1. Break the string into two separate string and concatenate them using + 

<script type="text/javascript">
    alert("<scr"+"ipt>...</scr"+ "ipt>");
</script>
  1. Wrap the whole script code block with comment block code:

    <script type="text/javascript">
        <!--
        alert("<script></script>");
        -->
    </script>

Note that the second example will NOT WORK if you only have the closing-tag, since the browser will tag that closing string as the tag that was supposed to close your original opening <scrip> tag.

This example will not work:

    <script type="text/javascript">
        <!--
        alert("</script>");
        -->
    </script>

Specifically for your code - this is the jsfiddle that fixes it.

Hoke answered 16/7, 2016 at 22:40 Comment(0)
D
2

No errors. https://jsfiddle.net/rL9h958e/1/

The script had a plethora of = = problems as well as bad html.

Social_Tools looks fishy in all cases, 

social_tools:'<div class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a></div>' + 
            '<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></div>' +
                     '<div class="facebook">
Deduction answered 14/7, 2016 at 21:53 Comment(0)
A
1

is your page html4 or html5? 

<script type="text/javascript" src="javascript.js"></script>

html5 you don't need to use type= 

<script src="javascript.js"></script>
Anadiplosis answered 26/6, 2016 at 21:29 Comment(6)
Thanks, I changed it but the code is still appearing on the page – Rik
can you link to the page? – Anadiplosis
you have the <script src= and the javescript embedded in the html, it's the same code, either link to <script src=" or embed it – Anadiplosis
I commented the link out. It's just there for reference. The embedded version is causing an issue though as you can see. – Rik
use a validator, there are problems in your code validator.w3.org/nu also in your code do you have '<!DOCTYPE html>' as the top line or just the '<html>' that I see in the jsfiddle? – Anadiplosis
this one give you an clean up with html tidy, so you can use that too validator.w3.org but save your orignal file also to refer to – Anadiplosis

© 2022 - 2024 — McMap. All rights reserved.