Solved

jQuery change style of parent items if text value exists?

Posted on 2012-12-31
2
420 Views
Last Modified: 2013-02-25
Hi Another quick jquery question. Should be a nice easy one for some of you.
I am trying to show a hidden div and it's contents if a hidden span has any text in it.
The text only appears if a placeholder has a value but remains hidden always.
If the div and contents is shown at the same time I want the content of another div to become hidden.
I've tried the below which doesn't trigger anything.

jquery
 $(document).ready(function(){
//  Hides image and shows video if text has a value
  		var BlogVid = $(".inner-banner div.youtube span.hide").text(); 
		if ($(BlogVid).val() != '') { 
		$(this).parents(".inner-banner div.youtube").css('display', 'block');
		$(this).parents(".inner-banner div.absolute img").css('display', 'none');
}   
});

Open in new window


html
<section class="frame inner-banner"> <img alt="" src="/ImgLayout/frame.png" />
    <div class="absolute"><img src="{tag_MainImage585x327_value}" alt="{tag_name}" title="{tag_name}" /> </div>
    <div class="absolute youtube video" style="display: none;"><iframe width="602" height="336" src="http://www.youtube.com/embed/{tag_YouTubeID}?rel=0" frameborder="0"></iframe>
    <span class="hide" style="display: none;">{tag_YouTubeID}</span></div>
    </section>

Open in new window


I would appreciate help,
regards
Lee
0
Comment
Question by:boxhedge
2 Comments
 
LVL 11

Accepted Solution

by:
Ovid Burke earned 500 total points
ID: 38732349
Revised jQuery:

$(document).ready(function() {
    var videoID = $('span.hide');
    
    if( videoID.text() != '' ) {
        videoID.parent('.video').css({display: 'block'}).siblings('.absolute').css({display: 'none'})
    }
});

Open in new window


Fiddle: http://jsfiddle.net/Zg9rF/
0
 

Author Closing Comment

by:boxhedge
ID: 38732569
Perfect thanks
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
SharePoint 2013 Searchbox Branding 11 44
jQuery scrollTop 2 41
How to let div toggle even if i refresh page 2 25
jquery conditionally populate list boxes 2 24
I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now