CODEWITHSUNDEEP
javascriptjquery
user2635579
user2635579

Reputation: 11

How do I select an element inside of a div using Jquery

My Jquery isn't working with the way I'm selecting the <p> and <img> elements. How could I get it to work?

function projectanim(x)
{
    var Para = x.getElementsByTagName("p"); 
    var Imgs = x.getElementsByTagName("img"); 
    if ($(x).height() != 200)
    {
        $(x).animate({height:'200px'});
        $(Para[0]).animate({display:'inline'});
        $(Imgs[0]).animate({display:'inline'});
    }
    else
    {
        $(x).animate({height:'25px'});
        $(Para[0]).animate({display:'none'});
        $(Imgs[0]).animate({display:'none'});
    }
}

Upvotes: 0

Views: 98

Answers (4)

A.sharif
A.sharif

Reputation: 2017

"what i'm trying to do is fade the

and to inline from none." Do you just want

and to fade in? Or do you want it to go from display:none to inline and fade in?

I'll show you how to do both, and you can take away parts if you just want the fade in feature.

First off set p, and img as display:none; and opacity:0, in the css like so

p, img
{
   display:none;
   opacity:0;
}

Secondly your js has to alter the display of both

, and tags and fade in/out like so.

function projectanim(x)
{ 
    if ($(x).height() != 200)
    {
        $(x).animate({height:'200px'});
        document.getElementsByTagName("p").style.display = 'inline';
        document.getElementsByTagName("img").style.display = 'inline';
        $("p").animate({"opacity": "1"}, 1000);
        $("img").animate({"opacity": "1"}, 1000);


    }
    else
    {
        $(x).animate({height:'25px'});
        $("p").animate({"opacity": "0"}, 500);
        $("img").animate({"opacity": "0"}, 500);
        document.getElementsByTagName("p").style.display = 'none';
        document.getElementsByTagName("img").style.display = 'none';
    }
}

Upvotes: 0

Richard Neil Ilagan
Richard Neil Ilagan

Reputation: 14747

Your question is really, really vague, but from what I can gather, this is what you're looking at achieving:

function projectanim(x) {
    var self = $(x);
    if (self.height() === 200) {
        self.animate({ height : '25px' })
            .find('p,img').fadeOut()
            ;
    } else {
        self.animate({ height : '200px' })
            .find('p,img').fadeIn()
            ;
    }
}

That being said though, barring browser compatibility and all that shizz, you really should be doing something like this using CSS more than Javascript.

Depending on your parent element (say, a <div>), you can write up CSS like the following:

div {
    height : 200px;
    transition : height .5s linear;
}
div.active {
    height : 25px;
}
div img,
div p {
    display : inline;
    opacity : 100;
    transition : opacity .5s linear;
}
div.active img,
div.active p {
    opacity : 0;
}

and just toggle a class on/off with your Javascript:

function projectanim(x) {
    $(x).toggleClass('active');
}

and everything should be automatic. Your Javascript becomes waaaaaay simpler, less coupled, more maintainable, and your styles are right where they should be (in CSS files).

Upvotes: 0

Nabil Kadimi
Nabil Kadimi

Reputation: 10384

function projectanim (projectId) {
  $('p, img', $('div#' + projectId)) // Select p/img tags children of <div id="projectId">
    .slideDown();                 // show using slideDown, fadeIn() or show('slow')
}

// Example
projectanim ('protflolio_project');

The idea with jQuery is:

  1. Use the right selectors
  2. With the right methods

Examples

Different ways to select all img and p tags under a div which id is my_div:

// The easy way
p_and_img = $('#my_div p, #my_div img');

// Using the context parameter
p_and_img = $('p, img', $('#my_div'));

// Using the context parameter and making sure my_div is a div
p_and_img = $('p, img', $('div#my_div'));

// only the first p and img
p_and_img = $('p:eq(0), img:eq(0)', $('#my_div'));

Upvotes: 0

Rick Calder
Rick Calder

Reputation: 18685

Without the HTML this is just a shot in the dark but I assume you're trying to get the paragraph and image in a specific div?

Try this:

var Para = x.find("p"); 
var Imgs = x.find("img");

Although depending on what you're actually passing as x will determine whether it will actually work...

Upvotes: 1

Related Questions