Jquery Fade In not working in Safari - javascript

I have a simple splash page that I want to fadeIn a single div. For some reason I can't get it to work in Safari. In safari it only shows $(document).ready(function(){ and the image below but that is it, no effect.
Works fine in FF and Chrome.
$(document).ready(function(){
$("#image").hide().fadeIn(3500)
});
Full Source below:
<!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>Sample</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<style type="text/css">
<!--
#image {
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -300px;
}
-->
</style>
<script type="text/javascript" />
$(document).ready(function(){
$("#image").hide().fadeIn(3500)
});
</script>
</head>
<div id="image"><img src="14.png" alt="Sample" /></div>
<body>
</body>
</html>

<script type="text/javascript" />
$(document).ready(function(){
$("#image").hide().fadeIn(3500)
});
</script>
Needs to be
<script type="text/javascript" >
$(document).ready(function(){
$("#image").hide().fadeIn(3500);
});
</script>
You added extra '/' on the first line

Try chaining the events, similar to the following:
$(document).ready(function(){
$("#image").hide('fast', function() {
$(this).fadeIn(3500);
});
});

Related

Javascript function into another file

i'm actually trying to do something new for me , and i'm not able to know if it's possible or not.
I have one Html page whit some iframe into. That i can't touch.
I only have acces to the iframe. And i'd like to do a button into one of this iframe that will change the width of an element into another iframe.
I actually have this :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<meta http-equiv="content-type" content="text/html; char=iso-8859-1">
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
</div>
<style type="text/css">
body{
overflow-x: hidden;
overflow-y: auto;
margin: 0;
padding: 0;
width:100%;
height:1080px;
}
#container
{
width:15px;
height:15px;
}
</style>
<script>
function Expend()
{
document.getElementById('container').style.width="100%";
document.getElementById('container').style.height="100%";
screen.width;
}
</script>
</body>
</html>
i wish that the Expend() function is in another jsfile/Iframe and change the width of the element container of this iframe, is that possible ?
Thanks a lot sorry if my question isn't understable

JavaScript does not run for mouseover

Why doesn't the script below seem to run? I would also like some advice on how to debug JavaScript.
<!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>Untitled Document</title>
<style type="text/css">
#clickable_div {
width:100px;
height:50px;
background-color:#9c9c9c;
}
* {
margin:0;
padding:0
}
#nav_menu {
width:100px;
height:auto;
background-color:#CCC;
display:none;
}
#wrap {
width:100px
}
</style>
<script src="js/jquery.js"></script>
<SCRIPT LANGUAGE="JAVASCRIPT">
$('#clickable_div').mouseover( function(){
$('#nav_menu').slideDown();})
$('#wrap').mouseleave( function(){
$('#nav_menu').slideUp();});
</script>
<div id='wrap'>
<div id="clickable_div">MENU</div>
<div id="nav_menu">
<ul>
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
</div>
</div>
</div>
</head>
<body>
</body>
</html>
Besides for putting the HTML in the body of the page, you need to wait for the page to be ready.
<script>
$(function(){
$('#clickable_div').mouseover( function(){
$('#nav_menu').slideDown();})
$('#wrap').mouseleave( function(){
$('#nav_menu').slideUp();}
);
});
</script>
Your script is executing before the DOM is ready. You need to wait until the DOM is available before trying to manipulate it.
Change your script to:
$(document).ready(function() {
$('#clickable_div').mouseover( function(){
$('#nav_menu').slideDown();})
$('#wrap').mouseleave( function(){
$('#nav_menu').slideUp();});
});
You can debug JavaScript code easily with Chrome, see Debugging JavaScript.

Jquery-ui resizable plugin doesn't work

what on earth am i doing wrong?
<!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>Draggable crop</title>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript" src="/scripts/jquery.ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.image_outline').resizable();
});
</script>
<style type="text/css">
.image_outline {
border: dashed 1px #000;
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div class="image_outline"></div>
</body>
</html>
Here's the code on jsfiddle: http://jsfiddle.net/dAHt8/
Why is the resizeable plugin not making the div resizeable?
Works fine once you add the right CSS link:
jsFiddle example.
For that jsFiddle I linked to the hosted jQuery UI CSS at: http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css

How can a link open a window in same page using JQuery? It works in Javascript as shown

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Open Div from Link</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body
{
background-color:#aaaaff;
}
#one
{
position:absolute;
top:80px;
left:40px;
}
object
{
width:980px;
height:660px;
border:solid 1px #000000;
}
/*//]]>*/
</style>
<script language="javascript" type="text/javascript">
//<![CDATA[
// written by: Coothead
function updateObjectIframe(which) {
document.getElementById('one').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"><\/object>';
}
//]]>
</script>
</head>
<body>
<div id="one">
<object id="foo" name="foo" type="text/html" data="http://www.w3schools.com/"></object>
</div>
<div>
Retreive Existing Records
</div>
</body>
</html>
Make from scratch using a div is too costly, because you need to implement all the handling of dialog (drag, drop, close)
You can use an gui lib, like jQuery UI, or an jquery plugin.

How come my jquery plugin is not working on my page but in the very similair sample code?

In the sample code The javascript drowdown works fine, but on link text my page it doesn't work in firefox.
sample code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>geo-autocomplete demos</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/ui.geo_autocomplete.js"></script>
<script type="text/javascript">
$().ready(function() {
$('.from').geo_autocomplete();
});
</script>
<style type="text/css">
.ui-autocomplete { overflow-y: auto; width:300px; }
* html .ui-autocomplete { /* IE max- */height: expression( this.scrollHeight > 320 ? "320px" : "auto" ); }
.ui-autocomplete { max-height: 320px; }
.ui-autocomplete li { font-size:10pt; }
</style>
</head>
<body>
<h1>geo-autocomplete demos</h1>
<h3>Basic use</h3>
<p>Location: <input type="text" class="from" size="50" /></p>
</body>
</html>
Some of the javascript from my implementation(not working):
from my header
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/ui.geo_autocomplete.js"></script>
<script src="/js/common-2.0.js" type="text/javascript"></script>
common-2.0.js
$(document).ready(function()
{
//Some other code, removed in this example
$('.from, .to').geo_autocomplete();
});
It looks to me as if your page is not successfully getting all the Google Javascript files it needs. There are errors in the console. It's hard to tell exactly what's wrong because Firebug seems confused by the fact that your page is XML.

Categories