I am trying to make an editable box (kind of a richTextBox) using html5 (contenteditable="true") and jquery. I need to find out position of each element inside the editable div so that I can insert a page break like microsoft word does.
Here is the page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Context Menu Plugin Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#divEdit").keyup(function(){
$.each($("#divEdit").find("*"), function(i,item){
alert(item.position());
});
});
});
</script>
</head>
<body>
<h1>jQuery Context Menu Plugin and KendoUI Demo</h1>
<div style="width:740px;height:440px" contenteditable="true" id = "divEdit">
<p>
<img src="http://www.kendoui.com/Image/kendo-logo.png" alt="Editor for ASP.NET MVC logo" style="display:block;margin-left:auto;margin-right:auto;" />
</p>
<p>
Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows
accessibility standards and provides API for content manipulation.
</p>
<p id="para">Features include:</p>
<ul>
<li>Text formatting & alignment</li>
<li>Bulleted and numbered lists</li>
<li>Hyperlink and image dialogs</li>
<li>Cross-browser support</li>
<li>Identical HTML output across browsers</li>
<li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>
</ul>
<p>
Read more details or send us your
feedback!
</p>
</div>
</body>
The problem is that alert(item.position()) is not fetching anything. The error that comes in firefox developer toolbar is 'item.position is not a function'.
My guess is that it has to do something with the type of each element in $("#divEdit").find("*") as all the elements are different.
Any help would be appreciated.
Thanks
You need to get the jQuery object out of item, as position() is a jQuery method, hence the complain about position() is not a function
$(item).position() // instead of item.position()
Or even more concise:
$.each($("#divEdit").find("*"), function(i,item){
alert(item.position());
}
change to
$('#divEdit').find('*').each(function() {
alert($(this).position());
})
Change this line
alert(item.position());
to
alert($(item).position());
Related
I am testing Material Components Web from their recommended CDN & some minimal simple custom Vanilla Javascript to get it work properly.
For example, I can follow the single line list example showed here like this:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<ul class="mdc-list">
<li class="mdc-list-item" tabindex="0">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Single-line item</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Single-line item</span>
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">Single-line item</span>
</li>
</ul>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>
mdc.list.MDCList.attachTo(document.querySelector('.mdc-list'));
</script>
</body>
</html>
Everything works fine except for the Css styling. No height: 48px is set to any of the list items, so all of them appear horribly collapsed, with no paddings at all.
Using the the Chrome Developer Inspector in the online example on their website, I see that height should be 48px height for every single list item.
Why are there missing styles in the official CDN Css?
NOTE: Things I am NOT asking for
I am not using any Js framework: Vue, Angular, React, Web dev server... just plain vanilla Js.
I am not asking how to add custom Css to add that specific missing value (I know how to do it, I just want to avoid doing it, since it should come already with the library). I just showed a single simple example of some missing attribute. I wonder if I am missing some other import or something.
I am already using the deprecated version of lists in production, that work fine, but I am trying here to update to the new recommended way of defining lists.
First of all, I'd recommend using docs on github repo - https://github.com/material-components/material-components-web/tree/master/packages/mdc-list:
List is currently being updated to better match the Material spec. As a result, there are two versions of List available: the deprecated old version and the new, future-proof version.
... there are differences in class names and DOM structure: the old version uses class names with a mdc-deprecated-list prefix (e.g., mdc-deprecated-list-item) whereas the new version uses the typical mdc-list prefix (e.g., mdc-list-item).
The example you referenced is related to deprecated version. You either need to add deprecated to class names, or update it according to the new docs.
Here is updated code which uses the new List version:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<ul class="mdc-list">
<li class="mdc-list-item mdc-list-item--non-interactive mdc-list-item--with-one-line" tabindex="0">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__content">Single-line item</span>
</li>
<li class="mdc-list-item mdc-list-item--non-interactive mdc-list-item--with-one-line">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__content">Single-line item</span>
</li>
<li class="mdc-list-item mdc-list-item--non-interactive mdc-list-item--with-one-line">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__content">Single-line item</span>
</li>
</ul>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>
mdc.list.MDCList.attachTo(document.querySelector('.mdc-deprecated-list'));
</script>
</body>
</html>
I would just love to try creating an AMP HTML website. However, what I cannot miss is our search function.
From what I understand so far, a search (input field, JavaScript handler) would not be possible with AMP HTML.
Is there any way to provide a neat search functionality within AMP HTML? Maybe using the amp-list component?
Forms are supported in AMP via the amp-form component. Using amp-form, you can embed a search form into your AMPs and render the search results into a new AMP on your server.
This is a search form in AMP:
<html>
<head>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<!-- ... AMP boilerplate ... -->
</head>
<body>
<form method="get" action="https://example.com/search" target="_top">
<input name="search" type="search">
<input type="submit" value="">
</form>
</body>
</html>
https://example.com/search can then render to an AMP page showing the search results:
<html>
<head>
<!-- ... AMP boilerplate ... -->
</head>
<body>
<h1>Results</h1>
<ul>
<li>Result 1</li>
<li>Result 2</li>
</ul>
</body>
</html>
You can find a working sample for a search implemented with AMP here.
Form support will come eventually. Please file a on Github with your use case: https://github.com/ampproject/amphtml/issues/new
There is a placeholder issue on Github to capture intent and use cases for Forms, see: https://github.com/ampproject/amphtml/issues/1286
How would I output the title of an entry in ExpressionEngine and display it in the browser's title bar?
Here is the content of my page's header:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Site</title>
<link rel="stylesheet" href="{stylesheet=site/site_css}" type="text/css" media="screen" />
</head>
What I need is for each page to display the title of the entry in my browser's title bar — how can I achieve that?
Part of UPDATED Code:
Here is how i have done it :
{exp:channel:entries channel="news_articles" status="open|Featured Top Story|Top Story" limit="1" disable="member_data|trackbacks|pagination"}
{embed="includes/document_header" page_title=" | {title}"}
<body class="home">
<div id="layoutWrapper">
{embed="includes/masthead_navigation"}
<div id="content">
<div id="article">
<img src="{article_image}" alt="News Article Image" />
<h4>{title}</h4>
<h5><span class="by">By</span> {article_author}</h5>
<p>{entry_date format="%M %d, %Y"} -- Updated {gmt_edit_date format="%M %d, %Y"}</p>
{article_body}
{/exp:channel:entries}
</div>
What do you think?
Another relatively new way to tackle it is using the Stash add-on and a template partials approach. This method knocks you down to one embed, and has the added advantage of giving you a centralized "wrapper" template - one for each major page layout, basically. The example below assumes you've simply added custom fields to handle any entry-specific meta data you're looking to inject into the header. With this idea in mind, here's a simplified view of the basic structure I've been applying recently:
In your template you apply EE tags to determine the logic of what gets sent to the inside-wrapper
{embed="embeds/.inside-wrapper"}
{exp:channel:entries channel="channel_name" limit="1" dynamic="yes" disable="whatever|you|can|live|without"}
{!-- ENTRY SEO META DATA --}
{exp:stash:set name="entry_seo_title" scope="site"}{cf_channelprefix_seo_title}{/exp:stash:set}
{exp:stash:set name="entry_seo_description" scope="site"}{cf_channelprefix_seo_description}{/exp:stash:set}
{exp:stash:set name="entry_seo_keywords" scope="site"}{cf_channelprefix_seo_keywords}{/exp:stash:set}
{!-- ENTRY/PAGE CONTENT --}
{exp:stash:set name="entry_body_content" parse_tags="yes" parse_conditionals="yes" scope="site"}
Your page content here
{/exp:stash:set}
{/exp:channel:entries}
And then in your wrapper template, which would ultimately contain all your wrapping HTML but could be chunked into snippets. for something like the header since it would be shared with other wrapper templates, for example:
<html>
<head>
<title>{exp:stash:get name="entry_seo_title"}</title>
<meta name="description" content="{exp:stash:get name="entry_seo_description"}" />
<meta name="keywords" content="{exp:stash:get name="entry_seo_keywords"}" />
</head>
<body>
{exp:stash:get name="entry_body_content"}
</body>
</html>
If you want to show just the name of your ExpressionEngine site (as defined in CP Home > Admin > General Configuration) use the site name global variable:
<title>{site_name}</title>
If you want to display just the current entry title from a given channel use the following:
<title>
{exp:channel:entries channel="channel_name" limit="1" dynamic="yes"}
{title}
{/exp:weblog:entries}
</title>
Many Web Developers will use an Embed Variable with an Embedded Template to pass the `{entry_title} to a global embed template, allowing for a dynamic page title:
{embed="includes/header" title="{exp:channel:entries channel="{channel_name}"}{title}{/exp:channel:entries}"}
If you're using EE2, the SEO Lite Module takes care of all the hard work for you with a single line of code:
<html lang="en">
<head>
<meta charset="utf-8" />
{exp:seo_lite url_title="{url_title}"}
</head>
Other solutions include the Low Title Plugin (EE1, EE2).
One addition to Ryan's embed method (which is definitely the most flexile method): chances are you can wrap most of your page in an {exp:channel:entries} tag when viewing an individual entry, avoiding the additional (and expensive) channel:entries call. So it would look more like this:
{exp:channel:entries channel="channel_name" limit="1"}
{embed="includes/header" title="{title}"}
<h1>{title}</h1>
{page_content}
{embed="includes/footer"}
{if no_results}{redirect="404"}{/if}
{/exp:channel:entries}
NSM Better Meta is a more complete way to pass channel meta data to the tag.
For smaller sites, I use the String plugin.
https://devot-ee.com/add-ons/string
Very simple syntax.
The following code works on IE8, Safari 4.0.2 - but generates an empty page on Firefox 3.5.5. Any idea ?
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/tundra/tundra.css">
</head>
<body class="tundra">
<div style="width: 350px; height: 300px">
<div id="tc1-prog">
</div>
</div>
</body>
<script type="text/javascript" src="http://archive.dojotoolkit.org/nightly/dojotoolkit/dojo/dojo.js"
djConfig="parseOnLoad: true">;
</script>
<script type="text/javascript">
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.addOnLoad(function() {
var tc = new dijit.layout.TabContainer({
style: "height: 100%; width:100%;"
},
"tc1-prog");
var cp1 = new dijit.layout.ContentPane({
title: "Food",
content: "We offer amazing food"
});
tc.addChild(cp1);
var cp2 = new dijit.layout.ContentPane({
title: "Drinks",
content: "We are known for our drinks."
});
tc.addChild(cp2);
tc.startup();
});
</script>
</html>
Likely a cross-domain problem. The nightly build is posted for testing, but to actually use it locally, you must download the tarball. Otherwise, references are made to load individual modules using xhr+eval which break the browser's domain security model.
Your other choice is to use a "cross domain" build of Dojo, which is pretty much what you wanted to do and super simple to deploy -- just point at it with the script tag and off you go. That's what's available on the Google CDN.
You might want to put the script tag inside the body tag. For it to be valid HTML, it needs to be either in a body or head tag. An invalid document could certainly result in it not operating consistently between browsers.
Update: Also, you might want to try using a production build instead of the nightly build. I changed the URL to use http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js and it worked fine for me in FF. It was broken with the nightly build.
From the HTML 4.01 Spec:
An HTML 4 document is composed of three parts:
a line containing HTML version information,
a declarative header section (delimited by the HEAD element),
a body, which contains the document's actual content. The body may be implemented by the BODY element or the FRAMESET element.
<html>
<head>
<link ... />
</head>
<body>
...
<script ... >
</script>
</body>
</html>
I want the 2 columns to touch ie. remove the margins, how can I do this?
My code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>testing</TITLE>
<!-- css -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">
<!-- js -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.5.2/build/utilities/utilities.js"></script>
<style>
.yui-b {
background-color: #eeeeee;
}
</style>
</HEAD>
<BODY>
<div id="doc3" class="yui-t1"> <!-- change class to change preset -->
<div id="hd">header</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
bd.main
</div>
</div>
<div class="yui-b">bd.other</div>
</div>
<div id="ft">footer</div>
</div>
</BODY>
</HTML>
Add a class to the right column and set margin-left to 0.
If that doesn't work you might have to increase the width by 1 or 2%. You can use firebug to check the applied styles and change them on the fly.
Notice that you're using YUI (Yahoo UI).
Look for the YUI reset.css. Every browser has potentially different margin, padding, font-size defaults. You should really start every web app with a reset.css file like that to bring everything to a common denominator. Otherwise you might find you "fix" the issue, only for it to appear again when viewed from another machine / platform.
Should hopefully start you off with all block elements having no margins or padding and then you can rather add margins and padding back in where you need it.
Notice that you're using YUI (Yahoo UI).