The following function will replace certain part of the text
function q(text) {
text = text.replace(/\[quote=?(.*?)\]/gi,"<div class=\"rq\"><p> $1</p><span>")
text = text.replace(/\[\/quote\]/gi,"</span></div>");
return text;
}
I'm looking for avoid the replacement of the [quote=(.*)] and [/quote] if those will be inside a certain class div (class=haha AVOID)
Example :
<div class="full">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod
[quote=ok]I should be replace[/quote] Lorem ipsum
dolor sit amet, consectetur adipiscing elit, sed do eiusmod
<div class="haha"> [quote=no]I shall not be replace[/quote]
bblablablablablabla
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
blablabla (other [quote] inside or not inside a div=haha may follow...)
...
</div>
I tried to put a mask for the content of your class="haha" div. After the masking the real quote replacement happens. At the end I have unmasked it again.
Lets check my version of it. I have put the entire HTML in a Javascript variable. I also have modified your function a bit to make it work.
var text = '<div class="full">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod[quote=ok]I should be replace[/quote] Lorem ipsumdolor sit amet, consectetur adipiscing elit, sed do eiusmod<div class="hahaa"> [quote=no]I shall not be replace[/quote]bblablablablablabla</div>Lorem ipsum dolor<div class="haha"> [quote=no]I shall not be replace[/quote]bbla</div>it amet, consectetur adipiscing elit, sed do eiusmodblablabla (other [quote] inside or not inside a div=haha may follow...)...</div>';
var resultText = q(text);
console.log(resultText);
function q(text) {
var matches = text.match(/<div class="haha">([^<]*)<\/div>/gi);
text = text.replace(/<div class="haha">([^<]*)<\/div>/gi, "#######");
text = text.replace(/\[quote=?(.*?)\]/gi,"<div class=\"rq\"><p> $1</p><span>");
text = text.replace(/\[quote=?(.*?)\]/gi,"<div class=\"rq\"><p> $1</p><span>");
text = text.replace(/\[\/quote\]/gi,"</span></div>");
for(i in matches){
text = text.replace(/#######/i, matches[i]);
}
return text;
}
Related
I have been using materialize CSS for buttons on some cards in my application and wanted to create a button that when clicked it adds the user's favorite item to another page that I have in HTML called Favorites.html. I have the index.html file which serves as the homepage, where the cards are placed. The user can pick a card and favorite it and have it stored to the Favorites.html page. I was wondering how to do that using Materialize and JS. We are also using Firebase to serve as the backend and relying on JS version- 9 in the FireStore.
Here is an example of the card setup for the on the index.html page with the button being called favorite-btn.
I have tried putting a link into the "a href" to the favorites.html page and it did take me to the favorites.html page but it did not add it to the favorites.html page that I had set up.
index.html
<div class = "recipe-img">
<img src = "coffee.jpg" alt = "a cup of coffee.">
<span class = "category-name">Mine</span>
</div>
<div class = "recipe-content">
<i class="material-icons">delete_outline</i>
<h2>Americano<a href="#" class="right favorite-btn btn-floating red pulse">
<i class="material-icons">favorite</i></a></h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.Lorem, ipsum dolor sit amet consectetur adipisicing elit.Lorem, ip``sum dolor sit amet consectetur adipisicing elit.Lorem, ipsum dolor sit amet consectetur adipisicing elit.
orem, ipsum dolor sit amet consectetur adipisicing elit.orem, ipsum dolor sit amet consectetur adipisicing elit. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
I want to make my js program read from a txt file whose location is hardcoded. Every time the txt file is update, I want to store the new data as a new variable.
For example, when the txt file changes from blank to the following:
Lorem ipsum dolor sit amet
it will store newInfo = "Lorem ipsum dolor sit amet"
Then if the txt file is updated to the following:
Lorem ipsum dolor sit amet
consectetur adipiscing elit
It will store newInfo = "consectetur adipiscing elit"
I am trying to reinitialize owl carousel after a successful ajax call. The ajax call will change the data but the view should stay the same.I am having an issue where the view carousel structure will not reinitialize. I don't know where I did mistake.
Ajax Request
$(document).on('click', '.category_list', function() {
var category_id = $(this).attr('data-id');
var _token = $('#_token').val();
var param = 'category_id=' + category_id + '&_token=' + _token;
$.ajax({
type: "POST",
datatype: "json",
url: "/master/sub_category",
data: param,
success: function(result) {
$('#test').html(result);
var owl = $(".owl-carousel");
owl.owlCarousel({
items: 4,
navigation: true
});
}
});
});
Controller Function
public function getImg() {
$post_data = Request::all();
$sub_img = $this->imgModel->getImgList($post_data);
$sub_img_html = '';
foreach ($sub_img ['data'] as $data_img ) {
$img = '/img/sub_category/'.$data_img ['img'];
$sub_img_html .= '<div class="item">';
$sub_img_html .= '<img src="'.$img.'" />';
$sub_img_html .= '</div>';
}
echo $sub_img_html;
}
View
<div id="demo">
<div id="test" class="owl-carousel">
<?php
if (!empty($img_category)) {
foreach ($img_category as $imgcategory){
?>
<div class="item">
<img src='/img/sub_category/<?= imgcategory['subcategory_img'] ?>'/></div>
<?php
}
}
?>
</div>
</div>
As per your code I make changes please apply this I hope this code work full.
success: function(result) {
$('#demo').html('<div id="testing" class="owl-carousel"></div>');
for(var i=0;i<result.length;i++){
$(".owl-carousel").append('<div class="item"><img src="/img/sub_category/'+result[i].subcategory_img+'" /></div>');
};
var owl = $("#testing");
owl.owlCarousel({
items: 4,
navigation: true
});
I believe you will need to destroy and re-initalize the carousel. There is a destroy method you can call;
https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L1391
or there is a refresh method;
https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L608
or there is an update method;
https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L569
I believe these can all be called;
$('.owl-gallery').owlCarousel('refresh');
Might be worth a try.
This was my approach and it works with the version 2.2.1 :
$.getJSON('testimonials.json', function(data) {
var content = "";
for(var i in data["items"]){
var text = data["items"][i].text;
var name = data["items"][i].name;
var position = data["items"][i].position;
content += text + name + position
}
// set the content inside the element
$("#test_slider").html(content);
// Now we can call the owlCarousel
$('#test_slider').owlCarousel({
dots: false,
nav: true,
loop: true,
margin:30,
smartSpeed: 700,
items:1,
autoplay:true,
});
});
As for testimonials.json looks like this :
{
"items" :
[
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
"name": "Maurice Pittmansss",
"position": "CEO of ABS Ltd.1"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
"name": "Maurice Pittmanggg",
"position": "CEO of ABS Ltd.2"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
"name": "Maurice Pittmannnn",
"position": "CEO of ABS Ltd3."
}
]
}
Nothing above worked for me only this worked :
$('.owl-gallery').data('owlCarousel').destroy();
$('.owl-gallery').owlCarousel(options);
I am trying to reinitialize owl carousel after a successful ajax call. The ajax call will change the data but the view should stay the same.I am having an issue where the view carousel structure will not reinitialize. I don't know where I did mistake.
Ajax Request
$(document).on('click', '.category_list', function() {
var category_id = $(this).attr('data-id');
var _token = $('#_token').val();
var param = 'category_id=' + category_id + '&_token=' + _token;
$.ajax({
type: "POST",
datatype: "json",
url: "/master/sub_category",
data: param,
success: function(result) {
$('#test').html(result);
var owl = $(".owl-carousel");
owl.owlCarousel({
items: 4,
navigation: true
});
}
});
});
Controller Function
public function getImg() {
$post_data = Request::all();
$sub_img = $this->imgModel->getImgList($post_data);
$sub_img_html = '';
foreach ($sub_img ['data'] as $data_img ) {
$img = '/img/sub_category/'.$data_img ['img'];
$sub_img_html .= '<div class="item">';
$sub_img_html .= '<img src="'.$img.'" />';
$sub_img_html .= '</div>';
}
echo $sub_img_html;
}
View
<div id="demo">
<div id="test" class="owl-carousel">
<?php
if (!empty($img_category)) {
foreach ($img_category as $imgcategory){
?>
<div class="item">
<img src='/img/sub_category/<?= imgcategory['subcategory_img'] ?>'/></div>
<?php
}
}
?>
</div>
</div>
As per your code I make changes please apply this I hope this code work full.
success: function(result) {
$('#demo').html('<div id="testing" class="owl-carousel"></div>');
for(var i=0;i<result.length;i++){
$(".owl-carousel").append('<div class="item"><img src="/img/sub_category/'+result[i].subcategory_img+'" /></div>');
};
var owl = $("#testing");
owl.owlCarousel({
items: 4,
navigation: true
});
I believe you will need to destroy and re-initalize the carousel. There is a destroy method you can call;
https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L1391
or there is a refresh method;
https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L608
or there is an update method;
https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L569
I believe these can all be called;
$('.owl-gallery').owlCarousel('refresh');
Might be worth a try.
This was my approach and it works with the version 2.2.1 :
$.getJSON('testimonials.json', function(data) {
var content = "";
for(var i in data["items"]){
var text = data["items"][i].text;
var name = data["items"][i].name;
var position = data["items"][i].position;
content += text + name + position
}
// set the content inside the element
$("#test_slider").html(content);
// Now we can call the owlCarousel
$('#test_slider').owlCarousel({
dots: false,
nav: true,
loop: true,
margin:30,
smartSpeed: 700,
items:1,
autoplay:true,
});
});
As for testimonials.json looks like this :
{
"items" :
[
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
"name": "Maurice Pittmansss",
"position": "CEO of ABS Ltd.1"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
"name": "Maurice Pittmanggg",
"position": "CEO of ABS Ltd.2"
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem Ipsum has been the Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text of the printing.",
"name": "Maurice Pittmannnn",
"position": "CEO of ABS Ltd3."
}
]
}
Nothing above worked for me only this worked :
$('.owl-gallery').data('owlCarousel').destroy();
$('.owl-gallery').owlCarousel(options);
I was wondering how I can have a text input element on the parent page which searches the content of an Iframe within the parent page.
The goal is to have the input text processed and to highlight the matches within the iframe.
Any suggested approaches or references would be appreciated.
Thanks...
EDIT: I understand the limitations on the same origin policy, The parent page rendering the iframe and javascript to search, as well as the iframe on the parent page would be of the same domain origin.
HTML:
<input type="text" id="searchfor"/>
<iframe src="http://www.page.com" id="search">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci futurum.</iframe>
JAVASCRIPT:
$('#searchfor').keyup(function(){
var page = $('iframe[id="search"]').contents().find("html").html();
var pageText = page.text().replace("<span>","").replace("</span>");
var searchedText = $('#searchfor').val();
console.log(searchedText);
var theRegEx = new RegExp("("+searchedText+")", "igm");
var newHtml = pageText.replace(theRegEx ,"<span>$1</span>");
page.html(newHtml);
});