Why all the text in my site is in upper case - javascript

I downloaded some free web templates and updating the site as per my needs. I observed most of site content is displayed in upper case. Can someone help me, how to disable this?
Attached is the screenshot of the page. All links and content is displayed in uppercase.
How to display this in normal case letters?
Following is my html before body
<!DOCTYPE html>
<html>
<head>
<title>Freee-Learn. Your learning partner...</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Free Style Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:100,300,400,500,700,800,900,100italic,300italic,400italic,500italic,700italic,800italic,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<!--//fonts-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/myJavaScript.js"></script>
<!-- start menu -->
<script src="js/simpleCart.min.js"> </script>
<link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/memenu.js"></script>
<script>$(document).ready(function(){$(".memenu").memenu();});</script>
</head>
And also i observed, when the internet is off, the site is displayed in normal case letters.

It's the fonts that you're using in the website. The fonts are downloaded from an Google API. Download the fonts to use locally or use another font.

One of the web fonts you're leveraging (Alegreya Sans SC) is only available as a small caps family. When your "internet is off", the web font is not being loaded and therefore a default family is leveraged which most likely supports lower case.
To fix this, find where you're using Alegreya Sans SC within your stylesheets and simply switch to a more multi-case friendly family.

Looks like the google font Alegreya is causing this google.com/fonts/specimen/Alegreya+Sans+SC

Related

When i load localhost:3000 my scripts load in fine and work the moment i redirect to localhost:3000/weather/new they dont load in

Scripts won't load when I redirect to a new URL beside the standard localhost:3000
tried removing meta tags, also turned off adblockers
<head>
<title>Weather Report</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Flatty Weather Report template Responsive, Login form web template,Flat Pricing tables,Flat Drop downs Sign up Web Templates, Flat Web Templates, Login sign up Responsive web template, SmartPhone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="/css/search.css" rel="stylesheet" type="text/css" media="all" />
<!-- //Custom Theme files -->
<!-- web font -->
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
<!-- //web font -->
<!-- js --> `enter code here`
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/skycons.js"></script> <!-- skycons-icons -->
<!-- //js -->
</head>
I expect the scripts to load in when going to a different URL
Error messages:
The script from “http://localhost:3000/weather/js/jquery-2.1.4.min.js” was loaded even though its MIME type (“text/HTML”) is not a valid JavaScript MIME type.
new
Loading failed for the with source “http://localhost:3000/weather/js/jquery-2.1.4.min.js”
new:23:1
The script from “http://localhost:3000/weather/%7B%7Basset('/js/skycons.js')%7D%7D” was loaded even though its MIME type (“text/HTML”) is not a valid JavaScript MIME type.
new
Loading failed for the with source “http://localhost:3000/weather/%7B%7Basset('/js/skycons.js')%7D%7D”
new:24:1
ReferenceError: Skycons is not defined
new:135:19
ReferenceError: Skycons is not defined

External Vendor Scripts( JS, Jquery) Not working after render in ReactJS

I am creating a web app frontend using ReactJS.
I have downloaded a Template from W3layout which is designed using HTML5 CSS3 Custom JS file and also includes some third party/vendor JS/Jquery Plugins Like nice-select, bootstrap,slik, owl-carousel, etc
I am not a Front End Developer My expertise are in Serverside scripting & Database. So I just wanted to use the same downloaded template to develop ReactJS application.
But When page Loads/render 1st time its work fine but on navigating to other Route /Component Jquery/Other Vendor Scripts Stop Working.
Even I wanted to trigger update/change to the plugins Like
componentDidUpdate(){
// $('select').niceSelect('update');
}
All these are not working.
This is my Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="/img/fav.png">
<meta name="description" content="">
<meta name="keywords" content="">
<meta charset="UTF-8">
<!-- Site Title -->
<title>Training</title>
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet">
<!-- CSS
============================================= -->
<link rel="stylesheet" href="/css/linearicons.css">
<link rel="stylesheet" href="/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/magnific-popup.css">
<link rel="stylesheet" href="/css/nice-select.css">
<link rel="stylesheet" href="/css/animate.min.css">
<link rel="stylesheet" href="/css/owl.carousel.css">
<link rel="stylesheet" href="/css/jquery-ui.css">
<link rel="stylesheet" href="/css/main.css">
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> </head>
<body> <div id="root"></div>
<script src="/js/vendor/jquery-2.2.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="/js/vendor/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
<script src="/js/easing.min.js"></script>
<script src="/js/hoverIntent.js"></script>
<script src="/js/superfish.min.js"></script>
<script src="/js/jquery.ajaxchimp.min.js"></script>
<script src="/js/jquery.magnific-popup.min.js"></script>
<script src="/js/jquery.tabs.min.js"></script>
<script src="/js/jquery.nice-select.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/mail-script.js"></script>
<script src="/js/main.js"></script>
How can we use the existing vendors script on our react js without any issue .
jQuery binds its listeners to the existing dom elements. When the dom changes new nodes don't get those listeners automatically. You need to call the initialization phase of each jQuery script after the navigation (and any other significant dom change). Alternatively you can make those listeners to listen to document instead:
$('button').click(function(){})
should become
$(document).on('click', 'button', function(){})
As a fast fix you can force React Router to reload the page on every navigation:
<BrowserRouter forceRefresh/>
But you are likely to get similar troubles with other react components.
Some hints to fix the issue:
try to replace jQuery plugins with react modules
use the history object provided by React Router to listen for navigation changes and reinit jQuery code
use componentDidMount and componentDidUpdate to bind and update jQuery listeners

