I am having trouble with the React tutorial. After some help from stackoverflow I was able to get the server/API running, but now for some strange reason base.css is not loading.
base.css is in the css folder where it should be, and when I'm editing in Dreamweaver it automatically loads base.css just fine, so I'm really confused.
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
)
}
});
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
<Comment author="Pete Hunt"> This is one comment</Comment>
<Comment author="Jordan Walke"> This is another comment</Comment>
</div>
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
</script>
</body>
</html>
The problem was I needed to add a leading slashing to the .css file reference.
became
The css was loaded and applied to the page.
Related
I have been trying to make this owl carousel work.
I am not getting any error but the carousel if not loading. I tried the solution I found on StackOverflow for Bootstrap carousel but it did not work for me. I also tried to use pure CSS carousel but it will be static kind of thing and I want the carousel to work dynamically.
Index.razor
#page "/"
#using TBS.Data;
#inject IJSRuntime JsRuntime;
#*#inject IComponentContext context;*#
#inject NavigationManager UriHelper;
#inject MediaService MediaService;
#inject ContentService ContentService;
<div class="container hero-section">
<div class="owl-carousel owl-theme slide">
<div class="hero-image item">
<img src="images/here-image.png" alt="hero-img" class="img-fluid">
<div class="hero-details">
<h2>MATT RISINGER</h2>
<h6>Home Builder. Austin, TX.</h6>
<button>EXPLORE CHANNEL</button>
</div>
</div>
<div class="hero-image item">
<img src="images/here-image.png" alt="hero-img" class="img-fluid">
<div class="hero-details">
<h2>MATT RISINGER</h2>
<h6>Home Builder. Austin, TX.</h6>
<button>EXPLORE CHANNEL</button>
</div>
</div>
</div>
</div>
_Host.cshtml
#page "/"
#namespace TBS.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The Build Show</title>
<base href="~/" />
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<script src="js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="style.css">
<environment include="Development">
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="css/bootstrap/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />
</environment>
<link href="css/site.css" rel="stylesheet" />
<link href="css/showvideo.css" rel="stylesheet" />
<link href="css/default.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="https://cdn.syncfusion.com/ej2/17.2.35/material.css" rel="stylesheet" />
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-36173959-17"></script>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js#latest"></script>
<script src="https://cdn.syncfusion.com/ej2/17.2.35/dist/ej2.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/17.2.35/dist/ejs.interop.min.js"></script>
<script type="text/javascript" src="js/indexedDb.Blazor.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<app>
#(await Html.RenderComponentAsync<App>(RenderMode.Server))
</app>
<script src="_framework/blazor.server.js"></script>
<script src="_content/BlazorStrap/blazorStrap.js"></script>
<script src="_content/BlazorStrap/popper.min.js"></script>
#*<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>*#
<script type='text/javascript'>
(function ($) { window.fnames = new Array(); window.ftypes = new Array(); fnames[0] = 'EMAIL'; ftypes[0] = 'email'; fnames[1] = 'FNAME'; ftypes[1] = 'text'; fnames[2] = 'LNAME'; ftypes[2] = 'text'; fnames[3] = 'ADDRESS'; ftypes[3] = 'address'; fnames[4] = 'PHONE'; ftypes[4] = 'phone'; }(jQuery)); var $mcj = jQuery.noConflict(true);
</script>
<script src="js/custom.js">
</script>
<script src="js/owl.carousel.min.js"></script>
<script>
$('.slide').owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
autoplay: true,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
});
$('.slide1').owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
}
});
$('.slide2').owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
}
});
$('.slide3').owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
}
});
</script>
</body>
</html>
I had a similar issue, i figured it out that to use JavaScript library you need to use JInterop. So after referencing all required library, i created a js file in my root folder wwwroot called main.js, and i added the reference to my index.html file like this
<script src="main.js"></script>
Inside this main.js file i created a function that contains all the javascript code i need to run my slider. So the code inside main.js file looks like this.
(function($) {
'use strict';
window.sliderFunctions = {
startSlider: function () {
/*============ All the code or function you need for your slider to run goes here ============*/
--code--
}
}}
Then i opened my app.razor file, then injected JSRuntime like so
#inject IJSRuntime JSRuntime
then still in my app.razor file, i added the following code
#code {
protected async override Task OnAfterRenderAsync(bool firstRender)
{
await JSRuntime.InvokeAsync<string>("sliderFunctions.startSlider", null);
//return base.OnAfterRenderAsync(firstRender);
}}
What simple happened is, this allows to run all javascript code after Blazor is done rendering.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Dialog Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
</head>
<script>
$(document).ready($(function() {
//Dialog box
$("#dialog").dialog({
autoOpen: false
});
//button to open dialog box
$("#button").click(function(event) {
$("#dialog").dialog("open");
});
});
</script>
<body>
//div containing info about the dialog box
<div id="dialog">
<p>This is supposed to be a calculator</p>
</div>
<input id="button" type="submit" value="Open">
</body>
</html>
Change $(document).ready($(function() { to $(document).ready(function() {
and also check if the braces are properly closed
Getting the following error
Exception from Tracker afterFlush function: undefined is not a function
TypeError: undefined is not a function
<head>
<title>Orion</title>
<link href="http://cdn-na.infragistics.com/igniteui/2014.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2014.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<!-- JavaScript Library Dependencies -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<!-- Ignite UI Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.dv.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.lob.js"> </script>
</head>
<template name="currencyData">
<div class="container">
<div id="gridChartContainer">
<table id="grid"></table>
</div>
</div>
Template.currencyData.rendered = function() {
if (this.find("#grid")) console.log("Found the grid");
this.find("#grid").igGrid({
width: "100%",
dataSource: currencyData,
autoGenerateColumns: true,
});
}
Found the issue with the calls...
Modified my function to look as below
Template.currencyData.rendered = function() {
this.$("#grid").igGrid({
width: "80%",
dataSource: currencyData,
autoGenerateColumns: true,
});
}
Hi I'm trying to load conditionlly an external css file in my polymer but is not working
the code:
<polymer-element name="my-polymer-component" attributes="query">
<template>
<template if="{{condition}}">
<link type="text/css" rel="stylesheet" href="my-polymer-component.css"/>
</template>
<template if="{{condition}}">
<link type="text/css" rel="stylesheet" href="my-polymer-component2.css"/>
</template>
<section class="container">
<div class="headerImportText">
<span>
hello world
</span>
</div>
<section>
<template>
<script>
Polymer({
});
</script>
</polymer-element>
I need to changed the UI of the component by the condition.
As far as I know, you cannot do declarative conditional CSS loading in the template,
you must do your conditional CSS loading programmatically.
Here you have a sample: http://plnkr.co/edit/8Oavqpbh8eJTTKLw13bL?p=preview
Relevant part of the code:
<polymer-element name="my-polymer-component" attributes="condition">
<template>
<h1>Condition: {{condition}}</h1>
<section class="container">
<content> </content>
</section>
</template>
<script>
Polymer({
domReady: function() {
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", this.condition+".css")
console.log(fileref)
this.appendChild(fileref)
console.log("domReady!")
}
});
</script>
</polymer-element>
<h1>Here you have a sample</h1>
<my-polymer-component condition="a">
</my-polymer-component>
Hope it helps!
I am a noob to ASP.NET and MVC so please bear with me, and thank you in advance for the help! --
I am trying to link to a KML file that is stored in the application's root and I cannot get it to work, see below:
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
var href = 'http://code.google.com/apis/earth/documentation/samples/kml_example2.kml';
var href2 = '~/cngKml.kml'
google.earth.fetchKml(ge, href2, kmlFinishedLoading);
}
It works when I point it to ther 'href' variable, but when I point it to the 'href2' variable it does not load anything.
The full index.cshtml is below:
#{
ViewBag.Title = "STI";
string path = HttpUtility.JavaScriptStringEncode(HttpContext.Current.Server.MapPath("~/kml_example2.kml"));
}
<head>
<title>CNG</title>
<script type="text/javascript" src="https://www.google.com/jsapi"> </script>
<script type="text/javascript">
var ge;
var placemark;
var kmlObject;
google.load("earth", "1", { "other_params": "sensor=false" });
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
var href = 'http://code.google.com/apis/earth/documentation/samples/kml_example2.kml';
var href2 = '#path';
google.earth.fetchKml(ge, href2, kmlFinishedLoading);
}
function kmlFinishedLoading(obj) {
kmlObject = obj;
if (kmlObject) {
if ('getFeatures' in kmlObject) {
kmlObject.getFeatures().appendChild(placemark);
}
ge.getFeatures().appendChild(kmlObject);
if (kmlObject.getAbstractView())
ge.getView().setAbstractView(kmlObject.getAbstractView());
}
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
</script>
</head>
#section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>#ViewBag.Title.</h1>
<h2>#ViewBag.Message</h2>
</hgroup>
</div>
</section>
}
<div id="gearth">
<div id="map3d" style="width:960px; height:640px; align-self:center;"></div>
</div>
Resulting HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>STI</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">sti</p>
</div>
<div class="float-right">
<section id="login">
Hello, <a class="username" href="/Account/Manage" title="Manage">reecea</a>!
<form action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="J0EkwX2027gRZ-gDCvH1WMHGpGUnW-Sl2m3jEOpKw2684DUjjywYCFBQ9pPNfJ93pyJIZ9XH9HLMYdFNiVcHohtNsvKA1sIiKf3tL3EekGI1" /> Log off
</form>
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>Admin</li>
<li>My Account</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>STI.</h1>
<h2>CNG Stations Map</h2>
</hgroup>
</div>
</section>
<section class="content-wrapper main-content clear-fix">
<head>
<title>CNG</title>
<script type="text/javascript" src="https://www.google.com/jsapi"> </script>
<script type="text/javascript">
var ge;
var placemark;
var kmlObject;
google.load("earth", "1", { "other_params": "sensor=false" });
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
var href = 'http://code.google.com/apis/earth/documentation/samples/kml_example2.kml';
var href2 = 'c:\\users\\reecea\\documents\\visual studio 2013\\Projects\\CngStationMap\\CngStationMap\\kml_example2.kml';
google.earth.fetchKml(ge, href2, kmlFinishedLoading);
}
function kmlFinishedLoading(obj) {
kmlObject = obj;
if (kmlObject) {
if ('getFeatures' in kmlObject) {
kmlObject.getFeatures().appendChild(placemark);
}
ge.getFeatures().appendChild(kmlObject);
if (kmlObject.getAbstractView())
ge.getView().setAbstractView(kmlObject.getAbstractView());
}
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
</script>
</head>
<div id="gearth">
<div id="map3d" style="width:960px; height:640px; align-self:center;"></div>
</div>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2014 - STI</p>
</div>
</div>
</footer>
<script src="/Scripts/jquery-1.8.2.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"9f6ba0e6c2d041d29dcc37b58bbb4ef4"}
</script>
<script type="text/javascript" src="http://localhost:54165/39bfdebe74ed45968bc576a815347820/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Web.Config File:
<system.webServer>
<staticContent>
<remove fileExtension=".kml"/>
<mimeMap fileExtension=".kml" mimeType="application/vnd.google-earth.kml+xml"/>
</staticContent>
Try simply var href2 = '/cngKml.kml'
You can't use physical file paths for links (i.e. Server.MapPath("~/cngKml.kml")).
You can't use paths in client side code that the server needs to resolve either (i.e. "~/anything").
You can't declare a variable in C# and then use it in JavaScript like you attempted. In the case above, you'd need to at least use '#path' (though it still wouldn't work).
Also, please verify that navigating to a kml file on your web server will even work, as unknown file types typically aren't served up by IIS. If this is a problem, you can fix with a web.config entry similar to this SO post, more ref.
Try changing that:
var href2 = path;
to that:
var href2 = #path;
Without # char it is treated as simple JS variable
By the way, if you define variable in C# and then use it in JavaScript, don't forget to use HttpUtility.JavaScriptStringEncode:
string path = HttpUtility.JavaScriptStringEncode(HttpContext.Current.Server.MapPath("~/cngKml.km"));