uploading Axure exported html to wordpress - php

I would like to upload my Axure exported html (some javascript, css, and html files - all static content) to my wordpress site.
Now, I know I can simply connect with ftp and upload the folder to the hosted drive. But I'm not sure if that's the prefered method, what security issues are the to resolve (htaccess files??), and how to link to the mockup I made in my Axure in a frame (so it dynamically resizes).
Am I trying something that's just impossible, bad practice, ... Would I need to touch php? because my web knowledge goes as far as js/css... newbie too.
Help?
Thanks!

I don't see any security concerns, or need to touch the htaccess file.
A sample of a wireframe I've shared and embedded in Wordpress is at: http://paulsizemore.com/4234-2/
Essentially, you need to add the references to the script files in the Wordpress content editor. You will need to add the web address to the href attributes of the tags.
The Wordpress Content Editor View
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="http://r4qr5p.axshare.com/resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet">
<link href="http://r4qr5p.axshare.com/resources/css/axure_rp_page.css" type="text/css" rel="stylesheet">
<link href="http://r4qr5p.axshare.com/LogIn_files/axurerp_pagespecificstyles.css" type="text/css" rel="stylesheet">
<!--[if IE 6]>
<link href="http://r4qr5p.axshare.com/LogIn_files/axurerp_pagespecificstyles_ie6.css" type="text/css" rel="stylesheet">
<![endif]-->
<script type="text/javascript">
AXSHARE_HOST_URL = 'http://share.axure.com';
AXSHARE_HOST_SECURE_URL = 'https://share.axure.com';
</script>
<script src="http://r4qr5p.axshare.com/data/sitemap.js"></script>
<script src="http://r4qr5p.axshare.com/resources/scripts/jquery-1.7.1.min.js"></script>
<script src="http://r4qr5p.axshare.com/resources/scripts/axutils.js"></script>
<script src="http://r4qr5p.axshare.com/resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
<script src="http://r4qr5p.axshare.com/resources/scripts/axurerp_beforepagescript.js"></script>
<script src="http://r4qr5p.axshare.com/resources/scripts/messagecenter.js"></script>
<script src='http://r4qr5p.axshare.com/LogIn_files/data.js'></script>
<!-- This is the iframe of the Axure Share URL -->
<iframe src="http://r4qr5p.axshare.com/" width="800"></iframe>

Related

Why all my scripts are being loaded together and they return not found after a few days?

I have php scripts in my website and at the top of the page css and js are being loaded like below
<link href="css/pageLayout.css?version=4" rel="stylesheet" type="text/css" media="screen,print">
<link href="css/style.css?version=4" rel="stylesheet" type="text/css" media="screen,print">
<script src="validation.js?version=4" type="text/javascript"></script>
<script src="numcheck.js?version=4" type="text/javascript"></script>
But when I view source of my page the links are like below
<link href="css/pageLayout.css,qv==4+style.css,qv==4.pagespeed.cc.E_3tcdStoh.css" rel="stylesheet" type="text/css" media="screen,print">
<script src="Script/validation.js,qv==4+numcheck.js,qv==4.pagespeed.jc.-0oIAICDu_.js"></script>
It seems someone/something is putting all my files together, must be some component in either the server or the browser, but I can't seem to find it.
At first, it works without any problem, so I didn't notice. But after a few days these put together files are not found anymore and returns 401 not found, and none of the css and js works anymore.
It works again if I change the link of the file by changing the version number version, but returns after a few days. Any idea what might be the reason?

Why the css is not affecting in my PHP page?