Bootstrap js not loading on Live server

I have searched the other questions but I do not get anything that really solves my problem. I downloaded a template that I want to use as a small portfolio for myself. On my local server everything works fine. But when I upload it to a live server something goes wrong. I believe the problem is with the Bootstrap.js or bootstrap-theme.css
Some functions are not running and dont display at all. Such as the loading bar when you open the site, backgrounds, some images and arrows.
I have done the following.
Checked all the paths to make sure they are correct.
Made sure that it is not a cache issue.
Tried to run it in private view (still the same problem)
Checked the firefox error log but all scripts seem to load.
Here is the template demo - http://designova.net/presence/index01.html
Here is my live version - codethis.co.za
Here is the code in the head and the js at the bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Code This - Beautiful Website Design and More</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://www.codethis.co.za/bootstrap/js/jquery.js" type="text/javascript"></script>
<script src="http://www.codethis.co.za/bootstrap/js/bootstrap.js" ></script>
<script src="http://www.codethis.co.za/javascripts/jquery.easing.1.3.js" type="text/javascript"></script>
<!-- Standard Favicon-->
<link rel="shortcut icon" href="images/favicon/favicon.ico">
<!-- Standard iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="57x57" href="images/touchicons/apple-touch-icon-57-precomposed" />
<!-- Retina iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="114x114" href="assets/touchicons/apple-touch-icon-114-precomposed" />
<!-- Standard iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="72x72" href="assets/touchicons/apple-touch-icon-72-precomposed" />
<!-- Retina iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="144x144" href="assets/touchicons/apple-touch-icon-144-precomposed" />
<!-- Bootstrap CSS Files -->
<link href="http://www.codethis.co.za/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="http://www.codethis.co.za/bootstrap/css/bootstrap-theme.css" rel="stylesheet">
<!-- Custom Fonts Setup via Font-face CSS3 -->
<link href="http://www.codethis.co.za/fonts/fonts.css" rel="stylesheet">
<!-- CSS files for plugins -->
<link href="http://www.codethis.co.za/stylesheets/pace.preloader.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/animate.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/owl.carousel.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/owl.theme.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/magnific-popup.css" rel="stylesheet" >
<link href="http://www.codethis.co.za/stylesheets/jquery.tweet.css" rel="stylesheet"/>
<link href="http://www.codethis.co.za/stylesheets/foliohover.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/fancymenu.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/intro.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/pricing.css" rel="stylesheet">
<!-- Main Template Styles -->
<link href="stylesheets/main.css" type="text/css" rel="stylesheet">
<!-- Main Template Responsive Styles -->
<link href="stylesheets/main-responsive.css" type="text/css" rel="stylesheet">
<!-- Main Template Retina Optimizaton Rules -->
<link href="stylesheets/main-retina.css" type="text/css" rel="stylesheet">
<!-- LESS stylesheet for managing color presets -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- LESS JS engine-->
<script src="http://www.codethis.co.za/less/less-1.5.0.min.js" type="text/css"></script>
<script src="http://www.codethis.co.za/javascripts/modernizr.custom.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="bootstrap/js/html5shiv.js"></script>
<script src="bootstrap/js/respond.min.js"></script>
<![endif]-->
<style>
.full-height{
height: 100%;
}
</style>
</head>
and at the bottom
<!-- JS Plugins -->
<script src="javascripts/pace.min.js"></script>
<script src="javascripts/retina.js"></script>
<script src="javascripts/device.min.js"></script>
<script src="javascripts/owl.carousel.js"></script>
<script src="javascripts/waypoints.min.js"></script>
<script src="javascripts/jquery.tweet.js"></script>
<script src="javascripts/okvideo.js"></script>
<script src="javascripts/jquery.mixitup.js"></script>
<script src="javascripts/flexslider.js" ></script>
<script src="javascripts/jquery.magnific-popup.js"></script>
<script src="javascripts/smooth-scroll.js"></script>
<script src="javascripts/form-validation.js"></script>
<script src="javascripts/classie.js"></script>
<script src="javascripts/fancymenu-rollin.js"></script>
<!-- Scroll Animations Setup -->
<script src="javascripts/wow.js"></script>
<script src="javascripts/animations-init.js"></script>
<!-- Custom Scripts Setup -->
<script src="javascripts/carousel-init.js" ></script>
<script src="javascripts/portfolio.js"></script>
<script src="javascripts/intro.js"></script>
<script src="javascripts/main.js"></script>
Please could someone help me with what is going on here
Your page is riddled with 404 errors, which means either (1) your paths are not correct, or (2) the files do not exist on the server.
Something to look at would be whether you are using relative paths or absolute paths for your JS, CSS, and image assets. Remember:
paths that start with a / will resolve to http://codethis.co.za/<path>
paths that do not start with a / will resolve relative to whatever the current path is
Perhaps you are missing a subfolder in your paths?
First of all you seem to have a problem loading some of your fonts (cross-origin) It should not be linked with your problem, but you should fix it.
You also have a :
Uncaught ReferenceError: $ is not defined
which could be relative to something with your JQuery, and this could explain a lot if you're using it heavily.
From what I see in network I don't have any missing images.
Thibaut

