<script type='text/javascript'>
$(document).ready(function () {
$("#q").keyup(function () {
var value = $('#q').val()
$.getJSON("{% url 'api:api-root' %}" + "bankdetailapi/?q=" + value, function (data) {
var text = []
for (var i = 0; i < 5; ++i) { text.push(data.results[i].ifsc) }
// var text = `IFSC: ${data.results.ifsc}`
if (document.getElementById("q").value.length == 0) { text = [] }
// console.log(text)
$('#q').hover(
function () {
console.log(text)
$("q").autocomplete({
source: text,
delay: 500
});
}, function () {
$("#q").autocomplete("disabled");
})
})
})
})
</script>
I have created variable text to store results from get request. My autocomplete function is inside the getJSON function. i have checked consolelog if its printing anything. Inside of hover function it doesnt print anything, but outside statement when commented out prints results. I dont understand why this is happening. I need this so that my autocomplete wont show results when user deletes all input or is not hovering over it.
Update
I changed $(this).hover to $("#q").hover, as it would trigger hover event for wherever mouse is. still nothing changed
I think you can simplify this a bit and use the actual enable/disable.
I used the long form of the hover (mouseenter, mouseleave) for clarity
$(function() {
$("#q").on('keyup', function() {
var value = $('#q').val();
/* $.getJSON("{% url 'api:api-root' %}" + "bankdetailapi/?q=" + value, function(data) {
var text = [];
for (var i = 0; i < 5; ++i) {
text.push(data.results[i].ifsc);
}
// var text = `IFSC: ${data.results.ifsc}`
if (document.getElementById("q").value.length == 0) {
text = [];
}
});
*/
}).on('mouseenter', function() {
console.log("Initial:", $(this).val());
$(this).autocomplete("enable");
}).on("mouseleave", function() {
// this will break the autocomplete (not choose a value) so you would have to do that manually
// $(this).autocomplete("disable");
}).autocomplete({
source: [{
label: "Choice1",
value: "value1"
}, {
label: "Choice2",
value: "value2"
}, {
label: "Party",
value: "beer"
}],
delay: 500,
select: function(event, selectedObject) {
jQuery(this).val(selectedObject.item.value);
}
});
});
.ui-autocomplete {
position: absolute;
cursor: default;
z-index: 1001 !important
}
.ui-front {
z-index: 1500 !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.min.css" integrity="sha512-ug/p2fTnYRx/TfVgL8ejTWolaq93X+48/FLS9fKf7AiazbxHkSEENdzWkOxbjJO/X1grUPt9ERfBt21iLh2dxg==" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/cupertino/theme.min.css" integrity="sha512-adRIgePtMQgAVB+Mfkhl+Nyva/WllWlFzJyyhYCjznU3Di+Z4SsYi1Rqsep11PYLpUsW/SjE4NXUkIjabQJCOQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="ui-widget">
<label for="q">Tags: </label>
<input id="q" type="text">
</div>
Consider an alternative example.
$(function() {
$("#q").autocomplete({
source: function(request, response) {
var myUrl = "{% url 'api:api-root' %}" + "bankdetailapi/";
$.ajax({
url: myUrl,
data: {
q: request.term
},
success: function(data) {
var text = [];
$.each(data.results, function(i, res) {
if (i < 5) {
text.push(res.ifsc);
}
});
response(text);
}
})
},
delay: 500,
minLength: 0
}).hover(function() {
if ($(this).val() != "") {
$(this).autocomplete("search", $(this).val());
}
}, function() {
$(this).autocomplete("close");
});
});
.ui-autocomplete {
position: absolute;
cursor: default;
z-index: 1001 !important
}
.ui-front {
z-index: 1500 !important;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
<label for="q">Tags: </label>
<input id="q" type="text">
</div>
See More: https://api.jqueryui.com/autocomplete/
Related
Report Paging works, Refresh works, Export (with some probs) and Print works but Find does not highlight anything.
Find code is:
function findText() {
$('.ReportViewerContent').removeHighlight();
var searchText = $("#ReportViewerSearchText").val();
if (searchText != undefined && searchText != null && searchText != "") {
showLoadingProgress('Searching Report...');
var params = $('.ParametersContainer :input').serializeArray();
var urlParams = $.param(params);
var page = parseInt($('#ReportViewerCurrentPage').val());
$.get("/Report/FindStringInReport/?reportPath=#Model.ReportPath.UrlEncode()&page=" + page + "&searchText=" + searchText + "&" + urlParams).done(function (data) {
if (data > 0) {
viewReportPage(data, function () {
$('.ReportViewerContent').highlight(searchText);
hideLoadingProgress();
});
} else {
$('.ReportViewerContent').highlight(searchText);
hideLoadingProgress();
}
});
}
}
Scripts in _Layout are:
<script src="~/lib/jquery/dist/jquery-3.3.1.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
Scripts in Report Viewer are:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/select2.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/select2-bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/mvcreportviewer-bootstrap.css" />
<script src="~/lib/bootstrap/dist/js/select2.min.4.0.3.js"></script>
<script src="~/lib/jquery/dist/jquery.highlight-5.js"></script>
Have tried options like:
$('.ReportViewerContent').highlight(searchText, { wholeWord: false, ignoreCase: true, color: "#ffff00", bold: true });
Any thoughts please.
I have just tested on my working environment and it is highlighting. It does require a css class for it to highlight appropriately. So be sure that you have a ".highlight" style similar to this:
.highlight { background-color: yellow; }
I already imported
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
under the head section. But still I got,
RelatedObjectLookups.js:142 Uncaught TypeError: $ is not a function
at RelatedObjectLookups.js:142
at RelatedObjectLookups.js:175
(anonymous) # RelatedObjectLookups.js:142
(anonymous) # RelatedObjectLookups.js:175
(index):177 Uncaught TypeError: $ is not a function
at (index):177
Relavant html looks like,
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" rel="stylesheet">
</head>
<body>
<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"> </script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.min.js"></script>
<script type="text/javascript" src="/static/admin/js/calendar.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/DateTimeShortcuts.js"></script>
{{form.media}}
<div class="row">
<div class="col-6">
<form method="post" id="extendTrialForm" class="form">
{% csrf_token %}
{% bootstrap_field form.user %}
{% bootstrap_field form.core_instance %}
{% bootstrap_field form.expiry_datetime %}
{% buttons %}
<button type="submit" class="btn btn-primary">Submit</button>
{% endbuttons %}
</form>
</div>
</div>
<script>
$( document ).ready(function() { // line no 177
Removing the script tags above {{form.media}} won't throw any error related to jquery but it misses the widget functionality. I need that script tags but I don't want Jquery to return $ is not a function. I have tried adding $.noconflict, jQuery(document).ready but nothing works.
RelatedObjectsLookups.js
/*global SelectBox, interpolate*/
// Handles related-objects functionality: lookup link for raw_id_fields
// and Add Another links.
(function($) {
'use strict';
// IE doesn't accept periods or dashes in the window name, but the element IDs
// we use to generate popup window names may contain them, therefore we map them
// to allowed characters in a reversible way so that we can locate the correct
// element when the popup window is dismissed.
function id_to_windowname(text) {
text = text.replace(/\./g, '__dot__');
text = text.replace(/\-/g, '__dash__');
return text;
}
function windowname_to_id(text) {
text = text.replace(/__dot__/g, '.');
text = text.replace(/__dash__/g, '-');
return text;
}
function showAdminPopup(triggeringLink, name_regexp, add_popup) {
var name = triggeringLink.id.replace(name_regexp, '');
name = id_to_windowname(name);
var href = triggeringLink.href;
if (add_popup) {
if (href.indexOf('?') === -1) {
href += '?_popup=1';
} else {
href += '&_popup=1';
}
}
var win = window.open(href, name, 'height=500,width=800,resizable=yes,scrollbars=yes');
win.focus();
return false;
}
function showRelatedObjectLookupPopup(triggeringLink) {
return showAdminPopup(triggeringLink, /^lookup_/, true);
}
function dismissRelatedLookupPopup(win, chosenId) {
var name = windowname_to_id(win.name);
var elem = document.getElementById(name);
if (elem.className.indexOf('vManyToManyRawIdAdminField') !== -1 && elem.value) {
elem.value += ',' + chosenId;
} else {
document.getElementById(name).value = chosenId;
}
win.close();
}
function showRelatedObjectPopup(triggeringLink) {
return showAdminPopup(triggeringLink, /^(change|add|delete)_/, false);
}
function updateRelatedObjectLinks(triggeringLink) {
var $this = $(triggeringLink);
var siblings = $this.nextAll('.change-related, .delete-related');
if (!siblings.length) {
return;
}
var value = $this.val();
if (value) {
siblings.each(function() {
var elm = $(this);
elm.attr('href', elm.attr('data-href-template').replace('__fk__', value));
});
} else {
siblings.removeAttr('href');
}
}
function dismissAddRelatedObjectPopup(win, newId, newRepr) {
var name = windowname_to_id(win.name);
var elem = document.getElementById(name);
if (elem) {
var elemName = elem.nodeName.toUpperCase();
if (elemName === 'SELECT') {
elem.options[elem.options.length] = new Option(newRepr, newId, true, true);
} else if (elemName === 'INPUT') {
if (elem.className.indexOf('vManyToManyRawIdAdminField') !== -1 && elem.value) {
elem.value += ',' + newId;
} else {
elem.value = newId;
}
}
// Trigger a change event to update related links if required.
$(elem).trigger('change');
} else {
var toId = name + "_to";
var o = new Option(newRepr, newId);
SelectBox.add_to_cache(toId, o);
SelectBox.redisplay(toId);
}
win.close();
}
function dismissChangeRelatedObjectPopup(win, objId, newRepr, newId) {
var id = windowname_to_id(win.name).replace(/^edit_/, '');
var selectsSelector = interpolate('#%s, #%s_from, #%s_to', [id, id, id]);
var selects = $(selectsSelector);
selects.find('option').each(function() {
if (this.value === objId) {
this.textContent = newRepr;
this.value = newId;
}
});
win.close();
}
function dismissDeleteRelatedObjectPopup(win, objId) {
var id = windowname_to_id(win.name).replace(/^delete_/, '');
var selectsSelector = interpolate('#%s, #%s_from, #%s_to', [id, id, id]);
var selects = $(selectsSelector);
selects.find('option').each(function() {
if (this.value === objId) {
$(this).remove();
}
}).trigger('change');
win.close();
}
// Global for testing purposes
window.id_to_windowname = id_to_windowname;
window.windowname_to_id = windowname_to_id;
window.showRelatedObjectLookupPopup = showRelatedObjectLookupPopup;
window.dismissRelatedLookupPopup = dismissRelatedLookupPopup;
window.showRelatedObjectPopup = showRelatedObjectPopup;
window.updateRelatedObjectLinks = updateRelatedObjectLinks;
window.dismissAddRelatedObjectPopup = dismissAddRelatedObjectPopup;
window.dismissChangeRelatedObjectPopup = dismissChangeRelatedObjectPopup;
window.dismissDeleteRelatedObjectPopup = dismissDeleteRelatedObjectPopup;
// Kept for backward compatibility
window.showAddAnotherPopup = showRelatedObjectPopup;
window.dismissAddAnotherPopup = dismissAddRelatedObjectPopup;
$(document).ready(function() {
$("a[data-popup-opener]").click(function(event) {
event.preventDefault();
opener.dismissRelatedLookupPopup(window, $(this).data("popup-opener"));
});
$('body').on('click', '.related-widget-wrapper-link', function(e) {
e.preventDefault();
if (this.href) {
var event = $.Event('django:show-related', {href: this.href});
$(this).trigger(event);
if (!event.isDefaultPrevented()) {
showRelatedObjectPopup(this);
}
}
});
$('body').on('change', '.related-widget-wrapper select', function(e) {
var event = $.Event('django:update-related');
$(this).trigger(event);
if (!event.isDefaultPrevented()) {
updateRelatedObjectLinks(this);
}
});
$('.related-widget-wrapper select').trigger('change');
$('body').on('click', '.related-lookup', function(e) {
e.preventDefault();
var event = $.Event('django:lookup-related');
$(this).trigger(event);
if (!event.isDefaultPrevented()) {
showRelatedObjectLookupPopup(this);
}
});
});
})(django.jQuery);
I’m pretty sure your whole problem is that the very end of your RelatedObjectsLookups.js JS file says django.jQuery, which doesn’t exist (or at least, the googleapis jQuery file you’re loading in isn’t going to define that). Change it to window.jQuery and things should work for you.
EDIT based on your reply
Since you can’t change the line that says django.jQuery, then let’s define that.
Right after you include your jQuery file, add the following tag.
<script>
django = django || {};
django.jQuery = django.jQuery || jQuery;
</script>
This will set django.jQuery to jQuery (which is included by your googleapis file), if it’s not been set yet. Now it will exist for your later scripts to use.
My skills with jquery and such are limited when it comes to this. For our website we are using timber framework with some of the plugins. I would like to use their counter but have the counter go up in real time. Please help if you can. Thank you in advance. in the HTML i have wrote realtime where i would like the counter to be realtime. I hope i have provided enough information. So in summary what i need help with is i would like to use the timber framework style and look but have the counter be realtime instead of stopping at a number and being a very basic counter.
HTML
`
<div class="column width-4 offset-4 center">
<div class="counter-wrapper">
<p style="font-size:60px;" class="counter lead"><span class="stats-1" data-count-from="1300000" data-count-to="realtime" >1000000</span></p>
<p style="font-size:36px;" class="lead">Hotspots</p>
</div>
</div>
`
Javascript
<script>
$( document ).ready( function(){
$( '.stats-1' ).counter();
$( '.stats-2' ).counter({
autoStart: true
});
});
</script>
Realtime counter URL
https://reelsonar-services.com/api/v1/hotspot_count
OUR COUNTER from a sample site
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.flipcountdown.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.flipcountdown.css" />
<script>
var hotspot_count = 1000000;
function fetch_waterbody_count() {
var url="https://reelsonar-services.com/api/v1/hotspot_count";
//var url="http://reelsonar-services.com:8085/hotspot_count";
var html = [];
$.getJSON( url, function( data ) {
console.log( data );
$.each(data, function(index, d){
html.push("Hotspots: ", d.hotspot_count, "<br>");
var count = parseInt( d.hotspot_count );
if( count != hotspot_count) {
hotspot_count = count;
update_counter( hotspot_count )
}
});
});
}
function update_counter( count ) {
jQuery('#flipcountdown').flipcountdown({size:'md',tick:count});
}
function reset_counter( count ) {
jQuery('#flipcountdown').flipcountdown({size:'md',tick:count});
}
function pulse_hotspot() {
(function pulse(back) {
$('#hotspot_img').animate(
{
'font-size': (back) ? '25px' : '35px',
opacity: (back) ? 1 : 0.5
}, 1200, function(){pulse(!back)});
$('#hotspot_img img').animate(
{
'width': (back) ? '125px' : '112px'
}, 1200);
})(false);
}
</script>
<body style="background: lightblue;text-align: center">
<script>
$(document).ready(function(){
$("#fetchButton").click(function(event){
fetch_waterbody_count();
});
$("#addOneButton").click(function(event){
hotspot_count += 1;
update_counter( hotspot_count );
});
$("#addTenButton").click(function(event){
hotspot_count += 10;
update_counter( hotspot_count );
});
$("#resetButton").click(function(event){
reset_counter(1000000);
});
setInterval(fetch_waterbody_count, 2000);
pulse_hotspot();
});
</script>
<script>
jQuery(function(){
jQuery('#flipcountdown').flipcountdown({size:'md',tick:hotspot_count}); <!-- Medium sized -->
})
</script>
<div style="font-size: x-large; padding-bottom: 1em">ReelSonar Global Hotspot Counter</div>
<div style="font-size: large; padding-bottom: 1em">Displays Hotspots as they are created by our users in real time.</div>
<pre>(Retrieves Hotspot count every two seconds)</pre>
<div id="hotspot_img"><img src="hotspot.png" /></div>
</body>
</html>
This is a polling issue: send Ajax request periodically, get the latest number and display it on screen (using Timber's counter to add animation effect).
Here is a working example. Please note it is a bit complex because the returned data is an array, not a single object (need to handle the situation when multiple numbers are returned in one array):
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="lib/css/components/timber.css" />
</head>
<body>
<span data-count-from="1" data-count-to="1" id="counter"></span>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="lib/js/plugins/jquery.tm.counter.js"></script>
<script type="text/javascript">
$(function() {
var queue = [];
var url="https://reelsonar-services.com/api/v1/hotspot_count";
var counter = document.getElementById('counter');
var $counter = $(counter);
var latestNum = null;
getData(true);
setInterval(function() {
getData();
}, 30000);
function getData(init) {
$.getJSON(url, function(data) {
if (init) {
var num = data.shift().hotspot_count;
counter.dataset.countFrom = num;
$counter.text(formatNumber(num));
}
queue = queue.concat(data);
playCount();
});
}
function playCount() {
if (queue.length === 0) {
return;
}
var countTo = queue.shift().hotspot_count;
if (countTo && countTo === latestNum) {
playCount();
}
latestNum = countTo;
counter.dataset.countTo = countTo;
$counter.counter();
setTimeout(function() {
counter.dataset.countFrom = countTo;
if (queue.length > 0) {
playCount();
}
}, 1000);
}
function formatNumber( number ) {
return number.toString().replace( /(\d)(?=(\d{3})+$)/g, '$1,' );
}
});
</script>
</body>
</html>
I`m filling a kendo dropdown with a function but I would like for the default value to be "Select Option" which you wont be able to select it back once you select another one.
function FillInDropDown(dataSet,ddID) {
var dropDown = $(ddID);
if (!dataSet.error) {
var i;
var values = [];
// Apppend the other options on dataSet
for (i = 0; i < dataSet.dropdownData.length; i++) {
values.push(dataSet.dropdownData[i]);
}
// Clearing Values
$(ddID).empty();
$(ddID).kendoDropDownList({
dataSource: [],
animation: false
});
$(ddID).data("kendoDropDownList").dataSource.data(values);
$(ddID).data("kendoDropDownList").value(values[0]);
}
else {
simpleDialog.info(dataSet.ErrorMessage);
}
};
Here are two alternatives that you can pursue:
After the user picks a value, remove the optionLabel item from the list and refresh it.
After the user picks a value, prevent the selection of the optionLabel item via the select event.
You will need a one-time handler for the change event of the DropDownList.
Here is an example for both options:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/dropdownlist/remotedatasource">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.914/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
</head>
<body>
<p>The optionLabel will be removed:</p>
<input id="products1" />
<p>The optionLabel selection will be prevented:</p>
<input id="products2" />
<script>
$(function() {
var settings = {
optionLabel: "Select a product",
dataTextField: "ProductName",
dataValueField: "ProductID",
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "//demos.telerik.com/kendo-ui/service/Products",
}
}
}
};
$("#products1").kendoDropDownList(settings);
$("#products2").kendoDropDownList(settings);
$("#products1").data("kendoDropDownList").one("change", function(e) {
e.sender.list.find(".k-list-optionlabel").remove();
e.sender.refresh();
});
$("#products2").data("kendoDropDownList").one("change", function(e) {
e.sender.bind("select", function(j){
if (j.dataItem.ProductID == "") {
j.preventDefault();
}
});
});
});
</script>
</body>
</html>
var originalContentFirst = $('#first').html();
$('#first').hover(function() {
$('#first').html('<strong>New HTML</strong>');
}, function() {
$('#first').html(originalContentFirst);
});
var originalContentSecond = $('#second').html();
$('#second').hover(function() {
$('#second').html('<strong>New HTML</strong>');
}, function() {
$('#second').html(originalContentSecond);
});
var originalContentThird = $('#third').html();
$('#third').hover(function() {
$('#third').html('<strong>New HTML</strong>');
}, function() {
$('#third').html(originalContentThird);
});
var originalContentFourth = $('#fourth').html();
$('#fourth').hover(function() {
$('#fourth').html('<strong>New HTML</strong>');
}, function() {
$('#fourth').html(originalContentFourth);
});
This was copied and adapted from elsewhere on this website. As you can see, its function is pretty basic. I have 4 divs (terrible ids, I know), and on a hover it should replace the HTML in them with the new HTML. Any idea why this is not doing anything at all? I'm sure I'm missing something rather elementary, but I can't figure out what the hell it is?
Edit: full HTML
<!DOCTYPE html>
<html>
<head>
<title>Bio</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script language="Javascript" type="text/javascript" src="script.js"></script>
</head>
<body>
<div id=first>
<span>About Me</span>
</div>
<div id=second>
<span>Past Jobs</span>
</div>
<div id=third>
<span>Projects</span>
</div>
<div id=fourth>
<span>About</span>
</div>
</body>
</html>
As Jaromanda X said - you're loading the script ABOVE the html, therefore it has nothing to attach to.
$(function() { // this waits until all html loaded
var originalContentFirst = $('#first').html();
$('#first').hover(function() {
$('#first').html('<strong>New HTML</strong>');
}, function() {
$('#first').html(originalContentFirst);
});
var originalContentSecond = $('#second').html();
$('#second').hover(function() {
$('#second').html('<strong>New HTML</strong>');
}, function() {
$('#second').html(originalContentSecond);
});
var originalContentThird = $('#third').html();
$('#third').hover(function() {
$('#third').html('<strong>New HTML</strong>');
}, function() {
$('#third').html(originalContentThird);
});
var originalContentFourth = $('#fourth').html();
$('#fourth').hover(function() {
$('#fourth').html('<strong>New HTML</strong>');
}, function() {
$('#fourth').html(originalContentFourth);
});
}); // this closes it