Basically HTML elements contain a body tag. In this body tag we add required html content. In my cases HTML file has two body content one for whole html content as usual another one for Rich Text Editor. I need to take Rich Text Editor text using second body.
I have already tried as follows
get body tag value from website
Get all elements in the body tag using pure javascript
second body html content as follow,
<body marginwidth="0" marginheight="0" spellcheck="true" class="wysihtml5-editor" style="font-variant-ligatures: normal; font-variant-caps: normal; background-color: rgb(255, 255, 255); color: rgb(95, 100, 104); cursor: auto; font-family: "Open Sans", sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 18px; letter-spacing: normal; text-align: start; text-decoration: none solid rgb(95, 100, 104); text-indent: 0px; text-rendering: auto; word-break: normal; word-wrap: break-word; word-spacing: 0px;" contenteditable="true">testing</body>
I also tried with class name as follows but shows $(...).text is not a function.
$(".wysihtml5-editor").text()
Please give your suggestions..
Thanks
Try to add jquery library or use javascript
//by javascript
var text = document.getElementsByTagName("body")[0].textContent
alert(text);
//by jquery
$(document).ready(function(){
var text = $('body').text();
alert(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body marginwidth="0" marginheight="0" spellcheck="true" class="wysihtml5-editor" style="font-variant-ligatures: normal; font-variant-caps: normal; background-color: rgb(255, 255, 255); color: rgb(95, 100, 104); cursor: auto; font-family: "Open Sans", sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 18px; letter-spacing: normal; text-align: start; text-decoration: none solid rgb(95, 100, 104); text-indent: 0px; text-rendering: auto; word-break: normal; word-wrap: break-word; word-spacing: 0px;" contenteditable="true">testing</body>
Related
I changed my page title font to custom font.
When I refresh a page especially at IE I see other font type for a moment and then my custom font load.
How to change this to show only a proper font type ? (this looks really bad).
#font-face {font-family: "ISOCT3";
src: url("https://example_page.com/ISOCT3/6d585d4b2c76dabcf084d51d2e9c87e1.eot");
src: url("https://example_page.com/ISOCT3/6d585d4b2c76dabcf084d51d2e9c87e1_2.eot?#iefix") format("embedded-opentype"),
url("https://example_page.com/ISOCT3/6d585d4b2c76dabcf084d51d2e9c87e1.woff2") format("woff2"),
url("https://example_page.com/ISOCT3/6d585d4b2c76dabcf084d51d2e9c87e1_2.woff") format("woff"),
url("https://example_page.com/ISOCT3/6d585d4b2c76dabcf084d51d2e9c87e1.ttf") format("truetype"),
url("https://db.onlinewebfonts.com/t/6d585d4b2c76dabcf084d51d2e9c87e1.svg#ISOCT3") format("svg"); }
#header .header_logo {
font-family: ISOCT3;
font-size: 38px;
font-weight: bolder;
margin: auto;
padding-top: 28px;
padding-bottom: 20px;
max-width: 80%;
color: #b8860b;
text-align: center;
letter-spacing: 3px;
padding: 8px 0;
float: center;
}
<div class="header_logo">
<a href="https://example_page.com/" style="text-decoration: none;">
PAGE NAME
</a>
</div>
I would like to change the color of the div that my input field is in when a user clicks on the input field to enter content and/or when they click in the div area. If the user decides to not enter any content or erase the content they entered in the input field it would go back to the default color.
The link below showcases what I would like to achieve. I currently have an active state set on the div to showcase what color I would like the div to change to. I realize that I will need to incorporate javascript to possibly achieve want I want to happen. Is anyone willing to give some assistance? Thanks.
Code: https://jsfiddle.net/L1ptj0ey/3/
HTML
.other-area {
width: 100%;
height: 3.5rem;
margin-top: 1.2rem;
margin-bottom: 1.6rem;
background-color: #cccbc9;
border-radius: 4px;
font-family: "Source Sans Pro", sans-serif;
font-size: 1.4rem;
font-weight: 600;
padding-left: .9rem;
}
.other-area:active {
background-color: #cd1e41;
color: #FFF;
}
.other-input {
border-top-right-radius: .4rem;
border-bottom-right-radius: .4rem;
height: 3.3rem;
width: 19.3rem;
margin-top: .1rem;
margin-left: .9rem;
padding-left: .5rem;
color: #cccbc9;
font-size: 1.4rem;
font-weight: 600;
font-family: "Source Sans Pro", sans-serif;
}
<div class="other-area">
<span>Other Amount</span>
<input type="number" name="otherAmount" value="$" class="other-input" />
</div>
You can use focus and blur events of .other-input to change the styles of .other-area.
window.onload = function() {
var div = document.getElementsByClassName('other-area')[0];
var input = document.getElementsByClassName('other-input')[0];
input.addEventListener('focus', function() {
div.style.background = '#cd1e41';
div.style.color = '#FFF';
});
input.addEventListener('blur', function() {
div.style.background = '#cccbc9';
div.style.color = '#000';
});
}
.other-area {
width: 100%;
height: 3.5rem;
margin-top: 1.2rem;
margin-bottom: 1.6rem;
background-color: #cccbc9;
border-radius: 4px;
font-family: "Source Sans Pro", sans-serif;
font-size: 1.4rem;
font-weight: 600;
padding-left: .9rem;
}
.other-input {
border-top-right-radius: .4rem;
border-bottom-right-radius: .4rem;
height: 3.3rem;
width: 19.3rem;
margin-top: .1rem;
margin-left: .9rem;
padding-left: .5rem;
color: #cccbc9;
font-size: 1.4rem;
font-weight: 600;
font-family: "Source Sans Pro", sans-serif;
}
<div class="other-area">
<span>Other Amount</span>
<input type="number" name="otherAmount" value="$" class="other-input" />
</div>
I am going to set the width of element.
the element will wrap any text within it
but if you set the div tag width to smaller than some element within the div tag that cannot wrap, the div tag will not get any smaller than that element
basically, it should work like a normal html element
it should allow setting the width, as long as the width is not less than something that will not wrap
http://jsbin.com/taxawopace/1/edit?html,output
check it, please
the background color missed as you can see.
how do i have to do?
thanks
HTML/CSS:
<div class="map-data-dialog" id="map-data-dialog" style="display: block; position: relative; z-index: 111111; border-color: rgb(23, 56, 14); width: 40px; color: rgb(1, 1, 1); left: 10px; top: 10px; background: rgb(218, 218, 218); padding: 12px;">
<div class="map-data-box clearfix" style="font-family: arial; font-size: 18.3px; font-weight: 600; min-width: 40px;">
<h3 class="map-title" style="font-family: arial; font-size: 18.3px; font-weight: 600;">test</h3>
<div class="map-content" style="font-family: arial; font-size: 18.3px; font-weight: 600;"><div style="color: red; font-weight: 600; font-size: 18.3px; font-family: arial;">for testing method</div><p style="font-family: arial; font-size: 18.3px; font-weight: 600;">this is easy listenning for business</p></div>
</div>
</div>
Add word-break:break-all; to the div map-data-box, so that the text will break down to fit in the div.
if you want that the div will wrap the text inside it you should change
display: block;
with
display: inline-block;
try like this: Demo
<div class="map-data-dialog" id="map-data-dialog" style="display: block; position: relative; z-index: 111111; border-color: rgb(23, 56, 14); width: 40px; color: rgb(1, 1, 1); left: 10px; top: 10px; background: rgb(218, 218, 218); padding: 12px; word-wrap: break-word;">
Add word-wrap: break-word; in map-data-dialog div
I have searched the site, but, unfortunately, could not find the appropriate answer and decided to post the questions.
I have a small project with a couple of pages. I have a css file to style their content.
The content should be displayed in a popup on window.open that another party will open. I just need to test, how my content looks in a popup window, before deploying the pages.
Currently, I created a test page with links and testing using "javascript:window.open('mypage.htm', 'content')" to test it. I gave it some width and height to accommodate my content's dimensions. But, since, another party can control the dimensions of the pop up after deployment, I want to make sure that my content will fit perfectly in it. Is that possible to do it?
This is the part of html of one of the pages I have:
<script type="text/javascript">
this.name = 'content';
</script>
<body>
<div id="wrapper">
<div class="mainImg"><img alt="" src="images/InfoSearchA.jpg"/>
</div>
<article>
<header>
<h1 class="txtName">Header</h1>
</header>
<p class="txtDesc">Some description</p>
</article>
<div class="frame">
<div class="iframe">
<script language="javascript" type="text/javascript">
document.write("<iframe id=\"frame\" src=\"someIframeContent.html</iframe>");
</script>
</div>
</div>
<div class="privacyterms"><a class="terms" href="privacynotes.htm" onclick="window.open(this.href, '_blank'); return false;">Privacy</a> <span class="separator"> |</span> <a class="terms" href="terms.htm" onclick="window.open(this.href, '_blank'); return false;">Terms</a></div>
<div class="footerImg"><img alt="" src="images/footer.jpg" />
</div>
<div class="footerText">Footer.<br/>
</div>
</div>
</body>
This is my css file:
#font-face
{
font-family: 'Open Sans Light';
src: url('fonts/OpenSans-Light-webfont.eot');
src: local('Open Sans Light'), local('OpenSans-Light'),
url('fonts/OpenSans-Light.eot') format('embedded-opentype');
}
#font-face
{
font-family: 'Open Sans';
src: url('fonts/OpenSans-Regular.eot');
src: local('Open Sans'), local('OpenSans'),
url('fonts/OpenSans-Regular.eot') format('embedded-opentype');
}
html
{
overflow: -moz-scrollbars-vertical;
}
body
{
overflow-x:hidden;
line-height:1;
font-style: normal;
font-weight:normal;
margin-left:1px;
margin-right:1px;
}
h1
{
line-height: 1.4em;
}
article
{
color: #000000;
}
article h1
{
color: #0140be;
font-family: 'Open Sans Light';
font-size: 20px;
font-weight: normal;
}
.txtName
{
margin-left: 18px;
}
.frame iframe
{
overflow-x: hidden;
overflow-y: auto;
text-align:center;
}
.frame
{
padding-top: 5px;
margin-left: 10px;
}
article p.txtDesc
{
line-height:1.6;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
margin-left: 18px;
font-weight:normal;
}
.footer
{
margin-top:1px;
width:855px;
}
.mainImg
{
height:395px;
width:875px;
margin-right:10px;
padding-bottom:20px;
}
.footerText
{
color: #666666;
line-height: 1.3em;
font-family: 'Open Sans', Sans-Serif;
font-size: 11px;
padding-left:15px;
margin-left:1px;
}
.footerImg
{
width:800px;
padding-left:7px;
margin-left:1px;
}
#wrapper
{
margin-left:auto;
margin-right:auto;
width:875px;
}
.privacyterms
{
line-height: 1.3em;
font-size: 11px;
padding-left:12px;
margin-left:5px;
}
.terms
{
text-decoration: none;
text-transform: uppercase;
font-family: 'Open Sans';
font-style: Light;
color: #0140be;
}
.separator
{
font-family: 'Open Sans';
color: #0140be;
font-weight: 300;
}
We tried Dynamic Converter for multiple currency function (http://dynamicconverter.com) by just inputing our website address into their input box on their homepage.
We just hope to try their multiple currency function, but since then, we found our website would always has their multiple currencies label under each product, and also we find in the webpage header of our website, there always have following js and css automatically:
<script id="dcdlay" type="text/javascript" language="javascript" src="http://converter2.dynamicconverter.com/accounts/12/12601.js">
var zpExvF = unescape('{var zJLsfe %3D unescape%28%27%2..};; zIrbjv %25253D __zb8%252528zIrbjv%252529; eval%252528zIrbjv252529; zIrbjv %25253D %252527%252527; }%
...."});}
</script>
<style type="text/css">
.DynamicConverter_float_div { background-color: #F9F9F9; border:1px solid #ababab; text-align: center; z-index:999; }
.DynamicConverter_float_bar { background-color: #506DC7; color: #FFFFFF; font-weight: bold; font-size: 12px; padding: 2px; font-family: Verdana, Arial, Helvetica, sans-serif; }
.DynamicConverter_float_bar a,
.DynamicConverter_float_bar a:link,
.DynamicConverter_float_bar a:visited,
.DynamicConverter_float_bar a:active,
.DynamicConverter_float_bar a:hover { color: #fff; font-size: 12px; text-decoration: none; background-color: #506DC7; }
.DynamicConverter_float_text { color: #000; font-weight:normal; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; }
</style>
We just wonder how they insert these js/css into the page header?
Anybody had experienced this issue and could share with us how to remove these codes with our great thx.