Raw html instead of iframe embed

[Christina]

Hi

I am searching for alternatives to include html content within cornerstone as I read you could add java separate and it wouldn’t effect site globally. BUT what specifically? Here is the page live:https://www.moreparsmorefun.com/wp-content/uploads/widgets/P1/interactive-driver-angled/main.html

Not clear what to not include.

2019-01-05_1634

Here is my attempt: https://www.moreparsmorefun.com/aa-html/
Placed this in raw content area:

This in java area:
type=“text/javascript” src=“settings.js”
type=“text/javascript” src=“bootloader.js”
type=“text/javascript” src=“bootstrap.js”
type=“text/javascript” src=“bootstrap.min.js”
type=“text/javascript”

ack.client.load([
‘jquery.min.js’,
‘jquery-ui.min.js’,
‘jquery.ui.touch-punch.min.js’,
‘widget.css’,
‘widget.js’],
function() { ack.widget.init(); });

and this in CSS area:
body, html {
margin:0 auto !important;
}
.info .text {
font-size: 18px !important;
}
.timeline-display .timeline-items .item .info{
top:0 !important;
padding:0 !important;
}
@media screen and (max-width: 768px) {
#ack-widget, #ack-rc-backdrop {
position: fixed !important;
}
#ack-toolbar-title{ position: fixed !important; }
body{
background-color:#000 !important;
}

	  }
	  @media screen and (max-width: 480px) {
			.timeline-display .timeline-items .item .image{
				height:500px !important;
			}
	  }
	  @media screen and (max-width: 700px) {
			.timeline-display .timeline-items .item
			{
				position: static !important;
			}
	  }
	  @media screen and (min-width: 701px) {
			.timeline-display .timeline-items .item
			{
				position: absolute !important;
			}
	  }

Not working so not adding it correctly.
Thanks for help
Christina

[ruenel]

Hello Christina,

Thanks for writing in!

Your html code in the raw content element is valid and correct. The javascript on the other hand isn’t.
You’ll need to update it and use this:

</script><script type="text/javascript" src="absolute/file/path/__settings__.js"></script>
<script type="text/javascript" src="absolute/file/path/bootloader.js"></script>
<script type="text/javascript" src="absolute/file/path/bootstrap.js"></script>
<script type="text/javascript" src="absolute/file/path/bootstrap.min.js"></script>
<script type="text/javascript"

ack.client.load([
      'jquery.min.js',
      'jquery-ui.min.js',
      'jquery.ui.touch-punch.min.js',
      'widget.css',
      'widget.js'],
      function() { ack.widget.init(); });

Please take note of the absolute/file/path/ to make sure that your javascript is loaded on the page.

Hope this helps.

[Christina]

Thank you!

I gave it a try with absolute path but still blank. I’d greatly appreciate any additional insight - this would be a savior getting this to work. Absolute path you mean the full http: path correct?

Christina

[Christina]

Where would this go? https://www.screencast.com/t/dAtNj7h1FqP

[ruenel]

Hello Christina,

Sorry there was a missing closing tag in the given code. It should be this:

</script><script type="text/javascript" src="absolute/file/path/__settings__.js"></script>
<script type="text/javascript" src="absolute/file/path/bootloader.js"></script>
<script type="text/javascript" src="absolute/file/path/bootstrap.js"></script>
<script type="text/javascript" src="absolute/file/path/bootstrap.min.js"></script>
<script type="text/javascript">

ack.client.load([
      'jquery.min.js',
      'jquery-ui.min.js',
      'jquery.ui.touch-punch.min.js',
      'widget.css',
      'widget.js'],
      function() { ack.widget.init(); });

And then the meta and link codes can be added in the raw content:

<meta ......>
<link .....>

<div class="container">
    <div class="row">
          <div class="col-md-12" id="ack-widget">
                <div class="col-md-12" id="slider"></div>
                  <div class="col-md-12" id="slider-labels"></div>
                  <div id="timeline" class="timeline-display">
                      <ul class="timeline-items"></ul>
                  </div>
          </div>
    </div>
  </div>

This may or may not work. I would recommend to contact the creator of the timeline script and ask them for any alternative like a WordPress plugin for a smooth integration to your site.

Hope this helps.

[Christina]

Thank you - I very much appreciate your time and help. I think you are correct re: WP plugin route. However, it already works great on desktop and iPad but mobile (due to iframe) it is not responsive. This is out original code using iframe: https://www.moreparsmorefun.com/aa-widget-1/

I just need to resolve the phone issue and all would be great.
Christina

[ruenel]

Hello Christina,

There is a 15 pixel padding and a negative margin for one of your containers. This is what make it not responsive in smaller screens. Please edit your html or add a custom css that will make sure to remove paddings and margins in smaller screens.

Hope this make sense.

[Christina]

Thank you - I will pass this on to my guy who is handling this. Again - very much appreciated!

Christina

[ruenel]

You are most welcome!