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>
Related
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 have View where body must be 100% height.
Here is code of page
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8" />
<title>Евгений Соя</title>
<link rel="shortcut icon" type="image/x-icon" href="mini.png"/>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
</head>
<body>
<header>
<div class="logo">
<img class="graficlogo" src="logo.png" alt="Logo">
</div>
<nav>
<div class="topnav" id="myTopnav">
Главная
Тур
Книги
<a id="menu" href="#" class="icon">☰</a>
</div>
</nav>
</header>
<script src="script.js"></script>
<div class="main">
<h1> "Времени пленница "-
новая песня Марии Чайковской по мотивам стихов Евгения Сои доступна iTunes.</h1>
<p></p>
</div>
<div class="icons">
<img class="embl1" src="INSTAGRAM_icon.png">
<a href="https://www.stihi.ru/avtor/sunfish"><img class="embl2"
src="111.png"></a>
</div>
</body>
</html>
Full code is here
https://codepen.io/suhomlineugene/pen/MXPGPN
When I open it on ios device all ok and I see this
ios
On android it is like this
Android
I don't understand why, if I had body 100% width and height.
How I can solve it?
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?
I have the following html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Datepicker - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="http://cdn.rawgit.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.css">
<script src="../js/jquery.js"></script>
<script src="../_assets/js/index.js"></script>
<script src="../js/jquery.mobile-1.4.5.min.js"></script>
<script src="http://cdn.rawgit.com/jquery/jquery-ui/1.10.4/ui/jquery.ui.datepicker.js"></script>
<script id="mobile-datepicker" src="http://cdn.rawgit.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.js"></script>
<script>
$("#resultDate").datepicker( "setDate" , "7/11/2011" );
</script>
</head>
<body>
<div data-role="page" class="jqm-demos" data-quicklinks="false">
<!-- /header -->
<div role="main" class="ui-content jqm-content">
<h2>Inline Datepicker</h2>
<div data-demo-html="true">
<input type="text" data-role="date" data-inline="true" disabled id="inputDate">
<input type="number" value="40" id="days">
<input type="text" data-role="date" data-inline="true" disabled id="resultDate" >
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
which is a demo from jquery mobile
I need to create a java script function that add a number of days to first textfield and displays the result in the last one.
It would be great if it will update the second picker value also.
I am trying to display google & facebook sign buttons side by side in a webpage.I'm using bootstrap social to display Facebook button and Google API to display Google button.By default I'm able to display them one below the other but when I try to display them one beside the error I'm not getting the desired output..
HTML Code..
<!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">
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="sample_client_id.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
<link href="css/bootstrap-social.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
<title>Login Page</title>
</head>
<body>
<div class ="google">
<div class="g-signin2" data-onsuccess="onSignIn"></div> <!--Google signup button-->
</div>
<!--FB signu p button-->
<div class="facebook" style="float: left;">
<a class="btn btn-block btn-social btn-facebook" onclick="facebookSignIn();" style="width:220px;">
<span class="fa fa-facebook"></span> Connect with Facebook
</a>
</div>
</body>
</html>
Current Output..
<!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">
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="sample_client_id.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
<link href="css/bootstrap-social.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
<title>Login Page</title>
</head>
<body><div class ="google">
<div style="float:left;" class="g-signin2" data-onsuccess="onSignIn">goooogle</div>
</div>
<!--FB signu p button-->
<div class="facebook" style="float: left;">
<a class="btn btn-block btn-social btn-facebook" onclick="facebookSignIn();" style="width:220px;">
<span class="fa fa-facebook"></span> Connect with Facebook
</a>
</div></body>
Remove , to .google and .facebook you can give display: inline-block; or you can give to both float: left;
Use This CSS Style code:
.google{
float:left;
}
.facebook{
float:left;
}
Use css code:
.google, .facebook {
float:left;
}
Or
.google, . facebook{
display:inline-block;
}