I'd like to store SVG code in a separate file so I can clean up the main code.
I'm using this script in the <head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("icon").load("icon.xml");
});
</script>
and I'm calling the file like this:
<div class="logo">
<div id="icon"></div>
</div>
but nothing appears. This method is working for me for referencing as a separate html for nav links. Does this method not support other file types?
Due to typos, the SVG cannot be displayed. Here is the fix:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
$(function(){
$("#icon").load("icon.xml");
});
</script>
<div class="logo">
<div id="icon"></div>
</div>
Related
May someone tell me why does the content of q.txt not get loaded to the div with the class name "content". q.txt is a local file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".content").load("q.txt");
});
</script>
<div id="content">
<div class="content">
<h2>aaaa</h2>
</div>
</div>
First time using JQuery, so please try to be nice if it is a stupid error. I am working on an HTML based project just for fun and want to create a bootstrap based carousel that first reads a folder for images, and sticks them into the slideshow.
As I found out, HTML is weird and picky when it comes to what languages can touch folder. I tried PHP, and then realized I needed to install a bunch of other things to make it work, so I am trying jQuery, as it has the ability to access folders, based on info from here.
I have been able to inject HTML snippets using the append() method of jquery, but I cannot connect the 2 of them together. I get the following error: "jquery-3.2.1.min.js:2 Uncaught TypeError: jQuery.ajax is not a function".
This error started appearing when I added in the for loop to build the URL to the folder. It seems to be caused by for loops not being allowed to run before ajax calls.
please see the following code. Main area affected is the large script field in the header, and output should show up in the carousel-inner.
Any help is appreciated. Thank you
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
var folder = "slides/";
var href=window.location.href;
var pathArray=href.split('/');
var path="";
for(i=0;i<pathArray.length-1;i++){
path+=pathArray[i];
path+="/";
};
path+=folder;
console.log(path);
$.ajax({
url : path,
async: false,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.(jpe?g|png|gif)$/) ) {
$(".carousel-inner").append( "<div class=\"carousel-item\"> <img src='"+ folder + val +"'> </div>" );
}
});
}
});
});
</script>
<style>
.scroll-div {
height:150px;
overflow-y: scroll;
}
</style>
<title>Test</title>
</head>
<body>
<!-- Page stuff goes here -->
<main class="col-12 " role="main">
<div class="row ">
<div class="col-3">
<a class="weatherwidget-io" href="https://forecast7.com/en/42d31n83d04/windsor/" data-label_1="WINDSOR" data-label_2="WEATHER" data-theme="original" >WINDSOR WEATHER</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script>
</div>
<div class="col-9">
<div class="test">test</div>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
</div>
</div>
</div>
</div>
</main>
<!-- End of page stuff -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 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>
</body>
</html>
i have my react code in plain HTML
<!Doctype html>
<html>
<head>
<meta charset="uttf-8">
<title>React! React! React!</title>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<script>
ReactDOM.render(
<h1>Sherlock Holmes</h1>,
document.body
);
</script>
</body>
</html>
but he not work, after run this index.html in Chrome i have only blank white page,
can someone explain me what i am doing wrong?
i use vscode
To make this work, use the development version, not the production version of the react and react-dom files. Also note that you need to specify the type of your script as "text/babel" or babel won't parse it.
Check out the code below:
<html>
<head>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
</head>
</head>
<body>
<script type="text/babel"> /* notice type="text/babel"*/
ReactDOM.render(
<h1>Sherlock Holmes</h1>,
document.body
);
</script>
</body>
</html>
RESULT:
I did react for the first time and it edited your code like that. I guess the two scripts I added are not needed, but just try it. As I understood you have to set an section to place the text. These two links could help too.
Where to place line of code in html for ReactDOM.render?
https://www.w3schools.com/react/react_render.asp
My Code:
<!Doctype html>
<html>
<head>
<meta charset="uttf-8">
<title>React! React! React!</title>
<link rel="stylesheet" href="lib/style.css" />
</head>
<body>
<section id="entry-point"></section>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script type="text/javascript">
var h = React.createElement('p', null, 'Sherlock Holmes');
ReactDOM.render(h, document.getElementById('entry-point'));
</script>
</body>
</html>
I can't for the life of me figure out why my jpg image isn't rendering on my local computer. I'm writing a simple web app using AngularJS.
I have the images in an "img" folder within the same directory as the home.html file.
Could it be something wrong with the picture? I'm able to open it and it looks renders fine. I don't see any errors in the console either, just a broken image. Maybe it's the way I'm using bootstrap or angular? I'm relatively new to both.
home.html code:
<!DOCTYPE html>
<html data-ng-app="MainApp">
<head>
<title>FedCup 5k</title>
<!--angular uses this base element which path to use when it gets any front end resource- this is the root b/c of "/"-->
<base href='/'>
<link rel="stylesheet" type="text/css" href="src/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class='container'>
<div class='page-header'>
<h1>FedCup 5k</h1>
<div class="row">
<div class="col-sm-12">
<img src="img/test.jpg"/>
</div>
</div>
</div>
<!--the place holder to render our view dependent on the route-->
<div class="row">
<div class="col-sm-12" data-ng-view>
</div>
</div>
</div>
<script type='text/javascript' src="lib/jquery/dist/jquery.min.js"></script>
<script type="text/css" src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="lib/angular-resource/angular-resource.min.js"></script>
<script type="text/javascript" src="src/app.js"></script>
<script type="text/javascript" src="src/controller.js"></script>
<script type="text/javascript" src="src/factories.js"></script>
<script type="text/javascript" src="src/filter.js"></script>
</body>
</html>
Thanks so much for your help! I'm hoping it's just something stupid I'm overlooking because I've been staring at this for so long and it looks like it should be easy.
You have to access the folder in your local directory where the images are placed
through slashes.i.e if you have folder img then you have to access it in html via
<img src="/img/test.jpg"/>
Sometimes src not work with angular. Use data-ng-src instead.
I've read through many of these questions and they are answered the same. I've tried it but can't get it to work. I've gotten the code very small. What am I doing wrong? The tabs work fine, but no event getting fired.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tabs').tabs({
beforeActivate: function(event,ui) {
alert("Tabs Changed");
}
});
});
</script>
</head>
<body>
<div class="easyui-tabs" id="tabs">
<div Title="Home" >
Home
</div>
<div Title="Admin">
Admin
</div>
</div>
</body>
</html>
thanks,
dave