I keep getting error while using jQuery multislider for sliding multiple items in the slider, following is my code.
<head>
#exampleSlider {
position: relative;
border: 1px solid black;
}
#media (max-width: 767px) {
#exampleSlider {
border-color: transparent;
}
}
#exampleSlider .MS-content {
margin: 15px 5%;
overflow: hidden;
white-space: nowrap;
border: 1px solid red;
}
#media (max-width: 767px) {
#exampleSlider .MS-content {
margin: 0;
}
}
#exampleSlider .MS-content .item {
display: inline-block;
height: 100%;
overflow: hidden;
position: relative;
vertical-align: top;
border: 1px solid green;
border-right: none;
width: 20%;
}
#media (max-width: 1200px) {
#exampleSlider .MS-content .item {
width: 25%;
}
}
#media (max-width: 992px) {
#exampleSlider .MS-content .item {
width: 33.3333%;
}
}
#media (max-width: 767px) {
#exampleSlider .MS-content .item {
width: 50%;
}
}
#exampleSlider .MS-content .item p {
font-size: 30px;
text-align: center;
line-height: 1;
vertical-align: middle;
margin: 0;
padding: 10px 0;
}
#exampleSlider .MS-controls button {
position: absolute;
border: none;
background: transparent;
font-size: 30px;
outline: 0;
top: 35px;
}
#media (max-width: 767px) {
#exampleSlider .MS-controls button {
display: none;
}
}
#exampleSlider .MS-controls button:hover {
cursor: pointer;
}
#exampleSlider .MS-controls .MS-left {
left: 10px;
}
#media (max-width: 992px) {
#exampleSlider .MS-controls .MS-left {
left: -2px;
}
}
#exampleSlider .MS-controls .MS-right {
right: 10px;
}
#media (max-width: 992px) {
#exampleSlider .MS-controls .MS-right {
right: -2px;
}
}
</head>
<div id="exampleSlider1" class="exampleSlider">
<div class="MS-content">
<div class="item">
<p>Item<br>9</p>
</div><div class="item">
<p>Item<br>10</p>
</div><div class="item">
<p>Item<br>1</p>
</div><div class="item">
<p>Item<br>2</p>
</div><div class="item">
<p>Item<br>3</p>
</div><div class="item">
<p>Item<br>4</p>
</div><div class="item">
<p>Item<br>5</p>
</div><div class="item">
<p>Item<br>6</p>
</div><div class="item">
<p>Item<br>7</p>
</div><div class="item">
<p>Item<br>8</p>
</div></div>
<div class="MS-controls">
<button class="MS-left"><i class="fa fa-chevron-left" aria-hidden="true"></i></button>
<button class="MS-right"><i class="fa fa-chevron-right" aria-hidden="true"></i></button>
</div>
</div>
<script type="text/javascript" src="{{asset('js/new-js/jquery-2.2.4.min.js')}}"></script>
<script src="{{asset('js/new-js/multislider.min.js')}}"></script>
<script>
$(document).ready(function () {
$('#exampleSlider').multislider({
interval:5000,
slideAll:true
});
});
</script>
I have downloaded the code from https://www.multislider.info/ where it work according to my desire but in my page it show me the above error in the title of the question and also I'm not getting the slider rather my items are displayed is plain html not in slider, what may be wrong as I'm using the same code is an the site above where it's work fine, any help is appreciated.
Related
I am using laravel version 9 for doing my project. and there is a feature that needs to let the user export the event ticket. I try to use the package barryvdh/laravel-dompdf . right now I encounter the error of
Call a member function get_cellmap() on null
I tried to read others' posts with a similar issue, but I found out most of them are using the for the view so seems like the solution working for them is not appropriate for me.here is my code :
controller
public function GenerateTicket($id)
{
$tickets = GiftGivingBeneficiaries::where('gift_giving_id', $id)->get();
# Retrieve the last batch no. from the gift giving.
$batch_no = GiftGiving::findOrFail($id)->batch_no;
GiftGiving::findOrFail($id)->update([
'last_downloaded_by' => Auth::id(),
'batch_no' => $batch_no + 1,
]);
$pdf = PDF::loadView('charity.gifts.generate_ticket', compact('tickets'));
return $pdf->download('event_tickets.pdf');
}
View Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from bootdey.com #bootdey on twitter -->
<!-- All snippets are MIT license http://bootdey.com/license -->
<title>Genearate Ticket</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<section class="container">
<h1>Event Tickets</h1>
#foreach ($tickets as $key=> $ticket)
<table>
</table>
<div class="row">
<input type="hidden" value="{{$key + 1}} ">
<article class="card fl-left">
<section class="date">
<time datetime="23th feb">
<span>Ticket No.</span><br>
<span>{{ $ticket->ticket_no }}</span>
</time>
</section>
<section class="card-cont">
<small>Event Name:{{ $ticket->GiftGiving->name }}</small>
<h3>{{ $ticket->name }}</h3>
<div class="even-date">
<i class="fa fa-calendar"></i>
<time>
<span>{{ $ticket->GiftGiving->start_at }}</span>
</time>
</div>
<div class="even-info">
<i class="fa fa-map-marker"></i>
<p>
{{ $ticket->GiftGiving->venue }}
</p>
</div>
Batch No.{{ $ticket->GiftGiving->batch_no }}
</section>
</article>
</div>
#if ( $key == 5 )
<div style="page-break-before:always;"> </div>
#endif
#endforeach
</div>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Oswald');
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box
}
body {
background-color: #dadde6;
font-family: arial
}
.fl-left {
float: left
}
.fl-right {
float: right
}
h1 {
text-transform: uppercase;
font-weight: 900;
border-left: 10px solid #fec500;
padding-left: 10px;
margin-bottom: 30px
}
.row {
overflow: hidden
}
.card {
display: table-row;
width: 100%;
background-color: #fff;
color: #989898;
margin-bottom:20px;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
border-radius: 4px;
position: relative;
border: #2b2b2b 1px solid;
}
.card+.card {
margin-left: 2%
}
.date {
display: table-cell;
width: 45%;
position: relative;
text-align: center;
border-right: 2px dashed #dadde6
}
.date:before,
.date:after {
content: "";
display: block;
width: 30px;
height: 30px;
background-color: #DADDE6;
position: absolute;
top: -15px;
right: -15px;
z-index: 1;
border-radius: 50%
}
.date:after {
top: auto;
bottom: -15px
}
.date time {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.date time span {
display: block
}
.date time span:first-child {
color: #2b2b2b;
font-weight: 600;
font-size: 150%
}
.date time span:last-child {
text-transform: uppercase;
font-weight: 600;
margin-top: -10px
}
.card-cont {
display: table-cell;
width: 75%;
font-size: 100%;
padding: 10px 10px 30px 50px
}
.card-cont h3 {
color: #3C3C3C;
font-size: 130%
}
.row:last-child .card:last-of-type .card-cont h3 {
text-decoration: line-through
}
.card-cont>div {
display: table-row
}
.card-cont .even-date i,
.card-cont .even-info i,
.card-cont .even-date time,
.card-cont .even-info p {
display: table-cell
}
.card-cont .even-date i,
.card-cont .even-info i {
padding: 5% 5% 0 0
}
.card-cont .even-info p {
padding: 30px 50px 0 0
}
.card-cont .even-date time span {
display: block
}
.card-cont a {
display: block;
text-decoration: none;
width: 80px;
height: 30px;
background-color: #D8DDE0;
color: #fff;
text-align: center;
line-height: 30px;
border-radius: 2px;
position: absolute;
right: 10px;
bottom: 10px
}
.row:last-child .card:first-child .card-cont a {
background-color: #037FDD
}
.row:last-child .card:last-child .card-cont a {
background-color: #F8504C
}
#media screen and (max-width: 860px) {
.card {
display: block;
float: none;
width: 50%;
margin-bottom: 10px
}
.card+.card {
margin-left: 0
}
.card-cont .even-date,
.card-cont .even-info {
font-size: 75%
}
}
.page-break {
page-break-after: always;
}
</style>
<script type="text/javascript">
</script>
</body>
</html>
also, this is what my view looks like. Hope to know what part did I miss for it,every answer is highly appreciated.
Not sure if this will help but the way I execute this in my app is like so:
Maybe try storing it first then accessing it? Then delete them after 1 hour?
$pdf = PDF::setOptions(['isHtml5ParserEnabled' => true, 'isRemoteEnabled' => true])->loadView('charity.gifts.generate_ticket', compact('tickets'));
$pdf->setPaper('a4', 'landscape');
Storage::disk('reports')->put('tickets'. '.pdf', $pdf->output());
$url = Storage::disk('reports')->url('tickets'. '.pdf');
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 found a solution from http://codepen.io/SitePoint/pen/bNYBZX but it i incomplete.
<section class="image-grid">
<div class="image__cell is-collapsed">
<div class="image--basic">
<a href="#expand-jump-1">
<img id="expand-jump-1" class="basic__img" src="http://lorempixel.com/250/250/fashion/1" alt="Fashion 1" />
</a>
<div class="arrow--up"></div>
</div>
<div class="image--expand">
<img class="image--large" src="http://lorempixel.com/400/400/fashion/1" alt="Fashion 1" />
</div>
</div>
</section>
I need to have a side gallery for images to load in the preview section on click just like google image search. Here is the image of what I want to do Google Image search layout preview
Thanks.
I Did a codepen with the solution I wanted. http://codepen.io/bahiirwa/pen/BKmmzm
HTML
<section class="image-grid">
<div class="image__cell is-collapsed">
<div class="image--basic">
<a href="#expand-jump-1">
<img id="expand-jump-1"
class="basic__img"
src="http://yourdigitalblend.com/wp-content/uploads/2016/03/DB_Team_Bio_jz.png" alt="Fashion 1">
</a>
<div class="arrow--up"></div>
</div>
<div class="image--expand">
<img class="image--large"
src="http://yourdigitalblend.com/wp-content/uploads/2016/03/DB_Team_Bio_jz.png" alt="Fashion 1">
</div>
</div>
<div class="image__cell is-collapsed">
<div class="image--basic">
<a href="#expand-jump-2">
<img id="expand-jump-2"
class="basic__img"
src="http://yourdigitalblend.com/wp-content/uploads/2016/03/DB_Team_Bio-ed.jpg" alt="Fashion 1">
</a>
<div class="arrow--up"></div>
</div>
<div class="image--expand">
<img class="image--large"
src="http://yourdigitalblend.com/wp-content/uploads/2016/03/DB_Team_Bio-ed.jpg" alt="Fashion 1">
</div>
</div>
...
</section>
CSS
html {box-sizing: border-box;}
*, *:before, *:after { box-sizing: inherit; }
.image-grid {
width: 100%;
max-width: 1310px;
margin: 0 auto;
overflow: hidden;
padding: 10px 5px 0;
}
.image__cell {
float: left;
position: relative;
width: 20%;
}
.image--basic {
padding: 0 5px;
}
.basic__img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.image__cell.is-collapsed .arrow--up {
display: block;
height: 10px;
width: 100%;
}
.image--large {
max-width: 100%;
height: auto;
display: block;
padding: 40px;
margin: 0 auto;
box-sizing: border-box;
}
.image__cell.is-collapsed .image--basic {
cursor: pointer;
}
.image__cell.is-expanded .image--expand {
max-height: 500px;
margin-bottom: 10px;
}
.image--expand {
position: relative;
left: -5px;
padding: 0 5px;
box-sizing: content-box;
overflow: hidden;
background: #222;
max-height: 0;
transition: max-height .3s ease-in-out,
margin-bottom .1s .2s;
width: 500%;
}
.image__cell:nth-of-type(5n+2) .image--expand {
margin-left: -100%;
}
.image__cell:nth-of-type(5n+3) .image--expand {
margin-left: -200%;
}
.image__cell:nth-of-type(5n+4) .image--expand {
margin-left: -300%;
}
.image__cell:nth-of-type(5n+5) .image--expand {
margin-left: -400%;
}
.image__cell:nth-of-type(5n+6) {
clear: left;
}
.image__cell.is-expanded .arrow--up {
display: block;
border-bottom: 8px solid #222;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
height: 0;
width: 0;
margin: 2px auto 0;
}
.expand__close {
position: absolute;
top: 10px;
right: 20px;
color: #454545;
font-size: 50px;
line-height: 50px;
text-decoration: none;
}
.expand__close:before {
content: '×';
}
.expand__close:hover {
color: #fff;
}
JS
var $cell = $('.image__cell');
$cell.find('.image--basic').click(function() {
var $thisCell = $(this).closest('.image__cell');
if ($thisCell.hasClass('is-collapsed')) {
$cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed');
$thisCell.removeClass('is-collapsed').addClass('is-expanded');
} else {
$thisCell.removeClass('is-expanded').addClass('is-collapsed');
}
});
$cell.find('.expand__close').click(function() {
var $thisCell = $(this).closest('.image__cell');
$thisCell.removeClass('is-expanded').addClass('is-collapsed');
});
Or you can query SerpAPI to get a JSON response.
Then you can easily loop over the images in the json.
https://serpapi.com/images-results
How to use images instead of text labels?
I need the menu to slide down when the .logo (bird) image button is clicked
How can I link text label with a logo image on the menu bar?
PS: the menu slides down when the .logo (bird) is clicked BUT there are two birds, I need the menu to slide down when the bird image sitting on the menu is clicked, AND yes I need only one bird image
/* ------------------------------------------ */
/* BASIC SETUP */
/* ------------------------------------------ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page-wrap {
width: 1216px;
margin: 0 auto;
}
.row-basic {
max-width: 1216px;
}
html,
body {
text-align:justify
color: #fff;
font-size: 19px;
text-rendering: optimizeLegibility;
background: #333;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
/* ------------------------------------------ */
/* HEADER */
/* ------------------------------------------ */
header {
background-color: rgba(246, 149, 149, 0.06);
height: 81px;
width: auto;
padding-top: 24px;
margin-top: 26px;
margin-bottom: 0px;
display:flex;
justify-content: space-between;
}
/* ----- NAVIGATION -----*/
nav {
display:flex;
align-items: center;
}
nav ul {
display:flex;
}
.user-tools {
display:flex;
align-items: center;
}
.user-tools :focus {
outline:none;
}
/* ----- LOGO -----*/
.logo {
position: relative;
cursor: pointer;
height: 68px;
width: auto;
margin-right: 21px;
margin-left: 31px;
z-index: 1;
}
/* ----- MENU BUTTON -----*/
.mobile-nav-toggle {
height: 50px;
width: 35px;
margin-right: 31px;
display: flex;
align-items: center;
cursor: pointer;
}
.mobile-nav-toggle span,
.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after {
border-radius: 2px;
content: "";
display: block;
height: 6px;
width: 100%;
background: #fff;
position: relative;
}
.mobile-nav-toggle span::before {
top: 11px;
}
.mobile-nav-toggle span::after {
bottom: 17px;
}
/* ------------------------------------------ */
/* PAGE CONTENT TOP BAR */
/* ------------------------------------------ */
.box1 {
height: 26px;
width: 300px;
background: #8242b1;
}
.box2 {
height: 26px;
width: 300px;
background: #b14242;
}
.box3 {
height: 26px;
width: 300px;
background: #424bb1;
}
.page-content {
display:flex;
justify-content: center;
transition: all 0.3s ease-in-out 0s;
position:relative;
margin-top: -260px;
z-index: 0; }
.toggle {
transition: all 0.3s ease-in-out 0s;
text-decoration: none;
font-size: 30px;
color: #eaeaea;
position:relative;
top: -225px;
left: 20px;
z-index: 1; }
.toggle:hover {
color:#cccccc; }
.topbar {
display:flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in-out 0s;
position: relative;
top: -220px;
bottom: 0px;
left: 0px;
height: 220px;
width: auto;
padding: 30px;
background: #333;
z-index: 1; }
.topbar li {
display:flex;
justify-content: center;
list-style: none;
color: rgba(255, 255, 255,0.8);
font-size: 16px;
margin-bottom: 16px;
cursor: pointer; }
.topbar li:hover {
color: rgba(255, 255, 255,1); }
#topbartoggler {
display: none; }
#topbartoggler:checked + .page-wrap .topbar {
top: -4px; }
#topbartoggler:checked + .page-wrap .toggle {
top: -5px; }
#topbartoggler:checked + .page-wrap .page-content {
padding-top: 220px; }
<body>
<input type="checkbox" id="topbartoggler" name="" value="">
<div class="page-wrap">
<div class="topbar">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Clients</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<label for="topbartoggler" class="toggle"><img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo"></label>
<div class="page-content">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<header class="row-basic">
<nav>
<img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo">
</nav>
<div class="user-tools">
<div class="toggle"></div>
<div class="mobile-nav-toggle">
<span></span>
</div>
</div>
</header>
</div>
</body>
OK So I have found out all I needed to do was to replace
<img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo">
with
<label for="topbartoggler" class="toggle"><img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo"></label>
JSFiddle https://jsfiddle.net/heumnzLe/4/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page-wrap {
width: 1216px;
margin: 0 auto;
}
.row-basic {
max-width: 1216px;
}
html,
body {
text-align:justify
color: #fff;
font-size: 19px;
text-rendering: optimizeLegibility;
background: #333;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
header {
background-color: rgba(246, 149, 149, 0.06);
height: 81px;
width: auto;
padding-top: 24px;
margin-top: 26px;
margin-bottom: 0px;
display:flex;
justify-content: space-between;
}
nav {
display:flex;
align-items: center;
}
nav ul {
display:flex;
}
.user-tools {
display:flex;
align-items: center;
}
.user-tools :focus {
outline:none;
}
.logo {
position: relative;
cursor: pointer;
height: 68px;
width: auto;
margin-right: 21px;
margin-left: 31px;
z-index: 1;
}
.mobile-nav-toggle {
height: 50px;
width: 35px;
margin-right: 31px;
display: flex;
align-items: center;
cursor: pointer;
}
.mobile-nav-toggle span,
.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after {
border-radius: 2px;
content: "";
display: block;
height: 6px;
width: 100%;
background: #fff;
position: relative;
}
.mobile-nav-toggle span::before {
top: 11px;
}
.mobile-nav-toggle span::after {
bottom: 17px;
}
.box1 {
height: 26px;
width: 300px;
background: #8242b1;
}
.box2 {
height: 26px;
width: 300px;
background: #b14242;
}
.box3 {
height: 26px;
width: 300px;
background: #424bb1;
}
.page-content {
display:flex;
justify-content: center;
transition: all 0.3s ease-in-out 0s;
position:relative;
margin-top: -260px;
z-index: 0; }
.toggle {
transition: all 0.3s ease-in-out 0s;
text-decoration: none;
font-size: 30px;
color: #eaeaea;
position:relative;
top: -225px;
left: 20px;
z-index: 1; }
.toggle:hover {
color:#cccccc; }
.topbar {
display:flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in-out 0s;
position: relative;
top: -220px;
bottom: 0px;
left: 0px;
height: 220px;
width: auto;
padding: 30px;
background: #333;
z-index: 1; }
.topbar li {
display:flex;
justify-content: center;
list-style: none;
color: rgba(255, 255, 255,0.8);
font-size: 16px;
margin-bottom: 16px;
cursor: pointer; }
.topbar li:hover {
color: rgba(255, 255, 255,1); }
#topbartoggler {
display: none; }
#topbartoggler:checked + .page-wrap .topbar {
top: -4px; }
#topbartoggler:checked + .page-wrap .toggle {
top: -5px; }
#topbartoggler:checked + .page-wrap .page-content {
padding-top: 220px; }
<body>
<input type="checkbox" id="topbartoggler" name="" value="">
<div class="page-wrap">
<div class="topbar">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Clients</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<label for="topbartoggler" class="toggle"><img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo"></label>
<div class="page-content">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<header class="row-basic">
<nav>
<img src="http://bower.io/img/bower-logo.png" alt="logo" class="logo">
</nav>
<div class="user-tools">
<div class="toggle"></div>
<div class="mobile-nav-toggle">
<span></span>
</div>
</div>
</header>
</div>
</body>
I'm creating a liquid j-query slider using Mark Tyrell's blueberry plugin (all hail!), but am having a problem with thumbnail images not re-sizing in Safari (mobile or desktop) that work in IE 8, and Firefox 7.01 and Opera 9.5.
You can see the (almost) working page at http://development.carrollorganization.com/blueberry3.php
IN Safari, the thumbnail images do not shrink to fit the height of the container (div called thumbnail) and are not restricted to overflow:hidden in that container. They do obey the overflow:hidden command in the div's parent (an a tag). The big issue is the refusal to re-size to fit the height of the parent div tag.
I honestly don't know if this is a Safari bug, a box-model problem, user-error (could be likely) or some combination of all. I would appreciate any help anybody can give. If I cou
My style sheets are:
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background: #f0f0f0;
font: 14px/20px Arial, San-Serif;
color: #404040;
}
a { color: #264c99; text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4,p { margin-bottom: 0px; }
h1 {
font-size: 48px;
line-height: 60px;
color: #ffffff;
text-transform: lowercase;
}
h2, h3 {
font-weight: normal;
font-size: 22px;
line-height: 40px;
color: #808080;
}
h3 { font-size: 18px; color: #404040; }
h5 { font-weight: bold; font-size: 14px; color: #000; }
#header {
height: 60px;
padding-top: 0px; padding-bottom: 0px;
text-align: center;
background: #405580;
}
#header h1 {
margin: 0 auto;
min-width: 740px;
max-width: 1140px;
}
#doc {
margin:0px;
padding:0px;
width:100%;
background-color:#F00;
}
#content {
margin: 0 auto;
padding:0px;
width:90%;
min-width: 740px;
max-width: 1440px;
}
.blueberry { max-width: 1440px; position: relative;}
.blueberry { margin: 0 auto; padding:0px;}
.blueberry .slides {
display: block;
position: relative;
overflow: hidden;
}
.blueberry .slides li {
position: absolute;
margin:0px;
padding:0px;
bottom: 0;
left: 0;
overflow: hidden;
}
.blueberry .slides li img {
display: block;
margin:0px;
padding:0px;
width: 100%;
max-width: none;
}
.blueberry .slides li.active { display: block; /*position: relative; */}
.blueberry .crop li img { width: auto; }
.blueberry .pager {
position:absolute;
top:0;
right:0;
height:100%;
background-color:#0F0;
text-align: center;
width:30%;
margin:0;
padding:0;
/*max-width:400px;*/
}
.blueberry .pager li {
overflow:hidden;
display: block;
height:25%;
width:100%;
margin:0;
padding:0;
}
.blueberry .pager li.active {
background-color: #F00;
}
.blueberry .pager li a {
overflow: hidden;
display: block;
height:100%;
text-align:left;
margin:0;
padding:0;
}
.blueberry .pager li a span {
margin:0;
padding:0;
color:#000;
font-size:1em;
}
.blueberry .pager div.thumbNail {
height:75% !important;
margin:5%;
border:1px solid #fff;
}
.blueberry .pager div.thumbNail img {
display:block;
float:left;
height:100%;
width:auto;
}
My page code is (it's a php page, not html):
<div id="doc">
<div id="content">
<!-- blueberry -->
<div class="blueberry">
<ul class="slides">
<li><img src="images/slider_images/slider_01.jpg"/></li>
<li><img src="images/slider_images/slider_02.jpg"/></li>
<li><img src="images/slider_images/slider_03.jpg"/></li>
<li><img src="images/slider_images/slider_04.jpg"/></li>
</ul>
<ul class="pager">
<li><div class="thumbNail" ><img src="images/slider_images/slider_01_TN.jpg"/></div></li>
<li><div class="thumbNail" ><img src="images/slider_images/slider_02_TN.jpg"/></div></li>
<li><div class="thumbNail" ><img src="images/slider_images/slider_03_TN.jpg"/></div></li>
<li><div class="thumbNail" ><img src="images/slider_images/slider_04_TN.jpg"/></div></li>
</ul>
</div>
height: 100% is not working as you might expect it to
I'd choose
.blueberry .pager div.thumbNail {
position: relative
.blueberry .pager div.thumbNail img {
position: absolute;
top: 0px;
bottom: 0px;
}
additionaly