I'm beginner for PHP. Why I cannot link to the CSS file with these codes? What's wrong with my code? Could someone help me?
header.php
<html lang="en">
<head>
<title> </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="description" content="Bootstrap 3 responsive centered columns">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Codrops" />
<script>
var template_dir_js = "<?php echo get_template_directory_uri();?>";
</script>
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.dropotron.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.slidertron.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/skel.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/skel-layers.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/init.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/modernizr.custom.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/foundation.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/foundation.min.js" type="text/javascript"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="shortcut icon" href="../favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<noscript>
<p><link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/css/skel.css" /></p>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-desktop.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-mobile.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/fakeLoader.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/gravity-forms-bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/default.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/component.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/foundation-flex.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/foundation.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/foundation.min.css" />
</noscript>
</head>
Supposed to localhost/wordpress/wp-content/themes/Beyond/css/style.css(correct URL) but now it links to localhost/wordpress/sample-page/css/style.css(wrong URL). How to change the link to correct URL? Wordpress can load my Javascript but it cannot load my CSS file.
URL for linking CSS file
File Directory
Get the value of your template directory uri in a variable then use it in the program.if it is not coming just echo the value of $template_dir and post it here
<?php
$template_dir = get_template_directory_uri();
?>
<link rel="stylesheet" type="text/css" href="<?php echo $template_dir;?>/css/style.css" />
You are missing the echo statement. Try changing this:
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style.css" />
to this
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_directory');?>/css/style.css" />
Does this help?
Related
I barely started learning bootstrap and I'm facing this problem, Bootstrap 5 basic row doesn't seem to work like in the tutorial I'm learning from, Project structure:
index.html:
<!DOCTYPE html>
<html lang="en">
<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" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<title>Test Document</title>
</head>
<body>
<div class="row">
<div>test</div>
<div>test2</div>
<div>test3</div>
<div>test4</div>
</div>
<script src="js/main.js"></script>
<script src="js/jquery-3.6.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
the result I'm getting:
Try this.
<!DOCTYPE html>
<html lang="en">
<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" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<title>Test Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<span>test</span>
<span>test2</span>
<span>test3</span>
<span>test4</span>
</div>
</div>
</div>
<script src="js/main.js"></script>
<script src="js/jquery-3.6.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
I am trying to target two html in one javascript and I have no idea if that is even possible
I tried giving ids and classes to the html tag but it doesnt work. i have an image that I want it to be clickable do direct users to another html and gave it and id and tried targeting it in js but it still doesnt work. i have tried the a href tag but its not what i want.
$(function(){
$("#close1").on("click",closepage);
})
function closepage() {
// console.log(checkUi);
$("#space-3").css("display","block");
$(".chat__main").css("opacity", "0");
$("#chat-content").css("opacity","0");
}
I want to close the second and third HTML which is .chat__main and #chat-content
To be clearer, I would like to target different IDs from three different HTML. Everything is in the same folder, linked with the same javascript
this is the third HTML for an example. main.js is the js im working with. I want to close this HTML when users clicked on the "close" button.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no'>
<title>HybriD </title>
<link rel="stylesheet" href="css/main.css">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
</head>
<body class="chat">
<div class="chat__sidebar">
<h3>People</h3>
<div id="users"></div>
</div>
<div class="chat__main">
<div class="topChat">
<img src="img/cross.png" id="close1">
<h3 id="chatTitle">HybriD Chat</h3>
</div>
<ol id="messages" class="chat__messages"></ol>
<div class="chat__footer">
<form id="message-form">
<input name="message" type="text" placeholder="Message" autocomplete="off"/>
<button id="submit-btn"><img src="img/send.png" alt="Send" height="50" width="50"></button>
</form>
</div>
</div>
<script id="message-template" type="text/template">
<li class="message">
<div class="message__title">
<h4>{{from}}</h4>
<span>{{createdAt}}</span>
</div>
<div class="message__body">
<p>{{text}}</p>
</div>
</li>
</script>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/libs/moment.js"></script>
<script type="text/javascript" src="js/libs/mustache.js"></script>
</body>
</html>
This is the second HTML. This is the two HTML that I want to target to close. Am I targeting the wrong IDs?
<html>
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no'>
<title>HybriD </title>
<meta name="description" content="Basic Example — Networked-Aframe">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<link rel="stylesheet" type="text/css" href="css/vendor/common.css">
<link rel="stylesheet" type="text/css" href="css/vendor/load.css">
<link rel="stylesheet" href="css/vendor/hamburgers.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link rel="manifest" href="favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<script src="js/vendor/aframe-master.js"></script>
<script src="js/vendor/aframe-mouse-cursor-component.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="js/vendor/jquery-1.11.2.min.js"></script>
<script src="js/vendor/socket_io.js"></script>
<script src="easyrtc/easyrtc.js"></script>
<script src="js/vendor/network-aframe.js"></script>
<script src="js/vendor/aframe-particle.js"></script>
<script src="js/vendor/TweenMax.min.js"></script>
</head>
<body class="centered-form" id="loginpage">
<div id="chat-wrapper">
<div id="chat-content">
<svg id="home-logo2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 344.74 321.88"><defs><style>.cls-1{fill:#ececec;}.cls-2{fill:#07f;}.cls-3{fill:#ffce2e;}</style></defs><title>Asset 2</title></svg>
<!-- <input type="image" id="close1" src="img/cross.png">-->
<img src="img/cross.png" id="close1">
<div id="login" class="centered-form__form">
<form action="/chat.html">
<div class="form-field"><h3>Join Chat</h3></div>
<div class="form-field">
<input type="text" name="name" placeholder="Display Name">
</div>
<div class="form-field">
<input type="text" name="room" placeholder="Room Name">
</div>
<div class="form-field">
<button>Join</button>
</div>
</form>
</div>
</div>
</div>
<script src="js/vendor/AVideoPlayer.js"></script>
<script src="js/vendor/jquery.Wload.js"></script>
<script src="js/vendor/jquery-1.11.2.min.js"></script>
<script src="js/main.js"></script>
<script src="js/chat.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
for the main HTML, it is very complicated. The first page the users see will be a login page. After they have logged in, they will be directed to an image called "#space-3" which i want to direct the users there.
this is the main HTML for my website:
<html>
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no'>
<title>HybriD </title>
<meta name="description" content="Basic Example — Networked-Aframe">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<link rel="stylesheet" type="text/css" href="css/vendor/common.css">
<link rel="stylesheet" type="text/css" href="css/vendor/load.css">
<link rel="stylesheet" href="css/vendor/hamburgers.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link rel="manifest" href="favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<script src="js/vendor/aframe-master.js"></script>
<script src="js/vendor/aframe-mouse-cursor-component.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="js/vendor/jquery-1.11.2.min.js"></script>
<script src="js/vendor/socket_io.js"></script>
<script src="easyrtc/easyrtc.js"></script>
<script src="js/vendor/network-aframe.js"></script>
<script src="js/vendor/aframe-particle.js"></script>
<script src="js/vendor/TweenMax.min.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(e){
e.preventDefault(); // prevents page reloading
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
});
</script>
</head>
<body>
<div id="error">
<img id="disconnect-icon" src="img/disconnect.svg" alt="">
<p class="error-msg">
Disconnected from the server.
</p>
<p class="error-msg">
Please refresh the page.
</p>
</div>
<div id="home-wrapper">
<div id="home-content">
<svg id="home-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 344.74 321.88"><defs><style>.cls-1{fill:#ececec;}.cls-2{fill:#07f;}.cls-3{fill:#ffce2e;}</style></defs><title>Asset 2</title></svg>
<div id="home-step-one">
<div id="visitor-button" class="home-buttons">Visitor</div>
<div id="admin-button" class="home-buttons">Admin</div>
</div>
<div id="home-step-two">
<form id="admin-form">
<input type="password" id="pin" placeholder="Password">
<input type="text" id="room-name" placeholder="Room Name">
<div id="enter-button">Enter Lobby</div>
<div id="create-button">Create</div>
<div id="join-button">Join</div>
<div id="create-private">
<img id="create-private-icon" src="img/create.svg" alt="">
<span>Create Private</span>
</div>
<div id="join-private">Join Private</div>
</form>
<input type="image" src="img/back.svg" id="back">
</div>
<p id="copyright">©2019 Suntec Singapore. All Rights Reserved. </p>
</div>
</div>
<button class="hamburger hamburger--arrow" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div id="levels-wrapper">
<ul id="levels-inner">
<li id="level3">Level 3</li>
<li id="level4">Level 4</li>
<li id="level6">Level 6</li>
<img src="img/logo-white.svg" alt="" id="nav-logo">
</ul>
</div>
<a id="chat" href="login.html"><input type="image" id="chat" src="img/chat.svg"></a>
<input type="image" id="nav" src="img/navigate.svg">
<!-- <input type="image" id="chat" src="img/chat.svg">-->
<input type="image" id="to-banq" src="img/banquet.svg">
<span id="banq-text" class="nav-text">Banquet</span>
<input type="image" id="to-buffet" src="img/buffet.svg">
<span id="buffet-text" class="nav-text">Buffet</span>
<input type="image" id="to-ex" src="img/exhibition.svg">
<span id="ex-text" class="nav-text">Exhibition</span>
<input type="image" id="to-conf" src="img/conference.svg">
<span id="conf-text" class="nav-text">Conference</span>
<input type="image" id="to-concert" src="img/concert.svg">
<span id="concert-text" class="nav-text">Concert</span>
<input type="image" id="to-event" src="img/event.svg">
<span id="event-text" class="nav-text">Event</span>
<input type="image" id="to-space" src="img/space.svg">
<span id="space-text" class="nav-text">Space Only</span>
<input type="image" id="to-classroom" src="img/classroom.svg">
<span id="classroom-text" class="nav-text">Classroom</span>
<input type="image" id="video-control" src="img/video.svg">
<input type="image" id="play-vid" src="img/play.svg">
<input type="image" id="mute-vid" src="img/mute.svg">
<input type="image" id="replay-vid" src="img/reset.svg">
<a-scene networked-scene="room: lobby; debug: true;">
<a-assets>
<img id="buffet-3" crossorigin="anonymous" src="img/level3buffet.JPG">
<img id="space-3" crossorigin="anonymous" src="img/level3space.jpg">
<img id="classroom-3" crossorigin="anonymous" src="img/level3classroom.jpg">
<img id="cluster" crossorigin="anonymous" src="img/Hall 406CX Cluster2.jpg">
<img id="banquet" crossorigin="anonymous" src="img/Hall 405BXE 406CXD banquet.jpg">
<img id="exhibition" crossorigin="anonymous" src="img/hall 40123 exhibtion.jpg">
<img id="concert-2" crossorigin="anonymous" src="img/level6concert.jpg">
<img id="banquet-2" crossorigin="anonymous" src="img/level6banq.JPG">
<img id="event" crossorigin="anonymous" src="img/level6event.jpg">
<img src="img/landmark.png" id="platform" crossorigin="anonymous">
<!-- This is where you can change the client's logo -->
<img src="img/SuntecLvl4Logo.png" id="logo2" crossorigin="anonymous">
<img src="img/SuntecLvl4Logo.png" id="logo3" crossorigin="anonymous">
<!-- Videos on the projector screens -->
<video id="video-src" src="img/3x4border.mp4" playsinline webkit-playsinline></video>
<video src="img/2x3.mp4" id="video-src2" playsinline webkit-playsinline></video>
</a-assets>
<a-node></a-node>
<a-video class="clientVideos" id="video-screen" src="#video-src" rotation="0 -90 0" position="100 15.935 17" width="40" height="30"></a-video>
<a-video class="clientVideos" id="video-screen2" src="#video-src2" rotation="0 -90 0" position="100 1.935 6.500" width="60" height="15"></a-video>
<a-sky id="sky" src="#space-3" rotation="0 180 0"></a-sky>
<a-circle id="logo" src="#platform" radius="1" rotation="-90 0 0" position="9.54196 -171.79611 -1.47969" material="" geometry="radius: 27.1"></a-circle>
<a-plane class="clientPictures" id="ex-logo" src="#logo2" position="-20.5 5.9757 -0.41456" rotation="0 90 0" material="side: double; color: #FFFFFF; transparent: true; opacity: 1.5" height="4" width="9" geometry="" visible=""></a-plane>
<a-plane class="clientPictures" id="classroom-logo" src="#logo3" position="59.7606 4.21649 6.21335" rotation="0 -75.05747116213784 0" material="side: double; color: #FFFFFF; transparent: true; opacity: 1.5" height="4" width="9" geometry="" visible="" scale="2.7 2.7 2.7"></a-plane>
<a-entity light="distance:1;type:ambient" id="lightit"></a-entity>
</a-scene>
<script src="js/vendor/AVideoPlayer.js"></script>
<script src="js/vendor/jquery.Wload.js"></script>
<script src="js/vendor/jquery-1.11.2.min.js"></script>
<script src="js/main.js"></script>
<script src="js/chat.js"></script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
</html>
Please ignore the home-logo as it is just a logo with animation
You can link single JavaScript file in different HTML file and target them as long it is valid selector.
If you want target multiple selector you can do something like this.
$('.chat__main , #chat-content').css("opacity", "0");
And of course, don't forgot to include
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
I was following this and more articles:
How to display a loading html page while site content loads?
and this here: my favourite:
`https://codepen.io/mimoYmima/pen/fisgL`
My problem is that if I copy and paste it 1:1 my loading page doesn't fade away but if the site is already in cache it doesn't show it.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="Dexter" content="">
<title>Code-Unknown</title>
<!-- ============ GOOGLE FONTS ============ -->
<link href='font-awesome/fonts/Raleway.css' rel='stylesheet' type='text/css'>
<link href='font-awesome/fonts/Open+Sans.css' rel='stylesheet' type='text/css'>
<link href='font-awesome/fonts/Iceberg.css' rel='stylesheet' type='text/css'>
<!-- CSS -->
<!-- Animate css -->
<link rel="stylesheet" type="text/css" href="css/animate.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
<!-- Custom styles CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Bootstrap v3.3.1 -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Favicons -->
<link rel="shortcut icon" href="images/Code-Unknown.ico">
<!-- Css 2.0 -->
<link rel="stylesheet" href="client-login/assets/css/form-elements.css">
<link rel="stylesheet" href="client-login/assets/css/style.css">
<link rel="stylesheet" type="text/css" href="client-login/assets/css/sweetalert.css">
<link href="assets/css/please-wait.css" rel="stylesheet">
<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="client-login/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="client-login/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="client-login/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="client-login/assets/ico/apple-touch-icon-57-precomposed.png">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader"></div>
<!-- HEADER -->
<header id="top">
<canvas id="constellation"></canvas>
<div class="welcome">
<div class="logo"><img src="images/logo.png" width="190" height="190" alt=""> </div>
<h1>WELCOME</h1>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 social-login">
<div class="social-login-buttons">
<a class="btn btn-link-2" href="">
<i class="fa fa-steam"></i> Steam
</a>
<a class="btn btn-link-2" href="">
<i class="fa fa-server"></i>
</a>
<a class="btn btn-link-2" href="">
<i class="fa fa-list-alt"></i>
</a>
<a class="btn btn-link-2" href="">
<i class="fa fa-list-alt"></i>
</a>
</div>
</div>
</div>
<p> </p>
</div>
</header>
<!-- END HEADER -->
<!-- END FOOTER -->
<!-- Javascript files -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Backstretch -->
<script src="js/jquery.backstretch.min.js"></script>
<!-- CountDown -->
<script src="js/jquery.countdown.js"></script>
<!-- Validate form -->
<script src="js/jquery.validate.js"></script>
<!-- Scroll Reveal -->
<script src="js/scrollReveal.js"></script>
<!-- Youtube Player -->
<!-- Smooth-scroll -->
<script src="js/smooth-scroll.js"></script>
<!-- Ajax chimp -->
<script src="js/jquery.ajaxchimp.js"></script>
<!-- TweenLite -->
<script src="js/TweenLite.min.js"></script>
<!-- EasePack -->
<script src="js/EasePack.min.js"></script>
<!-- rAF -->
<script src="js/rAF.js"></script>
<!-- Constellation -->
<script src="js/constellation.js"></script>
<!-- Custom -->
<script src="js/main.js"></script>
<!-- right click off -->
<script src="js/rightclickoff.js"></script>
<!-- loading -->
<script src="js/loading.js"></script>
</body>
</div>
</html>
Try this one
$(function() { // waiting for the page to bo be fully loaded
$('#preloader').fadeOut('slow', function() { // fading out preloader
$(this).remove(); // removing it from the DOM
});
});
#preloader {
width: 100vw; /* viewport width */
height: 100vh; /* viewport height. You can use percents, though. It requires your html and body to be 100% x 100% too */
position: fixed;
background: #333 url(http://files.mimoymima.com/images/loading.gif) center no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader"></div>
We also need your markup to narrow down your issue.
Once upon a time my single page rails app showed a nice d3.js graph. This was derived from a database and showed all the users in the app.
Then I applied devise. The intention was for the same d3.js svg (called graph.js in the app) to show up in all users screene
I changed the users table so that it accommodated the devise fields as well as my own.
Now the d3.js won't show and I don't know why.Everything else shows on the page however including other javascript files in the same assets folder does show up. Debugging in the chrome browser shows there are no javascript errors. I'm not sure where to begin with finding out why the javascript doesn't show up
The code for the page:
<!DOCTYPE html>
<html>
<head>
<title>Graph</title>
<link data-turbolinks-track="true" href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/dcsns_dark.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/dcsns_light.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/dcsns_wall.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/transition.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/alert.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/modal.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/dropdown.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/scrollspy.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/tab.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/tooltip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/popover.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/button.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/collapse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/carousel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/affix.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/d3.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bchart.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/d3.v3.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/graph.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/user.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="jACMIxlQrneyrGGgGKtYZaK587ab6/W6KKQD7YyU+Es=" name="csrf-token" />
</head>
<body>
<div class="container-full">
<div class="row">
<div class="col-lg-12 text-center v-center">
<h1>big.f</h1>
</div>
</div>
</div>
<p class="navbar-text pull-right">
Logged in as <strong>sebastiz#example.com</strong>.
<a class="navbar-link" href="/users/edit">Edit profile</a> |
<a class="navbar-link" data-method="delete" href="/users/sign_out" rel="nofollow">Logout</a>
<script src="/assets/javascripts/d3.v3.min.js" charset="utf-8"></script>
<script> $(".alert").addClass("in").fadeOut(4500);
/* swap open/close side menu icons */
$('[data-toggle=collapse]').click(function(){
// toggle icon
$(this).find("i").toggleClass("glyphicon-chevron-right glyphicon-chevron-down");
});
//initializeGraph();
</script>
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<div class="col-md-8">
<div id="chart"><script src="/assets/graph.js?body=1"></script></div>
</div>
</div>
<div class="span4">
<div class="col-md-2">
<div class="well">
<h2>Profile</h2>
<p>
<a class="btn" href="#">View details »</a>
<div class='profile-content'></div>
<div id="FBDiv"></div>
</p>
</div>
<div id="chart_1"><script src="/assets/bchart.js?body=1"></script></div>
</div>
</div>
</div>
</div>
I created a wordpress theme, that is using javascript .innerHTML to insert content into certain divs. It is inserting text fine, but is not inserting images.
document.getElementById("title").innerHTML='<img src="images/header.gif"/>'
My knowledge on php is terrible but I also tried this
document.getElementById("title").innerHTML='<img src="<?php bloginfo('template_directory'); ?>/images/mainimage.jpg" title="" alt="" />';
here is index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/javascript.js"></script>
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>
<body onload="formatPage();">
<div id="container">
<div id="logo"></div>
<div id="title"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
</body>
</html>
Here is javascript.js
function formatPage(){
document.getElementById("title").innerHTML='<img src="<?php bloginfo('template_directory'); ?>/images/header.gif" title="" alt="" />';
}
I understand my doctype is outdated and there may be some unneeded php in the header.
Confirm that the image path is correct. You must include that js file is in head section. That's why the pic is not getting loaded.And also move the head portion to header.php if its now in index.php.