I know this has something to do with the file paths but I'm not sure what else to do.
I have tried
<script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="~/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
I originally created this in Dreamweaver, but now am no longer using that. Could that have something to do with it?
I have used this same code before on a remote server and it worked.
<!DOCTYPE html>
<html>
<head>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link rel="shortcut icon" href="imagesSRP/photo.ico" type="image/x-icon" />
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body>
<style type="text/css">
a:link {
color: #000;
}
a:hover {
color: #0FF;
}
</style>
<title>Stephanie Rodriguez Photography</title>
<p align="center"><img src="imagesSRP/srp4.png" width="500" height="112" alt="Home" /></p>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>Home</li>
<li>About</li>
<li>Gallery
<ul>
<li>Families</li>
<li>Children</li>
<li>Film</li>
</ul>
</li>
<li>Contact</li>
</ul>
<p> </p>
<p align="center"> </p>
<p align="center"><img src="imagesSRP/film2.jpg" width="800" height="520"></p>
<p align="center"> </p>
<p align="center"><img src="imagesSRP/social_01.png" width="45" height="45" alt="Facebook">
<img src="imagesSRP/social_04.png" width="45" height="45" alt="Instagram">
<img src="imagesSRP/social_46.png" width="45" height="45" alt="Email">
<img src="imagesSRP/social_47.png" width="45" height="45" alt="Phone"></p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Okay, so after careful review of the information that was on the website, we came to the conclusion that the website path was different from the local path. Basically FileZilla stored the images into a different path than the local path.
If your path on the local computer is images/imagename.jpg then remember to confirm that the database is storing the images in images/imagename.jpg. It has to be an exact match, if not, these issues will happen. Also, you are correct, you always want to stick with relative paths as much as possible don't do absolute paths because if you ever change your domain name, you will literally have to go through every single link that uses the domain name and update them.
Do this: images/imagename.jpg
Don't do this: www.domainname.com/imagename.jpg
When I suggested to try that, I was referring to trying it for troubleshooting purposes, if you could not access it, that would mean there is an issue in the database, if you could access it, then the issue was in the path name.
Related
I've been struggling to find a workable way to imbed .pdf files in web pages that are broadly accessible, including to IE8 users. I don't think pdf.js is going to work because I want to embed the files, not load them as new pages.PDFObject seems like the best choice. But when I use their code, no matter what browser I use, I get only about a quarter of the page length displaying, as shown in the accompanying image. Everything below that first line of text is simply the white of my website background. I have tried both following the PDFObject instructions and using their code generator. No luck either way. Here's the code:
<!-- insert in the document body -->
<object data='http://www.example.com/TestDoc.pdf#'
type='application/pdf'
width='100%'
height='100%'>
<p>It appears your Web browser is not configured to display PDF files.
No worries, just <a href='http://www.chrisrichard.org/TestDoc.pdf'>click here to download the PDF file.</a></p>
</object>
And here's the javascript version:
<!-- insert in the document head -->
<script type='text/javascript'>
function embedPDF(){
var myPDF = new PDFObject({
url: 'http://www.example.com/TestDoc.pdf'
}).embed();
}
window.onload = embedPDF; //Feel free to replace window.onload if needed.
</script>
This is all directly from the PDFObject coder. There's a tutorial on the website, and I've followed it meticulously so far as I can tell, but no luck.
So I'm stumped, and would appreciate any suggestions. Frankly, I wish I didn't have to accomodate IE8 at all, and I wish I could make pdf.js work for what I want it to do, but neither seems to be a viable option. Again, thanks in advance for any ideas.
Note: Please note corrected code, which gives the entirety of what PDFObject generates.
Note 2: This is the entirety of the kind of page I would be seeking to insert the viewer into. I have skipped the javascript version, which would have me insert the code in the header and which would fill the entire page with the pdf and viewer. It's important that the .pdf be set within my page.
I would almost certainly be getting rid of the swfobject references, since that isn't working with mobile devices, etc.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>example.com - </title>
<link href="oneColLiqCtrHdr.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#MenuHolder {
position:absolute;
left:692px;
top:50px;
width:228px;
height:23px;
z-index:1;
}
-->
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<body class="oneColLiqCtrHdr">
<div id="container">
<div id="header">
<h1><img src="images/BodyLogo.jpg" width="665" height="57" alt="Logo" /></h1>
<link type="text/css" rel="stylesheet" href="/floatbox/floatbox.css" />
<script type="text/javascript" src="/floatbox/floatbox.js"></script>
<script type="text/javascript" src="/floatbox/options.js"></script>
<link rel="stylesheet" href="/Menu2Assets/mbcsmb4pc8.css" type="text/css" />
<div id="mb4pc8ebul_wrapper" style="max-width: 345px;">
<ul id="mb4pc8ebul_table" class="mb4pc8ebul_menulist css_menu">
<li><div class="arrow buttonbg"><a>Examples</a></div>
<ul>
<li>Example1</li>
<li>Example2</li>
<li>Example3</li>
<li>Example4</li>
</ul></li>
<li><div class="buttonbg" style="width: 86px;">Resume</div></li>
<li><div class="arrow buttonbg" style="width: 96px;"><a>Contact</a></div>
<ul>
<li>Email</li>
<li>Send</li>
</ul></li>
<li><div class="buttonbg" style="width: 69px;">Home</div></li>
</ul>
</div>
<script type="text/javascript" src="/Menu2Assets/mbjsmb4pc8.js"></script>
<!-- end #header --></div>
</head>
<div id="mainContent">
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<!-- insert in the document body -->
<object data='http://www.example.com/TestDoc.pdf#'
type='application/pdf'
width='100%'
height='100%'>
<p>It appears your Web browser is not configured to display PDF files.
No worries, just <a href='http://www.example.com/TestDoc.pdf'>click here to download the PDF file.</a></p>
</object>
<p align="center"> </p>
<p align="center"> </p>
</div>
<div id="footer">
<p align="center"><img src="images/Copyright.jpg" width="190" height="15" alt="Copyright" /></p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
I'm trying to make an image gallery on my site so that I can put screenshots onto blog articles where they will be relevant. After spending several hours working on a custom jquery solution using my own code and getting no help whatsoever from anywhere on the net, I caved and decided to use lightbox.
I followed the instructions to set it up on this page however, it still does nothing. Essentially all I've done is put a link to the image on my page...
Here's my code as rendered on the page (url below):
<head>
<link href="/js/lightbox/css/lightbox.css" rel="stylesheet" />
<!--[if lte IE9]>
<link href="/css/ie.css" type="text/css" rel="stylesheet" />
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="/js/lightbox/js/lightbox.min.js"></script>
<script src="/js/lightbox/js/jquery-1.11.0.min.js"></script>
</head>
<body>
<!-- skipping irrelevant content -->
<h3 id="screenshots">Screenshots</h3>
<div class="screenshots">
Image #1
<img src="http://www.loganyoung.za.net/images/articles/logan-mvc-error-big.png" alt="" width="150" height="150" class="alignleft" />
<img src="http://www.loganyoung.za.net/images/articles/logan-mvc-error-small.png" alt="" width="150" height="150" class="alignleft" />
</div>
<!-- skipping more irrelevant content -->
</body>
</html>
URL http://loganyoung.za.net/error-reporting-in-mvc/
If anyone can tell me what I did wrong, I'd greatly appreciate it.
Just made sure jQuery was referenced in the right place (above all the lightbox crap) woopdeedoo
I cannot initialize a Foundation orbit slider. Since my code was not working, I tried following strictly what the tutorial says. So I am following the tutorials in the Zurb Foundation website in order to build a basic slider:
http://foundation.zurb.com/docs/components/orbit.html
http://foundation.zurb.com/docs/javascript.html
And it is not initializing the slider. I cannot figure why after many attempts. The code I am using is the code below. If you want to test it, just uncompress the Foundation libraries and rename the folder to foundation.
When I load the page, there is no script error in the Chrome console.
Thanks for your help
<html>
<head>
<script type="text/javascript" src="foundation/js/vendor/modernizr.js"></script>
</head>
<body>
<script src="foundation/js/vendor/jquery.js"></script>
<script src="foundation/js/vendor/fastclick.js"></script>
<script src="foundation/js/foundation.min.js"></script>
<ul data-orbit>
<li>
<img src="http://foundation.zurb.com/docs/assets/img/examples/satelite-orbit.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li class="active">
<img src="http://foundation.zurb.com/docs/assets/img/examples/andromeda-orbit.jpg" alt="slide 2" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="http://foundation.zurb.com/docs/assets/img/examples/launch-orbit.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</li>
</ul>
<script>
$(document).foundation();
</script>
</body>
</html>
I think you probably forgot to add the style sheets.
<link rel="stylesheet" href="./foundation/css/normalize.css">
<link rel="stylesheet" href="./foundation/css/foundation.css">
Also if the foundation foundation folder is in the same folder as your html document then the path should probably be ./foundation :
<script type="text/javascript" src="./foundation/js/vendor/modernizr.js"></script>
While working with this .html page I found an annoying behavior. The moment I load the page it will load only some portion of the page ,if I refresh it,then loads properly.
Why is this happening ??
I have attached the images along with my html code.
The first image is what I am getting and the second one is the desired one.
This is the first image
and this is what I require
Here is my HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
<title>Imperial</title>
<style>
.smooth_zoom_preloader {
background-image: url(zoom_assets/preloader.gif);
}
.smooth_zoom_icons {
background-image: url(zoom_assets/icons.png);
}
</style>
<link href="./css/style.css" type="text/css" rel="stylesheet" />
<link type='text/css' href='./js-disclaimer/basic.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='./js-disclaimer/jquery.js'></script>
<script type='text/javascript' src='./js-disclaimer/jquery.simplemodal.js'></script>
<script type='text/javascript' src='./js-disclaimer/basic.js'></script>
<script src="./js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="./js/custom.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="zoom_assets/jquery-1.9.1.min.js"></script>
<script src="zoom_assets/jquery.smoothZoom.min.js"></script>
<script>
jQuery(function($){
$('#yourImageID').smoothZoom({
width: '80%',
height: '70%',
/******************************************
Enable Responsive settings below if needed.
Max width and height values are optional.
******************************************/
responsive: false,
responsive_maintain_ratio: false,
max_WIDTH: '',
max_HEIGHT: ''
});
});
</script>
</head>
<body style="background:none">
<!-- home -->
<!---- menu area--->
<div class="menu_area"> <img src="./img/logo.png" alt=""> <br>
<ul>
<li class="current">Home</li>
<li>World above the world</li>
<li>Spaces</li>
<li>Safety & Security</li>
<li>Plans</li>
<li>Location</li>
<li>Enquiry</li>
<li>Contact Us</li>
<br>
<br>
<li>About SD Corp.</li>
<li>ebrochure</li>
</ul>
</div>
<div class="NorthMarker" id="North" style="position:absolute;top:66%;left:18%;width:10px;height:10px; z-index: 99;">
<img src="img/NorthView.png" id="northview">
</div>
<div class="SouthMarker" id="South" style="position:absolute;top:66%;left:97%;width:10px;height:10px; z-index: 99;">
<img src="img/SouthView.png" id="southview">
</div>
<div style="float:left; margin-top:5%; margin-left:5%;"><img id="yourImageID" src="img/plan.jpg" width="86%" height="70%"/>
<div class="intermediate" style="display:none;position:absolute;left:0%;top:0%;background-color:rgba(0, 0, 0, 0.0);width:100%;height:100%;z-index:104;"></div>
<div class="northviewpart" style="display:none;position:absolute;top:27%;left:0%;width:100%;height:10px; z-index: 109;">
<img src="img/40N.jpg" style="width:100%;height:250px;">
</div>
<div class="southviewpart" style="display:none;position:absolute;top:27%;left:0%;width:100%;height:10px; z-index: 109;">
<img src="img/40S.jpg" style="width:100%;height:250px;">
</div>
<div id="basic-modal" class="footer_for_plan">© SDCPL 2013. All Rights Reserved | Disclaimer</div>
</div>
<!-- modal content -->
<div id="basic-modal-content">
<h3>Disclaimer</h3>
<p>The content depicted herein is for general information and purely conceptual and is not legal offering nor will it be part of any binding document. The Developer reserves the right to delete, modify or supplement the content at any time for any reason without prior notification.</p>
</div>
</div>
</div>
</body>
</html>
The problem here is loading of JavaScript files.. Move all script tag at the end. Before closing body tag. hope it heps
If I had to guess (which I'm going to cuz I love gambling) I'd say it has something to do with...
Loading 3 copies of jQuery
Beginning all of your href="", src="" and url() attributes with a period
Here are the jQuery instances I found:
<script type='text/javascript' src='./js-disclaimer/jquery.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="zoom_assets/jquery-1.9.1.min.js"></script>
I'm not 100% sure what the first one is since it's a local file but if it's file name is any indication...it's jQuery.
Long story short:
Delete this line:
<script type='text/javascript' src='./js-disclaimer/jquery.js'></script>
and delete this line:
<script src="zoom_assets/jquery-1.9.1.min.js"></script>
use this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
instead of all these three...
<script type='text/javascript' src='./js-disclaimer/jquery.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="zoom_assets/jquery-1.9.1.min.js"></script>
I think the Page is loaded the issue is with the smoothZoom zoom, If you see closely the image has been loaded but it is zoomed out completely
also change your
<img id="yourImageID" src="img/plan.jpg" width="86%" height="70%"/>
with
<img id="yourImageID" src="img/plan.jpg" style="width:86%; height:70%"/>
EDIT:
also your script has three jquery files included, you need to get rid of atleast of the them. select one file that you want to keep and move it to the top
I will suggest you to keep
<script src="zoom_assets/jquery-1.9.1.min.js"></script>
move the file to the root and move the line to the top
++ <script src="jquery-1.9.1.min.js"></script>
-- <script type='text/javascript' src='./js-disclaimer/jquery.js'></script>
<script type='text/javascript' src='./js-disclaimer/jquery.simplemodal.js'></script>
<script type='text/javascript' src='./js-disclaimer/basic.js'></script>
<script src="./js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="./js/custom.js" type="text/javascript"></script>
-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
-- <script src="zoom_assets/jquery-1.9.1.min.js"></script>
<script src="zoom_assets/jquery.smoothZoom.min.js"></script>
When script loads its unable to find the div id you have created because you are loading a img before the img dom elemnet is created
I appreciate all for the efforts ,however my problem got solved only once I validated the document using chrome validator.
I had used "%" to display the image width and height.I had to put some numeric values(as per need).Now its working fine.
But I am still wondering how can I make it fit to different screen size and resolutions ??
For some odd reason this image slider does not want to work can anyone point out the problem i have a feeling it is with including the javascript also the does not want to work also so i went with :
<link rel="stylesheet" type="text/css" href="includes/css/slider.css"></link>
<link rel="javascript" type="text/javascript" href="includes/js/slider.js"></link>
<link type="text/javascript" src="includes/js/jquery-1.5.2.min.js"></link>
or is this the correct way either way it dont seem to work?
<link rel="stylesheet" type="text/css" href="includes/css/slider.css"></link>
<script rel="javascript" type="text/javascript" href="includes/js/slider.js"></script>
<script type="text/javascript" src="includes/js/jquery-1.5.2.min.js"></script>
Edit full code:
<div class="mask">
<ul class="imgHolder">
<li>
<img width="270" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/270px-The_Earth_seen_from_Apollo_17.jpg" />
</li>
<li>
<img width="270" src="http://www.mallorcaweb.net/masm/Planetas/Jupiter.jpg" />
</li>
<li>
<img width="270" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/280px-FullMoon2010.jpg" />
</li>
<li>
<img width="270" src="http://static.ddmcdn.com/gif/sun-update-1.jpg" />
</li>
<li>
<img width="270" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Neptune.jpg/240px-Neptune.jpg" />
</li>
</ul>
</div>
<ul class="thumbHolder">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span class="control Bleft">Prev</span>
<span class="control Bright">Right</span>
Give this a try:
<link rel="stylesheet" type="text/css" href="/includes/css/slider.css"></link>
<script type="text/javascript" src="/includes/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="/includes/js/slider.js"></script>
Notice that I have removed the rel tag, and I have added leading slashes at the beginning of each path, so that it always loads from the root.
Make sure you include the jQuery script before all dependent scripts, i.e. all scripts that use jQuery.
--
Also, link tags are self closing and script tags are used for js files not link tags.
Link tag is used to pointing and adding css files inside page where as script tag is used to add client side script into code example vbscript and javascript etc.
One more thing you need to include jQuery before any of other jQuery plugin which are depended on jQuery.
Example
<link rel="stylesheet" type="text/css" href="includes/css/slider.css" />
<script type="text/javascript" src="includes/js/jquery-1.5.2.min.js"></script>
<script rel="javascript" type="text/javascript" href="includes/js/slider.js"></script>