Newbie here, so please forgive me if this is a simple question:
I've got a single-page website using pafigy to hash the urls. When the page is first loaded, it pulls in the "home.html" file into the content div.
The "home.html" content contains scripts (jquery cycle) that need to run when it is loaded into the "content" div of the index page. If I link to the cycle plugin and jquery libraries in the "home.html" page, it loads into the "content" div VERY slowly. So, I load the libraries on the main page and reference them in the "home.html" page.
It works fine when the site is initially loaded; however, if I click another menu item and then try to return to "#home" (either with the back button or with a link to "#home"), it loads the content from "home.html", but doesn't load the cycle plugin.
So, I know I need to refresh/reload the javascript in the "content" div, but I'm not sure how to go about doing that. Any help or words of wisdom would be greatly appreciated.
Here's the pagify script on the index.html page:
<script type='text/javascript'>
$(document).ready(function() {
$('#content').pagify({
pages: ['home', 'food', 'wine'],
animation: 'fadeIn',
'default': 'home',
cache: true
});
});
</script>
And here is the Jquery Cycle script on the home.html page:
<script type='text/javascript'>
$(document).ready(function() {
$('#myslides').cycle({
fx: 'fade',
speedIn: 1000,
speedOut: 200,
delay: 1200,
cleartypeNoBg: true
});
$('#myslides2').cycle({
fx: 'scrollLeft',
speedIn: 700,
speedOut: 500,
delay: 1000,
cleartypeNoBg: true
});
});
</script>
Again, forgive me if my code is wonky or if I'm doing this completely wrong. I'm trying to learn as best I can and research, but I'm really stuck here.
Also, let me know if you need more code.
Thanks!
I think you have to fire Cycle after you load that page. Perhaps you can achieve that with the onChange option present on pagify.js. It should look something like this:
<script type='text/javascript'>
$(document).ready(function() {
$('#content').pagify({
pages: ['home', 'food', 'wine'],
animation: 'fadeIn',
'default': 'home',
cache: true,
'onChange': function(home) { //wrap 'onChange' in quotes
$('#myslides').cycle({
//Your Cycle Plugin Goes Here
});
}
});
});
</script>
Hope this idea helps.
Related
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.
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.
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>
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.
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.