Solved

Convert JavaScript Show/Hide Div to jQuery

Posted on 2010-09-14
10
488 Views
Last Modified: 2012-05-10
Hello All;

The more I advance my site in the direction of jQuery, the more certain functions start acting up and need to be changed out.

This use to work properly, but has now starting giving script errors due to the jquery.js version that I am using now. (Am trying to work my way all the way up to the newest release)

Can someone please convert the the code below to jQuery for me please?

Carrzkiss
var ele = document.getElementById("VideoPlayer");
      var text = document.getElementById("displayText");
      if(ele.style.display == "block") {
                ele.style.display = "none";
            text.innerHTML = "[Show Player]";
                text.href = "Video/loadVid.asp?Vid=N0NE";
        }
      else {
            ele.style.display = "block";
            text.innerHTML = "[Hide Player]";
                
      }
}

Open in new window

0
Comment
Question by:Wayne Barron
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
10 Comments
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 250 total points
ID: 33671494
try
var ele = $("#VideoPlayer");
var text = $("#displayText");
if ( ele.css("display") == "block" )
{
	ele.css("display", "none");
	text.html("[Show Player]");
	text.attr("href", "Video/loadVid.asp?Vid=N0NE");
}
else
{
	ele.css("display", "block");
	text.html("[Hide Player]");
}

Open in new window

0
 
LVL 22

Expert Comment

by:kadaba
ID: 33671501
carrzkiss,

I am not sure why this would throw you an error, but here you go....
Not the exact translation but logic remains the same...

Best,
kadaba

var ele = $("#VideoPlayer");
var text = $("#displayText");

if(text.html() == "[Hide Player]"){
	ele.hide();
	text.html("[Show Player]");
	text.attr("href","Video/loadVid.asp?Vid=N0NE");
}else{
	ele.show();
	text.html("[Hide Player]");
}

Open in new window

0
 
LVL 31

Author Comment

by:Wayne Barron
ID: 33675857
Thanks guys.
I actually listed the wrong code when I made this post and for that I am sorry.
The code that I meant to list is the following code below.
It is what has been working flawlessly until I started jumping around with jQuery
Versions, and now this code is starting to give errors:

div is null

But, if I remove the reference to jQuery, then this code works.

-------
Also.
Thanks for the translation on the above code.
I do have one question which will probably be answered on this code convertion.

I have noticed that a lot of jQuery code that I find is not "getElementById"
But instead, you list the actual element.
In my case, the code below is used in multiple places with different element id's

Thanks and sorry for the listing of the wrong code.
Carrzkiss

function showHide(divEntry){ 
        var div = document.getElementById(divEntry); 
        if(div.style.display == "none"){ 
            div.style.display = "block"; 
        } 
        else{ 
            div.style.display = "none"; 
        } 
        return; 
    }

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 40

Expert Comment

by:gurvinder372
ID: 33675932
function showHide(divEntry){
        $("#"+divEntry).toggle();
}

or

function showHide(divEntry){
     var div = $("#"+divEntry);
      if (div.css("display") == "none")
     {
            div.show();
      }
     else
     {
            div.hide();
     }
}
0
 
LVL 22

Assisted Solution

by:kadaba
kadaba earned 250 total points
ID: 33676051
Carrzkiss,

But, if I remove the reference to jQuery, then this code works.
This is not usually the case as JQ is a lib of js functions.

See the example attached.I have noticed that a lot of jQuery code that I find is not "getElementById"

$("#id") == document.getElementById(id)

$(".classname") == document.getElementsByClassName [Custom function]

So if you see the code convention is simple and they have powerful selectors.

I still don't see any error in your code, except if you have the div as null then the element does not exist

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type="text/javascript">
	function showHide(divEntry){ 
        var div = document.getElementById(divEntry); 
        if(div.style.display == "none"){ 
            div.style.display = "block"; 
        } 
        else{ 
            div.style.display = "none"; 
        } 
        return; 
    }	
	$(document).ready(function(){
		$("#jqbtn").click(function(){
			jqShowHide("#test2");
		});
	});
	
	function jqShowHide(divEntry){
		if($(divEntry).is(':hidden')){
				$(divEntry).show();
			}else{
				$(divEntry).hide();
			}
	}
  </script>
</head>
<body>
<div id="test1" style="display:none;">
This is a div opened with normal javascript
</div>
<input type="button" value="Show/Hide Div using normal JS" onclick="showHide('test1');">
<div id="test2" style="display:none;">
This is a div opened using JQ
</div>
<input type="button" value="Show/Hide Div using JQ" id="jqbtn">
</body>
</html>

Open in new window

0
 
LVL 31

Author Comment

by:Wayne Barron
ID: 33676238
Thanks guys.
I have to do some checking, because since the code from kadaba works.
Then mine should also work, so there has to be something else that is causing it to go haywire.
(A lot of code to sift through)

Thanks for the information, I am going to leave it as and accept you both as answer.
Thanks once again.
Off on a code hunt.

Carrzkiss
0
 
LVL 31

Author Closing Comment

by:Wayne Barron
ID: 33676269
@gurvinder372
I accepted your first post, as it will come in handy.

@kadaba
I accepted your last very informative post.

Now, it is time to figure out what is going on with my code.

Carrzkiss
0
 
LVL 22

Expert Comment

by:kadaba
ID: 33676363
Carrzkiss,

Thanks.
I know its a huge site you are maintaining, all the best with the upgrade.

Also ele.css("display") is not the most efficient/ recommended way of doing, so you use the hidden selector.
Refer
http://api.jquery.com/hidden-selector/

Best,
kadaba




0
 
LVL 31

Author Comment

by:Wayne Barron
ID: 33676706
Thanks kadaba
I just ran into a much bigger issue that has my attention at the moment.
I can no longer serve up .net pages on my XP machine for testing.
I am getting this ugly (no information so for on it) Erroc
server application unavailable
Everything that I have read about, is ok on my machine.
So, going to do a reboot and see if maybe it will come back to life.

Just when I was fixing to start testing for URLRewrites.

Have a good one and I will check the site link once I clear up this issue.

Carrzkiss
0
 
LVL 31

Author Comment

by:Wayne Barron
ID: 33677867
Rebooting the computer fixed the error messages that I was receiving.
So that is good.

Have a good one everyone.
Carrzkiss
0

Featured Post

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

691 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