I am using barryvdh's library DOMPdf to generate pdf documents from html. My goal is to make it possible for users to preview their invoices as pdf before they submit the form. I am using Ajax to pass the data from the form to the controller. The controller receives the data from the form, but it returns an encoded string which I cannot decode and display. I would like to display the invoice on the same page in a pop-up, but it could also be made into a new window.
Any suggestions would be appreciated:
Javascript code:
$(document).on("click", ".viewAsPdf", function(){
var formID = $(this).closest("form").attr("id");
var formHTML = document.getElementById(formID).innerHTML;
var nettoTotal = "";
var vatTotal = "";
var bruttoTotal ="";
var formData = "";
var url="";
switch(formID){
case "demandOfferForm":
nettoTotal = $(formHTML).find("#demandOfferTotalNetto").text();
vatTotal = $(formHTML).find("#demandOfferTotalVat").text();
bruttoTotal = $(formHTML).find("#demandOfferTotalBrutto").text();
formData ="nettoTotal="+nettoTotal+"&vatTotal="+vatTotal+"&bruttoTotal="+bruttoTotal;
console.log(formData);
url ="../buy/newOffer/pdfOffer";
var pdf = doAjaxCall(url, formData);
break;
}
});
Ajax call
function doAjaxCall(url, formData){
$.ajax({
type : 'GET',
url: url,
data : formData,
})
.done(function(data) {
console.log(data);
$('#demandOfferForm').fadeOut();
$('#buyNewOffer').html(data);
})
// If the data hasn't beed received correct.
.fail(function(data) {
console.log(data);
});
}
Controller code
public function previewPDF(){
$nettoTotal = Input::get("nettoTotal");
$vatTotal = Input::get("vatTotal");
$grossTotal = Input::get("bruttoTotal");
$pdf = App::make('dompdf');
$pdfContent ='';
$pdfContent .='<DOCTYPE HTML><html>';
$pdfContent .='<head></head><body>';
// $pdfContent .='<head><link rel="stylesheet" href="http://localhost/freesoft_front/public/css/pdf.css" type="text/css"></head><body>';
$pdfContent .='<div class="pdfContent" style="position:absolute;">';
$pdfContent .='<div class="companyInfo" style="position:absolute;">';
$pdfContent .='<h4 style="padding:0; margin:0; text-align: right; line-height: 10px;">Faktura</h4>';
$pdfContent .='<div class="header">';
$pdfContent .='<div class="headerLeft" style="display: inline-block; width:50%; text-align: left;">';
$pdfContent .='<div class="logoContainer" style="height: 50px; border: 1px solid blue;"><p>Company logo goes here</p></div>';
$pdfContent .='<p>Hr. Hansen</p>';
$pdfContent .='<p>Strømvej 2</p>';
$pdfContent .='<br/> <p>5700 Svandeborg</p>';
$pdfContent .='</div>';
$pdfContent .='<div class="headerRight" style="display: inline-block; width:50%; text-align: right;"><p>DEMO Firma</p>';
$pdfContent .='<p> 9560 Hadslund</p>';
$pdfContent .='<p> Tlf: 44 55 90 17</p>';
$pdfContent .='<p> <strong> FAKTURA NR. : 18540 </strong></p>';
$pdfContent .='<br/> <p class="smallInput" style="font-size: 15px; line-height: 5px;">Dato: 15-09-2014</p>';
$pdfContent .='<p class="smallInput" style="font-size: 15px; line-height: 5px;">Forfaldsdato: 23-09-2014</p>';
$pdfContent .='</div>';
$pdfContent .='</div>';
// ------------end of header
$pdfContent .= '<div class="paymentDetails">';
$pdfContent .='<div class="detailsLeft" style="display: inline-block; width:50%; text-align: left;">';
$pdfContent .='<p class="smallInput" style="font-size: 15px; line-height: 5px;"> Kundenr.: 358</p><br/>';
$pdfContent .='<p class="smallInput" style="font-size: 15px; line-height: 5px;"> Betailngsbet.: 8 dage</p>';
$pdfContent .='<p class="smallInput" style="font-size: 15px; line-height: 5px;"> Rentebet.: 1,3% rente pr. påb. måned</p>';
$pdfContent .='</div>';
$pdfContent .='<div class="detailsRight" style="bottom:0px; display: inline-block; width:50%; text-align: right;">';
$pdfContent .='<p class="smallInput" style="font-size: 15px; line-height: 5px;"> Bank</p>';
$pdfContent .='<p class="smallInput" style="font-size: 15px; line-height: 5px;">Kontonr.: 9999 0001234567</p>';
$pdfContent .='</div>';
$pdfContent .= '</div>';
// ------------end of paymentDetails
$pdfContent .='<div class="invoiceLines">';
$pdfContent .='<div class="linesHeading" style="border-top:1px solid black; border-bottom: 1px solid black;">';
$pdfContent .='<p style="line-height:5px;">Tekst <span style="margin:0px 0px 0px 350px;">Antal</span> <span style="margin:0px 0px 0px 75px;"> A pris</span> <span style="margin:0px 0px 0px 75px;">Nettobeløb</span></p>';
$pdfContent .='</div>';
// foreach ($lines as $index => $line) {
// $pdfContent .='<p class="line"><span style="display: inline-block; width:55%;">'.$line -> ItemName_Line .'</span> <span style="display: inline-block; width:15%;">'. $line -> Quantity_Line .'</span> <span style="display: inline-block; width:17%;">'.$line -> Price_Line.'</span> <span style="display:inline-block; width:10%; text-align:right;">'.$line -> Netto_Total_Line.'</span></p>';
// }
$pdfContent .='</div>';
// --------------end of invoice lines
$pdfContent .='<div style="border-top:1px solid black; border-bottom: 1px solid black; position:absolute; bottom:0;">';
$pdfContent .='<p style="line-height:8px;"> <span style="display:inline-block;width:41%;"> Nettobeløb </span> <span style="display:inline-block; width:43.5%;"> Momsbeløb </span> <span style="text-align:right; display:inline-block; width:14%;"> Totalbeløb</span></p>';
$pdfContent .='<p style="line-height:2px;"> <span style="display:inline-block;width:41.5%;"> '.$nettoTotal.' </span> <span style="display:inline-block; width:43%;"> '.$vatTotal.' </span> <strong> <span style="text-align:right; display:inline-block; width:13.5%;">'.$grossTotal.'</span></strong></p>';
$pdfContent .='</div>';
$pdfContent .='</div>';
$pdfContent .='</div>';
$pdfContent .='</html></body>';
$pdf->loadHTML($pdfContent);
return $pdf->stream();
}
Output snippet:
stream x����N�#��y����J�t�v�%E�R)�+�')ű�m�����'������9�����g c0�V��I�{F�c�T�d�e�� d���?.һ��J?�#r��l��w��w2Z ��9\��C6� ��` G'#�Yҡ��>�U�e�k �/��������y�)aS�~����%' Rf&qV!��E��9Z�"�US=o��X�\��-���1-��*�͐U^Q�ek'B�v��',n�m:���s�M���a�cV�E6F���V(��x�|} ��vDK�� 0��&6����r�K�c�N+c� �!c����?Gѥ�6%����#���J-�P�R��(�u�gu�S2�ҵLH��ED.�h����vR���"�Ih�ۼ�ԫ�� K7����O�� E�4�,?�Ơ5����?
Related
Im currently using laravel 9, laravel dompdf package for export my file , this the pdf file igot , no content at all. the data i pass did not display in the PDF. ::
But when I just open it as view , the data pass properly and the css work nice. This is how it looks like :
Here is my code on the View:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
</head>
<style>
* {
box-sizing: border-box;
margin:0;
padding:0;
}
body {
background:#DDD;
}
div.container {
max-width: 1350px;
margin: 0 auto;
overflow: hidden
}
.upcomming {
font-size: 45px;
text-transform: uppercase;
border-left: 14px solid rgba(255, 235, 59, 0.78);
padding-left: 12px;
margin: 18px 8px;
}
.container .item {
width: 48%;
float: left;
padding: 0 20px;
background: #fff;
overflow: hidden;
margin: 10px
}
.container .item-right, .container .item-left {
float: left;
padding: 20px
}
.container .item-right {
padding: 79px 0px;
margin-right: 20px;
width: 25%;
position: relative;
height: 286px;
text-align: center;
}
.container .item-right .up-border, .container .item-right .down-border {
padding: 14px 15px;
background-color: #ddd;
border-radius: 50%;
position: absolute
}
.container .item-right .up-border {
top: -8px;
right: -35px;
}
.container .item-right .down-border {
bottom: -13px;
right: -35px;
}
.container .item-right .num {
font-size: 50px;
color: #111
}
.container .item-right .day, .container .item-left .event {
color: #555;
font-size: 15px;
margin-bottom: 9px;
}
.container .item-right .day {
text-align: center;
font-size: 25px;
}
.container .item-left {
width: 71%;
padding: 34px 0px 19px 46px;
border-left: 3px dotted #999;
}
.container .item-left .title {
color: #111;
font-size: 34px;
margin-bottom: 12px
}
.container .item-left .sce {
margin-top: 5px;
display: block
}
.container .item-left .sce .icon, .container .item-left .sce p,
.container .item-left .loc .icon, .container .item-left .loc p{
float: left;
word-spacing: 5px;
letter-spacing: 1px;
color: #888;
margin-bottom: 10px;
}
.container .item-left .sce .icon, .container .item-left .loc .icon {
margin-right: 10px;
font-size: 20px;
color: #666
}
.container .item-left .loc {display: block}
.fix {clear: both}
.container .item .tickets, .booked, .cancel{
color: #fff;
padding: 6px 14px;
float: right;
margin-top: 10px;
font-size: 18px;
border: none;
cursor: pointer
}
.container .item .tickets {background: #777}
.container .item .booked {background: #3D71E9}
.container .item .cancel {background: #DF5454}
.linethrough {text-decoration: line-through}
</style>
<body>
<div class="container">
<h1 class="upcomming">Event Tickets</h1>
#php ($i=1)
#foreach ($tickets as $key=> $ticket)
<div class="item">
<div class="item-right">
<h2 class="num"> {{ $ticket->ticket_no }}</h2>
<p class="day">Ticket No.</p>
<span class="up-border"></span>
<span class="down-border"></span>
</div> <!-- end item-right -->
<div class="item-left">
<p class="event">{{ $ticket->GiftGiving->name }}</p>
<h2 class="title">{{ $ticket->name }}</h2>
<div class="sce">
<p>{{Carbon\Carbon::parse($ticket->GiftGiving->start_at )->isoFormat('LL') }}<br/> {{ Carbon\Carbon::parse($ticket->GiftGiving->start_at )->isoFormat('h:mm A') }}</p>
</div>
<div class="fix"></div>
<div class="loc">
<p>{{ $ticket->GiftGiving->venue }}</p>
</div>
<div class="fix"></div>
<button class="booked">Batch No. {{ $ticket->GiftGiving->batch_no}}</button>
</div> <!-- end item-right -->
</div> <!-- end item -->
<!--Set limitation of printing only 5 ticket per page-->
#if ($i % 6 === 0)
<div style="page-break-after: always;"></div>
#endif
#php ($i++)
#endforeach
</div>
</body>
</html>
Controller
public function GenerateTicket($code)
{
# Retrieve the records using $code
$GiftGiving = GiftGiving::where('code', $code)->firstOrFail();
$tickets = GiftGivingBeneficiary::where('gift_giving_id', $GiftGiving->id)->get();
# Users can only access their own charity's records
if ($GiftGiving->charitable_organization_id == Auth::user()->charitable_organization_id) {
# Must have at least one beneficiary before generating tickets
if ($tickets->count() < 1) {
$toastr = array(
'message' => 'Gift Giving must have at least one (1) beneficiary first before generating tickets',
'alert-type' => 'error'
);
return redirect()->back()->with($toastr);
}
# Retrieve the last batch no. from the gift giving.
$batch_no = $GiftGiving->batch_no;
# Increment Batch no. by +1
$GiftGiving->update([
'last_downloaded_by' => Auth::id(),
'batch_no' => $batch_no + 1,
]);
# Audit Logs Creation
$log = new AuditLog;
$log->user_id = Auth::user()->id;
$log->action_type = 'GENERATE PDF';
$log->charitable_organization_id = Auth::user()->charitable_organization_id;
$log->table_name = 'Gift Giving';
$log->record_id = $GiftGiving->code;
$log->action = 'Charity Admin generated tickets for the Gift Giving [' . $GiftGiving->name . '] with batch no. ' . $GiftGiving->batch_no . '.';
$log->performed_at = Carbon::now();
$log->save();
# Send Notification to each user in their Charitable Organizations
$users = User::where('charitable_organization_id', Auth::user()->charitable_organization_id)->where('status', 'Active')->get();
foreach ($users as $user) {
$notif = new Notification;
$notif->code = Str::uuid()->toString();
$notif->user_id = $user->id;
$notif->category = 'Gift Giving';
$notif->subject = 'Generated Tickets';
$notif->message = Auth::user()->role . ' ' . Auth::user()->info->first_name . ' ' .
Auth::user()->info->last_name . ' has generated tickets for [' . $GiftGiving->name . '] with batch no. ' .
$GiftGiving->batch_no . '.';
$notif->icon = 'mdi mdi-ticket';
$notif->color = 'info';
$notif->created_at = Carbon::now();
$notif->save();
}
// return view('charity.gifts.generate_ticket', compact('tickets'));
$pdf = PDF::loadView('charity.gifts.generate_ticket', compact('tickets'));
return $pdf->download($GiftGiving->name . ' - No. ' . $GiftGiving->batch_no . '.pdf');
} else {
$toastr = array(
'message' => 'Users can only access their own charity records.',
'alert-type' => 'error'
);
return redirect()->back()->with($toastr);
}
}
Hope somebody can point out what did i miss, thankyou in advance . all suggest/answer are highly appreciated.
dompdf is really picky about CSS and styles... but first, you should always put your <style> tags inside the <head> tag of the document. Without putting it there, there will be inconsistencies in how different browsers render the content, and that includes headless systems and domPDF.
So put your <style> tag in the <head> tags, and see if that helps resolve the issue, and if not, try converting your styles to tables with styling, as dompdf seems to do better with tables than divs.
you should care about syntax:
#php $i = 1; #endphp
#php $i++; #endphp
I coded a product purchase page for a clothing line, and according to the teacher, my product page should switch to whichever small image I hover over. When I hover however the product image will not change as required. What am I doing wrong? I also have bootstrap cdn code in the heading area, but I don't think it has much effect on the code except for the fa fa icon.
HTML
<body>
<div class="small-container single-product">
<div class="row">
<div class="col-2">
<img src="images/thigh-ties-cross-set.png" width="100%" id="ProductImg">
<div class="small-img-row">
<div class="small-img-col">
<img src="images/thigh-ties-left.png" width="100%" class="small-img">
</div>
<div class="small-img-col">
<img src="images/thigh-ties-front.png" width="100%" class="small-img">
</div>
<div class="small-img-col">
<img src="images/thigh-ties-left.png" width="100%" class="small-img">
</div>
<div class="small-img-col">
<img src="images/thigh-ties-front.png" width="100%" class="small-img">
</div>
</div>
</div>
<div class="col-2">
<p>Home / T-Shirts</p>
<h1>Yoga Sets From Chaucey Moore</h1>
<h4>$90.00</h4>
<select>
<option>Select Size</option>
<option>XXL</option>
<option>XL</option>
<option>LARGE</option>
<option>MEDIUM</option>
<option>SMALL</option>
</select>
<input type="number" value="1">
Add to Cart
<h3>Product Details<i class="fa fa-indent"></i></h3>
<br>
<p>Give your summer wardrobe a style upgrade with the Men's Active T-Shirts. Team it with a pair of short for your morning workout or a denims for an evening out with the guys.
</p>
</div>
</div>
</div>
<script>
var ProductImg = document.getElementByID("ProductImg");
var SmallImg = Document.getElementsByClassName("small-img");
SmallImg[0].onclick = function()
{
ProductImg.src = SmallImg[0].src;
}
SmallImg[1].onclick = function()
{
ProductImg.src = SmallImg[1].src;
}
SmallImg[2].onclick = function()
{
ProductImg.src = SmallImg[2].src;
}
SmallImg[3].onclick = function()
{
ProductImg.src = SmallImg[3].src;
}
</script>
</body>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.small-container{
max-width: 1000px;
margin:auto;
padding-left: 25px;
padding-right: 20px;
}
.row{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.single-product{
margin-top: 80px;
}
.small-img-row{
display: flex;
justify-content: space-around;
}
.col-2 img{
max-width: 100%;
padding: 50px 0;
}
.small-img-col{
flex-basis: 24%;
cursor: pointer;
}
.single-product .col-2 img{
padding: 0;
}
.single-product .col-2{
padding: 20px;
}
.col-2{
flex-basis: 50%;
min-width: 300px;
}
.col-2 h1{
line-height: 60px;
font-size: 50px;
margin: 25px 0;
}
.single-product select{
display: block;
padding: 10px;
margin-top: 20px;
}
.single-product h4{
margin: 20px 0;
font-size: 22px;
font-weight: bold;
}
.single-product input{
width: 50px;
height: 40px;
padding-left: 10px;
font-size: 20px;
margin-right: 10px;
border: 1px solid #ff523b;
}
input:focus{
outline: none;
}
a{
text-decoration: none;
color: #555;
}
.single-product .fa{
color: #ff523b;
margin-left: 10px;
}
p{
color: #555;
}
.btn{
display: inline-block;
background: #ff523b;
color: #fff;
padding: 8px 30px;
margin: 30px 0;
border-radius: 30px;
transition: background 0.5s;
}
.btn:hover{
background: #563434;
}
I have created simple conversion form that takes input from user and calculate the result without pressing button. My problem is that it works fine on localhost but when I upload it on free hosting site it doesn't respond with calculations. JQuery also doesn't work when I press the div on the top left of my form it highlights on local but not when I upload Please help.
Here is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<!-- <script type="text/javascript">
$("document").ready(function(e){
$("input").change(function(){
var total=0;
$("input[name=qww]").each (function(){
total=10*parseInt($(this).val());
})
$("input[name=long]").val(total);
});
});
</script> -->
<style type="text/css">
.main{
height:400px;
width: 300px;
background-color: white;
margin: 100px 100px 100px 100px;
border-radius: 10px;
}
#compare{
height: 50px;
width: 147px;
background-color: white;
border-right-style: solid;
border-right-color: orange;
float: left;
}
#compare2{
height: 50px;
width: 150px;
background-color: white ;
float: right;
}
#compare4{
height: 35px;
width: 147px;
background-color: white;
border-right-style: solid;
border-right-color: orange;
float: left;
}
#compare5{
height: 35px;
width: 150px;
background-color: white ;
float: right;
}
.form{
height: 150px;
width: 300px;
background-color: white;
float: left;
margin-top: 10px;
margin-bottom: 10px;
}
.Myform{
padding: 5px 0;
}
input[type=text]{
width: 70px;
height: 30px;
font-style: oblique;
font-size: 18px;
outline: none;
border: none;
font-weight:bolder;
}
.qwerty{
height: 20px;
width: 300px;
background-color: rgb(122, 16, 122);
color: blue;
}
.button{
margin-top: 20px;
margin-left: 0px;
width: 300px;
height: 40px;
background-color: blue;
color: white;
font-size: 18px;
text-align: center;
border-radius: 10px;
-WEbkit-box-shadow: 3px 3px 3px #ccc;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.text{
margin-top: 5px;
background-color: rgb(255, 255, 255);
height: 60px;
border-radius: 5px;
-WEbkit-box-shadow: 3px 3px 3px #ccc;
}
.initial{
height: 15px;
margin-top: 50px;
width: 147px;
background-color: white;
border-right-style: solid;
border-right-color: orange;
}
.image{
width: 40px;
height: 15px;
margin-left: 10px;
}
img{
vertical-align: top;
}
.highLight{
background-color: #333333;
}
.panel{
-webkit-transition:0.3s;
transition:0.3s;
opacity:1;
}
.panel:not(.highLight){
opacity:0.5;
}
</style>
<body>
<div class="main">
<div class="initial" style="float: left; font-size: 10px; text-align: center; color: blue;" >
COMPARE</div>
<div class="initial" style="float: right;font-size: 10px; text-align: center; color: blue;">
VENTA</div>
<div class="panel" id="compare"style="font-size: 26px;font-weight: bolder; text-align: center;color: black;">3.4000
</div>
<div class="panel" id="compare2"style="font-size: 26px;font-weight: bolder; text-align: center;color: black;">3.4306
</div>
<div class="form">
<div class="text">
<div class="QWERTY" style="font-size: 10px; text-align: right;color: blue;">
VENTA</div>
<form id="bbb" action="index.html" class="Myform" style="font-size: 10px; font-weight: bold;">USD
<label for="" style="font-size: 30px;"> $</label>
<input type="text" class='qww' placeholder="1000" style="float: right;">
</form>
</div>
<div class="image">
<a href="www.google.com"><img src="images.jpg" alt="" style="margin-left: 50px; width: 40px;object-position:right; height: 45px;">
</a>
</div>
<div class="text" >
<div class="QWERTY" style="font-size: 10px; text-align: right; color: blue;">
VENTA</div>
<form action="index.html" class="Myform" style="font-size: 10px;">PEN
<label for="" style="font-size: 30px; font-weight: bold;"> S/</label>
<input type="text" id='long' placeholder="3400" style="float: right;" disabled>
</form>
<button class="button" value="compare"> </button>
</div>
</div>
<div class="initial" style="float: left; font-size: 10px; text-align: center;" >
</div>
<div class="initial" style="float: right;font-size: 10px; text-align: center;">
VENTA</div>
<div id="compare4"style="font-size: 30px;font-weight: bolder; text-align: right;color: blue;">
</div>
<div id="compare5"style="font-size:12px; text-align: center;color: black;">
<h4> S/ 54.70</h4>
</div>
</div>
<script>
// we used jQuery 'keyup' to trigger the computation as the user type
$('.qww').keyup(function () {
// initialize the sum (total price) to zero
var sum = 0;
// we use jQuery each() to loop through all the textbox with 'price' class
// and compute the sum for each loop
$('.qww').each(function() {
sum =10* Number($(this).val());
});
// set the computed value to 'totalPrice' textbox
$('#long').val(sum);
});
$('.panel').hover(function(){
$(this).toggleClass('highLight');
});
</script>
</body>
</html>
I have two jQuery functions that I've built and in testing them, I noticed that if the tabs are clicked while they have already been fired, they jump up about 10px, then jump back down to normal.
I have searched everywhere, and can't seem to find a solution that works.
I have the following code:
<div id="zoe">
<div class="floating-rim-container">
<a href="#">
<img src="images/rim-middle.png" class="floating-rim-wrapper-zoe" id="rim-7">
</a>
<a href="#">
<img src="images/rim-middle.png" class="floating-rim-wrapper-zoe" id="rim-8">
</a>
<a href="#">
<img src="images/rim-middle.png" class="floating-rim-wrapper-zoe" id="rim-9">
</a>
<a href="#">
<img src="images/rim-middle.png" class="floating-rim-wrapper-zoe" id="rim-10">
</a>
<a href="#">
<img src="images/rim-middle.png" class="floating-rim-wrapper-zoe" id="rim-11">
</a>
<a href="#">
<img src="images/rim-middle.png" class="floating-rim-wrapper-zoe" id="rim-12">
</a>
<div class="shadow-container">
<img src="images/shadow.png" class="shadow-zoe">
<img src="images/shadow.png" class="shadow-zoe">
<img src="images/shadow.png" class="shadow-zoe">
<img src="images/shadow.png" class="shadow-zoe">
<img src="images/shadow.png" class="shadow-zoe">
<img src="images/shadow.png" class="shadow-zoe">
</div>
</div>
</div>
I have this CSS:
.floating-rim-container {
width:960px;
height:300px;
margin:-295px auto;
vertical-align:top;
}
.floating-rim-wrapper-black,
.floating-rim-wrapper-zoe {
margin: 50px 0px;
padding: 0px 23px;
position:relative;
left:0;
}
.shadow-black, .shadow-zoe {
position:relative;
padding: 0px 8px;
}
#tab-container {
width:960px;
margin:0 auto;
font-family:'helvetica-light',Helvetica,Arial,sans-serif;
}
#blabel-tab {
background:#3d3d3d;
border-radius:0 0 15px 15px;
-webkit-border-radius:0 0 15px 15px;
border:1px solid rgba(0,0,0,0.6);
border-top:none;
padding:6px;
letter-spacing:2px;
position:relative;
z-index:100;
box-shadow:-2px 2px 4px 1px rgba(0,0,0,0.3);
-webkit-box-shadow:-2px 2px 4px 1px rgba(0,0,0,0.3);
}
#zoe-tab {
background:#3d3d3d;
margin:0px 15px;
border-radius:0 0 15px 15px;
-moz-border-radius:0 0 15px 15px;
-o-border-radius:0 0 15px 15px;
border:1px solid rgba(0,0,0,0.6);
border-top:none;
padding:6px;
position:relative;
z-index:15;
box-shadow:-2px 2px 4px 1px rgba(0,0,0,0.3);
-webkit-box-shadow:-2px 2px 4px 1px rgba(0,0,0,0.3);
}
#blabel-tab:hover, #zoe-tab:hover {
background:rgba(0,0,0,0.9);
}
#folder-placeholder {
width:960px;
height:275px;
margin:-26px auto;
background:#000;
position:absolute;
z-index:-1;
}
#folder-black {
width:960px;
background:#eee;
margin:-30px auto;
border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
}
#folder-zoe {
width:960px;
margin:0 auto;
background:#ccc;
position:relative;
top:4px;
z-index:1;
border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
}
#zoe {
position:relative;
z-index:20;
}
And this jQuery:
function blabel_init() {
$("#folder-black").show().animate({
"height" : "300px"
},600);
$("#blabel-tab").animate({
"top" : "295px"
},{
duration: 600,
complete: function() {
$("#blacklabel").fadeIn();
}
});
}
function blabel_switch() {
$("#zoe-tab").click(function() {
$("#blacklabel").fadeOut().promise().done(function() {
$("#folder-black").animate({
"height" : "0"
});
$("#blabel-tab").animate({
"top" : "0"
}).promise().done(function() {
$("#folder-zoe").animate({
"height" : "300px"
});
$("#zoe-tab").animate({
"top" : "300px"
},{
complete:function() {
$("#zoe").fadeIn();
}
});
});
});
return false;
});
}
function zoe_switch() {
$("#blabel-tab").click(function() {
$("#zoe").fadeOut().promise().done(function() {
$("#folder-zoe").animate({
"height" : "0"
});
$("#zoe-tab").animate({
"top" : "0"
}).promise().done(function() {
$("#folder-black").animate({
"height" : "300px"
});
$("#blabel-tab").animate({
"top" : "295px"
},{
complete:function() {
$("#blacklabel").fadeIn();
}
});
});
});
return false;
});
}
Any help would be hugely appreciated!
It can be seen at zoewheels.com/beta.
i think it is because of href="#"
try replacing with href="javascript:void(0)" . Also if href is not needed remove it
I have out of order display problem in IE6 and IE8.
Following is the output screenshot in IE6 and IE8 :
http://img707.imageshack.us/img707/1875/61807760.jpg
Following is my HTML code :
<div>
<div style="width: 280px; float: left; height: 220px; background:url(images/content_box.gif) no-repeat; text-align: left; padding-left: 20px; padding-top: 20px;">
<div class="cont_featr"><div class="cont_txt"><b>Features</b></div></div>
<hr class="container_hr" align="center">
<div style="text-align: left;margin-left: 15px;">
<ul class="as_ul">
<li class="as_li">Immediate/Cron based delivery.</li>
<li class="as_li">Multilanguage support.</li>
<li class="as_li">Auto integration to any Joomla, vBulletin style.</li>
</ul>
</div>
</div>
</div>
Following is the CSS code :
.as_ul {
list-style: none url(images/tick.gif);
list-style-position:outside;
border: 1px solid #f00;
}
.as_li {
FONT-SIZE: 10pt;
FONT-FAMILY: Verdana, Sans-Serif;
background-image: url(images/tick.gif) no-repeat;
border: 1px solid #0f0;
}
.container_hr {
color: #888888;
background-color: #888888;
height: 0.8px;
border: 0;
width: 85%;
text-align: center;
}
.cont_featr {
background: url(images/featurs.png) no-repeat;
width: 40px; height: 40px;
}
.cont_txt {
FONT-SIZE: 11pt;
padding-left: 50px;
padding-top: 10px;
}
Please help.
Try giving .as_li or .as_ul the property/value zoom:1