CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Alex Ritter
Alex Ritter

Reputation: 1041

Conditionally hide div based on if element is present on page

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!

Upvotes: 3

Views: 27931

Answers (7)

Adil Shaikh
Adil Shaikh

Reputation: 44740

Yes !

if($('.someElement').length){  // returns true if element is present
  // show or hide another div
  $('.otherElement').hide();
}

Upvotes: 8

Salman Arshad
Salman Arshad

Reputation: 272006

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");
}

Upvotes: 1

Casey Dwayne
Casey Dwayne

Reputation: 2169

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.

Upvotes: 0

user3040830
user3040830

Reputation:

You can also do the samething by

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

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

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

Upvotes: 1

user3040830
user3040830

Reputation:

Try the below code:

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

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

Upvotes: 0

user2481985
user2481985

Reputation: 85

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();
}

Upvotes: 1

Related Questions