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');
});
});
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
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.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
I'm trying to do a simple function so an element will fade in and then will fade out.
This is my code:
function ShowBoxes() {
$("#divTestArea21").fadeIn("fast", function () {
FadeThisOut($(this));
});
$("#divTestArea22").fadeIn("slow");
$("#divTestArea23").fadeIn(2000);
}
function FadeThisOut(sender) {
sender.fadeOut("slow");
}
<!DOCTYPE html>
<html>
<head>
<title>jQuery test</title>
<script src="Scripts/jquery-2.2.0.js"></script>
<script type="text/javascript" src="Scripts/IndexScript.js"></script>
<link href="CSS/SiteStyle.css" rel="stylesheet" />
<meta charset="utf-8" />
</head>
<body>
<div id="divTestArea21" style="width: 50px; height: 50px; display: none; background-color: #89BC38;"></div>
<div id="divTestArea22" style="width: 50px; height: 50px; display: none; background-color: #C3D1DF;"></div>
<div id="divTestArea23" style="width: 50px; height: 50px; display: none; background-color: #9966FF;"></div>
Show boxes
</body>
</html>
Can someone please explain to me why it isn't working and how to fix it?
Edit: you are right, I had a paramater for FadeThisOut function , but I played with my code for a bit and tried other things so I forgat to bring it back. Anyway, I removed the double-quotes and now it's working. Thanks all.
First you call your function with $(this) as parameter but you declare it without, start by putting it this way :
function FadeThisOut(object) {
}
Secondly you use sender[0], but you don't show us what is sender array.
Thirdly in your function call, you should call the current object without quotes, ie: $(this)
Did you mean to use
FadeThisOut($(this));
(without the double-quotes)
As Vincent said, you also have no argument to the FadeThisOut function
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>
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();
});
});
I have a code snippet of a jQuery Dialog which renders differently in Firefox and Chrome. I know it is a CSS issue and I was think the documentation specifies that the ui-dialog-content and ui-widget-content would be responsible but I am clearly misunderstanding something.
The example is:
<html>
<head>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<style>
body {font-size: 8pt; font-weight: normal;}
span {font-size: 8pt; font-weight: normal;}
.ui-dialog-content {font-weight: normal; }
.ui-widget-content {font-weight: normal;}
</style>
</head>
<body>
Sample text at 8pt...<br/>
Line 1:<br/>
Line 2:<br/>
Line 3:<br/>
<input type="button" value="show" onclick="$('#divTest').dialog()"/>
<div id="divTest" style="width: 700px; height: 400px; display: none;" title="Test">
Why is this text bold?<br/>
Line 1:<br/>
Line 2:<br/>
Line 3:<br/>
</div>
</body>
</html>
In Firefox I find the dialog's content bold-faced which is unwanted. In Chrome I find the content normal-faced but the line spacing has been increased to about 2.
I have tried to over ride the UI content classes but to no avail. Can someone make a suggestion?
Thanks.
I found the answer by using Chrome's developer tools and Firefox's Firebug tool. jQuery UI themes override some of the settings. I was able to identify the CSS that was being overridden by studying the effective styling for each element after the jQuery UI dialog box was displayed.
The CSS I used to correct the display of the dialog content text, and input and select fields is:
.ui-widget input, .ui-widget select {font-family: arial; padding: 0px 0px;}
.ui-dialog-content {font-weight: normal; line-height: normal; font-family: arial; font-size: 8pt; }
.ui-widget-content {font-weight: normal; line-height: normal; font-family: arial; font-size: 8pt;}
I hope this saves someone a few minutes.
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?