I would like the background colour for 'top2' division to be light green. But it seems that css is not working! The cell padding for 'left' division is not working as I want the text 'online discussision portal' centered vertically.
Please help.
account.php
<?php
require 'connection.php';
session_start();
if(!isset($_SESSION['id'])) {
header("location:login.php");
} else {
?>
<!doctype html>
<html>
<head>
<title>welcome</title>
<link href="acc.css" type="text/css" rel="stylesheet" media="all" />
<style>
table {
table-layout:fixed;
width:1030px;
}
body {
background-image: url("border1.jpg");
background-size:cover;
}
</style>
</head>
<body>
<div id="top1">
<div id="left">
<h4> <center> <font color="green"> ONLINE DISCUSSION PORTAL </font> </center> </h4>
</div>
<div id="middle">
</h4>
<center> <i> Notifications </i> </center>
</h4>
</div>
<div id="right">
</h4>
<center> <i> Logout </i> </center>
</h4>
</div>
</div>
<div id="top2">
<table height="60px" width="1030px">
<tr>
<th> <u> Forum </u> </th>
<th> <u> My Questions </u> </th>
<th> <u> My Answers </u> </th>
</tr>
</table>
</div>
<div id="content">
<h3> You are Logged in. </h3>
</div>
</body>
</html>
<?php
}
CSS
acc.css A.class1 {
color: green;
}
A.class1:link {
text-decoration: none;
color: green;
}
A.class1:visited {
text-decoration: none;
color: green;
}
A.class1:hover {
text-decoration: underline;
color: red;
}
A.class1:active {
text-decoration: none;
color: green;
}
A.class2 {
color: white;
}
A.class2:link {
text-decoration: none;
color: white;
}
A.class2:visited {
text-decoration: none;
color: white;
}
A.class2:hover {
text-decoration: underline;
color: yellow;
}
A.class2:active {
text-decoration: none;
color: white;
}
#top1 {
height: 40px;
width: 1030px;
border: 1px solid #008000;
font-family: whimsy TT;
margin: auto;
margin-top: 50px;
}
#left {
border: 1px solid #008000;
height: 25px;
width: 624px;
float: left;
margin: auto;
color: 82b52f;
padding-bottom: 15px;
}
#middle {
border: 1px solid #008000;
height: 32px;
width: 200px;
float: left;
margin: auto;
color: white;
padding-top: 8px;
}
#right {
border: 1px solid #008000;
height: 32px;
width: 200px;
float: left;
margin: auto;
color: white;
padding-top: 8px;
}
#top2 {
background-color: 82b52f;
height: 60px;
width: 1030px;
border: 1px solid #008000;
font-family: whimsy TT;
margin: auto;
color: white;
}
#content {
border: 1px solid #008000;
height: 430px;
width: 1030px;
margin: auto;
}
You miss # for color-background property. So it should be background-color:#82b52f
For align to left you must remove <center> tag.
You are missing the hash symbol # before the color code:
acc.css
A.class1 {color:green;}
A.class1:link {text-decoration: none; color: green;}
A.class1:visited {text-decoration: none; color: green;}
A.class1:hover {text-decoration: underline; color: red;}
A.class1:active {text-decoration: none; color: green;}
A.class2 {color:white;}
A.class2:link {text-decoration: none; color: white;}
A.class2:visited {text-decoration: none; color: white;}
A.class2:hover {text-decoration: underline; color: yellow;}
A.class2:active {text-decoration: none; color: white;}
#top1
{
height:40px; width:1030px; border:1px solid #008000; font-family:whimsy TT; margin:auto; margin-top:50px;
}
#left
{
border:1px solid #008000; height:25px; width:624px; float:left; margin:auto; color:82b52f; padding-bottom:15px;
}
#middle
{
border:1px solid #008000; height:32px; width:200px; float:left; margin:auto; color:white; padding-top:8px;
}
#right
{
border:1px solid #008000; height:32px; width:200px; float:left; margin:auto; color:white; padding-top:8px;
}
#top2
{
background-color:#82b52f; height:60px; width:1030px; border:1px solid #008000; font-family:whimsy TT; margin:auto; color:white;
}
#content
{
border:1px solid #008000; height:430px; width:1030px; margin:auto;
}
account.php
<?php
require 'connection.php';
?>
<?php
session_start();
if(!isset($_SESSION['id']))
{
header("location:login.php");
}
else
{
?>
<!doctype html>
<html>
<head>
<title>welcome</title>
<link href="acc.css" type="text/css" rel="stylesheet" media="all" />
<style>
table {
table-layout:fixed;
width:1030px;
}
body {
background-image: url("border1.jpg");
background-size:cover;
}
</style>
</head>
<body>
<div id="top1">
<div id="left">
<h4> <center> <font color="green"> ONLINE DISCUSSION PORTAL </font> </center> </h4>
</div>
<div id="middle">
</h4> <center> <i> Notifications </i> </center> </h4>
</div>
<div id="right">
</h4> <center> <i> Logout </i> </center> </h4>
</div>
</div>
<div id="top2">
<table height="60px" width="1030px">
<tr>
<th> <u> Forum </u> </th>
<th> <u> My Questions </u> </th>
<th> <u> My Answers </u> </th>
</tr>
</table>
</div>
<div id="content">
<h3> You are Logged in. </h3>
</div>
</body>
</html>
<?php
}
?>
Related
I want to send an email but email show pure html:
public function build(){
return $this->subject('finish service')
->view('emails.subscribers',['msg'=>$this->msg]);
}
my template:
<!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 name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>آریانت</title>
<style>
* {
margin: 0;
padding: 0;
}
* {
font-family: IRANYekan, Helvetica, Tahoma, Arial, sans-serif;
}
img {
max-width: 100%;
vertical-align: middle;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100% !important;
height: 100%;
direction: rtl;
font-size: 15px;
background-color: #F1F3F4;
}
a {
color: #2ba6cb;
text-decoration: none;
}
.table-wrapper {
width: 100%;
background-color: #F1F3F4;
max-width: 700px;
margin: 0 auto;
direction: rtl;
padding: 0 40px;
}
.table-header,
.table-body,
.table-footer {
width: 100%;
background-color: #fff;
}
.table-header {
background-image: url(https://www.ariaservice.net/app/uploads/email/bg-header.png);
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
padding: 10px 15px;
}
.logo > img {
height: 50px;
}
.table-nav {
margin: 0;
padding: 0;
list-style: none;
text-align: left;
}
.table-nav > li {
display: inline-block;
}
.table-nav > li + li {
margin-right: 15px;
}
.table-nav > li > a {
font-weight: bold;
color: #fff;
}
.table-nav > li > a:hover {
opacity: 0.7;
}
.table-body {
padding: 15px 15px 40px;
}
.table-price th,
.table-body td {
padding: 10px;
}
.btn {
background-color: rgb(63, 141, 247);
font-weight: bold;
color: #fff;
padding: 0 20px;
border-radius: 37px;
height: 37px;
line-height: 37px;
white-space: nowrap;
display: inline-block;
}
.btn:hover {
background-color: rgb(87, 190, 146);
color: #fff;
}
.table-price {
width: 100%;
border-collapse: collapse;
}
.table-price th,
.table-price td {
border: 1px solid #000;
}
.table-footer {
background-image: url(https://www.ariaservice.net/app/uploads/email/bg-footer.png);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
padding: 0 50px 70px;
}
.btn-sup {
border-radius: 20px;
background-color: rgb(87, 190, 146);
color: #fff;
position: relative;
text-align: center;
width: 100%
}
.btn-sup > img {
width: 100px;
}
.social-nav {
margin: 30px 0 0;
padding: 0;
list-style: none;
}
.social-nav > li {
display: inline-block;
}
.social-nav > li + li {
margin-right: 15px;
}
.social-nav > li > a:hover {
opacity: 0.7;
}
.social-nav > li > a > img {
height: 32px;
}
.bg-blue {
background-color: rgb(63, 141, 247);
}
.bg-green {
background-color: rgb(87, 190, 146);
}
</style>
</head>
<body>
<table class="table-wrapper">
<tr>
<td>
<table class="table-header">
<tr>
<td>
<img src="https://www.ariaservice.net/app/uploads/email/logo.png" alt="">
</td>
<td>
<ul class="table-nav">
<li>خانه</li>
<li>هاست لینوکس</li>
<li>خرید دامنه</li>
</ul>
</td>
</tr>
<tr>
<td colspan="1000" align="center">
<img src="https://www.ariaservice.net/app/uploads/email/icon-header.png" alt="">
</td>
</tr>
</table>
<table class="table-body">
<tr>
<td>
{{$msg}}
</td>
</tr>
</table>
<table class="table-footer">
<tr>
<td>
<table class="btn-sup">
<tr>
<td width="100">
<img src="https://www.ariaservice.net/app/uploads/email/icon-support.png" alt="">
</td>
<td>
<p>پشتیبانی آنلاین ، آماده پاسخگویی به شماست</p>
<strong dir="ltr">021 9101 2601</strong>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<ul class="social-nav">
<li><img src="https://www.ariaservice.net/app/uploads/email/icon-twitter.png" alt=""></li>
<li><img src="https://www.ariaservice.net/app/uploads/email/icon-facebook.png" alt=""></li>
<li><img src="https://www.ariaservice.net/app/uploads/email/icon-instagram.png" alt=""></li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You need to use ->with() according to docs for laravel 8.
So your code is:
/**
* Build the message.
*
* #return $this
*/
public function build()
{
return $this->subject('finish service')
->view('emails.subscribers')
->with([
'msg' => $this->msg,
]);
}
//this is the code at the page that generates pdf
$string = get_include_contents('pdf/draydocument/index.php');
//print_r($string);
$mpdf=new mPDF();
$mpdf->WriteHTML($string);
$mpdf->SetDisplayMode('fullpage');
$mpdf->Output();
.heading {
font-family: Montserrat, sans-serif;
}
.body {
margin-top: 29px;
padding-top: 0px;
background-color: #fff;
font-family: 'Varela Round', sans-serif;
font-weight: 500;
}
.text-block {
font-family: Montserrat, sans-serif;
}
.text-block-2 {
font-size: 25px;
}
.text-field {
margin-right: -453px;
padding-right: 0px;
font-size: 11px;
}
.bold-text {
display: block;
margin-right: 1200px;
border: 1px solid #000;
border-radius: 9px;
color: #ffa705;
}
.paragraph {
width: 60%;
margin-right: 1200px;
margin-left: auto;
}
.div-block {
margin: -144px 0px 1px 1200px;
}
.text-block-3 {
width: 50%;
margin-right: 300px;
margin-left: -600px;
}
.heading-2 {
margin-top: 200px;
}
.heading-3 {
width: 40%;
margin-top: 117px;
margin-right: 400px;
margin-left: -32px;
color: #ffa705;
font-size: 25px;
}
.grid {
grid-template-areas: "Area";
}
.columns {
width: 35%;
border: 1px none #000;
}
.column {
border: 1px solid #000;
}
.column-2 {
border: 1px solid #000;
}
.column-3 {
border: 1px solid #000;
}
.column-4 {
border: 1px solid #000;
}
.column-5 {
border: 1px solid #000;
}
.column-6 {
border: 1px solid #000;
}
.column-7 {
border: 1px solid #000;
}
.column-8 {
border: 1px solid #000;
}
.column-9 {
border: 1px solid #000;
}
.column-10 {
border: 1px solid #000;
}
.column-11 {
border: 1px solid #000;
}
.column-12 {
border: 1px solid #000;
}
.column-13 {
padding-left: 0px;
}
.columns-2 {
padding-right: 0px;
}
.column-14 {
padding-right: 35px;
}
.column-15 {
height: auto;
margin-top: 0px;
}
.columns-3 {
height: 30px;
padding-top: 0px;
padding-bottom: 0px;
}
.column-16 {
height: 30px;
}
.column-17 {
height: 30px;
}
.column-18 {
border: 1px solid #000;
}
.column-19 {
border: 1px solid #000;
}
.column-20 {
border: 1px solid #000;
}
.column-21 {
height: 400px;
border: 1px solid #000;
}
.column-22 {
height: 400px;
border: 1px solid #000;
}
.column-23 {
height: 400px;
border: 1px solid #000;
}
.image {
width: 600px;
}
.div-block-2 {
width: 60px;
}
.text-block-4 {
width: 40%;
margin-left: -600px;
}
.columns-4 {
width: 35%;
}
.columns-5 {
width: 35%;
}
.columns-6 {
width: 35%;
}
.columns-7 {
width: 35%;
}
.columns-8 {
width: 35%;
}
.text-block-5 {
font-size: 10px;
}
.bold-text-2 {
font-size: 10px;
}
.bold-text-3 {
font-size: 10px;
}
<!DOCTYPE html>
<!-- This site was created in Webflow. http://www.webflow.com -->
<!-- Last Published: Fri Nov 08 2019 22:38:51 GMT+0000 (UTC) -->
<html data-wf-page="5dc492ebb03ec1759b3c5d8c" data-wf-site="5dc492ebb03ec16cc23c5d8b">
<head>
<meta charset="utf-8">
<title>Delivery Order</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="http://freightcube.net/pdf/draydocument/css/normalize.css" rel="stylesheet"/>
<link href="http://freightcube.net/pdf/draydocument/css/webflow.css" rel="stylesheet"/>
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/puneets-blank-site-1bae2e.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: ["Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic","Varela Round:400"] }});</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="" rel="shortcut icon" type="image/x-icon">
<link href="" rel="apple-touch-icon">
</head>
<body class="body">
<div class="div-block-2"></div>
<p class="paragraph">123 E 9TH ST, SUITE 332<br>UPLAND, CA 91786<br>PHONE: 909-285-2370<br>EMAIL: ops#freightcube.net</p>
<h1 class="heading-3"> DRAYAGE DELIVERY ORDER</h1>
<div class="columns w-row">
<div class="column w-col w-col-4">
<h6>OCEAN CARRIER/SSL :<br>php code</h6>
</div>
<div class="column-2 w-col w-col-4">
<h6>LOCATION/TERMINAL :<br>php code</h6>
</div>
<div class="column-3 w-col w-col-4">
<h6>PORT :<br>php code</h6>
</div>
</div>
<div class="columns-4 w-row">
<div class="column-4 w-col w-col-4">
<h6>MASTER BOL :<br>PHP</h6>
</div>
<div class="column-5 w-col w-col-4">
<h6>ARRIVAL DATE/CUT OFF DATE :<br>PHP</h6>
</div>
<div class="column-6 w-col w-col-4">
<h6>TRUCKING COMPANY:<br>PHP</h6>
</div>
</div>
<div class="columns-5 w-row">
<div class="column-7 w-col w-col-3">
<h6>CONTAINER :<br>PHP</h6>
</div>
<div class="column-8 w-col w-col-3">
<h6>HOUSE BOL :<br>PHP</h6>
</div>
<div class="column-9 w-col w-col-3">
<h6>ENTRY NO :<br>PHP</h6>
</div>
<div class="column-10 w-col w-col-3">
<h6>CUSTOMER REFERENCE :<br>PHP</h6>
</div>
</div>
<div class="columns-6 w-row">
<div class="column-11 w-col w-col-6">
<h6>DELIVERY/PICKUP ADDRESS:<br>PHP</h6>
</div>
<div class="column-12 w-col w-col-6">
<h6>SPECIAL INSTRUCTIONS:<br>PHP</h6>
</div>
</div>
<div class="columns-7 w-row">
<div class="column-18 w-col w-col-3">
<h6>NO. OF PKGS</h6>
</div>
<div class="column-19 w-col w-col-6">
<h6>DESCRIPTION OF GOODS</h6>
</div>
<div class="column-20 w-col w-col-3">
<h6>WEIGHT</h6>
</div>
</div>
<div class="columns-8 w-row">
<div class="column-21 w-col w-col-3">
<div class="text-block-5"><strong>PHP CODE FOR NO. OF PACKAGES</strong></div>
</div>
<div class="column-22 w-col w-col-6">
<div><strong class="bold-text-2">PHP FOR DISCRIPTION</strong></div>
</div>
<div class="column-23 w-col w-col-3">
<div><strong class="bold-text-3">PHP FOR WEIGHT</strong></div>
</div>
</div>
<h4>RECEIVED IN GOOD ORDER BY :<br></h4>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js" type="text/javascript" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 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>
link to codeI am using mpdf for my php application to generate pdf pages. I recently generated an html page using a drag and drop html builder which also provides source code with css. so i copied the exact css on the page using . When mpdf generates the pdf it is not showing css correctly. it looks like width issues but i tried to reduce width of all divs and still encounter the same problem just with smaller appearing columns. please help. here is how it shows and how it should show
mPDF has limited abilities in handling floated blocks. Use a HTML table to make sure it is displayed correctly (your data is somewhat tabular, so it is the right thing to do anyway).
I'm a newbee in Laravel and i start to do a dropdown login menu
but i don't know how to directly login from this form in Laravel, which don't need using auth/login. Thank you so much!
This is the dropdown sample i try
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.active-links').click(function () {
if ($('#signin-dropdown').is(":visible")) {
$('#signin-dropdown').hide()
$('#session').removeClass('active');
} else {
$('#signin-dropdown').show()
$('#session').addClass('active');
}
return false;
});
$('#signin-dropdown').click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$('#signin-dropdown').hide();
$('#session').removeClass('active');
});
});
</script>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background:#fff;
position:relative;
font:13px Arial, Helvetica, sans-serif;
}
a {
text-decoration:none;
color:#00c6ff;
}
h1 {
font: 4em normal Arial, Helvetica, sans-serif;
padding: 20px; margin-top: 100px;
text-align:center;
}
h1 small{
font: 0.2em normal Arial, Helvetica, sans-serif;
text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
display: block;
}
.content {width: 960px; margin: 0 auto; overflow: hidden;}
#top-stuff {
left:0;
position:fixed;
top:0;
width:100%;
z-index:12;
}
#top-bar-out {
display:block;
position:relative;
width:100%;
height:40px;
background: -moz-linear-gradient(center top, #333333, #111111);
background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#111111));
background: -o-linear-gradient(top, #333333, #111111);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#111111');
box-shadow:0 1px 2px #666666;
-webkit-box-shadow: 0 1px 2px #666666;
}
.active-links {
position:absolute;
right:8px;
top:0;
}
#container {
width:780px;
margin:0 auto;
position: relative;
}
#topnav {
text-align:right;
}
#session {
cursor:pointer;
display:inline-block;
height:20px;
padding:10px 12px;
vertical-align: top;
white-space: nowrap;
}
#session.active, #session:hover {
background:rgba(255,255,255,0.1);
color:fff;
}
a#signin-link {
color:#bababa;
position:relative;
}
a#signin-link em {
font-size:10px;
font-style:normal;
margin-right:4px;
}
a#signin-link strong {
color:#fff;
}
#signin-dropdown {
background-color:#202020;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
box-shadow:0 1px 2px #666666;
-webkit-box-shadow: 0 1px 2px #666666;
min-height:200px;
min-width:160px;
position:absolute;
right:0;
display:none;
}
#signin-dropdown form{
cursor:pointer;
padding:10px;
text-align:left;
}
#signin-dropdown .textbox span { color:#BABABA;}
#signin-dropdown .textbox input { width:200px; }
fieldset {
border:none;
}
form.signin .textbox label {
display:block;
padding-bottom:7px;
}
form.signin .textbox span {
display:block;
}
form.signin p, form.signin span {
color:#999;
font-size:11px;
line-height:18px;
}
form.signin .textbox input {
background:#666666;
border-bottom:1px solid #333;
border-left:1px solid #000;
border-right:1px solid #333;
border-top:1px solid #000;
color:#fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font:13px Arial, Helvetica, sans-serif;
padding:6px 6px 4px;
}
form.signin .remb {
padding:9px 0;
position:relative;
text-align:right;
}
form.signin .remb .remember {
text-align:left;
position:absolute;
left:0;
}
.button {
background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
background: -o-linear-gradient(top, #f3f3f3, #dddddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
border-color:#000;
border-width:1px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
color:#333;
cursor:pointer;
display:inline-block;
padding:4px 7px;
margin:0;
font:12px;
}
.button:hover { background:#ddd; }
</style>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Signin Dropdown Box with jQuery</title>
</head>
<body>
<div id="top-stuff">
<div id="top-bar-out">
<div id="container">
<div id="topnav">
<div class="active-links">
<div id="session">
<a id="signin-link" href="#">
<em>Have an account?</em>
<strong>Sign in</strong>
</a>
</div>
<div id="signin-dropdown">
<form method="post" class="signin" action="#">
<fieldset class="textbox">
<label class="username">
<span>Username or email</span>
<input id="username" name="username" value="" type="text" autocomplete="on">
</label>
<label class="password">
<span>Password</span>
<input id="password" name="password" value="" type="password">
</label>
</fieldset>
<fieldset class="remb">
<label class="remember">
<input type="checkbox" value="1" name="remember_me" />
<span>Remember me</span>
</label>
<button class="submit button" type="button">Sign in</button>
</fieldset>
<p>
<a class="forgot" href="#">Forgot your password</a>
<br>
<a class="mobile" href="#">Already using Twitter via SMS?</a>
</p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Please look at you form open tag <form method="post" class="signin" action="#">
In you can see action is # change it to another url that provides authenfication of user, also you will need to add CSRF token, if you didn't disable CSRF protection. To learn how to add it please look documentation
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>
I have created web page
http://jsfiddle.net/KNfrm/embedded/result/
mid div is not extending to the height of left pane and right pane.
mid div has black background color
You need to clear the float after .rightpane, floated elements are removed from the normal html flow. Just add an empty block element after .rightpane with style clear:both
http://jsfiddle.net/KNfrm/1/ - http://jsfiddle.net/KNfrm/1/show
DEMO
CODE:
<!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>Tile Mode</title>
<style>
body {
margin: auto;
background-color:#fff;
font-family:arial, verdana, helvetica;
font-size:12px;
color:#222;
}
.center{
margin-left:auto;
margin-right:auto;
margin-top:0px;
width:1000px;
height:auto;
display:block;
background-color:#000;
}
.frameDiv {
margin-left:auto;
margin-right:auto;
margin-top:0px;
width:1000px;
height:auto;
display:block;
background-color:#000;
}
.header {
width:auto;
height:150px;
background-color:transparent;
}
.logo {
height:100px;/*background-image:url(./images/header.png);*/
}
.menu {
height:50px;
width:auto;
background-color:#ccc;
}
.menus {
list-style-type: none;
list-style-position:outside;
position: relative;
margin: 0;
padding: 0;
}
.menus li {
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
float: left;
width: 200px;
height: 50px;
margin-right: 0px;
background-image:url(./images/menu.png);
background-repeat:no-repeat;
}
.menus a {
display:block;
height:50px;
text-indent:-9999px;
outline:none;
}
#menu1 {
background-position:0px 0px;
}
#menu2 {
background-position:-200px 0px;
}
#menu3 {
background-position:-400px 0px;
}
#menu4 {
background-position:-600px 0px;
}
#menu5 {
background-position:-800px 0px;
}
#menu1.active, #menu1:hover {
background-position: 0 bottom;
}
#menu2.active, #menu2:hover {
background-position: -200px bottom;
}
#menu3.active, #menu3:hover {
background-position: -400px bottom;
}
#menu4.active, #menu4:hover {
background-position: -600px bottom;
}
#menu5.active, #menu5:hover {
background-position: -800px bottom;
}
.leftpane {
float:left;
width:750px;
height:auto;
display:block;
background-color:transparent;
}
.rightpane {
float:right;
width:250px;
height:auto;
background-color:transparent;
}
.content {
width:auto;
background-color:transparent;
display:block;
border-color:#666;
border-style:solid;
border-width:5px;
}
.footer {
margin:0px;
width:auto;
height:100px;
background-color:#461015;
display:block;
text-align:center;
overflow:hidden;
}
.footer p {
display:inline;
}
.footer p a:link {
color: #fff;
text-decoration:none;
}
.footer p a:visited {
color: #fff;
text-decoration:none;
}
.footer p a:hover {
color: #fff;
text-decoration:none;
}
.footer p a:active {
color: #fff;
text-decoration:none;
}
.quote {
margin-left:35px;
margin-top:20px;
margin-bottom:20px;
margin-right:35px;
width:180px;
height:40px;
display:block;
}
.facebook {
margin-left:35px;
margin-top:20px;
margin-bottom:20px;
margin-right:35px;
width:180px;
height:40px;
display:block;
background-image:url(images/facebook.png);
background-repeat:no-repeat;
}
.linkedin {
margin-left:35px;
margin-top:20px;
margin-bottom:20px;
margin-right:35px;
width:180px;
height:40px;
display:block;
background-image:url(images/linkedin.png);
background-repeat:no-repeat;
}
.twitter {
margin-left:35px;
margin-top:20px;
margin-bottom:20px;
margin-right:35px;
width:180px;
height:40px;
display:block;
background-image:url(images/twitter.png);
background-repeat:no-repeat;
}
.hl {
border: 2px;
width: 80%;
border-color:#999;
}
ul#ticker {
width: 200px;
height: 200px;
overflow: hidden;
margin:auto;
list-style-type:none;
padding:0px;
font-family:Calibri, Arial, Tahoma;
font-style:normal;
}
ul#ticker li {
margin:0px;
padding:0px;
width: 200px;
height: 130px;
white-space:normal;
overflow:none;
text-align:justify;
}
ul#ticker li a:link {
color: #fff;
text-decoration:none;
}
ul#ticker li a:visited {
color: #fff;
text-decoration:none;
}
ul#ticker li a:hover {
color: #fff;
text-decoration:none;
}
ul#ticker li a:active {
color: #fff;
text-decoration:none;
}
ul#ticker li span {
display: block;
color: #06C;
text-align:center;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
</script>
<script type="text/javascript">
$(function()
{
var ticker = function()
{
setTimeout(function(){
$('#ticker li:first').animate( {marginTop: '-120px'}, 800, function()
{
$(this).detach().appendTo('ul#ticker').removeAttr('style');
});
ticker();
}, 4000);
};
ticker();
});
</script>
<body>
<div class="center">
<div class="frameDiv">
<div class="header">
<div class="logo"> </div>
<div class="menu">
<ul class="menus">
<li id="menu1">Home</li>
<li id="menu2">About us</li>
<li id="menu3">Services</li>
<li id="menu4">Gallery</li>
<li id="menu5">Contact</li>
</ul>
</div>
</div>
<div class="mid">
<div class="leftpane">
<div class="image" style="margin:5px; margin-right:0px; display:block;">
<img src="http://www.grnyrenovation.com/images/nycpremier.jpg"; style="overflow:hidden; width:745px" />
</div>
<div class="content"></div>
<div class="footer"> <br/>
<hr style="height:2px; border:1px;" noshade="noshade"/>
<p>Home |</p>
<p>About us |</p>
<p>Services |</p>
<p>Gallery |</p>
<p>Contact</p>
<hr style="height:2px; border:1px; width:70%" noshade="noshade"/>
<p style="margin:8px">© Tile</p>
</div>
</div>
<div class="rightpane">
<div style="clear:both;">
<div class="quote"> </div>
<div class="facebook"> </div>
<div class="linkedin"> </div>
<div class="twitter"> </div>
<hr/ class="hl" style="height:2px; border:1px;" noshade="noshade">
<div class="testimonial">
<div style="color:#FFF; font-weight:bold; font-size:large; font-family:'MS Serif', 'New York', serif; text-align:center;">
<h3>Testimonials</h3>
</div>
<div class="tickerclass">
<ul id="ticker">
<li> <span>Title 1</span> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the. </li>
<li> <span>Title 2</span> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the </li>
<li> <span>Title 3</span> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the </li>
<li> <span>Title 4</span> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the </li>
<li> <span>Title 5</span> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the </li>
</ul>
</div>
</div>
<br/>
<hr class="hl" style="height:2px; border:1px;" noshade="noshade"/>
<div class="acceridation" style="text-align:center; height:60px;">
<img style="margin:auto;overflow:hidden;width:80px;height:50px;" align="middle" src="http://www.grnyrenovation.com/images/nkba_170x90.jpg" />
<img style="margin:auto;overflow:hidden;width:80px;height:50px;" align="middle" src="http://www.grnyrenovation.com/images/sm_EPA-Lead-Safe-Certified.png"/>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
</div>
</div>
</div>
</body>
</html>
try this to add in your code to the centre div
.center{ overflow:auto;}