Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Bluefish is ignoring my JQuery file

    I'm new to coding, and trying to get some JQuery to work. As a test, I made this index:

    Code:
    <html>
    
    	<head>
    		<title>SITE THING</title>
    		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    		<link type="text/javascript" src="script.js"></script>
    	</head>
    	<body>
    		<div id="header">
    			<p id="banner">SITE THING</p>
    		</div>
    		<div id="menu">
    			<div class="menu_button">
    				<p class="menu_text">Home</p>
    			</div>
    			<div class="menu_button">
    				<p class="menu_text">About</p>
    			</div>
    			<div class="menu_button">
    				<p class="menu_text">FAQ</p>
    			</div>
    			<div class="menu_button">
    				<p class="menu_text">Contact Us</p>
    			</div>
    		</div>
    		<div id="content">
    			<p class="content_text">Hello World!</p>
    		</div>
    		<div id="footer">
    
    		</div>
    	</body>
    
    </html>
    and this script.js:

    Code:
    $(document).ready(function(){
        $('.menu_button').mouseenter(function(){
            $('.menu_button').fadeTo('fast',1);
        });
        $('.menu_button').mouseleave(function(){
            $('.menu_button').fadeTo('fast',0.5);
        });
    });
    The two files are in the same folder, so they should be seeing each other, right? For full context, here's my CSS too (it's working just fine, but I don't know enough about coding to know if it could be messing up my JQuery):

    Code:
    div {
    	border-radius:25px
    }
    #header {
    	height:100px;
    	width:84%;
    	margin-left:16%;
    	background-color: blue;
    }
    #menu {
    	float:left;
    	margin-top:-100px;
    	height:780px;
    	width:15%;
    	background-color: green;
    	position:fixed;
    }
    #content {
    	float:right;
    	margin-top:15px;
    	height:2000px;
    	width:84%;
    	background-color: red;
    	margin-bottom: 15px;
    }
    #footer {
    	clear:both;
    	height:100px;
    	width:84%;
    	margin-left:16%;
    	background-color: blue;
    }
    .menu_button {
    	height:50px;
    	width:85%;
    	background-color:yellow;
    	margin:auto;
    	margin-top: 20px;
    	border: 2px solid black;
    	opacity:0.5;
    }
    .menu_text {
    	margin:auto;
    	margin-top: 5px;
    	text-align:center;
    	font-size:30px;
    }
    #banner {
    	color:white;
    	text-align:center;
    	font-size:80px;
    	margin-top:0px;
    }
    .content_text {
    	color:white;
    	text-align:left;
    	margin:20px;
    }
    I'm using Bluefish. I already checked that my JavaScript is up to date. The index and stylesheet are working just fine. So I'm totally lost, and if it's a typo, I can't find it.

    Help?

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    Haven't used bluefish so far... But if you can try changing your javascript code as given below -
    PHP Code:
    $(document).ready(function() {
      $(
    '.menu_button')
        .
    mouseenter(function(){
          $(
    this).fadeTo('fast',1);
        })
        .
    mouseleave(function(){
          $(
    this).fadeTo('fast',0.5);
        });
    }); 

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,696
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    I don’t see the jQuery library included in your HTML file. How about using the developer console that is built into most browsers nowadays, and checking for JS errors?

  • #4
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried the code, but it's not working for me.

    Er, total newbie. I don't know what a JQuery library is or how to include it, and I'm equally stumped on what a developer console is or how to access it. Can you explain it, or send some links my way?

    Thanks for the replies!

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,295
    Thanks
    23
    Thanked 611 Times in 610 Posts
    Learn javascript here http://www.w3schools.com/js/

    jquery is a library of routines for javascript. Learn jquery here http://www.w3schools.com/jquery/
    or here http://jquery.com/
    You can download the JQ lib. from that page. It has to be called in your html code before you can use any JQ functions.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #6
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks so much! My code works perfectly now!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •