So I am working with some jquery code to do a simple hide of a p and a show of a p. I am simple adding a class called showp and showing it while making sure the others are not shown by hiding them first. But I keep getting an error missing : after property ID. Any help would be greatly appreciated.
$(document).ready({
$("#phone").click(function(){
$(".hide2").addClass(".hide2").hide("slow");
$(".hide3").addClass(".hide3").hide("slow");
$(".hide1").addClass("showp").show("slow");
});
});
Change this:
$(document).ready({
To this
$(document).ready(function(){
Try this:
$(document).ready(function() {
$("#phone").click(function() {
$(".hide2, .hide3").hide();
$(".hide1").show();
});
});
Your document ready is invalid.
$(document).ready(function() {
// stuff here.
});
Or better yet, a shorthand:
$(function() {
// stuff here.
});
Related
I have a tiny script I'm working on :)
The idea is if the span tag just contains autocompleteitem and not autocompleteitem autocompleteitemwithcontainer then it'll display the word hello. Right now it displays hello for both :(
Demo: https://jsfiddle.net/L33mqqtp/
$(document).ready(function() {
$(document).on('click','.autocompleteitem',function(){
$("div").show();
});
});
How do I update my code to do this?
Try this
'click','.autocompleteitem:not(.autocompleteitemwithcontainer)'
They both have .autocompleteitem class! To obtain what you want, use a different selector, which only applies to first one:
$(document).ready(function() {
$(document).on('click','.autocompleteitem:not(".autocompleteitemwithcontainer")',function(){
$("div").show();
});
});
try this
$(document).ready(function() {
$("span").on('click', function(){
if(this.className == "autocompleteitem")
$("div").show();
});
});
Use the attribute selector syntax. That will allow you to directly match an entire attribute. This way you don't have to make a bunch of different combinations for each thing that you don't want to be selected.
Example selector: jQuery('[class="autocompleteitem"]')
Working Example:
$(document).ready(function() {
$(document).on('click','[class="autocompleteitem"]',function(){
$("div.containertoshow").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Should work<br>
Should not work
<div class="containertoshow" style="display:none;">That button does toggle me on/off!</div>
Ok so im trying to get some text that is hidden to display when the mouse enters the div then hide when it leaves
so far ive got this on my fiddle
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
})
$(".image").mouseout(function(){
$(".hover").hide();
});
Thanks any help would be great
You Should Read Basic of JavaScript
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
})
$(".image").mouseout(function(){
$(".hover").hide();
});
})//added
Updated Demo
You were missing a });
Also, you can simplify your code to:
$(document).ready(function () {
$(".image").mouseover(function () {
$(".hover").show();
}).mouseout(function () {
$(".hover").hide();
});
});
BTW, your HTML is broken. Fix that first.
Both your HTML and JS code are badly written. And you didn't include jQuery is your jsfiddle, which means that '$' isn't recognized.
$(document).ready(function() {
$(".image").mouseover(function(){
$(".hover").show();
});
$(".image").mouseout(function(){
$(".hover").hide();
});
});
You can test it here: http://jsfiddle.net/5PR5E/3/
I have the following html code:
<a class="tabTitle" id="title_boxtab_default" tab-type="default" href="#tabs-3">Sample</a>
In jQuery I'm trying to get the value of the href attribute with:
$('.tabTitle').last().attr('href');
But it keeps telling me it's undefined?
I should mention that the number of links with class"tabTitle" increases. That's why I use .last()
Works just fine for me in JSFiddle. I changed it to this, and it returned #tabs-3:
alert($('.tabTitle').last().attr('href'));
My guess is that it's not running from a ready handler like this:
$(function() {
var x = $('.tabTitle').last().attr('href');
});
It should work. Make sure you are running the script when the element is present in the DOM, f.ex using .ready():
$(function() {
alert( $('.tabTitle').last().attr('href') );
});
DEMO: http://jsbin.com/IyeSacU/1/edit
Try DOM Ready
$(document).ready(function(){
$('.tabTitle').last().attr('href');
});
Fiddle
This is pretty basic, still doesn't work... I'm trying to change the class of my button, which has the id "nav_list". I wrote the script:
var specialSection = document.getElementById("nav_list");
specialSection.onclick = function() {
alert("what");
$('#nav_list').toggleClass('active');
};
I get the "what" alert, but the class isn't toggled. What am I missing? Thanks in advance!
toggleClass is a jQuery method, for use it you must include jQuery in your page.
Like:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
At the moment if you check the console you must see an error like (demo: http://jsfiddle.net/IrvinDominin/GyaBY/):
ReferenceError: Can't find variable: $
Avoid mixing jQuery and javascript event binding so your code will look like:
$('#nav_list').click(function() {
alert("what");
$(this).toggleClass('active');
});
Demo: http://jsfiddle.net/IrvinDominin/GyaBY/2/
I apologize if this is in the wrong section..
Could someone possibly point me towards a script or a tutorial on this:
when I click on something, say for instance an "x", I'll click it, then it fades away on click.
If you understand what I mean, could someone point me in the right direction please?
Thanks!
Please familiarize yourself with Google.
Then familiarize yourself with http://docs.jquery.com/Tutorials:How_jQuery_Works
Try out some code on http://www.jsfiddle.net
refer
$('someclass/id').click(function() {
$('someclass/id').fadeOut();
});
check this
$('a').toggle(
function() { $('#us').fadeIn(); },
function() { $('#us').fadeOut(); }
);
.fadeToggle()
show( effect, [options], [speed], [callback] )jQuery UI
Refer this: http://www.webdesignerwall.com/demo/jquery/
There is small tutorials for different UI elements with good explanation.
This describes how to fade in and fade out an element on click
$(document).ready(function(){
$("#elemntID").click(function() {
$("#ID_of_element_need_to_fade_in").fadeIn("slow");
});
$("#elemntID").click(function() {
$("#ID_of_element_need_to_fade_out").fadeOut("slow");
});
});
Its easy you could have googled that.
jQuery('#divId').click(function(){
jQuery(this).hide('slow'); //this will give a little animated effect.
// or
jQUery(this).fadeOut('slow');
});
http://api.jquery.com/fadeOut/
http://api.jquery.com/hide/
use
$('#id').click(function() {
$('#id').fadeIn();
$('#id').fadeOut();
});
[link][1]
<script>
$("button:first").click(function() {
$("p:first").fadeToggle("slow", "linear");
});
$("button:last").click(function () {
$("p:last").fadeToggle("fast", function () {
$("#log").append("<div>finished</div>");
});
});
</script>