How to use Material Design "mdl-tooltip" in a loop - php

I am using the materialdesign libary' tooltip:
https://getmdl.io/components/#tooltips-section
I'd like to use this feature in a loop, but this won't work of course, because mdl is working with "id's"(tt4 in this example) to trigger the icon and show its tooltip.
How can I get this to work in a loop and link the right tooltip to the right icon?
Thank you so much!
my php laravel blade code:
<td>
#if ($note->text)
<div id="tt4" class="icon material-icons">info</div>
<div class="mdl-tooltip" for="tt4">
{!! md($note->text) !!}
</div>
#endif
</td>

Have you tried dynamically injecting the code using PHP echo.
PHP is the first thing to run so it will evaluate all the other things for you.
echo "<div id="+$blah+">";
something like that
when you generate MDL dynamically, you might need to use this:
componentHandler.upgradeElements($('.mdl-tooltip').get());

Related

Laravel: How to get CKEditor to display first few words of post body without altering the styling of other posts

I am making a Laravel project which requires data written to and retrieved from the database using the CKEditor on my website. It displays the posts accordingly, so nothing wrong with the retrieval and I am able to trim each so the first few words show (because then I want people to click on the posts and read them on their individual pages) but the HTML from the CKEditor merges and edits the other posts which do not have any styling at all (which in this case is the strikethrough text).
IMAGE 1: what happens to other posts thanks to post 4
IMAGE 2: what the other posts should look like because they have no styling
IMAGE 3: what post 4 fully says
All I'd really like is for the first words or even row of each post to show while retaining the format made from CKEditor (e.g. including italics and bold).
Any ideas how to do this? Thanks :)
INDEX.BLADE.PHP
#extends('layouts/app')
#section('content')
<h1>Posts</h1>
#if(count($posts)>0)
#foreach($posts as $post)
<?php
$string = html_entity_decode($post->body);
?>
<div class="well">
<h3>{{$post->title}}</h3>
<p>{!!Str::words($string, 7, '...')!!}</p>
<small>{{$post->created_at}}</small>
</div>
<br/>
#endforeach
{{$posts->links()}}
#else
<h4>NO POSTS FOUND :(</h4>
#endif
#endsection
Try this-
{{ Str::limit($post->body, 7) }}
For CKEditor-
{!! Str::limit($post->body, 7) !!}

php echo stops rendering the page half way while laravel blade template works fine

I have a mcqs website, the problem is that when i try to load a quiz page with multiple questions and their answers, it loads fine.
Working code:
#foreach ($question->answers as $answer)
<span style="display:inline-block">
{{$answer->content}}
</span>
#endforeach
Not Working Code:
#foreach ($question->answers as $answer)
<span style="display:inline-block">
{!! $answer->content !!}
</span>
#endforeach
{!! $answer->content !!} is the same as echo $answer->content
however for the same code when i try to render the answers with HTML formatting using <?php echo , the page stops rendering midway. forexample if say the page was to load 30 questions , it will only load 10 and stops rendering . Even when i tried using {!!$answer->content!!} , the problem remains the same.
Note: i am returning set of questions using the below code:
$questions = Question::all()->where('exam_id',$exam_id)->random($questionsCount)->shuffle();
return view('quiz',compact('exam','questions','questionsCount','t'));
I have one to many relationship setup so i can extract the answers of the question using $question->answers
it works fine when i don't echo any answer content.
Anyhelp will be greatly appreciated. Thanks!
Looks like an issue with unescaped text. When you use the blade template's escape method ({{ }}) it is successful. When you use the unescaped method, ({!! !!}) it fails. This is the same when using the unescaped php echo.
There is likely some type of character in one of your questions that is causing a break of the loop or php echo.
To fix, use the blade escape {{ }} or php escape (htmlentities(), htmlspecialchars() etc) in the echo.
htmlentities-vs-htmlspecialchars is worth checking out as well.

Inserting blade code in blade code

I am trying to create a button with the Form builder
{!! Form::button('<span style="color: {!! $colour[$i] !!}" class..') !!}
The rest of the contents of the button are irrelevant, what I was trying to do was make the colour of the font $colour[$id] which worked fine when I tested it in raw HTML, but it keeps exiting the quotes when I add blade inside another blade function.
I guess I can't do that, how would I be able to use php in blade code without exiting the function? Thank you in advance.
You should pass an array with your style to this method, like:
Form::button(['style' => 'yourstyle']);

I want to remove certain parent- and child-divs in all my wordpress posts with php or some other script

Is there a quick way, via script maybe, to remove a certain pair of div's out of all my wordpress posts? For example:
I want to go from this:
<div class="single_textimage">
<div class="youtube_play"><iframe src="-,-"></iframe></div>
<div class="single_textimage_text">Some text.</div>
<div class="single_textimage_copyright">Some text.</div>
</div>
To this:
<div class="youtube_play"><iframe src="-,-"></iframe></div>
AND
From this:
<div class="single_textimage">
<img class="aligncenter size-full wp-image-1700" src="-,-" />
<div class="single_textimage_text">Some text.</div>
<div class="single_textimage_copyright">Some text.</div>
</div>
To this:
<img class="aligncenter size-full wp-image-1700" src="-,-" />
So I want the divs: single_textimage, single_textimage_text and single_textimage_copyright to go.
I hope there is an easy script, or difficult for that matter. Via "php", "mysql" or "jquery" for example, that I can put in test.php in the root or something...
I hope I supplied you with enough information. If I haven't made myself clear enough, please reply. :)
Seems to me like you should be able to take those out of whatever template your using - probably in a PHP include, but I don't really use WordPress, so I wouldn't know where without seeing all your files. If you're bent on using jQuery instead of modifying the template, I would throw in some CSS too, to hide the elements that will be removed:
.single_textimage, .single_textimage_text, .single_textimage_copyright{
display:none;
}
Then you can take the elements you want to keep out of their parent DIVs, and place them right after (or before):
$('.youtube_play, .wp-image-1700').each(function(){
$(this).parent().after($(this));
});
Then you can remove the elements you don't want from the page:
$('.single_textimage, .single_textimage_text, .single_textimage_copyright').remove();
Here's a fiddle: https://jsfiddle.net/3uztorzL/
I would use this search and replace utility to update all of the content in the DB:
https://interconnectit.com/products/search-and-replace-for-wordpress-databases/
You'll need a regex to replace <div class="single_textimage_text">Some text.</div> (assuming the "some text" is different in each post). The utility supports regex replace. This may do it:
<div class="single_textimage_text">(.*?)</div>
Make sure you make a backup before you do the replace.

Use a substituted for sup tag in PDFBundle in Symfony2

I want a higher number in the PHPPdf PDFBundle in Symfony2. But the bundle don't accept the sup tag.
<pdf>
<dynamic-page>
<div>
Some written text<sup>1</sup>
</div>
</dynamic-page>
</pdf>
So I need to substitute it with CSS and I try something like <span vertical-align="super" font-size="5pt"></span> but it don't work. Anyone a solution for this? And thank you for your help.
I get it now. But I'm not sure if it always works.
My solution use the attribute line-height.
<pdf>
<dynamic-page>
<div>
Some written text<span font-style="italic" font-size="5" line-height="8">1</span>
</div>
</dynamic-page>
</pdf>

Categories