Why does the CSS only apply when refreshed? - javascript

Div CSS loading issue
I have a simple php login system where the button calls on the JavaScript function loading() in order to display a div and an mp4 over the login. Kind of like a loading screen that always takes the same duration. The issue I have is whenever I load up the page the div and mp4 css isn't applied, resulting in it being displayed as shown in the video.
If I wait for the mp4 to end however and try again, (or even using CTRL + F5 to refresh) it fixes the issue and displays normally.
Am I doing something wrong resulting in this?
Any help would be much appreciated, thanks.
function loading() {
var overlay = document.getElementById("overlay");
overlay.style.display = 'flex';
}
.overlay {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #62a6ff;
width: 350px;
height: 350px;
border-radius: 40px;
border-color: #85baff;
border-style: solid;
border-width: 7px;
box-shadow: 0px 0px 10px 2px #000000;
}
.videoframe {
margin-top: 25%;
margin-left: 7%;
width: 300;
height: 169;
box-shadow: 0px 0px 10px 2px #000000;
background-color: #000000;
}
.backvideo {
width: 300;
height: 169;
}
<input class="button" id="submit" type="submit" value="Login" onclick="loading()">
<br>
<br>
<div id="pagechange2">SignUp</div>
</form>
</div>
<div id="overlay" class="overlay" style="display:none">
<div id="videoframe" class="videoframe">
<video class="backvideo" autoplay muted crossOrigin="anonymous">
<source src="videos/background3s.mp4" type="video/mp4">
</video>
</div>
</div>
Screenshot

I fixed it and got it to work.
I changed the following:
<video class="backvideo" autoplay muted crossOrigin="anonymous">
to:
<video id="backvideo" autoplay muted crossOrigin="anonymous">
I changed the class to an id
I then went to my CSS and changed .backvideo to #backvideo and then changed
.videoframe {
margin-top: 25%;
margin-left: 7%;
width: 300;
height: 169;
box-shadow: 0px 0px 10px 2px #000000;
background-color: #000000;
}
.backvideo {
width: 300;
height: 169;
}
to:
.videoframe{
margin-top: 25%;
margin-left: 7%;
width: 300px;
height: 169px;
box-shadow: 0px 0px 10px 2px #000000;
background-color: #000000;
}
#backvideo{
width: 300px;
height: 169px;
}
adding px to both the width and height values

Related

How to make a draggable handle (div) in a scrubber bar

I am trying to create and audio scrubber bar using a handle I can drag back and forth to a different part of the music.
The item that has to be draggable is the .handle, and .played will follow it.
I made the structure as below: JSFiddle
.scrubber {
width: 300px;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.8);
}
.scrubber>.bar {
background: transparent;
height: 10px;
}
.scrubber>.buffer {
position: absolute;
height: 10px;
background: rgba(255, 0, 0, 0.2);
top: 0;
}
.scrubber>.played {
position: absolute;
width:100px;
height: 10px;
background: red;
top: 0;
}
.scrubber>.played>.handle {
float: right;
width: 10px;
height: 10px;
margin-top: 0px;
margin-right: -5px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
}
<div class="scrubber">
<div class="bar"></div>
<div class="buffer"></div>
<div class="played">
<div class="handle"></div>
</div>
</div>
Any idea how to make it work?
you need to use
<input type="range" />
and stylize it as you need
codepen link: https://codepen.io/anon/pen/MLZpzg

Can I resize an swf object that is coming from an iframe?

I was wondering if is possible to resize an embedded swf object that is being display on a website from a remote location via iframe?
<style>
embed {
position: relative;
display: block;
width: 100%;
height: 100%;
}
</style>
<div id="myContainer" style="border: 0px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 2236px; max-height: 836px;">
<iframe scrolling="no" src="http://schools.nyc.gov" style="border: 0px none; margin-left: -233px; height: 479px; margin-top: -152px; width: 747px; " >
</iframe>
</div>
Never mind I found a way. Stream that code from another iframe.
<style>
body {
transform: scale(2.4);
transform-origin: 0 0;
// add prefixed versions too.
}
</style>
<div id="myContainer" style="border: 0px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 2236px; max-height: 836px;">
<iframe scrolling="no" src="http://schools.nyc.gov" style="border: 0px none; margin-left: -233px; height: 479px; margin-top: -152px; width: 747px; " >
</iframe>
</div>

Horizontal Div Scroll

