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>
Related
background video image
Hi I have a background video (The jellyfish move) this is a photo of a frame of this video
I need to understand why writing "Medusa" text has a background color, maybe the color is #222, but I don't see how to disable it in code. i need to create a navbar but the background color is getting in the way!
I need the navigation bar to be transparent like this
tesla navbar example
See Code
import logo from './logo.svg';
import './App.css';
import bgvideo from './components/bgvideo.mp4';
function App() {
return (
<div className="App">
<div className='navbar'>
<h1>Medusa</h1>
</div>
<div className='bg'>
<video autoPlay muted loop>
<source src= {bgvideo} type ="video/mp4" />
</video>
</div>
</div>
);
}
export default App;
* {
margin: 0;
padding: 0;
background-color: #222;
}
video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
h1 {
color: white;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: bold;
text-align: center;
font-size: 6rem;
margin-top: 30vh;
background-image: none;
background-color: none;
}
* {
margin: 0;
padding: 0;
/* background-color: #222; remove this line */
}
video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
h1 {
color: white;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: bold;
text-align: center;
font-size: 6rem;
margin-top: 30vh;
/* background-image: none; and no need for this */
/* background-color: none; and this */
}
this should fix your problem of navbar not being translucent
.navbar {
background-color: rgb(0 ,0 , 0, 0.5);
}
using the rgb coloring it you can have a 4th value for opacity or you can simply use the opacity type
.navbar {
opacity: 50%;
}
background-color: none; is not valid CSS, background-color will only take a colour value. You can use transparent instead so use background-color: transparent; instead of background-color: none;. You may find this does nothing when you add it to your <h1> element and that is because the *{} css query selector is giving absolutely every single element that styling, this will make the div containing the text have a background colour. Putting stuff like background color in a * query selector is generally a bad practice. However I don't know what your intentions are. You should probably give the <body> element the background color styling so it doesn't interfere with other elements .
I want to extract the file created date from the DROPBOX API using JS. I have tried to fetch the modification date but not able to find the file creation date
Any help is greatly appreciated.
<!doctype html>
<html>
<head>
<title>Dropbox JavaScript SDK</title>
<style>
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
line-height: 1.5;
}
.container {
display: block;
width: 90%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.container.main {
padding-top: 30px;
}
code, .code {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
color: #666;
}
.info {
font-size: 13px;
font-style: italic;
color: #666;
margin-top: 40px;
}
a {
color: #007ee5;
}
input {
border: 2px solid #007ee5;
border-radius: 3px;
padding: 8px;
font-size: 16px;
}
.button, button {
border-radius: 3px;
background-color: #007ee5;
border: none;
color: #fff;
font-size: 16px;
padding: 10px 15px;
text-decoration: none;
}
.page-header {
background-color: #007ee5;
padding: 10px 0 0 0;
}
.page-header .container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 150px;
}
.page-header a {
color: #fff;
text-decoration: none;
}
.page-header nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.page-header h1 {
display: flex;
align-items: center;
color: #fff;
font-size: 17px;
font-weight: 200;
}
.page-header .logo {
width: 100px;
margin-right: 10px;
}
.page-header .view-source {
font-weight: 200;
font-size: 12px;
}
.page-header h2 {
color: #fff;
font-size: 18px;
font-weight: normal;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill#7/dist/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropbox.js/10.27.0/Dropbox-sdk.min.js" integrity="sha512-nTLJySi/DUYzRvvxWOxf31QS5191sN1gpoq6EqGFHPFH0RlM6xOiY6jEp9dmwhDlyFmCmicwLOMnE+fUmo02KQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<!-- Example layout boilerplate -->
<header class="page-header">
<div class="container">
<nav>
<a href="/">
<h1>
<img src="https://cfl.dropboxstatic.com/static/images/brand/logotype_white-vflRG5Zd8.svg" class="logo" />
JavaScript SDK Examples
</h1>
</a>
View Source
</nav>
<h2 class="code">
examples / basic
</h2>
</div>
</header>
<!-- Example description and UI -->
<section class="container main">
<textarea id="files"></textarea>
</section>
<!-- Scripts to run example -->
<script>
var form = document.getElementById('basic-form');
var ACCESS_TOKEN = '<TOKEN_HERE>';
var dbx = new Dropbox.Dropbox({ accessToken: ACCESS_TOKEN });
var filesList = document.getElementById('files');
var li;
function listFiles(path) {
dbx.filesListFolder({path: path})
.then(function(response) {
console.log('response', response)
var items = response.result.entries;
var values = [];
for (var i = 0; i < items.length; i++) {
if(items[i][".tag"] == "file")
{
values.push('"'+[path+"/"+items[i].name, items[i].server_modified,items[i].size].join('","')+'"');
}
if(items[i][".tag"] == "folder")
listFiles(path+"/"+items[i].name)
}
document.getElementById("files").innerHTML = document.getElementById("files").innerHTML + "\n" + values.join("\n")
})
.catch(function(error) {
console.error(error);
});
}
listFiles('')
</script>
</body>
</html>
The Dropbox API doesn't return file creation dates (only modified dates), but I'll pass this along as a feature request. I can't promise if or when that might be implemented though.
I wanted to be able to make the word "HERE" change its position randomly as I click the button bellow it with a javascript code.
I have another javascript code in the same file already but for another word ("BECOME") which is working just fine; but it seems that when I put this two codes in the same javascript file the one for the word "HERE" stopped working for some reason I cannot figure out. I'm still a newbie at javascript, so I'm having trouble with it... Help would be very much appreciated!
HTML:
<link rel="stylesheet" href="css_become.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!--Helena Luz, up201506747-->
</head>
<body>
<!--HERE-->
<header>
<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>
</header>
<h1 class="here">Here!</h1>
<h2 id="button">reposition me!</h2>
<!--HERE-->
<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>
<div id="float">
<div class="dot">
<h4 id="become_original">Become</h4>
</div>
</div>
<h2 id="button1">Transform me!</h2>
<!--BECOME-->
<script src="javascript_become.js" type="application/javascript"> </script>
</body>
</html>
CSS:
#font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}
#font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}
#font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}
#font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}
#font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}
#font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}
body {
margin:0;
padding:0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}
h1, h2, h4, h5, p, button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}
/*here's button*/
#button {
width:295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}
#button:hover {text-decoration: underline;}
.here {
color: #FFF;
text-align: center;
width:500px;
margin:auto;
margin-top: 7.5%;
}
/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}
.class2 {
font-weight: Regular;
font-family: BAUHS93;
}
.class3 {
font-family: bb-book;
}
.class4 {
font-family: bebas;
font-style:oblique;
}
.class5 {
font-family: mod;
text-transform: uppercase;
}
.class6 {
font-family: monotonia;
}
/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}
#container {
margin: 15% 0 6% 0;
}
#become_original {
font-size: 100px;
margin: 0 auto;
}
#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin:auto;
margin-top:2.5%;
margin-bottom:2.5%;
}
#button1:hover {text-decoration: underline;}
span{color: #FFF;}
/*animations*/
#keyframes cores {
0% {background-color: #F5CDFF;}
25% {background-color:#00ADEF;}
50% {background-color: #EE3E4E;}
100% {background-color:#F5CDFF;}
}
#keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, 0px); }
}
JAVASCRIPT:
//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE
const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];
var button1;
var selectedIndex = 0;
document.getElementById("button1").addEventListener("click", function(){
if(++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("become_original").className = classes[selectedIndex];
});
//JAVASCRIPT FOR THE WORD "HERE" WHICH ISN'T WORKING
$(document).ready(function(){
var button;
button = document.getElementById('button');
$('button').click(function(){
$('.here').css({
top: (100 * Math.random()).toString() + "%",
left: (100 * Math.random()).toString() + "%",
})
})
});
Ok, corrected a few things, first of you were using a ix of Vanilla Javascript and jQuery. Converted code to run plain Vanilla for now.
You javascript now runs when the page is loaded.
Also in CSS we needed to make the .here have position: absolute otherwise your top and left commands have no effect. Remember Math.random() gives a value between 0~1 so move is not dramatic :) but I think you can tweak that yourself.
You will also need to adjust the absolute position to look right.
//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE
const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];
var button1;
var selectedIndex = 0;
document.addEventListener('DOMContentLoaded', function() {
// Set up click event for the 'become'
document.getElementById("button1").addEventListener("click", function() {
if (++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("become_original").className = classes[selectedIndex];
});
// Set up HERE
document.getElementById('button').addEventListener('click', function() {
let here = document.querySelector('.here');
here.style.top = `${Math.random()}%`;
here.style.left = `${Math.random()}%`;
console.log('Moved here');
});
});
#font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}
#font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}
#font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}
#font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}
#font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}
#font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}
body {
margin: 0;
padding: 0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}
h1,
h2,
h4,
h5,
p,
button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}
/*here's button*/
#button {
width: 295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}
#button:hover {
text-decoration: underline;
}
.here {
color: #FFF;
text-align: center;
width: 500px;
margin: auto;
margin-top: 7.5%;
position: absolute;
}
/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}
.class2 {
font-weight: Regular;
font-family: BAUHS93;
}
.class3 {
font-family: bb-book;
}
.class4 {
font-family: bebas;
font-style: oblique;
}
.class5 {
font-family: mod;
text-transform: uppercase;
}
.class6 {
font-family: monotonia;
}
/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}
#container {
margin: 15% 0 6% 0;
}
#become_original {
font-size: 100px;
margin: 0 auto;
}
#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin: auto;
margin-top: 2.5%;
margin-bottom: 2.5%;
}
#button1:hover {
text-decoration: underline;
}
span {
color: #FFF;
}
/*animations*/
#keyframes cores {
0% {
background-color: #F5CDFF;
}
25% {
background-color: #00ADEF;
}
50% {
background-color: #EE3E4E;
}
100% {
background-color: #F5CDFF;
}
}
#keyframes floating {
from {
transform: translate(0, 0px);
}
65% {
transform: translate(0, 15px);
}
to {
transform: translate(0, 0px);
}
<!--HERE-->
<header>
<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>
</header>
<h1 class="here">Here!</h1>
<h2 id="button">reposition me!</h2>
<!--HERE-->
<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>
<div id="float">
<div class="dot">
<h4 id="become_original">Become</h4>
</div>
</div>
<h2 id="button1">Transform me!</h2>
Well your first issue is that you are trying to set a click listener for element button but that isn't what you are passing here:
var button;
button = document.getElementById('button');
$('button').click(function(){
It should actually be:
$('#button').click(function(){
Because you are already using jQuery, there isn't a need to create a variable for the button by id, you can just use the ID.
Next, to make it move, why not use jQuerys offset function?
$('#button').click(function(){
$('.here').offset({
top: 100 * Math.random(),
left: 100 * Math.random(),
})
});
That will set your offset for top and left as well.
Working Solution:
//JAVASCRIPT FOR THE WORD BECOME - IS WORKING FINE
const classes = ["class1", "class2", "class3", "class4", "class5", "class6"];
var button1;
var selectedIndex = 0;
document.getElementById("button1").addEventListener("click", function(){
if(++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("become_original").className = classes[selectedIndex];
});
//JAVASCRIPT FOR THE WORD "HERE" WHICH ISN'T WORKING
$(document).ready(function(){
//UPDATED THIS TO USE #
$('#button').click(function(){
$('.here').offset({
top: 100 * Math.random(),
left: 100 * Math.random(),
})
});
});
#font-face {
font-family: BAUHS93;
src: url(fontes/BAUHS93.TTF);
}
#font-face {
font-family: Amatic;
src: url(fontes/AmaticSC-Regular.ttf);
}
#font-face {
font-family: bb-book;
src: url(fontes/bb-book.otf);
}
#font-face {
font-family: bebas;
src: url(fontes/BEBAS__.TTF);
}
#font-face {
font-family: mod;
src: url(fontes/MOD20.TTF);
}
#font-face {
font-family: monotonia;
src: url(fontes/monotonia.otf);
}
body {
margin:0;
padding:0;
border: solid 10px #000;
background-color: #EE3E4E;
border: solid 10px #000;
}
h1, h2, h4, h5, p, button {
font-family: Helvetica;
font-weight: bold;
text-transform: uppercase;
color: #000;
font-size: 35px;
line-height: 38px;
}
/*here's button*/
#button {
width:295px;
margin: auto;
margin-top: 2.5%;
border: 0px;
background-color: inherit;
}
#button:hover {text-decoration: underline;}
.here {
color: #FFF;
text-align: center;
width:500px;
margin:auto;
margin-top: 7.5%;
}
/* for become */
.class1 {
font-family: Amatic;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 25px;
}
.class2 {
font-weight: Regular;
font-family: BAUHS93;
}
.class3 {
font-family: bb-book;
}
.class4 {
font-family: bebas;
font-style:oblique;
}
.class5 {
font-family: mod;
text-transform: uppercase;
}
.class6 {
font-family: monotonia;
}
/*circle*/
.dot {
height: 465px;
width: 465px;
border-radius: 100%;
margin: 0 auto;
background-color: #F5CDFF;
animation-name: cores;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
display: flex;
align-items: center;
margin-top: -5%;
overflow: hidden;
}
#container {
margin: 15% 0 6% 0;
}
#become_original {
font-size: 100px;
margin: 0 auto;
}
#float {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
/*become's button*/
#button1 {
background-color: inherit;
width: 300px;
margin:auto;
margin-top:2.5%;
margin-bottom:2.5%;
}
#button1:hover {text-decoration: underline;}
span{color: #FFF;}
/*animations*/
#keyframes cores {
0% {background-color: #F5CDFF;}
25% {background-color:#00ADEF;}
50% {background-color: #EE3E4E;}
100% {background-color:#F5CDFF;}
}
#keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, 0px); }
}
<link rel="stylesheet" href="css_become.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!--Helena Luz, up201506747-->
</head>
<body>
<!--HERE-->
<header>
<h4>Here is everyw<span>here</span></h4>
<h5>(it depends where you are)</h5>
</header>
<h1 class="here">Here!</h1>
<h2 id="button">reposition me!</h2>
<!--HERE-->
<!--BECOME-->
<div id="container">
<p><span>Become</span>
<br>to come into existence
<br>to come to be
<br>to undergo <span>change</span>
</p>
</div>
<div id="float">
<div class="dot">
<h4 id="become_original">Become</h4>
</div>
</div>
<h2 id="button1">Transform me!</h2>
<!--BECOME-->
<script src="javascript_become.js" type="application/javascript"> </script>
</body>
</html>
I have CSS in Style tag on the html header. What I want is that thru javascript to access all the classes of Style tag and check whether it has font-weight:bold or not; at the end I want an array of classes with font-weight:bold so that I can assign id attribute to them in javascript later.
CSS
span {
white-space: pre-wrap;
}
.pt-Normal {
line-height: 107.9%;
margin-bottom: 8pt;
font-family: Ca**strong text**libri;
font-size: 20pt;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
.pt-DefaultParagraphFont-000000 {
font-family: Calibri;
font-size: 11pt;
font-style: normal;
font-weight: bold;
margin: 0;
padding: 0;
}
.pt-DefaultParagraphFont-000001 {
font-family: Calibri;
font-size: 20pt;
font-style: normal;
font-weight: bold;
margin: 0;
padding: 0;
}
.pt-Normal-000002 {
line-height: 107.9%;
margin-bottom: 8pt;
font-family: Calibri;
font-size: 11pt;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
.pt-DefaultParagraphFont-000003 {
color: #FF0000;
font-family: Calibri;
font-size: 11pt;
font-style: normal;
font-weight: bold;
margin: 0;
padding: 0;
}
JAVASCRIPT from where I want to access the CSS class attribute.
//this is just example of one class having fontWeight:bold, but i want to do this in a generic way.
function sec(){var s = document.getElementsByClassName("pt-DefaultParagraphFont-000001");
for (var z = 0; z <= s.length;z++){s[z].setAttribute("id",z.toString());}}
var sc = document.getElementsByTagName("STYLE").style;
if (sc.fontWeight == bold){
//here i want to get all the class which have class attribute fontWeight:bold
//later on i want to assign id attribute to those elements which have fontWeight:bold
}
use filter method it will retrun an array ok contains elements who have font-size: bold then just get the className by ok[index].className
working example.
var ok = $('[class]').filter(function() {
return $(this).css('font-weight').toLowerCase().indexOf('bold') > -1;
});
var arrayBold = []
for(var i=0;i<ok.length;i++){
arrayBold.push(ok[i].className);
}
console.log(arrayBold);
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pt-Normal"></div>
<div class="pt-DefaultParagraphFont-000000"></div>
<div class="pt-DefaultParagraphFont-000001"></div>
<div class="pt-Normal-000002"></div>
<div class="pt-DefaultParagraphFont-000003"></div>
<style>
span {
white-space: pre-wrap;
}
.pt-Normal {
line-height: 107.9%;
margin-bottom: 8pt;
font-family: Ca**strong text**libri;
font-size: 20pt;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
.pt-DefaultParagraphFont-000000 {
font-family: Calibri;
font-size: 11pt;
font-style: normal;
font-weight: bold;
margin: 0;
padding: 0;
}
.pt-DefaultParagraphFont-000001 {
font-family: Calibri;
font-size: 20pt;
font-style: normal;
font-weight: bold;
margin: 0;
padding: 0;
}
.pt-Normal-000002 {
line-height: 107.9%;
margin-bottom: 8pt;
font-family: Calibri;
font-size: 11pt;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
.pt-DefaultParagraphFont-000003 {
color: #FF0000;
font-family: Calibri;
font-size: 11pt;
font-style: normal;
font-weight: bold;
margin: 0;
padding: 0;
}
</style>
Use document.styleSheets to get the information you want. This is an array which contains all the style sheets of the document. Each style sheet again has the cssRules array. Each rule has the cssText property which caontains the information you want.
document.styleSheets.forEach(function(styleSheet){
styleSheet.cssRules.forEach(function(cssStyleRule) {
console.log(cssStyleRule.cssText); //Add your condition here and build the array
})
})
I do not know if you are required to use Javascript but within jQuery this would be quite easy. Then you only need this:
$("*").each(function() {
if ($(this).css("font-weight") == "bold") {
$(this).attr("class", "bold");
}
});
Which search through your CSS to find a DOM object that has your desired style: font-weight: bold; and for every object that it found an extra CLASS* is been added trough using the .attr() which makes your life much easier I guess. If you want to add an ID to each DOM object be careful that this ID should be an unique. All this can be seen within this JSFIDDLE
I recommend to you that you should set a class due to the fact that an ID should be unique and therefore you need to generate multiple id's. Which make selecting all those id's more difficult. (thanks #Kaiido for the tip)
In the end (in my created example) the output will be:
<body>
<p class="class1 bold">
SAMPLE TEXT 1
</p>
<p>
SAMPLE TEXT 2
</p>
<p class="class2">
SAMPLE TEXT 3
</p>
<p class="class3 bold">
SAMPLE TEXT 4
</p>
</body>
Given this CSS:
.class1 {
font-weight: bold;
}
.class2 {
font-weight: normal;
}
.class3 {
font-weight: bold;
}
You can use cssRules of <style> element sheet property, iterate style properties, values within a for loop; return selectorText of matched property, value
var style = document.querySelector("style")
, rules = style.sheet.cssRules
, matches = []
, match = ["fontWeight", "bold"];
for (var i = 0; i < rules.length; i++) {
if (rules[i].style[match[0]] === match[1]) {
matches.push(rules[i].selectorText)
}
}
console.log(matches)
span {
white-space: pre-wrap;
}
.pt-Normal {
line-height: 107.9%;
margin-bottom: 8pt;
font-family: font-size: 20pt;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
.pt-DefaultParagraphFont-000000 {
font-family: Calibri;
font-size: 11pt;
font-style: normal;
font-weight: bold;
margin: 0;
padding: 0;
}
.pt-DefaultParagraphFont-000001 {
font-family: Calibri;
font-size: 20pt;
font-style: normal;
font-weight: bold;
margin: 0;
padding: 0;
}
.pt-Normal-000002 {
line-height: 107.9%;
margin-bottom: 8pt;
font-family: Calibri;
font-size: 11pt;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
.pt-DefaultParagraphFont-000003 {
color: #FF0000;
font-family: Calibri;
font-size: 11pt;
font-style: normal;
font-weight: bold;
margin: 0;
padding: 0;
}
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;
}