I have a rich text editor that supports mathematical expression, its working fine expressions can be written and rendered fine in the editor but when we try to render using div it throws many errors in the console and the page becomes blank.
<div className="text-container flex" dangerouslySetInnerHTML={{ __html: value }} />
We use Katex and Mathquil to work with math expressions, HTML content is this
<p>
<span class="ql-formula" data-value="\sqrt[3]{}23">
<span contenteditable="false">
<span class="katex">
<span class="katex-mathml">
<math xmlns="http://www.w3.org/1998/Math/MathML">
<semantics>
<mrow>
<mroot>
<mrow></mrow>
<mn>3</mn>
</mroot>
<mn>23</mn>
</mrow>
<annotation encoding="application/x-tex">\sqrt[3]{}23</annotation>
</semantics>
</math>
</span>
<span class="katex-html" aria-hidden="true">
<span class="base">
<span class="strut" style="height: 1.04em; vertical-align: -0.2395em;"></span>
<span class="mord sqrt">
<span class="root">
<span class="vlist-t">
<span class="vlist-r">
<span class="vlist" style="height: 0.6588em;">
<span class="" style="top: -2.8366em;">
<span class="pstrut" style="height: 2.5em;"></span>
<span class="sizing reset-size6 size1 mtight">
<span class="mord mtight">
<span class="mord mtight">3</span>
</span>
</span>
</span>
</span>
</span>
</span>
</span>
<span class="vlist-t vlist-t2">
<span class="vlist-r">
<span class="vlist" style="height: 0.8005em;">
<span class="svg-align" style="top: -3em;">
<span class="pstrut" style="height: 3em;">
</span>
<span class="mord" style="padding-left: 0.833em;">
</span></span><span class="" style="top: -2.7605em;"><span class="pstrut" style="height: 3em;"></span><span class="hide-tail" style="min-width: 0.853em; height: 1.08em;"><svg width="400em" height="1.08em" viewBox="0 0 400000 1080" preserveAspectRatio="xMinYMin slice"><path d="M95,702
c-2.7,0,-7.17,-2.7,-13.5,-8c-5.8,-5.3,-9.5,-10,-9.5,-14
c0,-2,0.3,-3.3,1,-4c1.3,-2.7,23.83,-20.7,67.5,-54
c44.2,-33.3,65.8,-50.3,66.5,-51c1.3,-1.3,3,-2,5,-2c4.7,0,8.7,3.3,12,10
s173,378,173,378c0.7,0,35.3,-71,104,-213c68.7,-142,137.5,-285,206.5,-429
c69,-144,104.5,-217.7,106.5,-221
l0 -0
c5.3,-9.3,12,-14,20,-14
H400000v40H845.2724
s-225.272,467,-225.272,467s-235,486,-235,486c-2.7,4.7,-9,7,-19,7
c-6,0,-10,-1,-12,-3s-194,-422,-194,-422s-65,47,-65,47z
M834 80h400000v40h-400000z"></path></svg></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height: 0.2395em;"><span class=""></span></span></span></span></span><span class="mord">23</span></span></span></span></span></span> </p>
In the editor it looks like this but when we try to render this on the view page, its fails.
How can we render this HTML content in react js?
Related
I'm trying to fetch data from server and use it in a HTML grid. HTML Grid code is:
HTML:
<div id="wrapper-Baby" class="wrapper">
<div class="Product" style="width:100%">
<header class="product-header">
<div class="product-image-container">
<a class="product-image-link" OnClick="window.location.href='#Url.Action("Details", "Home", new { id = item.ItemID })'">
<div class="product-image">
<img alt="#item.ItemName" src="#item.ImageUrl" />
</div>
</a>
</div>
<div class="product-main-info">
<h3 class="product-title">
<a OnClick="window.location.href='#Url.Action("Details", "Home", new { id = item.ItemID })'">
<span>
<span class="product-brand">
#item.BrandName
</span>
<span class="product-name">
#item.ItemName
</span>
</span>
</a>
</h3>
<span class="product-pricing-info">
<span class="price-container">
<span class="currency-sign">Rs.</span>
<span class="rs-value">
#item.ItemPrice
</span>
<span class="paisa-value">.00</span>
</span>
<span class="saving-container">
<!----to be filled-->
</span>
</span>
</div>
<div class="product-info">
<p>
<span class="package-size">
<!--to be filled-->
</span>
</p>
</div>
</header>
<div class="product-actions-container">
<div class="fat-controller is-full-width">
<div class="fc-button" id="fcButton">
<div class="button-main-container clear">
<a href="/ShoppingCart/AddToCart/#item.ItemID/1" class="button button-main">
<span class="button-main-inner">
<span>
Add
</span>
<span class="product-qty">1</span>
<span class="product-text">for</span>
<strong class="product-price">Rs. #item.ItemPrice</strong>
</span>
</a>
</div>
<button class="button button-down">
<svg focusable="false" class="icon icon-dropdown-small">
<use xlink:href="#icon-dropdown-small">
<symbol viewBox="0 0 9 4" id="icon-dropdown-small">
<path d="M4.092,3.999 C4.092,3.999 0.008,0.002 0.008,0.002 C0.008,0.002 8.177,0.002 8.177,0.002 C8.177,0.002 4.092,3.999 4.092,3.999 Z" id="icon-dropdown-small-path-1" fill-rule="evenodd"></path>
</symbol>
</use>
</svg>
</button>
<div class="button-confirmation">
<div class="button-confirmation-container clear">
<div class="button-confirmation-label">
<span data-colrs-fat-controller-animation-message=""></span>
</div>
</div>
<div class="button-confirmation-icon">
<span class="icon-loading"></span>
</div>
</div>
<!---->
<div class="fc-dropdown">
<span class="popup-arrow"></span>
<ul class="fc-button-options" id="fcDropDown">
<!---->
<li class="fc-option">
<a href="/ShoppingCart/AddToCart/#item.ItemID/1" class="button-add button-measure">
<svg focusable="false" class="icon icon-tick">
<use xlink:href="#icon-tick"></use>
</svg>
<!---->
<span class="combined">
<span class="product-qty" style="width: 12px;">1 </span>
<span class="product-text">for </span>
<strong class="product-price" style="width: 52px;">#item.ItemPrice</strong>
</span>
</a>
</li>
<!---->
<li class="fc-option">
<a href="/ShoppingCart/AddToCart/#item.ItemID/2" class="button-add button-measure">
<svg focusable="false" class="icon icon-tick">
<use xlink:href="#icon-tick"></use>
</svg>
<!---->
<span class="combined">
<span class="product-qty" style="width: 12px;">2 </span>
<span class="product-text">for </span>
<strong class="product-price" style="width: 52px;">#(item.ItemPrice * 2)</strong>
</span>
</a>
</li>
<li class="fc-option">
<a href="/ShoppingCart/AddToCart/#item.ItemID/3" class="button-add button-measure">
<svg focusable="false" class="icon icon-tick">
<use xlink:href="#icon-tick"></use>
</svg>
<!---->
<span class="combined">
<span class="product-qty" style="width: 12px;">3 </span>
<span class="product-text">for </span>
<strong class="product-price" style="width: 52px;">#(item.ItemPrice * 3)</strong>
</span>
</a>
</li>
<li class="fc-option">
<a href="/ShoppingCart/AddToCart/#item.ItemID/4" class="button-add button-measure">
<svg focusable="false" class="icon icon-tick">
<use xlink:href="#icon-tick"></use>
</svg>
<!---->
<span class="combined">
<span class="product-qty" style="width: 12px;">4 </span>
<span class="product-text">for </span>
<strong class="product-price" style="width: 52px;">#(item.ItemPrice * 4)</strong>
</span>
</a>
</li>
<li class="fc-option fc-option-more">
<button class="button-more button-measure">
<svg focusable="false" class="icon icon-tick">
<use xlink:href="#icon-tick"></use>
</svg>
<span class="option-more combined" style="width: 93px;">
<span class="product-text">
<span class="product-qty" style="width: 12px;">
5
</span> or more...
</span>
</span>
</button>
#using (Html.BeginForm("AddToCart", "ShoppingCart", new { id = item.ItemID }, FormMethod.Post))
{
<div class="fc-option-more-input ng-hide">
<input type="number" id="itemCount" name="itemCount" class="ItemCount">
<button type="submit" class="button button-add-custom-qty" id=#item.ItemID disabled="disabled">
<!----><span>Add</span><!---->
</button>
</div>
}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
I'm pasting all this code because I need to show my page in this format. I need to pass following variable values to Grid from ajax success:
#item.ItemName, #item.ImageUrl, item.ItemID, #item.BrandName, #item.ItemName
So for that, I needed to fetch the list of items from server. This JavaScript code is used to call data from the controller on a button click:
JavaScript:
$(".CategoryAnchors").click(function (e) {
e.preventDefault();
// Get the category name given in the id from the button
var category = this.id;
// Perform the ajax post
if (category != '') {
$.post("/Home/GetCategoryItems",
{
"categoryName": category
},
function (data) {
//successful request gets here
//Update page element
$("#wrapperShop").css('visibility', 'hidden');
}
)
}
});
Controller:
public JsonResult GetCategoryItems (string categoryName)
{
var itemList = db.Items.Where(x => x.CategoryName == categoryName).ToList();
return Json(itemList, JsonRequestBehavior.AllowGet);
}
I might be trying to do a wrong logic for the process but if it's possible this way, please advice how I can pass relevant data to from AJAX to my HTML Grid.
.CSS
#wrapper-Baby {
display: grid;
grid-template-columns: 214px 214px 214px 214px 214px 214px;
grid-auto-rows: minmax(20px, auto);
grid-gap: 15px;
margin-top: 0;
position: relative;
left: 12px;
width: 100%;
bottom: 880px;
}
I have a wordBox Where user will drag touch and drag to select words.
I am using touchmove eventlistener to change background/color of the word in wordBox. But touchmove only changing color/background of the text from where it started.
var COLUMNS = 20;
var ROWS = 12;
var word = ['H', 'E', 'L', 'L', 'O'];
var wordLength = word.length;
var spans = document.getElementsByTagName("span");
function select(evt) {
var id = this.id;
document.getElementById(this.id).style.background = "#ffffff";
document.getElementById(this.id).style.color = "#0070C4";
for (var i = 0; i < spans.length; i++) {
mouseMove = spans[i].addEventListener("touchmove", function(sp) {
document.getElementById(sp.toElement.id).style.background = "#ffffff";
document.getElementById(sp.toElement.id).style.color = "#0070C4";
});
}
}
function start() {
//GENERATE RANDOM WORDBOX
for (var i = 0; i < spans.length; i++) {
spans[i].innerHTML = word[Math.floor(Math.random() * wordLength)];
spans[i].addEventListener("touchmove", select);
}
}
start();
html {
background: #0070C4;
color: #fff;
}
span {
padding: 8px 6px;
}
<div id="wordBox">
<div class="column1">
<span id='r1'></span>
<span id='r2'>></span>
<span id='r3'>></span>
<span id='r4'>></span>
<span id='r5'>></span>
<span id='r6'>></span>
<span id='r7'>></span>
<span id='r8'>></span>
<span id='r9'>></span>
<span id='r10'>></span>
<span id='r11'>></span>
<span id='r12'>></span>
<span id='r13'>></span>
<span id='r14'>></span>
<span id='r15'>></span>
<span id='r16'>></span>
<span id='r17'>></span>
<span id='r18'>></span>
<span id='r19'>></span>
<span id='r20'>></span>
</div>
<div class="column2">
<span id='r21'>></span>
<span id='r22'>></span>
<span id='r23'>></span>
<span id='r24'>></span>
<span id='r25'>></span>
<span id='r26'>></span>
<span id='r27'>></span>
<span id='r28'>></span>
<span id='r29'>></span>
<span id='r30'>></span>
<span id='r31'>></span>
<span id='r32'>></span>
<span id='r33'>></span>
<span id='r34'>></span>
<span id='r35'>></span>
<span id='r36'>></span>
<span id='r37'>></span>
<span id='r38'>></span>
<span id='r39'>></span>
<span id='r40'>></span>
</div>
<div class="column3">
<span id='r41'>></span>
<span id='r42'>></span>
<span id='r43'>></span>
<span id='r44'>></span>
<span id='r45'>></span>
<span id='r46'>></span>
<span id='r47'>></span>
<span id='r48'>></span>
<span id='r49'>></span>
<span id='r50'>></span>
<span id='r51'>></span>
<span id='r52'>></span>
<span id='r53'>></span>
<span id='r54'>></span>
<span id='r55'>></span>
<span id='r56'>></span>
<span id='r57'>></span>
<span id='r58'>></span>
<span id='r59'>></span>
<span id='r60'>></span>
</div>
<div class="column4">
<span id='r61'>></span>
<span id='r62'>></span>
<span id='r63'>></span>
<span id='r64'>></span>
<span id='r65'>></span>
<span id='r66'>></span>
<span id='r67'>></span>
<span id='r68'>></span>
<span id='r69'>></span>
<span id='r70'>></span>
<span id='r71'>></span>
<span id='r72'>></span>
<span id='r73'>></span>
<span id='r74'>></span>
<span id='r75'>></span>
<span id='r76'>></span>
<span id='r77'>></span>
<span id='r78'>></span>
<span id='r79'>></span>
<span id='r80'>></span>
</div>
<div class="column5">
<span id='r81'>></span>
<span id='r82'>></span>
<span id='r83'></span>
<span id='r84'>></span>
<span id='r85'>></span>
<span id='r86'>></span>
<span id='r87'>></span>
<span id='r88'>></span>
<span id='r89'>></span>
<span id='r90'>></span>
<span id='r91'>></span>
<span id='r92'>></span>
<span id='r93'>></span>
<span id='r94'>></span>
<span id='r95'>></span>
<span id='r96'>></span>
<span id='r97'>></span>
<span id='r98'>></span>
<span id='r99'>></span>
<span id='r100'>></span>
</div>
<div class="column6">
<span id='r101'>></span>
<span id='r102'>></span>
<span id='r103'>></span>
<span id='r104'>></span>
<span id='r105'>></span>
<span id='r106'>></span>
<span id='r107'>></span>
<span id='r108'>></span>
<span id='r109'>></span>
<span id='r110'>></span>
<span id='r111'>></span>
<span id='r112'>></span>
<span id='r113'>></span>
<span id='r114'>></span>
<span id='r115'>></span>
<span id='r116'>></span>
<span id='r117'>></span>
<span id='r118'>></span>
<span id='r119'>></span>
<span id='r200'>></span>
</div>
<div class="column7">
<span id='r201'>></span>
<span id='r202'>></span>
<span id='r203'>></span>
<span id='r204'>></span>
<span id='r205'>></span>
<span id='r206'>></span>
<span id='r207'>></span>
<span id='r208'>></span>
<span id='r209'>></span>
<span id='r210'>></span>
<span id='r211'>></span>
<span id='r212'>></span>
<span id='r213'>></span>
<span id='r214'>></span>
<span id='r215'>></span>
<span id='r216'>></span>
<span id='r217'>></span>
<span id='r218'>></span>
<span id='r219'>></span>
<span id='r220'>></span>
</div>
<div class="column8">
<span id='r221'>></span>
<span id='r222'>></span>
<span id='r223'>></span>
<span id='r224'>></span>
<span id='r225'>></span>
<span id='r226'>></span>
<span id='r227'>></span>
<span id='r228'>></span>
<span id='r229'>></span>
<span id='r230'>></span>
<span id='r231'>></span>
<span id='r232'>></span>
<span id='r233'>></span>
<span id='r234'>></span>
<span id='r235'>></span>
<span id='r236'>></span>
<span id='r237'>></span>
<span id='r238'>></span>
<span id='r239'>></span>
<span id='r240'>></span>
</div>
<div class="column9">
<span id='r241'>></span>
<span id='r242'>></span>
<span id='r243'>></span>
<span id='r244'>></span>
<span id='r245'>></span>
<span id='r246'>></span>
<span id='r247'>></span>
<span id='r248'>></span>
<span id='r249'>></span>
<span id='r250'>></span>
<span id='r251'>></span>
<span id='r252'>></span>
<span id='r253'>></span>
<span id='r254'>></span>
<span id='r255'>></span>
<span id='r256'>></span>
<span id='r257'>></span>
<span id='r258'>></span>
<span id='r259'>></span>
<span id='r260'>></span>
</div>
<div class="column10">
<span id='r261'>></span>
<span id='r262'>></span>
<span id='r263'>></span>
<span id='r264'>></span>
<span id='r265'>></span>
<span id='r266'>></span>
<span id='r267'>></span>
<span id='r268'>></span>
<span id='r269'>></span>
<span id='r270'>></span>
<span id='r271'>></span>
<span id='r272'>></span>
<span id='r273'>></span>
<span id='r274'>></span>
<span id='r275'>></span>
<span id='r276'>></span>
<span id='r277'>></span>
<span id='r278'>></span>
<span id='r279'>></span>
<span id='r300'>></span>
</div>
<div class="column11">
<span id='r301'>></span>
<span id='r302'>></span>
<span id='r303'>></span>
<span id='r304'>></span>
<span id='r305'>></span>
<span id='r306'>></span>
<span id='r307'>></span>
<span id='r308'>></span>
<span id='r309'>></span>
<span id='r310'>></span>
<span id='r311'>></span>
<span id='r312'>></span>
<span id='r313'>></span>
<span id='r314'>></span>
<span id='r315'>></span>
<span id='r316'>></span>
<span id='r317'>></span>
<span id='r318'>></span>
<span id='r319'>></span>
<span id='r320'>></span>
</div>
<div class="column12">
<span id='r321'>></span>
<span id='r322'>></span>
<span id='r323'>></span>
<span id='r324'>></span>
<span id='r325'>></span>
<span id='r326'>></span>
<span id='r327'>></span>
<span id='r328'>></span>
<span id='r329'>></span>
<span id='r330'>></span>
<span id='r331'>></span>
<span id='r332'>></span>
<span id='r333'>></span>
<span id='r334'>></span>
<span id='r335'>></span>
<span id='r336'>></span>
<span id='r337'>></span>
<span id='r338'>></span>
<span id='r339'>></span>
<span id='r340'>></span>
</div>
</div>
JSFIDDLE
I also tried mouse events but getting desired results. How can i achieve this?
Use Document.elementFromPoint() with clientX and clientY to select the current element
The elementFromPoint() method of the Document interface returns the topmost element at the specified coordinates.
var COLUMNS = 20;
var ROWS = 12;
var word = ['H', 'E', 'L', 'L', 'O'];
var wordLength = word.length;
var spans = document.getElementsByTagName("span");
var started = false;
function clearAll() {
started = true;
for (var i = 0; i < spans.length; i++) {
spans[i].style.background = "";
spans[i].style.color = "";
}
}
function select(e) {
e.preventDefault();
if (started) {
var changedTouch = e.changedTouches[0];
var elem = document.elementFromPoint(changedTouch.clientX, changedTouch.clientY);
if (elem.tagName === 'SPAN') { //this condition could also be more accurate based on your specificity of the element
elem.style.background = "#ffffff";
elem.style.color = "#0070C4";
}
}
}
function mouseMoveHandler(e) {
e.preventDefault();
if (started) {
this.style.background = "#ffffff";
this.style.color = "#0070C4";
}
}
function reset() {
started = false;
}
function start() {
for (var i = 0; i < spans.length; i++) {
spans[i].innerHTML = word[Math.floor(Math.random() * wordLength)];
spans[i].addEventListener("touchstart", clearAll);
spans[i].addEventListener("mousedown", clearAll);
spans[i].addEventListener("touchmove", select);
spans[i].addEventListener("mousemove", mouseMoveHandler);
spans[i].addEventListener("touchend", reset);
spans[i].addEventListener("mouseup", reset);
}
}
start();
html {
background: #0070C4;
color: #fff;
}
span {
padding: 8px 6px;
}
<div id="wordBox">
<div class="column1">
<span id='r1'>></span>
<span id='r2'>></span>
<span id='r3'>></span>
<span id='r4'>></span>
<span id='r5'>></span>
<span id='r6'>></span>
<span id='r7'>></span>
<span id='r8'>></span>
<span id='r9'>></span>
<span id='r10'>></span>
<span id='r11'>></span>
<span id='r12'>></span>
<span id='r13'>></span>
<span id='r14'>></span>
<span id='r15'>></span>
<span id='r16'>></span>
<span id='r17'>></span>
<span id='r18'>></span>
<span id='r19'>></span>
<span id='r20'>></span>
</div>
<div class="column2">
<span id='r21'>></span>
<span id='r22'>></span>
<span id='r23'>></span>
<span id='r24'>></span>
<span id='r25'>></span>
<span id='r26'>></span>
<span id='r27'>></span>
<span id='r28'>></span>
<span id='r29'>></span>
<span id='r30'>></span>
<span id='r31'>></span>
<span id='r32'>></span>
<span id='r33'>></span>
<span id='r34'>></span>
<span id='r35'>></span>
<span id='r36'>></span>
<span id='r37'>></span>
<span id='r38'>></span>
<span id='r39'>></span>
<span id='r40'>></span>
</div>
<div class="column3">
<span id='r41'>></span>
<span id='r42'>></span>
<span id='r43'>></span>
<span id='r44'>></span>
<span id='r45'>></span>
<span id='r46'>></span>
<span id='r47'>></span>
<span id='r48'>></span>
<span id='r49'>></span>
<span id='r50'>></span>
<span id='r51'>></span>
<span id='r52'>></span>
<span id='r53'>></span>
<span id='r54'>></span>
<span id='r55'>></span>
<span id='r56'>></span>
<span id='r57'>></span>
<span id='r58'>></span>
<span id='r59'>></span>
<span id='r60'>></span>
</div>
<div class="column4">
<span id='r61'>></span>
<span id='r62'>></span>
<span id='r63'>></span>
<span id='r64'>></span>
<span id='r65'>></span>
<span id='r66'>></span>
<span id='r67'>></span>
<span id='r68'>></span>
<span id='r69'>></span>
<span id='r70'>></span>
<span id='r71'>></span>
<span id='r72'>></span>
<span id='r73'>></span>
<span id='r74'>></span>
<span id='r75'>></span>
<span id='r76'>></span>
<span id='r77'>></span>
<span id='r78'>></span>
<span id='r79'>></span>
<span id='r80'>></span>
</div>
<div class="column5">
<span id='r81'>></span>
<span id='r82'>></span>
<span id='r83'></span>
<span id='r84'>></span>
<span id='r85'>></span>
<span id='r86'>></span>
<span id='r87'>></span>
<span id='r88'>></span>
<span id='r89'>></span>
<span id='r90'>></span>
<span id='r91'>></span>
<span id='r92'>></span>
<span id='r93'>></span>
<span id='r94'>></span>
<span id='r95'>></span>
<span id='r96'>></span>
<span id='r97'>></span>
<span id='r98'>></span>
<span id='r99'>></span>
<span id='r100'>></span>
</div>
<div class="column6">
<span id='r101'>></span>
<span id='r102'>></span>
<span id='r103'>></span>
<span id='r104'>></span>
<span id='r105'>></span>
<span id='r106'>></span>
<span id='r107'>></span>
<span id='r108'>></span>
<span id='r109'>></span>
<span id='r110'>></span>
<span id='r111'>></span>
<span id='r112'>></span>
<span id='r113'>></span>
<span id='r114'>></span>
<span id='r115'>></span>
<span id='r116'>></span>
<span id='r117'>></span>
<span id='r118'>></span>
<span id='r119'>></span>
<span id='r200'>></span>
</div>
<div class="column7">
<span id='r201'>></span>
<span id='r202'>></span>
<span id='r203'>></span>
<span id='r204'>></span>
<span id='r205'>></span>
<span id='r206'>></span>
<span id='r207'>></span>
<span id='r208'>></span>
<span id='r209'>></span>
<span id='r210'>></span>
<span id='r211'>></span>
<span id='r212'>></span>
<span id='r213'>></span>
<span id='r214'>></span>
<span id='r215'>></span>
<span id='r216'>></span>
<span id='r217'>></span>
<span id='r218'>></span>
<span id='r219'>></span>
<span id='r220'>></span>
</div>
<div class="column8">
<span id='r221'>></span>
<span id='r222'>></span>
<span id='r223'>></span>
<span id='r224'>></span>
<span id='r225'>></span>
<span id='r226'>></span>
<span id='r227'>></span>
<span id='r228'>></span>
<span id='r229'>></span>
<span id='r230'>></span>
<span id='r231'>></span>
<span id='r232'>></span>
<span id='r233'>></span>
<span id='r234'>></span>
<span id='r235'>></span>
<span id='r236'>></span>
<span id='r237'>></span>
<span id='r238'>></span>
<span id='r239'>></span>
<span id='r240'>></span>
</div>
<div class="column9">
<span id='r241'>></span>
<span id='r242'>></span>
<span id='r243'>></span>
<span id='r244'>></span>
<span id='r245'>></span>
<span id='r246'>></span>
<span id='r247'>></span>
<span id='r248'>></span>
<span id='r249'>></span>
<span id='r250'>></span>
<span id='r251'>></span>
<span id='r252'>></span>
<span id='r253'>></span>
<span id='r254'>></span>
<span id='r255'>></span>
<span id='r256'>></span>
<span id='r257'>></span>
<span id='r258'>></span>
<span id='r259'>></span>
<span id='r260'>></span>
</div>
<div class="column10">
<span id='r261'>></span>
<span id='r262'>></span>
<span id='r263'>></span>
<span id='r264'>></span>
<span id='r265'>></span>
<span id='r266'>></span>
<span id='r267'>></span>
<span id='r268'>></span>
<span id='r269'>></span>
<span id='r270'>></span>
<span id='r271'>></span>
<span id='r272'>></span>
<span id='r273'>></span>
<span id='r274'>></span>
<span id='r275'>></span>
<span id='r276'>></span>
<span id='r277'>></span>
<span id='r278'>></span>
<span id='r279'>></span>
<span id='r300'>></span>
</div>
<div class="column11">
<span id='r301'>></span>
<span id='r302'>></span>
<span id='r303'>></span>
<span id='r304'>></span>
<span id='r305'>></span>
<span id='r306'>></span>
<span id='r307'>></span>
<span id='r308'>></span>
<span id='r309'>></span>
<span id='r310'>></span>
<span id='r311'>></span>
<span id='r312'>></span>
<span id='r313'>></span>
<span id='r314'>></span>
<span id='r315'>></span>
<span id='r316'>></span>
<span id='r317'>></span>
<span id='r318'>></span>
<span id='r319'>></span>
<span id='r320'>></span>
</div>
<div class="column12">
<span id='r321'>></span>
<span id='r322'>></span>
<span id='r323'>></span>
<span id='r324'>></span>
<span id='r325'>></span>
<span id='r326'>></span>
<span id='r327'>></span>
<span id='r328'>></span>
<span id='r329'>></span>
<span id='r330'>></span>
<span id='r331'>></span>
<span id='r332'>></span>
<span id='r333'>></span>
<span id='r334'>></span>
<span id='r335'>></span>
<span id='r336'>></span>
<span id='r337'>></span>
<span id='r338'>></span>
<span id='r339'>></span>
<span id='r340'>></span>
</div>
</div>
Fiddle Demo
A note of caution for clientX / clientY and document.elementFromPoint – clientX is normally the distance to the viewport, excluding the scroll offset. elementFromPoint uses the same position reference. Chrome on Android (version 50.0.2661.89) positions appear to include the scroll offset. The Internet browser on Android and Safari on iOS appear to use the correct reference point. Desktop browsers (Chrome, Firefox, IE9 & up, Edge, and Safari) appear to also use the correct reference point.
If you’re just using clientX and elementFromPoint, there shouldn’t be any issue as the same reference point is being used. I ran into trouble as I was adding the offset back in to position a new element. It worked fine until I zoomed the display on an Android phone and shifted the display towards the left. My new element was positioned correctly on most browsers, but not on Chrome on Android.
I have a repeating container with a few span elements. I would like to remove two, and re-arrange one of the elements as the example below. I started with something like this:
$('span.class5').insertBefore('span.class0');
This added each span.class5 found on page inside each repeating container, so that didn't work.. How do I do this best with jQuery?
HTML:
<div class="container">
<div class="group">
<span class="class0"></span>
<span class="class1"></span>
<span class="class2"></span>
<span class="class3"></span>
</div>
<div class="group">
<span class="class4"></span>
<span class="class5"></span>
<span class="class6"></span>
<span class="class7"></span>
<span class="class8"></span>
</div>
</div>
Rearrange to:
<div class="container">
<div class="group">
<span class="class0"></span>
<span class="class5"></span>
<span class="class1"></span>
<span class="class2"></span> = remove
<span class="class3"></span> = remove
</div>
<div class="group">
<span class="class4"></span>
<span class="class6"></span>
<span class="class7"></span>
<span class="class8"></span>
</div>
</div>
One solution possible :
( with jQuery)
// I would like to remove two
$('.class2 , .class3' , '.group').remove();
//This added each span.class5 found on page inside each repeating container
$('span.class5').each(function(){
var $el = $(this);
var $father = $el.parents('.container');
// if you don't want to use a class for the container
// decomment line under
//var $father = $el.parent().parent();
$el.insertAfter($father.find('.class0'))
});
span{
border : solid 1px #EEE;
display : inline-block;
padding : 3px;
margin : 3px;
}
.container{
border : solid 1px #CCC;
padding 3px;
margin : 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class="group">
<span class="class0">0</span>
<span class="class1">1</span>
<span class="class2">2</span>
<span class="class3">3</span>
</div>
<div class="group">
<span class="class4">4</span>
<span class="class5">5</span>
<span class="class6">6</span>
<span class="class7">7</span>
<span class="class8">8</span>
</div>
</div>
<div class='container'>
<div class="group">
<span class="class0">0</span>
<span class="class1">1</span>
<span class="class2">2</span>
<span class="class3">3</span>
</div>
<div class="group">
<span class="class4">4</span>
<span class="class5">5</span>
<span class="class6">6</span>
<span class="class7">7</span>
<span class="class8">8</span>
</div>
</div>
<div class='container'>
<div class="group">
<span class="class0">0</span>
<span class="class1">1</span>
<span class="class2">2</span>
<span class="class3">3</span>
</div>
<div class="group">
<span class="class4">4</span>
<span class="class5">5</span>
<span class="class6">6</span>
<span class="class7">7</span>
<span class="class8">8</span>
</div>
</div>
<div class='container'>
<div class="group">
<span class="class0">0</span>
<span class="class1">1</span>
<span class="class2">2</span>
<span class="class3">3</span>
</div>
<div class="group">
<span class="class4">4</span>
<span class="class5">5</span>
<span class="class6">6</span>
<span class="class7">7</span>
<span class="class8">8</span>
</div>
</div>
You could use the parent > child selector to restrict operations to a specific container:
function rearrange(num) {
$('.container' + num + ' > .group > .class2').remove();
$('.container' + num + ' > .group > .class3').remove();
$('.container' + num + ' > .group > .class5').insertBefore($('.container' + num + ' > .group > .class0'));
}
.group {
background-color: lightgray;
margin: 4px
}
.group span {
margin: 3px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1">
<div class="group">
<span class="class0">0</span>
<span class="class1">1</span>
<span class="class2">2</span>
<span class="class3">3</span>
</div>
<div class="group">
<span class="class4">4</span>
<span class="class5">5</span>
<span class="class6">6</span>
<span class="class7">7</span>
<span class="class8">8</span>
</div>
<button onclick="rearrange(1)">Rearrange</button>
</div>
<div class="container2">
<div class="group">
<span class="class0">0</span>
<span class="class1">1</span>
<span class="class2">2</span>
<span class="class3">3</span>
</div>
<div class="group">
<span class="class4">4</span>
<span class="class5">5</span>
<span class="class6">6</span>
<span class="class7">7</span>
<span class="class8">8</span>
</div>
<button onclick="rearrange(2)">Rearrange</button>
</div>
ok i have been working on this issue for a week now and i cant figure it out.
im working on a site built on angularjs and we load info from json files stored on the sever all this works but when the page loads for some reason one of the image tags always send off a 404 error but then it all loads fine
Example of error
GET http://localhost:3000/angular/::%20listp.titlePicture.urls[0].url[3].href%20%7C%20srcFill%20:%20%7Bwidth:447,height:351%7D%20:: 404 (Not Found) index.html:1
i have manually checked all 27 entries in the json file and titlePicture.urls[0].url[3].href is set for all of them
anyone have any ideas? the page can been seen here http://www.relaunch.bsf-immobilien.de/#/wohnen
this is the relevant ng-repeat code
<div class="col-md-4 col-ms-6 col-sm-4 col-xs-12" ng-repeat="listp in filteredtodos | unique:'id'">
<div class="panel panel-default relative" style="width: 100%; height:380px; padding-bottom: 15px; float: left; box-sizing: border-box;">
<div class="ribbon-heading ribbon-default inline absolute left margin-none">
<span ng-show="listp.xsitype == 'OfferApartmentBuy'">Wohnung zum Kaufen</span>
<span ng-show="listp.xsitype == 'OfferHouseBuy'">Haus zum Kaufen</span>
<span ng-show="listp.xsitype == 'OfferApartmentRent'">Wohnung zum Mieten</span>
<span ng-show="listp.xsitype == 'OfferHouseRent'">Haus zum Mieten</span>
<span ng-show="listp.xsitype == 'OfferShortTermAccommodation'">Wohnen auf Zeit</span>
</div>
<div class="cover hover overlay margin-none" style="max-height: 250px;">
<a href="#/wohnen/::listp.id::">
<img src=":: listp.titlePicture.urls[0].url[3].href | srcFill : {width:447,height:351} ::" alt="::listp.title::" class="img-responsive" style="width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto;">
</a>
<a href="#/wohnen/::listp.id::" class="overlay overlay-full overlay-bg-black overlay-hover" style="height: 143px;">
<span class="v-center">
<span class="btn btn-circle btn-white btn-lg"><i class="fa fa-eye"></i></span>
</span>
</a>
</div>
<div class="panel-body">
<h4 class="margin-v-0-5">::listp.title::</h4>
<p><span ng-show="listp.xsitype == 'OfferApartmentBuy'">Kaufpreis: </span>
<span ng-show="listp.xsitype == 'OfferApartmentRent'">Miete: </span>
<span ng-show="listp.xsitype == 'OfferHouseBuy'">Kaufpreis: </span>
<span ng-show="listp.xsitype == 'OfferHouseRent'">Miete: </span> ::listp.price.value | currency:'EUR' ::
<a href="#/wohnen/::listp.id::">
<button class="btn btn-primary btn-lg absolute bottom btn-circle right" style="margin-bottom:10px; margin-right:10px;"><i class="fa fa-arrow-right"></i></button>
</a>
</p>
</div>
</div>
</div>
try to use ng-src instead of src, moreover one-way binding :: doesn't need to be called twice in expression :
<img ng-src="::listp.titlePicture.urls[0].url[3].href" ... />
The issue seems to be with your URL:
<img src=":: listp.titlePicture.urls[0].url[3].href | srcFill : {width:447,height:351} ::" alt="::listp.title::" class="img-responsive" style="width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto;"></a>
It seems you really want to access the value of an array listp.titlePicture.urls[0].url[3].href right?
In that case better mark it as an angular Expression, as follows:
I have corrected it in the following code:
<div class="col-md-4 col-ms-6 col-sm-4 col-xs-12" ng-repeat="listp in filteredtodos | unique:'id'">
<div class="panel panel-default relative" style="width: 100%; height:380px; padding-bottom: 15px; float: left; box-sizing: border-box;">
<div class="ribbon-heading ribbon-default inline absolute left margin-none">
<span ng-show="listp.xsitype == 'OfferApartmentBuy'">Wohnung zum Kaufen</span>
<span ng-show="listp.xsitype == 'OfferHouseBuy'">Haus zum Kaufen</span>
<span ng-show="listp.xsitype == 'OfferApartmentRent'">Wohnung zum Mieten</span>
<span ng-show="listp.xsitype == 'OfferHouseRent'">Haus zum Mieten</span>
<span ng-show="listp.xsitype == 'OfferShortTermAccommodation'">Wohnen auf Zeit</span>
</div>
<div class="cover hover overlay margin-none" style="max-height: 250px;">
<a href="#/wohnen/::listp.id::">
<img src=":: {{listp.titlePicture.urls[0].url[3].href}} | srcFill : {width:447,height:351} ::" alt="::listp.title::" class="img-responsive" style="width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto;">
</a>
<a href="#/wohnen/::listp.id::" class="overlay overlay-full overlay-bg-black overlay-hover" style="height: 143px;">
<span class="v-center">
<span class="btn btn-circle btn-white btn-lg"><i class="fa fa-eye"></i></span>
</span>
</a>
</div>
<div class="panel-body">
<h4 class="margin-v-0-5">::listp.title::</h4>
<p><span ng-show="listp.xsitype == 'OfferApartmentBuy'">Kaufpreis: </span>
<span ng-show="listp.xsitype == 'OfferApartmentRent'">Miete: </span>
<span ng-show="listp.xsitype == 'OfferHouseBuy'">Kaufpreis: </span>
<span ng-show="listp.xsitype == 'OfferHouseRent'">Miete: </span> ::listp.price.value | currency:'EUR' ::
<a href="#/wohnen/::listp.id::">
<button class="btn btn-primary btn-lg absolute bottom btn-circle right" style="margin-bottom:10px; margin-right:10px;"><i class="fa fa-arrow-right"></i></button>
</a>
</p>
</div>
</div>
</div>
Hope this works fine for you..
I have the following code:
<span ng-switch="status">
<span ng-switch-when="NOT OK">
<span style="color: red;" ng-bind="status"></span>
</span>
<span ng-switch-when="OK">
<span style="color: green;" ng-bind="status"></span>
</span>
<span ng-switch-default>
<span ng-bind="status"></span>
</span>
</span>
There is any way to optimize this code? I think i have some repetition of ng-binding ...
Could use ng-class and set your colors in css rules
<span ng-bind="status"
ng-class="{'green-class': status=='OK', 'red-class': status=='NOT OK'}" ></span>
Or do similar using ng-style