New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Having problems starting audio. #43

Open
alexanderjhs opened this Issue Feb 7, 2018 · 10 comments

Comments

Projects
None yet
3 participants
@alexanderjhs

alexanderjhs commented Feb 7, 2018

I cannot start the API from PHP If I place jquery and all the other scripts in the end of my body html. So It has to be above the php script for audio/quran to work. Do you know what causes this problem?

@iBasit

This comment has been minimized.

Contributor

iBasit commented Feb 8, 2018

Can you post your code here please.

@alexanderjhs

This comment has been minimized.

alexanderjhs commented Feb 16, 2018

<!doctype html>

<!-- Custom CSS -->
<link rel="stylesheet" href="assets/css/custom.css">
<!-- IonIcons CSS -->
<link rel="stylesheet" href="assets/css/ionicons.css">

<link rel="stylesheet" href="assets/css/_staged-donations.scss">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link src="assets/fonts/ionicons.eot">
<link src="assets/fonts/ionicons.svg">
<link src="assets/fonts/ionicons.ttf">
<link src="assets/fonts/ionicons.woff">

<title>Skien Moske</title>
<script> (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/nb_NO/sdk.js#xfbml=1&version=v2.12'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>
<!-- Top bar -->
<div id="top-bar">
    <div class="container">
        <div class="top-bar-left">
            <div class="navbar-logo">
               <a href="#" class="navbar-brand">
               Skien Moske
               </a>
            </div>
        </div>
        <div class="top-bar-right">
            <ul class="navbar-nav">
                <li class="nav-item phone-number">
                    <a href="tel:+4748353605" class="nav-link"><i class="ion-ios-telephone"> +47 483 53 605</i></a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link btn btn-primary" href="lyd.php" target="_blank"><i class="ion-ios-musical-notes"> Hør På Koranen</i></a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- End of Top bar -->

<!-- Nav -->
<nav class="navbar navbar-expand-md navbar-light fixed-top">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="index.html">Forsiden</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Tjenester
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="ekteskap.html">Ekteskap</a>
                    <a class="dropdown-item" href="undervisning.html">Undervisning</a>
                    <a class="dropdown-item" href="skolebesok.html">Skolebesøk</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Utdannelse</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Multimedia
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="bilde.html">Bilde</a>
                    <a class="dropdown-item" href="video.html">Video</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nedlastning
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="litteratur.html">Islamsk litteratur på norsk</a>
                    <a class="dropdown-item" href="lenker.html">Nyttige Lenker</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="nyhetsarkiv.html">Nyhetsarkiv</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Om Oss
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="about.html">Om Oss</a>
                    <a class="dropdown-item" href="kontakt.html">Kontakt oss</a>
                </div>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="donasjon.html">Donasjon</a>
            </li> 
        </ul>
    </div>
</nav>
<!-- End of Nav -->
<div class="ekt-left">
    <div class="container">
        <div class="row no-gutters">
            <div class="col">
                <div class="ekt-left-body">
                    <h3>Quran</h3>
                    <div class="style-three"></div>
                    <?php

################## DO NOT EDIT BELOW THIS ###################################
if (!$api_url)
{
die('missing vaules, please fill the configuration values and try again!');
}
$_REQUEST['apiKey'] = $api_key;
$urlstring = NULL;
build_string($_REQUEST, $urlstring);
$ch = curl_init($api_url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_POST, 0);
curl_setopt($ch, CURLOPT_POSTFIELDS, $urlstring);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$data = curl_exec($ch);
curl_close($ch);
print $data;
function build_string ($array, &$urlstring)
{
foreach ($array as $key => $value)
{
if (is_array($value))
{
foreach ($value as $key2 => $value2)
{
$urlstring .= $key . '[' . $key2 . ']=' . $value2 . '&';
}
}
else
$urlstring .= "$key=$value&";
}
}
?>

                </div>
            </div>
        </div>
    </div>
</div>


<hr class="style-two">
<!-- FOOTER -->
<div id="footer-wh-body">
    <footer>
        <div class="container">
           <br>
            <div class="footer-body row">
                <div class="left col-6">
                    <ul class="navbar-nav">
                        <h3>Snarvei linker</h3>
                        <div class="style-three"></div>
                        <li class="nav-item">
                            <a href="ekteskap.html" class="nav-link" title="Ekteskap">Tjenester</a>
                        </li>
                        <li class="nav-item">
                            <a href="utdannelse.html" class="nav-link" title="Utdannelse">Utdannelse</a>
                        </li>
                        <li class="nav-item">
                            <a href="bilde.html" class="nav-link" title="Bilde">Multimedia</a>
                        </li>
                        <li class="nav-item">
                            <a href="litteratur.html" class="nav-link" title="Nedlastning">Nedlastning</a>
                        </li>
                        <li class="nav-item">
                            <a href="nyhetsarkiv.html" class="nav-link" title="Nyhetsarkiv">Nyhetsarkiv</a>
                        </li>
                        <li class="nav-item">
                            <a href="about.html" class="nav-link" title="Om Oss">Om Oss</a>
                        </li>
                        <li class="nav-item">
                            <a href="donasjon.html" class="nav-link" title="Donasjon">Donasjon</a>
                        </li>
                    </ul>
                </div>

                <div class="right col-6">
                    <h3>Finn veien til oss</h3>
                    <div class="style-three"></div>
                    <div id="map"></div>
                </div>
            </div>
        </div>
    </footer>
    <span class="hr"></span>
    <div class="container">
        <div class="bottom-footer row">
            <div class="bottom-left col">
                <p>&copy; Skien Moske 2018 &middot; Made By &#10084; For <span style="font-size: 20pt;">&#65010;</span></p>
            </div>

            <div class="bottom-right col float-right">
                <div class="fb-like" data-href="https://www.facebook.com/SkienMoske/" data-width="200px" data-layout="standard" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>
            </div>
        </div>
    </div>
</div>

    
<!-- Bønnetider Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <img src="assets/img/bonnetider.jpg" alt="Bønnetider">
            </div>
            <div class="">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Lukk den!</button>
            </div>
        </div>
    </div>
</div><!-- End of Modal -->

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBvjWfYsQHQr34LeagdArzu8NQwppPRKBY&callback=initMap">
</script>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- Custom JS -->
<script src="assets/js/style.js" type="text/javascript"></script>
<script src="assets/js/jquery.easyPaginate.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>


</body>
@alexanderjhs

This comment has been minimized.

alexanderjhs commented Feb 16, 2018

This is my code. I did a shortcut on it. And It was to display the Quran in another page without jQuery and so on. Looks like that this API doesn't work well with jQuery. Tried to modify jQuery, and tried to modify this API aswell. But nothing seemed to work :) Sorry for late answer, did not see that you had commented.

@iBasit

This comment has been minimized.

Contributor

iBasit commented Feb 16, 2018

There might be a conflict between jQuery versions and legacy code. The complete application is based on jQuery jQuery v1.11.1 — if you want to use latest jQuery, then you would have to update few functions, which they have removed, but I would recommend to use old jQuery, unless you are doing something really new which old does not support.

@ATouhou

This comment has been minimized.

ATouhou commented Feb 16, 2018

I think the confusion is somewhere else.
Can you please explain your problem exactly with screenshots and add the code to gists or something with proper formating Alexander :-)

