I have a website under construction with an external script from phpjabbers.com, it only loads when I refresh the page. I tried searching for a solution but nothing seems to work. The console in FF didn't give any errors.
The website is http://www.lowie-design.be/test/salon/index.html,
then you can click the menu-button and then 'Verhuur'.
When you go directly to the page http://www.lowie-design.be/test/salon/verhuur.html it works fine.
The script is included on this way within the body where it should appear:
<script class="verhuur-script" type="text/javascript" src="http://www.salon-weddings.be/script/index.php?controller=pjFrontEnd&action=pjActionLoad"></script>
Everything works fine after I refresh the Verhuur-page.
Is the second page being loaded by ajax?
When you go straight to the link these scripts are at the bottom
<script src="js/jquery-1.11.1.js">
<script src="js/hammer-v=1.js">
<script src="js/barba.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js">
<script src="js/MagicScroll.js">
<script src="js/MagicScrollAnimations.min.js">
<script src="js/masonry.js">
<script src="js/main.min-v=1.41.js">
<script type="text/javascript">
<script type="text/javascript" src="http://salon-weddings.be/script/core/third-party/pj_jquery/1.11.2/pjQuery.min.js">
<script type="text/javascript" src="http://salon-weddings.be/script/core/third-party/pj_validate/1.10.0/pjQuery.validate.min.js">
<script type="text/javascript" src="http://salon-weddings.be/script/core/third-party/pj_jquery_ui/1.9.2/js/pjQuery-ui.custom.min.js">
<script type="text/javascript" src="http://salon-weddings.be/script/core/third-party/pj_bootstrap/3.3.2/pjQuery.bootstrap.min.js">
<script type="text/javascript" src="http://salon-weddings.be/script/app/web/js/pjEquipmentRent.js">
When you go via the main menu link, you only get the following at the bottom of the page:
<script src="js/jquery-1.11.1.js">
<script src="js/barba.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js">
<script src="js/MagicScroll.js">
<script src="js/MagicScrollAnimations.min.js">
<script src="js/masonry.js">
<script src="js/main.min-v=1.41.js">
And the console app is producing "Hammer is not defined" from line 237 on "main.min-v=1.41.js"
A quick fix would be to add all the possible scripts to the main page so extra pages will look fine on ajax load.
An alternative way would be to make the main menu links an absolute link and make page loading do fancing fading in rather than loading a html page in a specific div.
Related
this is a very odd problem indeed and I hope it's simple. I cannot get a simple select and append to work in my html document, but it works when I'm in the chrome browser console.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script src="/js/script.js"></script>
<script>
$('[data-js="works"]').append("hello");
</script>
</head>
<body>
<div data-js="works"></div>
test
</body>
</html>
When I put that line of script in the console, hello appears above test. When I just open the page, test is there alone. I was running a script from this page earlier and when I tried to select an element it didn't work. I then went to inline script to see if it would even work there, no. I've seen if it works from inline script without the imported script, also no. Console has no bug information. I can print from that inline script to my console if I want, but this code still isn't running properly.
Doesn't work with my local httpserver and doesn't work just as a locally opened file.
This is because the script is executed before the page is loaded so the target div does not exist yet.
The solution is to wait for the page to be fully loaded before doing something.
The $ function can be used for this. Give it a callback and it will be executed once the page is loaded.
You can also use window.addEventListener("load", callback); that doesn't need jQuery.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script>
$(function(){
$('[data-js=works]').append("hello");
});
</script>
</head>
<body>
<div data-js="works"></div>
test
</body>
</html>
Another solution can be to insert your script at the end of the page. It is not as neat though in my opinion.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
</head>
<body>
<div data-js="works"></div>
test
<script>
$('[data-js=works]').append("hello");
</script>
</body>
</html>
Try the following, hope it will solve your problem
(function($) { // This will solve namespace problem (if any)
// Write your JQuery code here
})(jQuery);
Either you put the .js file at the end of the body or put your JS code between $(document).ready(function(){ //code inside })
I have the onclick event: onclick="javascript:_stats_content('my_bets');" which works fine.
This loads new content into a div.
However I want to set a default piece of content to load when the page loads. I have attempted to do this with the code below, but it is not working:
<body onload="myFunction()">
<script>
function myFunction() {
_stats_content('my_bets'); // have also tried with 'javascript:' infront
}
</script>
Can anyone provide any solutions?
Thanks.
EDIT:
Upon reading comments, I have added type="text/javascript".
I also replaced with an alert() and it fails to show. I should note that I am using AngularJS to display the page so this might interfere. However the first onclick example works fine on the page, so I don't understand how onload would be any different.
EDIT2: This is an extract of code from the top of the page:
<head>
<script type="text/javascript">
function myFunction() {
alert("Hello! I am an alert box!!");
}
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="content/ext/msgbox/Scripts/jquery.msgBox.js"></script>
<link rel="stylesheet" type="text/css" href="content/ext/msgbox/Styles/msgBoxLight.css">
<script type="text/javascript" src="content/ext/qtip/jquery.qtip.min.js"></script>
<link rel="stylesheet" type="text/css" href="content/ext/qtip/jquery.qtip.min.css">
<script type="text/javascript" src="js/colors.js"></script>
<?php include './js/includer.php'; ?>
</head>
<body onload="myFunction()">
I have replaced with an alert to make it easier to troubleshoot, although the alert is still not showing. I think it's just an AngularJS related issue, guess I'll just have to figure this out.
Whilst I wasn't able to get this exact method to work, the reason for which I still have no idea. I imagine it's AngularJS interfering.
I used:
<img src="87.jpg" onload="javascript:_stats_content('my_bets');" width="0" height="0">
Just before the </body> tag and that worked.
how to refresh/reload only once after the page is loaded in jquery mobile. because am using wow slider and when it is loaded the data is getting dynamically but the ui is not correctly getting once the page is refreshed it is getting. Can someone help me for this thanks.
I found this... This works for me. May be it will work for you also. Just include this script in your 'data-role="page" div' available in your mobile jquery page.
Below is test1.html:
<body>
test <!--This link redirects to test.html but you will see 'test.html#' at address bar that means you page is reloaded once -->
</body>
test.html:
<body>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if(location.hash != 'test1.html'){
location = 'test.html#';
}
});
</script>
</body>
I'm trying to install SoundManager's 360Ui player.
But i cant seem to nail it.
This is the jQuery code in my header:
<script type="text/javascript" src="wp-content/themes/medium/includes/js/soundmanager2-nodebug.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/excanvas.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/berniecode-animator.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/360player.js" charset="utf-8"></script>
...
<script type="text/javascript">
//some soundmanager settings
soundManager.url = 'wp-content/themes/medium/swf/';
soundManager.flashVersion = 9;
soundManager.useHTML5Audio = true;
soundManager.debugMode = false;
</script>
And the HTML call:
<div class="ui360">
<!-- dynamically-inserted block -->
<div class="ui">
<canvas class="sm2-canvas"></canvas>
<span class="sm2-360btn"></span>
<div class="sm2-timing"></div>
<div class="sm2-cover"></div>
</div>
<!-- /UI -->
<a href="http://**.**.**.**:8000/live">
</div>
For some reason the small play button appears and a second later disappears.
I'm looking to place the big player demo but i cant seem to
properly initiate that player.
All js files and css files from Demo folder are registered.
My Website
Its supposed to appear on the left panel.
if you examine the firebug console you will see that a GET request to http://tranceil.fm/new/readerPlayer.php return a 301 redirect, that might be causing the issue
I know this was asked a couple of years ago, but I was stuck on the same thing and here is how I solved it.
There is a second CSS file called 360player-visualization.css that you need to include.
<link href="360-player/360player.css" rel="stylesheet">
<link href="360-player/360player-visualization.css" rel="stylesheet">
Then in the HTML, include ui360-vis class name as well.
<div class="ui360 ui360-vis">
</div>
Just as you had it, you should also have a custom CSS to increase the size of the player:
.ui360,
.sm2-360ui {
width:250px;
height:250px;
}
And as you had it, the three required JS files:
<script src="360-player/script/berniecode-animator.js"></script>
<script src="soundmanager2-nodebug-jsmin.js"></script>
<script src="360-player/script/360player.js"></script>
I have an ASP.net MVC 4 web application (Visual Basic). On the _Layout.vbhtml shared view I have a small bit of javascript at the very bottom of the code designed to hide a loading div and display the main page content once everything has loaded.
Here is part of the .vbhtml file:
<!-- JQuery & Javascript Loading -->
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymain", "~/bundles/bootstrap", "~/bundles/lib", "~/bundles/gebo_dashboard")
#RenderSection("scripts", required:=False)
<!-- Close loading page -->
<script type="text/javascript">
$(document).ready(function () {
//* show all elements & remove preloader
alert("Hello Ready");
setTimeout('$("html").removeClass("js")', 1000);
});
</script>
</div>
</body>
And here is the produced html:
<!-- JQuery & Javascript Loading -->
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery/jquery.ui.touch-punch.js"></script>
<script src="/Scripts/jquery/jquery.ui.totop.js"></script>
<script src="/Scripts/jquery/jquery.easing.1.3.js"></script>
<script src="/Scripts/jquery/jquery.debouncedresize.js"></script>
<script src="/Scripts/jquery/jquery.cookie.js"></script>
<script src="/Scripts/jquery/jquery.qtip.js"></script>
<script src="/Scripts/jquery/jquery.colorbox.js"></script>
<script src="/Scripts/jquery/jquery.jBreadCrumb.1.1.js"></script>
<script src="/Scripts/jquery/jquery.actual.js"></script>
<script src="/Scripts/jquery/jquery.imagesloaded.js"></script>
<script src="/Scripts/jquery/jquery.wookmark.js"></script>
<script src="/Scripts/jquery/jquery.mediaTable.js"></script>
<script src="/Scripts/jquery/jquery.peity.js"></script>
<script src="/Scripts/jquery/jquery.flot.js"></script>
<script src="/Scripts/jquery/jquery.flot.pie.js"></script>
<script src="/Scripts/jquery/jquery.flot.resize.js"></script>
<script src="/Scripts/bootstrap/bootstrap.js"></script>
<script src="/Scripts/bootstrap/bootstrap.plugins.js"></script>
<script src="/Scripts/lib/jquery-mousewheel.js"></script>
<script src="/Scripts/lib/antiscroll.js"></script>
<script src="/Scripts/lib/fullcalendar.js"></script>
<script src="/Scripts/lib/ios-orientationchange-fix.js"></script>
<script src="/Scripts/lib/list.js"></script>
<script src="/Scripts/lib/list.paging.js"></script>
<script src="/Scripts/lib/prettify.js"></script>
<script src="/Scripts/lib/sticky.js"></script>
<script src="/Scripts/gebo/gebo_common.js"></script>
<script src="/Scripts/gebo/gebo_dashboard.js"></script>
<!-- Close loading page -->
<script type="text/javascript">
$(document).ready(function () {
//* show all elements & remove preloader
alert("Hello Ready");
setTimeout('$("html").removeClass("js")', 1000);
});
</script>
</div>
</body>
When I load up the page and view it in a browser, the $(document).ready function never fires and so leaves the loading div visible.
I have tested the script section by placing an alert outside of the $(document).ready function, both before and after and the alerts fire of exactly the way I'd expect them to. However the alert inside of the $(document).ready function never shows, indicating that the function never runs.
I have also tried using the pageLoad() function with no luck too.
Does anyone know why this refuses to work?
Ah, i've just found the issue. I've been porting a template into my ASP.net project and there was a single javascript error on the page according to Firebug. Not sure how I missed it, but solving the error has fixed the issue. :)