So I am trying to edit an email format pulled from a database in a summernote div.
That is all working just fine. Except when I go to load the page this is all on, that pages takes the css styles of the style tags in the email. The following code I have is as follows:
<div class="tab-pane" id="emails">
<div class="form-group">
<label class="control-label">Default Email Template</label>
<?php echo form_textarea('email_template', $this->settings_m->get_setting('email_template'), 'class="form-control summernote"'); ?>
</div>
</div>
<script>
$(document).ready(function() {
$('.summernote').summernote();
});
</script>
How do I escape all tags within the email but still maintain the look of the email inside the summernote div? I want to do this so the email maintains it's appearance, as well as the page it sits on.
Related
I am trying to figure out how to loop my jQuery/Ajax script to load two WordPress posts based off of each WordPress post ID in a div tag, so the Ajax URL loads based upon the ID tags.
You can see my example below. I am using the WordPress News blog as an example of the feed.
https://jsfiddle.net/jdcool279/7L361ru0/17/
I figured out how to load one feed based upon the post-id within the tag, but I can't seem to figure out how to load two feeds via the div tag. To see an example of single feed, please uncomment the script tag within the fiddle. Also, would it be better to change "fetch_comp_content" id tag to a class instead of an id, since I will be needing to include it twice?
Load multiple posts by div post-id:
<div class="col-md-6">
<div class="container">
<div id="fetch_comp_content" post-id="6810"></div>
</div>
</div>
<div class="col-md-6">
<div class="container">
<div id="fetch_comp_content" post-id="6848"></div>
</div>
</div>
Instead of loading 1 post via the script tag:
<script title="true" id="comp_cont_init" post-id="6810"></script>
I would also like to note that the script tag actually loads the script to run the feed. I did not include that in my fiddle, as I wanted to show the JavaScript code.
Any help on this would be much appreciated!
Thank you.
Two quick issues:
You can't repeat Id's in a page, they are unique by definition. use
class instead
You aren't making the requests in the each loop where you have access to specific element instances and the specific post id's from elements
Here's a minimalistic version of what you are trying to accomplish. All I have rendered is the title for the posts.
Note it is better to use data- attributes also
$('.fetch_comp_content').each(function() {
var $el = $(this),
postId = $el.data('post-id'),
urlstring = 'https://wordpress.org/news/wp-json/wp/v2/posts/' + postId;
$.getJSON(urlstring).then(function(data) {
var title = data.title.rendered
$el.append('<h3>' + title + '</h3>');
}).catch(function() {
console.log('Bad request')
})
});
.fetch_comp_content { border:2px solid #ccc; margin:10px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="container">
<div class="fetch_comp_content" data-post-id="6810"></div>
</div>
</div>
<div class="col-md-6">
<div class="container">
<div class="fetch_comp_content" data-post-id="6846"></div>
</div>
</div>
I have single HTML form, but structured as multiple tab using display:none option.
And each tab has few section which will display block / none based on previous tab section.
I want to add print button in confirmation thank page which appear after form submission, that should print whole form (only with fields filled with value) in a same structure like HTML page.
<form>
<div id="section1">
<input type="text" id="name1">
<input type="text" id="name2" style="display: block;">
</div>
<div id="section2" style="display: block;">
</div>
<input type="submit">
</form>
I tried to use window print function, but that works only for current visible section.
This code was wrote long back without having this requirement in mind. so can some one suggestion some solution for this?
You would use a print.css file. In the print.css file you would set all your tabs to display:block; . This way:
In your HTML or view file
<!--MAKE SURE THIS IS LAST CSS FILE REFERENCE IN YOUR HTML <head>-->
<link rel="stylesheet" media="print" href="print.css">
In your print.css file
#section1, #section2{display:block}
OR
You can do a #media query in your main CSS file that will handle the print as well.
#section1,#section2{display:none;}
/*MEDIA PRINT TO HANDLE PRINT TABS. MUST GO AT END OF CSS FILE.*/
#media print {
#section1,#section2{display:block;}
}
Check out the JSFiddle.
https://jsfiddle.net/8u3nhzoL/1/
I am quite new to creating websites with WordPress so I might ask a question which is quite straightforward but I could not find any suitable tutorials/answers to guide me.
I want to create dynamic text elements which I can edit within Wordpress. I have created a full website in HTML, CSS, and Javascript and I converted it to Wordpress pages.
Let's have a look for example to my about page:
about.php
<?php
get_header();
// Template Name: About
?>
<div class="row fullwidth">
<div class="col-md-6 col-sm-6 about-section-right">
<h2>Titel example</h2>
<p>A very long text.....</p>
<p>Another very long text</p>
Contact <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
</div>
</div>
<?php
get_footer();
?>
Now I want to be able to edit the title (<h2>) and text (<p>) and hyperlink (<a>) text in Wordpress. So that I can change the title etc.
I tried to use Advance custom fields by calling: the_field() or by using a shortcode but the text did not show up on my page.
So my question is: is Advanced custom fields the best way to do this because I can not make it work and are there other ways of achieving editing text within Wordpress.
For pages just use the WordPress loop: https://codex.wordpress.org/The_Loop
<?php
get_header();
if(have_posts()):
while(have_posts()): the_post();
?>
<div class="row fullwidth">
<div class="col-md-6 col-sm-6 about-section-right">
<?php the_content(); ?>
</div>
</div>
<?php
endwhile;
endif;
get_footer();
?>
You create a page "About" in the backend in "Pages" and here you go. All contents within the_content(); are created by the WYSIWYG editor of the page.
Custom fields are for adding any custom or specific information to a post or page.
Most probably you do not need an extra template file for your about page and you can use a page.php file for all pages.
You can conditionally include data depending on custom fields and/or the page you are on.
Read more about custom fields here:
https://codex.wordpress.org/Custom_Fields
... and about conditional tags here:
https://codex.wordpress.org/Conditional_Tags
It will help you understanding it.
I'm implementing a simple jQuery script on a website that loads content from one section of a webpage into the 'display container' on the same webpage.
The content i'm loading is multiple div's which are all wrapped in an outer <div> which has been hidden from view.
I have the display container div and several links the use can click on. Each time they click a link, the appropriate matched content is loaded in to the display container.
My jQuery.
$(".Prod-Link-2").click(function(e){
e.preventDefault();
$("#ITARGET").empty();
$("#ITARGET").prepend('<img id="theImg" src="http://sensing-precision.com/wp-content/uploads/2015/12/page-loader.gif" />');
$("#ITARGET").load($(this).attr('href'));
});
Menu HTML
<div class="MPD">
<div class="Option">
<a class="Prod-Link-2" id ="DEF" href ="/electricalelectronic-products/alf150 #specTable" ><p>SPECIFICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #COMPARE" ><p>ALF150 v ALF150+</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #FEAT" ><p>APPLICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #ACCESSORY" ><p>ACCESSORIES</p></a>
</div>
</div>
The Target div
<div class="Info-Target" id="ITARGET">
</div>
So my problem is this all works except one of the links.
My hidden div has 4 content divs and 2 tables inside which all have their own IDs. SPECIFICATIONS grabs the #specTable, APPLICATIONS grabs the #FEAT div etc etc.. ACCESSORIES will not load the #ACCESSORY div at all and I don't know why. The script initializes and the page loader gif is displayed, but then instead of displaying the content I'm trying to load.. it displays nothing.
The hidden area format
<div style="display: none;">
<div id ="COMPARE"> some content </div>
<table id="specTable"> some content </div>
<div id ="ACCESSORY"> some content </div>
etc ....
</div>
For test purposes
<div id="ACCESSORY">
<p> This is the accessory div </p>
</div>
No matter what I change the name to in the ID tag and the links href attr, it will not load (I even tried making a new div with a different name and moving the div up to top of the hidden content area thinking it was maybe a loading issue), but if I change the links href attr to one of the tables or a different div such as #FEAT or #specTable.. it loads that fine.
My gut feeling is that there is some qwirk with jQuery and .load() that i'm unaware of.
This problem may be CSS related. I've just taken a look at a couple of products, and wherever the content includes lists, the display appears blank because of extremely excessive white-space.
This CSS rule seems to be the culprit:
.Features li:before { content: url(#)!important; }
I have a banner in a div and I like to place it on home page which automatically reflects on rest of the pages?? Is it possible ?? without placing the code on the each page specifically ??.
Any help would be appreciate :)
If you're using PHP, you can write the whole banner in html, then save it as .php (e.g. banner.php). Then somewhere before the content of each of your pages, use PHP's include
keyword
For each of your page you can write it this way:
<body>
<div id='banner'>
<?php include "/path/to/banner.php"; ?>
</div>
<div id='content'>
<!-- Main content here -->
</div>
</body>
Either this can happen with php as #javiniar-leonard recommends, or you can use css.
In every page the basic structure is the same I guess. So target the div and place the div as background:
.main{
background:url("../your_banner_url.jpg");
}