Left-clicking links doesn't work, but 'Open in New Tab' does

I'm working on my personal website (building from a template) and just as I finished up, my links stopped responding to left clicks. If you right-click and choose 'Open in New Tab,' they work just fine. When you hover over them, you can see the URL in the status bar at the bottom of the browser.
I've done a fair bit of searching about this already, and it seems there may be some JavaScript that's overriding the default behavior for the tag. I've tried looking in the Network and EventListener sections of the Chrome and Firefox DevTools, but I'm not entirely sure what I'm looking for.
I don't want to paste the code for the whole site here (too long), but you can download it from my Github page to try it out yourself.
Since I think the problem is related to JavaScript, here are the header and footer sections of my site, so you can see what I have attached:
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Mike Lipson | Instructional Technology Specialist</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-v=2.1.5.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="prefetch" href="images/zoom.png">
<style type="text/css" media="screen">
a.heading_link {
color: white;
}
</style>
<!-- SCRIPTS -->
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script> <!-- Potential link-breaker -->
<script type="text/javascript" src="fancybox/jquery.fancybox.pack-v=2.1.5.js"></script>
<script src="js/script.js"></script>
<!-- fancybox init -->
<script>
$(document).ready(function(e) {
var lis = $('.nav > li');
menu_focus( lis[0], 1 );
$(".fancybox").fancybox({
padding: 10,
helpers: {
overlay: {
locked: false
}
}
});
});
</script>
The carousel API automatically catches any click on [data-slide] or [data-slide-to] elements (tags that possess the data-slide or data-slide-to argument).
And you set on one of your main containers the <div data-slide="1"> attribute (see index.html#L68) therefore any click will be catched and prevented (e.preventDefault()).
You can see that in the carousel plugin definition js/carousel.js#L187.
So you should either remove this attribute and use another attribute name, or deactivate the carousel API.

Jquery conflicting in head section - Bootstrap and Supersized

I am struggling a bit with conflicting jquery in my head section of my site.
The problem happens when if I put the bootstrap jquery underneath then it stops working and the supersized DOES work.
But then when I swap them around it is visa versa, supersized DOESN'T work and bootstrap DOES.
This is my current head section
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/1140.css">
<link rel="stylesheet" href="/css/ie.css">
<!-- Bootstrap (for mobile navigation) -->
<link href="/css/bootstrap.css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width:480px)">
<link href="/css/bootstrap-responsive.css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width:480px)">
<!-- supersized sytlesheets -->
<link rel="stylesheet" href="/css/supersized.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/theme/supersized.shutter.css" type="text/css" media="screen" />
<script src="js/vendor/modernizr-2.6.1.min.js"></script>
<!-- supersized scripts (can't go in the bottom as it stops working -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<!--bootstrap has to go below min jquery for it to work and above supersized-->
<script src="/js/bootstrap/jquery.js"></script>
<script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
When I look in the bootstrap/jquery.js file, I cannot get my head round it as it is just all block text.
Anybody got any solutions? I am only using the bootstrap for mobile version also, so is there a way I can just include the jquery at a certain width, for example 480 - (which is when I disable the supersized anyway).
I also have script at the bottom of the document also and maybe this could be affecting this also??
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>')</script>
<script type="text/javascript" src="js/css3-mediaqueries.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Bootstrap Scripts -->
<script src="/js/bootstrap/bootstrap-transition.js"></script>
<script src="/js/bootstrap/bootstrap-dropdown.js"></script>
<script src="/js/bootstrap/bootstrap-collapse.js"></script>
<!-- Bootstrap scripts end -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
Basically, just due to trial and error, supersized won't work at the bottom for some reason and has to go in my head section.
And when bootstrap works then the supersized will not.
Please let me know a way to get past this and if there is something I have done wrong in my head section that is causing this.
Thanks

Categories