Use base url for image source html/js - javascript

Hey i get my html content via json. The image blocks look like:
src=\"/2017/03/test.jpg\" alt=\"test\" width=\"576\" height=\"800\" srcset=\"/2017/03/test.jpg 576w, /2017/03/test-112x155.jpg 112w, /2017/03/test-432x600.jpg 432w\"
The src should look like mywebsite.com/img-src but it looks like localhost/img-src right now...
I tried to replace it via JavaScript but then it looks like: localhost/mywebsite.com/img-src
Does somebody have an idea
Edit: the image is hosted on ONE Website! And it should be shown on every device. Now its 404...

It can be done by including a <base> tag in the <head> tag like this:
<base href="mywebsite.com/path">
For more information reference this webpage: https://www.w3schools.com/tags/tag_base.asp

Related

Linkify.js.org (jQuery) HashTags: Change the default URL destination to Twitter?

I'm sanitizing CDATA content from various third-party XML feeds, stripping all HTML server-side and using Linkify.js.org (v3.0.3) to safely reapply HTML tags to the sanitized plaintext links client-side.
My project relies a lot on jQuery (v3.6.0).
The linkify jQuery DOM Data API is working great on links and email addresses, but hashtags are proving problematic. By default, hashtags redirect to https://my-domain.com/current-dir/#<HashTag>, but I'd like them to redirect to https://twitter.com/hashtag/<HashTag>. I know this is possible from the demo examples, but I'd like to stick with a jQuery solution, and maintain the div data attributes if possible.
I've read the documentation from Linkify.js.org/docs/ but can't figure out how to change the hashtag URL without dropping the jQuery div data attributes.
Below is a simple example (it's important I maintain a _blank HREF target):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Linkify</title>
</head>
<body>
<div data-linkify="this" data-linkify-target="_blank">
Domain Test: domain.com. Email Test: email#address.com. HashTag Test: #Linkify.
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/linkify.min.js"></script>
<script src="/js/linkify-jquery.min.js"></script>
<script src="/js/linkify-plugin-hashtag.min.js"></script>
</body>
</html>
Work's great, but as mentioned, #Linkify redirects to the same page (e.g; https://my-domain.com/current-dir/#Linkify).
Client-side JS is not my strong point, but is there a data-linkify attribute I can use to change the HashTag destination to Twitter? Or additional jQuery code I can use to modify the behaviour of the linkify-plugin-hashtag.min.js plugin?
Use the hashtag plugin options... And since you do not want to call linkify directly, you'll need to play with the default options.
If you add this, it should work out.
linkify.options.defaults.formatHref.hashtag= (href) =>
'https://twitter.com/hashtag/' + href.substr(1);
You can read more at https://linkify.js.org/docs/plugin-hashtag.html and https://linkify.js.org/docs/options.html

pretty formatted code doesn't break into new lines

I am trying to embed a pretty formatted code in a div but it fails to break the code into new line and possibly into tabs, has copied.
I am using this code from here to test both php and html pretty formatted code in the div (Submitting form, mysql and php)
I am using the example from highlightjs but it seems not to work for me.
(How to format code in html / css / js/ php) Here are my html output formats:
ResultView and HTMLCSSView
I also added this script above the body closing tag html document
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
With the css link in the head tag
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
How Can I make this work perfectly?
You're missing the http: or https: part of the URL - currently, your file links look like this:
//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js
//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
Change your links to look like this:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
And your code will work.

How to use external html file in current html code

I am trying to load an external HTML page (common navigation) into my current HTML page. I tried the load function but it is deprecated. Can you tell me another way to include it? I am not using any server.
Here's my code
<!DOCTYPE html>
<html>
<head>
<script src="ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#content').load(" nav.html ");
});
</script>
</head>
<body>
<div id="content "></div>
</body>
</html>
Try this
<script>
function loadPage(href) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", href, false);
xmlhttp.send();
return xmlhttp.responseText;
};
document.getElementById('content').innerHTML =
loadPage('your_html_file.html');
</script>
<div id="content">
</div>
Take both file pages in same directory then you can use simple button on link to use external file. for example
<button> External file </button>
Button is your choice it's just example for understanding you can simple use html link.
You should use the SSI-function.
There is several ways but this can solve your problem.
<!--#include virtual="PathToYourFile/YourFile.html" -->
This can be inserted into a <div> for further styling in CSS.
REMEMBER! Due to some limitations in html-doctypes you cannot inlude a .html-file into an .html-file. You have to use another format as .shtml where you can inlude your .html-files. You can include .html into your .shtmlfile. This was also what .shtml was originally created for.
This is because it is part of the XHTML (Dynamic XML HTML)...
To change a file
Your approach on the HTML is correct and also your JS. I include a lot of html-files containing texts there.
My approach is that when a page is loaded some text will be loaded with the <!--#include virtual="" --> inside a <div>. Below JS is used to change the content in the <div>. As Daniel Beck stated below: "...at least in Apache the server needs to be configured to check particular file extensions...".
You configure your file in your .htaccess-file. But ONLY do this if you know what you are doing.
Some (newer?) servers have a default setup of which you don't need to alter the .htaccess-file if you want to be able to include .html-files. At least you are able to include .html-files into .shtml-files.
I have included a Mimetype converter which tells the browser how it should read the file. For txt/html I have told the script that it should use the character encoding ISO-8859-1. Others as UTF-8 could also be used. This depends on your and your receivers native language.
Take into consideration to use the e.preventDefault();. With this i tells the browser NOT to see this as navigation link and will therefore only load the content in the <div>.
$(function() {
$('#ButtonsID').click(function(e) {
$('.DivClass').load('PathToFile/File.shtml');
e.preventDefault();
});
});
$.ajaxSetup({
'beforeSend': function(xhr) {
xhr.overrideMimeType('text/html; charset=ISO-8859-1');
}
});

