I am new to javascript and i m using this script :
<script type="text/javascript">
$(document).ready
(function()
{
$('#apply').click(function()
{
$('#applyinfo').toggle("slow");
});
});
</script>
for the on click function when i click on apply it as to display the apply info div. this function is working however if i create multiple apply id it is not working. Please help me on this.
If you wish to bind the click function for multiple dom elements you can use it as,
$(document).ready(function() {
$('#apply,#apply1,#apply2').click(function() {
$('#applyinfo').toggle("slow");
});
});
with , delimiter. However you cant name the same id's for various html elements. In that case go for a class selector as #Pranav suggested in comments
For ex,
$('.applyClass').click(function() { .. } );
id should be unique , so use common class to all those items
<script type="text/javascript">
$(document).ready(function() {
$('.apply').click(function() {
//-^-- class selector
$('#applyinfo').toggle("slow");
});
});
</script>
Try this solution:
$(document).ready(function() {
$("[id$='apply']").click(function() {
$('#applyinfo').toggle("slow");
});
});
An id should be unique, so having multiple #apply and #applyinfo isn't a option. Instead, switch to classes.
The function depends on your HTML though.
If .applyinfo is a child of .apply this works:
HTML:
<div class="apply">Click here
<div class="applyinfo">Toggle this info</div>
</div>
jQuery:
$(function() {
$('.apply').click(function() {
$(this).find('.applyinfo').toggle("slow");
});
});
DEMO
$(function() {
$('.apply').click(function() {
$(this).find('.applyinfo').toggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="apply">Click here
<div class="applyinfo">Toggle this info</div>
</div>
<div class="apply">Click here
<div class="applyinfo">Toggle this info</div>
</div>
<div class="apply">Click here
<div class="applyinfo">Toggle this info</div>
</div>
If the .applyinfo is not a child of .apply we need to find the matching div. The function then becomes:
HTML:
<a class="apply-1">Click</a>
<a class="apply-2">Click</a>
<a class="apply-3">Click</a>
<div class="applyinfo-1">Belongs to a.apply-1</div>
<div class="applyinfo-2">Belongs to a.apply-2</div>
<div class="applyinfo-3">Belongs to a.apply-3</div>
jQuery:
$(function() {
$('[class^=apply-]').click(function() {
var nr = $(this).attr('class').split("-").pop() ,
selector = '.applyinfo-'+nr;
$(selector).toggle("slow");
});
});
DEMO
$(function() {
$('[class^=apply-]').click(function() {
var nr = $(this).attr('class').split("-").pop() ,
selector = '.applyinfo-'+nr;
$(selector).toggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="apply-1">Click</a>
<a class="apply-2">Click</a>
<a class="apply-3">Click</a>
<div class="applyinfo-1">Belongs to a.apply-1</div>
<div class="applyinfo-2">Belongs to a.apply-2</div>
<div class="applyinfo-3">Belongs to a.apply-3</div>
Related
I am trying to hide the div if you click only on the header. But my filter does not seem to work. I get the intended function wherever I click on the div. I want to restrict this to only when you click on the header.
<div class="post" onclick="updatenext()">
<h2>Item3</h2>
</div>
<div class="post" onclick="updatenext()">
<h2>Item4</h2>
</div>
<script>
var index=0;
$(".post").hide();
$(".post").eq(0).show();
// Tried this too: $(".post").filter(":header")....
$(":header.post").on("click",
function () {
index=$(this).index();
//console.log($(this).index());
$(this).hide();
$(".post").eq(index).show();
}
);
</script>
I expect the click to work only when clicking on the header element within each div.
Try using only jQuery for the event listener, like this:
<div class="post">
<h2 onclick="updatenext()">Item3</h2>
</div>
<div class="post">
<h2 onclick="updatenext()">Item4</h2>
</div>
<script>
var index = 0;
$(".post").hide();
$(".post").eq(0).show();
$("h2").on("click", function () {
index = $(this).parent().index();
$(this).parent().hide();
$(".post").eq(index).show();
});
</script>
I have the below markup and I am trying to get the href but always getting undefined. Any help is appreciated.
<div class="wrapper">
<span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/29/20/3HE5Mx.jpg)">
</span>
<div class="mixDivRight">
<p class="bottomP"><button>Select</button><p>
</div>
</div>
$container = $('.wrapper');
$container.on('click', '.bottomP', function (event) {
console.log($(this).closest('a').attr('href'));
});
Assuming that you fix the class/ID issue noted in the comments by Mohammad you could use:
$('.wrapper').on('click', '.bottomP', function (event) {
console.log($(this).closest('.wrapper').find('a').attr('href'));
});
$('.wrapper').on('click', '.bottomP', function (event) {
console.log($(this).closest('.wrapper').find('a').attr('href'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/29/20/3HE5Mx.jpg)">
</span>
<div class="mixDivRight">
<p class="bottomP"><button>Select</button><p>
</div>
</div>
Aside from what Mohammad mentioned about needing to use .wrapper instead of #wrapper. I recommend using .find() instead of .closest(). .closest() does not work in IE, but that might not be an issue for you. you can also do something like this:
$("div.wrapper").on('click', '.bottomP', function () {
console.log($("div.wrapper a:first").attr('href'));
});
This will grab the first <a> tag inside the wrapper div.
I have a series of divs all of the same class with no IDs. I want to change the background of the div when it is clicked. I tested the function and it works fine. But when I access the element as this, it is not working. Question is how to get buttonpressed() to work only for the div clicked on?
HTML
<div id="navbar">
<div class="navitem" onclick="buttonpressed()"><p>Membership</p></div>
<div class="navitem" onclick="buttonpressed()"><p>Certification</p></div>
<div class="navitem" onclick="buttonpressed()"><p>Foundation</p></div>
<div class="navitem" onclick="buttonpressed()"><p>Seminars</p></div>
<div class="navitem" onclick="buttonpressed()"><p>Councils</p></div>
</div>
Javascript
function buttonpressed() {
var bgString = "url('navbuttonpressed.png')";
$(this).css('backgroundImage',bgString);
}
Since you're using jQuery you can (and should) remove the inline event handling and just use:
$( document ).ready(function() {
$('.navitem').click(function(){
var bgString = "url('navbuttonpressed.png')";
$(this).css('backgroundImage',bgString);
})
});
jsFiddle example
When using HTML inline event handlers, this references your window. If you instead attach an event handler through JavaScript, it will work as expected:
$(".navitem").on("click", function () {
var bgString = "url('navbuttonpressed.png')";
$(this).css('backgroundImage',bgString);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="navbar">
<div class="navitem"><p>Membership</p></div>
<div class="navitem"><p>Certification</p></div>
<div class="navitem"><p>Foundation</p></div>
<div class="navitem"><p>Seminars</p></div>
<div class="navitem"><p>Councils</p></div>
</div>
You could get access to this if you change how you're catching the event:
$('.navitem').on('click', function() {
var bgString = "url('navbuttonpressed.png')";
$(this).css('backgroundImage',bgString);
})
HTML
<div id="navbar">
<div class="navitem" ><p>Membership</p></div>
<div class="navitem" ><p>Certification</p></div>
<div class="navitem" ><p>Foundation</p></div>
<div class="navitem"><p>Seminars</p></div>
<div class="navitem" ><p>Councils</p></div>
</div>
As mentioned in the comments, one way to do this would be:
$('.navitem').click(function(){
var bgString = "url('navbuttonpressed.png')";
$(this).css('backgroundImage',bgString);
});
Check: https://api.jquery.com/click/
Also keep in mind, that the code above will bind this function to all elements with the css-class "navitem". In case you do not know, what this means you might check as well: https://api.jquery.com/category/selectors/
$(".navitem").click(function(){
$(this).css('background-image', 'url(https://www.google.pt/images/nav_logo195.png)');
});
Demo:
http://codepen.io/tuga/pen/bdddGa
If you happened to want a pure JS solution and if you want to keep your inline onClick listeners, you could do this..
HTML
<div class="navitem" onclick="buttonpressed(this)"><p>Membership</p></div>
JS
function buttonpressed(element) {
var bgString = "url('navbuttonpressed.png')";
element.style.backgroundImage = bgString;
}
The this keyword passes the element that called the function through to the method itself.
This works well - JSFiddle
I have the following HTML fragment.
<div class="diagram-frame">
<div class="diagram">
<span class="diagram-name">Drawing Objects</span>
<svg>...lots of child elements...</svg>
</div>
<div class="diagram-name">
<a class="idlink" title="Drawing Objects (data models)" href="...">NA - Drawing Objects</a>
</div>
</div>
Currently, I use this jQuery selector to detect what has been clicked on:
jClicked.add(jClicked.parents()).is('div.diagram-frame')
jClicked is jQuery object containing the clicked element.
But I need to exclude clicks on the diagram-name div. How can I add negation using the .not('div.diagram-name') function call?
Since .is() matches a css selector, why not use the css :not() pseudo, and do all in one command?
jClicked.add(jClicked.parents()).is('div.diagram-frame:not(.diagram-name)')
Like this?
jClicked.add(jClicked.parents())
.not(jClicked.$('div.diagram-name'))
.is('div.diagram-frame')
Note, Not certain about jClicked object ?
Try
$(function() {
var jClicked = [];
$(".diagram-frame").on("click", function(e) {
if (!$(e.target).parent().is("div.diagram-name")) {
jClicked.push(e.target);
console.log($(jClicked));
alert(jClicked.length);
}
});
});
$(function() {
var jClicked = [];
$(".diagram-frame").on("click", function(e) {
e.preventDefault();
if (!$(e.target).parent().is("div.diagram-name")) {
jClicked.push(e.target);
console.log($(jClicked));
alert(jClicked.length);
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="diagram-frame">
<div class="diagram">
<span class="diagram-name">Drawing Objects</span>
<svg>...lots of child elements...</svg>
</div>
<div class="diagram-name">
<a class="idlink" title="Drawing Objects (data models)" href="...">NA - Drawing Objects</a>
</div>
</div>
jsfiddle http://jsfiddle.net/guest271314/2myjbuhL/
I'm not sure the best way to word this, so hopefully this makes sense.
Currently, on my page, all my elements fadeIn on click. What I would like is for a few select elements in an id (#seqFade below) to fade in on their own when that parent fadeIn class is clicked.
I've figured out how to make both of these effects work on separate pages, but I can't figure out how to have them both occur on the same page / combine the two.
Here is more or less how my page is designed, and below is what I have so far for code.
HTML
<div id="content">
<div class="fadeIn">
<p>Hello</p>
</div>
<div class="fadeIn" id="seqFade">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="fadeIn">
Bye.
</div>
</div>
SCRIPT
$(document).ready(function(){
//hides all fadeIns
$('.fadeIn').hide();
$(document).on('click',function() {
if('#seqFade') {
//sequential fadeIn function (works)
$('span').each(function(i) {
$(this).delay(i*300).fadeIn('slow');
});
}
//fadeIn on click (works)
$('.fadeIn:hidden:first').fadeIn('slow');
})
.click();
Thank you so much in advance.
JSfiddle of full page //
JSFiddle of both effects working
Try this, just add a class on hidden at the beginning for the spans
$(document).ready(function() {
var timeOuts = new Array();
var eT=200;
function myFadeIn(jqObj) {
jqObj.fadeIn('slow');
}
function clearAllTimeouts() {
for (key in timeOuts) {
clearTimeout(timeOuts[key]);
}
}
$(document).on('click',function() {
$('#seqFade span').hide().each(function(index) {
timeOuts[index] = setTimeout(myFadeIn, index*eT, $(this));
});
});
});
http://jsfiddle.net/h67vk02w/2/
HTML
<div id="content">
<div class="fadeIn">
<p>Hello</p>
</div>
<div class="fadeIn" id="seqFade">
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
<span>.</span>
<span>.</span>
<span>.</span>
</div>
<div class="fadeIn" id="bye">
Bye.
</div>
Javascript
$(function() {
$('.fadeIn').find('span').toggle();
$('#hello, #bye').toggle();
$(document).click(function() {
$('#hello').fadeIn('slow');
$('span').each(function(i) {
$(this).delay(i*300).fadeIn('slow', function() {
$(document).unbind('click')
.bind('click', () => $('#bye').delay(300).fadeIn('slow'));
});
});
});
});
JSFiddle: http://jsfiddle.net/6mLgu3om/3/
Or like that?
Use the classes for this (add some fade/noFade classes to elements). ID must be unique. And after that just check if the element has that class like this. Now you have basically unlimited options to do this. Just add more classes / check and do something.
$(".class_of_element").hasClass("your_class")