How to find a string before an other string in php - php

I am trying to find and change a string found before an other string.
<div class="item" ....>
<img scr="rambo" />
This code repeats for every movie. I have to set the item class for any chosen movie to
<div class="item active" ....>
<img scr="rambo" />
So I am looking for the first class before any given movietitle and then set it to active.
(In the code, where i placed the dots, there is a lot of code that keeps changing (like coordinates) so I can't count backwards to that position.)
Can someone help me with this? Thnx.
This is the actual code for 2 movies wich is created by a javascript coverflow script:
<div class="item " href="cover.php?film=Terminator 2" style="display: block; left: 452.383126009628px; top: 176.25px; height: 264.375px; width: 117.666903409091px; font-size: 50%; z-index: 32765; visibility: visible;">
<canvas class="content portray" src="films/Terminator 2/cover.jpg" origproportion="0.6676136363636364" width="235" height="528"></canvas>
<div class="caption">Terminator 2 Judgment Day
<div class="cover_beschrijving">
<div class="cover_left">
<ul>
<li><h1>jaar:</h1>1991</li>
<li><h1>genre:</h1>Actie</li>
<li><h1>speelduur:</h1>137 minuten</li>
</ul>
</div>
<div class="clearer"></div>
<div class="cover_right">--Movie discription--</div>
</div>
</div>
</div>
<div class="item active" href="cover.php?film=The Fast and the Furious" style="display: block; left: 727.832386363636px; top: 0px; height: 528.75px; width: 236.335227272727px; font-size: 100%; z-index: 32768; visibility: visible;">
<canvas class="content portray" src="films/The Fast and the Furious/cover.jpg" origproportion="0.6704545454545454" width="236" height="528"></canvas>
<div class="caption">The Fast and the Furious
<div class="cover_beschrijving">
<div class="cover_left">
<ul>
<li><h1>jaar:</h1>2001</li>
<li><h1>genre:</h1>Actie</li>
<li><h1>speelduur:</h1>107 minuten</li>
</ul>
</div>
<div class="clearer"></div>
<div class="cover_right">---Movie discription---</div>
</div>
</div>
</div>

You can use preg_replace to find the strings and replace them. This regex <div\sclass=\"item\".*> will match <div class="item" ....> If you want to include the img tag in the match, you have to modify the regex accordingly, but I don't see why you care for that, if it was me I would stop at <div class="item"
Then it's just a matter of providing the replacement string.

Related

How can i set a height to div according to step by step div

When i am listing products i want them to have fixed height according to its step by step div's max height. For example below there is a screenshot from amazon that has what i want. All 4 elements' height are same.
and i'm using the code below to list products
<div class="shop-product-wrap">
<div class="row row-8">
<?php foreach ($products as $product): ?>
<div class="product-col col-lg-3 col-md-4 col-sm-6">
<!-- Single Product Start -->
<div class="single-product-wrap mt-10">
<div class="product-image">
<a href="<?= $product['url'] ?>"><img class="lazy"
src="<?= public_url('images/other/thumbnail.jpg') ?>"
data-src="<?= image_url($product['image_small']) ?>"
alt=""></a>
</div>
<div class="product-button">
<a onclick="wishlist.add(<?= $product['product_id'] ?>)"
class="add-to-wishlist">
<i class="icon-heart"></i></a>
</div>
<div class="product-content">
<h6 class="product-name"><?= $product['product_name'] ?>
</h6>
<div class="starts-icon-box">
<i class="stars-icon"></i>
</div>
<div class="price-box">
<div class="single-product-discount-and-price">
<?php if ($product['product_discount_price']): ?>
<span class="onsale"><?= (100 - (round(($product['product_price'] * 100) / $product['product_discount_price']))) . '%' ?></span>
<?php endif; ?>
<div class="old-and-new-price">
<span class="old-price"><?= $product['product_discount_price'] ?> TL</span>
<span class="new-price"><?= number_format($product['product_price'], 2) ?> TL</span>
</div>
</div>
</div>
<div class="product-button-action">
<a onclick="cart.add(<?= $product['product_id'] ?>,1)"
class="add-to-cart">Add to cart</a>
</div>
</div>
</div>
<!-- Single Product End -->
</div>
<?php endforeach; ?>
</div>
</div>
and when i listing products they all take the height they can according to their content such as its name and so that they don't have the same height. How can i make them have same height step-by-step.
Sorry for my bad english.
You have to use div tag with same class name for every product item and add a parent div like this...
<div class="parent">
<div class="child">Item 1</div>
<div class="child">Item 2</div>
<div class="child">Item 3</div>
<div class="child">Item 4</div>
</div>
Then use flex box for parent and child element...
.parent{
display: flex;
flex-wrap: wrap;
align-content: stretch;
height: 600px; /*or something*/
}
.child{
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
Please visit those links for more information about flex box...
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-content_stretch

How do I align different size images

I'm trying to write a page with different size images but can't figure out how to align them properly.
This is how the web-page looks:
https://i.imgur.com/Li17CMl.jpg
I have added bootstrap img-fluid for responsiveness. If i set fixed height images wont scale down properly on smaller screens.
I cleaned some non related data with '...' just to make code look cleaner.
My current code:
foreach(row...) : ?>
<div class="col-md-6" style="padding...">
<div class="card">
<div class="card-body" style="padding...">
<a href="">
<div>
<img class="img-fluid" style="width: 100%;" src="row->image..." alt="">
</div>
<div>
<h5> title </h1>
<h6> date </h6>
</div>
</a>
</div> <!-- /card body -->
</div> <!-- /card -->
</div> <!-- /col-6 -->
<?php endforeach; ?>
I'm hoping that images will scale down on smaller screens.
TL:DR object-fit: cover; will do the trick.
Solution 1 - FIXED HEIGHT
with this solution you have to set value for the height of the images: the photos won't stretch but the ratio will be different for each screen
.img-fluid {
height: 200px; /* insert here your desired height*/
object-fit:cover;
}
Solution 2 - REAL FLUID
this solution is a little trickier but the photos will have always the ratio you will choose.
.card-body a div:first-child {
position: relative;
width: 100%;
height: 0;
padding-top: 60%; /*insert value for the desired ratio. ie: 60% -> 10/6 image*/
}
.img-fluid {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Please use below code:
.img-card img{width:100%;height:300px;object-fit:cover;}
.img-card{margin-bottom:15px;margin-top:15px;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-6">
<div class="img-card">
<img src="https://i.ytimg.com/vi/VDNd4KjELkU/maxresdefault.jpg" />
</div>
</div>
<div class="col-6">
<div class="img-card">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0f/5e/fc/f5/inkaya-cinari.jpg" />
</div>
</div>
<div class="col-6">
<div class="img-card">
<img src="https://thumbs.dreamstime.com/z/scenery-5680647.jpg" />
</div>
</div>
<div class="col-6">
<div class="img-card">
<img src="https://cdn.pixabay.com/photo/2015/11/11/03/47/evening-1038148__340.jpg" />
</div>
</div>
</div>
</div>

PHP conditions and loops are breaking html formatting

I'm trying to convert my html template into a php script that simply takes returned database values and uses comparisons on certain values to place the correct content in the placeholders.
The data is being returned properly and is showing on the page but my html formatting is breaking.
This should output a very simple format of a container row, 2 half-width columns each of which with its own internal div like this:
<div class="row middle">
<div class="col-lg-6 leftFifty">
<div class="leftContent" style="background-color: white; height: 100%; ">
Content
</div>
</div>
<div class="col-lg-6 rightFifty">
<div class="rightContent" style="background-color: white; height: 100%; ">
Content
</div>
</div>
</div>
But when I add in the PHP conditions it breaks the format completely including anything included after this section
<div class="row middle">
<?php foreach($panelResult as $PR): ?>
<div class="col-lg-6 leftFifty">
<?php if($PR['panel_type_id'] == 2){ ?>
<div class="leftContent" style="background-color: white; height: 100%; ">
<?php echo $PR['content']?>
</div>
</div>
<div class="col-lg-6 rightFifty">
<?php } elseif($PR['panel_type_id'] == 3){?>
<div class="rightContent" style="background-color: white; height: 100%; ">
<?php echo $PR['content'] ?>
</div>
<?php } ?>
</div>
<?php endforeach; ?>
</div>
<!--This div is not showing-->
<div class="row bottom">
<div class="col-lg-12">
<div class="marquee"><h2>This is a test</h2></div>
</div>
</div>
For this page type, row-middle should exist, and both the leftFifty/leftContent class as well as the rightFifty and rightContent class should all exist.
The only reason I'm using the If statement is to make sure that the panel_type_id ==2 content fills the left div, and same for the right div if it equals 3.
How can I restructure this to retain the html formatting?

Can this inaccessible area be made link, only with CSS?

I have to manage a website witch have the following situation:
We have a banner system on the website, but the banners are clickable only on small area. I want to make them all clickable, but there are some limitations.
I don`t have access to php files and I can manage HTML after certain level.
Currently I can manage only small area which is marked on the image.
Example of the area
Every code that I write is placed only in this marked area. There is no way to make whole banner clickable, because there is no that kind of option on GUI.
I think that I can target with CSS classes that are above that area, but can`t edit the HTML.
Is there an option to make all this area clickable without messing everything up?
Here is the full HTML code of one banner:
<li class="flex-active-slide" style="width: 1583px; float: left; display: block;">
<div class="image-flexslider-content-left clearfix">
<div class="views-field views-field-field-slider-image">
<div class="field-content"><img typeof="foaf:Image" src="/example-image.png" alt="" draggable="false" style="margin-left: -84.25px; height: 510px;"></div>
</div>
</div>
<div class="white">
<div class="logo-big mobile-logo">
<h1 class="logo">
</h1>
</div>
</div>
<div class="wrapper-container white">
<div class="logo-big">
<h1 class="logo">
</h1>
</div>
<div class="slide-cover flexslider-content-left">
<div class="views-field views-field-title"> <span class="field-content"></span> </div>
<div class="views-field views-field-body">
<div class="field-content">
<a href="/something/more/">
<div class="double-container">
<p class="double-blue-head larger-head" style="font-size: 2.4rem !important; font-weight: bold;">Line of text 1</p>
</div>
<div class="double-container">
<p class="double-blue-head larger-head" style="font-size: 2.4rem !important; font-weight: bold;">Line of text 2</p>
</div>
</a>
<div class="double-container blue-responsive double-blue-head larger-head myt-margin" style="padding: 10px 12px 15px 20px; margin-top: 40px;">
<img src="/images/example.png" style="width:100% !Important; max-width:435px !Important; margin-top: 10px; height:auto !important;" draggable="false">
</div>
</div>
</div>
<div class="views-field views-field-contextual-links"> <span class="field-content"></span> </div>
</div>
</div>
</li>
You could move the tag outside of the entire div class="field-content"
<a href="/something/more/">
<div class="field-content">
<div class="double-container">
<p class="double-blue-head larger-head" style="font-size: 2.4rem !important; font-weight: bold;">Line of text 1</p>
</div>
<div class="double-container">
<p class="double-blue-head larger-head" style="font-size: 2.4rem !important; font-weight: bold;">Line of text 2</p>
</div>
<div class="double-container blue-responsive double-blue-head larger-head myt-margin" style="padding: 10px 12px 15px 20px; margin-top: 40px;">
<img src="/images/example.png" style="width:100% !Important; max-width:435px !Important; margin-top: 10px; height:auto !important;" draggable="false">
</div>
</div>
</a>
With JavaScript, you can add an event handler to make any element on the page clickable. So for example, if you want to make one of the <div class="field-content"> elements clickable, you would add an event handler like this (assuming you want to make the first one clickable for this example):
document.querySelectorAll("div.field-content")[0].addEventListener('click', function() {
// your code here; whatever you want to happen when they click
});
You can apply event handlers to any of the HTML elements on your page. If you apply it to a parent element, then it will also be triggered when a child element is clicked, so you can make your whole banner clickable just by adding an event handler to the banner's outer element.
UPDATE: To apply the click handler to an entire class, use a for loop, like this:
var banners = document.getElementsByClassName("field-content");
for (var i = 0; i < banners.length; i++) {
banners[i].addEventListener('click', function() {
location.href = "yourURL";
});
}

Absolute PNG image won't link

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;
CSS IN SLIDE CONTENT:
.in-slide-content {
color:#333;
float:right;
font-family:'Helvetica Neue', helvetica;
font-size:60px;
font-weight:bold;
right:20px;
margin:40px;
padding:20px;
position:absolute;
top:20px;
width:700px;
z-index:9999; /* Show above .gradient */
text-shadow: 0 1px 0 #fff;
-webkit-font-smoothing:antialiased;
}
I did some R&D got some thing. May be this help you
There is a id eBanner change inline styling to
position: absolute;
right: 269px;
top: 141px;
z-index: 9999;
height: 100px;
width: 185px;
border: 2px solid red;
Inside this div there is and anchor tag add folloing style
display: block;
width: 181px;
height: 100px;
Once you check it works then you can remove red border

Categories