@alexanderjhs

This comment has been minimized.

alexanderjhs commented Feb 17, 2018

skjermbilde1
skjermbilde2
skjermbilde3
skjermbilde4

@alexanderjhs

This comment has been minimized.

alexanderjhs commented Feb 17, 2018

The top bar supposed to be like that last image. But everything changes with the jquery when I put the php in there. Tried to do some tricks with CSS to fix all the wrongness in there, but still I do not feel comfortable

@ATouhou

This comment has been minimized.

ATouhou commented Feb 18, 2018

I don't exactly understand your question, but I don't think it is related to the API, but something fundamental about HTML/JavaScript.

You want the audio player in a fixed top location unless the person is on a certain place on the screen?

@iBasit

This comment has been minimized.

Contributor

iBasit commented Feb 18, 2018

It's a CSS issue.

There are two ways to solve this.

  1. Use Iframe to display Quran directly from GlobalQuran.com
  2. remove GlobalQuran CSS and add your own CSS (better to make modifications on GlobalQuran CSS)
@alexanderjhs

This comment has been minimized.

alexanderjhs commented Feb 22, 2018

ATouhou Thanks for tip.

And iBasit thanks very much for the tips. I could use iframe but I want the site to be more proffesional. You know what, I havent thought of removing CSS
Thanks again :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment