Develop Reference

why my Javascript doesn't load from the beginning

I am a newbie to web development and I am trying to create a portfolio project for practice. My problem is that every time i reload the page it's like the js code load slow and the page shows some elements from the second page and then upload the js script.
$('#slides').superslides({
animation: 'fade',
play: 5000,
pagination: false
});
var typed = new Typed(".typed", {
strings: ["Computer Engineer.", "Data Scientist."],
typeSpeed: 90,
loop: false,
startDelay: 1000,
showCursor: false
});
I upload the code on http://jsfiddle.net/L34re768/5/ also i copy paste the superslides library that i use because the jsfiddle doesn't recognize it. I like to mention that this is not my first project that happen something like that, it happen again with other library of js. Any help please.

Play a Javascript player from HTML button

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>

jQuery image slider stops working after page sliding

I'm having a trouble with a jQuery image slider that works only the first time i open its page !
I have one main page, that includes via Ajax three page portions (Home, Presentation and Contact), the home portion contains the image slider !
To move through the pages, i use another jQuery page slider which includes the right portion and plays a sliding animation to show it !
So when i go for example from the home page to the presentation page, and then comeback to home ... the image slider isn't working anymore, and sometimes doesn't even appear !
What does it mean ?
How can i make sure the script is reloaded after the page slider finishes the transition, cause i think the problem comes from it ?
$(document).ready(function() {
$('#slides').slidesjs({
width: 700,
height: 300,
play: {
active: false,
auto: true,
interval: 3000,
swap: true
}
});
$(".menuButton").click(function() {
var page = $(this).attr("id");
var cont = $("#container");
var cont1 = $("#container1");
cont1.load("parts/"+page+".html", function() {
cont.hide("slide", {direction:"right"}, function() {
cont1.show("slide", {direction:"left"});
});
});
});
});
Thank you.

If the script is included in the portions loaded by ajax, it won't run (ajax loaded scripts are not ran by default). So basically, after the success event, just call the functions from the script.

How to make a slider autoscroll using jquery

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.

iDangero.us Pagination option after ajax load

I'm using idangero.us swiper as an image slider and I have the option to enable the pagination and keep track of what image I'm on. The page is loaded via ajax. Here's my script,
$('#a1').bind('pageshow', function(e){
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
grabCursor: true,
paginationClickable: true })
});
Now when the page is loaded in the DOM, I get the swiper's effects and the pagination is visible, but it doesn't track my images unless I navigate away then go back. Any idea on why this is?

Ah, well now I feel like an idiot. Nothing wrong with how it was calling the swiper, it was bad html. My structure was messed up and was affecting how the swiper would work.