ModelIt is Undefined [IE7!] - javascript

Hello I'm having problems with a featured content area breaking the site in IE7 which is causing the splash to display above the content (as its also jquery).
<script type="text/javascript" src="/site/3/design/js/featurebar.js"></script>
<script type="text/javascript">
//<!--
jQuery( function(){ ModelIt.FeatureBar.init() } );
//-->
</script>
ModelIt is defined inside featurebar.js
Every other browser, the above works fine, in ie7 I get ModelIt is undefined...Any ideas of a work around?
Here is a test page: http://www.prowler.tv/scripts/test.php - I get object unexpected in IE7.

Change
if (!ModelIt)
to
if (!window['ModelIt'])
and see if that helps.

Related

Javascript function works on JSFiddle but not in my HTML document?

So, I found a code/function I wanted to use on this site here: stackoverflow
I then copied the code from the second answer, did some small changes and tested if it actually worked, and I found out it did not. All of the functions from the link work on JSFiddle tho, but none of them work for me in my html document.
I did < script>, didn't work. I tried to make a separate .js document, but the code was still not working.
<body>
<div id="bokse2"></div>
<div id="boksi"></div>
<script src="test.js" type="text/javascript"></script>
<script>
$(function() {
$('#bokse2').click(function() {
$('#boksi').css('margin-left', '-=10px');
});
});
</script>
</body>
The big box (boksi) should move 10 pixels to the left by clicking on the smaller box (bokse2). Just like it does here: JSFiddle
You are missing the include to the jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

Why can't I bind to a click event from a css class in IE 7-8?

Why doesn't this JavaScript work in Internet Explorer 7-8? All I am trying to do is wire up the 'click' event for multiple DIVs by using jQuery to select the DIVs by class name.
It works in Firefox, Chrome, Safari. In IE, it will only work in Browser Mode: IE 9 / Document Mode: IE 9 standards". Can't get it to work in IE 7 or 8.
<!DOCTYPE html>
<head>
<title>IE Click Target Test</title>
</head>
<body>
<div class="ClickTarget">Button 1</div>
<div class="ClickTarget">Button 2</div>
<!-- load jQuery 1.6.4 from CDN -->
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="application/javascript">
// This works fine in all browsers except IE pre-9.
$(document).ready(function () {
$(".ClickTarget").click(function () {
alert("If you can see me, it worked!");
});
});
</script>
</body>
</html>
Normal disclaimers: I wouldn't HAVE to use jQuery for this example, but it illustrates a problem I am having with a larger solution that does use jQuery 1.6.4. IE is often quirky, I've had to deal with it many years, but that's life.
For some reason, maybe the impending holiday, I'm overlooking something. Any ideas why I can't register the click in IE?
I think it's the type="application/javascript" in your <script> tags -
"text/javascript" is the only type that is supported by all three
browsers. However, you don't actually need to put a type. The type
attribute of a script tag will default to "text/javascript" if it is
not otherwise specified. How that will affect validation, I'm not
sure. But does that really matter anyway?
From - Why doesn't IE8 recognize type="application/javascript" in a script tag?
Try changing script tag's type attribute to text/javascript it should work fine in all the browsers.
As Shankar said originally, it's your script type not being "text/javascript"
I tried this JSFiddle in IE8 and worked fine for me.
http://jsfiddle.net/Nna2T/
This is not an answer but comments can't format code, so just an FYI...
This:
$(document).ready(function () {
...
});
Can be shorted to just:
$(function() {
...
});

Problem with script execution in Safari

I had a problem with some functionality working in all browsers except for Safari, and I have reduced the problem down to this.
In my page I have the following script declarations at the end of my body element:
<script type="text/javascript" src="../../Scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-ui-1.8.11.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.ui.autocomplete.html.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.textchange.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.reveal.js"></script>
<script type="text/javascript" src="../../Scripts/mainScript.js"></script>
Then inside the mainScript.js file, I have put the following code:
$(function () {
alert("found");
});
In all other browsers, it displays a message box, but in Safari it does nothing.
Safari's javascript debugger lists the script, and can see the contents, but for some reason it's not included.
I found this problem since I tried to call a function in mainScript.js from an inline script inside the html page (the inline script was defined below the mainScript.js definition), and the Safari debugger complained that the function was not found anywhere.
What have I done wrong here, and why does not Safari include this script. All the jquery scripts are included and are working fine.
Your code seems good.
I tried with this code
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Test</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
alert("Test");
});
</script>
</body>
</html>
and it works fine (Safari 5.0.5 7533.21.1 on Windows 7).
A couple of questions:
Have you tried calling your function manually from the Error Console? Does it work?
If you place a simple alert("Test."); outside of the document ready function, is it displayed?
If you call jQuery's function from the Error Console, what do you get? Do they work?
The problem was found elsewhere in mainScript.js.
{ class: 'someclass' } was sent as parameter to some method, and class is a reserved word.
This should probably have given errors in other browsers as well, but they gladly ignored it and kept on going.
The fix was simply to change it to { 'class': 'someclass' }

