Adding This HTML Code Into Information Page Causes Crash

Quote

Post by BrandonBerner » Mon May 23, 2016 1:21 pm

Im running OC 2.0.3.1

I am trying to add this HTML code to my information page called "FAQ".

When I add this code into my information page under Code-View, it freezes opencart.

What code do i need to delete in order for this code to not freeze opencart?

Thanks! :)

Code: Select all

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Collapsible Sets</h1>
  </div>

  <div data-role="main" class="ui-content">
    <div data-role="collapsibleset">
      <div data-role="collapsible">
        <h3>Click me - I'm collapsible!</h3>
        <p>I'm the expanded content.</p>
      </div>
      <div data-role="collapsible">
        <h3>Click me - I'm collapsible!</h3>
        <p>I'm the expanded content.</p>
      </div>
      <div data-role="collapsible">
        <h3>Click me - I'm collapsible!</h3>
        <p>I'm the expanded content.</p>
      </div>
      <div data-role="collapsible">
        <h3>Click me - I'm collapsible!</h3>
        <p>I'm the expanded content.</p>
      </div>
    </div>
  </div>

  <div data-role="footer">
    <h1>Insert Footer Text Here</h1>
  </div>
</div> 

</body>
</html>
BrandonBerner
Active Member
Posts
205
Joined
Sat Dec 15, 2012 4:49 am
Top

Re: Adding This HTML Code Into Information Page Causes Crash

Quote

Post by cyclops12 » Mon May 23, 2016 5:20 pm

I have just copied and pasted that code into Code View in an about page on a test version 2.0.3.1 and all works ok
collapse.JPG

collapse.JPG (49.33 KiB) Viewed 1293 times

Last edited by cyclops12 on Tue May 24, 2016 1:07 am, edited 1 time in total.
cyclops12
Expert Member
Posts
2376
Joined
Sun Sep 27, 2015 1:10 am
Top

Re: Adding This HTML Code Into Information Page Causes Crash

Quote

Post by cyclops12 » Tue May 24, 2016 1:00 am

Aha i see what you mean now....back end completely frozen, can delete code but cant save!!
cyclops12
Expert Member
Posts
2376
Joined
Sun Sep 27, 2015 1:10 am
Top

Re: Adding This HTML Code Into Information Page Causes Crash

Quote

Post by BrandonBerner » Tue May 24, 2016 5:54 am

cyclops12 wrote:Aha i see what you mean now....back end completely frozen, can delete code but cant save!!
Yea, Its very anoying, I managed to save it, but once I do, and I want to add or edit something, My Bold, Underline, Code View and other options disappear and I have to delete the page and try again.

Any solution to adding this feature without it glitching like crazy?
BrandonBerner
Active Member
Posts
205
Joined
Sat Dec 15, 2012 4:49 am
Top

Re: Adding This HTML Code Into Information Page Causes Crash

Quote

Post by villagedefrance » Tue May 24, 2016 7:04 am

I think you should remove the <head> ... content ... </head> completely, and the <body> tag itself, as well as the closing </body> tag itself.

Remember, you can only have 1 <head> and 1 <body> in an html document. Opencart already loads its own (with jQuery) and is already responsive so in theory you don't need to load the jQuery Mobile framework either.
You just need to make sure the content inside your <body> tag is Bootstrap friendly and all should work correctly.

OpenCart custom solutions @ https://villagedefrance.net

User avatar
villagedefrance
Active Member
Posts
405
Joined
Wed Oct 13, 2010 10:35 pm
Location - UK
Top

Re: Adding This HTML Code Into Information Page Causes Crash

Quote

Post by BrandonBerner » Tue May 24, 2016 9:32 am

villagedefrance wrote:I think you should remove the <head> ... content ... </head> completely, and the <body> tag itself, as well as the closing </body> tag itself.

Remember, you can only have 1 <head> and 1 <body> in an html document. Opencart already loads its own (with jQuery) and is already responsive so in theory you don't need to load the jQuery Mobile framework either.
You just need to make sure the content inside your <body> tag is Bootstrap friendly and all should work correctly.
Thanks for your help.

I am still not able to get it to work correctly.

When I delete the <header> information this also deletes the style sheet and functionality of collapsing.

Any other advice?

Thanks :)
BrandonBerner
Active Member
Posts
205
Joined
Sat Dec 15, 2012 4:49 am
Top

Re: Adding This HTML Code Into Information Page Causes Crash

Quote

Post by cyclops12 » Thu May 26, 2016 3:27 am

What about a bootstrap collapse, then you dont have to link to external scripts and css sheets...

I tried this and works ok

Code: Select all

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Click me - I'm collapsible!
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
    <h4> Content for question 1</h4>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Click me - I'm collapsible!
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <h4>Content for question 2</h4>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Click me - I'm collapsible!
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
     <h4> Content for question 3</h4>
    </div>
  </div>
</div>
collapse1.JPG

collapse1.JPG (34.54 KiB) Viewed 1243 times

Just amend the text and css to suit

Got it from Here
cyclops12
Expert Member
Posts
2376
Joined
Sun Sep 27, 2015 1:10 am
Top
Post Reply
Return to “General Support”
Who is online

Users browsing this forum: No registered users and 418 guests