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 ??
Related
I am having trouble with a stupidly simple problem. I have an HTMl file that has successfully hooked up to a css file, but ever time I try something easy in Javascript, it doesn't do it. All of my files are in the same folder. I am running this off of Notepad ++
enter code here
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div class="header">
</div>
<div class="main">
<div id="comic"></div>
<div id="caption"></div>
<div id="prompt">
<h3>Hello, world!</h3>
<div class="btn" id="yes"><img src="YESsmall.jpg"/></div>
<div class="btn" id="no"><img src="NOsmall.jpg"/></div>
</div>
</body>
</html>
And my Javascript looks like this:
$(document).ready(function() {
$('.main').hide();
});
what on earth have I done wrong?
I don't see you loading jQuery (or anything else providing a $). You can use a jQuery provided by a content delivery network (as described here) by adding
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
(or similar, depending on what version you need/want) before your other <script>
I noticed that there is a problem if both popbox.css and bootstrap.css are used. Does anybody know a solution for that?
Here is a fiddle from somebody to show how popbox works.
http://jsfiddle.net/kbwood/sV4bY/
If you load the bootstrap library additional to the popbox libraries
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
it will not work anymore.
Here is a not working example. Remove the bootstrap.min.css file to make it work
<!DOCTYPE html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>PopBox</title>
<link href="../static/css/popbox.css" type="text/css" rel="stylesheet" media="screen" charset="utf-8">
</head>
<body>
<div class="container">
<h1>PopBox</h1>
<div class='popbox'>
<a class='open' href='#'>
<img src='' style='width:14px;position:relative;'> Click Here!
</a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
Content from first popup
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../static/js/popbox.js" type="text/javascript" charset="utf-8"></script>
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript'>
$(document).ready(function(){
$('.popbox').popbox();
});
</script>
The problem is due to the collapse class you have applied to the div. In Bootstrap, these are hidden by default as it's part of the accordion feature. Either remove the class from that div or use a different name for it.
Example: http://jsfiddle.net/tpjjsqg6/
I have just tried to implement wow.js to my site but it wont work.
I have linked everything but i don't know why it isn't working.
I even added the wow.js and linked it to the html but there still seems to be nothing that is working. I also added the animate.css and still there is no effect.
HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="animate.css">
<script language="javascript" type="text/javascript"src="javascript.js"></script>
<script language="javascript" type="text/javascript" src="wow.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<title> Vids </title>
<header> <img src="images/Logo.png" > </header>
</head>
<body>
<div class="vids-title">
<p>Vids</p>
</div>
<div class="video-1 wow slideInRight">
<h>Shia LaBeouf delivers the most intense motivational speech of all-time</h>
<iframe width="550" height="435"
src="https://www.youtube.com/embed/nuHfVn_cfHU">
</iframe>
</div>
<div class="video-2 wow slideInLeft">
<h>Truth or Drink (Exes)</h>
<iframe width="550" height="435"
src="https://www.youtube.com/embed/pxYpvNMbdXQ">
</iframe>
</div>
<div class="video-3 wow slideInRight">
<h>Walker broke his arm</h>
<iframe width="550" height="435"
src="https://www.youtube.com/embed/5-NXguyFFko">
</iframe>
</div>
javascript
$(function(){
new WOW().init();
});
There is nothing wrong with your code - its working fine
https://jsfiddle.net/k3qaoyxe/
I included the directories as external resources and then
$(function(){
new WOW().init();
});
worked fine.
Are you sure you have included all the libraries properly and they are loading correctly - check the network tab in your developer console.
Libraries included from cdn:
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js
https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js
For me, it worked well after calling WOW at the window load event in addition to document ready event:
//At the document ready event
$(function(){
new WOW().init();
});
//also at the window load event
$(window).on('load', function(){
new WOW().init();
});
<script language="javascript" type="text/javascript"src="javascript.js"></script>
<script language="javascript" type="text/javascript" src="wow.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
should probably be
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="wow.js"></script>
<script src="javascript.js"></script>
You can also get rid of language and type attributes, they're useless and not W3C compliant.
I have asked a question simpler to this before but I have made progress now.
I have a menu bar which uses 2 files of Javascript and then another 2 files of Javascript for another object on the page.
This is my code this is breaking at the moment:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="Javascript/MenuBarAdmin/AdminMenuJS.js" type="text/javascript" ></script>
<script src="Javascript/MenuBarAdmin/AdminMenuJSmin.js" type="text/javascript"></script>
<script src="Javascript/bSimplexMenuBarTransit.js" type="text/javascript"></script>
<script src="Javascript/bSimplexMenuBar.js" type="text/javascript"></script>
<link href="Stylesheet/bSimplexMenuBar.css" rel="stylesheet" />
<link href="Stylesheet/bPersonnelTracker.css" rel="stylesheet" />
<link href="Stylesheet/ScheduleStyle/bsimplex.css" rel="stylesheet" />
<script type="text/javascript">
javascript: window.history.forward(1);
</script>
<script type="text/javascript" charset="utf-8">
function select(e) {
e.eventSelect(e);
menu.show(e);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="script1" runat="server"></asp:ScriptManager>
<div class="wrapper">
<div class="bsimplex-header-bar">
<ul class="modern-menu theme2">
<li><span>Home</span></li>
<li><span>My Calender</span></li>
<li><span>Manager</span></li>
<li><span style="background-color: #f08100 !important;">Absences</span>
<ul>
<li><span>Sickness</span></li>
<li><span>Medical</span></li>
<li><span>Lateness</span></li>
<li><span>Other</span></li>
</ul>
</li>
<li><span>Reports</span>
<ul>
<li><span>Allocation</span></li>
<li><span>Rota</span><</li>
</ul>
</li>
<li><span>Admin</span></li>
<ul class="mm-group mm-right">
<li class="mm-icon">
<div class="menubaricon">
<img src="../../Images/bSimplex_icon_menubar.png" />
</div>
</li>
</ul>
</ul>
<script type="text/javascript">$(".modern-menu").modernMenu();</script>
</div>
The error comes at the bottom of the code when I am trying to find .modernMenu it just says that the object is undefined.
The first 2 script lines that call javascript files are used for a vertical menu bar, and the second 2 are for the horizontal menu bar that isnt working.
.
I have ran through my code 100's of times to find the issue and when i comment out the first 2 lines for the vertical bar the error will go and will work correctly but the vertical bar wont work and visa versa.
I dont know if im correct but at the bottom where the error is happening do i have to call the script file i want to get the information from? or am i limited to the amount of javascript files?
The script tags you're commenting out must be altering $() for their own purposes. There are actually many libraries that use the $() library, so jQuery has conveniently given a jQuery() function which is exactly the same as $(), but has a different name that's probably not going to be used by other libraries. Because the library you inserted altered $() so that it's not jQuery() anymore, use jQuery() instead:
<script type="text/javascript">jQuery(".modern-menu").modernMenu();</script>
try
$(function(){
$(".modern-menu").modernMenu();
})
I am trying to experiment with jQuery mobile, but can't seem to get started.
I have the following HMTL file hosted on a local server:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
</body>
</html>
Which is causing
Javascript error: undefined SECUIRTY_ERR: DOM Exception 18
when accessed from my iPhone from http://192.168.1.1:8000/mobile.html
Did you link the CSS stylesheet file as well before the jquery script include tags?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
Also, in order for the page to show, you must contain content into containers like this:
<body>
<div data-role='page'>
<div data-role='header'>
Header goes here
</div>
<div data-role='content'>
Content goes here
</div>
</div>
</body>