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;
}
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've included a simple javascript into a site that requests data from another site. When that code is present, the text in the header div jerks to the left and then to the center where it belongs while the site is loading. This happens every time you press refresh in the browser.
I am not sure if my div layout or CSS are contributing to the problem. I know that my code is not perfect, but I don't know if this problem is occurring because of it or in spite of it.
How can this be remedied?
body {
font-family: 'Roboto', sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 15px;
}
#hello {
display: inline-block;
text-align: center;
}
#logo {
font-weight: 900;
font-size: 2em;
margin-bottom: 15px;
}
#output {
font-family: 'Roboto';
font-size: 40px;
font-weight: 900;
display: block;
}
<html>
<head>
<link type="text/css" rel="stylesheet" href="/myip-jerktest.css">
</head>
<body>
<div id="hello">
<div id="logo">
Text Logo Here
</div>
<span id="output">
<script>
function getIP(json) {
document.write(json.ip);
}
</script>
<script src="https://api.ipify.org?format=jsonp&callback=getIP">
</script>
</span>
<div style="width:400px;height:45px">
</div>
</div>
</body>
</html>
You can redirect the output to this output div, by
function getIP(json) {
document.querySelector('#output').innerHTML=(json.ip);
}
body {
font-family: 'Roboto', sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 15px;
}
#hello {
display: inline-block;
text-align: center;
}
#logo {
font-weight: 900;
font-size: 2em;
margin-bottom: 15px;
}
#output {
font-family: 'Roboto';
font-size: 40px;
font-weight: 900;
display: block;
}
<html>
<head>
</head>
<body>
<div id="hello">
<div id="logo">
Text Logo Here
</div>
<span id="output">
</span>
<div style="width:400px;height:45px">
</div>
</div>
<script>
function getIP(json) {
document.querySelector('#output').innerHTML = (json.ip);
}
</script>
<script src="https://api.ipify.org?format=jsonp&callback=getIP">
</script>
</body>
</html>
I moved the script at end of the body try now
#hello {
display: block; // or nothing at all as divs are block leveled as default
text-align: center;
}
You should append the IP , on a paragraph, Rather than writing, Here it produces, span which is inline.
if you want span to be centered then you should apply css rules to make it take full width, align center.
Instead of re-writing the HTML document with write, append a new DOM element to the body of the document.
Also, I would create an XMLHttpRequest request object to retrieve the JSON data.
loadJson('https://cors-anywhere.herokuapp.com/https://api.ipify.org?format=json', getIP);
function getIP(json) {
let el = document.createElement('DIV');
el.innerHTML = json.ip;
document.body.appendChild(el);
}
function loadJson(url, callback) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.onload = (e) => callback(xhr.response);
xhr.open('GET', url);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.send();
}
body {
font-family: 'Roboto', sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 15px;
}
#hello {
display: inline-block;
text-align: center;
}
#logo {
font-weight: 900;
font-size: 2em;
margin-bottom: 15px;
}
#output {
font-family: 'Roboto';
font-size: 40px;
font-weight: 900;
display: block;
}
<div id="hello">
<div id="logo">Text Logo Here</div>
<span id="output"></span>
<div style="width:400px;height:45px"></div>
</div>
use document.getElementById().innerHTML
Demo
body {
font-family: 'Roboto', sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 15px;
}
#hello {
display: inline-block;
text-align: center;
}
#logo {
font-weight: 900;
font-size: 2em;
margin-bottom: 15px;
}
#output {
font-family: 'Roboto';
font-size: 40px;
font-weight: 900;
display: block;
}
<html>
<head>
<link type="text/css" rel="stylesheet" href="/myip-jerktest.css">
</head>
<body>
<div id="hello">
<div id="logo">
Text Logo Here
</div>
<span id="output">
</span>
<div style="width:400px;height:45px">
</div>
</div>
<script>
function getIP(json) {
document.getElementById('output').innerHTML = json.ip;
}
</script>
<script src="https://api.ipify.org?format=jsonp&callback=getIP">
</script>
</body>
</html>
I would like both videos to be 100% width of their parent element while maintaining their aspect ratio.
The parent element is 50% of the window width, so the video has to be responsive.
I have found dozens of solutions - all virtually the same - that work for a video that is 100% width of the page as a background cover. However unfortunately this is not the solution for me.
To see the issue you'll probably need to open it in full page view.
Thanks, appreciate any help!
body {
margin: 0;
}
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3gnD-w.ttf) format('truetype');
}
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_c5H3gnD-w.ttf) format('truetype');
}
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 900;
src: local('Montserrat Black'), local('Montserrat-Black'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_epG3gnD-w.ttf) format('truetype');
}
#font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400;
src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url(https://fonts.gstatic.com/s/robotocondensed/v16/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7CA.ttf) format('truetype');
}
.jan-container {
width: 100%;
font-family: "Roboto Condensed";
}
.jan-container .headline-athletes {
display: flex;
}
.jan-container .headline-athletes div {
position: relative;
width: 50%;
height: 900px;
background: red;
margin: 0 60px 0 0;
display: flex;
flex-direction: column;
}
.jan-container .headline-athletes div .videoWrapper {
width: 100% !important;
height: auto;
}
.jan-container .headline-athletes div .videoWrapper iframe {
width: 100% !important;
}
.jan-container .headline-athletes div:last-child {
margin: 0;
}
<section class="jan-container">
<div class="headline-athletes">
<div>
<div class="videoWrapper">
<iframe src="https://player.vimeo.com/video/76979871?autoplay=1&loop=1&background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
<div>
<div class="videoWrapper">
<iframe src="https://player.vimeo.com/video/76979871?autoplay=1&loop=1&background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</section>
i just remembered why i dont like iframes :)
this should work, you more or less just have to bind the same function to aresize event
var callback = function() {
var videos = document.getElementsByClassName('videoWrapper__video');
var ratio = 9 / 16;
for (var i = 0; i < videos.length; ++i) {
if (i === 0) continue; // remove this its just to show the difference
videos[i].style.height = videos[i].clientWidth * ratio + 'px';
}
}
window.onload = callback();
body {
margin: 0;
}
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3gnD-w.ttf) format('truetype');
}
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_c5H3gnD-w.ttf) format('truetype');
}
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 900;
src: local('Montserrat Black'), local('Montserrat-Black'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_epG3gnD-w.ttf) format('truetype');
}
#font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400;
src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url(https://fonts.gstatic.com/s/robotocondensed/v16/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7CA.ttf) format('truetype');
}
.jan-container {
width: 100%;
font-family: "Roboto Condensed";
}
.jan-container .headline-athletes {
display: flex;
}
.jan-container .headline-athletes div {
position: relative;
width: 50%;
height: 900px;
background: red;
margin: 0 60px 0 0;
display: flex;
flex-direction: column;
}
.jan-container .headline-athletes div .videoWrapper {
width: 100% !important;
height: auto;
}
.jan-container .headline-athletes div .videoWrapper iframe {
/*width: 100% !important;*/
background: green;
/* just for showing the iframe */
}
.jan-container .headline-athletes div:last-child {
margin: 0;
}
<section class="jan-container">
<div class="headline-athletes">
<div>
<div class="videoWrapper">
<iframe class="videoWrapper__video" src="https://player.vimeo.com/video/76979871?autoplay=1&loop=1&background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
<div>
<div class="videoWrapper">
<iframe class="videoWrapper__video" src="https://player.vimeo.com/video/76979871?autoplay=1&loop=1&background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</section>
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>
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.