I want to fetch the text inside last div. I have tried something below as well
$html = $crawler1->filter('span[id="verisysForm:cnicStatusPanel"]')->text(); // returns empty
Here is the structure from where i want to get text.
<span id="verisysForm:cnicStatusPanel">
<span style="border: none;background-color: #FFFDFA;">
<div class="row">
<div class="col-md-12" style="padding-top: 30px">
<div style="text-align: left; border-radius: 10px;background-color: #E9F5DE;background-color: #d9edf7;padding-top:19px;">
<div style="text-align: left;padding-left: 10px;font-size: 18px;font-family: calibri; color: black;padding-bottom:10px;">
The Card: 123456789 and issue date: 1999/10/08 is currently INACTIVE. However, another card has been issued in lieu of this card.
</div>
</div>
</div>
</div>
</span>
</span>
Related
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?
the following php code is performing just as I expect, but the "col-md-4" divs are appearing underneath each other, rather than showing three in a row.
Can anybody help me with what I have done wrong?
<?php
$previousCat = null; // starts the category at NULL
while(!$DETAILS->atEnd()) {
// Check if GENUS if different. If yes then display GENUS and start row to contain all varieties
if($DETAILS->getColumnVal("GENUS") != $previousCat) {
echo '<div class="row">
<div class="col-md-6 g-my-10 g-bg-pale"><h2>'.$DETAILS->getColumnVal("GENUS").'</h2></div>
</div>
<div class="row">';
}
// now we output whatever is needed at the start of a new group - in this case,
// user name and date, since we want those only once
echo '
<div class="col-md-4" data-animate-inview="20" style="min-height: 345px; margin-top: 10px; margin-bottom: 15px">
<p><img src="17_photos/'.$DETAILS->getColumnVal("IMAGE").'" title="'.$DETAILS->getColumnVal("VARIETY").'" class="img-fluid" /></p>
<p><strong>'.$DETAILS->getColumnVal("VARIETY").'</strong>
<br />'.$DETAILS->getColumnVal("DESCRIPTION").'
<br />'.$DETAILS->getColumnVal("TYPE").'</p>
</div>
';
// if GENUS is different end the row that contains the varieties
if($DETAILS->getColumnVal("GENUS") != $previousCat) {
echo '</div>';
}
// save the GENUS for comparison with next GENUS
$previousCat = $DETAILS->getColumnVal("GENUS");
$DETAILS->moveNext();
}
$DETAILS->moveFirst(); //return RS to first record
?>
Output code is as follows - it looks like an extra div is being placed after the first col-md-4
<div class="row">
<div class="col-md-6 g-my-10 g-bg-pale"><h2>Asian Greens</h2></div>
</div>
<div class="row">
<div class="col-md-4" data-animate-inview="20" style="min-height: 345px; margin-top: 10px; margin-bottom: 15px">
<p><img src="17_photos/02897.07.Tatsoi.cat.jpg" title="Tatsoi" class="img-fluid" /></p>
<p><strong>Tatsoi</strong>
<br />dark spicy asian green
<br /></p>
</div>
</div><div class="row">
<div class="col-md-6 g-my-10 g-bg-pale"><h2>Beets</h2></div>
</div>
<div class="row">
<div class="col-md-4" data-animate-inview="20" style="min-height: 345px; margin-top: 10px; margin-bottom: 15px">
<p><img src="17_photos/nopic.jpg" title="Baby Beats" class="img-fluid" />
</p>
<p><strong>Baby Beats</strong>
<br />
<br /></p>
</div>
</div>
<div class="col-md-4" data-animate-inview="20" style="min-height: 345px; margin-top: 10px; margin-bottom: 15px">
<p><img src="17_photos/nopic.jpg" title="Blankoma" class="img-fluid" /></p>
<p><strong>Blankoma</strong>
<br />white, round
<br /></p>
</div>
The solution I came up with was take the class "row" out of the php, and working with col-md-12 and col-md-4 in the php coding, using an if else statement as follows...
<section class="container-fluid no-gutters">
<div class="row" id="list">
<?php
$previousCat = null; // starts the category at NULL
while(!$DETAILS->atEnd()) {
// Check if GENUS if different. If yes then display GENUS and start row to contain all varieties
if($DETAILS->getColumnVal("GENUS") != $previousCat) {
echo '<div class="col-md-12" style="clear:both">
<div class="w-50 g-my-10 g-bg-pale"><h2>'.$DETAILS->getColumnVal("GENUS").'</h2></div>
</div>
<div class="col-md-4" style="min-height: 345px; margin-top: 10px; margin-bottom: 15px">
<p><img src="17_photos/'.$DETAILS->getColumnVal("IMAGE").'" title="'.$DETAILS->getColumnVal("VARIETY").'" class="img-fluid " style="max-width:80%" /></p>
<p><strong>'.$DETAILS->getColumnVal("VARIETY").'</strong>
<br />'.$DETAILS->getColumnVal("DESCRIPTION").'
<br />'.$DETAILS->getColumnVal("TYPE").'</p>
</div>
';
}
// if GENUS is not different
else {
echo '
<div class="col-md-4" style="min-height: 345px; margin-top: 10px; margin-bottom: 15px">
<p><img src="17_photos/'.$DETAILS->getColumnVal("IMAGE").'" title="'.$DETAILS->getColumnVal("VARIETY").'" class="img-fluid " style="max-width:80%" /></p>
<p><strong>'.$DETAILS->getColumnVal("VARIETY").'</strong>
<br />'.$DETAILS->getColumnVal("DESCRIPTION").'
<br />'.$DETAILS->getColumnVal("TYPE").'</p>
</div>
';
}
// save the GENUS for comparison with next GENUS
$previousCat = $DETAILS->getColumnVal("GENUS");
$DETAILS->moveNext();
}
$DETAILS->moveFirst(); //return RS to first record
?>
</div>
</section>
Your problem seems to be that you are creating a new row with this condition:
if($DETAILS->getColumnVal("GENUS") != $previousCat)
You are then using that same condition to end your row. The first iteration of the loop creating the row will therefore always end the row after the first col-md-4 div because you are only changing the value of $previousCat afterwards. However, changing the value of $previousCat before will also likely give you problems with closing your row div as intended.
For a less elegant solution, a boolean variable that you check for in that last conditional statement and set in your first conditional would work. This would let you determine if a new row has been freshly created in that iteration and therefore should not be ended in that same iteration. This is usually indicative that there are some changes to logic to be made.
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";
});
}
I want to set the limit of the content coming from database dynamically in php. That is, I need to set the data to a paragraph, but I need to trim the input from the database before assigning it to the html paragraph. I tried using substr. But couldn't succeed. How to achieve this?
The code I have done so far is given below.
<?php
foreach($conn->query("SELECT * FROM product_page ORDER BY id ASC LIMIT 10") as $st) {
echo'
<div class="col-md-4" style=" margin-bottom:50px;">
<div class="grid_7">
<div class="element">
<div class="grid">
<figure class="effect-apollo">
<img src="admin/'.$st['product_image'].'" alt="" />
<figcaption>
<h2></h2>
<p></p>
</figcaption>
</figure>
</div>
<h4>'.$st['product_name'].'</h4>
<p style="text-align:justify; ">'.$st['product_content'].'</p>
</div><!--end element-->
<div style="margin-left:20px;">
<i class="fa fa-download" style="width: 0px; height: 0px; background: none; margin: 0px 30px; float:none;"></i>Download Pdf</div>
</div><!--end -->
</div>
</div><!-- end col-md-4-->';
}
?>
Suppose the limit length is in $len, then
Add this line at the starting of your foreach block.
$para = substr ( $st['product_content'] , 0 , $len );
(Reference of substr)
Now replace
<p style="text-align:justify; ">'.$st['product_content'].'</p>
line with
<p style="text-align:justify; ">'.$para.'</p>
Fully modified code
<?php
$len = 50; //assuming the length is 50
foreach($conn->query("SELECT * FROM product_page ORDER BY id ASC LIMIT 10") as $st) {
$para = substr ( $st['product_content'] , 0 , $len );
echo'
<div class="col-md-4" style=" margin-bottom:50px;">
<div class="grid_7">
<div class="element">
<div class="grid">
<figure class="effect-apollo">
<img src="admin/'.$st['product_image'].'" alt="" />
<figcaption>
<h2></h2>
<p></p>
</figcaption>
</figure>
</div>
<h4>'.$st['product_name'].'</h4>
<p style="text-align:justify; ">'.$para .'</p>
</div><!--end element-->
<div style="margin-left:20px;">
<i class="fa fa-download" style="width: 0px; height: 0px; background: none; margin: 0px 30px; float:none;"></i>Download Pdf</div>
</div><!--end -->
</div>
</div><!-- end col-md-4-->';
}
?>
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.