IndianaGuy

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.

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">

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.

Thank you

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>

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.

Awesome and thank you. Also, thx for the link. I didn't know that and definitely will be neat to learn about it.

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>";
        }

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";
}

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?

its really short lol

<audio id="media-video" onended="myEnd()" controls >
<source src="audio/<?echo $Story;?>">
</audio>

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...

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

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

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.

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

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();
}

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

Do you care to add just a little more info so I can research the right thing? Thank you

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();
    }

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?

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> 

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;
{

Great ideas worth exploring and doing some research. Thank you all very much.

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