When I include separate js files in my webpage, the functions are not called when previewing the local page in my browser.
I'm trying to implement these page transitions.
http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/
I put the supporting files in the right place, and included them correctly in the head section of my page. I'm pretty sure of that because the css is working fine. Only the js is not.
I dont think I should need something like WAMP server right? Because its only js. The inline js in the same page is also working fine...
When I click my link, it does open the next page, but without transition. Also it adds "Error:0" at the top of the page.
What can I do to get these transitions working?
EDIT
My code looks like this.
<!DOCTYPE html>
<html>
<head>
<link href="css/transition.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/fasw.transitions.min.js"></script>
</head>
<body>
<a transt="flip" href="page2.html">Next</a>
</body>
</html>
I removed everything else from the page and still getting the same error. I view it in Chrome and Firefox, and get the same error in both.
Please check if it is happening because of any js conflicts. You can check it by removing the other js files that is included in the web page.
Check to make sure that you are referencing the Javascript files correctly from your HTML page. Try adding an alert statement to the top of the file, and reload the page - if you don't see the alert, then you're not referencing the file correctly.
alert("Hello.");
Related
I am given this code which should display an embedded small coupon version of this page https://weedmaps.com/deals#/1118217:
<script type="text/javascript">var coupon_id = 17811;</script>
<script type="text/javascript">var coupon_type = "deliveries";</script>
<script type="text/javascript" src="https://weedmaps.com/embed/coupon.js"></script>
I do not know how to add the JavaScript to the HTML correctly. I have placed the following scripts in the head section. But I don't understand how to have the coupon generate in the div I want it to. I have tried calling the JavaScript function, but I've never worked with JavaScript before. Could someone please help me embed this coupon.
I've taken a look at your script and first of all: it definitely should be placed inside the document and not into the <head> section because coupon.js is writing out html at the placement of the coupon.js script import.
In theory you just need to place the script and it should work but there are some problems:
You need to execute it on a web server - when running as a plain html file the script just tries to find the libraries in your file system which does not work.
It still would not work because it would still try to find some resources at your web-server. In mycase it the script tried to load http://localhost:63342/restpoints/deliveries/17811/deal which will not work
To prove 2. just try https://weedmaps.com/restpoints/deliveries/17811/deal with the correct domain. Then you are receiving correct JSON which is used to fill the coupon pane.
=> Consequently the script you were given has problems if it should be executable from domains different from "weedmaps.com"
Javascript can be between head tag but it advisable to put it below before the body closing tag, to allow your page contents loads first before loading javascript. Just import your javascript. and call out. Hope this was helpful.
<!DOCTYPE html>
<html>
<head>
</head>
var coupon_id = 17811;
The JS indicates it is looking for an element with an id of #weedCouponPane. Do you have this in your html? i.e.
<div id="weedCouponPane"></div>
I'm working on a website with play framework and I have a little problem.
I am using a main.scala.html page which includes a <script src="#routes.Assets.versioned("javascripts/jquery.js")"></script>
Then to create a page I use #main("pagename") {body content here}
The problem is that when I start the webserver it doesn't include the javascript file. It does work for the CSS however: <link href="#routes.Assets.versioned("stylesheets/main.css")" rel="stylesheet">
This is showing in chrome developer tool:
The jquery.js is located in: /public/javascripts/jquery.js
Does somebody know how to fix this? Thanks
I have put the script tags inside the body now and it works. Don't know why it doesnt work when I put it in the main.
TL;DR: my index.html declaration of jQuery with bokeh.js interferes with the ability for the script tags in the php page to manifest themselves into the div that they are supposed to be loaded into. Why?
I've been trying to embed the output of graph.create_html_snippet() from the python bokeh package. I was having so much trouble that I made a separate test html page just to post it to SO, when I discovered that my test page worked! Here it is:
<html>
<head>
<script src="js/bokeh.js"></script>
<script>
$(document).ready(function() {
$("#get_graph").click(function() {
$("#show_graph").load('hello.php');
});
});
</script>
</head>
<body>
<!-- click this to bring up graph -->
<div id="get_graph" style="width:100px;height:30px;background-color:#ddd;">Show graph</div>
<div id="show_graph"></div>
</body>
</html>
And hello.php is here:
<?php
echo 'hello';
?>
<script src="31b1ad52-e095-4ba1-89d0-69f0b898d677.embed.js" bokeh_plottype="embeddata" bokeh_modelid="31b1ad52-e095-4ba1-89d0-69f0b898d677" bokeh_modeltype="Plot" async="true"></script>
So now, confronted with the mystery of why it wouldn't work on my real page (not posted for brevity) and why it would work on my test page, I started subbing things in and out until I added this to the head of the my test page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
And then things stopped working. But then I realized, wait a minute, how did my original test page work in jQuery if I didn't give a script for jQuery in my <head>? I went back to my main page and deleted the JQuery script, and suddenly the embeddding worked okay. So I went into the bokeh.js script and found a bunch of calls to jQuery I don't quite understand.
Why is my declaration of jQuery interfering with bokeh.js? When I load the php page using a jQuery declared html page, the html element the php was loaded into will not have the script tags loaded into it, but all other php commands are okay. What's the deal? Since I solved the question while writing this, I guess my question is more out of curiosity/help for people who might run into the same thing, since embedding bokeh using php is one of the best applications for it.
Thanks for any help.
This is a recently discovered issue, you can track progress at:
https://github.com/ContinuumIO/bokeh/issues/554
There should be a point release that includes a fix for this very soon.
I have some troubles with display charts (jquery Charts) into a web.
I have two pages (1.html and 2.html). The first contain a listview that links with the second page. The 2.html displays the chart. Here is the problem: When page 2 is launched through page 1, the chart doesn't appear!! But if I reload the page 2.. so the chart appears!
If I work with an only page using "href=#page" references the chart works fine and it's displayed, but my intention is to have different html files, one of them with the listview and the other one with the chart. Is it possible?
I have tested many types of jquery charts and all of them had the same behavior.
Any idea?
thanks for all,
Best Regards.
Here the files:
1.html ----
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
</head>
<body>
<div data-demo-html="true">
<ul data-role="listview" data-inset="true">
<li>Chart</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js">/script>
</body>
2.html with the code into the reference (jqwidgets - chart_bar)
To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.
The most realistic solution would be to move all of your javascript into the original first HTML. Collect everything and put it inside a single js file, into a HEAD. Initialize it after jQuery Mobile has been loaded. I would also use that same index.js file and initialize it inside a HEAD of every possible other page.
Now you can ask me WHY?
Phonegap like jQuery Mobile is buggy, and sooner or later there's going to be an error and your app will fail (including loaded DOM) if your every js content is inside a single HTML file. DOM could be erased and Phonegap will refresh your current page. If that page don't have javascript that it will not work until it is restarted.
I've listed other ways to fix this problem (with examples) in my answer here: Why I have to put all the script to index.html in jquery mobile.
I am developing a mobile app using jQuery, jQuery mobile (and PhoneGap, but that is not relevant). Let's say I have two html pages: page1.html and page2.html. I am loading page2.html using $.mobile.changePage() from page1.html. The page div in page2.html (i.e., the div having data-role="page") contains javascript code that is specific to page2, which also gets loaded with page2.html. The code in page2.html looks something like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="conf-page" data-role="page">
<script type="text/javascript" charset="utf-8">
<!-- MY SCRIPT HERE ----->
</script>
<div data-role="header" style="height: 45px">
Now I want to break somewhere in the javascript code in page2.html. For the time being, I am using Firefox (16.0.2) and Firebug to develop and debug. When page2.html is loaded, I see the JS code of page2.html at two places in firebug Scripts list:
At jQuery.min.js/eval/MD5/
At jQuery.min.js/eval/seq/<#>
If I put a breakpoint somewhere in one of the codes, it get applied to the code in (1) above, but it is never hit when page2.html is loaded.
How to go about setting a breakpoint and breaking somewhere in the JS code in page2.html? I couldn't find anything relevant on the web, which makes me think that I must be missing something, as this must be a pretty common requirement.
Looks like I was searching for different terms. There has been some discussions on this problem in this site. Here are a few references:
dynamically loaded js function does not appear in Firebug js debugger
Scripts added via jQuery not visible in FireBug
Debugging scripts added via jQuery getScript function
A few other ones.
There are two solutions suggested in the above threads:
Most of these threads suggest the same solution: use the "debugger;" statement (w/o the quotes) twice in the code for the FireBug debugger to stop. I did that, and it was a partial solution: the firebug did break, but the variable stack was empty. So this wasn't very useful.
Put the script in a file, use an AJAX Get call to load the script with crossdomain set to true, and that gets the script file, loads it and the script file shows in debugger. That can be used now to set breakpoints etc. More useful than above.
Keeping open to see if there are other solutions.