I'm quite new to Jquery, I'm trying to implement horizontal scrolling on a div using the scrollLeft property, I'm not getting any error messages and nothing seems to be working, could someone explain why? Thanks in advance
this is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
$(document).ready (function(){
var pos = $("#container").scrollLeft();
$(".prev").click(function(){
$("#container").animate({
scrollLeft: pos - 200;
});
});
});
</script>
<style>
#container{
max-width: 938px;
height: 500px;
border: 2px solid black;
margin-left: auto;
margin-right: auto;
overflow: scroll;
/*display: table;*/
}
.picsdiv{
display: table-cell;
min-width: 286px;
padding-right: 80px;
height: 508px;
border: 2px solid pink;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 250px;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
border: 2px solid pink;
}
.next {
right: 170px;
border-radius: 3px 0 0 3px;
}
.prev{
left: 170px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
</style>
<body>
<div id="container">
<div class="picsdiv">
</div>
<div class="picsdiv">
</div>
<div class="picsdiv">
</div>
<div class="picsdiv">
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
</body>
take out the semi-colon on this line and it should work
scrollLeft: pos - 200;
firstly you must close script tag that include jquery file and also open another script tag for your jquery code
I just added a seperate script tag for the Jquery code and used the first one to only refer to the library and it now works. Thanks for all your help
You have done 2 mistakes in your code:
scrollLeft: pos - 200; should be like scrollLeft: (pos - 200), because you are passing an object as parameter
Write two <script> tags, one for jQuery, like below
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js" type="text/javacsript"></script>
And another for your custom java-script
<script type="text/javascript">
$(document).ready (function(){
var pos = $("#container").scrollLeft();
$(".prev").click(function(){
$("#container").animate({
scrollLeft: (pos - 200)
});
});
});
Because you can not write code inside element if you are using ths element as external reference.
Here is your complete running code
<html>
<head>
<style>
#container{
max-width: 938px;
height: 500px;
border: 2px solid black;
margin-left: auto;
margin-right: auto;
overflow: scroll;
/*display: table;*/
}
.picsdiv{
display: table-cell;
min-width: 286px;
padding-right: 80px;
height: 508px;
border: 2px solid pink;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 250px;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
border: 2px solid pink;
}
.next {
right: 170px;
border-radius: 3px 0 0 3px;
}
.prev{
left: 170px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div id="container">
<div class="picsdiv">
</div>
<div class="picsdiv">
</div>
<div class="picsdiv">
</div>
<div class="picsdiv">
</div>
<a class="prev"><</a>
<a class="next">></a>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready (function(){
var pos = $("#container").scrollLeft();
$(".prev").click(function(){
$("#container").animate({
scrollLeft: (pos - 200)
});
});
});
</script>
</html>

HTML audio player timeline functionality add

I am trying to add HTML audio player. I applied a code there play pause working. I need to add timeline functionality here. But don't know how to do that. Here another problem also I don't know how can I apply play pause in same button. Please help me. Below is my code. sample
#audioplayer{
width: 480px;
height: 60px;
margin: 50px auto auto auto;
border: solid;
}
#pButton{
height:60px;
width: 60px;
border: none;
background-size: 50% 50%;
background-repeat: no-repeat;
background-position: center;
float:left;
outline:none;
}
.play, .play:hover, .pause:focus{background: url('https://img.pranavc.in/20') ;}
.pause, .pause:hover, .play:focus{background: url('https://img.pranavc.in/30') ;}
#timeline{
width: 400px;
height: 20px;
margin-top: 20px;
float: left;
border-radius: 15px;
background: rgba(0,0,0,.3);
}
#playhead{
width: 18px;
height: 18px;
border-radius: 50%;
margin-top: 1px;
background: rgba(0, 0, 0,1);
}
<audio id="player" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
<div id="audioplayer">
<button id="pButton" class="play" onclick="document.getElementById('player').play()"></button>
<button id="pButton" class="pause" onclick="document.getElementById('player').pause()"></button>
<div id="timeline">
<div id="playhead"></div>
</div>
</div>
I use javascript, and change the dom and css.
You need to learn audio event and property.
var audio = document.getElementById("player");
var btn = document.getElementById("pButton");
btn.addEventListener("click", function(){
if (audio.paused) {
audio.play();
btn.classList.remove("pause");
btn.classList.add("play");
} else {
audio.pause();
btn.classList.remove("play");
btn.classList.add("pause");
}
});
var playhead = document.getElementById("playhead"); audio.addEventListener("timeupdate", function(){ var duration = this.duration; var currentTime = this.currentTime; var percentage = (currentTime / duration) * 100; playhead.style.left = percentage * 4 + 'px'; });
#audioplayer{
position: relative;
width: 480px;
height: 60px;
margin: 50px auto auto auto;
border: solid;
}
#pButton{
height:60px;
width: 60px;
border: none;
float:left;
outline:none;
}
#pButton.pause {
background: url('https://img.pranavc.in/20') no-repeat;
background-size: 56px;
background-position: center;
}
#pButton.play {
background: url('https://img.pranavc.in/30') no-repeat;
background-size: 56px;
background-position: center;
}
#timeline{
width: 400px;
height: 20px;
margin-top: 20px;
float: left;
border-radius: 15px;
background: rgba(0,0,0,.3);
position: relative;
}
#playhead{
width: 18px;
height: 18px;
border-radius: 50%;
margin-top: 1px;
background: rgba(0, 0, 0,1);
position: absolute;
left: 0px;
}
<audio id="player" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
<div id="audioplayer">
<button id="pButton" class="pause"></button>
<div id="timeline">
<div id="playhead"></div>
</div>
</div>
You need to add Javascript code on page to have this functionality. You can extract the code you want from this code (Nicely explained).
https://www.developphp.com/video/JavaScript/Audio-Play-Pause-Mute-Buttons-Tutorial
https://www.developphp.com/video/JavaScript/Audio-Seek-and-Volume-Range-Slider-Tutorial
<audio controls>
<source src="Link.mp3" type="audio/mpeg">
</audio>
Try the above Code. Note: The audio tag is not supported in Internet Explorer 8 and earlier versions.
Check this link : http://www.w3schools.com/tags/tag_audio.asp

