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