I am working on an angular2+ project and often use the [innerHTML] tag to dynamically insert content into my templates. My problem is I have links that I need to open up in a new tab, however, I can't figure out how to change the target to "_blank".
<div class="container">
<div *ngFor="let taoys of taoysArray">
<h3 *ngIf="taoys?.title" [innerHTML]="taoys.title | safeHtml"></h3>
<p *ngIf="taoys?.text" [innerHTML]="taoys.text | safeHtml"></p>
</div>
</div>
</div>
The p tag is where the link shows up.
maybe you can set a placeholder that you replace with what you actually want, conditionally. Like this:
'<a href target="{target}">link</a>'.replace('{target}', '_blank')
Related
You can customize the JqxScheduler's edit dialog by appending the existing containers in the editDialogCreate method like this:
var titleSelector = $(`
<div>
<div class='jqx-scheduler-edit-dialog-label'>Előadás</div>
<div class="jqx-scheduler-edit-dialog-field">
<div><v-select :options="options"></v-select></div>
</div>
</div>`);
fields.subjectContainer.append(titleSelector);
I understand that this HTML inside won't be rendered in my Vue file, but I cannot add the rendered this rendered version by copy-paste as far as I know:
<div data-v-0a61aa6a="" dir="auto" class="v-select vs--single vs--searchable">
<div id="vs1__combobox" role="combobox" aria-expanded="false" aria-owns="vs1__listbox" aria-
label="Search for option" class="vs__dropdown-toggle"><div class="vs__selected-options">
...
</div>
</div>
My question is: How can I render this HTML and add it to the dialog?
I am using webpack and vue-router.
PS: I have read about the Vue.Compile method, but if I am correct, I cannot use it here.
You have several options:
Iclude this code into your html markup and put v-if directive on it, to hide/show it if necessary: v-if docs
Also you can try to create separate component for your title selector with Vue.component('component-title', {...}), docs
Ok, I've been trying to figure this out for a while, and not quite sure it's possible in pure CSS.
I'm trying to create a bit of custom styling on a page of FileRun links that I send to clients. Sending a bunch of subfolders of large TIFF images (I split them up to make the download manageable). Most clients can figure out that they should go into each subfolder and download them individually. However, the "download all" button appears on the main page of the link, and plenty of not so tech-savvy clients send me angry emails complaining that they hit the "download all" button, and can't open or download the 5GB zip file that FileRun creates of the entire main folder link.
An example of a page is here:
https://demo.filerun.co/wl/?id=T2Gv5oGiGMxO3welkXbaqs92fZ6meJmU
The main limitation is that FileRun is encoded in IonCube, so I only have access to the CSS file, so no way I can add javascript or PHP code.
I've been trying to find a way to write CSS to hide the DOWNLOAD ALL button <a class="actionBtn"> by changing the CSS to .actionBtn {display:none;} in the main link page, but not any subfolders. I have found you can tell when you are in a subfolder page when there is a 2+ level breadcrumb containing a carat.
e.g. in the 'elf' subfolder, this can be detected by the presence of the > in the breadcrumb, and the presence of <span class="bcSep">></span>
Is there any way to change the attribute of actionBtn or right div on the right, depending on the presence of the <span class="bcSep">></span> or number of elements in the breadcrumb?
The nesting order in the header div on the root page is:
<div class="left">
<a class="breadCrumb">xxx</a>
</div>
<div class="right">
<a class="actionBtn">DOWNLOAD ALL</a>
</div>
On any subfolders it is:
<div class="left">
<a class="breadCrumb">xxx</a>
<span class="bcSep">></span>
<a class="breadCrumb">xxx</a>
...
</div>
<div class="right">
<a class="actionBtn">DOWNLOAD ALL</a>
</div>
I've tried child selectors, but can't find a way to target the actionBtn or right element from the breadCrumb or left element... Any ideas or am I asking for the impossible from pure CSS?
Since all three of your products (colored, samba and skaven) as well as the DOWNLOAD ALL anchor link have unique URLS, you can just use the href attribute value to only select the anchor tag on the homepage using a css attribute selector like this:
a[href="http://someUniqueURL.com/"].actionBtn {
display:none;
}
Check and run the following Code Snippet for a practical example of the above approach:
/* CSS */
a[href="https://demo.filerun.co/?module=weblinks§ion=public&multidownload=1&id=T2Gv5oGiGMxO3welkXbaqs92fZ6meJmU"].actionBtn {
display:none;
}
<!-- HTML -->
<p>Homepage Link</p>
Download All
<hr/>
<p>Product 1</p>
Product 1
<hr/>
<p>Product 2</p>
Product 2
<hr/>
<p>Product 3</p>
Product 3
<hr/>
This is my PUG/JADE code is below
a(href="#card")
div.tile
h1 open card
#card
a(href="#") click to close
But this code doesn't print correctly, the .tile has print out of <a>,
you can view the printed code below.
<div class="tile">
<a href="#card">
<h1>Open card</h1>
</a>
<div id="card">
click to close
</div>
</div>
i need this code so:
<a href="#card">
<div class="tile">
<h1>Open card</h1>
<div id="card">
click to close
</div>
</div>
</a>
Links within links is invalid HTML. Jade is presumably using a HTML builder internally which will correct the syntax. You should see the same result if you hand write the HTML you think you want and view it in a browser - it will move the second a tag outside the first.
I had a similar use case, where I needed a DOM Element with a click handler inside a div which was inside an anchor tag.
I used a span for the interior clickable element, and used the JavaScript function addEventListener. Remember to use event.preventDefault() on the interior clickable element, so you do not trigger the href on the enclosing anchor tag.
I'm using ionic to build an app and I want to insert a linebreak inside a ionic tag (that will render a String) so it can display correctly inside its container...
<h2>{{caravan.model}}</h2>
One solution using Ionic2 is to use the innerHtml of a div
<div class="card-content" [innerHtml]="description"></div>
Now you can use any HTML tags like
<h1>, <br> or <p></p> etc..
in the prop description:string in typescript or javascript class
description:string = "<h1>My Header</h1> more text <br> and a break"
I solved my problem by adding the class "item-text-wrap" to add line breaks.
<h2 class="item-text-wrap">{{caravan.model}}</h2>
you need to use ng-repeat for that like shown below:
inside controller.js
$scope.carven = carven;
and
use this in html
<div ng-repeat="data in carven">
<h2>{{data.model}}</h2>
</div>
I'm using an app that allow me to change only the CSS of a webpage.
The devs create a step_btn class for 2 distinct buttons (previous and next button) and i want to change the CSS of each button separately.
I tried to make the changes through the div id but nothing happened...
Here is the page code :
<div id="j_id0:j_id73" class="navbuttonsContainer">
<div id="j_id0:j_id74" style="height:35px;overflow:visible;position:relative;" class="rowElem">
<div id="j_id0:j_id78" class="btnWrapper">
<a class="step_btn" onclick="saveAndGoTo('next')" title="Next Page">
<span id="j_id0:nextBtn">Next Page</span>
</a>
</div>
<div id="j_id0:j_id81"></div>
</div>
</div>
Here are my tries :
#j_id0:j_id78
div#j_id0:j_id78 {}
div#j_id0:j_id78 .step_btn {}
Is it my tries that failed or the webpage doesn't interpret my code correctly ?
Thanks for your help !
use an attribute selector to enclose the id as a string, e.g.
[id="j_id0:j_id78"] .step_btn { ... }
In fact using the id selector — like for #j_id0:j_id78 — the parser would consider j_id0 as the id and :j_id78 as a pseudoselector
Note: no need to specify the div element in front of the attribute, since the id should be unique in the page.