I would like to showcase a page from my Ionic 3 project onto my website.
I have been trying to copy the rendered html from the simulator with the rendered main.css and placing it onto my website using a Marvel css device.
It still seems to need hours of finessing to get to what the simulator looks like.
** This is not a clashing of css files. I checked.
Does anyone know an easy way showcase a demo of the app onto the website?
Just deploy your built code from project's www directory (wrapped in your css Marvel device container) to your web hosting and it should work given that you do not rely on ionic/cordova only functionalities that would not work on a desktop anyway. In the end it is an Angular app.
Related
I'm developing a personal website using react and I'm facing a very werid issue.
I've developed this website using create-react-app and tested it using the npm start command and made sure that everything in my website runs exactly as I would imagine it would. During testing the website looks totally fine.
I've now built my website using npm run build but I'm finding that some of the CSS works while some does not. This happens despite all of my CSS being in a single file.
I should not that I'm not getting any errors in the developer tools in chrome at all or anything of that sort.
Here is an example of what I mean. The image below is taken when the website is run through npm start
However, after building the website and opening the index.html file, the following screenshot is obtained
As you can see the styling for all of the other components is present except the styling the for Contact Us title at the beginning. Other titles on the page seem to be okay but this title does not seem to have the styling in place at all.
Additionally, there are other parts of the page where the styling if off too in the built version despite it being fine during testing.
My code is on https://github.com/Lm7m/Lm7m_website and I would appreciate any help I can get on this issue.
apply like this in index.html
create variable before return and then assign to tag
let colorstyle={
color:black
}
<h1 style={colorstyle}></h1>
I want to embed this a-frame project to my portfolio on Squarespace (most basic plan) like what a-frame shows in their embedded page but I'm not even sure if it's possible? I'm also super new to coding so let me know if I should provide more info. If people can also explain things in baby language that would be awesome thanks
embedding remote a-scene?
if you want to link your existing project to a different page then... I don't think it's possible. Look:
the documentation page uses a real a-scene there, with a-boxes and stuff.
It may be possible via iframes but I don't know if it works. There is something like this in the documentation:
For now, if the I-Frame is not on the same origin as the page, the WebVR polyfill for mobile won’t work and there won’t be any tracked rotation of the device. - source
embedded
embedded is used to create a smaller window of a-scene inside a standard HTML page. As far as I know, it just sets or changes some CSS values. Unfortunately, there is nothing like a magical src attribute that would allow you to fetch a different scene from another page
If you can upload a static HTML file onto Squarespace then by all means you can embed it there. But remember that
Only one <a-scene> can exist on a page - same source
You would need to copy your entire project a-scene and paste it into your Squarespace page. Add A-Frame script in header or link a js file and all standard stuff.
link
this may not be what you are looking for but you could potentially create an embeded a-frame scene that would have a link inisde that would "teleport" you (change location) to your project. link - A-Frame
I currently have a Squarespace site which is a bit old but still functional. It's going to be a while before I do the new site for it, however, I want to add a new page to the Squarespace site that is a static HTML page that functions as a mini preview to the new site.
I have made a separate site just for now and everything is ready to go up on the live account (that's paid for). The dev site I just did everything on the site. region file, however, the layout of the live site is a bit different since it's using a template.
I followed their docs to this page on adding static pages...
It says to add a folder called pages and 2 files, in my test I made barry.page and barry.page.conf
barry.page is a boilerplate HTML page for testing and barry.conf looks like:
{
"title" : "Barry",
"description" : "barry desc"
}
As far as I can tell, this is all I need to do however I cannot find the page when I run the site either locally or on Squarespace. localhost:9000/barry returns a 404.
How can I find this site, it would be a major pain if I had to host the site elsewhere and redirect from Squarespace because their docs aren't written well!
Assuming you've pushed your changes to the server (and assuming you meant barry.page.conf not barry.conf), perhaps you've not set the URL for the page as desired using the "settings" icon to the right of the page in your "Not Linked" section (while in the back-end editing ["config"] area of your Squarespace website).
That should at least get the page to show up.
If you're here in the future, Squarespace 7.1 does not offer the ability to create static pages as in Squarespace 7.0. You can see the version you're on by signing into your site dashboard > Help > scroll down to the bottom.
Recently I've been tasked with redesigning a website for the current company I'm working at. I've been using weebly to make the site, and then exporting the HTML to be re-hosted on the company's servers.
However, I've noticed that some functionality in weebly's code has stopped working. I imagine this might be due to weebly hosting some elements on their own servers, but this is merely a beginners best guess.
1. The picture for the logo on the banner does not appear once the HTML is rehosted
For comparison, here's the site while hosted on weebly:
http://mjmacoustique.weebly.com/
and the site on the company's servers:
http://www.mjm.qc.ca/redesign2015/
When weebly hosts, the ''MJM'' image should be on the top left and function as a return to home page button when clicked. However, when it's hosted on the company's server, the image is not found.
2. On Firefox, the background image of the home page is replaced with an all black background
When opened in firefox, it fails to load the background image of the main page.
Any help or solutions to these problems would be greatly appreciated.
Thanks.
I can help with question #1: the logo is hosted on weebly's servers, but in the html it's written in a shortcut method like this example: /uploads/2/6/8/5/26851316/1434298489.png"
the easy workaround would be to keep the weebly version of the site working, in in the html change the src value of the missing images to something like this http://mjmacoustique.weebly.com/uploads/2/6/8/5/26851316/1434298489.png
So you haveto add the http://YOURSITE.weebly.com before all the src values of your images.
otherwise, just load all the images you need on a blank page of the site on your servers, copy image urls of those and replace the urls in the html with that.
Hope that helps?
The firefox issue might also be solved if all your src values are linked correctly but I cannot be sure about that.
When I tried exporting a site from weebly, some assets were missing from the zip it produced. This resulted in some images failing to appear because they simply weren't there. I don't know how often this happens (or if it happens only for some sites), but weebly's export feature definitely seems to have bugs.
I worked around this by using wget to recursively fetch the content that weebly was hosting. Then I hand-copied the missing assets (and only the missing assets) from the directory structure saved by wget and merged them into the directory structure from weebly's export zip. This is time-consuming, but necessary since the directory structure fetched by wget includes dynamically-generated content (meta data for weebly's editor, assets with decorated names, etc) that you probably don't want in the content you host elsewhere.
So i am trying to make some pages in magnolia so they work in phoneGap, phoneGap is a wrapper that wraps HTML5/CSS/JavaScript and deploys them as a mobile app.
The problem with Magnolia is that it uses servlets such as jtl or jsp, where as phoneGap only accepts .html pages and does not render jtl or jsp pages.
So how would i go about in making only HTML5 pages?
Any ideas/suggestions/opinions will be greatly appreciated
What is it that you want to make accessible on mobile with phone gap? Admin central or rendered web that was originally edited via Magnolia?
If the former, don't use phone gap, but instead clone Magnolia's source from git locally, change compile targets for widgets to allow compilation for iphone/android cell phones and you should have all you need to access admin interface on cell phone. On tablets it should already work w/o need to do anything.
If the latter, then what you want is to render whole web and capture html w/ curl or wget and give that to phone gap, tho I can't really imagine why/how that would be useful over phonegap-made app more then via browser directly.
HTH,
Jan