I need to wrap my blog content into a div some how with jQuery. But images and divs and tables should be left out.
This markup:
<div class="entry-content">
<h1>Title</h1>
<div class="into">Some text is here</div>
<p>Paragraph text</p>
<p>Paragraph text</p>
<ul>
<li>Maybe list too</li>
<li>Like this</li>
</ul>
<div class="media">
<img src="" alt="" />
</div>
<p>Paragraph text</p>
<h2>Another title</h2>
<p>Paragraph text</p>
<h3>Yet another title</h3>
<p>Paragraph text</p>
<p>Paragraph text</p>
<blocquote>
<p>Quote</p>
</blockquote>
<h1>Second title</h1>
<h2>Sub Title</h2>
<p>Paragraph text</p>
<im src="" alt="" />
<p>Paragraph text</p>
<table>
<td></td>
</table>
<p>Paragraph text</p>
<h2>Title</h2>
<div class="media">
<img src="" alt="" />
</div>
<p>Paragraph text</p>
</div>
Into this:
<div class="entry-content">
<div class="container">
<h1>Title</h1>
<div class="into">Some text is here</div>
<p>Paragraph text</p>
<p>Paragraph text</p>
<ul>
<li>Maybe list too</li>
<li>Like this</li>
</ul>
</div>
<div class="media">
<img src="" alt="" />
</div>
<div class="container">
<p>Paragraph text</p>
<h2>Another title</h2>
<p>Paragraph text</p>
<h3>Yet another title</h3>
<p>Paragraph text</p>
<p>Paragraph text</p>
<blocquote>
<p>Quote</p>
</blockquote>
<h1>Second title</h1>
<h2>Sub Title</h2>
<p>Paragraph text</p>
</div>
<img src="" alt="" />
<div class="container">
<p>Paragraph text</p>
</div>
<table>
<td></td>
</table>
<div class="container">
<p>Paragraph text</p>
<h2>Title</h2>
</div>
<div class="media">
<img src="" alt="" />
</div>
<div class="container">
<p>Paragraph text</p>
</div>
</div>
So basically wrap everything to except img, .media and tables. This is done because text is going to be 660px wide when tables and images will be full browser width.
I'm using Drupal and this is content from wysiwyg so if someone knows how to do it on php level would be great but I believe this should be doable in jQuery too. Maybe with some regex?
Any help would be appreciated because I'm kind of lost.
You can do something like
var $els = $();
$('.entry-content').children().each(function(){
if($(this).is('img, .media')){
$els.wrapAll('<div class="container" />');
$els = $();
}else {
$els = $els.add(this);
}
});
$els.wrapAll('<div class="container" />');
Demo: Fiddle
Related
I read the links of the pdf document in a new page using the code below but I only have the blank page
#section('content')
<div class="content">
<div class="container-fluid">
<div class="card card-plain">
<div class="card-header card-header-primary">
<h4 class="card-title">Cotations</h4>
<p class="card-category">lorem ipsum lorem ipsum
</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
Hunchly-Dark-Web-Setup.pdf
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
You can check out this post about embedding PDF files on your webpage. HTML embedded PDF iframe
What I've done in the past is used an iframe to achieve this, like so:
<iframe style="border:1px solid #666CCC" title="My PDF" src="my-pdf.pdf" frameborder="1" scrolling="auto" height="1100" width="850" ></iframe>
you can use object tag
#section('content')
<div class="content">
<div class="container-fluid">
<div class="card card-plain">
<div class="card-header card-header-primary">
<h4 class="card-title">Cotations</h4>
<p class="card-category">lorem ipsum lorem ipsum
</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<!-- pdf here -->
<object width="400" height="400" data="http://plugindoc.mozdev.org/testpages/test.pdf">
</object>
<!-- pdf here -->
<!-- or iframe -->
<iframe src="http://plugindoc.mozdev.org/testpages/test.pdf" width="400" height="400" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
Thanks #Otavio and #jass. I tried it with ifram and it work.
<iframe style="border:none" src="{{URL::asset('/material/docs/laravel-PDF/laravel.pdf')}}" scrolling="auto" height="700" class="col-md-10"></iframe>
I wanted to specify also that we had to use the link the way laravel does it
I'm working in PHP with a block of text roughly like this:
$html = '
<p>Paragraph one</p>
<figure>
<img src="image1.jpg">
</figure>
<p>Paragraph two</p>
<figure>
<img src="image2.jpg">
<figcaption>Caption</figcaption>
</figure>
<p>Paragraph three</p>
';
Within this block I want to append a span just before each occurrence of the closing figure tag, so that the HTML looks like this:
<p>Paragraph one</p>
<figure>
<img src="image1.jpg">
<span>Text within span</span>
</figure>
<p>Paragraph two</p>
<figure>
<img src="image2.jpg">
<figcaption>Caption</figcaption>
<span>Text within span</span>
</figure>
<p>Paragraph three</p>
I'm unsure how to proceed from here (or if this is in fact the most obvious way to proceed):
$doc = new DOMDocument();
#$doc->loadHTML($html);
foreach($doc->getElementsByTagName('figure') as $element ){
//append <span>Text within span</span> before closing </figure>
}
$html = $doc->saveHTML();
echo $html;
Here you go:
$html = '
<p>Paragraph one</p>
<figure>
<img src="image1.jpg">
</figure>
<p>Paragraph two</p>
<figure>
<img src="image2.jpg">
<figcaption>Caption</figcaption>
</figure>
<p>Paragraph three</p>
';
$doc = new DOMDocument();
#$doc->loadHTML($html);
foreach ($doc->getElementsByTagName('figure') as $element) {
$span = $doc->createElement('span');
$span->textContent = 'Some text here';
$element->appendChild($span);
}
$html = $doc->saveHTML();
echo $html;
this code shows a set of html statements embedded in a php file. Here in the second line i want that reference (href) value to be a variable depending upon the loop value ($i). But when I click on the link it goes to $i.html instead of going to the value in $i. please help
echo '<li>
<div class="imgholder">
<a href= "$i.html">
<img src="images/demo/imgl.png" alt="" />
</a>
</div>
<div class="latestnews">
<h2>Text 1</h2>
<p>Text 2</p>
</div>
<br class="clear" />
</li>';
There is concatenation operator ('.'), which returns the concatenation of its right and left arguments. Try with .:
echo '<li>
<div class="imgholder"><a href= "'. $i .'.html">
<img src="images/demo/imgl.png" alt="" /></a></div>
<div class="latestnews">
<h2>Text 1</h2>
<p>Text 2</p>
</div>
<br class="clear" />
</li>';
Try with
echo '<li>
<div class="imgholder"><a href= "'.$i.'.html">
<img src="images/demo/imgl.png" alt="" /></a></div>
<div class="latestnews">
<h2>Text 1</h2>
<p>Text 2</p>
</div>
<br class="clear" />
</li>';
You have to concatenate the PHP variable with the HTML tags. You got href as $i.html as the value of the variable was not substituted correctly.
How about you make it like this:
<?php for($i = 0; $i<10; $i++){ ?>
<li>
<div class="imgholder">
<img src="images/demo/imgl.png" alt="" />
</div>
<div class="latestnews">
<h2>Text 1</h2>
<p>Text 2</p>
</div> <br class="clear" />
</li>
<?php } ?>
In this context you have $i is a static String. But you want to have a variable which is dynamically changing.
Edited: Something like this is what I used to do, but it is not "clean" php.
Try this
echo "<li>
<div class='imgholder'><a href= '$i.html'>
<img src='images/demo/imgl.png' /></a></div>
<div class='latestnews'>
<h2>Text 1</h2>
<p>Text 2</p>
</div>
<br class='clear' />
</li>"
use double quotes or concatenation, as mentioned before.
But I'd like to recomend you to take a look on templates
like smarty or twig, or even plain php
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
This is my code. It is actually an html file. I want to loop those statements using php so that I can have that paragraph in my html page repeated for any number of times. Please help
<?php
for($i=0;$i<=5;$i++){
<li>
<div class="imgholder"><img src="images/demo/imgl.gif" alt="" /></div>
<div class="latestnews">
<h2>Text !</h2>
<p>Text 2</p>
</div>
<br class="clear" />
</li>
}
?>
You need to echo the HTML inside php:
<?php
for($i=0;$i<=5;$i++)
{
echo '<li>
<div class="imgholder"><img src="images/demo/imgl.gif" alt="" /></div>
<div class="latestnews">
<h2>Text !</h2>
<p>Text 2</p>
</div>
<br class="clear" />
</li>';
}
?>
Or you could just separate the HTML and php like:
<?php
for($i=0;$i<=5;$i++)
{ ?>
<li>
<div class="imgholder"><img src="images/demo/imgl.gif" alt="" /></div>
<div class="latestnews">
<h2>Text !</h2>
<p>Text 2</p>
</div>
<br class="clear" />
</li>
<?php } ?>
Close Php tag after braces, you can also write HTML in single Quotes.
<?php
for($i=0;$i<=5;$i++)
{
?>
<li>
<div class="imgholder"><img src="images/demo/imgl.gif" alt="" /></div>
<div class="latestnews">
<h2>Text !</h2>
<p>Text 2</p>
</div>
<br class="clear" />
</li>
<?php
}
?>
Just having some trouble scraping the h2 on this code:
<div id="content">
<div class="title-wrapper">
<article class="article">
<figure>
<a title="Ölüm Denizi" href="http://trfilmizle.com/olum-denizi.html">
<img class="small-poster" alt="Ölüm Denizi" src="http://i706.photobucket.com/albums/ww64/ddizi/TRfilmizle/OumlluumlmDenizi_zpsc809f300.jpg~original">
</a>
</figure>
<div class="article-container">
<h2>
<a title="Ölüm Denizi" href="http://trfilmizle.com/olum-denizi.html">Ölüm Denizi</a>
</h2>
<div class="article-info">
<div class="description"> Kuzey Kore, Güney Kore ve Çin arasına sıkışmış Yanji kentinde geçen Ölüm Denizi, araba kovalamacaları, cinayetler ve bıçaklı kavgalarla dolu… </div>
</div>
Any idea? I can access the nodes via:
//article[#class='article']/text()
But, can't get the h2! Any suggestions?
This should get all of the text components underneath h2 elements in the divs:
//div/h2//*/text()
More specifically, you can limit it to specific divs:
//div[#class='article-container']/h2//*/text()
Use this preg_match_all()
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<?php
$source= '<div id="content">
<div class="title-wrapper">
<article class="article">
<figure>
<a title="Ölüm Denizi" href="http://trfilmizle.com/olum-denizi.html">
<img class="small-poster" alt="Ölüm Denizi" src="http://i706.photobucket.com/albums/ww64/ddizi/TRfilmizle/OumlluumlmDenizi_zpsc809f300.jpg~original">
</a>
</figure>
<div class="article-container">
<h2>
<a title="Ölüm Denizi" href="http://trfilmizle.com/olum-denizi.html">Ölüm Denizi</a>
</h2>
<div class="article-info">
<div class="description"> Kuzey Kore, Güney Kore ve Çin arasına sıkışmış Yanji kentinde geçen Ölüm Denizi, araba kovalamacaları, cinayetler ve bıçaklı kavgalarla dolu… </div>
</div>';
preg_match_all('#<h2>(.*?)</h2>#is', $source, $output, PREG_PATTERN_ORDER);
print_r($output[1][0]);
exit;