"go left" button

couteau / 2014-04-23 08:09:27   

Hi there !

A friend of mine found me some script to add a kind of "go top" button, but for the horizontal plugin (so it's more like a "go left" button).
This button appears on the bottom right of the images when you start to scroll, and when you click on it, the images just slide to the left by theur own.
So far, everything's OK.
But there is just a little problem with it : the button appears even on the "over and over" plugin, which is not needed, but logical since we implemented the "toleft" div on the index.php.
Is there a way to implement this div just on the horizontal plugin, or put a php condition to display the go left button only when the plugin horizontal is on ?
Thanks in advance for your help, and sorry for my approximative english!

Oh and by the way, my website is : quentinduckit.com

Vaska A / 2014-04-23 08:42:14   

Yes, just implement it into the format directly - format.horizontal.php.

couteau / 2014-04-23 08:52:41   
Thanks Vaska for the quick answer !
I already tried to implement it on the horizontal.php, but I think I didn't place it on the right place, or did it wrong, because nothing worked.
Right now, the script is wrote on hscroll.js, and I placed a "toleft" div in my index.php.
Do i have to implement all of the script in horizontal.php or just the "toleft" div ?
I tried the second option already, writing :
$html .= "
couteau / 2014-04-23 08:55:11   

Oops, my message didn't work.
So I tried to call the div with a $html on line 67, but it didn't work.

Vaska A / 2014-04-23 09:03:42   

I don't know because I don't know about that script. Customizing requires some skill and knowledge of the code.

couteau / 2014-04-23 09:46:05   

Yep I realized :-) (I'm not completly ignorant with some html or php though, I just try to learn by myself so it takes a lot if time and sometimes some help)
So, I was wondering if there is another way to do it. I mean, couldn't I just let things like they are now ("toleft" div called in index.php), but adding some php condition like "if format.horizontal.php is on (or true), display "toleft" div, else, don't display it", something like that ?
Thanks again for your help, if nothing is possible I will just forget it and go back to work :-)

couteau / 2014-04-28 10:35:24   

Ok I found a way to display the div with the go left button only where I wanted to display it, and for people who want to do the same, here is what I did
(here's an exemple on my website : quentinduckit.com/illustration/psoriasis/) :

-First, I added a script in a js file called "hscroll.js", which was already in use on my website to allow visitors to scroll horizontally using their mouse's scrollwheel.
The script I added is :

  1. $( document ).ready(function() {
  2.     
  3.     $('#toleft').hide();
  4.     $(window).scroll(function() {
  5.         if ($(this).scrollLeft()) {
  6.             $('#toleft:hidden').stop(true, true).fadeIn();
  7.         } else {
  8.             $('#toleft').stop(true, true).fadeOut();
  9.         }
  10.     });
  11.     
  12.     $('#toleft').click(function(){
  13.         $('body, html').animate({scrollLeft: 0}, 1500);
  14.     });

});

I put this script on line 19 of the existing hscroll.js file, between "function handle delta" and "function wheel event".
Basically, it means that you want to add a div which, by clicking on it, scroll to the left until the beginning of the window. You can adapt the speed changing the value "1500" in something else. Oh and this div is hidden when you load your gallery, and magically appears when you start to scroll to the right, which is just perfect.
(I have to say I didn't find it by myself, it's way beyond my poor skills in coding).

  1. Then I add a css style for this div "toleft", in my case it's looking like : 
  2. #toleft {
  3.     
  4.     position: fixed; 
  5.     right: 30px; 
  6.     top: 650px; 
  7.     z-index:9998;
  8.     -webkit-touch-callout: none;
  9.     -webkit-user-select: none;
  10.     -khtml-user-select: none;
  11.     -moz-user-select: none;
  12.     -ms-user-select: none;
  13.     user-select: none;
  14.     cursor: pointer;
  15.     font-size: 13px;
  16.     font-weight: 200;
  17.     
  18. }

And finally I call this div in the index.php, on line 28, just before div "exhibit".

  1. At this point, there was just one problem : the div "toleft" was display on every page of my website, and it was a big pain in my *** .
  2. As I said, I'm just a beginner in coding, so the only way I found to hide the div on my main page and other pages is pretty rough, but it's working :
  3. Since the "toleft" div is in position:fixed, then I could add a div at the same place, hidding "toleft" when I don't want it to be displayed. I found some interesting scripts on the web, allow me to hide or display a div, according to strings in the url. So I add a div in the style.css :
  4. #hidetoleft {
  5.     
  6.     position: fixed;
  7.     right: 25px;
  8.     top: 645px;
  9.     height: 30px;
  10.     width: 30px;
  11.     background-color: white;
  12.     z-index: 9999;
  13.     
  14. }

I call this div just before "toleft" in the index.php

  1. <div id='hidetoleft'></div>
  2. <div id='toleft'><<</div>

And I finally added a script at the end of index.php, just before the tag :

  1. <script>
  2. if (/illustration|shop/.test(window.location.href)) {
  3.     document.getElementById('hidetoleft').style.display = 'none';
  4. }
  5. </script>
  6. </body>

So, everytime the word "illustration" or "shop" appears on the url, the div hidding "toleft" isn't displayed. You just have to change this words to fit your case, and you're done !

Hoping it will helps !

This thread has been closed, thank you.