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();
})
Related
I've recently been trying to use or familiarize myself with the JQuery tabs function. However everytime I've tried using it I get the error "undefined is not a function". I've researched this problem and a lot say it may have to do with the .js file not being loaded but that is not the case as my console tab shows it being loaded.
Here is the HTML file I have been trying to test out:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="Portal.css" media="screen" />
<script type="text/javascript" src="Portal.js"></script>
<script src="tabs.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'>
<p>Hi, this is the first tab.</p>
</div>
<div id='tab2'>
<p>This is the 2nd tab.</p>
</div>
<div id='tab3'>
<p>And this is the 3rd tab.</p>
</div>
</div>
</body>
</html>
And the tabs.js file (which throws the undefined error when debugging):
$(document).ready(function () {
$("div.tabs").tabs();
});
Thanks. I can provide more details if needed. No CSS is being used yet (but I don't believe that to be the issue here).
Make really sure, that you are loading the js from the external sources.
I had a similar problem. My code was working in konqueror, opera and some firefox / iceweasel browsers, but not in others and not in chromium.
It turned out, that while my page was https hosted, i tried to load the external js over insecure http connection. These links were silently discarded by the "not working" browsers... i spent hours on that frack.
Hope this helps you or others.
You're selecting class tabs but what you have is ID tabs.
Change it to:
$( 'div#tabs' ).tabs();
Or change your HTML to:
class="tabs"
$( "#tabs" ).tabs() use this instead of $("div.tabs").tabs()
I am new to jquery and can't even assume how deeply this issue can go.
When the external page (in this case shop.php) is loaded into index.php, by Jquery function .load(); , it falls apart. Many jquery commands and plugins, that are applied to the shop.php page, aren't working.
This confuses me, because some of js commands and plugins still works. Obviously i can't say that files are not loaded completely, just majority of them are not working.
When I paste shop.php content into index.php, it works perfect. Also when i add desired js code into shop.php (wrapped into script tag), it works as well.
I really don't expect from anyone to look deeply into this problem. I just wanna know if this is common issue, and is there simple explanation for it ?
If not i'll seek for some different approach.
My code:
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.min.css">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="js/shop.js"></script>
<script type="text/javascript" src="js/jquery.touchcarousel-1.2.js"></script>
<script type="text/javascript" src="js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/jquery.ddslick.js"></script>
<script type="text/javascript" src="js/top-navigation.js"></script>
</head>
<body>
<div id="top-bar"><?php include("top-bar.php"); ?></div>
<div id="pageWraper"><?php include("home.php"); ?></div>
</body>
</html>
top-bar.php
<div id="nav">
<ul id="navigationWraper">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<ul class="submenu">
<li>asdasd</li>
<li>asdasdas</li>
<li>derwer</li>
</ul>
<li>Shop</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
shop.php
<div id="shop">
<div id="shopheader">
<div id="shopitemstop">
<div id="productcat">
<!-- bunch of code -->
</div>
</div>
</div>
</div>
Jquery:
$(document).ready(function(){
$(function() {
$("a.menuLink").on("click", function(e) {
e.preventDefault();
$("#pageWraper").load(this.href);
});
});
});
Hope this helps
Thanks,
Update :
I added:
<script type="text/javascript">
$(document).ready(function(){
$.getScript("js/shop.js");
$.getScript("js/jquery.touchcarousel-1.2.js");
$.getScript("js/main.js");
});
</script>
on top of shop.php page, dont know how right this is, but its working now.
Only thing that bugs me is if i remove jquery.touchcarousel-1.2.js from index.php head, page falls apart. It is like, only working if both of them are loaded ????
Question:
I really don't expect from anyone to look deeply into this problem. I
just wanna know if this is common issue, and is there simple
explanation for it ?
Answer:
Yes, it is a common problem for Ajax/dynamically loaded content.
The cause is: that most plugins work on the DOM as it exists when the plugin is run (unless they were specifically created to work with dynamic content).
The fixes include:
Find another plugin that is tolerant of dynamic content
Re-run the plugins
Strip out existing plugins and re-run the plugins (takes some effort to figure out some plugins)
Don't load content dynamically for plugins that do not support it
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 ??
I can't get jQuery to work on my page. so I used jsfiddle.net to test if my jQuery code works, and it does. However, when I copy and paste the same code unto my document, it doesn't work. So I'm assuming that there's an error with linking the jQuery external file on my html document. I'm using TextWrangler as my text editor.
html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Rules </title>
<link rel="stylesheet" href="styleRules.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type= "text/javascript" src="JsRules.js"> </script>
</head>
<div id="left" >
<ol>
<li> First Rule </li>
</ol>
</div>
css
#left {
float:left;
margin-left:200px;
}
jQuery
$(document).ready(function () {
$("#left").mouseenter(function () {
$("#left").fadeTo("fast", 0.25); });
});
Thanks for the time in answering and reading this. I'm currently stuck, I've reached a dead end, and I can't wait to overcome this problem!
I agree with other people that it's most likely a typo in the name of your jQuery file. I created a web page using your exact code except that I spelled the jquery file correctly. It worked fine.
And even though using the BODY element is proper and important, it didn't affect the outcome of my testing your code.
Please, use the "Inspect Element" (tools of chrome ) or Firebug (tool of Firefox and Chrome) for find the error.
Now for me the possible errors are:
Name not declared correctly for example <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
you can change the script with external files (libraries of google) <script src="http://code.jquery.com/jquery-2.0.0.js"></script>
Now I create the DEMO on JSFIDDLE with your code and seems that it works
You have a typo in your HTML referencing the jQuery document:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Rules </title>
<link rel="stylesheet" href="styleRules.css" />
<!---Typo was here--->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type= "text/javascript" src="JsRules.js"> </script>
</head>
<div id="left" >
<ol>
<li> First Rule </li>
</ol>
</div>
</body>
I have:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/temp/css/menu.css" />
<link rel="stylesheet" type="text/css" href="/temp/css/bottomchatdiv.css" />
<link rel="stylesheet" type="text/css" href="/temp/css/centercontent.css" />
<link rel="stylesheet" type="text/css" href="/temp/css/basics.css" />
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript" src="jquery.ba-bbq.js"></script>
<script type="text/javascript" src="jquery.ba-bbq-addtl.js"> </script>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
function getusto(anchorid) {
$(anchorid).scrollTo();
}
</script>
<script type="text/javascript" src="hide&show.js">
</script>
</head>
<body >
<div class="bbq">
<div class="bbq-nav bbq-nav-top menu">
<a class="mainitem menu_links" href="">Welcome</a> <br>
<a class="menu_links" href="#" onclick="getusto('welcome'); return false;">Welcome</a><br>
<a class="menu_links" href="#" onclick="getusto('guidelines'); return false; ">Guidelines</a>
<br>
<hr style="width:48%"/>
<br>
<a class="mainitem menu_links" href="#Regular-Visitors-&-Ops.html">Regulars & Ops</a> <br>
</div>
<br>
<div class="bbq-content centercontent">
<!-- This will be shown while loading AJAX content. You'll want to get an image that suits your design at http://ajaxload.info/ -->
<div class="bbq-loading" style="display:none;">
<img src="/shell/images/ajaxload-15-white.gif" alt="Loading"/> Loading content...
</div>
<!-- This content will be shown if no path is specified in the URL fragment. -->
<div class="bbq-default bbq-item">
default welcome text here.
</div>
</div>
</div>
</body>
</html>
Now, the problem is Regular-Visitors-&-Ops.html page wouldn't load, but it was loading! So I tinkered with my undos until I found that not including prototype.js let that link work via jquery bbq's way.
What gives? How do I get both prototype.js & jquery bbq coexisting? I need both for different things..
to get this up & running you need an additional Regular-Visitors-&-Ops.html file in the same directory, say:
<!DOCTYPE html>
<head>
</head>
</body>
this is the additional file.
</body>
</html>
As well as jquery, jquery bbq's two scripts (I named one myself), & prototype.js.
now if you do set this up - takeaway prototype & the Regular-Visitors(...) link works. problem is, i am using prototype.js. so either how do i get these two to work, or more easily, how i do implement a scrollTo function (can't use anchors, due to jquery bbq hogging the anchors/hashes (e.g. "#welcome" in "index.html#welcome") WITHOUT USING PROTOTYPE.JS? there should be one right?
By including prototype.js after jQuery, Prototype will override the value of the global $ variable. You just need to use:
var $j = jQuery.noConflict();
You can then use $j in place of $ in jQuery contexts and $ for prototype contexts. Here's the documentation: http://api.jquery.com/jQuery.noConflict/.
jQuery and Prototype both use the $ character so they will conflict.
If you wish to use them both together you will need to make use of jQuery's noConflict() method to release the $ alias back to Protoype
There is also a scrollTo jQuery plugin