How do I move the thumbnails in a dynamic slideshow - php

I am trying to move the thumbnails which are displayed vertically on the right hand side of the main image.
I would like to display them horizontally below the main image.
Slideshow is dynamic from a mysql database.
Php from the display page:
<?php $sqli3 = "SELECT * FROM pro_img WHERE pro_id='$pid' ORDER BY img_id ASC LIMIT 0,1";
$resulti3 = mysql_query($sqli3);
$rs3 = mysql_fetch_array($resulti3);
$description = str_replace( ' <br /><br /><br />', '</p>', $rs[pro_desc]);
$description = str_replace( "<br /><br /><br />\r\n", "\n\r<p>", $description);
?>
<div id=show class=slideshow>
<div class=slideshow-images>
<?php $sqli2 = "SELECT * FROM pro_img WHERE pro_id='$pid' ORDER BY img_id";
$resulti2 = mysql_query($sqli2);
$i=0;
while($rsi2 = mysql_fetch_array($resulti2)){?>
<a href=><img id=slide-<?php print $i?> src=images/pro-photo/normals/<?php print $rsi2[img_name]?> alt="<?php print $title.' Image '.($i+1)?>"/></a>
<?php $i++;}?>
</div>
<div class=slideshow-thumbnails><ul> <?php $sqli2 = "SELECT * FROM pro_img WHERE pro_id='$pid' ORDER BY img_id";
$resulti2 = mysql_query($sqli2);
$i=0;
while($rsi2 = mysql_fetch_array($resulti2)){?>
<li><a href=#slide-<?php print $i?>><img src=images/pro-photo/thumbnails/<?php print $rsi2[img_name]?> alt="<?php print $title.' Slide '.($i+1)?>"/></a></li><?php $i++;}?>
</ul></div>
</div>
And this is the slideshow CSS
.slideshow {
display: block;
position: relative;
z-index: 0;
}
.slideshow-images {
display: block;
overflow: hidden;
position: relative;
}
.slideshow-images img {
display: block;
position: absolute;
z-index: 1;
}
.slideshow-thumbnails {
overflow: hidden;
}
.slideshow {
width: 508px;
height: 375px;
margin: 0 0 20px 0;
}
.slideshow a img {
border: 0;
}
.slideshow-images {
width: 508px;
height: 381px;
}
.slideshow-images-visible {
opacity: 1;
}
.slideshow-images-prev {
opacity: 0;
}
.slideshow-images-next {
opacity: 0;
}
.slideshow-images img {
float: left;
left: 0;
top: 0;
position: static;
}
.slideshow-thumbnails * {
margin: 0;
padding: 0;
}
.slideshow-thumbnails li {
float: left;
list-style: none;
margin: 15px 0 0 16px;
position: relative;
}
.slideshow-thumbnails a {
display: block;
float: left;
position: relative;
}
.slideshow-thumbnails a:hover {
/*background-color: #005b79 !important;*/
opacity: 1 !important;
}
.slideshow-thumbnails img {
display: block;
height: 81px;
width: 108px;
}
.slideshow-thumbnails-active {
background-color: #0081ac;
opacity: 1;
}
.slideshow-thumbnails-inactive {
background-color: #FFF;
opacity: .5;
}
.slideshow-thumbnails {
height: 381px;
left: auto;
right: -133px;
top: 0;
position: absolute;
width: 135px;
overflow: auto;
}
.slideshow-thumbnails ul {
height: 100%;
position: absolute;
width: 120px;
}
Any help would be great.
Thank you
Javascript here:
function VisualSlideShow(options){
if(options.effect&&options.effect.toLowerCase()=="fade"){options.effect="";}var path="";var regexp=/^(.*)visualslideshow\.js$/;$each($$("script"),function(item,index,object){if(regexp.test(item.src)){var res=regexp.exec(item.src);path=res[1];}});function writeScript(src,text){document.write("<scr"+"ipt type=\"text/javascript\""+(src?" src=\""+path+src+"\"":"")+">"+(text||"")+"</scr"+"ipt>");}writeScript("slideshow.js");if(options.effect){writeScript("slideshow."+options.effect.toLowerCase()+".js");}if(options.sound){writeScript("swfobject.js");}window.addEvent("domready",function(){if(options.sound){window.vssSoundListener={onInit:function(){}};$(options.id).grab(new Element("div",{id:"vssSound"}));swfobject.createSWF({data:path+"player_mp3_js.swf",width:"1",height:"1"},{allowScriptAccess:"always",loop:true,FlashVars:"listener=vssSoundListener&loop=1&autoplay=1&mp3="+options.sound},"vssSound");}var Instance;if(options.effect){Instance=new Slideshow[options.effect](options.id,null,options);}else{Instance=new Slideshow(options.id,null,options);}if(!window.visualslideshow){window.visualslideshow=[];}window.visualslideshow[window.visualslideshow.length]=Instance;var h=$$("#"+options.id+" div.slideshow-images");if(h&&t){var c=new Element("div",{styles:{position:"absolute",right:0,bottom:0,padding:"0 3px 2px",'background-color':"#EEE",'z-index':999999},events:{contextmenu:function(eventObject){return false;}}});
}});}
VisualSlideShow({"duration":2000,"delay":5000,"id":"show","width":508,"height":381,"captions":true,"controller":false,"thumbnails":true,"loop":true,"paused":false,"effect":"Fade"});

I have worked out the solution to this problem.
The PHP does not change only the css and the javascript.
Both are below.
CSS
.slideshow {
display: block;
position: relative;
z-index: 0;
}
.slideshow-images {
display: block;
overflow: hidden;
position: relative;
}
.slideshow-images img {
display: block;
position: absolute;
z-index: 1;
}
.slideshow-thumbnails {
overflow: hidden;
}
.slideshow {
width: 630px;
height: 600px;
margin: 0 auto;
}
.slideshow a img {
border: 0;
}
.slideshow-images {
width: 630px;
height: 434px;
left: 0px;
top: 0px;
}
.slideshow-images-visible {
opacity: 1;
}
.slideshow-images-prev {
opacity: 0;
}
.slideshow-images-next {
opacity: 0;
}
.slideshow-images img {
float: left;
left: 0;
top: 0;
position: static;
}
.slideshow-thumbnails * {
margin: 0;
padding: 0;
}
.slideshow-thumbnails li {
float: left;
list-style: none;
margin: 0px 0px 0px 0;
position: relative;
}
.slideshow-thumbnails a {
display: block;
float: left;
padding: 3px;
position: relative;
}
.slideshow-thumbnails a:hover {
background-color: #CCC !important;
opacity: 1 !important;
}
.slideshow-thumbnails img {
display: block;
height: 83px;
width: 120px;
}
.slideshow-thumbnails-active {
background-color: #7A7A7A;
opacity: 0.8;
}
.slideshow-thumbnails-inactive {
background-color: #FFF;
opacity: .5;
}
.slideshow-thumbnails {
top: 420px;
height: 180px;
left: 0;
position: absolute;
width: 630px;
overflow: auto;
}
.slideshow-thumbnails ul {
height: 100px;
left: 0;
position: absolute;
top: 0;
width: 630px;
}
.slideshow {
margin-top: 0px;
}
.slideshow-captions {
background: #000;
bottom: 20px;
color: #FFF;
font: normal 12px/22px Arial, sans-serif;
left: 20px;
overflow: hidden;
position: absolute;
padding: 0 10px;
width: 580px; /* 100% */
z-index: 10000;
}
.slideshow-captions-hidden {
opacity: 0;
}
.slideshow-captions-visible {
opacity: .7;
}
.slideshow-controller {
background: url(../images/controller.png) no-repeat;
height: 70px;
left: 50%;
margin: -21px 0 0 -96px;
overflow: hidden;
position: absolute;
bottom: 50%;
width: 192px;
z-index: 10000;
}
.slideshow-controller * {
margin: 0;
padding: 0;
}
.slideshow-controller-hidden {
opacity: 0;
}
.slideshow-controller-visible {
opacity: 1;
}
.slideshow-controller a {
cursor: pointer;
display: block;
height: 32px;
overflow: hidden;
position: absolute;
top: 15px;
}
.slideshow-controller a.active {
background-position: 0 32px;
}
.slideshow-controller li {
list-style: none;
}
.slideshow-controller li.first a {
background-image: url(../images/controller-first.png);
left: 13px;
width: 32px;
}
.slideshow-controller li.prev a {
background-image: url(../images/controller-prev.png);
left: 46px;
width: 32px;
}
.slideshow-controller li.pause a {
background-image: url(../images/controller-pause.png);
left: 79px;
width: 32px;
}
.slideshow-controller li.play a {
background-position: 32px 0;
}
.slideshow-controller li.play a.active {
background-position: 32px 32px;
}
.slideshow-controller li.next a {
background-image: url(../images/controller-next.png);
left: 112px;
width: 32px;
}
.slideshow-controller li.last a {
background-image: url(../images/controller-last.png);
left: 145px;
width: 32px;
}
.slideshow-loader {
height: 28px;
right: 0;
position: absolute;
top: 0;
width: 28px;
z-index: 10001;
}
.slideshow-loader-hidden {
opacity: 0;
}
.slideshow-loader-visible {
opacity: 1;
}
Javascript:
function VisualSlideShow(options){
if(options.effect&&options.effect.toLowerCase()=="fade"){options.effect="";}var path="";var regexp=/^(.*)visualslideshow\.js$/;$each($$("script"),function(item,index,object){if(regexp.test(item.src)){var res=regexp.exec(item.src);path=res[1];}});function writeScript(src,text){document.write("<scr"+"ipt type=\"text/javascript\""+(src?" src=\""+path+src+"\"":"")+">"+(text||"")+"</scr"+"ipt>");}writeScript("slideshow.js");if(options.effect){writeScript("slideshow."+options.effect.toLowerCase()+".js");}if(options.sound){writeScript("swfobject.js");}window.addEvent("domready",function(){if(options.sound){window.vssSoundListener={onInit:function(){}};$(options.id).grab(new Element("div",{id:"vssSound"}));swfobject.createSWF({data:path+"player_mp3_js.swf",width:"1",height:"1"},{allowScriptAccess:"always",loop:true,FlashVars:"listener=vssSoundListener&loop=1&autoplay=1&mp3="+options.sound},"vssSound");}var Instance;if(options.effect){Instance=new Slideshow[options.effect](options.id,null,options);}else{Instance=new Slideshow(options.id,null,options);}if(!window.visualslideshow){window.visualslideshow=[];}window.visualslideshow[window.visualslideshow.length]=Instance;var h=$$("#"+options.id+" div.slideshow-images");if(h&&t){var c=new Element("div",{styles:{position:"absolute",right:0,bottom:0,padding:"0 3px 2px",'background-color':"#EEE",'z-index':999999},events:{contextmenu:function(eventObject){return false;}}});
}});}
VisualSlideShow({"duration":2000,"delay":5000,"id":"show","width":630,"height":420,"captions":false,"controller":false,"thumbnails":true,"loop":true,"paused":false,"effect":"Fade"});
I hope this helps other people looking for a mysql driven slideshow.

Related

Woocommerce star rating bug

I am trying to make a woocommerce theme, but the star ratings aren't working properly.
This is the code for showing the star rating.
<div class="rating-custom">
<?php wc_get_template( 'single-product/rating.php' ); ?>
</div>
This is my CSS
.woocommerce-product-rating {
margin-bottom: 1.618em;
line-height: 2;
}
.woocommerce-product-rating .star-rating {
margin: 0.5em 4px 0 0;
float: left;
font-family: star;
}
.woocommerce-product-rating::after, .woocommerce-product-rating .rating-custom, .woocommerce-product-rating::before {
content: " ";
display: table;
}
.star-rating {
float: right;
overflow: hidden;
position: relative;
height: 1em;
line-height: 1;
font-size: 1em;
width: 5.4em;
font-family: star;
}
.star-rating::before {
content: "SSSSS";
color: #d3ced2;
float: left;
top: 0;
left: 0;
position: absolute;
}
.star-rating span {
overflow: hidden;
float: left;
top: 0;
left: 0;
position: absolute;
padding-top: 1.5em;
}
.star-rating span::before {
content: "SSSSS";
top: 0;
color: red;
position: absolute;
left: 0;
}
But my result is only "$$$"
actual result
Can someone help me on how to make this work the way i want?
Following Obsidian Age answer, i've added this line of code to my span tag: font-family: 'star'
And now everything is running smooth. Ty to zipkundan aswell for the help!

Wordpress Ultimate Popup Plugin - Keep modal open even when clicked outside of?

I am using Ultimate Popup Plugin from CodeCanyon on this website Click here to create a login modal.
The code is working fine, but the popup stays even if someone clicks outside the popup, and the user must enter the details and click enter.
This is how it looks;
I tried providing a z-index to keep the popup on but I am stuck.
I had updated the code I have for the wordpress plugin whatever I could find.
This is the CSS and the JS of the popup:
jQuery(window).load(function(){
if (jQuery.cookie("popupTemporaryCookie13428")) {
// Popup is hiding after showing first time!
jQuery("#ultimate-popup-13428").hide();
} else if (jQuery.cookie("popupLongerCookie13428")) {
var inst = jQuery("#ultimate-popup-13428").remodal();
inst.open();
jQuery("#ultimate-popup-13428").addClass("ultimate-popup-wrapper-activate");
} else {
var inst = jQuery("#ultimate-popup-13428").remodal();
inst.open();
jQuery("#ultimate-popup-13428").addClass("ultimate-popup-wrapper-activate");
}
var expiresAt = new Date();
expiresAt.setTime(expiresAt.getTime() + 1*24*60*60*1000); // Days
jQuery.cookie("popupLongerCookie13428", new Date());
jQuery.cookie("popupTemporaryCookie13428", true, { expires: expiresAt });
});
* {
box-sizing: border-box;
}
*:before,
*:after {
box-sizing: border-box;
}
.ultimate-popup-wrapper {
background: #fff none repeat scroll 0 0;
border-top: 8px solid;
padding: 35px;
position: fixed;
text-align: center;
z-index: 9999;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: .4s;
transition: .4s;
visibility: hidden;
max-width: 100%;
}
.ultimate-popup-wrapper-activate {
opacity: 1;
filter: alpha(opacity=100);
visibility: visible;
}
.cross-btn-ppm {
font-size: 20px;
font-weight: 700;
position: absolute;
right: 10px;
text-transform: uppercase;
top: 5px;
cursor: pointer;
z-index: 99;
font-family: arial, sans-serif;
}
.ultimate-popup-inner h2,
.entry-content .ultimate-popup-inner h2,
.entry-summary .ultimate-popup-inner h2,
.page-content .ultimate-popup-inner h2,
.comment-content .ultimate-popup-inner h2 {
font-size: 25px;
margin: 0 0 15px;
word-wrap: normal;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
.ultimate-popup-inner {
font-size: 16px;
}
.ultimate-popup-shortcodes p {
margin-bottom: 15px;
}
.ultimate-popup-shortcodes input[type="text"],
.ultimate-popup-shortcodes input[type="email"] {
border: 1px solid #ddd;
margin-bottom: 10px;
padding: 10px !important;
width: 100% !important;
}
.ultimate-popup-shortcodes {
margin: 30px auto 0;
max-width: 500px;
text-align: left;
}
.ultimate-popup-shortcodes br { display: none }
.ultimate-popup-shortcodes input[type="submit"] {
border: medium none;
border-radius: 7px;
color: #fff;
font-size: 17px;
padding: 15px;
width: 100%;
text-transform: uppercase;
-webkit-transition: .4s;
transition: .4s;
}
.ultimate-popup-shortcodes .gform_wrapper .gform_heading { display: none }
.ultimate-popup-shortcodes .gform_wrapper .gform_footer {
margin: 15px 0 0;
padding: 0;
}
.ultimate-popup-wrapper-hide .lean-overlay,
.ultimate-popup-wrapper-hide .ultimate-popup-wrapper {
display: none !important;
visibility: hidden !important;
}
.ultimate-popup-halfway-scroll-activate .cross-btn-ppm,
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-2 .cross-btn-ppm,
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-3 .cross-btn-ppm,
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-4 .cross-btn-ppm,
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-8 .cross-btn-ppm,
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-9 .cross-btn-ppm {
right: 0;
top: 0;
z-index: 99;
border-radius: 0;
}
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-2 .cross-btn-ppm { top: -8px }
.ultimate-popup-theme-id-5.ultimate-popup-halfway-scroll-activate .cross-btn-ppm {
background: #333;
height: 40px;
width: 40px;
line-height: 40px;
border-radius: 50%;
top: 20px;
z-index: 9;
}
.ultimate-popup-theme-id-5.ultimate-popup-halfway-scroll-activate .popup-inner-col-thumb { padding-top: 5px }
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-12 .cross-btn-ppm,
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-10 .cross-btn-ppm,
.ultimate-popup-halfway-scroll-activate.ultimate-popup-theme-id-6 .cross-btn-ppm {
right: 10px;
top: 5px;
}
.ultimate-popup-theme-id-1 .cross-btn-ppm { right: 10px }
/* Mobile Layout: 320px. */
#media only screen and (max-width: 767px) {
.ultimate-popup-wrapper { overflow: auto }
.ultimate-popup-wrapper .pop-inner-column .popup-inner-col-thumb {
float: none;
margin-bottom: 30px;
margin-top: 0;
padding: 0;
width: auto;
}
.ultimate-popup-wrapper .pop-inner-column .popup-inner-col-cont {
float: none;
padding: 25px;
width: auto;
}
.ultimate-popup-automatic-activate .cross-btn-ppm,
.ultimate-popup-automatic-activate.ultimate-popup-theme-id-2 .cross-btn-ppm,
.ultimate-popup-automatic-activate.ultimate-popup-theme-id-3 .cross-btn-ppm,
.ultimate-popup-automatic-activate.ultimate-popup-theme-id-4 .cross-btn-ppm,
.ultimate-popup-automatic-activate.ultimate-popup-theme-id-8 .cross-btn-ppm,
.ultimate-popup-automatic-activate.ultimate-popup-theme-id-9 .cross-btn-ppm {
right: 0;
top: 0;
z-index: 99;
border-radius: 0;
}
}
<div class="remodal" data-remodal-id="modal"
data-remodal-options="hashTracking: false, closeOnOutsideClick: false">
<form method="post">
<div class="form-group">
<label for="email">Login</label>
<input type="text" class="form-control" required name="email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="password" class="form-control" required id="pwd" name="pwd">
</div>
<button type="submit" class="btn btn-default">Enter</button>
</form>
</div>

How to modify css to "box-shadow" to portrait or landscape image dynamically

I am looking to have the below code to dynamically change the box-shadow to match the image orientation. . . either landscape or portrait. Here is a link to an example: http://gbamedical.com/test3.php It currently looks funny when a portrait image is left orientated with landscape box. Also looking to have thumbnails the same height which would require portrait thumbnails to be narrower.
The CSS:
style>* {
margin: 0;
padding: 0;
}
.slider {
width: 640px;
position: relative;
padding-top: 480px;
margin: 20px auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.slider > img {
position: absolute;
left: 0;
top: 0;
transition: all 0.5s;
}
.slider input {
display: none;
}
.slider label {
width: 60px;
margin: 20px 2px;
float: left;
border: 2px solid #999;
cursor: pointer;
transition: all 0.5s;
opacity: 0.6;
box-sizing: border-box;
}
.slider label img {
width: 100%;
display: block;
}
.slider input:checked + label {
border-color: #666;
opacity: 1;
}
.slider input ~ img {
opacity: 0;
transform: scale(1.1);
}
.slider input:checked + label + img {
opacity: 1;
transform: scale(1);
}
</style>
The PHP code:
<div class="slider">
<?php
$array = glob('ebayimg/8851gba050516/size_2/*');
$i = 1;
foreach($array as $image) {
?>
<input type="radio" name="slide" id="image<?php echo $i ?>" <?php if($i == 1){ ?> checked <?php } ?>/>
<label for="image<?php echo $i ?>">
<img src="http://www.gbamedical.com/<?php echo $image ?>"/>
</label>
<img src="http://www.gbamedical.com/<?php echo $image ?>" height="480"/>
<?php
$i++;
}
?>
You may have to use javascript to change it on the fly by getting the width of the image and changing the .slider width accordingly:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
$("label").on('click',function() {
var preview = $(this).next();
var getW = preview.width();
$(".slider").css({"width":getW*.91});
});
});
</script>
Here is a jsFiddle Demo
EDIT
Try this set of styles:
* {
margin: 0;
padding: 0;
}
.slider {
max-width: 640px;
position: relative;
padding-top: 480px;
margin: 20px auto;
display: block;
text-align: center;
}
.slider > img {
position: absolute;
left: 0;
top: 0;
transition: all 0.5s;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.slider input {
display: none;
}
.slider label {
height: 60px;
margin: 20px 2px;
float: left;
border: 2px solid #999;
cursor: pointer;
transition: all 0.5s;
opacity: 0.6;
box-sizing: border-box;
}
.slider label img {
max-height: 60px;
display: block;
}
.slider input:checked + label {
border-color: #666;
opacity: 1;
}
.slider input ~ img {
opacity: 0;
transform: scale(1.1);
}
.slider input:checked + label + img {
opacity: 1;
transform: scale(1);
}
Here is a jsFiddle demo with the css above.

Place 3 box in a single row

I am fetching data images from database and wish to place maximum 3 images in a single row and these images also have hover effect on them which is working fine
problem that i am facing is that if i am using this code to display static images then it is working fine but if i fetch the data from database then it is not displaying properly. i want to display images in this form
1st_image 2nd_image 3rd_image
4th_image 5th_image 6th_image
7th_image .. and so on
but i am getting images in this form
1st_image
2nd_image
3rd_image
4th_image
5th_image
6th_image
The code that i have is
code of my front page is
<?php
$sql = "SELECT * FROM category";
$result = mysqli_query($con, $sql);
if (mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{
$catname=$row["catname"];
$catdesc=$row["catdesc"];
$catpic=$row["catpic"];
$id=$row["id"];
?>
<div id="effect-2" class="effects clearfix">
<div class="img">
<img src="<? echo $catpic; ?>" alt="">
<div class="overlay">
content
<a class="close-overlay hidden">x</a>
</div>
</div>
</div>
<?}
}?>
code on css page is
nav ul {
list-style-type: none;
margin: 0 0 30px 0;
padding: 0;
text-align: center;
}
nav ul li {
display: inline-block;
margin-bottom: 4px;
}
nav ul li a {
display: block;
padding: 5px 20px;
color: #fff;
background-color: #32c896;
}
nav ul li a:hover {
color: #fff;
background-color: #238b68;
}
nav ul li a.active {
color: #fff;
background-color: #238b68;
}
.effects {
padding-left: 15px;
}
.effects .img {
position: relative;
float: left;
margin-bottom: 5px;
width: 25%;
overflow: hidden;
}
.effects .img:nth-child(n) {
margin-right: 5px;
}
.effects .img:first-child {
margin-left: -15px;
}
.effects .img:last-child {
margin-right: 0;
}
.effects .img img {
display: block;
margin: 0;
padding: 0;
max-width: 100%;
height: auto;
}
.overlay {
display: block;
position: absolute;
z-index: 20;
background: rgba(0, 0, 0, 0.8);
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
a.close-overlay {
display: block;
position: absolute;
top: 0;
right: 0;
z-index: 100;
width: 45px;
height: 45px;
font-size: 20px;
font-weight: 700;
color: #fff;
line-height: 45px;
text-align: center;
background-color: #000;
cursor: pointer;
}
a.close-overlay.hidden {
display: none;
}
a.expand {
display: block;
position: absolute;
z-index: 100;
width: 60px;
height: 60px;
border: solid 5px #fff;
text-align: center;
color: #fff;
line-height: 50px;
font-weight: 700;
font-size: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
}
#effect-2 .overlay {
top: 0;
left: 0;
right: 0;
width: 100%;
height: 0;
}
#effect-2 .overlay a.expand {
left: 0;
right: 0;
top: 50%;
margin: -30px auto 0 auto;
}
#effect-2 .img.hover .overlay {
height: 100%;
}
can anyone tell me how to do so
You should use unique ids in your html. I recommend to always use classes instead of id. You can do something like this in your CSS
div[id^="tocolor-"] {
/* some css rules */
}
div[id^="tocolor-"] .overlay {
/* some css rules */
}
And in your html you can add an id using database table id like this
<div id="effect-<?php echo $id; ?>" class="effects clearfix">
Why not use bootstrap and use col-xs-4 class...which will make sure you always have 3 columns
<div id="effect-2" class="col-xs-4">
<div class="img">
<img src="<? echo $catpic; ?>" alt="">
<div class="overlay"> content
<a class="close-overlay hidden">x</a>
</div>
</div>
</div>

