I've wrote a javascript to show a hidden content but it just won't show up when i click it, can anyone help me with this?
Here's my script:
<script src="style/jquery/jquery.js"></script>
<script>
$(document).ready(
function(){
$("#yes").click(
function(){
$("div#did").show();
}
)
}
function(){
$("#no").click(
function(){
$("div#did_not").show();
}
)
}
)
</script>
My css file to hide it:
#did{
display: none;
}
#did_not{
display: none;
}
And my HTML:
<button id="yes">Yes</button>
<button id="no">No</button>
<div id="did">
<p>
Yes
<p/>
</div>
<div id="did_not">
<p>
No
</p>
</div>
Help me here!
While the reason it didn't work has been answered (syntax errors), I'd suggest simplifying your code to:
$('button').on('click', '#yes, #no', function(){
$('#did' + (this.id === 'yes' ? '' : '_not')).show();
});
JS Fiddle demo.
Assuming only one response (given the Boolean nature of the answers 'yes'/'no') should be visible:
$('button').on('click', function(){
var response = $.trim($(this).text());
$('div.response').hide().filter(function(){
return $.trim($(this).text()) === response;
}).show();
});
JS Fiddle demo.
References:
$.trim().
filter().
hide().
on().
show().
text().
I think your code has some syntax error, try this:
$(document).ready(function(){
$("#yes").click(function(){
$("div#did").show();
})
$("#no").click(function(){
$("div#did_not").show();
})
});
Check JSFiddle Demo
show is a function not a property. So you have to add () to make it work.
$("div#did_not").show();
Because you are defining thing as function and you are not calling that
$(document).ready(
function(){
$("#yes").click(function(){
$("div#did").show();
})
}(), //here you have to call the function to make it work by adding parentheses
function(){
$("#no").click(function(){
$("div#did_not").show();
})
}()
)
DEMO
I've found out the true problem:
I've forgotten that ../ before that style/jquery/jquery.js
Related
I would like to ask you guys if I can shortcut this code as I think it can be more less code but I'm learning right now Javascript/Jquery.
Thanks!
<script type="text/javascript">
$(document).ready(
function(){
$(".facebook").click(function () {
$("#facebook_prices").show("slow")
$("#twitter_prices").hide("slow")
$("#youtube_prices").hide("slow");
});});
$(document).ready(
function(){
$(".twitter").click(function () {
$("#twitter_prices").show("slow")
$("#facebook_prices").hide("slow")
$("#youtube_prices").hide("slow");
});});
$(document).ready(
function(){
$(".youtube").click(function () {
$("#youtube_prices").show("slow")
$("#facebook_prices").hide("slow")
$("#twitter_prices").hide("slow");
});});
</script>
The first thing to do is to only use one document.ready handler. You don't need to repeat it for every operation.
The pattern you're looking to follow here is called 'Don't Repeat Yourself', or DRY. To achieve this you can apply common classes to the elements which trigger events and use the href (assuming the trigger is an a element) or data attributes to store custom metadata to separate the actions performed by each element. Try this:
$(document).ready(function() {
$(".trigger").click(function(e) {
e.preventDefault();
$('.price').hide('slow');
$($(this).attr('href')).show("slow")
});
});
.price {display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Facebook
Twitter
Youtube
<div class="price" id="facebook_prices">
Facebook prices...
</div>
<div class="price" id="twitter_prices">
Twitter prices...
</div>
<div class="price" id="youtube_prices">
Youtube prices...
</div>
You can use comma ( , ) to similar elements to hide()
Check below code :
$(document).ready(function () {
$(".facebook").click(function () {
$("#facebook_prices").show("slow");
$("#twitter_prices,#youtube_prices").hide("slow");
});
$(".twitter").click(function () {
$("#twitter_prices").show("slow");
$("#facebook_prices,#youtube_prices").hide("slow");
});
$(".youtube").click(function () {
$("#youtube_prices").show("slow");
$("#facebook_prices,#twitter_prices").hide("slow");
});
});
Check the below implementation. Removed the repetitive .ready() methods and merged the hide functions.
<script type="text/javascript">
function hideAll(){
$("#facebook_prices").hide("slow")
$("#twitter_prices").hide("slow")
$("#youtube_prices").hide("slow");
}
$(document).ready(
function(){
$(".facebook").click(function () {
hideAll();
$("#facebook_prices").show("slow");
});
$(".twitter").click(function () {
hideAll();
$("#twitter_prices").show("slow");
});
$(".youtube").click(function () {
hideAll();
$("#youtube_prices").show("slow");
});
});
</script>
Hope this helps :)
I am making a simple plugin function to turn the element's background color to red, on its click. I have added the code as shown below, but unable to get the background-color changed of the button on click. Can someone correct the code?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$.fn.red({
red:function(){return this.each(function(){this.style.background=red;})}
});
</script>
</head>
<body>
<button onclick="red()">Red</button>
</body>
</html>
You have not defined what red should do. You'd need something like:
$.fn.red = function(/*options object maybe?*/) {
return this.css( "background-color", "red" );
};
jsFiddle Example
And there is no need for an inline event like that, using jQuery:
$(function() {
$("button").on("click", function() {
$(this).red();
});
});
You should have a read at this tutorial first:
https://learn.jquery.com/plugins/basic-plugin-creation/
HTML:
<button id="red">Red</button>
CSS:
.red-cell {
background: #F00; /* Or some other color */
}
JS:
$( function() {
$('#red').click( function() {
$(this).toggleClass("red-cell");
});
});
you can simply re write your javascript code as follows,
$(document).ready(function(){
$(".button").click(function(){
$(this).css( "background-color", "red" );
});
})
fiddle : https://jsfiddle.net/nileshmahaja/v2cobdvv/
To make this work as a proper plugin, you have to bind the click event to the element itself in plugin function, like:
$.fn.red = function() {
$(this).each(function(){
var elem = $(this);
elem.bind('click',function(){
elem.css({backgroundColor:'red'})
});
});
};
now you don't have to call click event again and again for every element. you can call this for multiple elements, like this:
$('span,button').red();
you can see the jsfiddle here: http://jsfiddle.net/lokeshpahal/ghLssvos/3/
function red() {
alert("fgdfg");
$("#btn").css("background-color", "red");
}
<input type="button" id="btn" onclick="red()" value="Red"/>
im trying to check if one of the DIV's has class "visible" which is being add by a jquery plugin, it seems not to work.
it works when i check the first element, but if i want to check next div, it doenst finds it.
help is appreciated.
My DIV
<div class="swiper-slide welcome" id="welcome"></div>
2nd DIV
<div class="swiper-slide intro-early-life" id="intro-early-life"></div>
MY JQUERY
<script type="text/javascript">
$(document).ready(function() {
if ($('.welcome').hasClass('swiper-slide-visible')) {
alert("working");
}
});
</script>
Im not using same ID, maybe it was my bad explanation. I can use the class as well, no difference.
$(document).ready(function() {
if ($('#welcome').hasClass('swiper-slide') && $('#welcome').hasClass('visible')) {
alert("working");
}
});
if ($('#welcome').is(":visible") && $('#welcome').hasClass("swiper-slide")) {
alert("Yeah!");
}
Perhaps that would work better?
Edit: Also swiper-slide-visible class doesn't exist on the page - perhaps this is the issue...?
You can use also as
$(document).ready(function() {
if ($('#welcome').hasClasses(['swiper-slide', 'visible']);) {
alert("working");
}
});
$.fn.extend({
hasClasses: function (selectors) {
var self = this;
for (var i in selectors) {
if ($(self).hasClass(selectors[i]))
return true;
}
return false;
}
});
Use .is()
if ($('#welcome').is('.swiper-slide, .visible'){
Id Must Be unique you can use classes instaed
Two HTML elements with same id attribute: How bad is it really?
You could use .is() instead:
$(document).ready(function() {
if ($('.welcome').is('.swiper-slide.visible')) {
alert("working");
}
});
I have found some jQuery codes for show content with slide effect, but none of them works.
the Javasccript code:
$('#clickme').click(function() {
$('#pic').slideToggle('slow', function() {
});
});
the HTML:
<div id="clickme">
click here</div>
<img id="pic" src="Img/Gallery/123.jpg" />
When i click the "click me" div, nothing happens. I have also tried this :
$("div").click(function () {
$(this).hide("slide", { direction: "down" }, 1000);
});
But again, nothing happens. What is the problem?
Thanks!
There are two ways that it works:
1) Add the following code in the header
$(document).ready(function () {
$("div").click(function () {
$('#pic').slideToggle('slow', function() {
});
});
});
2) Place your code after your last div!
And obviously you have to include a jquery file!
For example:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
Put your code in
$(document).ready(function(){
// Your code here
});
you shlould load jQuery by adding this line at the head:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
You may also want to change your code to this:
$("div").on("click", function () {
$(this).hide("slide", { direction: "down" }, 1000);
});
Check this jsfiddle to see the working example. ) Btw, it's not necessary to pass the empty function to slideToggle, I suppose.
I guess the only difference is that you try to run your javascript not as onload function; it doesn't find any 'clickme' elements, that's why event handler function is not called.
I'm learning JQuery and I wrote a simple AJAX external script for my homepage that tries to load some static markup from a seperate html file and insert it into my homepage when i hover over a link...
$(function()
{
$('a#contact_link').hover(function()
{
alert('test1');
$('<div id="contact_container">').load('contact.htm #contact', function()
{
alert('test2');
/*$(this) + '</div>';
$(this).hide()
.insertAfter('#header')
.slideDown(1000) */
});
return false;
});
});
at this point, i'm simply trying to get the 'test2' alert box to show, which is why i have the code below that commented out. currently, the 'test1' alert box is the only the one that shows, meaning the 'test2' alert line never gets hit. your thoughts?
here's the snippet of code from my contact.htm file...
<div id="contact_container">
<div id="contact">
<p>
<strong>NAME</strong>: My Name<br/>
<strong>EMAIL</strong>: My Email<br/>
<strong>SKYPE</strong>: My Skype Handle<br/>
<strong>ADDRESS</strong>: My Address<br/>
</p>
</div><!--end contact-->
</div><!--end contact_container-->
thanks so much in advance for your help!
You were calling $.load using incorrect selector syntax, a selector is not an HTML string, it must conform to the syntax rules set by the jQuery Selectors manual:
$('a#contact_link').hover(function()
{
alert('test1');
$('div#contact_container').load('contact.htm #contact', function()
{
alert('test2');
/*$(this) + '</div>';
$(this).hide()
.insertAfter('#header')
.slideDown(1000) */
});
return false;
});
The selector is probably the cause.
$(function()
{
$('a#contact_link').hover(function()
{
alert('test1');
$('#contact_container').load('contact.htm', function()
{
alert('test2');
/*$(this) + '</div>';
$(this).hide()
.insertAfter('#header')
.slideDown(1000) */
});
return false;
});
});
I believe your #contact_container selector is not quite kosher. Check out the selector doco (http://docs.jquery.com/Selectors) at the JQuery site. I think something like this might be a little better:
$(function()
{
$('a#contact_link').hover(function()
{
alert('test1');
$('#contact_container').load('contact.htm #contact', function()
{
alert('test2');
/*$(this) + '</div>';
$(this).hide()
.insertAfter('#header')
.slideDown(1000) */
});
return false;
});
});