3

I am trying to figure out the best way to hide/show a left hand navigation menu on my volusion store.

Would it be possible via javascript/jquery to change the css display type of a div based on weather another element is present on the page?

The reason I ask is that the templating of this software is a bit convoluted. There is only a single skin file for the entire site. If I want the left hand navigation to load at all, it must be in the skin file. If it's in the skin file, it will load on every page but the homepage.

Because this is e-commerce software, I can easily add/remove content and elements from my informational pages, but the product and category pages load dynamically. I want to show the left hand menu on my info pages, but hide it on my product/category pages.

Which brings me back around to my original question. Since I am able to easily add an html element to my info pages, could I simply add a <br class="show-left-nav" /> to the page to trigger a javascript css change?

http://xlevj.jyetp.servertrust.com/contact-us_a/286.htm

Thanks!

Alex Ritter
  • 1,009
  • 3
  • 18
  • 40

7 Answers7

8

Yes !

if($('.someElement').length){  // returns true if element is present
  // show or hide another div
  $('.otherElement').hide();
}
Adam Eberbach
  • 12,309
  • 6
  • 62
  • 114
Adil Shaikh
  • 44,509
  • 17
  • 89
  • 111
  • So I understand this correctly, this bit of script would detect if a class is present on the page, then if it is, it would hide an element? I think this is reverse. I need the element detect to show if a class is present, then hide by default! – Alex Ritter Jan 27 '14 at 14:47
  • 1
    @AlexRitter Yeah! That is just to demonstrate.. You can change it to `.show()`. or you can use `else` – Adil Shaikh Jan 27 '14 at 14:49
  • Mohammad - one more quick question. I need this bit of script to also change the width of a div if the element is detected. div id of "content_area" needs to have a width of 760px dynamically added by this script. Help? – Alex Ritter Jan 27 '14 at 16:31
  • @AlexRitter `$('#content_area').width('760');` – Adil Shaikh Jan 27 '14 at 16:35
  • I currently have this. It is not adding the width to the element. if($('.show-left-nav').length){ // return's true if element is present // show or hide another div $('.left-nav').show(); $('#content_area').width('760'); – Alex Ritter Jan 27 '14 at 16:39
  • Sorry, without the comments. if($('.show-left-nav').length) { $('.left-nav').show(); $('#content_area').width('760'); } – Alex Ritter Jan 27 '14 at 16:41
  • Are you sure, you have `#content_area` inside your page ? if you do , look for error's in your console – Adil Shaikh Jan 27 '14 at 16:42
  • It's adding a style tag to the #content_area div, but not adding any in-line css. – Alex Ritter Jan 27 '14 at 16:42
  • try `$('#content_area').css('width','760px');` – Adil Shaikh Jan 27 '14 at 16:43
1

If it is possible to add a class somewhere up the hierarchy (e.g. on body tag) then you can control the sidebar display using:

body.hide-left-nav .left-nav { display: none; }
/* or if you can inject div.hide-left-nav on previous sibling of sidebar */
div.hide-left-nav ~ .left-nav { display: none; }

See if you can hack into the template engine.

You can use jQuery too but it will create a FOUC effect because jQuery needs to wait for document ready in order to determine if the element is present and by that time the browser may have rendered the sidebar. You can still use jQuery though (see Adil's answer) or an alternate:

/*
this should work best if placed after body start and
before navbar and not wrapped inside document.ready
it uses location.href so document.ready not required
*/
if (location.href.match(/products|categories/)) {
    $("body").addClass("hide-left-nav");
}
Salman A
  • 262,204
  • 82
  • 430
  • 521
  • Thanks for the reply Salman. Unfortunately, the single master template takes control of almost every element, with exception to a content div that I am allowed to add content to dynamically with their GUI – Alex Ritter Jan 27 '14 at 14:45
  • Can you place an HTML element inside the same container that contains the sidebar? – Salman A Jan 27 '14 at 14:46
  • The sidebar and content pane are both contained within a div, but I can not add statically add any content to the div containing the sidebar, just the content area. You can firebug inspect the page I linked in the OP. I have access inside the div with the id of content. – Alex Ritter Jan 27 '14 at 14:51
  • 1
    Salman - If I hide the sidebar by default, then run the jquery detect script on page load, I would not have the FOUC issue. Correct? – Alex Ritter Jan 27 '14 at 14:54
  • In this case you'll need to use jQuery solution. I have used jQuery and CSS approaches but FOUC effect in jQuery approach was annoying. And yes, hiding sidebar by default might be better that showing by default then hiding. – Salman A Jan 27 '14 at 14:55
  • If you want to avoid the flicker issue @SalmanA mentioned you could set the menu to display none then show it when desired. – RyanS Jan 27 '14 at 14:56
1

Pretty Straight forward I'd say. 

#sidebar {display:none;}

javascript: 

var conditionalEl = document.getElementById("TestId");
var sidebar = document.getElementById("sidebar"); 
if(typeof(conditionalEl) !== undefined){
    sidebar.style.display = "block";
}

jQuery: 

if($("#TestId")){
    $("#sidebar").show();
}
user2481985
  • 85
  • 7
1

If you have access to the div with id="content" then add the element at the start of it.

<div id="content">
    <br class="show-left-nav" />
    <div id="content_area"></div><!--Already exists-->
    <div id="leftNav"></div><!--Already exists-->
</div>

and in your CSS add

.show-left-nav{display:none;}
#leftNav{display:none;}
.show-left-nav ~ #leftNav{display:block;}

the ~ is the general sibling selector

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • leftNav will be a sibling of content_area; therefore it cannot be a sibling of content_area's children. – Salman A Jan 27 '14 at 15:00
  • This would have been perfect, except I only have access to #content_area, which is a child of #content, but not a sibling of #leftNav – Alex Ritter Jan 27 '14 at 15:14
  • @AlexRitter ah sorry... you mentioned in another comment that you had access to the div with id content.. Now, for the `#content_area` you only have access to its contents right ? or can you add a class to `#content_area` itself ? – Gabriele Petrioli Jan 27 '14 at 16:57
0

Try the below code:

jQuery.fn.exists = function(){return this.length;}

if ($(selector).exists()) {
    // Do something
}
0

You can also do the samething by

if ($(selector).is('*')) {
  // Do something
}
0

Sure. http://jsfiddle.net/LW5Bb/

nav = $('#leftNav');
toggle_button = $('#toggle_menu');
nav.hide();

toggle_button.on('click',function(){
    nav.toggle();
})

If you're dead set on having it show/hide depending on another item's visibility...

if($('#your-item').is(':visible')) function(){ nav.toggle() })

or simply

if($('#your-item').is(':visible')) function(){ nav.show() })

if you don't want to toggle it.

Casey Dwayne
  • 2,142
  • 1
  • 17
  • 32