This is the php code I am modifying to have a header and a description text box appear above the slider. It works great if there is a header and description set within the slider, but on other pages I just want the image - instead an empty "text box" is displayed as it reads the <h2> and <br> tags.
Is there anyway I can make an if .$item['itemImageTitle'] & .$item['itemTitle'] empty show just the image, if not empty show the boxes too?
css
.nivo-caption h2 {
font-size: xx-large;
color: #fff;
}
.theme-default .nivo-caption {
font-family: inherit;
font-size: 16px;
font-weight: bold;
/* z-index: 20; */
-moz-text-shadow: 1px 1px 0 #000;
-webkit-text-shadow: 1px 1px 0 #000;
text-shadow: 1px 1px 0 #000;
position: absolute;
left: 23px;
bottom: 20px;
background: rgba(58, 88, 129, 0.5);
color: #fff;
width: 95%;
z-index: 8;
padding: 5px 10px;
opacity: 1;
overflow: hidden;
display: none;
-moz-opacity: 1;
filter: alpha(opacity=1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
php
<div class="slider-wrapper <?php echo "theme-".$theme_title;?>" id="<?php echo "slider-wrapper-".$bID; ?>">
<div id="<?php echo "nivo-slider-".$bID; ?>" class="nivoSlider" style="width: 100% !important;">
<?php
foreach($items as $item) {
echo (strlen($item['itemUrl'])>1) ? '<a href="'.$item['itemUrl'].'">' : '';
echo '<img src="'.$item['itemImageSrc'].'" alt="'.$item['itemImageAlt'].'" title="<h2>'.$item['itemTitle'].'</h2><br>'.$item['itemImageTitle'].'" data-thumb="'.$item['itemImageSrc'].'" >';
echo (strlen($item['itemUrl'])>1) ? '</a>' : '';
}
?>
</div>
</div>
As you said if .$item['itemImageTitle'] & .$item['itemTitle'] empty show just the image. You can try this
<div class="slider-wrapper <?php echo "theme-".$theme_title;?>" id="<?php echo "slider-wrapper-".$bID; ?>">
<div id="<?php echo "nivo-slider-".$bID; ?>" class="nivoSlider" style="width: 100% !important;">
<?php
foreach($items as $item) {
echo (strlen($item['itemUrl'])>1) ? '<a href="'.$item['itemUrl'].'">' : '';
$my_title = "";
if(!empty($item['itemImageTitle']) && !empty($item['itemTitle'])){
$my_title = '<h2>'.$item['itemTitle'].'</h2><br>'.$item['itemImageTitle'].'</h2>';
}
echo '<img src="'.$item['itemImageSrc'].'" alt="'.$item['itemImageAlt'].'" title="'.$my_title.'" data-thumb="'.$item['itemImageSrc'].'" >';
echo (strlen($item['itemUrl'])>1) ? '</a>' : '';
}
?>
</div>
</div>
Related
I have a problem. I created this code that shows products from my database like products:
<?php
include("connect.php");
session_start();
$status="";
if (isset($_POST['id']) && $_POST['id']!="")
{
$Id = $_POST['id'];
$result = mysqli_query($conn,"SELECT * FROM Producten WHERE `Id`='$Id'");
$row = mysqli_fetch_assoc($result);
$naam = $row['Naam'];
$id = $row['Id'];
$prijs = $row['Prijs'];
$foto = $row['Foto'];
$winkelwagen_array = array(
$id=>array(
'id'=>$id,
'naam'=>$naam,
'prijs'=>$prijs,
'hoeveelheid'=>1,
'foto'=>$foto)
);
if(empty($_SESSION["winkelwagen"]))
{
$_SESSION["winkelwagen"] = $winkelwagen_array;
$status = "<div class='box'>Product toegevoegd aan winkelwagen!</div>";
}
else
{
$_SESSION["winkelwagen"] = array_merge($_SESSION["winkelwagen"],$winkelwagen_array);
$status = "<div class='box'>Product toegevoegd aan winkelwagen!</div>";
}
}
?>
<html>
<head>
<link rel='stylesheet' href='css/style.css' type='text/css' media='all' />
</head>
<body>
<div style="width:700px; margin:50 auto;">
<?php
if(!empty($_SESSION["winkelwagen"]))
{
$winkelwagen_hoeveelheid = count(array_keys($_SESSION["winkelwagen"]));
?>
<div class="winkelwagen_div">
<img src="media/winkelwagen_logo.png" /> Winkelwagen<span><?php echo $winkelwagen_hoeveelheid; ?></span>
</div>
<?php
}
$result = mysqli_query($conn,"SELECT * FROM Producten");
while($row = mysqli_fetch_assoc($result))
{
echo "<div class='product_vak'>
<form method='post' actie=''>
<input type='hidden' name='id' value=".$row['Id']." />
<div class='foto'><img src='".$row['Foto']."' /></div>
<div class='naam'>".$row['Naam']."</div>
<div class='prijs'>€".$row['Prijs']."</div>
<button type='submit' class='koop'>Koop nu</button>
</form>
</div>";
}
mysqli_close($conn);
?>
<div style="clear:both;"></div>
<div class="melding_box" style="margin:10px 0px;">
<?php echo $status; ?>
</div>
</div>
</body>
</html>
with this css:
.product_vak {
float:left;
padding: 10px;
text-align: center;
}
.product_vak:hover {
box-shadow: 0 0 0 2px #e5e5e5;
cursor:pointer;
}
.product_vak .naam {
font-weight:bold;
}
.product_vak .koop {
text-transform: uppercase;
background: #F68B1E;
border: 1px solid #F68B1E;
cursor: pointer;
color: #fff;
padding: 8px 40px;
margin-top: 10px;
}
.product_vak .koop:hover {
background: #f17e0a;
border-color: #f17e0a;
}
.melding_box .box{
margin: 10px 0px;
border: 1px solid #2b772e;
text-align: center;
font-weight: bold;
color: #2b772e;
}
.table td {
border-bottom: #F0F0F0 1px solid;
padding: 10px;
}
.winkelwagen_div {
float:right;
font-weight:bold;
position:relative;
}
.winkelwagen_div a {
color:#000;
}
.winkelwagen_div span {
font-size: 12px;
line-height: 14px;
background: #F68B1E;
padding: 2px;
border: 2px solid #fff;
border-radius: 50%;
position: absolute;
top: -1px;
left: 13px;
color: #fff;
width: 14px;
height: 13px;
text-align: center;
}
.winkelwagen .verwijderen {
background: none;
border: none;
color: #0067ab;
cursor: pointer;
padding: 0px;
}
.winkelwagen .verwijderen:hover {
text-decoration:underline;
}
But when I load the page I see 2 products above each other in a very very large size. Now how can I get them to load next to each other and in a smaller size, because now they are filling the whole screen per product!
I already tried giving product_vak a width, but the image doesn't size with that!
How can I fix this?
try like this
.product_vak {
float:left;
padding: 10px;
text-align: center;
width:40%;
I've got a problem : when i try to move the cursor of the mouse on the sub-menu of the drop down, for some motive it disappier.
I try to check in file css end in its file js but at the third day again i didn't find the solutions..i think that could be some problem with [block] in class css. does someone see if there something that wrong end eventually how could operate to resolve this problem? under here post an image with the code.
Thank in advance.
Here another image...maybe understanding better:
here the code about the top-link :
/* ======================================================================================= */
--> .top-link { background: #f7f7f7;line-height: 35px; position: relative;color: #6a6a6a; border-bottom: 1px solid #d8d8d8;}
.form-language, .form-currency { float: left;}
.form-language label { display: none;}
.form-language select, .form-currency select { padding: 4px 10px; background: #f2f2f2;}
p.welcome-msg { margin: 0 0 0 25px; float:left; padding: 5px 0;}
.top-link ul.links { padding: 5px 0;}
.top-link ul.links li { padding:0 15px 0 0; float: left;}
.top-link ul.links li a { color: #6a6a6a;font-size: 11px;text-transform: uppercase; }
.top-link ul.links li a:hover { }
.call-phone{text-align: right;}
.call-phone span{color:#999;font-weight: bold;}
here the code about bottom Drop down :
.drop-lang {
list-style: none;
padding: 0;
margin: 0;float: right;
}
.drop-lang .drop-trigger {
position: relative;
z-index: 9999;
float: right;
padding: 0 5px 0 10px;
}
.drop-lang li a {
position: relative;
padding: 5px 0 5px 0;
display: block;
color: #6a6a6a;
text-transform:uppercase;
font-weight: normal;
font-size: 11px;
z-index: 9999;
}
.drop-lang .drop-trigger .sub-lang {
position: absolute;
top:40px;
left:-1px; /* dropdown left or right */
list-style: none;
padding:0 11px 0 4px;
margin: 0;
display: none;
background: #f7f7f7;
border: 1px solid #d8d8d8;
border-top: none
z-index: 9999;
}
.drop-lang .drop-trigger:hover .sub-lang {
top:45px;
display: block;
}
.drop-lang .sub-lang li a { padding: 0 5px; line-height: 22px; display: block; color: #666; text-transform:uppercase; font-weight: normal; font-size: 11px; border-top: 1px solid #d8d8d8; border-right:0;border-left:0; border-bottom:0; border-radius:0;}
.drop-lang .sub-lang li a:hover { }
Html/php part :
<?php if(count($this->getStores())>1): ?>
<div class="form-language">
<label for="select-language"><?php echo $this->__('Language:') ?></label>
<ul class="drop-lang">
<li class="drop-trigger">
<?php foreach ($this->getStores() as $_lang): ?>
<?php if($_lang->getId() == $this->getCurrentStoreId()): ?>
<a class="<?php echo $_lang->getCode() ?>" href="<?php echo $_lang->getCurrentUrl() ?>"><?php echo $this->htmlEscape($_lang->getName()) ?><i class="fa fa-angle-down"></i></a>
<?php endif?>
<?php endforeach; ?>
<ul class="sub-lang">
<?php foreach ($this->getStores() as $_lang): ?>
<?php $_selected = ($_lang->getId() == $this->getCurrentStoreId()) ? ' class="selected"' : '' ?>
<li><a class="<?php echo $_lang->getCode() ?>" href="<?php echo $_lang->getCurrentUrl() ?>"<?php //echo $_selected; ?>><?php echo $this->htmlEscape($_lang->getName()) ?></a></li>
<?php endforeach; ?>
</ul>
</li>
</ul>
</div>
<?php endif; ?>
Try the fiddle at - https://jsfiddle.net/456f2sf7/
.drop-lang .drop-trigger:hover .sub-lang {
top:20px;//Updated value
display: block;
}
Just decreasing the top margin to 20px, ensures that the dropdown does not disappear as it is visible only on hover.
css:
<style>
#head3{
color: #fff;
text-align: center;
font-weight: bold;
background-image: url(images/flag/sab.jpg);
background-size: 1095px 180px;
background-repeat: no-repeat;
height: 180px;
}
.flip-container {
perspective: 1000px;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 240px;
height: 140px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
background: orange;
transform: rotateY(180deg);
}
#head5{
text-align: center;
margin-top: 50px;
font-weight: bold;
color: #fff;
}
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 800px;
position: relative;
margin: 5% auto;
padding: 5px 20px 13px 20px;
background: #fff;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
#heading{
color: #fff;
text-align: center;
font-weight: bold;
background: #260663;
width: 240px;
}
</style>
code:
<?php
$sql = "select * from country";
$result = mysqli_query($link,$sql);
while ($fetch = mysqli_fetch_array($result))
{
$id = $fetch['id'];
$about = $fetch['about'];
$country_name = $fetch['country_name'];
?>
<div class="col-md-3">
<h5 id="heading"><?php echo $fetch['country_name']; ?></h5>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');" style="margin-top: -15px;">
<div class="flipper">
<div class="front">
<img src="super_admin/country/flag/<?php echo $fetch['flag']; ?>" alt="USA" width="240" height="140">
</div>
<div class="back">
<h5 id="head5">About USA <span>(click)</span></h5>
</div>
</div>
</div>
<h5 id="heading">Search Colleges</h5>
</div>
<?php
}
?>
<div id="<?php echo $country_name; ?>" class="modalDialog">
<div>X
<h2><?php echo $country_name; ?></h2>
<p><?php echo $about; ?></p>
</div>
</div>
In this code I want to open diffrent modal according by country name.
<span>(click)</span>
here I am echo $country_name but there is no modal showing but when I am define openModal in place of $country_name modal open so, how can I open diffrent modal according to country_name ?
Thank You
<?php
$sql = "select * from country";
$result = mysqli_query($link,$sql);
while ($fetch = mysqli_fetch_array($result))
{
$id = $fetch['id'];
$about = $fetch['about'];
$country_name = $fetch['country_name'];
?>
<div class="col-md-3">
<h5 id="heading"><?php echo $fetch['country_name']; ?></h5>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');" style="margin-top: -15px;">
<div class="flipper">
<div class="front">
<img src="super_admin/country/flag/<?php echo $fetch['flag']; ?>" alt="USA" width="240" height="140">
</div>
<div class="back">
<h5 id="head5">About USA <span>(click)</span></h5>
</div>
</div>
</div>
<h5 id="heading">Search Colleges</h5>
</div>
<div id="<?php echo $country_name; ?>" class="modalDialog">
<div>X
<h2><?php echo $country_name; ?></h2>
<p><?php echo $about; ?></p>
</div>
</div>
<?php
}
?>
I have this code i use for my website to display text and a button:
<?php if ($slide1 != null ) : ?><li><img src="<?php echo $this->baseurl ?>/<?
php echo htmlspecialchars($slide1); ?>" /><p class="caption">
<?php echo ($slidedesc1); ?>Meer info</p></li>
Right now the entire thing is displayed as a button with the class "caption". I only want class "caption" to be aplied on "Meer info" and not to "$slidedesc1". How would I do that? Do I change the position of class?
Caption properties:
.callbacks .caption {
color: #fff;
display: block;
font-size: 45px;
max-width: none;
position: absolute;
text-align: center;
text-shadow: 0 0 1px #555;
top: 20%;
width: 100%;
z-index: 2;
}
.callbacks .caption a {
background-color: #3498DB;
border-bottom: 5px solid #2980B9;
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
border-radius: 10px;
font-family: 'Pacifico', cursive;
font-size: 25px;
color: #FFF !important;
text-decoration: none;
z-index:11;
}
.callbacks .caption a:hover
{background: #555; border-bottom: 5px solid #000; text-decoration:none;}
.callbacks .caption a:active
{
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 5px solid #333;
transition: all 0.1s;
-webkit-transition: all 0.1s;
background-color: #444;
}
try this code :
<?php if ($slide1 != null ) : ?><li><img src="<?php echo $this->baseurl ?>/<?
php echo htmlspecialchars($slide1); ?>" /><p>
<?php echo ($slidedesc1); ?><span class="caption">Meer info</span></p></li>
Does this work?
<?php
if ($slide1 != null ) {
echo "
<li>
<img src='".$this->baseurl."'".htmlspecialchars($slide1) ."/>
<p>
<a href='/algemene-informatie'>
$slidedesc1
<label class='caption'>
Meer info
</label>
</a>
</p>
</li>
"
?>
i have php program that contain div main_wrapper that div have two sub div resultwrapper and adv_right. I want adv_right div exactly right side of the resultwrapper div.When i'm use float mean that div present outside of the main_wrapper div.
<style>
.resultwrapper{width:990px; margin: 10px auto 10px auto; clear:both; }
.resultitem{ float: left;
height: 170px;
margin-bottom: 0px;
margin-left: 10px;
min-height: 130px;
width:218px;}
.resultleftitem{padding-left:0;margin-left:0px;}
.resultitem img{border:dotted 1px #666; padding:6px;}
.resultitem img:hover{border:solid 1px #F60;}
.resultitem h4{font-size:12px; font-weight:bold; color:#249ce9; margin-top:5px; }
.resultitem a{color:#249ce9;}
.resultitem .caption{color:#9c9c9c; font-size:12px; display:block; margin-top:6px; text-align:justify;}
</style>
<div class="main_warpper">
<div class="resultwrapper">
<?php
while($row = mysql_fetch_array($rs)) {
$id=$row['id'];
$type=$row['type'];
$location=$row['location'];
if(file_exists("properties//". $imageloc ."//thumb.jpg") )
{
$thumb_img="properties/". $imageloc ."/thumb.jpg";
} else {
$thumb_img="images/default.jpg";
}
if($cnt==0 || $cnt ==4 ) $newResult=true; else $newResult=false;
?>
<div id="parent" >
<div class="resultitem <?php if($newResult) echo ' resultleftitem'; ?>" id="resultitem"> <a href="viewpropdetails.php?id=<?php echo $id;?>" target="_blank">
<img id="parent" src="<?php echo $thumb_img; ?>" alt="<?php $new=strtolower($heading); echo ucwords($new); ?>" title="<?php $new=strtolower($heading); echo ucwords($new); ?>" width="100" height="100" /></a>
<div class="itemdetails">
<h4 id="linkheading"><?php echo $type ." # ".$location; ?></h4>
<span class="box"><?php echo cropStr($desc,$MAX_DESC); ?></span>
</div>
</div>
</div>
<?php
$cnt++; } ?>
</div>
<div class="adv_right" style=" clear:both; width:15%; float:right;height:300px; background-color:#999999;">
</div>
</div>
Please try it,
Remove clear:both; from both div and set width what u want ,,
Please try this code you want like this ??
<style>
.resultwrapper {
margin: 10px auto 10px auto;
}
.resultitem {
float: left;
height: 170px;
margin-bottom: 0px;
margin-left: 10px;
min-height: 130px;
width:218px;
}
.resultleftitem {
padding-left:0;
margin-left:0px;
}
.resultitem img {
border:dotted 1px #666;
padding:6px;
}
.resultitem img:hover {
border:solid 1px #F60;
}
.resultitem h4 {
font-size:12px;
font-weight:bold;
color:#249ce9;
margin-top:5px;
}
.resultitem a {
color:#249ce9;
}
.resultitem .caption {
color:#9c9c9c;
font-size:12px;
display:block;
margin-top:6px;
text-align:justify;
}
</style>
<div class="main_warpper">
<div class="resultwrapper">
<?php
while($row = mysql_fetch_array($rs)) {
$id=$row['id'];
$type=$row['type'];
$location=$row['location'];
if(file_exists("properties//". $imageloc ."//thumb.jpg") )
{
$thumb_img="properties/". $imageloc ."/thumb.jpg";
} else {
$thumb_img="images/default.jpg";
}
if($cnt==0 || $cnt ==4 ) $newResult=true; else $newResult=false;
?>
<div id="parent" >
<div class="resultitem <?php if($newResult) echo ' resultleftitem'; ?>" id="resultitem"> <img id="parent" src="<?php echo $thumb_img; ?>" alt="<?php $new=strtolower($heading); echo ucwords($new); ?>" title="<?php $new=strtolower($heading); echo ucwords($new); ?>" width="100" height="100" />
<div class="itemdetails">
<h4 id="linkheading"><?php echo $type ." # ".$location; ?></h4>
<span class="box"><?php echo cropStr($desc,$MAX_DESC); ?></span> </div>
</div>
</div>
<?php
$cnt++; } ?>
</div>
<div class="adv_right" style="width:15%; float:right;height:300px; background-color:#999999;">23123 </div>
</div>
add float:left here
<div class="resultwrapper" style="float:left;">
and rempove clear:both and add float:left
<div class="adv_right" style=" clear:both; width:15%; float:left;height:300px;
background-color:#999999;">
see demo here ....http://jsfiddle.net/6e4xN/1/
when you going to use this code it will not work with more than 7-8 elements, to work when you have more elements then use below stylesheet.
<style>
.resultwrapper {
margin: 10px auto 10px auto;
width:80%;
float:left;
}
.resultitem {
float: left;
height: 170px;
margin-bottom: 0px;
margin-left: 10px;
min-height: 130px;
width:150px;
}
.resultleftitem {
padding-left:0;
margin-left:0px;
}
.resultitem img {
border:dotted 1px #666;
padding:6px;
}
.resultitem img:hover {
border:solid 1px #F60;
}
.resultitem h4 {
font-size:12px;
font-weight:bold;
color:#249ce9;
margin-top:5px;
}
.resultitem a {
color:#249ce9;
}
.resultitem .caption {
color:#9c9c9c;
font-size:12px;
display:block;
margin-top:6px;
text-align:justify;
}
</style>
Let me know if it works for you or not.
I guess there is some problem in the code. You CANNOT use the same ID for multiple elements in a page. Secondly when you are using percent width for the adv_right div, why don't you use the same for resultwrapper div with both the resultwrapper & adv_right divs floated left and no clear:both in the css. I feel this should solve your problem.