Photobox insert in Bootstrap - html

When I run my code on Xampp (localhost), it runs normally. When I go to the server-side to run the same code, it doesn't work with Photobox.
What should I do now? My thought is to combine the two. I am thinking of copying from the Photobox archives into Bootstraps. No idea why it's not working.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap core CSS -->
<link href="bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/mychess.css" rel="stylesheet">
<script src="bootstrap/jquery-3.2.1.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="js/mychess.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
<link href="jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet">
<meta name="description" content="Project">
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="stylesheet" href="demo/styles.css">
<link rel="stylesheet" href="photobox/photobox.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src='photobox/jquery.photobox.js'></script>

Related

Font Awesome HTML 5 icon

Am trying to implement the HTML 5 Font Awesome icon:
on my front-end page, with no success.
My <head> section is as follows:
<!-- ----- Head ----- -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="copyright" content="Benjamin Wong" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Personal Landing Page" />
<meta name="keywords" content="Adv Dip in Pty & Facilities Mgt" />
<meta name="author" content="RECA" />
<meta name="robots" content="noindex, nofollow">
<link rel="icon" sizes="32x32" type="image/jpg" href="https://upload.wikimedia.org/wikipedia/commons/1/16/RECA-office.jpg">
<title>Course Notes — Advanced Diploma in Property & Facilities Management</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reboot.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!--<link href="css/normalize.css" rel="stylesheet">
<link href="css/skeleton-fontawesome-buttons.css" rel="stylesheet">
<link href="css/skeleton-fontawesome-buttons.min.css" rel="stylesheet">
<link href="css/skeleton.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- fontawesome.io -->
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<script src="https://kit.fontawesome.com/4ba3d81910.js" crossorigin="anonymous"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<!-- ----- Body ----- -->
<h2 class="text-left lead">
<strong>
M4: Property & Facilities Management Law<i class="fa fa-brands fa-html5"></i>
</strong>
</h2>
<hr>
The reason is that the class name for html5 icon in fontawesome v5.5.0 is fab fa-html5 instead of fa.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.5.0/css/all.min.css" integrity="sha512-QfDd74mlg8afgSqm3Vq2Q65e9b3xMhJB4GZ9OcHDVy1hZ6pqBJPWWnMsKDXM7NINoKqJANNGBuVRIpIJ5dogfA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<i class="fab fa-html5"></i>
The reason is that the class name for html5 icon in fontawesome v5 is fab fa-html5 instead of fa. and update the link
<!-- ----- Head ----- -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="copyright" content="Benjamin Wong" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Personal Landing Page" />
<meta name="keywords" content="Adv Dip in Pty & Facilities Mgt" />
<meta name="author" content="RECA" />
<meta name="robots" content="noindex, nofollow">
<link rel="icon" sizes="32x32" type="image/jpg" href="https://upload.wikimedia.org/wikipedia/commons/1/16/RECA-office.jpg">
<title>Course Notes — Advanced Diploma in Property & Facilities Management</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reboot.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!--<link href="css/normalize.css" rel="stylesheet">
<link href="css/skeleton-fontawesome-buttons.css" rel="stylesheet">
<link href="css/skeleton-fontawesome-buttons.min.css" rel="stylesheet">
<link href="css/skeleton.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.5.0/css/all.min.css" integrity="sha512-QfDd74mlg8afgSqm3Vq2Q65e9b3xMhJB4GZ9OcHDVy1hZ6pqBJPWWnMsKDXM7NINoKqJANNGBuVRIpIJ5dogfA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- fontawesome.io -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<!-- ----- Body ----- -->
<h2 class="text-left lead">
<strong>
M4: Property & Facilities Management Law<i class="fab fa-html5"></i>
</strong>
</h2>
<hr>
Found out what was causing the problem in your code:
Remove this line from your code:
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
Below is the modified code:
<!-- ----- Head ----- -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="copyright" content="Benjamin Wong" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Personal Landing Page" />
<meta name="keywords" content="Adv Dip in Pty & Facilities Mgt" />
<meta name="author" content="RECA" />
<meta name="robots" content="noindex, nofollow">
<link rel="icon" sizes="32x32" type="image/jpg" href="https://upload.wikimedia.org/wikipedia/commons/1/16/RECA-office.jpg">
<title>Course Notes — Advanced Diploma in Property & Facilities Management</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reboot.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!--<link href="css/normalize.css" rel="stylesheet">
<link href="css/skeleton-fontawesome-buttons.css" rel="stylesheet">
<link href="css/skeleton-fontawesome-buttons.min.css" rel="stylesheet">
<link href="css/skeleton.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- fontawesome.io -->
<script src="https://kit.fontawesome.com/4ba3d81910.js" crossorigin="anonymous"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<!-- ----- Body ----- -->
<h2 class="text-left lead">
<strong>
M4: Property & Facilities Management Law<i class="fa fa-brands fa-html5"></i>
</strong>
</h2>
<hr>
Link to codepen: https://codepen.io/geekyquentin/pen/MWQdBJM

