Jump to content

IndianaGuy

Members
  • Posts

    91
  • Joined

  • Last visited

Everything posted by IndianaGuy

  1. This is causing me a remarkable headache. I am hoping someone would be generous and gives me some guidance. Thank you I even tried to list the (<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">) as the first of the style sheets to be loaded. I tried it as the last one to be loaded. I even downloaded it and used it locally. The effects don't load unless I refresh the page. Could it possibly be a problem with the style sheet itself? thank you New update, the need for a page reload online happens when the page is being viewed on a mobile device. It shows up perfect the first time around on a desktop.
  2. Hello folks, I am hoping to get some guidance with this odd issue. My CSS page only loads after I get to a page and refresh it!. Here is what I mean Page1.php - A small form the user completes and on submit, it takes you to page 2 page2.php - Tells the user if they made the correct choice and gives them a link to page3.php on page3.php - The things I specified in my myStyles.css page only works after I reload page3.php and it also asks me "Are you sure you want to submit this form again?". There are no forms in page 2 or 3 nor are there any variables moved except from page 1 to page 2. I am utterly confused as to what would cause this! Thank you for any advice you may have. UPDATE: It's only the thing I used from the following library that require the page to be refreshed for them to work. <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
  3. Hello folks, I am hoping to get some guidance with this odd issue. My CSS page only loads after I get to a page and refresh it!. Here is what I mean Page1.php - A small form the user completes and on submit, it takes them to page2.php page2.php - Tells the user if they made the correct choice and gives them a link to page3.php on page3.php - The things I specified in my myStyles.css page only works after I reload page3.php and it also asks me "Are you sure you want to submit this form again?". There are no forms in page 2 or 3 nor are there any variables moved except from page 1 to page 2. I am utterly confused as to what would cause this! I just want page3.php to show up normally like any other page.
  4. IndianaGuy

    Unwanted shadow

    This is giving me a shadow and I am not sure why?. Also, can some one give me a link to the W3CSS library of fonts. Thank you <div class="w3-container"><p class="w3-medium w3-text-white w3-wide">my text.</p></div>
  5. I am looking for a FREE web development tool. Something that requires a little less technical skills. I have tried Aptana and Drupal. Both area very powerful tools, but I am spending hours just to learn my way around the basics. It took me a day of going through annoying stackoverflow posts just to get Aptana to run php files. (P.S I really dislike Stackoverflow). Thank you for any advice you might have.
  6. Awesome and thank you. Also, thx for the link. I didn't know that and definitely will be neat to learn about it.
  7. How do I make an entire row into an Array so I can send it back? this page was triggered from an Ajax request. Thank you Thank you $sql = "SELECT * FROM tblMedia WHERE Med_name= '$selected_expo' "; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) == 1) { $row = mysqli_fetch_assoc($result); // make the entire row into an array so I can send it back to Ajax request page } else { echo "<h3 class='ui-title'>Multiple records found.</h3>"; }
  8. I am getting closer. Ineed this to be in thetogglePlayPause section, not the initialize media player portion. Still needs organizing, but I am close. function togglePlayPause() { // If the mediaPlayer is currently paused or has ended the button status is paused. if (mediaPlayer.paused || mediaPlayer.ended) { // Change the button to be a pause button changeButtonType(playPauseBtn, 'images/icons-png/pause.png'); // Play the media $(".loader").show(); mediaPlayer.play(); mediaPlayer.addEventListener('canplay', hideLoading); mediaPlayer.addEventListener('canplaythrough', hideLoading); var Act = 'Play started'; //function in index page to record user action hitPlay(); } // Otherwise it must currently be playing else { // Change the button to be a play button changeButtonType(playPauseBtn, 'images/icons-png/play.png'); // Pause the media $(".loader").hide(); //console.log('he hit pause'); mediaPlayer.pause(); } function hideLoading() { document.getElementsByClassName("loader")[0].style.display = "none"; }
  9. Thank you for the information. That's great to know. I am a little confused. I am not trying to do anything that every single media file on mobile devices is not already doing! when play is clicked if media is ready, just play if it is not ready, show the loader until its ready then hide the loader! Should I start looking at readyState?
  10. its really short lol <audio id="media-video" onended="myEnd()" controls > <source src="audio/<?echo $Story;?>"> </audio>
  11. I have tried the preload attribute both ways. Here is what I have so far. The problem might be somewhere else. Thank you // Wait for the DOM to be loaded before initialising the media player document.addEventListener("DOMContentLoaded", function() { initialiseMediaPlayer(); }, false); // Variables to store handles to various required elements var mediaPlayer; // Other unrelated varaiable function initialiseMediaPlayer() { // Get a handle to the player mediaPlayer = document.getElementById('media-video'); // Get handles to each of the buttons and required elements playPauseBtn = document.getElementById('play-pause-button'); muteBtn = document.getElementById('mute-button'); progressBar = document.getElementById('progress-bar'); rewindBtn = document.getElementById('rewind-button'); // Hide the browsers default controls mediaPlayer.controls = false; // Add a listener for the timeupdate event so we can update the progress bar mediaPlayer.addEventListener('timeupdate', updateProgressBar, false); // Add a listener for the play and pause events so the buttons state can be updated mediaPlayer.addEventListener('play', function() { // Change the button to be a pause button changeButtonType(playPauseBtn, 'images/icons-png/pause.png'); }, false); mediaPlayer.addEventListener('pause', function() { // Change the button to be a play button changeButtonType(playPauseBtn, 'images/icons-png/play.png'); }, false); mediaPlayer.addEventListener('ended', function() { this.pause(); }, false); mediaPlayer.preload="auto"; mediaPlayer.addEventListener('canplay', hideLoading); mediaPlayer.addEventListener('canplaythrough', hideLoading); } //END MEDIA PLAYER PREP function hideLoading() { document.getElementsByClassName("loader")[0].style.display = "none"; } //more stuff...
  12. I tried it on a desktop and the loader shows up for a very short period of time them goes away. On the mobile device thou, it just stays there until I hit play, then is goes away
  13. ok, so now I need to add a way for the loader to show up when the user clicks plays and what you wrote will hide it when the media can beplayed. Am I thinking about this right? Right now, the loader is there when the pages loads and it stays there lol
  14. I have done that over the last couple of weeks. It's all how I want it. I just can't seem to add a something that will show up when the user clicks play and the device needs a few seconds to start playing. I am keeping track of the clicks and the testing shows the user hitting PLAY, PLAY, PLAY, PLAY not knowing the audio file needs to load. I am border line begging for help.
  15. I have wasted probably two weeks trying this and it's time to pay for it. I need a mobile friendly audio player. One that I can make adjustments to add events like what happens when a user clicks pause for example. I don't mind if there is one I can pay for. I just have to have it. Any help, suggestions,links, or things to lookup will be great. jPlayer looked promising but for the love of god, I could not find reasonable documentation on how to install it
  16. wooohoo. I learned a few things but now I am stuck lol conle.log is working on desktop. On a mobile device though, the loader just stays visible. Are those events not supported and how can I fix that? here is what I have so far. thank you //Add a listener to SHOW the loading bar mediaPlayer.addEventListener('loadstart', showLoader); console.log('load listener found'); //Add a listener to HIDE the loading bar mediaPlayer.addEventListener('canplay', hideLoader); console.log('can play listener found'); function showLoader() { $(".loader").show(); } function hideLoader() { $(".loader").hide(); }
  17. Perfect. I really do like it when people post a link like this. It opens up a new area to learn about and figure out the solution. Thank you
  18. Do you care to add just a little more info so I can research the right thing? Thank you
  19. I ma trying to make a div (class="loader") hidden all the time. It only shown up when the user hits 'play' on an audio file, then the div hides again when the file starts playing mediaPlayer here is obviously the audio tag. thank you mediaPlayer.play(); while(mediaPlayer.readyState >= 3) { $(".loader").show(); }
  20. Thank you I got the bottom margin figured out. I am not sure how to move the speaker icon to the right thou. Any idea?
  21. My HTML code (was not showing up in the original post <div class="polaroidCard"><img class="polaroidImg" src="images/rock600x400.jpg" alt="Coach"> <div class="polaroidText"><p>Tyson King</p> <input type="image" src="images/icons-png/audio-black.png" alt="Listen" value="Tyson_King.m4a" onclick="mySwitch(this)"> </div> </div> <div class="polaroidCard"><img class="polaroidImg" src="images/rock600x400.jpg" alt="Coach"> <div class="polaroidText"><p>Tyson King</p> <input type="image" class="polaroidBtn" src="images/icons-png/audio-black.png" alt="Listen" value="Tyson_King.m4a" onclick="mySwitch(this)"> </div> </div>
  22. Hello all. I am trying to place the audio-black.png button in the bottom right corner of the div and have a padding at the bottom to separate the next div. css file div.polaroidCard { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; width: 90%; border-radius: 1em 0em 0em 1em; float: left; height: 10em; // border: 0.1em solid green; background-color: #FFFFFF; } img.polaroidImg { border-radius: 0.8em 0em 0em 1em; width:25%; height:100%; float:left; } div.polaroidText { padding: 0.2em 0em 0em 0.4em; float: right; text-align: left; //border: 0.1em solid green; width: 73%; height: 9em; } .polaroidPlayImg{ width: 20em; height: 20em; {
  23. Great ideas worth exploring and doing some research. Thank you all very much.
  24. Lots of great points. I am getting over my head here and I am sure you will have a simpler solution for me. This is a simple thing. the user is listening to a media file. We absolutely have to know when the user stops listening to the audio file based on possible actions. Buttons to make the audio stop playing are easy to record the currentTime. However, what can we do about the current time when the window is closed? I am open to any solutions. multiple pages, iframes etc etc . All this is for mobile devices only. Thank you
×
×
  • Create New...