Find your content:

Search form

You are here

Issues moving a page into VisualForce

 
Share

have a page that was coded outside of force.com and I have to move it into a Visualforce page.

Then, just for kicks, I took the source of the page out of force.com (where it doesn't work) and created a new html page on my desktop. It works again... because these two lines are not loading:

<script src="/faces/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript?rel=1395179288000" type="text/javascript"></script><script src="/static/111213/js/perf/stub.js"></script></head><body><span id="j_id0:Scrolling"><span id="j_id0:Scrolling.start" style="display: none"></span><script type="text/javascript">
window.document.getElementById('j_id0:Scrolling.start').onstart=function(){startScrolling();;};
</script>

They appear to be causing a conflict - but I don't understand enough to be able to say what it is.

VFPage

<apex:page showHeader="false" showChat="false" sidebar="false" standardStylesheets="false" cache="false" docType="html-5.0" >
    <apex:actionStatus onstart="startScrolling();" id="Scrolling"/>
    <head>
        <title>Learning Portal</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <apex:stylesheet value="{!URLFOR($Resource.PartnerLearningPortal,'PartnerLearningPortal/css/demo.css')}" />
        <apex:stylesheet value="{!URLFOR($Resource.PartnerLearningPortal,'PartnerLearningPortal/css/style.css')}" />
        <apex:stylesheet value="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Playfair+Display:400italic)" />
        <!-- <noscript>
            <apex:stylesheet value="{!URLFOR($Resource.PartnerLearningPortal,'PartnerLearningPortal/css/noscript.css')}"/>
        </noscript>-->

        <!--apex:includeScript value="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" /-->
        <apex:includeScript value="{!URLFOR($Resource.PartnerLearningPortal,'PartnerLearningPortal/js/jquery.min.js')}"/>
        <apex:includeScript value="{!URLFOR($Resource.PartnerLearningPortal,'PartnerLearningPortal/js/jquery.eislideshow.js')}"/>
        <apex:includeScript value="{!URLFOR($Resource.PartnerLearningPortal,'PartnerLearningPortal/js/jquery.easing.1.3.js')}"/>
        <apex:includeScript loadOnReady="True" value="
            $(function() {
                $('#ei-slider').eislideshow({
                    animation           : 'left',
                    autoplay            : true,
                    slideshow_interval  : 9000,
                    titlesFactor        : 0
                });
            });"/>
   </head>
    <body>
        <div class="container">
            <div class="header">
              <h2><span class="right">
                <a href="" target="_self">contact support@xxxx.com</a></span>
              </h2>
              <div class="clr"></div>
            </div>
            <div class="headerdpic">
            <apex:image url="{!URLFOR($Resource.PartnerLearningPortal, 'PartnerLearningPortal/images/PartnerPortal_Homepage_Header.png')}" width="100%" height="auto"/>
            </div>
            <div class="wrapper">
                <div  class="ei-slider">
                    <ul class="ei-slider-large">
                        <li>
                            <apex:image url="{!URLFOR($Resource.PartnerLearningPortal, 'PartnerLearningPortal/images/large/6.jpg')}" alt="image06"/>
                            <div class="ei-title">
                                <h2>Passionate</h2>
                                <h3>Seeker</h3>
                            </div>
                        </li>
                        <li>
                            <apex:image url="{!URLFOR($Resource.PartnerLearningPortal, 'PartnerLearningPortal/images/large/1.jpg')}" alt="image01" />
                            <div class="ei-title">
                                <h2>Creative</h2>
                                <h3>Duet</h3>
                            </div>
                        </li>
                        <li>
                            <apex:image url="{!URLFOR($Resource.PartnerLearningPortal, 'PartnerLearningPortal/images/large/2.jpg')}" alt="image02" />
                            <div class="ei-title">
                                <h2>Friendly</h2>
                                <h3>Devil</h3>
                            </div>
                        </li>
                        <li>
                            <apex:image url="{!URLFOR($Resource.PartnerLearningPortal, 'PartnerLearningPortal/images/large/3.jpg')}" alt="image03"/>
                            <div class="ei-title">
                                <h2>Tranquilent</h2>
                                <h3>Compatriot</h3>
                            </div>
                        </li>
                        <li>
                            <apex:image url="{!URLFOR($Resource.PartnerLearningPortal, 'PartnerLearningPortal/images/large/4.jpg')}" alt="image04"/>
                            <div class="ei-title">
                                <h2>Insecure</h2>
                                <h3>Hussler</h3>
                            </div>
                        </li>
                        <li>
                            <apex:image url="{!URLFOR($Resource.PartnerLearningPortal, 'PartnerLearningPortal/images/large/5.jpg')}" alt="image05"/>
                            <div class="ei-title">
                                <h2>Loving</h2>
                                <h3>Rebel</h3>
                            </div>
                        </li>
                        <li>
                            <apex:image url="{!URLFOR($Resource.PartnerLearningPortal, 'PartnerLearningPortal/images/large/7.jpg')}" alt="image07"/>
                            <div class="ei-title">
                                <h2>Crazy</h2>
                                <h3>Friend</h3>
                            </div>
                        </li>
                    </ul> <!-- ei-slider-large -->
                    <ul class="ei-slider-thumbs" >
                        <li class="ei-slider-element">Current</li>
                        <li><a href="#"></a><apex:image url="{!URLFOR($Resource.PartnerLearningPortal, 'PartnerLearningPortal/images/thumbs/6.jpg')}" alt="thumb06" /></li>
                        <li><a href="#"></a><apex:image url="{!URLFOR($Resource.PartnerLearningPortal, 'PartnerLearningPortal/images/thumbs/1.jpg')}" alt="thumb01" /></li>
                        <li><a href="#"></a><apex:image url="{!URLFOR($Resource.PartnerLearningPortal, 'PartnerLearningPortal/images/thumbs/2.jpg')}" alt="thumb02" /></li>
                        <li><a href="#"></a><apex:image url="{!URLFOR($Resource.PartnerLearningPortal, 'PartnerLearningPortal/images/thumbs/3.jpg')}" alt="thumb03" /></li>
                        <li><a href="#"></a><apex:image url="{!URLFOR($Resource.PartnerLearningPortal, 'PartnerLearningPortal/images/thumbs/4.jpg')}" alt="thumb04" /></li>
                        <li><a href="#"></a><apex:image url="{!URLFOR($Resource.PartnerLearningPortal, 'PartnerLearningPortal/images/thumbs/5.jpg')}" alt="thumb05" /></li>
                        <li><a href="#"></a><apex:image url="{!URLFOR($Resource.PartnerLearningPortal, 'PartnerLearningPortal/images/thumbs/7.jpg')}" alt="thumb07" /></li>
                    </ul><!-- ei-slider-thumbs -->
                </div><!-- ei-slider -->
                <div style="clear:both;"></div>
                <div style="float:left;">
                    <div style="float:left; width:55%;"><apex:image url="{!URLFOR($Resource.PartnerLearningPortal, 'PartnerLearningPortal/images/PartnerPortal_Homepage_ProdEd.png')}" width="100%" height="auto"/>
                    </div>
                    <div style="float:left; width:35%; padding-left:20px;">
                    <h3><b>Online Learning</b></h3><p>Learn just-in-time and at your own pace.  Beginner to advanced topics are available and accompanied by supporting resources, enabling you 
                    to continuously learn and progress to advanced concepts and techniques.</p><br/>
                    <h3><b>Instructor-Led</b></h3><p>Expect a highly interactive, hands-on experience in our classes, and a focus on practical knowledge and skills transfer. 
                    <a href="http://www.com/en/resources/events-webinars/" target="_blank">View Events</a> to attend an upcoming class at a location or browse our Catalog for our 
                    full list of offerings.</p><br/>
                    <h3><b>Communities</b></h3><p><a href="http://www.com/en/communities/" target="_blank">Visit Communities</a> to find the experts and information you need to 
                    collaborate, support your business, and solve common challenges.</p>
                    </div>
                </div>
                <div style="clear:both;"></div>
            </div><!-- wrapper -->
        </div>
    </body>

</apex:page>

EDIT

So I changed those two lines to point to the actual files, one at a time to see which causes the error but neither does - which is confusing.

<script src="https://cs30.visual.force.com/faces/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript?rel=1395179288000" type="text/javascript"></script><script src="https://cs30.visual.force.com/static/111213/js/perf/stub.js"></script></head><body><span id="j_id0:Scrolling"><span id="j_id0:Scrolling.start" style="display: none"></span><script type="text/javascript">

window.document.getElementById('j_id0:Scrolling.start').onstart=function(){startScrolling();;};


Attribution to: SeanGorman

Possible Suggestion/Solution #1

Since you are specifying the body try changing this line to:

<apex:page showHeader="false" showChat="false" sidebar="false" standardStylesheets="false" cache="false" docType="html-5.0 applyHtmlTag="false">

Attribution to: PepeFloyd
This content is remixed from stackoverflow or stackexchange. Please visit https://salesforce.stackexchange.com/questions/30661

My Block Status

My Block Content