This is my HTML:
<p class="first">blah blah read more</p>
<div class="read_more">
<p>more text</p>
</div>
And javascript:
$(document).ready(function(){
$('a.more').click(function(){
$(this).find('.read_more').slideDown();
return false;
});
});
Doesn't seem to do anything (read_more is set to display: none) any ideas?
Try this:
$(document).ready(function(){
$('a.more').click(function(){
$(this).parent().next().find('.read_more').slideDown();
return false;
});
});
Update:
Here is the demo :)
Code:
$(document).ready(function(){
$('a.more').click(function(){
$(this).parents().find('.read_more').slideDown('slow');
return false;
});
});
You could also do:
$(document).ready(function(){
$('a.more').click(function(){
$('.read_more').slideDown('slow');
return false;
});
});
Or this:
$(document).ready(function(){
$('a.more').click(function(){
$(this).parent().next().slideDown('slow');
return false;
});
});
.find(..) looks for the selector inside the current element.
What you might want is
$(document).ready(function(){
$('a.more').click(function(){
$(this).parent().parent().find('.read_more').slideDown();
return false;
});
});
Edit
Added another .parent() as the <a> is inside <p> and .read_more is not in the <p>
One potential cause of find() not being able to work is that the element you are looking for hasn't loaded when you call it.
In my case, I was replacing a text field with an editor plugin, and the editor had not loaded by the time I called find().
If you can't find the element when you know you should be able to, try setTimeout to add a delay before calling find().
Note: setTimeout is not a good solution for this issue, it just helps diagnose the problem. Try to come up with a way to wait until the element has loaded before you make your find() call.
You are trying to find .read_more under a tag in which it does not exist
by replacing the this with document it may work
Related
I'm not great with JavaScript/jQuery and am having a lot of trouble with a very basic task. I have an img that, when clicked, should give me the id of the parent div it is within.
This is the markup:
<div id="client-1">
<img src="~/Content/plus.ico" alt="plus" onclick="ButtonExpandClick()" />
</div>
And here is the javascript:
<script type="text/javascript">
function ButtonExpandClick() {
alert($(this).parent().attr("id"));
}
</script>
Clicking the image gives me an alert that says "undefined" but I can clearly see that the div has the id of "client-1" when I inspect the page. I must be missing something simple here. I've also tried using .closest as well as passing this into the function but no luck. Thanks for any help!
Don't use the onclick attribute for events. You're using jQuery, bind the events "properly".
Add a class to the image(s):
<img src="~/Content/plus.ico" alt="plus" class="icon" />
Then bind the event:
$(function(){
$('.icon').click(function(){
alert($(this).parent().attr("id"));
});
});
If you hook up the click event using jQuery instead of doing it inline, then you'll get the this passed in automatically:
Note that you'd have to give the image an id or find another selector for it.
jQuery(document).ready(function() {
jQuery("#myImg").click(ButtonExpandClick);
});
You need to pass in this
onclick="ButtonExpandClick(this)"
JS
function ButtonExpandClick(elem) {
alert($(elem).parent().attr("id"));
}
Also it is a bad idea to declare inline events . Attach the event directly using javascript.
<script>
$(function() {
$('#client-1 img').click(function() {
alert($(this).parent().attr("id"));
});
});
</script>
You have to use jquery.click or send your element with function. like sendme(this).
Simpler still you might try this with a binding:
<div id="client-1">
<img src="~/Content/plus.ico" alt="plus" />
</div>
<script>
$(function() {
$('img').on('click', function(){
// Two ways to do the same thing
alert(this.parentNode.id);
alert($(this).parent()[0].id);
});
});
</script>
You can use something like this:
$(function() {
$('img').on('click', function(e) {
var id = this.parentNode.id; //Using javascript to access id is faster.
alert(id);
});
});
Example working at Jsfiddle
It's recommended put this images inside a container. and change this to. It's better for performance.
$(function() {
var images = $('#container').find('img');
images.on('click', function(e) {
var id = this.parentNode.id; //Using javascript to access id is faster.
alert(id);
});
});
Ok so this i probably very easy but i can't seem to figure it out. I have a a function but i still have to call the function inline. I am wondering if there is a way to put it all in the function. Right now my function looks like this:
function ddItem(el) {
$(el).closest(".ddSelectHeader").find("input").attr({
value : $(el).text()
})
}
Then i call this function inline like this:
<div class="ddContainer">
<div class="ddSelectHeader"><input name="" type="text" />
<div class="ddSubmenu">
Item 1<br />
item 2
</div>
</div>
Ok so i am trying to make a simple drop down but with divs instead of the traditional ul li. The way it is written above works fine but i was hoping there is a way to take the onlcick out so that any link that is click within the ddSubmenu will populate the input field. This way i don't have to call it inline or in the html.
Thanks for the help.
$(document).ready(function() {
$(".ddSubmenu a").click(function(){
var $this = $(this);
$this.closest(".ddSelectHeader").find("input").val($this.text());
});
})
$(function(){
$('.ddSubmenu > a').click(function(){
var self = $(this);
self.closest(".ddSelectHeader").find("input").val(self.text());
});
});
Via javascript, you can use element.onclick: https://developer.mozilla.org/en/DOM/element.onclick
or jQuery's .click(): http://api.jquery.com/click/
$('.ddSubmenu a').click(function(){
ddItem(this);
});
i'm kinda new to scripting so this might be a bit basic, but i couldn't find an answer anywhere.
To improve my webpage loading time I made some HTML element load (via AJAX) and inserted only when a certain button is clicked, using the jquery .html() function.
That worked, but now all the jquery commands which referred to that element don't seem to apply. I'm guessing it's because the original commands were loaded before the new HTML?
For example, code like this:
$(document).ready(function(){
$('#myButton').click(function(){
$('#placeHolder').html('<div id="touchMe">click me</div>');
});
$('#touchMe').click(function(){
alert ("WORKED");
});
}
How do I make the #touchMe.click command apply to the new incoming HTML?
thanks a lot
Take a look at live()
$('#touchMe').live('click', function() {
Try -
$('#touchMe').live('click',function(){
alert ("WORKED");
});
Instead of
$('#touchMe').click(function(){
alert ("WORKED");
});
use
$('#touchMe').live('click', function(){
alert ("WORKED");
});
you use .live() or .delegate() function instead of click.
$(document).ready(function(){
$('#myButton').live('click', function(){
$('#placeHolder').html('<div id="touchMe">click me</div>');
});
$('#touchMe').live('click', function(){
alert ("WORKED");
});
}
note: the live on "mybutton" is not necessary in this example.
How do I call a jquery function by just loading the page? For example, on one page,I have a paragraph and this jquery code here:
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
How do I make the paragraph slowly fade away using jquery right after the page loads WITHOUT having any user input like clicking the button?
Just a small warning..
$('p') will select all the paragraphs in the page..
use the selector more clearly..
to achieve the requirement, you can add this line as said above..
$("button").click();
or
$("button").trigger('click');
A much better way of wiring this is..
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
}).trigger('click');
});
this will improve the performance by reducing the no.of search cycles.. :)
cheers
Can't you just call hide like that:
$(document).ready(function(){
$("p").hide(1000);
});
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
$("button").click();
});
Just add that line.
just like this:
$(document).ready(function(){
$("p").hide(1000);
});
The setting is easy; I want to be able to add a class to (in this case) a button when onClick-event is fired. My problem is that I haven't found a way to pass the button itself as the parameter to the function. I'd like to do something like:
<asp:Button ID="Button" runat="server" onclick="addClassByClick(this)"/>
And then a javaScript function something like this:
function addClassByClick(button){
button.addClass("active")
}
I know I've got a lot of errors here, but that's why I'm posting. I've tried different scenarios with jQuery and without jQuery but I always end up with a broken solution (clicks suddenly stop coming through, class not added etc etc) so I decided to ask the pro's.
Any suggestion to what I can try? Thanks for reading editand all the help!
It needs to be a jQuery element to use .addClass(), so it needs to be wrapped in $() like this:
function addClassByClick(button){
$(button).addClass("active")
}
A better overall solution would be unobtrusive script, for example:
<asp:Button ID="Button" runat="server" class="clickable"/>
Then in jquery:
$(function() { //run when the DOM is ready
$(".clickable").click(function() { //use a class, since your ID gets mangled
$(this).addClass("active"); //add the class to the clicked element
});
});
Using jQuery:
$('#Button').click(function(){
$(this).addClass("active");
});
This way, you don't have to pollute your HTML markup with onclick handlers.
$(document).ready(function() {
$('#Button').click(function() {
$(this).addClass('active');
});
});
should do the trick.
unless you're loading the button with ajax.
In which case you could do:
$('#Button').live('click', function() {...
Also remember not to use the same id more than once in your html code.
$('#button').click(function(){
$(this).addClass('active');
});
Try to make your css more specific so that the new (green) style is more specific than the previous one, so that it worked for me!
For example, you might use in css:
button:active {/*your style here*/}
Instead of (probably not working):
.active {/*style*/} (.active is not a pseudo-class)
Hope it helps!