Returning to JavaScript after a long break and I can't get this to work. I must be doing thing really stupid because it works fine with an onclick('') attached to the button in the HTML file just not when I try and do it in the script.js
I've tried to include everything that should be needed but if i've missed something let me know.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"</script>
<script type="text/javascript" src="script.js"></script>
<div class="application">
<button type="button" class="solution" id="webSolution">
<p>
Website Solutions
</p>
</button>
<button type="button" class="solution" id="mobileSolution">
<p>
Mobile Solutions
</p>
</button>
</div>
<div class="mobileSolutionDetails">
<h3>
Mobile Solution
</h3>
price details
</div>
<div class="webSolutionDetails">
<h3>
Website Solution
</h3>
price details
</div>
and my javascript
$(document).ready(function() {
$('#webSolution').onclick(function() {
alert('webSolution');
$('.webSolutionDetails').style.display = 'block';
$('.mobileSolutionDetails').style.display = 'none';
});
$('#mobileSolution').onclick(function() {
alert('Hey!');
$('.mobileSolutionDetails').style.display = 'block';
$('.webSolutionDetails').style.display = 'none';
});
});
Any help would be great
It doesnt like onclick for one. Changed to:
.on("click", function(){});
instead of
.onclick(function(){})
if you wanted to do it your way, you would want to do
.click(function(){});
on a similar note, your CSS tags are wrong for jquery.
use:
$(item).css({display:"block"}); //instead
Here is a fiddle. http://jsfiddle.net/qMsm2/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
Your script must come after jquery.min.js, otherwise $ won't be defined when you try to use it. You're also missing the end > in the jQuery script tag.
jquery uses "click" as function.
http://api.jquery.com/click/
You should use it like this:
$('#webSolution').click(function() {
});
Check this fiddle: http://jsfiddle.net/4CNML/
Two ways for you to write it.
With .on (this is becoming the most favored way it seems)
$('#mobileSolution').on('click', function() {
alert('Hey!');
$('.mobileSolutionDetails')..css({display: 'block'});
$('.webSolutionDetails').css({display: 'none'});
});
or with .click
$('#mobileSolution').click(function() {
alert('Hey!');
$('.mobileSolutionDetails').css({display: 'none'});
$('.webSolutionDetails').css({display: 'none'});
});
Also, since your using jQuery the .style is invalid. Use .css like I did above.
Related
I have the following function:
$(document).ready(function(){
$('section').mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('colorAdded');
$("[href=#"+id+"]").addClass('colorAdded');
});
});
For some reason, the mouseenter function does not seem to be working. When the mouse scrolls over one of the sections (which have the section tag), the corresponding link (which have the a tag) in the top right corner should gain a green background color. However, it is unresponsive.
You just need to change your JS to:
$(document).ready(function(){
$('section').mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('colorAdded');
$("a[href='#"+id+"']").addClass('colorAdded');
});
});
It was an issue with not including quotations in selecting the a tag with the href targeting.
I'm actually don't know why your codepen example is not working, I didn't look into your code carefully, but I tried to create simple code like bellow and it worked.
the thing you probably should care about is how you import JQuery into your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
hopefully this following codes can help you.
$(document).ready(function(){
$('button').mouseenter( function() {
console.log('hahaha');
})
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="test">
<button class="test-button" > test button </button>
</div>
</body>
</html>
Trying to change the class of an item with jQuery, but I can't seem to make it work. For some reason, nothing at all is happening.
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$("#theSpinner").click(function() {
$("#theSpinner").toggleClass("spinning");
});
</script>
<a href="#" id="reload">
<img src="spinbut.png" style="width:100px;height:100px;" id="theSpinner" class="notspinning">
</a>
I've tried with:
$("#theSpinner").click(function() {
$("#theSpinner").removeClass("notspinning");
$("#theSpinner").addClass("spinning");
});
aswell as $("#reload") instead of $("#theSpinner"), and with an onClick="" to a javascript function containing the addClass / removeClass part.
I really don't know what's the problem, but any way around this bull would make me very happy.
Try wrapping your jQuery code within a "document-ready" block to ensure that jQuery has been loaded prior to calling your function :
<script>
// Example of a document ready function
$(function(){
// When jQuery has loaded, wire up this function
$("#theSpinner").click(function() {
$(this).toggleClass("spinning");
});
});
</script>
Example
You can see a working example of this in action here and demonstrated below :
Here you go
<img src="spinbut.png" style="width:100px;height:100px;" id="theSpinner" class="notspinning">
<script type="text/javascript">
$("#theSpinner").click(function() {
$(this).toggleClass("notspinning spinning");
});
</script>
There are a lot of posts on this site with the same title, but none of them helped with my problem. I'm trying to do a simple thing with jQuery, and it's not doing anything, which leads me to believe that jQuery isn't even properly linked. But I'm doing exactly what I've always done. It's supposed to change the unordered list in this div to change its background color to orange. It doesn't change at all, though. I even tried to use a console.log to see if even that would work. It didn't. Can someone check this out?
My code :
<script src="jquery-1.12.0.js">
$(document).ready(function() {
console.log("Why isn't this working?")
$("#contentleft ul").css("background-color", "#FFA500");
});
</script>
<div id="contentleft">
<h3>My List Is Awesome</h3>
<ul>
<li>Full Sail</li>
<li>CNN</li>
<li>YouTube</li>
<li>No link here.</li>
</ul>
</div>
You can't put code inside <script> tag that has an src.
Use two script tags
<script src="jquery-1.12.0.js"></script>
<script>
$(document).ready(function() {
console.log("Why isn't this working?")
$("#contentleft ul").css("background-color", "#FFA500");
});
</script>
Don't try to use one <script> tag with both a src attribute and internal contents. Break it into two tags, like this:
<script src="jquery-1.12.0.js"></script>
<script>
$(document).ready(function() {
console.log("Why isn't this working?")
$("#contentleft ul").css("background-color", "#FFA500");
});
</script>
A <script> with both a src and internal contents will give unpredictable results. You might want to read this post for more information.
I am an absolute beginner in this field. I have written the following code but it's not working. Can someone explain where is the error?
<script type="text/javascript">
$("button").click(function(){
$("div").show("slow");
});
</script>
<button>show</button>
<div style="min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
this is a link
You execute the jQuery before the button is there. So at the point jQuery is executed, the button is not existent.
The solution is to use $(document).ready(...).
All elements on a page (HTML) are parsed to the DOM of that page. The DOM is a hierarchical collection of all elements. You can select elements out of it using jQuery.
However, obviously the DOM needs to be fully there before you can select the elements. In your case, you first select the button, and create it afterwards. That does not work. At the time of the selector the button does not exist yet.
Using jQuery's $(document).ready(), you can defer the function containing selectors until the DOM is fully loaded and parsed - at which time the selector works because the elements are there.
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
$("div").show("slow");
});
});
</script>
<button>show</button>
<div style= "min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
this is a link
You may be trying to listen for the click event before the button exists. Try waiting for the page contents to load:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
$("div").show("slow");
});
});
</script>
<button>show</button>
<div style= "min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
this is a link
As you can see from the fiddle here http://jsfiddle.net/bQUFE/ your code works (the div is shown when you click)
If you don't have this result always check:
1)that you loaded jquery before your script
2)Always use $(document).ready() like this:
$(document).ready(function(){
$("button").click(function(){
$("div").show("slow");
});
});
the javascript is executed before the document has loaded, so the click-handler can't be attached to the button. to avoid this, wrap your code into a domready-function like this:
$(document).ready(function() {
$("button").click(function(){
$("div").show("slow");
});
}
It probably is working but as your <div></div> is empty you might notice it.
Also make sure you only run your JQuery script AFTER the div has been added to your HTML.
May I also suggest to use better identifiers, because you might eventually have many div's and buttons on your page.
Example:
<button id="btn1">Click me</button>
<div id="hidden_div" style="display: none">
Hello there!
</div>
<script type="text/javascript">
$('button#btn1').click(function() {
$('div#hidden_div').show('slow');
});
</script>
You code runs before the button is created so it cannot bind the event.
So you need to put your code in the document.ready event. In jQuery this is handled by $(document).ready(handler) or $(handler).
Documentation at http://api.jquery.com/ready/
Fix to your code to make it work
$(function(){
$("button").click(function(){
$("div").show("slow");
});
});
demo at http://jsfiddle.net/gaby/vkrzt/
you need to give your elements "id"
so:
<button id="mybutton"></button>
and
<div id="mydiv"></div>
Then you'll use $("#mybutton") or $("#mydiv") to call these
I have this code which I'm using to reveal the Answers to some questions in an FAQ section on my website. You click the question and the div containing the answer is revealed below.
It works in Safari, Chrome, Opera and even IE, but not in Firefox.
The links just do nothing.
Any ideas why, or any better methods for doing an 'FAQ' section? I have already got jQuery loaded in my page if there's something that could be done better with it there, I don't know. Or a CSS only solution?
Here is my code:
JS code:
<script type="text/javascript">
function toggle(tag) {
if (tag.style.display=='') {
tag.style.display='none'
} else {
tag.style.display=''
}
}
</script>
HTML code:
FAQ Question goes here
<div id="question1" style="display:none">
<p>FAQ Answer goes here</p>
</div
Because you set the ID of the element you want to toggle, you would need to use:
document.getElementByID(tag).style.display
instead of just tag.style.display inside of your toggle function.
try setting your display to 'block'
tag.style.display='block'
A simpler way to do this is:
<script type="text/javascript">
function toggle(tag) {
tag.style.display = (tag.style.display == 'block') ? 'none' : 'block';
}
</script>
Ok there are a number of issues in your code
First, it is important to end your lines with a semi-colon.
tag.style.display='none' should be tag.style.display='none';
Second, You must use document.getElementById on the id to get the DOM Element
I would do somthing like this:
function toggle(elementId) {
var tag = document.getElementById(elementId);
...
}
Here is a demo http://jsbin.com/abuce4/edit
Seriously, I recommend you use jquery, you will not have this kind of problem and it's less than 30 Kbs.
Here is what you look for:
http://api.jquery.com/toggle/
Anyway, you should always use: document.getElementByID to get a certain element.
EDITED
It depends on the structure of your HTML, if I had this situation:
http://www.jsfiddle.net/dactivo/Qcm4G/
I would do this:
$(".questionsheader").click(function(){
$(this).next("div").toggle(); }
);
SOME OTHER CONSIDERATIONS
I wouldn't use "display:none" for the answers for a simple yet perhaps not practical reason. People without javascript enabled (as happen with the software of some handicapped people) will not be able to read the answers. This is why I hide the answers with javascript. They will only disappear if javascript is enabled.
You can use other effects like animate(), slidetoggle() to make it more interesting.
Since you already have jQuery, try this:
$("#" + tag).toggle();
try <a onclick='toggle(document.getElementById("question1"));'">
Try this (quotes added):
FAQ Question goes here
<div id="question1" style="display:none">
<p>FAQ Answer goes here</p>
</div>
and (used getElementById):
<script type="text/javascript">
function toggle(tag) {
tag = document.getElementById(tag);
if (tag.style.display=='') {
tag.style.display='none'
} else {
tag.style.display=''
}
}
</script>
UPDATES: for the jQuery solution, I would use the jQuery Tabs approach:
<a class="toggle" href="#question1">FAQ Question Link 1</a>
<div id="question1" style="display:none">
<p>FAQ Answer goes here</p>
</div>
<a class="toggle" href="#question2">FAQ Question Link 2</a>
<div id="question2" style="display:none">
<p>FAQ Answer goes here</p>
</div>
and the JS:
<script type="text/javascript">
$(document).ready(function() {
$('.toggle').click(function() {
$($(this).attr('href')).toggle();
return false;
});
});
</script>
Question
<div style="display:none;">Answer</div>
Or more 'generic' and clean :
HTML :
<a class="question">Question 1</a>
<div class="answer">Answer 1</div>
<a class="question">Question 2</a>
<div class="answer">Answer 1</div>
CSS :
.answer{
display:none;
}
JS :
$(document).ready(function() {
$(".question").click(function(event){
$(this).next().slideToggle();
});
}
slideToggle(); or toggle();
Enjoy.