well i have website cut on parts, but i included inside css inside head tag and js in body but it does not works anyway
http://i.imgur.com/V7B7x5p.png - setup
and i also have done this:
<html ng-app="StarterApp">
but it does not work eaither, but on simple web it works
http://i.imgur.com/iJIJFpt.png -> Working Version, on this screen shown code works, but its only test site
You need to load your angular-material.min.js file before the js.js file where you call ngMaterial. Moving the angular-material.min.js file above js.js in your HTML should fix the problem.
Related
I can't seem to get the thumbnails I have placed on this page to open in the lightbox:
http://prussellartist.com/custom-leather-dog-collar-gallery2.htm
I tried changing the order and placement of these 2 elements:
<link rel="stylesheet" href="dist/css/lightbox.css">
<script src="dist/js/lightbox.js"></script>
At a glance is there anything wrong?
Please take a look at the JavaScript errors ... It seems like you forgot the fourth step of the getting-started guide (http://lokeshdhakar.com/projects/lightbox2/#getting-started) - namely - to include jQuery.
I have previously created a web app, and now I would like to integrate it with OnsenUI to enable my app to be used on all mobile devices as well as the web.
I am using a splitter in a toolbar which will be the header of all pages, and it will redirect the user to other pages when they click an item in it. Clicking the home item successfully redirects to the home page (index, which is already loaded correctly). However, clicking any of the other items in the splitter redirects me to the requested page, but shows the content of the file in text format instead of actually rendering the page. It looks like the following, except it's all jumbled together with no spaces:
searchForTrainer.jade:
//-ons-template(id='searchForTrainer.jade')
ons-page(ng-controller='SearchController' ng-init='showme = false; getAllTrainers();')
ons-toolbar
.left
ons-toolbar-button(ng-click='mySplitter.left.open()')
ons-icon(icon='md-menu')
.center
| Search Trainer
// ***** I cut off the rest of the file for simplicity
// ***** I should still be able to see the toolbar if the page loads correctly
Here is the content of index.jade:
doctype html
html
head
link(rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css')
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet' type='text/css' href='/stylesheets/jquery.datetimepicker.css')
link(rel='stylesheet' type='text/css' href='/stylesheets/ratings.css')
link(rel='stylesheet' type='text/css' href='/stylesheets/searchTrainerTab.css')
link(rel='stylesheet' type='text/css' href='/onsenui/css/onsenui.css')
link(rel='stylesheet' type='text/css' href='/onsenui/css/onsen-css-components.css')
block loadfirst
script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js')
script(src="https://code.jquery.com/jquery-1.12.3.min.js"
integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous")
script(src='/onsenui/js/onsenui.js')
script(src='/onsenui/js/angular-onsenui.js')
script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js')
script(src='/angular/fitnessapp.js')
script(data-require='angular-credit-cards#*', data-semver='3.0.1', src='https://rawgit.com/bendrucker/angular-credit-cards/v3.0.1/release/angular-credit-cards.js')
script(async='', defer='', src='https://maps.googleapis.com/maps/api/js?key=AIzaSyDcVf7YAPNwa8gUsMCOZNQZA31s5Ojf2n8&libraries=places')
body
ons-splitter(var='mySplitter', ng-controller='RootController as splitter')
ons-splitter-side(side='left', width='220px', collapse='', swipeable='')
ons-page
ons-list
ons-list-item(ng-click="splitter.load('index.jade')", tappable='')
| Home
ons-list-item(ng-click="splitter.load('searchForTrainer.jade')", tappable='')
| Search Trainer
ons-list-item(ng-click="splitter.load('searchForEvent.jade')", tappable='')
| Search Event
ons-list-item(ng-click="splitter.load('trainerAddEvent.jade')", tappable='')
| Create Event
ons-list-item(ng-click="splitter.load('userProfile.jade')", tappable='')
| Profile
ons-list-item(ng-click="splitter.load('addPayment.jade')", tappable='')
| Payment
ons-list-item(ng-click="splitter.load('userSettings.jade')", tappable='')
| Settings
ons-list-item(ng-click="splitter.load('trainerSignup.jade')", tappable='')
| Trainer Application
ons-list-item(ng-click="href='/logout'", tappable='')
| Logout
ons-splitter-content(page='index.jade')
ons-template(id='index.jade')
ons-page(ng-controller='MapController' ng-init='getEvents()')
ons-toolbar
.left
ons-toolbar-button(ng-click='mySplitter.left.open()')
ons-icon(icon='md-menu')
.center
| Fitness App
//-.right
a(href='https://www.paypal.com/webapps/mpp/paypal-popup', title='How PayPal Works', onclick="javascript:window.open('https://www.paypal.com/webapps/mpp/paypal-popup','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;")
img(src='https://www.paypalobjects.com/webstatic/mktg/logo/bdg_now_accepting_pp_2line_w.png', border='0', alt='Now Accepting PayPal')
//- google maps stuff
ons-input#pac-input.controls(type='text', placeholder='Search Box')
div#map.col-md-12
ons-bottom-toolbar
.center
| Fitness App
block scripts
script.
// ***** I cut out javascript related to Google Maps for simplicity
here is the splitter load page function I am using in my angular file:
this.load = function(page) { console.log("The page is: " + page);
mySplitter.content.load(page)
.then(function() {
mySplitter.left.close();
});
};
Has anyone successfully built an Onsen app using Jade?
UPDATE
When I leave the code in html instead of jade, everything works correctly. When I convert it back to jade it shows up as text again.
UPDATE 2
Using Solution 1 from the selected answer, I realized and solved my problem with the guidance from the selected answer on my other post:
Answer
By the looks of it you seem to be using Jade on the server side.
To solve the problem I see a couple possible solutions.
Solution 1:
Make sure that whatever Onsen UI is receiving is pure HTML. You're free to use Jade, but as it stands Onsen does not have Jade bundled inside, so there is no way for it to support it out of the box. However as long as Onsen sees only html it should be fine.
The reason why the ons-template(id='index.jade') works initially is actually because when you serve the page you are actually serving actual html, so when onsen starts the contents of that template are actually pure html.
In searchForTrainer.jade it seems that you are giving it raw jade, which it does not know how to handle. You can handle this on the server side, making sure that the request for the searchForTrainer returns html. Returning jade.renderFile('searchForTrainer.jade') from the server instead of the jade file itself should solve the issue.
Solution 2:
As you noticed as long the contents are inside the initial page everything will be fine. So you could just put all your ons-templates inside the initial page.
If you want to retain your current file structure you can just do
include searchForTrainer.jade
while having an ons-template tag in the file itself. That way in the end the result will be a page with the template already converted into html.
Solution 3:
The final option is to give the raw jade files, but help Onsen understand Jade, so that it can use them properly. To do that you need to include jade.js and modify Onsen UI so that it uses it.
However since Onsen does not currently provide an official API for switching template engines whatever hack we use now might break in the future. It's possible that in the near future a feature like that may be implemented, but in order to do it now we need to wrap some of onsen's internal functions.
Here's a simple example to do it.
module.run(function($onsen) {
var old = $onsen.normalizePageHTML;
ons._internal.normalizePageHTML = $onsen.normalizePageHTML = function(html) {
return old(jade.render(html, {}));
};
});
And here's also a working Demo showing this solution in action.
Note: that demo actually checks for a comment // jade at the beginning just to be safe.
Which solution to choose?
Solution 1 - I think this makes most sense as it retains a clear separation of concerns. If you want to change the templating engine it should be handled only in one place. Onsen does not need to know what you're using on the server as long as it gets what it wants.
Solution 2 - Not the best way to solve the problem, but it may be the easiest to use if you just want things to work. One minus is that with it you would load all the templates at the beginning, which may not be very good.
Solution 3 - While this solution can work I would suggest avoiding it as handling jade on the frontend would result in poor performance. It's could be an option if you actually decide not to rely on the server.
I have spent 2 hours + on the lightbox. I have checked paths to CSS and Javascript. I have used both the included jquery and Google's imported JQuery.
When I click an image it opens a new window with that image larger on a white background. I want it to overlay the current page with <> and x.
You can see an example: http://demopbdesignsource.tierstrategies.com/a.aspx
Thanks
Looking at your code on your page I do not see where you are calling the lightbox.js script - that needs to be called right before the body close tag.
Also lightbox help states : If you already use jQuery on your page, make sure it is loaded before lightbox.js. - ◦Include the Javascript at the bottom of your page before the closing /body tag:
I used the lightbox-plus-jquery.js and called that just before the close of the body tag and it worked. I called the lightbox-plus-jquery.js just before the close of the body tag because it has both jquery and lightbox combined.
I am still working on the page and I am just using html not .net but the lightbox would work the same. If you look at my source you will see the script call right before /body tag.
http://just-in.com/recycledDresser/index.htm
Hope this helps.
Debra W.
You need to call the Lightbox script.
Something like
Placing it in the line before the line works for me.
Both
http://demopbdesignsource.tierstrategies.com/X/LightBox.css
and
http://demopbdesignsource.tierstrategies.com/X/LightBox.js
cannot be found.
The link provided in the question is giving 404 right now.
but I think you just need to follow the steps given at
http://lokeshdhakar.com/projects/lightbox2/
to set up lightbox.
you may have missed either of the following :
Include the CSS at the top of your page in your <head> tag:
<link href="path/to/lightbox.css" rel="stylesheet">
Include the Javascript at the bottom of your page before the closing </body> tag:
<script src="path/to/lightbox.js"></script>
As the title says; I want the content of an external file (text,html,php etc.) onto a div.
There is basically text in an external file, called: text_1.txt or *text_1.html* , and I want that text displayed within a div that is located on a homepage.
The perfect solution would be a pretty basic code to display text from a text or html file
by inserting it onto a div classed: content
Here I have illustrated the issue with basic code, use this as an example to write a solution.
Code in text_1.html:
<p>Hello world.</p>
Code in index.html:
<!doctype html>
<html>
<head>
<title>Homepage</title>
</head>
<body>
<div class="content"></div>
</body>
</html>
This is as simple as I can put it.
I highly appreciate all the answers I receive, thank you.
PS here are some things you should avoid answering:
Use iframes, or any other frame type solution.
Make use of the onclick function within jquery etc.
Use ineffective textfields to replace certain text.
Make usage of an insertion code for virtual server or similar methods.
There's no way to do this unless and until you use Server Side Includes using PHP, ASP, or JSP
http://en.wikipedia.org/wiki/Server_Side_Includes
If you want to do it using php you can use this:
require_once('filename.php'); /* For including files */
Or use native functions to open .txt files in your pages
Why dont you just do it with jquery
$(document).ready(function() {
$('.content').load('text_1.html');
});
Im using the WebBrowser control to launch and browse some html files loaded locally in the windows phone 7 emulator and device. All works fine until a web page navigation with a query string us used. The javascript needs to read these query strings but the navigation totally fails when the query string is included. The navigation works fine without the query string.
Im big time stuck on this and would really appreciate your thoughts.
Tony
I too can't find a way to pass a query string to a local HTML file. (I copied the HTML file to Isolated Storage and viewed it from there.)
However...
I can successfully navigate to a local HTML file and specify a fragment. And it even works if the fragment includes equals signs (=) and ampersands (&) so you can do this:
webBrowser1.Navigate(new Uri("index.html#123=abc&456=def", UriKind.Relative));
And get the value with the following
<html>
<head>
<script type="text/javascript">
function onLoad() {
fs.innerHTML = document.location.href.split("#")[1];
}
</script>
</head>
<body onload="onLoad()" >
<p id="fs" />
</body>
</html>
to display the following on the page (in the browser control).
123=abc&456=def
(Obviously you could do something more appropriate with the value in javascript as necessary.)
Yes, you can just use the fragent like the querystring.
This, obviously, works fine as long as you don't need to use both.
You need a webserver if you pass a querystring.
This is because the browser does not know what is a query string in difference of another file. It only thinks the file is named "file.html?param=value" search this file and does not find it locally.
So locally without a webserver it is impossible.
Solutions
Spawn a tiny webserver locally.
Hack some js to know when it is local and replace all links with query string to hashtags