I'm implementing an sticky audio player on a website and it's working fine. However, I'd like to create a play button, OnClick maybe, in HTML that would give a play in the player when the user clicked on it. I tried several codes and none worked.
The last one was this and it did not work either.
<button type="button" onclick="$(this).myPlayer();">Play</button>
In addition to the Javascripts and external CSS, which are before HEAD, the script that runs the player on the page (inline) is this.
<script>
jQuery(function($) {
$('body').myPlayer({
firstPlaying: 0,
autoplay: false,
shuffle: false,
//veryThin: true,
slideAlbumsName: true,
nowplaying2title: true,
roundedCorners: true,
//accentColor:"#cc181e", //008DDE
pluginPath: "player/",
playlist: [
{mp3:"player/music/mymusic.mp3", title:"My Song", artist:"Mine", album:"Single", cover:"player/music/cover.png"}
]
});
});
</script>
From what I was researching, many articles mention using the HTML5 tag "data- *" inside the button code. However, I could not use it correctly.
If anyone can help me, I appreciate it.
I may not have understood your problem correctly, but here is a snippet you can try to get this working:
<button type="button" id="play-music">Play</button>
In your script, you can write something like this:
<script>
$(document).ready(function() {
$("#play-music").click(function() {
$('body').myPlayer({ ... }); // Your code here
});
});
</script>
Related
Let me begin by saying I am NOT a developer. I work in digital banking and mainly focus on SEO and Marketing. I have embedded this demo into our live site for training and I would like it to close automatically when the demo is completed. Here is the script.
function Function29(){
$('#player').empty();
Lemonade.DemoPlayer.play({
demo: '750e8759-6fa1-45be-aa8a-03f02cbe45af',
container: $('#player'),
locale: 'en_US',
finishButtonText: 'Continue',
horizontalPadding: 25,
onFinish: function() {
$("#player").html(
"Click anywhere to continue"
);
// you can do anything when the game ends!
},
onStepChange: function (previousStep, currentStep, currentHotspot, totalSteps) {
// every time the scene changes, this event is called
},
});
}
Any help would be appreciated.
If by closing, you mean, hiding or removing the player container, which I'm assuming is #player,
you can simply call $('#player').remove();
Question: Did the $('#player').html('Click anywhere to continue'); do anything for you? If so, you can run $('#player').remove() from onFinish: function() {...} you have.
Can you add your HTML script to show more details? Thanks! I'll edit my response depending on that.
I seem to have a problem with the way jQuery-UI tabs and Datatables work together. I want to create a table that is scrollable and has information from a database.
When I enter the page for the first time it looks like this.
As you can see it looks like a normal table instead of one from Datatables.
When I reload the page again it looks like this.
This is roughly how I want it to look upon first load.
It also seems that it only works for the first table on the page.
I tested this multiple times on multiple pages with the same results.
I'm assuming this problem is because of jQuery-UI seeing as on another page it work perfectly and when I load in the page without jQuery-UI it works aswell.
This is the code:
//jQuery-UI
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
//DataTables
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
$('table.scrollable').DataTable({
"scrollY": "240px",
"scrollX": true,
"scrollCollapse": true,
"paging": false
});
});
</script>
The HTML is just a standard table loaded in through a while loop from a database.
To decrease loading times I've set up jQuery-UI in a way that it loads seperate files when a tab is clicked so that no unnecessary things are loaded at the start.
Any piece of help would be much appreciated thanks!
EDIT: Wanted to make a JSFiddle showcasing my problems but it basically works perfect there so I'm guessing the problem comes from the fact that I load it as seperate pages.
JSFiddle
I would advise the following code, expanding upon my comment.
$(function() {
$("#loading-voertuigen").show();
if ($(window).width() <= 1600) {
$('table.scrollable').DataTable({
"scrollY": "240px",
"scrollX": true,
"scrollCollapse": true,
"paging": false
});
} else {
$('table.scrollable').DataTable({
"scrollY": "240px",
"scrollCollapse": true,
"paging": false
});
}
$(window).resize(function() {
location.reload();
});
});
You were using $(document).ready() and it is not needed. The use of $(function(){}) already causes the jQuery to execute after the page is ready.
If need further help, please edit your post and include a more complete example.
Before anything else, let me say that I have looked at other similar questions here and I still can't figure this out.
I'm trying to build a website, using .NET MVC (razor) using a this free template I found online.
What I did, was to replace all the markup of my Index.chstml view with the html code of the template. Moved all the scripts and css files to the corresponding folders in my solution, and changed the html to correctly reference the new paths as required.
Needless to say that the original template works perfectly. But for some reason I really can't figure out I'm getting the error:
Uncaught TypeError: owl.owlCarousel is not a function
I looked at the developer tools (chrome) and the scrips are there, so the only thing I can think of is something related to the loading order. Off course I didn't change that, so I wonder if razor did it somehow.
This is how my script loading section looks like:
<script src="#Url.Content("~/Scripts/modernizr-2.6.2.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.easing.1.3.js")"></script>
<script src="#Url.Content("~/Scripts/bootstrap.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.waypoints.min.js")"></script>
<script src="#Url.Content("~/Scripts/owl.carousel.min.js")"></script>
<script src="#Url.Content("~/Scripts/main.js")"></script>
and the problem happens inside main.js, right here:
owl.owlCarousel({
items: 1,
loop: true,
margin: 0,
responsiveClass: true,
nav: true,
dots: true,
autoHeight: true,
smartSpeed: 500,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
navText: [
"<i class='icon-arrow-left2 owl-direction'></i>",
"<i class='icon-arrow-right2 owl-direction'></i>"
]
});
Thanks to everyone in advance.
Well, I feel a bit ashamed, but looks it was just a conflict between the scripts that the template uses, with the ones MVC razor includes by default.
I commented this at the Layout partial view:
##Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")#
and voila! I realized that my code was loading more scripts than the original template.
Thanks everybody.
I'm having an issue with jscrollpane loading into a div using the following function:
$(document).ready(function() {
$("#shopping").click(function(event){
$('#stage').hide();
$('#stage').load('pages/shopping.html', {}, function() { $(this).fadeIn(800); });
The above code is on the index page and I'm calling up the "shopping page" as you can see above.
I have four other links that call up pages, one page has a slideshow and I managed to load that one into the div simply by eliminating the Jquery repository link, but this page doesn't want to know.
On the "shopping" page I have the following script, I've searched most of the web and also on here, without success, but nobody else's solutions have worked for me.
What am I doing wrong?:
<script type="text/javascript" src="./js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="./js/jquery.jscrollpane.min.js"></script>
<link type="text/css" href="./css/jquery.jscrollpane.mod.css" rel="stylesheet" media="all" />
<script>
$(function()
{
$('.horizontal-only').jScrollPane(
{
showArrows: true,
arrowScrollOnHover: true,
horizontalArrowPositions: 'split',
hijackInternalLinks: false
}
);
});
Ok...
After some digging and trial and error, I've found the solution to my problem, hunting on the web and stack, I found something that worked and I thought for all those that are complete noobs, like me, in javascript and Jquery I'd post my findings.
Current call up on index page:
$(document).ready(function() {
$("#shopping").click(function(event){
$('#stage').hide();
$('#stage').load('pages/shopping.html', {}, function() { $(this).fadeIn(800); });
I added the following to my index page (this is the page that is calling up the other pages)
to the link of a specific page add:
$.ajaxSetup({async:false});
then add the jScrollPane function after your call up e.g:
$('#stage').jScrollPane(
{
showArrows: true,
arrowScrollOnHover: true,
horizontalArrowPositions: 'split',
hijackInternalLinks: false
}
);
So altogether it looks like this:
$(document).ready(function() {
$("#shopping").click(function(event){
$('#stage').hide();
//--added the async code here--//
$.ajaxSetup({async:false});
$('#stage').load('pages/shopping.html', {}, function() { $(this).fadeIn(800); });
//--moved the jscrollPane from the page I was calling to the index page code here--//
$('#stage').jScrollPane(
{
showArrows: true,
arrowScrollOnHover: true,
horizontalArrowPositions: 'split',
hijackInternalLinks: false
}
);
This seems to be working for me at the moment, now I just need to re-edit some css and it's good to go.
I've found another workaround:
I've added the following code to the index.html:
$(function()
{
var api = $('.horizontal-only').jScrollPane(
{
showArrows: true,
arrowScrollOnHover: true,
horizontalArrowPositions: 'split',
hijackInternalLinks: false
}
).data('jsp');
$('#shopping').bind(
'click',
function()
{
api.getContentPane().load(
'pages/shopping.html',
function()
{
api.reinitialise();
}
);
return false;
}
);
});
I also made the jsp load in a separate div layer, as it was causing some styling conflicts and i can't determine where the issue is but this works.
What I also had to do is hide the new div layer from the other calls
so basically:
$(#scroller).hide();
Thanks, I'm sure this isn't the best way, but as i've only had one reply on this issue, which was a question, think I've done rather well for a noob.
http://405pixels.gowerpowered.com
I have the slider, and I have been trying to figure out how to make the homepage autoslide?
I tried using firebug to locate the files... Located some .js files that contain some information about the homepage slider... but all the changes and everything I make seem to not be working...
This is a free template I found called BigFoot. I am really interested into learning about how this javascript would work that is why I downloaded in the first place... to learn from the template... If you could point me in the right direction that would be awesome.
Thanks,
Alex
You'll need to replace the actual photo swapping code with whatever you use but the rest will swap out each picture every 5 seconds.
$(document).ready(function() {
var next = $('#right-button');
next.click(function() {
$('#current-picture').fadeOut('fast');
$('#next-picture').fadeIn('fast');
...whatever code you use for this.
});
var scroll = setInterval(function() {
next.trigger("click");
if(picture is last) {
clearInterval(scroll);
}
}, 5000);
});
you are using flex slider so you can use the code below.
jQuery(window).load(function() {
jQuery('.flexslider').flexslider( {
pauseOnHover: true,
slideshow: false,
controlsContainer: ".flex-container"
} );
} );
actually this it the param you need to pass to make slider autostart
slideshow: false,
Let me know if you run into any other issues.