I am trying to add the <div> based code to my company sharepoint website, but its getting an error saying they accepted only <iframe> based embed code. I converted <div> to <iframe>, its still not working. Seems there is a problem in my convertion. I am using margin calculator from omnicalculator website.
The actual code from website:
<div class="omni-calculator" data-calculator="finance/margin" data-width="300" data-config='{}' data-currency="CAD" data-show-row-controls="false" data-version="3" data-t="1653660714244">
<div class="omni-calculator-header"></div>
<div class="omni-calculator-footer">
<img alt="Omni" class="omni-calculator-logo" src="https://cdn.omnicalculator.com/embed/omni-calculator-logo-long.svg" />
</div>
</div>
<script async src="https://cdn.omnicalculator.com/sdk.js"></script>
I am using the below code.
<div class="omni-calculator" data-calculator="finance/margin" data-width="300" data-config='{}' data-currency="CAD" data-show-row-controls="false" data-version="3" data-t="1653660714244">
<div class="omni-calculator-header"></div>
<div class="omni-calculator-footer">
<iframe src="https://www.omnicalculator.com/finance/margin" target="_blank"><img alt="Omni" class="omni-calculator-logo" src="https://cdn.omnicalculator.com/embed/omni-calculator-logo-long.svg" /></frame>
</div>
</div>
<script async src="https://cdn.omnicalculator.com/sdk.js"></script>
I contacted the support from omnicalculator but no response from them. Please check my code.
Related
I just can't get any solution to work! I have tried everything, only object/iframe works, but they are ugly, as my navbar has a scrollbar like it was a page.
I don't want to use server-sided stuff, I just need something for my "offline" website. I have to bring this website on a CD at my school.
My navbar_file.html contains this:
<div id="button">Acasă</div>
<div class="dropdown" id="button">Prezentare
<div class="dropdown_content">
Scurt istoric<br><br>
<a>Organigramă</a><br><br>
<a>Ofertă educaţională</a><br><br>
<a>Cadre didactice</a>
</div>
</div>
<div class="dropdown" id="button">Nivel de învăţământ
<div class="dropdown_content">
<a>Învăţământ primar</a><br><br>
<a>Învăţământ gimnazial</a><br><br>
<a>Învăţământ liceal</a>
</div>
</div>
<div class="dropdown" id="button">Admitere și înscriere
<div class="dropdown_content">
<a>Clasa pregătitoare</a><br><br>
<a>Admitere liceu</a>
</div>
</div>
<div class="dropdown" id="button">Examene naționale
<div class="dropdown_content">
<a>Evaluarea națională</a><br><br>
<a>Bacalaureat</a>
</div>
</div>
<div class="dropdown" id="button">Activităţi şi proiecte
<div class="dropdown_content">
<a>Activităţi extracurriculare</a><br><br>
<a>Olimpiade și concursuri</a><br><br>
<a>Programe educaţionale</a><br><br>
<a>Programe culturale</a><br><br>
<a>Programe umanitare</a>
</div>
</div>
<div id="button">Asociaţia Sportivă</div>
<div id="button">Contact</div>
Is there anything wrong with this? Do I need to add tags?
Then in my index.html page I have a div with the id="navbar". I don't know how to make it work from here. I tried jQuery, doesn't work, iframe/objects are pretty ugly. Also I need to keep my stylesheet.css format. Please help me, thank you.
Okay, the only thing that worked for me is loading a .js file:
<script src="b.js"></script>
And then, in this file, put the external nav bar.
Directly before your closing body tag (ie </body>), Include this:
<script type="text/javascript">
$(document).ready(function() {
$("#navbar").load("navbar_file.html");
});
</script>
Ensure you have this where you want your navbar to sit:
<div id="navbar"></div>
If you don't want to use server side stuff, then jquery load/GET is what you need
<script>
$(function(){
$('#header').load('header.html');
$('#menu').load('nav.html');
$('#body').load('body.html');
$('#footer').load('footer.html');
});
</script>
I'm pulling data from an external site using WP-API and displaying it using AngularJS - http://dev.5874.co.uk/goshooting/search-the-shooting-club-directory/
The data is pulling in fine but it's showing the HTML tags such as how can I stop this? I'm using Advanced custom fields too which may be contributing.
<div ng-controller="northWestCtrl">
<div ng-repeat="d in data">
<h2 class="entry-title title-post">{{d.title}}</h2>
<img src="{{d.acf.logo}}">
<div id="listing-contact">Contact: {{d.acf.contact}}, {{d.acf.position}}</div>
<div id="listing-address-1">
{{d.acf.address_1}}, {{d.acf.address_2}} {{d.acf.address_3}} {{d.acf.town}} {{d.acf.county}} {{d.acf.postcode}}
</div>
<div id="listing-phone">Telephone: {{d.acf.telephone}}</div>
<div id="listing-mobile">Mobile: {{d.acf.mobile}}</div>
<div id="listing-email">Email: {{d.acf.email}}</div>
<div id="listing-website">Website: {{d.acf.website}}</div>
<div id="listing-established">Established: {{d.acf.established}}</div>
<div id="listing-about">About: {{d.acf.about}}</div>
<div id="listing-mailingaddress">Mailing Address: {{d.acf.mailing_address_}}, {{d.acf.mailing_address_2}}, {{d.acf.mailing_address_3}}, {{d.acf.mailing_town}}, {{d.acf.mailing_county}}, {{d.acf.mailing_postcode}}</div>
<div id="listing-directions">Directions: {{d.acf.directions}}</div>
<div id="scd-link">View on The Shooting Club Directory</div>
</div>
</div>
</div>
Here is a working code pen also - http://codepen.io/anon/pen/yePYdq
Any help would be much appreciated, thanks!
If i understand you right you Use this site for getting your data http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northeast with API
Also your console display an error
[Error] XMLHttpRequest cannot load http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northeast. Origin http://dev.5874.co.uk is not allowed by Access-Control-Allow-Origin.
Maybe this link will be helpful Origin is not allowed
I am using Ckeditor in Drupal.
I have tried to add the following code in the block content using ckeditor
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/profile.png" alt="">
<div class="intro-text">
<span class="name">Start Bootstrap</span>
<hr class="star-light">
<span class="skills">Web Developer - Graphic Artist - User Experience Designer</span>
</div>
</div>
</div>
</div>
</header>
But the above code displaying like this
<header></header>
Inside contents are not displaying. I don't know what is happening inside. Did anyone know about this?
This has to do with the cleanup and output settings of both Drupal and CKEditor. The fastest and most effective way to achieve this is by creating a new input format, for example "HTML" via /admin/config/content/formats/add with all cleanup processing disabled. This way, your HTML input = HTML output.
Sidenote: Make sure your profile/the admin profile/role is the only role that is able to use it so only trusted users have access to this text-format.
This is what I have at http://www.hairattheritz.com/untitled.html
I love the way it resizes for various screen sizes, however I cannot find a way to make it link to the home page. Even the no script link I tried didn't work...
<figure id="logo">
<div data-picture data-alt="Hair at the Ritz logo">
<div data-src="images/hatr_logo_s.png"> </div>
<div data-src="images/hatr_logo_m.png" data-media="(min-width: 45em)"> </div>
<div data-src="images/hatr_logo.png" data-media="(min-width: 60em)"></div>
<noscript>
<img src="images/hatr_logo.png" alt="Hair at the Ritz Logo" name="logo" id="logo">
</noscript>
</div>
</figure>
I'm hoping this is a simple fix...somewhere
Thanks in advance
Actually the link to index.html is working for me.
Maybe you just can't see the image to click on because of several problems with your markup and JS.
You should check w3c validator for more info.
You are using the $ Sign in your JS. I assume you want to use jQuery?
Then you have to include it first. For example put the following in your html file:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
I'm using Visual Studio 2012 for an MVC web app using code first method with EF 5.0.
I have written the following code to make a modal window appear at some point:
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"><img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/></div>
<div id="mod-content"></div>
</div>
</div>
If works fine, exept that the image <img src="~/Content/icons/close.png" [...] /> cannot be found by the browser which thinks its URL is
http://localhost:49895/Class1/Home/~/Content/icons/close.png
To be precise, every code under my div's got broken URL. If I put my image above the div's it's displaying correctly with the following URL:
http://localhost:49895/Content/icons/edit.png
Do you have an idea where i messed things up?
Edit2: example (after problem being resolved)
This works:
<img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/>
<!-- comment containing a quote ' -->
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"></div>
<div id="mod-content"></div>
</div>
</div>
This doesn't work:
<!-- comment containing a quote ' -->
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"></div>
<div id="mod-content"></div>
</div>
</div>
<img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/>
Could be a bug in the new Razor 2.0 tilde parsing, or you've mucked up your html by missing a quotation mark or something. Try using the more explicit way of resolving urls
<img src="#Url.Content("~/Content/icons/close.png")" />
If that works then it suggests a razor bug, if it doesn't then your html is probably broken somehow but the extra # symbol may be enough for the parser to kick in and tell you what is wrong.
~ is an asp code element, not HTML. As such it doesn't get rendered by the HTML.
Try wrapping your src with #Url.Content
<img src="#Url.Content("~/Content/icons/close.png")" />