Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
If fixed all of the issues I had yesterday, but when I drag my file into any brower, it just says "Hello" and doesn't include the element at all nor does it hide when clicked.
MyIndex.html
<!DOCTYPE HTML>
<HTML>
<head></head>
<body>
<title>Mary Bishop</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script type="text/javascript" src="jscript.js"></script>
<div ID="contact">Hello</div>
</body>
</HTML>
stylesheet.css
#contact {
height: 100px;
width: 100px;
background-color: #517F8F;
border-radius: 25px;
border: 2px solid blue;
text-align: center;
display: block;
text-align: center;
vertical-align: middle;
line-height: 100px;
}
jscript.js
$(document).ready(function(){
$('#contact').click(function(){
$(this).hide();
});
});
I moved the body tag up to include all of the links (as you can see in the current HTML file), but that didn't change anything :( I'm so confused. Any help would be greatly appreciated. Thanks
You probably have your files inside of other folders. For example, does the folder that contains your files look something like this?:
MyWebsite
scripts <-- this is a folder
jscript.js <-- this file is in the "scripts" folder
stylesheets
stylesheet.css
MyIndex.html
If so, then you'll need to update your <link> and <script> tags so that they look like this:
<link href="stylesheets/stylesheet.css" type="text/css" rel="stylesheet">
^^^^^^^^^^^^ <- this should be the name of the folder
that your stylesheet lives in
<script type="text/javascript" src="scripts/jscript.js"></script>
^^^^^^^^
Basically, you need to add the appropriate folders to your links: otherwise they point to the wrong place.
You can quickly load the source code for your webpage by hitting [control][u] in Chrome. You will then see the JavaScript and Stylesheet URLs as links. You can click on these to follow them to see if they are working correctly.
The <body> element should include only the <div> element. Otherwise, the code you posted seems to be working. Check to make sure this fiddle is what you want.
Html:
<div ID="contact">Hello</div>
CSS:
#contact {
height: 100px;
width: 100px;
background-color: #517F8F;
border-radius: 25px;
border: 2px solid blue;
text-align: center;
display: block;
text-align: center;
vertical-align: middle;
line-height: 100px;
}
JavaScript:
$(document).ready(function(){
$('#contact').click(function(){
$(this).hide();
});
});
Related
I am learning to build websites and at the moment I am coding in visual-studio code insiders, with most jQuery plugins installed.
When I open this url :
" http://www.completewebdevelopercourse.com/content/4-jquery/4.3.html "
which has identical source code as the code below,
I get two different results.
one, In which the java-script is working (this is the page from the link), and in the other(stored in a local folder and opened inside VScode), it is not.
I have consulted the VS-code website and forums. No luck and my problem is not mentioned at all. Only that there does not seem to be a good plugin for jQuery but snippet-packages, which I have installed.
And normal google-ling gives me all the same results in which people are asking for jQuery plugins as mentioned above
How can this be? And how do I fix it?
[code]
<!DOCTYPE html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
#circle {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: green;
margin: 10px;
}
.square {
width: 150px;
height: 150px;
background-color: red;
margin: 10px;
}
</style>
</head>
<body>
<div id="circle"></div>
<div class="square"></div>
<div class="square"></div>
<script type="text/javascript">
$("div").click(function() {
alert("a div was clicked!");
});
</script>
</body>
Make sure that you downloaded the jquery.min.js file (you should place it in the same folder of the html page), otherwise it would go 404.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I'm very new to coding so I need help from you guys!
I wrote these codes to run a test but I can't seem to get the jQuery to load when previewing in Chrome. (I use Atom to code)
HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<link type="text/css" rel = "stylesheet" href = "stylesheet.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Hello</h1>
<p>This is just a test</p>
<div></div>
</body>
</html>
CSS
h1 {
color: #6D9CAE;
font-family: Futura;
font-size: 40px;
font-weight: lighter;
}
h2 {
color: #bb2025;
font-family: Futura;
font-size: 40px;
font-weight: lighter;
}
p {
color: #54748B;
font-family: Avenir;
font-size: 20px;
font-weight: bold;
}
div {
background-color: #223C4A;
height: 100px;
width: 100px;
border-radius: 100%;
}
.active {
background-color: #a5b000;
}
javascript
$(document).ready(function(){
$('div').hover(function(){
$('div').addClass('.active')
});
});
I'm trying to get the div to change a color when hover over but it just can't work. Not sure if I did anything wrong with the javascript.
I tried to copy a working code (html, css, script) from somewhere and preview it using chrome and safari and that won't work either.
So, how do I get the script to work when previewing??
Thanks!!
You need to remove the '.' from '.active' when you use '.addClass'
try this:
$(document).ready(function(){
$('div').hover(function(){
$('div').addClass('active');
});
});
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I am using Joomla and the T3 template. I added the following "Custom Code" before the </head> tag:
<style type="text/stylesheet">
div.t3-sidebar.t3-sidebar-right{
background: #F8F8F8 none repeat scroll 0% 0%;
border: 1px solid rgb(238, 238, 238);
border-radius: 20px;
}
button.btn.btn-primary.off-canvas-toggle{
font-size: 28px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("button.btn.btn-primary.off-canvas-toggle i.fa.fa-bars").addClass("fa-user").removeClass("fa-bars");
});
</script>
When I use my browsers development tools I can see those tags in the head where they should be, but when I inspect the elements, the styles are not applied.
Edit: the style is working now, I foolishly used the wrong type. Thank you to everyone who proposed this change.
Concerning the script problem: I do not get any errors in the console.
Final Edit: The problem with the script is resolved. It was either a problem with the name of the jQuery function (jQuery instead of $) or a problem with the brackets of the document.ready function.
Your CSS is not working, because
<style type="text/stylesheet">
should be
<style type="text/css">
And your javascript is not working, because you did not import jQuery.
There are many ways to import jQuery, this is one of them:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
It should be text/css
Here is the modified code.
<style type="text/css">
div.t3-sidebar.t3-sidebar-right{
background: #F8F8F8 none repeat scroll 0% 0%;
border: 1px solid rgb(238, 238, 238);
border-radius: 20px;
}
button.btn.btn-primary.off-canvas-toggle{
font-size: 28px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("button.btn.btn-primary.off-canvas-toggle i.fa.fa-bars").addClass("fa-user").removeClass("fa-bars");
});
</script>
I'm sure I am missing something obvious and I have checked the other questions regarding this but none seem to have exactly my issue. I am new to Javascript but I'm sure this is a very simple script to implement on a website. If I can get it to work I can edit it from there and see how it works to further enhance it or remove from it.
Here is my code so that you can see exactly how i have it in the .html file
<!DOCTYPE>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="css/nanoscroller.css">
<script rel="text/javascript" src="js/jquery.nanoscroller.min.js"></script>
<style type="text/css">
/* START NanoSlider */
.nano { background: #bba; width: 500px; height: 500px; }
.nano .content { padding: 10px; }
.nano .pane { background: #888; }
.nano .slider { background: #111; }
/* END NanoSlider */
</style>
<script>
$(document).ready(function(){
$(".nano").nanoScroller();
});
</script>
</head>
<body>
<div id="about" class="nano">
<div class="content">
This is the content box and it should be scrolling but it is not!! =/.
</div>
</div>
</body>
</html>
Here is a JSFiddle: http://jsfiddle.net/fcJr3/1/
Maybe I am linking in or refering to required files wrong? or possibly NOT linking in or referring to all the files I am suppose to?
As you can see in the JSFiddle I only get the box. I don't get the scroll bar or any of the effects. Your help is greatly appreciated, thanks!
EDIT: this is the nanoSlider here: http://jamesflorentino.github.io/nanoScrollerJS/
You need to include the jQuery library itself. You can download it or run it straight from the google cdn i.e.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
In your fiddle you need to include jquery using the dropdown top left i.e.
http://jsfiddle.net/fcJr3/2/
I am writing a web-app that uses a tagging system to organize the user's submitted reports. Part of it uses ajax to get suggestions for tags to present to the user based on the content of their report. I am looking for suggestions on how to present this information for the user.
I'm not quite certain what a friendly way to do this would be.
Edit:
Well, most of the responses here seem to be focused on the user typing in keywords. The idea I'm trying to define here is more towards presenting the user a set of suggested keywords that they may accept or decline without having to type a tag in manually. (That option is of course still available to them)
--------------------------- # say they can checkoff or select tags they like.
| o[tag2] x[foo] o[moo] |
| x[tag1] o[bar] |
---------------------------
If I understand what you're asking, jQueryUI includes an autocomplete widget that does this.
See the working demo here: http://jsbin.com/ezifi
You can modify how the suggestions are presented by monkey-patching the render functions on the autocomplete widget.
<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script class="jsbin" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc3/ui/jquery-ui.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
<style type="text/css" media="screen">
h1 { font-size: 20pt; color:Navy; }
h2 { font-size: 18pt; font-weight:bold; color: #DDD; }
body { background-color: #FFF; font: 16px Helvetica, Arial; color: #000; }
body { margin:0; padding:0; height:100%;}
.ui-widget { font-size: 0.8em; line-height:0.6em; }
.ui-widget .ui-widget { font-size: 0.7em; }
div.inputDiv {
float: left;
width: 42%;
height: 400px;
min-height: 100%;
border: Navy 1px dotted;
margin: 14px;
padding: 10px;
}
</style>
</head>
<body>
<div class='inputDiv'>
<h1>jQueryUI Autocomplete demo</h1>
<p>Type a few characters of a word</p>
<form action="jquery" id="form1">
<input type="text" id="input1"/>
</form>
</div>
<div id='msgs' class="inputDiv" style='font-size:10pt;font-weight:normal;'>
</div>
</body>
</html>
The Google method is one option: an input textbox with suggestions listed drop-box style underneath.
del.icio.us does it well. They present a list of related tags below a text input into which the user can enter their own tags. Clicking a suggested tag from the list adds it to the input. Nice and simple.
With tags, people are likely going to want to add more than one at a time, so having them exposed right off the bat is helpful.
Some other considerations that might factor into your decision:
How many tags will you suggest at any given time? 2? 5? 10? 50?
Should the user be forced to use your suggested tags only? Is entering their own a valid option?