I would like to create a content feed using Rails that can be embedded into another person's site, but am trying to do so in a specific way.
I would like the embed code to look something like the following:
<script src="//domain.com/embed.js" type="text/javascript"></script>
<link href="//domain.com/embed.css" media="all" rel="stylesheet" type="text/css" />
<ul class="content-feed" data-feed-id="someID"></ul>
Instead of having the parameter for the feed in the url like: http://domain.com/embed/1.js , then http://domain.com/embed/2.js for two separate feeds for example.
I have a couple reasons for this, such as it makes it easy to have one js and one css file/link for every user.
One of the problems I see is that I would like to be able to save changes to how the feed is generated for that specific content feed in the user's dashboard without re-embedding the code, such as different sources or layouts.
It'd very helpful if anyone could give general direction or tell me how I might go about this process. At the moment, the feeds are simply generated on a page within my web application and that is the only place they can be seen.
I am trying to implement Highcharts to display data on my web application. At the moment, I just want to see how Highchart works on my website so I have simply copied code from this fiddle and implemented it on my site. But for some reason, the chart does not display.
It may just be my inexperience (or quite frankly, my stupidity) but I don't know why the fiddle isn't loading. Have I missed anything?
Here is what I have done:
I have added the following to the head of the page:
<script src="https://code.highcharts.com"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="javascript/chart.js"></script>
chart.js is a seperate file, which consists of all the JavaScript from the fiddle.
Whenever you observe a problem, the first thing you need to check is whether there are any errors. When it comes to Javascript, you need to check the browser console. In this case, the $ in the error message is a strong hint that you forgot to include a script tag before the other script tags having its src attribute pointing to the location of jquery.
I am using c9.io, an IDE to code and quickly run a site to test your code. I have tried importing this outside of c9, and it still does not work. (I know it isn't a script error related to three.js itself.) In my HTML, I have this snippet:
<body>
<script src='three.min.js'></script>
<script src='scene1.js'></script>
</body>
I require the THREE namespace in my scene1 JavaScript like this:
import THREE from "three.min.js";
Is this all correct? Someone has tested this code, and said it worked. I have no folders in my hierarchy, just the three.min.js script, the scene1.js script, and my HTML script. Can anyone spot my error out?
Putting the script in the header works just fine, despite every tutorial and the three.js docs saying it should be in the body.
you can add three.js in html by:
search cdnjs threejs.
click the cdnjs website.
select latest threejs version from dropdown list with asset type javascript.
copy any one of the urls and use it in <script src="that url"></script>for e.g:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.149.0/three.min.js" integrity="sha512-6p9lGA4Cm89KiwN1CixiOVQU2H9e13LeYoN6/Hj/qoUhtrMW5vNiqQz9Z96Z7/I8u89ghL6SPBz9na5HFVzF3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
I am developing a website for dentist friend. So far it's looking good, I am using Wordpress along with the enfold theme.
One of the requested features for this website is to include the DemandForce appointment form, so customers would be able to schedule their appointments inside the new website.
I visited Demand force and found that the way to include their contact form is by:
Copying the following CSS file into the header <link type="text/css" rel="stylesheet" href="//www.demandforce.com/widget/css/widget.css" /> Which I did by modifying header.php
Adding the following script into the body; <script type="text/javascript">
d3cp_bid = 'private'; // Business ID in DemandforceD3
//d3cp_appt_source = 'My Website'; //optional. See Instructions.
//d3cp_appt_returnpage = 'your_page_url'; // Optional. See Instructions.
//d3cp_appt_postdata = 'false'; // Optional. See Instructions.
</script>
<script src="//www.demandforced3.com/b/burlingamesmile/scheduler.widget" type="text/javascript"></script>
Which I also did simply by created a raw text field and inputing it.
The result of this can be seen here. As you probably notice the form is not correctly formatted and I don't really understand why. I checked the source code, and both the CSS file and the script are where they should, so I don't quite get the displaying issues.
Since I couldn't figure it out this way, I tried another idea. The actual reservation form is hosted here. The good thing about that form is that is actually responsive. So I created another page with the following:
<iframe src="https://www.demandforce.com/b/burlingamesmile/schedule" width="1000" height="1500"></iframe>. How this looks can be observed here
This behaves ok. But the frame size doesn't adjust well to different screen sizes (smartphone, tablet, etc.) I have looked into this one, but it doesn't do the trick.
At this moment I am running out of ideas, so any comments/help is greatly appreciated, as always.
Thanks so much everyone.
Try adding this to your custom CSS section of the theme:
iframe, object, embed {
max-width: 100%;
}
Worked for me, making the content within the iframe responsive.
Ok, going to rewrite this…
I have a project. It has 2 layers. Top layer is HTML5 animation (rollovers, slides etc). Bottom layer is kaleidoscope animation using images and CSS.
Bottom layer displays correctly. Top layer does not.
Client has requested that we use relative pathways.
Client has requested we use a strict directory structure of: Pages, Documents, PlusImages.
Pages= html/txt (where the css/javascript is attached in)
Documents= where the CSS and Javascript files are
PlusImages= where all the images are stored
Here's the issue: The images are NOT displaying for the top layer which is called by a javascript file. The program that generated this script is called Tumult Hype
How can I correct this? I thought about adding ../PlusImages/imagename.png to the agilent_hype_generated_script.js file.
Here is the pathway client wants to use:
http://www.XYZ.com/en-US/Products-Services/Services/
HTML File code connecting the CSS and JS files:
<link rel="stylesheet" href="/en-US/Products-Services/Services/Documents/main.css" type="text/css" media="all">
<script type="text/javascript" charset="utf-8" src="/en-US/Products-Services/Services/Documents/agilent_hype_generated_script.js?55531"></script>
main.css:
.kal_main{background-image:url(/en-US/Products-Services/Services/PlusImages/Animation-Background.png);overflow:hidden;width:920px;height:510px;margin:auto}
agilent_hype_generated_script.js:
(function(){(function k(){var h="Agilent.hyperesources",e="Agilent",d="agilent_hype_container"; if(false==!1)try{for(var f=document.getElementsByTagName("script"),b=0;b<f.length;b++){var a=f[b].src;if(null!=a&&-1!=a.indexOf("agilent_hype_generated_script.js")){h=a.substr(0,a.lastIndexOf("/"));break}}}catch(n){}if(false==!1&&null==window.HYPE_316)null==window.HYPE_dtl_316?(window.HYPE_dtl_316=[],window.HYPE_dtl_316.push(k),e=document.getElementsByTagName("head")[0],d=document.createElement("script"),
b=navigator.userAgent.match(/MSIE (\d+\.\d+)/),b=parseFloat(b&&b[1])||null,d.type="text/javascript",d.src=h+"/"+(null!=b&&10>b?"HYPE.ie.js":"HYPE.js")+"?hype_version=316",e.appendChild(d)):window.HYPE_dtl_316.push(k);else{f=window.HYPE.documents;if(null!=f[e]){a=1;b=e;do e=""+b+"-"+a++;while(null!=f[e]);for(var c=document.getElementsByTagName("div"),a=!1,b=0;b<c.length;b++)if(c[b].id==d&&null==c[b].getAttribute("HYP_dn")){var a=1,g=d;do d=""+g+"-"+a++;while(null!=document.getElementById(d));c[b].id=
d;a=!0;break}if(!1==a)return}for(var a=new HYPE_316,c=[],c=[],g={},l={},b=0;b<c.length;b++)try{l[c[b].identifier]=c[b].name,g[c[b].name]=eval("(function(){return "+c[b].source+"})();")}catch(m){a.log(m),g[c[b].name]=function(){}}a.z_a({R:5,S:0,aI:0,T:0,bG:3,aJ:0,bH:2,aK:0,X:0,bI:3,aL:0,Y:1,bJ:3,bK:3,bL:3,a:0,b:0,c:0,d:0,aS:0,e:3,bQ:0,aT:0,f:2,g:5,bR:2,aU:0,bS:"NumberValueTransformer",aV:0,aW:3,A:5,l:2,aX:0,B:5,m:5,C:5,aY:2,n:5,D:5,E:0,aZ:0,G:5,t:0,bA:5,RotationAngle:2,tX:4,bB:0,M:0,N:0,bC:0,tY:4,O:0,P:0,Q:0});a.z_b({"25":{p:1,n:"../PlusImages/Overlay-Type-4.png",g:"127",t:"#1x"},"18":{p:1,n:"../PlusImages/Overlay-Type-3.png",g:"86",t:"#1x"},"10":{p:1,n:"../PlusImages/03-over-1.png",g:"101",t:"#1x"},
(you can see how the images are referenced above) - ../PlusImages/imagename.png Will this work or am I missing something??
Alright your text is a bit confusing, but I will give this a shot.
It sounds like your javascript file is being linked into an HTML page? If this is the case, then the path from the javascript to the images should be the same as it is for your HTML since that's where it's being run from.