Show / hide with javascript at viewport

1,613 Posts

fourroses666 Reply #1, 13 years, 2 months ago

It does not really have to do with Modx beside it's build in Modx.
My js skills are not that great and I'm struggling with some coding.

I need to hide a div when reaching a viewport < 767
Clicking on a other div shows it again.

I made a fiddle: http://jsfiddle.net/4URNe/1/

There are still some things which doesn't work.
The show button doesn't work, when loading the page < 767 it still shows, after smallen or extend just 1px then it disapears and I don't know how to let it work for blok2.

The script I have atm:

$(window).resize(function() {
   if ($(window).width() < 767) {$(".blok1").hide()}
   else{$(".blok1").show()}
});

function showMe(){
   jQuery(".blok1").show();
}
function showMe2(){
   jQuery(".blok2").show();
}

The html:

<div class="bull bull-blok1"><a class="show-blok1" href="javascript:showMe()">Show</a></div>
<div class="bull bull-blok2"><a class="show-blok1" href="javascript:showMe2()">Show</a></div>

<div class="blokken blok1">
  <div class="text"><div class="padx"><p>Lorem ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here.</p></div></div>
</div>

<div class="blokken blok2">
  <div class="text"><div class="padx"><p>Lorem ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here, ipsum here.</p></div></div>
</div>

Evolution user, I like the back-end speed and simplicity

194 Posts

DonQuicky Reply #2, 13 years, 2 months ago

In your code I'am missing the hiding of blok2. I suppose you want to hide both blocks on a viewport smaller than 767. In that case you have to hide all blocks.

Change it into:

$(window).resize(function() {
   if ($(window).width() < 767) {$(".blokken").hide()}
   else{$(".blokken").show();}
});

function showMe(whatdiv){
    $("." + whatdiv).show();
}

And in your HTML:

<div class="bull bull-blok1"><a class="show-blok1" href="javascript:showMe('blok1')">Show</a></div>
<div class="bull bull-blok2"><a class="show-blok1" href="javascript:showMe('blok2')">Show</a></div>

Is this what you mean?

Codeplaza Webdesign: for professional websites at low cost

☆ A M B ☆
894 Posts

benmarte Reply #3, 13 years, 2 months ago

Here you go I placed comments so you can get an idea of whats going on, good luck.

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

1,613 Posts

fourroses666 Reply #4, 13 years, 2 months ago

Thanks allot sunglasses guys hehe.

A small detail, it would be the nicest if I can troggle (show/hide) instead of hide.
Is this easy to change?

http://jsfiddle.net/4URNe/27/

Evolution user, I like the back-end speed and simplicity

☆ A M B ☆
894 Posts

benmarte Reply #5, 13 years, 2 months ago

You sure can take a look here.

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

1,613 Posts

fourroses666 Reply #6, 13 years, 2 months ago

Thats it!

Another problem came up, when I implement it on the site the bullet brings me to my modx not found page: /#blok1

href="#blok1">

///

Maybe this can be fixed by using a id on the link?

<div class="bull bull-blok1"><a id="blok1" href="javascript:void(0)">Show</a></div>
<div class="bull bull-blok2"><a id="blok2" href="javascript:void(0)">Show</a></div>

Then the js would need to be modified again.. [ed. note: fourroses666 last edited this post 13 years, 2 months ago.]

Evolution user, I like the back-end speed and simplicity

☆ A M B ☆
894 Posts

benmarte Reply #7, 13 years, 2 months ago

The bullets need to have an anchor to the div with the ID blok1 not an ID like you have it now.

Look at the HTML in the JSFiddle so you can see what I mean each link has an anchor tag in the href that points to the ID of the div to hide and show.

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

1,613 Posts

fourroses666 Reply #8, 13 years, 2 months ago

Is there a way the url doesn't change to /#blok1 although the href wants it to.
I sometimes see this if I'm right.

It brings me to a new page and can't use it sad

// I was just trying Dons way but no success
http://jsfiddle.net/Mbdzf/1/ [ed. note: fourroses666 last edited this post 13 years, 2 months ago.]

Evolution user, I like the back-end speed and simplicity

1,613 Posts

fourroses666 Reply #9, 13 years, 2 months ago

Ok, weird when I use this

$(function(){
   $("a.show-blok").click(function(e){
       e.preventDefault();
    }); 
});

it works on my fiddle:

http://jsfiddle.net/4URNe/31/
http://fiddle.jshell.net/4URNe/31/show/

Need to recheck my sites code.. i'm going crazy here [ed. note: fourroses666 last edited this post 13 years, 2 months ago.]

Evolution user, I like the back-end speed and simplicity