How can I pass an html img element to a javascript included file?

This is a question from a noob in javascript. I tried to find something similar the last two days but I didn't find. I try to pass an html image element to an external javascript file which I include to the rest html code. The javascript fade in and fade out an image. Because I want to use different images everytime, thus I want to have a function in an external javascript file.
What I did so far:
PHP and HTML:
<?php
if ($success){
echo"<link rel='stylesheet' href='js/jquery-ui-1.11.4-smoothness.css'>
<script src='js/jquery-1.11.3.js'></script>
<script src='js/jquery-ui-1.11.4.js'></script>
<img id='tick' src='tick.png'>
<script type='text/javascript' src='js/success_failure_signs.js'>
success_failure(tick);
</script>";
}?>
Javascript file has this code:
function success_failure(tick){
var x = tick;
x.fadeIn();
x.fadeOut(1000);
}
The browser's console doesn't give any error.
It seems that the function success_failure doesn't get the image.
What is wrong on this code and how can I fix it?
Thank you in advance!
You haven't defined tick when you make your function call. Try this...
<script type="text/javascript" src="js/success_failure_signs.js">
</script>
<script type="text/javascript">
var tick = $("#tick");
success_failure(tick);
</script>
EDIT: I've also separated the inclusion of the script and your code to call it into two separate script tags.
maybe passing the image to the script is the wrong way of thinking here.
Most of the time with Javascript for web pages the JS gets the image from the HTML site itself.
You are already including jQuery so look into how to get an element from the page with jQuery.

Changing image src with javascript with an variable in it

I made an template in HTML and now i am putting it in as an wordpress template. But in my .js file i got this:
$('.tab_home').find('img').attr('src', '/images/home.png');
This is part of an click function and changes the image when i click on something. And it works fine in HTML but when i want to put this is in wordpress it is broken because the src url is wrong ofcourse. Now i did find this thread: WordPress path url in js script file and this would be part of my solution except that i can't put "+templateUrl+"in my .attr('src', '/images/home.png')Cause then i get an link like:
<img alt="" src=""+templateUrl+"/images/home.png">
Does some1 know what im doing wrong here, and how to fix it?
Thanks in forward.
You must do it as follows:
$('.tab_home').find('img').attr('src', templateUrl + '/images/home.png');
And don't forget to set templateUrl in the header of the template, as described in post you're referring to:
<script type="text/javascript">
var templateUrl = '<?= get_bloginfo("template_url"); ?>';
</script>

Categories

Resources