Get an alert box to popup at the jquery event $(document).ready in smarty template

I'm juuuuuust trying to get an pop up displaying test when the document is ready. I've managed to get google maps working on another page but somehow this is a lot of pain.
Here's the code:
<html>
<head>
[...]
<script type="text/javascript" href="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
{literal}
<script type="text/javascript">
$(document).ready(function () {
alert ("test");
});
</script>
{/literal}
</head>
[...]
</html>
What should I do to get that popup message? I also tried copy pasting from my working jquery page without much success.
Changing <script href=...> to <script src=...> works like a charm for me.
Does you javascript is enabled in your browser ?
You can type this:
$(function() {
alert("test");
});

jQuery animation issue in Chrome

I was animating an a element in jQuery using jQuery 1.3.2 and jQuery color plugin. I was animating the 'color' and 'backgroundColor' properties at the same time. In IE8 and FF it worked just fine. Chrome animated the mousehover color and then stopped. The background stayed the same and the mouseout did not undo the effect as it should have.
Chrome's developer tools said something about something being undefined. I know that I'm being somewhat vague here, perhaps this is a known issue?
EDIT - Code(, finally!):
<script>
$(document).ready(function(event){
$(".nav a").hover(function(event){
$(this).animate({"color":"#FFFFFF", "backgroundColor":"#3AB7FF"}, 900);
},function(event){
$(this).animate({"color":"#98DCFF","backgroundColor":"#FFFFFF"}, 900);
});
});
</script>
EDIT:
#Bernhard Hofmann - What do you mean "issues with the properties you've chosen"? Please elaborate.
It would seem that Chrome has a few issues with the properties you've chosen. I managed to get the animation working using mouse enter and leave events in Chrome. Here's the script and mark-up for those wanting to fiddle and have a go as well.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(event){
$(".nav a").
mouseenter(function(){$(this).animate({fontSize:"2em"}, 900);}).
mouseleave(function(){$(this).animate({fontSize:"1em"}, 900);});
/*
$(".nav a").hover(function(){
$(this).animate({"color":"#FFFFFF", "backgroundColor":"#3AB7FF"}, 900);
},function(){
$(this).animate({"color":"#98DCFF","backgroundColor":"#FFFFFF"}, 900);
});
*/
});
</script>
</head>
<body>
<div class="nav" style="color:#000;background:#cfc;padding:2em 2em 2em 2em;margin:2em 2em 2em 2em;">
StackOverflow
</div>
</body>
</html>
This seems to be a bug with the color animation plugin with webkit browsers with their rgba(r,g,b,opacity) format for background color style.
The fix is simple, just add these lines in the appropriate place inside the getRGB(color) function of the plugin.
// Look for rgba(num,num,num,num)
if (result = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
EDIT: Here is a working version with the fix http://jsbin.com/ekoli
Can you provide some HTML? I tried out with Google Chrome 4 BETA on Mac OS and Chrome 3 on XP and it worked as intended.
The HTML I used is as follows
<head>
<!-- These are my local jquery files. Use yours or the ones from Google -->
<script src="/osr/javascript/dev/librarys/jquery.js" type="text/javascript"></script>
<script src="/osr/javascript/dev/librarys/jquery-ui/js/jquery-ui.js" type="text/javascript"></script>
<script>
$(document).ready(function(event){
$(".nav a").hover(function(event){
$(this).animate({"color":"#FFFFFF", "backgroundColor":"#3AB7FF"}, 900);
},function(event){
$(this).animate({"color":"#98DCFF","backgroundColor":"#FFFFFF"}, 900);
});
});
</script>
</head>
<body>
<div class="nav">
<a>aighosvaovhaovuho</a>
</div>
</body>
I have the same issue, using jQuery.animate
Works fine in FF, IE 7 & 8
The code..
$(document).ready(function(){
jQuery.noConflict();
jQuery('.boxgrid.caption').hover(function(){
var s = jQuery(".cover", this).stop();
s.animate({width: "50%"},{queue:false,duration:300});
jQuery(".cover", this).stop().animate({top: "180px"},{queue:false,duration:300});
}, function() {
jQuery(".cover", this).stop().animate({top:'260px'},{queue:false,duration:300});
});
});
Produces:
ERROR : (from chrome dev tool) :
Uncaught TypeError: Cannot set
property 'width' of undefined

Categories