How would I fix elements moving due to an element animating above?

I am getting an error with my website. I cannot seem to figure out why the 3 buttons below the title images are moving while the 2nd title picture is animating. My goal is to get the 3 buttons below the titles to stay where they are when the title2 is animating. The animation is a constant shrink/grow and is called pulse. Here is all of my code, its messy but this is just for me to learn.
<!DOCTYPE html>
<html>
<head>
<title>Test Website</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="scripts/snow.js"></script>
<style type="text/css">
body
{
background-color: black;
background-image: url("res/bg.png");
background-repeat: no-repeat;
}
div.button1
{
width: 600px;
position: static;
height: 150px;
margin: 30px 50px;
background-image: url("res/button1.png");
border: 1px solid #FF0030;
border-radius: 55px;
/*opacity:0.4;*/
/*filter:alpha(opacity=40);*/
}
div.button2
{
width: 600px;
height: 150px;
margin: 30px 50px;
background-image: url("res/button2.png");
border: 1px solid #00B7FF;
border-radius: 55px;
/*opacity:0.4;*/
/*filter:alpha(opacity=40);*/
}
div.button3
{
width: 600px;
height: 150px;
margin: 30px 50px;
background-image: url("res/button3.png");
border: 1px solid #00FFD5;
border-radius: 55px;
/*opacity:0.4;*/
/*filter:alpha(opacity=40);*/
}
div.button1:hover
{
transition: all 0.2s ease-in;
-webkit-stroke-width: 5.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
box-shadow: 1px 0px 20px #000000;
border: 2px solid #FF0030;
}
div.button2:hover
{
transition: all 0.2s ease-in;
-webkit-stroke-width: 5.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
box-shadow: 1px 0px 20px #000000;
border: 2px solid #00B7FF;
}
div.button3:hover
{
transition: all 0.2s ease-in;
-webkit-stroke-width: 5.3px;
-webkit-stroke-color: #FFFFFF;
-webkit-fill-color: #FFFFFF;
box-shadow: 1px 0px 20px #000000;
border: 2px solid #00FFD5;
}
#seventyfive{
font-size:100px;
font-weight:bold;
}
</style>
</head>
<body>
<center>
<img src="res/title.png"</img>
<img id="seventyfive"; src="res/title2.png"</img>
</br>
<div class="button1">
</div>
<div class="button2">
</div>
<div class="button3">
</div>
</center>
</body>
</html>
<script>
$(document).ready( function(){
$.fn.snow({ minSize: 8, maxSize: 15, newOn: 390, flakeColor: '#C800FF' });
});
(function pulse(back) {
$('#seventyfive').animate(
{
'font-size': (back) ? '100px' : '160px',
height: (back) ? "60%" : "50%",
width: (back) ? "60%" : "50%",
}, 700, function(){pulse(!back)});
})(false);
</script>
Thank you for reading my question, I am open to any answers/suggestions. Thank you all!
The vertical placement is going to be based on the size of whatever is above the items. So, if the item above it is 100px, then the button below will be at position 100px + margin-bottom. When that item is 200px, the button below will start at 200px + margin-bottom.
What you want is a div around your image tag that doesn't change size.
<div style="width: 500px; height: 500px">
<img id="seventyfive"; src="res/title2.png"</img>
</div>
PS, look into css animations vs. jquery.
Try
#seventyfive{
font-size:100px;
font-weight:bold;
position:absolute;
}
I'm not making any promises on it. Tried to run it through a fiddle first, but the pulse wasn't working. If that doesn't work then you could also try
CSS
.seventyfive {
position:absolute;
}
HTML
<div class="seventyfive">
<img src="res/title.png">
<img id="seventyfive"; src="res/title2.png">
</div>

Categories