So I am working to make a change on this site. http://www.kbduct.com . One the site there is a png file of a transparent united states logo on the front. I had to add a small awfs logo banner to it and have the viewer be able to click on it so that it can lead to a different site. I added the anchor tags to these items but nothing happens wen you click on it. Heres the index file and the external file for the image.
BTW, I didn't build this site. Im helping to maintain it for the time being.
INDEX:
<?php include('inc/default.php');
$pageTitle = "The Nations Source For Industrial Ducting, Ducts and Ductwork Components - KB Duct";
$pageDisc = "KB Duct is the Nation's source for industrial duct, ducting components and ductwork fittings and supplies. We offer custom built solutions for your industrial needs.";
$pageKeys = "duct, ductwork, ducting, duct work, commercial ducting, industrial ducting, custom ductwork, ductwork supplies, ducting accessories, duct fittings";
?>
<!doctype html>
<html>
<?php include('inc/head.php'); ?>
<body>
<div id="sb-site">
<?php include('inc/maximage.php'); ?>
<?php include('inc/header.php'); ?>
<div class="mainarea">
<a href="http://awfsfair.org/">
<div id="eBanner" style=" position: absolute; right: 380px; top: 310px;">
<?php /*?> <script type='text/javascript' src='http://libs.a2zinc.net/Common/JS/10.6.0.0/a2zWidget.js'></script><script type='text/javascript' id='exWidget'>new a2z.Widget('dGbJ%2fQfPqUA4s%2fDNrIc%2fzt5xiq%2fL4ZoFjVXmdUEcJutOcD9ggxZSCZyU8MZ6cQu6',40297,'http://libs.a2zinc.net/Common/Widgets/ExhibitorBadge.aspx',31,201133,330,200).render();</script>
<?php */?>
</a>
</div>
<div class="wrapper">
<?php include('inc/industry.php'); ?>
<?php include('inc/catatypes.php'); ?>
<div id="mob-only">
<?php include('inc/mobslideup.php'); ?>
</div>
</div>
</div>
<?php include('inc/footer.php'); ?>
</div>
<?php include('inc/mob-menu.php'); ?>
</body>
</html>
MAXIMAGE.PHP:
<div id="maximage">
<div>
<img src="img/Custom-Ductwork-Clamp-Together-Ducting-Shiny-Ducts-BG.jpg" alt="KB Duct is the nation's source for clamp together and flanged industrial ducting and duct parts." />
<div class="in-slide-content" style="display:none;">
<img src="img/nations-source-for-industrial-ducting.png" alt="KB Duct offers custom fabricated industrial ducting solutions.">
</div>
</div>
<div>
<img src="img/shinyduct.jpg" alt="" />
<div class="in-slide-content" style="display:none;">
<img src="img/awfs-nations-source.png">
</div>
</div>
<!-- <div>
<img src="img/kbduct-production.jpg" alt="" />
<div class="in-slide-content" style="display:none;">
<img src="img/nations-source-for-industrial-ducting.png">
</div>
</div>-->
<div>
<img src="img/plasma.jpg" alt="" />
<div class="in-slide-content" style="display:none;">
<img src="img/awfs-nations-source.png">
</div>
</div>
<div>
<img src="img/welding.jpg" alt="" />
<div class="in-slide-content" style="display:none;">
<img src="img/awfs-nations-source.png">
</div>
</div>
<!-- <div>
<img src="img/clamp.jpg" alt="" />
<div class="in-slide-content" style="display:none;">
<img src="img/nations-source-for-industrial-ducting.png">
</div>
</div>-->
<div>
<img src="img/tunnel.jpg" alt="" />
<div class="in-slide-content" style="display:none;">
<img src="img/awfs-nations-source.png">
</div>
</div>
MAXIMAGE CSS ID:
#maximage {
display:block;/* Only use this if you fade it in again after the images load */
position:fixed !important;
z-index:-1;
Related
i have a website in which i used carousel sliders to display images and its values, I have 3 carousel in my homepage, 3 of them have same code, however the first carousel is not displaying name and price like the 2nd and 3rd carousel:
as you can see in the image
the code for this carousel is below:
<section class="carousel_sec">
<div class="container">
<div class="row ">
<h3 class="carousel_heading">Trending Birthday Cakes <button class="pull-right"><span>VIEW ALL</span><!-- <span class="visible-xs">>></span> --></button></h3>
<hr>
<div class="carou">
<div class="demo">
<ul id="landing_products1">
<?php foreach($trending_products1 as $key=>$val) { ?>
<li>
<div class="item">
<div class="pad15 content_div">
<div class="carou_thumb">
<img class="st_img" src="<?php echo ADMIN_IMG.'cakes/'.$val['image'][0]['cake_image'];?>" alt="<?php echo $val['cake_name']; ?>" />
<img class="nd_img" src="<?php echo ADMIN_IMG.'cakes/'.$val['image'][0]['cake_image'];?>" alt="<?php echo $val['cake_name']; ?>" />
<p>
<?php echo $val['cake_name']; ?>
</p>
<?php
$btp_price=0;$offer_price=0;
$btp_price=$val['price'][0]['btp_price'];
$offer_price=$val['price'][0]['offer_price'];
?>
<div class="price text-center" style="width:100%;float:left;">
<span class="amount" style="color:#f2136e;font-size:14px;">
<?php echo PRICE_UNIT;?><?php echo $offer_price;?>
</span> (
<s> <?php echo $btp_price;?></s>)
<span> </span>
<br>
</div>
<!--<br><span><?php echo PRICE_UNIT;100; ?></span></p>-->
</div>
</div>
</div>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>
</div>
</section>
<?php } ?>
while inspecting in browser the value is showing, the live URL is enter link description here
can anyone please tell me what could be wrong here, thanks in advance
You'll need to tweak the css to reveal the content that is hidden.
To push you in the direction, see the improvement with:
#landing_products1 {
height: 330px;
margin-top: -65px;
}
I don't know how responsive you need to be with your UI, so let's call this a temporary fix. The first carousel's dimensions don't perfectly match the others, so I'll leave the fine tuning to you.
It also appears that you have some js and css issues to mop up.
i have 3 image field like this
<?php echo $row['thumbnail1']; ?>
<?php echo $row['thumbnail2']; ?>
<?php echo $row['thumbnail3']; ?>
if there only one exp thumbnail1 is have image..
how to show
and how if only image 1 and 2 have data..
please help how to show php query if there only 1 or 2 and 3 image upload
this css style
<div class="col-xs-12">
<img src="#" class="w-full">
</div>
<!-- IF only 2 image available uploaded USE this -->
<div class="col-xs-4">
<img src="#" class="w-full">
</div>
<div class="col-xs-4">
<img src="#" class="w-full">
</div>
<!-- IF only ALL/3 image available uploaded USE this -->
<div class="col-xs-4">
<img src="#" class="w-full">
</div>
<div class="col-xs-4">
<img src="#" class="w-full">
</div>
<div class="col-xs-4">
<img src="#" class="w-full">
</div>
</div>
dsa sdas
Replace your old code with this (Someone edited So i have Re writtent the code again) :
<?php
if(isset($row['thumbnail1']))
{
?>
<div class="col-xs-12">
<img src="#" class="w-full">
</div>
<?php } ?>
<!-- IF only 2 image available uploaded USE this -->
<?php
if(isset($row['thumbnail2']))
{
?>
<div class="col-xs-4">
<img src="#" class="w-full">
</div>
<div class="col-xs-4">
<img src="#" class="w-full">
</div>
<?php } ?>
<!-- IF only ALL/3 image available uploaded USE this -->
<?php
if(isset($row['thumbnail3']))
{
?>
<div class="col-xs-4">
<img src="#" class="w-full">
</div>
<div class="col-xs-4">
<img src="#" class="w-full">
</div>
<div class="col-xs-4">
<img src="#" class="w-full">
</div>
<?php } ?>
Give me the update, if you have tested.
I'm newbie and trying to make a E-commerce website using Xampp. I'm unable to get the items in content area in a ordered way (see images). What I want but I am getting .
The code for content area in index.php is:
<!--content area in pink color-->
<div id="content_area">
<div id="products_box">
<?php getPro(); ?>
</div>
</div>
getPro() function in functions.php is:
$con = mysqli_connect("localhost","root","","ecommerce");
//get the products
function getPro () {
global $con;
$get_pro = "select * from products order by RAND() LIMIT 0,6";
$run_pro = mysqli_query($con, $get_pro);
while($row_pro=mysqli_fetch_array($run_pro)){
$pro_id = $row_pro['product_id'];
$pro_cat = $row_pro['product_cat'];
$pro_brand = $row_pro['product_brand'];
$pro_title = $row_pro['product_title'];
$pro_price = $row_pro['product_price'];
$pro_image = $row_pro['product_image'];
echo "
<div id='single_product'>
<h3>$pro_title</h3>
<img src='admin_area/product_images/$pro_image' width='180' height='180' />
<p><b>₹ $pro_price</b></p>
</div>
";
}
}
CSS code in style.css is:
#products_box {
width:780px;
text-align:center;
margin-left:30px;
margin-bottom:10px;
}
#single_product{
float:left;
margin-left:20px;
padding:10px;
}
generated HTML is:
<!DOCTYPE>
<html>
<head>
<title>My online shop</title>
<link rel="stylesheet" href="styles/style.css" media="all" />
</head>
<body>
<!--Main Container starts here-->
<div class="main_wrapper">
<!--header starts here-->
<div class="header_wrapper">
<img id="logo" src="images/logo.gif" />
<img id="banner" src="images/ad_banner.gif" />
</div>
<!--header ends here-->
<!--Navigation bar starts here-->
<div class="menubar">
<ul id="menu">
<li>Home</li>
<li>All Products</li>
<li>My Account</li>
<li>Sign Up</li>
<li>Shopping Cart</li>
<li>Contact Us</li>
</ul>
<div id="form">
<form method="get" action="results.php" enctype="multipart/form-data">
<input type="text" name="user_query" placeholder="search a product" />
<input type="submit" name="search" value="search" />
</form>
</div>
</div>
<!--Navigation bar ends here-->
<!--Content wrapper starts here-->
<div class="content_wrapper">
<div id="sidebar">
<!--categories-->
<div id="sidebar_title">Categories</div>
<ul id="cats">
<li><a href='#'>Laptops</a></li><li><a href='#'>Cameras</a></li><li><a href='#'>Mobiles</a></li><li><a href='#'>Tablets</a></li><li><a href='#'>media players</a></li><li><a href='#'>Ebook readers</a></li><li><a href='#'>Graphic tablets</a></li>
</ul>
<!--Brands-->
<div id="sidebar_title">Brands</div>
<ul id="cats">
<li><a href='#'>HP</a></li><li><a href='#'>DELL</a></li><li><a href='#'>LG</a></li><li><a href='#'>Samsung</a></li><li><a href='#'>Apple</a></li><li><a href='#'>Motorola</a></li><li><a href='#'>Xiamoi</a></li><li><a href='#'>Huawei</a></li><li><a href='#'>Blackberry</a></li><li><a href='#'>HTC</a></li> </ul>
</div>
<!--content area in pink color-->
<div id="content_area">
<div id="products_box">
<div class='single_product'>
<h3>Moto G5 Plus (Lunar Grey, 32 GB)</h3>
<img src='admin_area/product_images/motorola-moto-g5-plus-1.jpg' width='180' height='180' />
<p><b>₹ 15999</b></p>
</div>
<div class='single_product'>
<h3>xiamoi redmi note 3</h3>
<img src='admin_area/product_images/Redmi-Note3-32GB-SDL881680011-2-1b99d.jpg' width='180' height='180' />
<p><b>₹ 9999</b></p>
</div>
<div class='single_product'>
<h3>Dell Vostro 15 3558 15.6-inch Laptop</h3>
<img src='admin_area/product_images/Dell Vostro 15 3558 15.6-inch Laptop.jpg' width='180' height='180' />
<p><b>₹ 28000</b></p>
</div>
<div class='single_product'>
<h3>Iphone 6 (32 GB)</h3>
<img src='admin_area/product_images/SP705-iphone_6-mul.png' width='180' height='180' />
<p><b>₹ 30000</b></p>
</div>
</div>
</div>
</div>
<!--Content wrapper ends here-->
<div id="footer">
<h2 style="text-align:center; padding-top:30px;">© 2017 by Technohub
</div>
</div>
<!--Main Container ends here-->
</body>
</html>
Please explain in detail as I'm a newbie
you are using the same ID multiple times,
IDs must be unique,
So use a class instead
instead of <div id='single_product'> use something like <div class='single_product'>
then in CSS
.single_product{
float:left;
margin-left:20px;
padding:10px;
}
Answer after question edited
Here is your code improved using flexbox
#products_box {
display: flex;
flex-wrap: wrap;
max-width: 780px;
justify-content: center;
text-align:center;
/*demo*/
background: pink
}
.single_product {
padding: 10px;
}
<!--content area in pink color-->
<div id="content_area">
<div id="products_box">
<div class='single_product'>
<h3>Moto G5 Pluspl (Lunar Grey, 32 GB)</h3>
<img src='//placehold.it/180' />
<p><strong>₹ 15999</strong></p>
</div>
<div class='single_product'>
<h3>xiamoi redmi note 3</h3>
<img src='//placehold.it/180' />
<p><strong>₹ 9999</strong></p>
</div>
<div class='single_product'>
<h3>Dell Vostro 15 3558 15.6-inch Laptop</h3>
<img src='//placehold.it/180' />
<p><strong>₹ 28000</strong></p>
</div>
<div class='single_product'>
<h3>Iphone 6 (32 GB)</h3>
<img src='//placehold.it/180' />
<p><strong>₹ 30000</strong></p>
</div>
</div>
</div>
For future reference:
As #dippas stated, IDs must be unique.
Now you just need to clear cache and cookies and it will work.
I am new to php and I want to only show specific footer content on 2 pages.
I know I would use an if statement, but I don't know if there is way in php to know what page is being displayed.
Here is the footer.php
<?php
/**
* The template for displaying the footer.
*
* Contains the closing of the id=main div and all content after
*
* #package WordPress
* #subpackage Twenty_Eleven
* #since Twenty Eleven 1.0
*/
?>
</div><!-- #main -->
<footer id="colophon" role="contentinfo">
<?php
/* A sidebar in the footer? Yep. You can can customize
* your footer with three columns of widgets.
*/
get_sidebar( 'footer' );
?>
<div class="boli-better">
<h1 class="description-title">WHY IS BOLI BETTER?</h1>
<div class="feature feature-item-248"><img class="main" src="http://www.btylus.com/wp-content/uploads/uclaproduct.png" alt="" />
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">PERFECTLY WEIGHTED</h2>
</div>
<div class="feature_description_content">
Touch screens have simplified technology, but there has yet to be a way to capture the precision of a calligrapher or the stroke of an artist. Not only should it meet your needs, but a stylus should have style.
</div>
</div>
</div>
<div class="feature feature-item-252"><img class="main" src="http://www.bylus.com/wp-content/uploads/bolitip.png" alt="" width="640" height="301" />
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">PEN-LIKE PRECISION</h2>
</div>
<div class="feature_description_content">
Your stylus should be as sharp as your ideas. The thin and clear disc gives you the accuracy you want in a digital pen.
</div>
</div>
</div>
<div class="feature feature-item-254">
<img class="main" src="http://www.bylus.com/wp-content/uploads/blueproduct.png" alt="" />
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">BALL POINT</h2>
</div>
<div class="feature_description_content">
Hold your stylus at the angle you’re most comfortable with. Jot gives you the freedom to write or sketch like you’re used to.
</div>
</div>
</div>
<div class="feature feature-item-256">
<img class="main" src="http://www.btylus.com/wp-content/uploads/greenproduct.png" alt="" />
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">HEAVY METAL</h2>
</div>
<div class="feature_description_content">
Once Jot is in your grip, the quality is unmistakable. The durable aluminum and steel gives Jot superior conductivity and craftsmanship comparable to any luxury pen.
</div>
</div>
</div>
</div>
<div id="site-generator">
<strong id="footertext">Copyright Boli Stylus 2011</strong>
Contact Us
Terms
</div>
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>
Ok, so this is what I came up with, but when I add this code to the footer.php, the entire footer doesn't appear on the site.
I'm sure I just made an elementary mistake so thanks for the help in advance!
<?php
$page = 'shop';
if (is_page($page)) { ?>
<div class="boli-better">
<h1 class="description-title">WHY IS BOLI BETTER?</h1>
<div class="feature feature-item-248"><img class="main" src="http://www.bylus.com/wp-content/uploads/uclaproduct.png" alt="" />
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">PERFECTLY WEIGHTED</h2>
</div>
<div class="feature_description_content">
Touch screens have simplified technology, but there has yet to be a way to capture the precision of a calligrapher or the stroke of an artist. Not only should it meet your needs, but a stylus should have style.
</div>
</div>
</div>
<div class="feature feature-item-252"><img class="main" src="http://www.bylus.com/wp-content/uploads/bolitip.png" alt="" width="640" height="301" />
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">PEN-LIKE PRECISION</h2>
</div>
<div class="feature_description_content">
Your stylus should be as sharp as your ideas. The thin and clear disc gives you the accuracy you want in a digital pen.
</div>
</div>
</div>
<div class="feature feature-item-254">
<img class="main" src="http://www.btylus.com/wp-content/uploads/blueproduct.png" alt="" />
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">BALL POINT</h2>
</div>
<div class="feature_description_content">
Hold your stylus at the angle you’re most comfortable with. Jot gives you the freedom to write or sketch like you’re used to.
</div>
</div>
</div>
<div class="feature feature-item-256">
<img class="main" src="http://www.bylus.com/wp-content/uploads/greenproduct.png" alt="" />
<div class="feature_description">
<div class="feature_description_header">
<h2 class="descript-heading">HEAVY METAL</h2>
</div>
<div class="feature_description_content">
Once Jot is in your grip, the quality is unmistakable. The durable aluminum and steel gives Jot superior conductivity and craftsmanship comparable to any luxury pen.
</div>
</div>
</div>
</div>;
<?php
}
?>
Have a look at PHP's server variables. You are probably looking for $_SERVER['REQUEST_URI'].
if ($_SERVER['REQUEST_URI'] == "/index.php") {
echo "My stuff to show on /index.php";
}
Check out the WP Codex. I thing is_page() is what you are looking for: http://codex.wordpress.org/Function_Reference/is_page
You can either set a special variable on pages where you would like to check it (and use it in an if statement for the footer), or use the answer by #Christofer Eliasson, which uses the server's REQUEST_URI variable
what you want is:
<?php
if (is_page(array('page1','page2'))) {
<!-- Fotter content displayed here -->
}
?>
Hi I am doing a screen scrape on a weather website that has inline styles in it's div and has no class or id here is their code:
<div class="TodaysForecastContainer">
<div class="TodaysForecastContainerInner">
<div style="font-size:12px;"><u>This morning</u></div>
<div style="position:absolute;top:17px;left:3px;">
<a href="forecastPublicExtended.asp#Period0" target="_blank">
<img src="./images/wimages/b_cloudy.gif" height="50px" width="50px" alt="weather image">
</a> </div>
<div style="position:absolute; top:25px; left:57px; text-align:left; height:47px; width:90px;">
Sunny Breaks </div>
</div>
<div class="TodaysForecastContainerInner">
<div style="font-size:12px;"><u>This afternoon</u></div>
<div style="position:absolute;top:17px;left:3px;">
<a href="forecastPublicExtended.asp#Period0" target="_blank">
<img src="./images/wimages/b_pcloudy.gif" height="50px" width="50px" alt="weather image">
</a> </div>
<div style="position:absolute; top:25px; left:57px; text-align:left; height:47px; width:90px;">
Mix of Sun and Cloud </div>
</div>
The problem is the absolute position inline style and they have no class or id, I was hoping I could add a class name and remove inline style on div with "This morning", div containing the image and also remove the link and the div with discription(ex. Sunny Breaks)also changing all of the TodaysForecastContainerInner since it has about 4 forecast. making it similar to:
<div class="day>This morning</div><div class="thumbnail"><img src="sample.jpg"></div><div class="description">Sunny Breaks</div>
I was using :
foreach($html->find('.TodaysForecastContainerInner div') as $e)
echo $e->innertext . '<br>';
which removes all divs living me with u and img tag,
I just can't style the div with discription I use img and u tag to style the other two divs, I'm just a beginner at php I hope someone could give me advice thank you so much.
Check out the phpQuery library. It can do jQuery-like manipulation using PHP. This code essentially accomplishes what you are trying to do:
<?php
include 'phpQuery-onefile.php';
$text = <<<EOF
<div class="TodaysForecastContainer">
<div class="TodaysForecastContainerInner">
<div style="font-size:12px;"><u>This morning</u></div>
<div style="position:absolute;top:17px;left:3px;">
<a href="forecastPublicExtended.asp#Period0" target="_blank">
<img src="./images/wimages/b_cloudy.gif" height="50px" width="50px" alt="weather image">
</a>
</div>
<div style="position:absolute; top:25px; left:57px; text-align:left; height:47px; width:90px;">
Sunny Breaks
</div>
</div>
<div class="TodaysForecastContainerInner">
<div style="font-size:12px;"><u>This afternoon</u></div>
<div style="position:absolute;top:17px;left:3px;">
<a href="forecastPublicExtended.asp#Period0" target="_blank">
<img src="./images/wimages/b_pcloudy.gif" height="50px" width="50px" alt="weather image">
</a>
</div>
<div style="position:absolute; top:25px; left:57px; text-align:left; height:47px; width:90px;">
Mix of Sun and Cloud
</div>
</div>
EOF;
$doc = phpQuery::newDocumentHTML( $text );
$containers = pq('.TodaysForecastContainerInner', $doc);
foreach( $containers as $container ) {
$div = pq('div', $container);
$div->eq(0)->removeAttr('style')->addClass('day')->html( pq( 'u', $div->eq(0) )->html() );
$div->eq(1)->removeAttr('style')->addClass('thumbnail')->html( pq( 'img', $div->eq(1))->removeAttr('height')->removeAttr('width')->removeAttr('alt') );
$div->eq(2)->removeAttr('style')->addClass('description');
}
print $doc;
Result:
<div class="TodaysForecastContainer">
<div class="TodaysForecastContainerInner">
<div class="day">This morning</div>
<div class="thumbnail"><img src="./images/wimages/b_cloudy.gif"></div>
<div class="description">
Sunny Breaks
</div>
</div>
<div class="TodaysForecastContainerInner">
<div class="day">This afternoon</div>
<div class="thumbnail"><img src="./images/wimages/b_pcloudy.gif"></div>
<div class="description">
Mix of Sun and Cloud
</div>
</div>
It's easier to do it on the client than on the server.
This jQuery+Javascript will clear your inline styles and apply a class name to each:
$(document).ready(function() {
var target = $('.TodaysForecastContainerInner div')
for(var x=0;x< target.length;x++) {
target.eq(x).attr('style','');
target.eq(x).addClass("A_"+x)
}
})
Result:
<div class="TodaysForecastContainerInner">
<div style="" class="A_0"><u>This morning</u></div>
<div style="" class="A_1">
<a target="_blank" href="forecastPublicExtended.asp#Period0">
<img height="50px" width="50px" alt="weather image" src="./images/wimages/b_cloudy.gif">
</a> </div>
<div style="" class="A_2">
Sunny Breaks </div>
</div>
You can the use a stylesheet to make it look the way you want.