My blade view shows a empty page, but if I press CTRL + U to show the source code, then I get this:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='http://localhost/portal_testing/public/css/style.css'/>
<script src='http://localhost/portal_testing/public/js/main.js'/>
</head>
<body>
<div>
<div class='infoBox'>
<h4 class='infoBoxTitle'>Log:</h4>
<div class='infoBoxContent'>
<p>test</p>
</div>
</div>
<div class='errorBox'>
<h4 class='errorBoxTitle'>Error Log:</h4>
<div class='errorBoxContent'>
<p>test</p>
</div>
</div>
</div>
</body>
</html>
Why is it not rendering even though there is valid code?
UPDATE:
Javascript:
//Accordion:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
CSS
.infoBox {
font-family: arial;
padding:2px;
background-color: #DADADA;
min-width: 300px;
min-height: 100px;
margin:2px;
border:1px solid black;
}
.infoBoxTitle {
padding:4px;
font-size: 13px;
color: red;
margin: 1px;
text-decoration: underline;
}
.infoBoxContent {
font-size: 10px;
padding-left:5px;
margin-left:10px;
border: 1px solid gray;
}
.errorBox {
font-family: arial;
padding:2px;
background-color: #838383;
min-width: 300px;
min-height: 100px;
margin:2px;
border:1px solid black;
}
.errorBoxTitle {
padding:4px;
font-family: calibry;
font-size: 13px;
color: white;
margin: 1px;
text-decoration: underline;
}
.errorBoxContent {
color: white;
font-size: 11px;
padding-left:5px;
margin-left:10px;
border: 4px solid white;
}
I found the problem...
I noticed that all the content was rendered inside of the script tag:
The reason is, becaues the script element was missing it's closing tag.
Fix:
<script type="text/javascript" src='{{ URL::asset("js/main.js") }}'></script>
Related
When I try to display content from another blade template, it will only show certain data on the webpage. What I want is inside this page, the content from test.blade.php together with the button, when click will pop up a form(I don't want the test.blade.php content to be inside). But whenever I try to do it, only certain information is shown and when I view page source, all the data has already been loaded. I have asked this question before already and someone told me it was the fault of my css, but I when I try to look at it, I don't really see anything which is causing this to happen. Can someone help me please? Thanks in advance!
I will put the screenshot here first in the question.
This is what it is suppose to look like where it will have a scroll down bar, and below there should be a button for the popup form.
But this is what I am getting (I have checked that all the data are already loaded)
elements.css (here is the css that I used)
#abc {
width: 100%;
height: 100%;
opacity: .95;
top: 0;
left: 0;
display: none;
position: fixed;
background-color: #313131;
overflow: auto;
}
img#close {
position: absolute;
right: -14px;
top: -14px;
cursor: pointer;
}
div#popupContact {
position: absolute;
left: 50%;
top: 17%;
margin-left: -202px;
font-family: 'Raleway', sans-serif;
}
form {
max-width: 300px;
min-width: 250px;
padding: 10px 50px;
border: 2px solid gray;
border-radius: 10px;
font-family: raleway;
background-color: #fff;
}
p {
margin-top: 30px;
}
h2 {
background-color: #FEFFED;
padding: 20px 35px;
margin: -10px -50px;
text-align: center;
border-radius: 10px 10px 0 0;
}
hr {
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
}
input[type=text] {
width: 82%;
padding: 10px;
margin-top: 30px;
border: 1px solid #ccc;
padding-left: 40px;
font-size: 16px;
font-family: raleway;
}
#name {
background-image: url(../images/name.jpg);
background-repeat: no-repeat;
background-position: 5px 7px;
}
#email {
background-image: url(../images/email.png);
background-repeat: no-repeat;
background-position: 5px 7px;
}
textarea {
background-image: url(../images/msg.png);
background-repeat: no-repeat;
background-position: 5px 7px;
width: 82%;
height: 95px;
padding: 10px;
resize: none;
margin-top: 30px;
border: 1px solid #ccc;
padding-left: 40px;
font-size: 16px;
font-family: raleway;
margin-bottom: 30px;
}
#submit {
text-decoration: none;
width: 100%;
text-align: center;
display: block;
background-color: #FFBC00;
color: #fff;
border: 1px solid #FFCB00;
padding: 10px 0;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
}
span {
color: red;
font-weight: 700;
}
button {
width: 10%;
height: 45px;
border-radius: 3px;
background-color: #cd853f;
color: #fff;
font-family: 'Raleway', sans-serif;
font-size: 18px;
cursor: pointer;
}
evaltest.blade.php
<html>
<head>
<title>Popup form </title>
<meta name="robots" content="noindex, nofollow">
<link href="{{ asset('css/elements.css') }}" rel="stylesheet">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-43981329-1']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<!-- body starts here -->
<body id ="bdy" style="overflow:hidden;">
<div id="abc">
<!-- Popup div starts here -->
<div id="popupContact">
<!-- contact us form -->
<form class="form-horizontal" method="post" action="{{ url('/evaltest/'.$data0->id) }}">
{{ csrf_field() }}
<img id ="close" src="{{ URL::to('/image') }}/3.png" onclick ="div_hide()">
<input type="hidden" name="user_id" value="{{$data0->id}}">
<div class="form-group">
<label class="col-md-2"><b>Recommendation:</b></label>
<div class="col-md-6">
<input type="radio" id ="recommendation" name="recommendation" value="Yes"> Yes<br>
<input type="radio" id ="recommendation" name="recommendation" value="No"> No<br>
</div>
</div>
<div class="form-group">
<div class="col-md-6-offset-2">
<input id= "submit" type="submit" href="javascript: check_empty()" class="btn btn-primary" value="Save">
</div>
</div>
</form>
</div>
<!-- Popup Div Ends Here -->
// #include('test')
//it will show all data if I were to put here but I don't want to put it together with the popup form
</div>
<!-- Display Popup Button -->
//this will show a few info but no button
#include('test')
<h1>Click Button to Evaluate</h1>
<button id="popup" onclick="div_show()">Popup</button>
<script src="{{ asset('/js/my_js.js') }}"></script>
//this will show even lesser info but button is shown
//#include('test')
</body>
</html>
test.blade.php (there are more information inside but I only put some as an example of how I got the information)
<div class="container">
#foreach ($data as $object)
<b>Name: </b>{{ $object->Name }}<br><br>
<b>Alias: </b>{{ $object->Alias }}<br><br>
<b>Email: </b>{{$object->Email}}<br><br>
#endforeach
</div>
I have tried removing some of the things inside the css but nothing happen, I even try removing those with the position: fixed and also added .container but it still doesn't work.
myjs.js
// function to display popup
function div_show() {
document.getElementById('abc').style.display = "block";
}
// function to hide popup
function div_hide(){
document.getElementById('abc').style.display = "none";
}
I have figured it out how to show my data is that I have to remove the style="overflow:hidden;" part so that it will work
I am trying to join the the footer-document to the index-file. But it does not work and I suspect there i something wrong with my css-file.
html {background: url("bakgrund.gif");}
/*https://pixabay.com/ Gratis bilder Creative Commons CC0*/
html { overflow-y: scroll;}
body {
background: white;
border: 1px solid #0000ff;
font-family: calibri, arial, sans-serif;
width: 750px;
margin: 25px auto;
padding: 0;
}
header {
height: 175px;
background-color: #edffff;
margin-top: -16px;
padding: 0;
}
nav {
height: 35px;
background-color: #edffff;
padding-left: 10px;
}
section {
width: 550px;
float: left;
min-height: 400px;
}
article {
width: 550px;
float: left;
background-color: yellow;
}
aside {
width: 200px;
float: right;
background-color: lightgrey;
}
footer {
clear: both;
position: relative;
height: 55px;
padding: 5px ;
text-align: center;
background-color: magenta;
}
address {
font-size: 12px;
font-style: normal;
}
/* Menykataloger */
ul {
margin: 0;
padding: 0;
}
#meny li {
display: inline;
padding: 5px 1px;
}
#meny li a {
margin: 0 5px 0 5px;
padding: 5px 15px;
text-align: center;
font-family: arial;
font-size: 13px;
font-weight: bold;
color: black;
border: 1px solid black;
border-radius: 5px;
background: yellow;
}
#meny li a:hover {
background: #CCEBFF;
color: black;
}
#meny a:link, #meny a:visited {
color: black;
text-decoration: none;
}
#meny a:active {
color: white;
}
#meny a#current {
background: white;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="stil.css" type="text/css">
</head>
<body>
<nav>
<ul id="meny">
<li>Hem</li>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</nav>
<section>
<h2>Huvudrubrik</h2>
<p>Huvudinnehåll</p>
<article>
<h2>Rubrik 1</h2>
<p> Innehåll 1 med rubriker</p>
</article>
<article>
<h2>Rubrik 2</h2>
<p> Innehåll 2 med rubriker
</p>
</article>
</section>
<aside>
Nyhetsbrev H-spalt
</aside>
<?php include("fot.php"); ?>
The result is wrong with the interpretation of the border. It just encircles the head and not the whole area.
I Get your problem
why dont you start your file with < ? php at begining and close it at the end
instead which you've used like this => "< ? php include("fot.php");" ?> at the end of your second file if you can see.
and save the main html file with the extension .php
trust me nothing will happen to your html code all the html contents will run fine even if you save the file in .php
and the second thing is you can include in two ways
i.e
include 'filename';
or
require 'filename'; you better include at the starting of the file
who would know if that included file may come to use right from the begining
Thanking you!
I could not understand what you are trying to do, but your problem is due to float: left for section tag. There are many alternatives to float like flex and grid,, so don't prefer float. It will cause many problems. Your problem is listed here.
There is no problem with your php.
I have the following html/php code. On clicking any of the tabs link the content of the file is not getting loaded in the specific <div> tag.
PHP code :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul.tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
ul.tabs li { display: inline; }
ul.tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.4em 2.5em 0.3em 2.5em; border-radius : 5px 5px 0 0; }
ul.tabs li a:hover { background-color: #f1f0ee; }
ul.tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
div.tabContent {border: 1px solid #c9c3ba; border-top : none; padding: 0.5em; background-color: #f1f0ee; border-radius: 0 0 5px 5px}
div.tabContent.hide { display: none; }
.tabs a {
padding:5px 10px;
background:#D8D8D8;
color:#fff;
text-decoration:none;
}
.tabs a.active {
background:#f1f0ee ;
color:black ;
font-weight:bold;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<ul class='tabs'>
<li><a href="#desktop" >Desktop</a></li>
<li>Laptop</li>
</ul>
<div class="tabContent" id="desktop">
</div>
<div class="tabContent" id="laptop">
</div>
</body>
</html>
jQuery code : Through this external jQuery file I want that whenever I click a link the required file gets loaded in the specific <div> tag.
$(document).ready(function() {
var hideid = "#laptop";
var showid = "#desktop";
$(hideid).hide();
$('a[href="' + showid + '"]').addClass("active");
$('a[href="#laptop').click(function() {
$(this).addClass('active');
$('#laptop').show('slow');
$('#desktop').hide('slow');
$('a[href="#desktop"]').removeClass("active");
$("#laptop").load("laptop.html");
});
$('a[href="#desktop').click(function() {
$("#desktop").load("/test.html");
$(this).addClass('active');
$('#desktop').show('slow');
$('#laptop').hide('slow');
$('a[href="#laptop"]').removeClass("active");
$("#desktop").load("desktop.html");
});
});
What is wrong in the code?
$('a[href="#desktop').click(function () {
Quotation mark is wrong.
Looks like the issue is with this line,
$("#desktop").load("/test.html");
if test.html is in same directory, try removing the /.
I am made a instant search feature for my website as you can see here: harrisonbh.com/chatterr/instant_search/ but the search results just push down the content.
index.php
<html>
<head>
<title>Search Box</title>
<link rel="stylesheet" href="style.css"/>
<script src="../js/jquery-1.9.1.js"></script>
<script src="index.js"></script>
</head>
<body>
<?php
//include 'connect.php';
include '../core/database/connect.php';
?>
<span id="box">
<input type="text" id="search_box"><button id="search_button">Search</button>
</span>
<div id="search_result">
</div>
Rest of content
</body>
</html>
index.js
$(document).ready(function(){
var left = $('#box').position().left;
var top = $('#box').position().top;
var width = $('#box').width();
$('#search_result').css('left', left).css('top', top+32).css('width', width);
$('#search_box').keyup(function(){
var value = $(this).val();
if(value != ''){
$('#search_result').show();
$.post('search.php', {value: value}, function(data){
$('#search_result').html(data);
});
} else {
$('#search_result').hide();
}
});
});
search.php
<?php
//include 'connect.php';
include '../core/database/connect.php';
$value = $_POST['value'];
$search_query = mysql_query("SELECT username FROM users WHERE username LIKE '$value%'");
while ($run = mysql_fetch_array($search_query)){
$username = $run['username'];
echo '<a href=#>'.$username.'</a><br/>';
}
?>
body{
font-family: arial;
font-size: 12px;
color: #333;
background:#fff;
}
input{
padding: 5px;
border: 0px;
font-family: arial;
font-size: 12px;
color: #333;
background:#fff;
box-shadow: 0 0 5px rgba(210, 210, 210, 210);
}
button{
padding: 5px;
border: 0px;
font-family: arial;
font-size: 12px;
color: #fff;
background:#4aaee7;
/*box-shadow: 0 0 5px rgba(210, 210, 210, 210);*/
}
button:hover{
background:#fff;
color: #333;
box-shadow: 0 0 5px rgba(210, 210, 210, 210);
cursor: pointer;
}
#search_result{
}
/*#search_result {
font-size: 12px;
padding: 5px;
box-shadow: 0 0 5px rgba(210, 210, 210, 210);
background: #fff;
color: #333;
position: absolute;
display: none;
}*/
a {
background:#4aaee7;
color: #fff;
text-decoration: none;
padding: 5px;
margin-top: 5px;
margin-bottom: -14px;
display: block;
}
a:hover{
background: #fff;
color: #4aaee7;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
li {
padding: 5px;
}
I'm not sure if i should be using position: absolute; or what to fix this. What do you think that I should do? Thanks.
Just enclose you input text field and search button in <div style="float:left;">
I mean, like this:
<div style="float:left;">
<span id="box">
<input type="text" id="search_box"><button id="search_button">Search</button>
</span>
<div id="search_result">
</div>
</div>
I am trying to make a drop-down menu using jQuery/JavaScript, but my menu won't show anything.
Here is my code:
JavaScript:
function toggleMenu(target){
if($(target).css("display")=='none'){
$("#drop_down, drop_menu").hide(500);
$(target).toggle(500);
}
header.php
<?php
?>
<div id="header" class="absolute" >
<ul>
<li class="float_left"><p class="pointer" onclick="toggleMenu('#drop_search')">Search</p></li>
<li class="float_left"><p class="pointer" onclick="toggleMenu('#drop_login')">Log in</p></li>
<li class="float_left"><p class="pointer" onclick="toggleMenu('#drop_chart')">My Cart</p></li>
<li class="float_left"><p class="pointer" onclick="toggleMenu('#drop_menu')">Menu</p></li>
</ul>
<div class="clear_both"></div>
<br/>
<div id="drop_down"class="right">
<div id="drop_search" class="hidden">
<p>Search</p>
</div>
<div id="drop_login" class="hidden">
<p>login</p>
</div>
<div id="drop_chart" class="hidden">
<p>cart</p>
</div>
<div id="drop_menu" class="hidden">
<p>menu</p>
</div>
</div>
</div>
sorry for the long css, i just like to pack it into one file
style.css
body{
position: relative;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
body table{
border-collapse: collapse;
width: 100%;
}
body th, body tr, body td{
padding: 0;
}
body h1, body h2,body h3,body h4,body h5,body h6,body p{
margin: 0px;
}
body p{
font-size: 12px;
}
body h6{
font-size: 14px;
}body h5{
font-size: 16px;
}body h4{
font-size: 18px;
}body h3{
font-size: 20px;
}body h2{
font-size: 24px;
}body h1{
font-size: 28px;
}
body ul,body li{
list-style: none;
margin: 0px;
padding: 0px;
}
body img{
border: none;
}
body hr{
margin: 0px;
border: none;
height: 1px;
}
body a:link{
text-decoration: none;
}
body a:visited{}
body a:hover{}
body .relative{
position: relative;
}
body .absolute{
position: absolute;
}
body .fixed{
position: fixed;
}
body .float_left{
float: left;
}
body .float_right{
float: right;
}
body .clear_both{
clear: both;
}
body input, body select, body textarea{
border-radius: 5px;
}
body .input_text{}
body .input_select{
border-radius: 5px;
font-size: 11px;
}
body .input_option{
background-color: #f6f6f6;
color: #333333;
}
body .input_option_inactive{
background-color: #f6f6f6;
color: #888888;
}
body .input_submit{
background: url("../images/submit.png");
border: none;
font-weight: bold;
color: #efefef;
cursor: pointer;
border-radius: 20px;
height: 20px;
}
body .input_submit:hover{
color: #ffffff;
text-shadow: 0 0 3px #efefef;
}
body .input_submit_inactive{
background: url('#');
border:none;
}
body .input_submit_inactive:hover{
color: #333333;
text-shadow: 0 0 3px #434343;
}
body .input_textarea{}
body .top{
vertical-align: top;
}
body .middle{
vertical-align: middle;
}
body .bottom{
vertical-align: bottom;
}
body .left{
text-align: left;
}
body .center{
text-align: center;
}
body .right{
text-align: right;
}
body .spacer{
width: 10px;
height: 10px;
}
body .bold{
font-weight: bold;
}
body .italic{
font-style: italic;
}
body .strip{
text-decoration: line-through;
}
body .hidden{
display: none;
}
body .show{
display: block;
}
body .pointer{
cursor: pointer;
}
body .scroll-y{
overflow-y: scroll;
}
#whole{
width: inherit;
height:100%;
margin-left: auto;
margin-right: auto;
vertical-align: top;
}
.black{color: #000000;}
.white{color: #ffffff;}
.red{color: #ff0000;}
.green{color: #00ff00;}
.blue{color: #0000ff;}
.yellow{color: #ffff00;}
.toska{color: #00ffff;}
.pink{color: #ff00ff;}
header.css
#header{
right: 0;
top: 0;
}
#header li{ height: 20px;
background: #960000;
}
#header li p{
margin: 0 15px;
color: #cccccc;
height: 12px;
line-height: 20px;
font-weight: bold;
}
#header li p:hover{
color: #f6f6f6;
}
#header #drop_down{
background: url('../images/black20.jpg');
}
Can anyone can help ?
Remove your class="hidden" and set default to style="display: none" (or hide on page load).
You have a sintaxe error in your function
Try with this function
function toggleMenu(target){
if($(target).is(":hidden")){
$("#drop_down div").hide(500);
}
$(target).toggle(500);
}
And give me some feedback...
This code might work as per your requirement. I have not changed your code just remove class="hidden" entirely.
Note: You have not mention your css so i assume as per class names defined by you.
Please let me know if i am lagging some where....
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#header {
border:1px solid red;
width:100%;
}
.pointer {
cursor:pointer;
}
.absolute {
position:absolute;
}
.float_left {
float:left;
}
.right {
float:right;
}
.clear_both {
clear:both;
}
</style>
</head>
<body>
<div id="header" class="absolute">
<ul>
<li class="float_left">
<p class="pointer" onclick="toggleMenu('#drop_search');">Search</p>
</li>
<li class="float_left">
<p class="pointer" onclick="toggleMenu('#drop_login')">Log in</p>
</li>
<li class="float_left">
<p class="pointer" onclick="toggleMenu('#drop_chart')">My Cart</p>
</li>
<li class="float_left">
<p class="pointer" onclick="toggleMenu('#drop_menu')">Menu</p>
</li>
</ul>
<div class="clear_both"></div>
<br/>
<div id="drop_down" class="right">
<div id="drop_search">
<p>Search</p>
</div>
<div id="drop_login">
<p>login</p>
</div>
<div id="drop_chart">
<p>cart</p>
</div>
<div id="drop_menu">
<p>menu</p>
</div>
</div>
</div>
<script type="text/javascript">
$("#drop_down div").hide();
function toggleMenu(target)
{
if($(target).css("display") != 'none')
{
$(target).hide(500);
}
else
{
$("#drop_down div").hide(500);
$(target).show(500);
}
}
</script>
</body>
</html>