Can't get JavaScript navigation bar to work - javascript

What is happening is nothing at all. I scroll down and the bar stays the same size. I scroll back up nothing happens either. Putting the code into three separate files as they are below is not working like the JFiddle is.
Basically, I have been trying to implement this fiddle but for some reason, I can see it working on the website but it does not work on my version.
Fiddle: http://jsfiddle.net/JJ8Jc/258/
Maybe I am linking JavaScript incorrectly or something.
I'm using Google Chrome.
HTML:
<!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>Nav</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<script type="text/javascript" src="nav.js"></script>
</head>
<body>
<div id="header_nav">
<div id="header_div">
div
</div>
</div>
CSS:
body {
height:2000px;
width:100%;
background-color:#F0F0F0;
}
#header_nav {
width:100%;
height:100px;
padding-top:10px;
padding-left:10px;
background-color:#fff;
position:fixed;
top:0;
left:0;
text-align:center;
border-bottom:1px solid #c1c1c1;
}
#header_div
{
position:relative;
background-color:#14a;
color:#c1c1c1;
height:30px;
width:40px;
display:inline-block;
padding-top: 10px;
}
JavaScript:
$(function(){
$('#header_nav').data('size','big');
$('#header_div').data('size','big');
});
$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
if($('#header_nav').data('size') == 'big')
{
$('#header_nav').data('size','small');
$('#header_nav').stop().animate({
height:'40px'
},600);
$('#header_div').data('size','small');
$('#header_div').stop().animate({
height:'20px',
width: '20px',
'padding-top' : 5
},600);
}
}
else
{
if($('#header_nav').data('size') == 'small')
{
$('#header_nav').data('size','big');
$('#header_nav').stop().animate({
height:'100px'
},600);
$('#header_div').data('size','big');
$('#header_div').stop().animate({
height:'30px',
width: '40px',
'padding-top' : 10
},600);
}
}
});

Make your html into this:
<!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>Nav</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<script type="text/javascript" src="nav.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'><script>
</head>
<body>
<div id="header_nav">
<div id="header_div">
div
</div>
</div>
You might want to check the line that I added:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'><script>
As I memorised it so am not sure it is right

You do not include the jQuery library in the HTML you posted.
Hit F12, I am sure it says $ is undefined in the console.

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

Jquery Fade In not working in Safari

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);
});
});

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.

Categories