I am learning the php and get some difficulties, I am trying to include the php file in header of another file, but the css is not working?
here is my project directory structure
Project Structure
and here is my php code...
blogpage.php
<html lang="en">
<head>
<?php include 'head.php';?>
<title>Off Canvas Template for Bootstrap</title>
</head>
I have included the path in Struts-2/blogpage.php
here is my head.php
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/offcanvas.css" rel="stylesheet">
<link href="css/blog.css" rel="stylesheet">
Is CSS folder located under the head.php?
Try to add slash to all links:
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/css/offcanvas.css" rel="stylesheet">
<link href="/css/blog.css" rel="stylesheet">
You may check, adding the links directly, without including th php. Try in that way to see if the links work.
Solution One:
As per your folder structure you have all the style-sheets under the CSS folder and you are trying to include it in the PHP file which is located outside the CSS folder and the procedure it that you have to directly point it out to the CSS folder to pertain the links to all the files that you provide in head.php.
The head.php should look like this so that it will not pertain to any error.
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="css/offcanvas.css" rel="stylesheet" type="text/css">
<link href="css/blog.css" rel="stylesheet" type="text/css">
Errors:
Your forward slash trailing in the first link will fails since you have added the forward slash over to the bootstrap.css and hence that file will not call out in blogpage.php page. That is the reason you are not getting css over to the blogpage.php.
The type="text/css" is missing to the stylesheet call in the head.php and this may also cause the Error.
And pertaing to that you need to call the head.php in the blogpage.php as follows:
<html lang="en">
<head>
<?php include ('../head.php'); ?>
<title>Off Canvas Template for Bootstrap</title>
</head>
Best Practice
But you can wrap up all the head.php, footer.php, header.php into the includes folder so that it will be a constant under that folder and you can provide up the links without any error.
Since you are calling it inside the Struts-2 folder your path may fail sometimes and the CSS may result in Error.
Tips:One the site is loaded up fully you press CTRL+U so that your entire code will open up in the new window (View Page Source) and you can check to that whether all the links that you are proving are executing correct in the browser.
Solution Two:
You can add up the forward slash over to the CSS folder structure since it will not fails up when you try to add it u over to any of the page that you use. Since all the communication will be done from the root directory on all calls
And your head.php will look like
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="/css/offcanvas.css" rel="stylesheet" type="text/css">
<link href="/css/blog.css" rel="stylesheet" type="text/css">

jqGrid 5.1.0 "Warning" ("Please, select row") Dialog Appears On Page Load

I am building a new app using jqGrid 5.1.0. When my page loads the grid displays as expected and contains the expected data. However, immediately a "Warning" box appears with the text "Please, select row". I can't close the Warning and I can't do anything with the rest of the page.
After thinking through the problem as well as Googling I suspected maybe the order in which I am loading .js and .css was the problem so I experimented with different orders but to no avail.
Here is what I am loading (paths altered for brevity but all .js loads and all .css is accessible)...
<script src="...jquery-2.2.3.min.js"></script>
<script src="...jquery-ui.js"></script>
<script src="...grid.locale-en.js"></script>
<script src="...jquery.jqGrid.min.js"></script>
<link rel="stylesheet" type="text/css" href="...jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="...jquery-ui.structure.css" />
<link rel="stylesheet" type="text/css" href="...jquery-ui.theme.css" />
Maybe I am missing one or more of either. Hard to say since, like I said, everything appears correct but I can't interact with the page.
Not sure what else to do.
Thanks for your guidance.
After further investigation I found I was missing .css for the grid. Oops!
<link rel="stylesheet" type="text/css" href="...ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="...ui.jqgrid-bootstrap.css" />
<link rel="stylesheet" type="text/css" href="...ui.jqgrid-bootstrap-ui.css" />
Page now loads without the Warning appearing and the grid, based on initial testing, works as expected.

External Style Sheet

I've created an CSS external style sheet for a webpage of my website. I have uploaded it to the server and have used the following code in my PHP file to load the webpage. However, the webpage just loads as if it ignores the style sheet. Here's the code in the PHP file that I have used so I just uploaded the HTML tags here. Any help would be a great help. Thanks.
<html>
<head>
<link rel="styleshhet" type="text/css" href="/webspace/httpdocs/new_select3_style_sheet.css">
<script>function goBack() {window.history.back()}
</script>
</head>
<body>
<div id="main">
</div>
</body>
</html>
<link rel="styleshhet" type="text/css" href="/webspace/httpdocs/new_select3_style_sheet.css">
goes to:
<link rel="stylesheet" type="text/css" href="new_select3_style_sheet.css">
First you had a typo -> stylesheet not stylshhet second all paths run from above httpdocs in public facing HTML (where your site will be) so you need to remove everything above that! e.g.
/webspace/httpdocs/new_select3_style_sheet.css
If your domain was example.com then /webspace/httpdocs/ = example.com/ when building URLs

Google js file not loading on runtime

I am trying to include these files from google API, but when I run my file I can't > find them including in the head of the file
<link href='http://fonts.googleapis.com
/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic'
rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0
/jquery.min.js"></script>
Open the link
http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic
in the browser
Do a 'save as' on the resulting webpage that contains the media css.
Assuming you have saved it as 'file.css'
<link href='file.css' rel='stylesheet' type='text/css'>
Do the same for the 'jquery.min.js' file and change you script tag as follows:Assuming you have saved it as 'file.js'
<script type="text/javascript" src="file.js"></script>
This way you have both the files locally and don't have to depend on the internet to download them every time.

Categories