I have a form currently with a text area.
However, I want it to have rich-text formatting (bold, bullet points etc..) and for that, I have found Quill, which is amazing.
I'm not sure how to get the contents of div id=editor and save that to the Django function, because it won't be part of the post, will it?
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<!-- Create the editor container -->
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
var quill = new Quill('#editor', {
theme: 'snow'
});
</script>
I have just started using Zurb Foundation (SASS) to create responsive emails. I followed this tutorial to create a test email. As seen in the tutorial, when viewing the test email in the browser it is responsive and looks beautiful.
The standard boiler plate I use for the test email:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="{{root}}css/app.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>{{subject}}</title>
<!-- <style> -->
</head>
<body>
<span class="preheader">{{description}}</span>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
{{> body}}
</center>
</td>
</tr>
</table>
<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> </div>
</body>
</html>
The body of the test email:
---
layout: index-layout
subject: My Email Templates
---
<container>
<row class="gray collapse">
<columns>
<center><img src="http://unsplash.it/800/200"></center>
</columns>
</row>
<row class="gray">
<columns>
<h2 class="text-center">Responsive columns below</h2>
</columns>
</row>
<row class="gray">
<columns small="12" large="4">
<p>Column 1</p>
</columns small="12" large="4">
<columns>
<p>Column 2</p>
</columns small="12" large="4">
<columns>
<p>Column 3</p>
</columns>
</row>
</container>
This is what the resulting source looks like taken from "view source" in Chrome:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/app.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>My Email Templates</title>
<!-- <style> -->
</head>
<body><script id="__bs_script__">//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.23.6'><\/script>".replace("HOST", location.hostname));
//]]></script>
<span class="preheader"></span>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center data-parsed="">
<table align="center" class="container float-center"><tbody><tr><td>
<table class="row gray collapse"><tbody><tr>
<th class="small-12 large-12 columns first last"><table><tr><th>
<center data-parsed=""><img src="http://unsplash.it/800/200" align="center" class="float-center"></center>
</th>
<th class="expander"></th></tr></table></th>
</tr></tbody></table>
<table class="row gray"><tbody><tr>
<th class="small-12 large-12 columns first last"><table><tr><th>
<h2 class="text-center">Responsive columns below</h2>
</th>
<th class="expander"></th></tr></table></th>
</tr></tbody></table>
<table class="row gray"><tbody><tr>
<th class="small-12 large-4 columns first"><table><tr><th>
<p>Column 1</p>
</th></tr></table></th>
<th class="small-12 large-4 columns"><table><tr><th>
<p>Column 2</p>
</th></tr></table></th>
<th class="small-12 large-4 columns last"><table><tr><th>
<p>Column 3</p>
</th></tr></table></th>
</tr></tbody></table>
</td></tr></tbody></table>
</center>
</td>
</tr>
</table>
<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> </div>
</body>
</html>
I sent the test email to myself using gmail to check it. This was done by copying the source shown above and pasting it using "Insert HTML" through the html extension for gmail in chrome. The result was horrible - no responsiveness and it looked ugly.
How am I supposed to make use of the test email that I have created? Is it even the source from "view source" in Chrome that I should send in an email? Is it even possible to send the test email over gmail, or do I have to use e.g., mailchimp or sendgrid?
Putsmail will be your best bet for quickly testing a single template like this. You can just paste your complied HTML in and add your gmail address (or any others)
The SASS version of Zurb Foundation for Email 2.0 is controlled using terminal emulator. I am assuming you have already installed Zurb using one. The thing you are missing is a few commands.
To start, you use the terminal to navigate to the directory where you installed Zurb. The command is npm start or foundation watch. This will start Zurb running in a mode where you can see your edits before it runs a command to inline the code.
To inline the code, type foundation build or npm run build. This will give you an email which has the necessary css code inline where needed to produce the final email.
Zurb Commands
A few other Zurb commands you might find useful are:
npm install --global foundation-cli - (Install npm)
foundation new --framework emails - (a new installation of zurb)
npm start - (start the application)
foundation watch - (start the application)
foundation build - (run an inliner for the appropriate css)
npm run build - (run an inliner for the appropriate css)
npm cache clean - (clear the cache)
npm update - (install latest updates)
If none of this makes sense, please visit one of the following for better tutorials to hopefully get you up to speed on how Zurb works. It's complicated, but it makes great emails.
More Information
https://foundation.zurb.com/emails/docs/sass-guide.html
https://foundation.zurb.com/emails/docs/css-guide.html
Good luck.
I am using Zurb Foundation 5.5.2 and trying to get the range slider to work like on the Foundation web site documentation page for range sliders. The desired functionality is that you click on any location on the bar, and the handle advances to that location. On the Foundation web site kitchen sink page, clicking on the range slider bar does nothing. On this codepen that I use the most basic range slider code, you also cannot click on the bar and get the handle to advance. How do I get this to work?
Here is the Codepen code:
<div class="range-slider" data-slider>
<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
<input type="hidden">
</div>
Foundation v5.x serie seems not trigger mousemove event when using slider.
Digging into foudantion issues on github I found this:
slider: add support for changing by clicking on the slider without having started to drag from the handle
It strikes me that this feature is only available for future versions of Foundation library such as v5.5.3 or v5.6 (see milestones).
But you can use that rigth now, just copy and past o raw code from github:
https://github.com/zurb/foundation/blob/master/js/foundation/foundation.js
https://github.com/zurb/foundation/blob/master/js/foundation/foundation.slider.js
Just click on "raw" button and save to the local storage.
So it should be work like this:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row">
<div class="small-10 medium-11 columns">
<!-- SLIDER START -->
<div class="range-slider" data-slider data-options="display_selector: #sliderOutput3;trigger_input_change: true">
<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
</div>
<!-- SLIDER END -->
</div>
<div class="small-2 medium-1 columns">
<span id="sliderOutput3"></span>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Foundation updated -->
<script src="https://raw.githubusercontent.com/zurb/foundation/master/js/foundation/foundation.js"></script>
<script src="https://raw.githubusercontent.com/zurb/foundation/master/js/foundation/foundation.slider.js"></script>
<script>$(document).foundation();</script>
</body>
</html>
EDIT : another solution Updating ui:defined form content from Master template (JSF & Primefaces)
In the first place, sorry for my english, I am one of these damn mono laguage french.
I have this classic error : javax.faces.FacesException: Cannot find component with identifier ":formWaitingList" referenced from "formInscription:validerButton".
I know why this is happening but I don't know how to fix it.
I have a connexion form in the footer. I want to update a commandButton rendered in the page rankMe.xhtml. This page define the ui:composition "content" of the template.xhtml.
When I am on the page with the commandbutton i have no error and the rendering work perfectly. But when i am on another page like index.xhtml (whitch define the content of the template.xhtml too), Glassfish throw this exception, and I guess it is totaly standard cause the other content (rankMe.xhtml) is not load into the actual view.
How can I avoid this exception ? I could duplicate my commandbutton in all page and hide if the user is not on the actual rankMe.xhtml page but it's not a clean way too me.
Thanks
Here the code :
template.xhtml :
<h:body>
<ui:insert name="content" >
</ui:insert>
<ui:insert name="footer" >
<ui:include src="../template/footer.xhtml"></ui:include>
</ui:insert>
</h:body>
footer.xhtml :
<h:body>
<h:form id="formInscription">
<p:commandButton id="validerButton" update=":formWaitingList" ajax="true"/>
</h:form>
</h:body>
index.xhtml:
<h:body>
<ui:composition template="/template/template.xhtml">
<ui:define name="content">
Lorem ipsum ...
</ui:define>
</ui:composition>
</h:body>
rankMe.xhtml :
<h:body>
<ui:composition template="/template/template.xhtml">
<ui:define id="rankMe" name="content">
<h:form id="formWaitingList">
<h:commandButton id="Join"
rendered="#{connexion.connected}"
value="Join"/>
</h:form>
</ui:define>
</ui:composition>
</h:body>
Two very simple solutions come to mind:
One solution would be to wrap your content part in an p:outputPanel and update it instead of your formWaitingList:
<p:outputPanel id="globalPanel>
<ui:define name="content">
Lorem ipsum ...
</ui:define>
</p:outputPanel>
Second solution would be to duplicate your p:commandButton just two times in the same footer.xhtml with different rendered values:
<p:commandButton id="validerButton" update=":formWaitingList" ajax="true" rendered="#{conditionIfYouAreInTheRankMeView}"/>
<p:commandButton id="validerButtonBis" update="otherThingYouWantToUpdateOrEvenNoUpdate" ajax="true" rendered="#{conditionIfYouAreNotInTheRankMeView}"/>
Let's say, I have HTML code like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
This is content.
</body>
</html>
And I want to add a <noscript> tag there. Which means, if the JavaScript disabled, it will show as a blank page.
And only when JavaScript is disabled, it will show "This is content text".
Please give me some examples to achieve. Thanks.
An alternative to a JS approach as suggested by rahul is to display a div in the <noscript> element, covering the entire page:
<noscript>
<div style="position: fixed; top: 0px; left: 0px; z-index: 30000000;
height: 100%; width: 100%; background-color: #FFFFFF">
<p style="margin-left: 10px">JavaScript is not enabled.</p>
</div>
</noscript>
Wrap all you contents inside a main div with display none and in the onload function change the display to block.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="divMain" style="display: none">
This is content.
</div>
<noscript>
JS not enabled
</noscript>
<script>
document.getElementById("divMain").style.display = "block";
</script>
</body>
</html>
The noscript tag works the other way around. To make the content visible when script is enabled, put it in an element that is hidden, and show it using script:
<div id="hasScript" style="display:none">
This is content
</div>
<script>document.getElementById('hasScript').style.display='';</script>
It's a little odd.
You don't even need a 'noscript' for this. You can just have a blank first page, who's only content is a javascript of the form:
document.location = '/realpage.htm';
And then call that OnLoad, with jQuery, or whatever. This will mean if the client doesn't have scripting, they don't go anywhere, hence the page remains blank.
Edit:
Example, as requested:
<html>
<body onload="document.location = 'realpage.html';">
</body>
</html>
This SHOULD really work!
hide a content when javascript is not enabled
Note: you can replace <noscript> with <noembed> or <noframes>, too.
<!-- Normal page content should be here: -->
Content
<!-- Normal page content should be here: -->
<noscript>
<div style="position: absolute; right: 0; bottom: 0;
display: none; visibility: hidden">
</noscript>
<-- Content that should hide begin -->
**Don't Show! Content**
<-- Content that should hide begin -->
<noscript>
</div>
</noscript>
<!-- Normal page content should be here: -->
Content
<!-- Normal page content should be here: -->
Both the style tag and the meta refresh DO work inside noscript:
<noscript>
<style>body { display:none; }</style>
<meta http-equiv="refresh" content="0; url=blankpage.html">
</noscript>
The first line will display the current page but empty.
The Second line will redirect to blankpage.html
I had a very problem:
I wanted to show the full site when javascript was enabled. However, if javascript were disabled, not only did I want to show a "this site requires javascript..." message, but I still wanted to display the header & footer (which reside in header.inc and footer.inc, called by each content page) of my site (to look nice). In other words, I only wanted to replace the main content area of my site. Here's my html/css solution:
Header.inc file (location not important):
<noscript>
<style>
.hideNoJavascript {
display: none;
}
#noJavascriptWarning {
display: block !important;
}
</style>
</noscript>
Header file (bottom):
<div id="noJavascriptWarning">The Ignite site requires Javascript to be enabled!</div>
<div class="container-fluid hideNoJavascript">
<!-- regular .php content here -->
CSS file:
#noJavascriptWarning {
color: #ed1c24;
font-size: 3em;
display: none; /* this attribute will be overridden as necessary in header.inc */
text-align: center;
max-width: 70%;
margin: 100px auto;
}
In summary, my "javascript required" message is hidden per my default CSS rule. However, when the browser parses the tag, it overrides the default rule, resulting in main content being hidden and (everything except header/footer) and the javascript message being displayed. Works perfectly...for my needs! Hopefully someone else finds this useful :-)
Here are two screenshots with javascript enabled/disabled:
You could do something like
<body id="thebody">
this is content.
<script>
document.getElementById('thebody').innerHTML = "<p>content when JS is enabled!</p>";
</script>
</body>
I know this is an old inquire, but somehow none of this things worked in one of the PHP page I created. Below is what worked, the important thing was the comment tag between the noscript tag:
<noscript>
<center><div style="font-size:300%;position: absolute;top: 40%;left: 50%;margin-right: -50%;transform: translate(-50%, -50%)">
Scripts are Required...
<meta http-equiv='refresh' content="1;url=http://flstate.us/NoScript"/>
</div> </center>
<!--
</noscript>
<html>
<body>
Page HERE...
</body>
</html>
<noscript> --> </noscript>