PHP: file_put_content echoing out warning

Warning Code:
Warning: file_put_contents(#C_H1_container { position:relative; min-height: 200px;} h1 { position: absolute; top: 0; left: 30px; font-size: 4em; color: #000000; } h2 { position: absolute; top: 50px; left: 212px; font-size: 4em; color: #000000; z-index: 100; } #logo {position: absolute; top: 50px; left: 10px; z-index: 99; max-height: 195px;} #topright_link { position: absolute; top: 0; right: 20px; background: #423231; } #topright_link ul { font-size: .95em; line-height: .95em; margin: 0; padding: 0; list-style: none; } #topright_link ul li { display: block; position: relative; float: left; } #topright_link ul li a { display: block; text-decoration: none; color: #fff; padding: 11px 25px; white-space: nowrap; text-align: center; text-decoration: none; font-weight: bold; min-width: 100px; } #topright_link ul li a:hover { background: #1e7c9a; color: #fff; } #topright_link li:hover a { background: #CCC; color: #000; } #navigation { position: absolute; top: 140px; left: 0; right: 0; width: 100%; height: 45px; backgr in /home/kylej/public_html/style.php on line 13
The Code
$stylesheet_original = file_get_contents('www.domain.com/stylesheet.css');
$stylesheet_new = $_POST['stylesheet'];
if (isset($_POST['stylesheet'])) {
file_put_contents($stylesheet_original, $stylesheet_new);
}
echo '
<form action="style.php" method="POST">
<textarea name="stylesheet" style="width: 700px; height: 300px;">'. $stylesheet_original .'</textarea>
<input type="submit">
</form>
';
I have never really used file_put_contents before, and I can't find anything by googling my issue. I'm just testing out being able to edit content in a textarea from a file and saving back to file. If there is a better way, please share.
Thanks in advance!
Change This:
if (isset($_POST['stylesheet'])) {
file_put_contents($stylesheet_original, $stylesheet_new);
}
To this:
if (isset($_POST['stylesheet'])) {
file_put_contents( $_SERVER['DOCUMENT_ROOT'].'/stylesheet.css', $stylesheet_new);
}
file_put_contents accepts a file name as the first parameter. You had a variable which contains the contents of the file we are replacing.

Categories