Solved

Convert JavaScript Show/Hide Div to jQuery

Posted on 2010-09-14
10
451 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
  • 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 30

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
 
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 30

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 30

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 30

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 30

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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

758 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

22 Experts available now in Live!

Get 1:1 Help Now