Jump to content

HappyPappy

Members
  • Posts

    5
  • Joined

  • Last visited

HappyPappy's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. I see the new code has been added. Thank you so much everyone for all your help. This looks now really professional compared to my "reloading" way of doing things. Now I guess I'm going to have to get a really good JS book so I can be a wizard like you guys.. J
  2. YES... I'm sorry, I should of explained. The cut I did feels cheap because it leaves the page while "reloading". What I want is for the video to fade back to original image as it's finishing as mentioned above. Just not sure how to do it. I appreciate everyone's help... I really do. Kind of learning on my own. I just started learning HTML/ CSS back in November using CodeAcademy and finding great people on YouTube like Ralph Phillips. As far as JS is concerned, I've started since March. JS not the easiest to comprehend for me..but I'm determined to learn it. When I run into a road block, I try and figure out how they did it. Fun learning about onscroll & smooth scrolling animation, toggle, sliders, sticky navigations, paginations, etc. First time I've been on a forum like this. I'm glad there's help for people like me. J
  3. Well I guess the easiest way is to reset the source of the video on the ended event so that it returns to the beginning but it seems cheap. Hopefully someone can help me figure this out. <script type="text/javascript"> $(document).ready(function(){ $("#vid1").bind('ended', function(){ location.href="#"; }); }); </script>
  4. Needing some help. Fairly new to JS. Can someone help me figure out after my image (imgdiv3) fades to video (vid1) how to return back to image (imgdiv3) after the video is done playing? Below is my code: JS var imgdiv1;var imgdiv2;var imgdiv3;var img4;var vid1;var out;var fade = 100;window.onload = function(){imgdiv1 = document.getElementById('imgdiv1');imgdiv2 = document.getElementById('imgdiv2');imgdiv3 = document.getElementById('imgdiv3');img4 = document.getElementById('img4');vid1 = document.getElementById('vid1');out = document.getElementById('out');img4.onclick = fader;function fader(){out.innerHTML = 'fade: '+ fade;img4.onclick = null;if (fade > 0){fade = fade - 2;imgdiv1.style.opacity = fade/100;imgdiv2.style.opacity = fade/100;imgdiv3.style.opacity = fade/100;img4.style.opacity = fade/100;img4.style.filter = 'alpha(opacity=' + fade + ')';setTimeout(fader,20);} else {out.innerHTML = 'start video';setTimeout(function(){if(vid1.readyState > 0){vid1.play()}},1000);}}} HTML <div id="two"> <div id="viddiv"> <video id="vid1"> <source src="Video/92088122.mp4" type="video/mp4"> <source src="Video/92088122.oggtheora.ogv" type="video/ogg"> <source src="Video/92088122.webmsd.webm" type="video/webm"> </video> </div> <div id="imgdiv3"> </div> <div id="imgdiv2" class="typeface-js" style="font-family: StratumNo1-Regular">Lorem Ipsum </div> <div id="imgdiv1"> <div id="lang">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div> </div> <div id="imgdiv4"> <img id="img4" src="PB2.png"/> </div> <div id="out"> </div> </div> CSS #two{ position: relative; background-color: white; height: 850px; position: relative; z-index: 7; overflow: hidden;}#vid1{ width: 100%; height: 870px; min-width: 1100px;}#viddiv{ text-align: center; margin: 0 auto; max-width: 100%;}#imgdiv1{ position: absolute; top: 220; left: auto; right: auto; border: 1px solid transparent; width: 100%; height: 75px; min-width: 900px;}#lang{ position: relative; top: 0; margin-left: auto; margin-right: auto; border: 1px solid transparent; width: 60%; text-align: center; height: 75px; font-size: 20px; color: #83849d; font-family: HelveticaNeue,helvetica,arial,sans-serif; font-weight: 100; line-height: 1.3; text-align: center; letter-spacing: -1px; word-spacing: 2px; min-width: 900px;}#imgdiv2{ position: absolute; top: 70; left: 0; border: 1px solid transparent; width: 100%; text-align: center; margin: 100 auto; height: 40px; font-family: StratumNo1-Regular,HelveticaNeue,helvetica,arial,sans-serif; letter-spacing: -1px; font-weight: normal; line-height: normal; text-align: center; color: #3d405f; font-size: 36px; min-width: 1100px;}#imgdiv3{ border: 1px solid transparent; position: absolute; background-image: url("/Volumes/My Passport/PV/PV/Pics/Comp6.1.png"); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: cover; top: 0; left: 0; width: 100%; height: 800px; min-width: 1100px;}#img3 { margin-top: 40px; z-index:2;}#imgdiv4{ position: absolute; top: 0; left: 0; border: 1px solid transparent; width: 100%; text-align: center; margin: 100 auto; height: 730px; min-width: 1100px;}#img4 { margin-top: 270px; z-index:2; } Sincerely, J
×
×
  • Create New...