How do I add an HTML favicon (mine isn't working)?

Head:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="favicon.png"/> <!-- Here -->
<title>TITLE</title>
<script src="https://use.fontawesome.com/5aaf8b7460.js"></script>
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="dist/css/style.css">
<script src="https://unpkg.com/animejs#3.0.1/lib/anime.min.js"></script>
<script src="https://unpkg.com/scrollreveal#4.0.0/dist/scrollreveal.min.js"></script>
My favicon is in the same directory as index.html
However it just shows the favicon as a white page - not working.
How do I fix this?
try this
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
See the full url instead only image name :
Source and more info about :
This is not mandatory, but it may affect on older browser, check this https://www.w3.org/2005/10/howto-favicon

CSS won't render on IE11

I'm trying to see why our CSS won't render on IE. I'm thinking maybe it is something to do with linking the stylesheet? This is hosted on Salesforce Marketing Cloud if it matters. I've included everything in the header below:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"><link rel="icon" type="image/ico" href="contents/ui/theme/i/favicon.ico">
<meta name="robots" content="noindex,follow"><link rel="dns-prefetch" href=""><link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="stylesheet" id="them-style-css" href="https://xx.com/b2c-general-css" type="text/css" media="all">
<link rel="stylesheet" id="g-font-css" href="//fonts.googleapis.com/css?family=Roboto%3A300%2C500%2C700&ver=4.9.8" type="text/css" media="all">
<script type="text/javascript" src="%%=CloudPagesURL(XX)=%%"></script>
<script type="text/javascript" src="%%=CloudPagesURL(XX)=%%"></script>
use the meta in head
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Google analytics no http respsonse detected

Google analytics isn't tracking my site data.
The chrome Tag Assistant extension shows me this error
And here is my page head -
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Main Information -->
<title>Jordan Miguel</title>
<meta name="description" content="Portfolio for Front-End developer
and designer Jordan Miguel">
<meta name="keywords" content="jordan miguel web design development
london UX">
<meta name="author" content="Jordan Miguel">
<meta property="og:type" content="website">
<!-- "Website" -->
<meta property="og:url" content="">
<meta property="og:title" content="Jordan Miguel">
<meta name="viewport" content="width=device-width, initial-scale=1,
minimum-scale=1.0, maximum-scale=1.0">
<!-- Fav and touch icons -->
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<!-- Plugins -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js"></script>
<script type="text/javascript" src="js/main.js" defer></script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
<!-- Style -->
<style type="text/css">.tk-freight-big-pro{font-family:"freight-big-pro",sans-serif;}</style>
<style type="text/css">
#font-face{font-family:freight-big-pro;src:url(https://use.typekit.net/af/5220ee/0000000000000000000132c1/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3)
format("woff2"),url(https://use.typekit.net/af/5220ee/0000000000000000000132c1/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3)
format("woff"),url(https://use.typekit.net/af/5220ee/0000000000000000000132c1/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3)
format("opentype");font-weight:700;font-style:normal;}#font-face{font-family:freight-big-pro;src:url(https://use.typekit.net/af/cf14b7/0000000000000000000132c2/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3)
format("woff2"),url(https://use.typekit.net/af/cf14b7/0000000000000000000132c2/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3)
format("woff"),url(https://use.typekit.net/af/cf14b7/0000000000000000000132c2/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3)
format("opentype");font-weight:700;font-style:italic;}#font-face{font-family:freight-big-pro;src:url(https://use.typekit.net/af/2668d3/0000000000000000000132c3/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3)
format("woff2"),url(https://use.typekit.net/af/2668d3/0000000000000000000132c3/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3) format("woff"),url(https://use.typekit.net/af/2668d3/0000000000000000000132c3/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3)
format("opentype");font-weight:400;font-style:normal;}#font-face{font-family:freight-big-pro;src:url(https://use.typekit.net/af/af0e9d/0000000000000000000132c4/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3)
format("woff2"),url(https://use.typekit.net/af/af0e9d/0000000000000000000132c4/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3) format("woff"),url(https://use.typekit.net/af/af0e9d/0000000000000000000132c4/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3)
format("opentype");font-weight:400;font-style:italic;}
</style>
<link rel="stylesheet" href="assets/css/main.css" type="text/css">
<link rel="stylesheet" href="assets/css/framework.css" type="text/css">
<script>
(function(i,s,o,g,r,a,m)
{i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new
Date();a=s.createElement(o),
m=s.getElementsByTagName(o)
[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-
analytics.com/analytics.js','ga');
ga('create', 'UA-80642122-1', 'auto');
ga('send', 'pageview');
</script>
</head>
The strange thing is that I've used this exact structure on multiple sites and I've tried following all of the steps via google.
Either the script is missing or an ad blocker is blocking it.

Bootstrap 3 not working as responsive in my play framework?

Why my Bootstrap 3 is not working as responsive in my play framework?
This is my head contain of main.scala.html which use every where..
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("bootstrap/css/bootstrap.min.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("bootstrap/css/sticky-footer-navbar.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/intlTelInput.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/icon.jpeg")">
<script src="#routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
<script type="text/javascript" src='#routes.Application.javascriptRoutes()'></script>
</head>