jVector map displays on website but code not showing in HTML - javascript

I am studying web development and as part of a project I am doing I need to add an SVG map. I have managed to add a jVector map of New Zealand but am unable to alter in in any way because the container for the map has not displayed in HTML, it only shows in dev tools when I hover over the map. I'm not sure where I am going wrong.
I have been trying to find an answer online but haven't found the same issue anywhere and no one on my course seems to know either. I followed videos on you tube but did it slightly different because in the videos they put everything on the HTML page including any JS or JQuery and on my course they have said these should be kept in a separate file, so I wonder if this is causing the problem. I did try however putting it directly into the HTML but got the same result.
This shows API info displaying in Dev Tools
Shows files and folders
<!--JVECTOR SCRIPT TOP OF PAGE-->
<link rel="stylesheet" href="assets/jsvector/jquery-jvectormap-2.0.3.css" type="text/css" media="all"/>
<script src="assets/jsvector/jquery.js"></script>
<script src="assets/jsvector/jquery-jvectormap-2.0.3.min.js"></script>
<script src="assets/jsvector/jquery-jvectormap-nz-mill.js"></script>
<!--START OF JVECTOR MAP DIV EMPTY-->
<div id="map">
</div>
<!--END OF JVECTOR MAP-->
//SCRIPT KEPT IN SPEARATE FILE FROM HTML BUT REFERENCING #MAP IN HTML
$(function(){
$('#map').vectorMap({map: 'nz_mill'});
});
I expected to see all of the map info from the API show under the #map div in HTML like it had done on the demo videos I watched. It has obviously connected OK but I have no way to adjust anything on it.

Related

Generating Rails Embed using data attribute

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.

Highcharts not loading on PHP page

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.

Referencing Three.js in HTML

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>

Demandforce appointment form, integration with Wordpress

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.

Relative pathway works to display images in CSS file but not in Javascript file

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.

Categories