[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 302
  • Last Modified:

Help modify existing jquery script to allow for side by side div columns

I posted a question to experts and had a solution solved, (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_25408903.html) but wanted to see about modifying script. Currently it is contained in one ul and within each li of the ul there is a div with content that is hidden via jquery on page load. Rather than have a single list, I would like to have the list broken up into 2 sections. So rather than a single vertical list, would like 2 vertical lists side by side or can be 2 div's side by side with ul li div contained with each. The existing script from the previous question is fine and works, I just want to have the list broken up into 2 side by side lists.

Thank You
Any code or help provided is much appreciated...
0
Pdesignz
Asked:
Pdesignz
  • 11
  • 9
2 Solutions
 
Steve KrileCommented:
The question you link to is very difficult to reproduce in a forum like this.  There are linked script tags that require a file with other files and .js file in those to work.  For issues like this, I find that creating a simple, stand-alone concept works best.  Seems to me, all you are really trying to achieve can be handled by Cascading Style Sheets.  

Also, I see that you accepted the "complicated" version of the jquery.  "bluehozt" was on to something for you.  Calling everything by DIV id (i.e. ("#executive_header") ) is kind of a bad idea - and I think with this question you are seeing why.  The more abstract you can make your jquery and how it works with your page, the more flexible design.

With that in mind, I would suggest doing what "blue" suggests (using classes rather than ID's to identify and bind your jquery objects/events) and then it's just a matter of styling.

My example might seem a bit off base, but really take the time to figure out what I've done.  Abstracting your jquery from your html as much as possible (by using parent() and :first-child selectors) is a little dangerous, but well worth it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript"></script>
	<script type="text/javascript"
		src="http://static.flowplayer.org/js/tools/1.1.2/all/jquery.tools.min.js?v=1"></script>
	<style>
		ul.menuList {width:200px;padding:2px;border:solid 1px gray;list-style-type:none;float:left;margin:10px;}
		ul.menuList > li {clear:both;}
		ul.menuList li > div.content {display:none;}
		a.close {float:right;}
	</style>
</head>




<body>

	<select name="toc" id="toc" onchange='dropDown(this)'>
	 <option selected="selected">Audit Content</option>
	 <option >Executive Content</option>
	 <option >Sales Content</option>
	 <option >Marketing Content</option>

	</select>

	<ul class="menuList">
		<li class="expander" rel="Audit Content">
			<a href="javascript:;" rel="Audit Content">Audit Content</a>
			<div class="content">
				<p>content relating to AUDIT...</p>
				<a href="#" class="close">close this</a>
			</div>
		</li>

		<li rel="Executive Content">
			<a href="javascript:;" rel="Executive Content">Executive Content</a>
			<div class="content">
				<p>content relating to EXECUTIVE...</p>
				<a href="#" class="close">close this</a>
			</div>
		</li>
	</ul>


	<ul class="menuList">
		<li rel="Sales Content">
			<a href="javascript:;" rel="Sales Content">Sales Content</a>
			<div class="content">
				<p>content relating to SALES...</p>
				<a href="#" class="close">close this</a>
			</div>
		</li>

		<li rel="Marketing Content">
			<a href="javascript:;" rel="Marketing Content">Marketing Content</a>
			<div class="content">
				<p>content relating to MARKETING...</p>
				<a href="javascript:;" class="close">close this</a>
			</div>
		</li>
	</ul>



	<script type="text/javascript">
	var last="";



	function dropDown(obj){

		//get the value of the drop down
		objRel = $(obj).val();

		//hide all the div.content objects
		 $("ul.menuList li > div.content").hide();

		 //fade in div under the matching LI
		 $("ul.menuList li[rel=" + objRel + "] > div.content").fadeIn();

	 }



	$(document).ready(function(){
		//set the default div to show
		dropDown($("#toc"))


		//bind a click event to the first child anchor tag of our menu list LIs
		$("ul.menuList > li > a:first-child").click(function(e){
			//good idea to stop unwanted navigation
			e.preventDefault();

			//when the "header" is clicked, change the display of the child DIV tag
			$(this).next("div.content").slideToggle();
		})

		//bind the close click event to all the "bottom" anchor tags
		$("a.close").click(function(e){
			//good idea to stop unwanted navigation
			e.preventDefault();

			//slide the parent of the close anchor up
			$(this).parent("div.content").slideUp();
		});


	});


	</script>

</body>



</html>

Open in new window

0
 
Steve KrileCommented:
And just as an aside, if your "headers" cause the panes to open and close, you really don't need the "close this" link.
0
 
PdesignzAuthor Commented:
Like what you did, but not exactly what I was looking for. What I need is the options to be listed in two colums/div's side by side as I have a mouseover image hover effect, clicking on link in column, will then hide the columns, except for the link that was clicked on, then will display content that related to link that was clicked in div under link as well as display select list, cycling through the select list will display hidden content of section that was selected from select list. Clicking on close will then hide the content and select list and return you the two column side by side display.

Thank You
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Steve KrileCommented:
hmmm...Interesting.  Give me a few and I'll try to get that working for you...but, I think I know what you are going for now.
0
 
PdesignzAuthor Commented:
Much Appreciated ! :)
0
 
Steve KrileCommented:
Not sure if this is it exactly, but I think we're getting close.
0
 
Steve KrileCommented:
Oops, clicked too fast.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript"></script>

        <style>
        		a, a:hover, a:visited, a:active {text-decoration:none;}
                ul.menuList {width:200px;padding:2px;list-style-type:none;float:left;margin:10px;}
                ul.menuList > li {clear:both;}
                ul.menuList li {display:none;}
                ul.menuList li > div.content {display:none;}
                a.close {float:right;}
        </style>
</head>




<body>


        <ul class="menuList">
                <li rel="Audit Content">
                        <a href="javascript:;" rel="Audit Content">Audit Content</a>
                        <div class="content">
                                <p>content relating to AUDIT...</p>
                                <a href="#" class="close">close this</a>
                        </div>
                </li>

                <li rel="Executive Content">
                        <a href="javascript:;" rel="Executive Content">Executive Content</a>
                        <div class="content">
                                <p>content relating to EXECUTIVE...</p>
                                <a href="#" class="close">close this</a>
                        </div>
                </li>
        </ul>


        <ul class="menuList">
                <li rel="Sales Content">
                        <a href="javascript:;" rel="Sales Content">Sales Content</a>
                        <div class="content">
                                <p>content relating to SALES...</p>
                                <a href="#" class="close">close this</a>
                        </div>
                </li>

                <li rel="Marketing Content">
                        <a href="javascript:;" rel="Marketing Content">Marketing Content</a>
                        <div class="content">
                                <p>content relating to MARKETING...</p>
                                <a href="javascript:;" class="close">close this</a>
                        </div>
                </li>
        </ul>
		<div style="clear:both">&nbsp;</div>
        <select name="toc" id="toc" onchange='dropDown(this)'>
         <option selected="selected">Audit Content</option>
         <option >Executive Content</option>
         <option >Sales Content</option>
         <option >Marketing Content</option>

        </select>



        <script type="text/javascript">
        var last="";



        function dropDown(obj){

                //get the value of the drop down
                objRel = $(obj).val();

                //hide all the div.content objects
                 $("ul.menuList li").hide();

                 //fade in div under the matching LI
                $("ul.menuList li[rel='" + objRel + "']").fadeIn().children("div.content").fadeIn();

         }



        $(document).ready(function(){
                //set the default div to show
                dropDown($("#toc"))


                //bind a click event to the first child anchor tag of our menu list LIs
                $("ul.menuList > li > a:first-child").click(function(e){
                        //good idea to stop unwanted navigation
                        e.preventDefault();

                        //when the "header" is clicked, change the display of the child DIV tag
                        $("ul.menuList div.content").hide();
                        $("ul.menuList li").hide();
                        $(this).parent("li").fadeIn();
                        $(this).next("div.content").fadeIn();
                        $("#toc").fadeIn();
                })

                //
                $("ul.menuList > li").hover(function(){$(this).toggleClass("hover")});

                //bind the close click event to all the "bottom" anchor tags
                $("a.close").click(function(e){
                        //good idea to stop unwanted navigation
                        e.preventDefault();

                        //slide the parent of the close anchor up
                        $("ul.menuList div.content").hide();
                        $("#toc").hide();
                        $("ul.menuList li").fadeIn();
                });


        });



        </script>

</body>



</html>

Open in new window

0
 
PdesignzAuthor Commented:
Better, couple of modifications... can you move the select list to the top, select list and content should not be displayed on page load, also when click link in second column, it should hide first column as currently doing, but rather than display content off to the right in where second section would be, it should shift or left align content so looks like it would be where column 1 was
0
 
Steve KrileCommented:
This feels closer  :P
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript"></script>

        <style>
        		a, a:hover, a:visited, a:active {text-decoration:none;}
                ul.menuList {width:200px;padding:2px;list-style-type:none;float:left;margin:10px;}
                ul.menuList > li {clear:both;}
                ul.menuList li > div.content {display:none;}
                a.close {float:right;}
        </style>
</head>




<body>
        <select name="toc" id="toc" onchange='dropDown(this)' style="display:none;">
         <option selected="selected">Audit Content</option>
         <option >Executive Content</option>
         <option >Sales Content</option>
         <option >Marketing Content</option>

        </select>
        <div style="clear:both">&nbsp;</div>

        <ul class="menuList">
                <li rel="Audit Content">
                        <a href="javascript:;" rel="Audit Content">Audit Content</a>
                        <div class="content">
                                <p>content relating to AUDIT...</p>
                                <a href="#" class="close">close this</a>
                        </div>
                </li>

                <li rel="Executive Content">
                        <a href="javascript:;" rel="Executive Content">Executive Content</a>
                        <div class="content">
                                <p>content relating to EXECUTIVE...</p>
                                <a href="#" class="close">close this</a>
                        </div>
                </li>
        </ul>


        <ul class="menuList">
                <li rel="Sales Content">
                        <a href="javascript:;" rel="Sales Content">Sales Content</a>
                        <div class="content">
                                <p>content relating to SALES...</p>
                                <a href="#" class="close">close this</a>
                        </div>
                </li>

                <li rel="Marketing Content">
                        <a href="javascript:;" rel="Marketing Content">Marketing Content</a>
                        <div class="content">
                                <p>content relating to MARKETING...</p>
                                <a href="javascript:;" class="close">close this</a>
                        </div>
                </li>
        </ul>





        <script type="text/javascript">
        var last="";



        function dropDown(obj){

                //get the value of the drop down
                objRel = $(obj).val();

                //hide everything
                 $("ul.menuList div.content, ul.menuList li, ul.menuList").hide();

                 //fade in div, ul, and li
                var liObj = $("ul.menuList > li[rel='" + objRel + "']");

				$(liObj).parent("ul.menuList").show();
				$(liObj).show();
				$(liObj).children("div.content").fadeIn();


         }



        $(document).ready(function(){

                //bind a click event to the first child anchor tag of our menu list LIs
                $("ul.menuList > li > a:first-child").click(function(e){
                        //good idea to stop unwanted navigation
                        e.preventDefault();

                        //when the "header" is clicked, change the display of the child DIV tag

                        //hide everything
                        $("ul.menuList div.content, ul.menuList li, ul.menuList").hide();

                        //show the parent UL
                        $(this).parents("ul.menuList").show();

                        //fade in the li
                        $(this).parents("li").fadeIn();

                        //fade in the content div below the link
                        $(this).next("div.content").fadeIn();

                        //bring in the drop down
                        $("#toc").fadeIn();
                        $("#toc").val($(this).attr("rel"))
                })


                //bind the close click event to all the "bottom" anchor tags
                $("a.close").click(function(e){
                        //good idea to stop unwanted navigation
                        e.preventDefault();

                        //hide everything
                        $("ul.menuList, ul.menuList div.content").hide();
                        $("#toc").hide();

                        //show the base list again
                        $("ul.menuList, ul.menuList > li").fadeIn();
                });


        });



        </script>

</body>



</html>

Open in new window

0
 
PdesignzAuthor Commented:
Looks good in Firefox, but in IE everything but the select list is displayed on page load, we are behind a corporate firewall and most would be using IE 6, so need that to work as well, much appreciated.... thank You!!
0
 
Steve KrileCommented:
Just need to make two of your style rules IE6 friendly.


***WAS****
ul.menuList > li {clear:both;}
ul.menuList li > div.content {display:none;}



***GOOD FOR IE6*****
ul.menuList li {clear:both;}
ul.menuList li div.content {display:none;}



We're behind the WALL too with IE6 as the default...not cool!  :)
0
 
PdesignzAuthor Commented:
yes, agreed very not cool... on the switching of content via select list, can we add a slight delay resembling a fade out/fade in effect, maybe a delay of ("5000"), something like that.
Thanks
0
 
Steve KrileCommented:
Yep...but this is my last revision for ya.  Really try to get to know what's happening here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript"></script>

        <style>
        		a, a:hover, a:visited, a:active {text-decoration:none;}
                ul.menuList {width:200px;padding:2px;list-style-type:none;float:left;margin:10px;}
                ul.menuList li {clear:both;}
                ul.menuList li div.content {display:none;border:solid 1px gray;}
                a.close {float:right;}
        </style>
</head>




<body>
        <select name="toc" id="toc" onchange='dropDown(this)' style="display:none;">
         <option selected="selected">Audit Content</option>
         <option >Executive Content</option>
         <option >Sales Content</option>
         <option >Marketing Content</option>

        </select>
        <div style="clear:both">&nbsp;</div>

        <ul class="menuList">
                <li rel="Audit Content">
                        <a href="javascript:;" rel="Audit Content">Audit Content</a>
                        <div class="content">
                                <p>content relating to AUDIT...</p>
                                <a href="#" class="close">close this</a>
                        </div>
                </li>

                <li rel="Executive Content">
                        <a href="javascript:;" rel="Executive Content">Executive Content</a>
                        <div class="content">
                                <p>content relating to EXECUTIVE...</p>
                                <a href="#" class="close">close this</a>
                        </div>
                </li>
        </ul>


        <ul class="menuList">
                <li rel="Sales Content">
                        <a href="javascript:;" rel="Sales Content">Sales Content</a>
                        <div class="content">
                                <p>content relating to SALES...</p>
                                <a href="#" class="close">close this</a>
                        </div>
                </li>

                <li rel="Marketing Content">
                        <a href="javascript:;" rel="Marketing Content">Marketing Content</a>
                        <div class="content">
                                <p>content relating to MARKETING...</p>
                                <a href="javascript:;" class="close">close this</a>
                        </div>
                </li>
        </ul>





        <script type="text/javascript">
		var onmenu ;

        function dropDown(obj){

                //get the value of the drop down
                objRel = $(obj).val();

                //hide everything
                	$(onmenu).fadeOut("slow",function(){
                		//hide everything
                 		$("ul.menuList div.content, ul.menuList li, ul.menuList").hide();
                		var liObj = $("ul.menuList > li[rel='" + objRel + "']");
                		onmenu = $(liObj).parent("ul.menuList");
						$(liObj).parent("ul.menuList").show();
						$(liObj).show();
						$(liObj).children("div.content").fadeIn();

                	});





         }



        $(document).ready(function(){

                //bind a click event to the first child anchor tag of our menu list LIs
                $("ul.menuList > li > a:first-child").click(function(e){
                        //good idea to stop unwanted navigation
                        e.preventDefault();

                        //when the "header" is clicked, change the display of the child DIV tag

                        //hide everything
                        $("ul.menuList div.content, ul.menuList li, ul.menuList").hide();

                        onmenu = $(this).parents("ul.menuList");

                        //show the parent UL
                        $(this).parents("ul.menuList").show();

                        //fade in the li
                        $(this).parents("li").fadeIn();

                        //fade in the content div below the link
                        $(this).next("div.content").fadeIn();

                        //bring in the drop down
                        $("#toc").fadeIn();
                        $("#toc").val($(this).attr("rel"))
                })


                //bind the close click event to all the "bottom" anchor tags
                $("a.close").click(function(e){
                        //good idea to stop unwanted navigation
                        e.preventDefault();

                        //hide everything
                        $("ul.menuList, ul.menuList div.content").hide();
                        $("#toc").hide();

                        //show the base list again
                        $("ul.menuList, ul.menuList > li").fadeIn();
                });


        });



        </script>

</body>



</html>

Open in new window

0
 
PdesignzAuthor Commented:
sorry, newbie to jquery :(
0
 
Steve KrileCommented:
No worries.  I'm not angry, just looks like you have a really good start here.
0
 
PdesignzAuthor Commented:
can the script be moved to the head or does it need to be in the body?
0
 
Steve KrileCommented:
Do you mean, can it be included in a .js file from the head?  yes.

Do you mean you want the actual script tag moved to the top of the page?  It is generally considered best-practice to keep your javascript at the bottom of your html.

http://developer.yahoo.com/performance/rules.html

However, in my experience with jquery, as long as you do everything within the context of

$(document).ready();

you shouldn't have to worry about WHERE you put the script.
0
 
PdesignzAuthor Commented:
hmm, always thought best in head tag, guess you l learned something new.... Thanks and if I have additional questions, I"ll go ahead and post another question
0
 
PdesignzAuthor Commented:
Great work! Thanks!!
0
 
Steve KrileCommented:
Fair enough.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 11
  • 9
Tackle projects and never again get stuck behind a technical roadblock.
Join Now