Jump to content
Sign in to follow this  
bartonlewis

browser behavior not aligning with Brackets' Live Preview

Recommended Posts

I want to use code for a magnifier lens on images that references magnifier.css and magnifier.js.  I created a test html document that displays properly in Brackets' Live Preview with images at the correct size, the magnifier lens working and the magnification at the correct size.  But when uploaded to my server and displayed in a browser (I tried both Chrome and Opera), it does not.  The images are appearing at their magnification size, static (the scrolling lens not working) and overlapping each other.  I have never encountered browser behavior that differed from Live Preview, so don't know what would cause this.  Before I incorporate my own css into my web page, I need to resolve whatever is wrong how the external css and/or js is being referenced/displayed.  I have pasted the test html document following for what it's worth.  Thanks for anyone who can assist.

<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" href="magnifier.css" rel="stylesheet">

<script type="text/javascript" src="magnifier.js"></script>
       
<div class="magnifier" style="width: 498px; height: 384px;">
  <div class="maglens">
    <img src="http://bartonlewisfilm.com/img_157-229.jpg" class="maglarge" style="width: 997px; height: 768px;" />
  </div>
</div>
   
<div class="magnifier" style="width: 504px; height: 384px;">
  <div class="maglens">
    <img src="http://bartonlewisfilm.com/img_157-245.jpg" class="maglarge" style="width: 1008px; height: 768px;" />
  </div>
</div>
    
<div class="magnifier" style="width: 485px; height: 384px;">
  <div class="maglens">
    <img src="http://bartonlewisfilm.com/img_162-365.jpg" class="maglarge" style="width: 970px; height: 768px;" />
  </div>
</div>
    
    </head>
</html>

 

Share this post


Link to post
Share on other sites

My guess is a problem with the Javascript, but there is not enough information in your post to know for sure.

You should check your browser's development tools by pressing F12 and look for Javascript error messages in the console.

Share this post


Link to post
Share on other sites

Thank you.  In Chrome, this is what I am seeing in the Console.  So the server is not finding the referenced css or js - but it's not clear to me how it could, since their address simply consists of their name and the extension in the html doc.  Isn't more required to find them wherever they exist in cyberspace?  Or if not, how can I find out why they won't load? 

 

image.png.a03eacae972e3954215245875b77f80b.png

Share this post


Link to post
Share on other sites

That works if the files are in the same directory as the HTML file. If they're not then you will need to specify the path to the file.

Share this post


Link to post
Share on other sites

I have returned to the page where I found the demo for this code and see the instruction to do just what you said with the links provided at the top of the message.  My bad for not paying close attention and creating more work for myself.  Thank you.

Share this post


Link to post
Share on other sites

If you are looking for the best web development company in Delhi, you really need to use someone who knows how to make logos and use CSS.  It sounds like the people at acemindtech in Delhi do not know how to do basic things, because they keep asking about it here.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×