HTML/CSS/JS beginner errors

Question

These are working in a JSFiddle that andi posted on the answer to my original question. I'm stumped as to what I've missed that it isn't working in the browser. I know this is going to be a very simple fix. Thanks in advance.

HTML:

<div class="blackwrap">
    <header class="blackbar">
        <h2>Before he knew it, he couldn't see a thing.</h2>
        <h4>He fumbled around for the <a id="flash">flashlight</a> on his phone.</h4>
    </header>
</div> <!-- .blackwrap-->    

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
</body>

CSS:

.blackbar {
    background: black;
    color: white;
}
.blackbar.lit {
    background:yellow;
    color:black;
}

Javascript:

$("#flash").on("mouseover", function(){
    $(".blackbar").addClass("lit");
}).on("mouseout", function(){
    $(".blackbar").removeClass("lit")
});

code is working fine. Make sure scripts are loaded properly. — Nishu Tayal
– Nishu Tayal, Commented Oct 17, 2013 at 6:13
So what's the problem, exactly? The jsfiddle seems to work fine. Look in the JavaScript error console and tell what errors you see there and which lines they point to. — JJJ
– JJJ, Commented Oct 17, 2013 at 6:14
check with inspect element with chrome browser identify the errors and post it here — Amerrnath
– Amerrnath, Commented Oct 17, 2013 at 6:27

Sobin Augustine · Accepted Answer · 2013-10-17 07:01:56Z

2

The problem may be, you are running the Jquery include code in your local machine with using the file:// protocol.

So on your local machine use

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

change to this on the server

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

at the server, it will be http: or https: , so server will automatically select the corresponding one.

answered Oct 17, 2013 at 7:01

Sobin Augustine

3,7752 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Harpreet Singh · Accepted Answer · 2013-10-17 06:35:47Z

2

your jquery is not loaded properly use http: in src as below:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

edited Oct 17, 2013 at 6:35

answered Oct 17, 2013 at 6:25

Harpreet Singh

65610 silver badges24 bronze badges

2 Comments

Quentin Over a year ago

This assumes that the OP is testing by using a file:/// URI for the page. It is possible that is the case, but the question doesn't state that.

Harpreet Singh Over a year ago

yes this is the appropriate reason that the code is not running

yourkishore · Accepted Answer · 2013-10-17 06:28:08Z

1

Its really simple fix in the cdn link to jquery you should make a http call

instead of this

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

change it to this

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

The problem is if you dont keep http the browser thinks it is a local file in your pc.

enter image description here

answered Oct 17, 2013 at 6:28

yourkishore

2789 silver badges19 bronze badges

Collectives™ on Stack Overflow

HTML/CSS/JS beginner errors

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related