I'm working on a Laravel project which uses Webflow's CSS framework rather than the default bootstrap framework. It works great for most pages, but I do have a 'profile' page where the CSS does not work at all. I found out it's because the route for the page uses a variable, it looks like this:
Route::get('/chum/{id}', 'App\Http\Controllers\ProfilesController#display');
The function:
public function display($id){
$users = User::findOrFail($id);
$following = $users->followings->count();
$followers = $users->followers->count();
return view('profile', [
'users' => $users,
'following' => $following,
'followers' => $followers
]);
As you can see you go to the URL along with the id of the user's profile and it should bring you there. But for some reason the fact that you're adding that variable to the end of the URL causes the CSS to not work at all. If it helps at all these are the stylesheets and javascript files I'm using in the boilerplate.
<!DOCTYPE html><!-- This site was created in Webflow. http://www.webflow.com -->
<!-- Last Published: Sun Nov 29 2020 00:43:15 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="5fc2087d6594016e2f088aed" data-wf-site="5fc06e9787e537386fa53575">
<head>
<meta charset="utf-8">
<title>Profile</title>
<meta content="Profile" property="og:title">
<meta content="Profile" property="twitter:title">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/cascade-ui.webflow.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">
WebFont.load({
google: {
families: ["Courier Prime:regular,italic,700,700italic"]
}
});
</script>
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script type="text/javascript">
! function(o, c) {
var n = c.documentElement,
t = " w-mod-";
n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch")
}(window, document);
</script>
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon">
</head>
<body>
(Content would go here.)
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5fc06e9787e537386fa53575" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>
You should change the path/url of your asset to root folder of your site. Maybe just need / at beginning. change
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/cascade-ui.webflow.css" rel="stylesheet" type="text/css">
to
<link href="/css/normalize.css" rel="stylesheet" type="text/css">
<link href="/css/webflow.css" rel="stylesheet" type="text/css">
<link href="/css/cascade-ui.webflow.css" rel="stylesheet" type="text/css">
or you can also change with asset helper function of laravel to add your full URL of the current host. like
<link href="{{asset('css/normalize.css')}}" rel="stylesheet" type="text/css">
{{asset('css/normalize.css')}} will be https://yourhost.com/css/normalize.css
Related
When I hit http://127.0.0.1:8000/welcome everything renders fine.
But with http://127.0.0.1:8000/hh/welcome the page looks like it has no CSS references or anything at all.
Any idea why it is like this and how to solve it?
Thanks a lot!
routes > web.php
Route::get('/hh/welcome', [BikeController::class, 'show']);
Route::get('welcome', [BikeController::class, 'show']);
app > Http > Controllers > BikeController.php
public function show(Bike $bike)
{
return view('bikes.show', [
'bike' => $bike
]);
}
resources > views > bikes > show.blade.php
<x-layout>
<h1>Hello World!</h1>
</x-layout>
resources > views > components > layout.blade.php
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>BM | Dashboard & Web App Template</title>
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png" />
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicons/favicon.ico" />
<link rel="manifest" href="assets/img/favicons/manifest.json" />
<meta name="msapplication-TileImage" content="assets/img/favicons/mstile-150x150.png" />
<meta name="theme-color" content="#ffffff" />
<script src="assets/js/config.js"></script>
<script src="vendors/overlayscrollbars/OverlayScrollbars.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700%7cPoppins:300,400,500,600,700,800,900&display=swap" rel="stylesheet" />
<link href="vendors/overlayscrollbars/OverlayScrollbars.min.css" rel="stylesheet" />
<link href="assets/css/theme-rtl.min.css" rel="stylesheet" id="style-rtl" />
<link href="assets/css/theme.min.css" rel="stylesheet" id="style-default" />
<link href="assets/css/user-rtl.min.css" rel="stylesheet" id="user-style-rtl" />
<link href="assets/css/user.min.css" rel="stylesheet" id="user-style-default" />
<script>
var isRTL = JSON.parse(localStorage.getItem("isRTL"));
if (isRTL) {
var linkDefault = document.getElementById("style-default");
var userLinkDefault = document.getElementById("user-style-default");
linkDefault.setAttribute("disabled", true);
userLinkDefault.setAttribute("disabled", true);
document.querySelector("html").setAttribute("dir", "rtl");
} else {
var linkRTL = document.getElementById("style-rtl");
var userLinkRTL = document.getElementById("user-style-rtl");
linkRTL.setAttribute("disabled", true);
userLinkRTL.setAttribute("disabled", true);
}
</script>
</head>
<body>
<main class="main" id="top">
<div class="container" data-layout="container">
<script>
var isFluid = JSON.parse(localStorage.getItem("isFluid"));
if (isFluid) {
var container = document.querySelector("[data-layout]");
container.classList.remove("container");
container.classList.add("container-fluid");
}
</script>
#include('_nav-vertical')
<div class="content">
#include('_nav-top')
{{ $slot }}
#include('_footer')
</div>
{{-- #include('_modal') --}}
</div>
</main>
<script src="vendors/popper/popper.min.js"></script>
<script src="vendors/bootstrap/bootstrap.min.js"></script>
<script src="vendors/anchorjs/anchor.min.js"></script>
<script src="vendors/is/is.min.js"></script>
<script src="vendors/echarts/echarts.min.js"></script>
<script src="vendors/fontawesome/all.min.js"></script>
<script src="vendors/lodash/lodash.min.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
<script src="vendors/list.js/list.min.js"></script>
<script src="assets/js/theme.js"></script>
</body>
</html>
Because you are currently loading your CSS relative to your URL
Try the following:
<link href="{{asset('assets/css/example.css')}}" rel="stylesheet"/>
or take a look at: https://laravel.com/docs/9.x/helpers#method-asset
You are loading assets in the wrong way actually in your layout.blade.php made these modifications. Then it will work fine. Apply this to your all assets like Images, CSS, and JS files. Apply asset function with every asset like this in curly braces.
<link href="{{ asset('assets/css/theme-rtl.min.css') }}" rel="stylesheet" id="style-rtl" />
Apply this on all CSS also on JS like this
<script src="{{ asset('vendors/popper/popper.min.js') }}"></script>
Also make sure all files are aviable on disk.
Please help, ajax is not working..
I tried the tutorial from here,
Ajax box PHP
it works well, but when the code is installed in a different page, I just don't want to work.
here is codes
<!DOCTYPE html>
<html lang="en">
<head>
<script src="typeahead.min.js"></script>
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'typeahead',
remote:'search.php?key=%QUERY',
limit : 10
});
});
</script>
<link rel="stylesheet" type="text/css" href="asset/css/bootstrap.min.css">
<script src="typeahead.min.js"></script>
<link rel="stylesheet" type="text/css" href="asset/css/plugins/font- awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="asset/css/plugins/simple-line-icons.css"/>
<link rel="stylesheet" type="text/css" href="asset/css/plugins/animate.min.css"/>
<link rel="stylesheet" type="text/css" href="asset/css/plugins/fullcalendar.min.css"/>
<link rel="stylesheet" href="asset/datepicker/datepicker3.css">
<link rel="stylesheet" type="text/css" href="asset/css/plugins/datatables.bootstrap.min.css"/>
<link href="asset/css/style.css" rel="stylesheet">
<link rel="stylesheet" href="asset/select2/select2.min.css">
<!-- end: Css -->
<script type="text/javascript" src="asset/js/jquery.min.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<link rel="shortcut icon" href="asset/img/logomi.png">
</head>
<body>
<div id="content">
<div class="bs-example">
<input type="text" name="typeahead" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Type your Query">
</div>
</div>
</div>
please help... thanks..
Please try by including the js and other bootstrap files first. And then try to execute the jquery and ajax code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="typeahead.min.js"></script>
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'typeahead',
remote:'search.php?key=%QUERY',
limit : 10
});
});
</script>
Now it will works. Also make sure that all the js related files are included properly. While running the page in browser, type f12 and check the ajax call is generated or not.Hope it works.
I am trying to create a collapsible div (using the jQuery Mobile feature) using the data from a MYSQL database. The collapsible styles are not being applied and i cant figure out what the problem is?
possible the php script?
here's what i have
page.html
<html>
<head>
<title>My App</title>
<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="mobile-web-app-capable" content="yes">
<!-- css files -->
<!--BoilerPlate-->
<link href="css/normalize.css" rel="stylesheet" type="text/css" />
<!--<link href="css/main.css" rel="stylesheet" type="text/css" />-->
<!--end boilerplate styles-->
<!--my custom css-->
<link href="css/mainstyles.css" rel="stylesheet" type="text/css" />
<link href="css/buttons.css" rel="stylesheet" type="text/css" />
<!-- jQuery mobile js/css -->
<script src="js/jquery-3.1.1.js" type="text/javascript"></script>
<link href="js/jquery.mobile-1.4.5.css" rel="stylesheet" type="text/css" />
<!-- end of custom styles -->
<!-- END css declaration -->
</head>
<body>
<div id="canvasArea"></div>
<canvas id="cnvChart"></canvas>
<!-- JAVASCRIPT Libraries -->
<script src="chart.js/Chart.js" type="text/javascript"></script>
<script src="js/lineGraph.js" type="text/javascript"></script>
<script src="js/jquery-3.1.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.5.js" type="text/javascript"></script>
<script>
// Listen for orientation changes
window.addEventListener("orientationchange", function () {
location.reload(true);
// Announce the new orientation number
}, false);
var canvasAreaDiv = document.getElementById(
'canvasArea');
if(window.innerHeight > window.innerWidth) {
//portrait mode, so show the php script!
$(canvasAreaDiv).load("php/reflective-notes.php");
}
else {
//show the graph
showGraph();
}
</script>
</body>
script.php
$username = $_SESSION['username'];
$reflectiveMessageQuery = "SELECT date, notes FROM table WHERE
userName = '$username'";
$result = mysqli_query($conn, $reflectiveMessageQuery) or die(mysqli_error());
$count = mysqli_num_rows($result);
$rowCount = 0;
while ($row = mysqli_fetch_array($result)) {
$date = $row['date'];
$note = $row['notes'];
if($note === NULL){
$note = "no notes...";
}
echo'<div data-role="collapsible"><h1>'. $date . '</h1> <p>'.$note.'</p>'
.'</div>';
}
?>
I am using PHP (DOMDocument and DOMXPath classes to be more precise) to modify the content of an HTML file (for the moment I just change the title in the head tag and the first element of the body which is an h1).
The functionality is there meaning that I am able to modify what I desire into the document but the output is not keeping the indentation of the original file.
What solutions I found online are referring to XML, having to no effect when it comes to HTML.
My question is how can I keep my original indentation after using DOMXPath? It is even possible using this alone or I should consider some 3rd party library?
My PHP code snippet:
<?php
$dom = new DOMDocument;
$dom->loadHTMLFile($dst . '/index.html');
$xpath = new DOMXPath($dom);
$title_tag = $xpath->query('/html/head/title')->item(0);
$title_tag->nodeValue = $_POST['website-title'];
$body_tag = $xpath->query('/html/body/h1')->item(0);
$body_tag->nodeValue = $_POST['website-title'];
$dom->saveHTMLFile($dst . '/index.html');
?>
Original 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">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello world!</h1>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
Output HTML :
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Test Website</title><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"><link rel="icon" type="image/x-icon" href="favicon.ico"><!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]--></head><body>
<h1>Test Website</h1>
<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script></body></html>
EDIT: After using $dom->formatOutput = true; (thank you PeeHaa for this) before saving the HTML file, the output is the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Website</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Test Website</h1>
<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
I am trying to tidy up a header in netbeans 8.0 which I am using as part of a view. The editor is underlining:
<link href="<?=base_url('css/bootstrap.css')"></link>
Please see screenshot. Why? what am I doing wrong?
The full code for my header is:
<head>
<base href="<?=base_url();?>">
<meta charset="utf-8">
<title>Your Contacts</title>
<meta name="description" content="manage your contacts with name, email and phone">
<meta name="author" content="yubi4dition">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="<?=base_url('css/bootstrap.css')"></link>
<link rel="stylesheet" type="text/css" ></link>
<link href="<?=base_url('css/yourcontacts.css')?>" rel="stylesheet" type="text/css" ></link>
<link href="<?=base_url('css/font-awesome.css')?>" rel="stylesheet" type="text/css" ></link>
<link href="<?=base_url('css/tablesorter.css')?>" rel="stylesheet" type="text/css" ></link>
<!-- Le fav and touch icons -->
<link href="<?=base_url('css/ico/favicon.ico')?>" rel="shortcut icon" ></link>
<link rel="stylesheet" type="text/css" href="css/bootstrap-wysihtml5.css"></link>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"></link>
</head>
Try
<link href="<?=base_url('css/bootstrap.css') ?>"></link>
you seem to lack the closing tag.
Missing the closing PHP tag :)