jor_gridRip 3.0

jordan · Post by **jordan** » Fri Jun 03, 2016 3:11 pm

jor_gridRip 3.0 EXTENDED

=============================================================================================

=============================================================================================

jor_gridRip is a powerful tool build to work in combination with WB 11 LayoutGrids
It allows to hide/reveal LayoutGrid content in a vertical accordion style
jor_gridRip is highly adaptable and allows for many different setups and uses
NEW**! - in jor_gridRip3.0 - three powerful extended options for LayoutGrids

THE OPTIONS:
- 2 (toggle) triggers (by WB Text/Image) to open/close a hidden LayoutGrid
- option to hide multiple LayoutGrids - create group/collapse control
- option to close a LayoutGrid - (=invert to open grid)
- option auto focus the active LayoutGrid - (=auto scroll to active grid)
- option return - scroll to specified grid after the active grid closes
- animation speed and easing
- NEW**! 2.0 - smart content loader (=loading image)
- NEW**! 2.0 - callback on load/open/close/focus/hide
- EXTENDED OPTIONS:
- NEW**! v3.0 - EXTENDED OPTION - maintain equal columns height for (fluid) grid
- NEW**! v3.0 - EXTENDED OPTION - set independent parallax speed/direction/limit for selected grid columns
- NEW**! v3.0 - EXTENDED OPTION - maintain full width background for grid (=counter max-width)
- ALSO NEW:
- NEW**! v3.0 - ADVANCED - many enhanced internal callback options - (+external trigger parameters)
- NEW**! v3.0 - new option grid starts open on page load

=============================================================================================

see also a new super cool template demo (=arkitek) that demonstrates jor_gridRip3.0 in a template setup at jorextensions.com

AND OF COURSE - OH MAMA -

- IT'S-STILL-FREE!

=============================================================================================

DEMO jor_gridRip: visit jorextensions.com / Full Template Demo
DOWNLOAD: jor_gridRip

Builder: jordan (6j6)
Code: jordan (6j6)
EB version: 5.3.2
WB version: 11+
jQuery lib: 1.7.2/1.12.4/(2.2.4)
W3C valid: Html, Xhtml
License: released under the MIT and GPL licenses

HISTORY:
-#-#-#- version 2: -#-#-#- 21/aug/16
01. enhanced: close each - to invert - individual - if multiple grids are grouped (=collapse mode)
02. new: smart content loader (=loader image)
03. enhanced/fix: new option: margin fix
04. new: new option: callback on load/open/close/focus/hide
05. additional: updated jor_gridRip_easystart project + pdf manual
06. additional: other minor improvements

-#-#-#- version 3: -#-#-#- 25/dec/16
01. new: EXTENDED OPTION - maintain equal columns height for (fluid) grid
02. new: EXTENDED OPTION - set independent parallax speed/direction/limit for selected grid columns
03. new: EXTENDED OPTION - maintain full width background for grid (=counter max-width)
04. enhanced/new: internal option (advanced) - disable toggle trigger 2
05. enhanced/new: internal option (advanced) - callback on window resize (+enable)
06. enhanced/new: internal option (advanced) - allow scroll focus as an alternate object target
07. enhanced/new: internal option (advanced) - jQuery trigger parameters (triggerState/focusState/returnState)
08. enhanced/new: internal option (advanced) - smart scroll focus/return functions (=smart reset)
09. enhanced/new: internal option (advanced) - callbacks now executes on each hidden grid
10. new: new option: grid starts open on page load
11. additional: updated jor_gridRip_easystart project + pdf manual
12. additional: other minor improvements

- for full update history see .pdf in download

jordan · Post by **jordan** » Sat Jun 04, 2016 2:17 pm

jor_gridRip 1.0 - SOON AVAILABLE!

visit the NEW redesigned jorextensions.com for a demo
see also a new cool template demo (=makeupofstars) that demonstrates jor_gridRip in a templates setup (=READ MORE buttons in template)

tommy888 · Post by **tommy888** » Sat Jun 04, 2016 10:44 pm

I can see Jor, you've just redigned your website. Neat and tidy. Nicely done

tommy888 · Post by **tommy888** » Sat Jun 04, 2016 10:48 pm

I'll have to update some of your extenstion a.s.a.p. - great display, easily searchable
http://www.jorextensions.com/extensions/index.html

Thank you Jordan for your valuable and supurb work.

jordan · Post by **jordan** » Mon Jun 06, 2016 10:58 am

tommy888 wrote:I'll have to update some of your extenstion a.s.a.p. - great display, easily searchable
http://www.jorextensions.com/extensions/index.html

Thank you Jordan for your valuable and supurb work.

wanted to do this for a loOng time finally got to it, glad you like tommy888
now finishing up on this jor_gridRip extension then I'm huOppy:)

madebyibloo · Post by **madebyibloo** » Thu Jun 09, 2016 11:18 am

High5 Jordan! I'm looking forward to playing with this! Thanks!

jordan · Post by **jordan** » Thu Jun 09, 2016 4:04 pm

SUB wrote:High5 Jordan! I'm looking forward to playing with this! Thanks!

hi SUB,

Low5-tooSlow:) - prob. ready this weekend - I really like this one !:)

madebyibloo · Post by **madebyibloo** » Thu Jun 09, 2016 4:05 pm

haha!

Super Jordan! Cant wait! I'm a massive fan of the layoutgrid (tbh they all I use now!)

jordan · Post by **jordan** » Sat Jun 11, 2016 3:32 pm

jor_gridRip 1.0 - RELEASED!

jor_gridRip is a powerful tool build to work in combination with WB 11 LayoutGrids
It allows to hide/reveal LayoutGrid content in a vertical accordion style
jor_gridRip is highly adaptable and allows for many different setups and uses

visit the NEW redesigned jorextensions.com for a demo
see also a new cool template demo (=makeupofstars) that demonstrates jor_gridRip in a templates setup (=READ MORE buttons in template)

@SUB/tommy888 - hope you enjoy!:)

madebyibloo · Post by **madebyibloo** » Sat Jun 11, 2016 3:33 pm

THANKS JORDAN!!!!!

aml02873 · Post by **aml02873** » Sat Jun 11, 2016 4:04 pm

Oh man this is great. Thxs very much you're a king wizard

maxime · Post by **maxime** » Sun Jun 12, 2016 3:30 pm

the exemple on the file, in the preview mode do not work !

jordan · Post by **jordan** » Sun Jun 12, 2016 4:31 pm

aml02873 wrote:Oh man this is great. Thxs very much you're a king wizard

- potter, - jordan potter .

. - enjoy aml02873!:)

jordan · Post by **jordan** » Sun Jun 12, 2016 4:32 pm

maxime wrote:the exemple on the file, in the preview mode do not work !

hi maxime,

you probably have a - target folder for file types - for .js set ?
remove it for jor_gridRip to work correct

maxime · Post by **maxime** » Sun Jun 12, 2016 10:03 pm

you probably have a - target folder for file types - for .js set ?

Yesss sir you are right! working now ! Thank you.

jordan · Post by **jordan** » Fri Aug 19, 2016 11:51 am

jor_gridRip 2.0 - UPDATE!

01. enhanced: close each - to invert - individual - if multiple grids are grouped (=collapse mode)
02. new: smart content loader (=loader image)
03. enhanced/fix: new option: margin fix
04. new: new option: callback on load/open/close/focus/hide
05. additional: updated jor_gridRip_easystart project + pdf manual
06. additional: other minor improvements

see also a new cool template demo (=yourlovez) that demonstrates jor_gridRip in a compact accordion template setup at jorextensions.com

for full update history, demo and download see top post

Islander · Post by **Islander** » Wed Sep 14, 2016 3:08 pm

Thanks for this again Jordan. Light be with you.

Itab · Post by **Itab** » Tue Oct 25, 2016 7:37 am

Hi Jor,

Great extension, thank you.

I just have one question. I need the first hidden grid to be open on webpage loading.
I can get it done with an OnTimer timeout event (Toggle GRID-1) but this is unreliable.

What's a simple way to show GRID-1 when the page is displayed?

Thank you.

jordan · Post by **jordan** » Tue Oct 25, 2016 6:32 pm

hi Itab,

I do not know how you have setup jor_gridRip ?
It can ie. be done by using the "to invert" property - that could create a specific design with an open grid on start
but I guess you want a basic accordion type on which one grid is open on page load ?
at the moment I have not created a simple setting to do that
there are however ways to achieve that by using the "callback" and some code
at the moment I am working on jor_gridRip3.0, I will add a function to do that, jor_gridRip3.0 is still awhile away tho
if you really really need it now, I can give you the callback/code
I think it is better to wait and have it as a simple setting and not have to remove code afterward

Itab · Post by **Itab** » Wed Oct 26, 2016 6:20 pm

Thank you.

Yes, it's a basic accordian with 3 button (image) triggers.
I set the opacity of button 1 to 50% to match active state and toggle GRID-1 with a timer on page load.

This works and mimics the operation well. I just don't want to use a timer but couldn't get it to work in HTML.

There must be a simple way to toggle a GRID on page load.

jordan · Post by **jordan** » Thu Oct 27, 2016 2:23 pm

Itab wrote:There must be a simple way to toggle a GRID on page load.

hello Itab,

it is not just a matter of adding a toggle(?), jor_gridRip has it's internal functions that need to be adjusted
you probably ie. want to disable/enable scroll focus and fx speed, - it also matters which trigger actually is used - etc
jor_gridRip can be used in many different setups, I can not give a simple solution that works for all
that's why I wrote (best to wait) I will add this function to jor_gridRip3.0, - hope to releasev v3.0 soon:)

Itab · Post by **Itab** » Thu Oct 27, 2016 5:41 pm

Hi Jordan,

Thank you for your reply.

It would also be nice to control the horizontal position of the next and previous arrows.
The default horizontal position does not look good on a big screen.

jordan · Post by **jordan** » Thu Oct 27, 2016 10:16 pm

Itab wrote:It would also be nice to control the horizontal position of the next and previous arrows.
The default horizontal position does not look good on a big screen.

which next/prev arrows ? - jor_gridRip has no next/prev function ?

Itab · Post by **Itab** » Fri Oct 28, 2016 4:02 pm

Sorry, I didn't make myself clear.

When displaying a gallery, the right and left arrow keys are positioned on the edges of the screen.

Yor extension allows vertical allignmet of the keys. It would be nice to have control of the horizontal
alignment to bring them closer to the image.

Don't worry about it.

Thank you.

krundt · Post by **krundt** » Sun Dec 04, 2016 9:27 am

I have been playing around with this extension for some time and I like the concept. HOWEVER, the extension doesn't seem to work with responsive page breakpoints. Normally when you have layout grids you may not feel the need to have responsive pages, but there are cases when you need them. For example, look at the template AnotherGrid where the main menu does not position itself correctly without the single responsive breakpoint. Now, if you have the jor_gridRip hiding grids in the Default page, you will find that they are not hidden - and cannot be toggled - in a breakpoint version of the page. Or am I doing something wrong

jordan · Post by **jordan** » Mon Dec 05, 2016 12:44 pm

hi krundt,

glad you like:)
this happens because inline style use !important is enabled
that's too many battles to win .

.

DISABLE --- Options > HTML > Responsive Web Design > Keep inline styles (use !important)

krundt · Post by **krundt** » Mon Dec 05, 2016 2:14 pm

Thanks!

jordan · Post by **jordan** » Wed Dec 21, 2016 2:53 pm

jor_gridRip 3.0 EXTENDED - UPDATE!

01. new: EXTENDED OPTION - maintain equal columns height for (fluid) grid
02. new: EXTENDED OPTION - set independent parallax speed/direction/limit for selected grid columns
03. new: EXTENDED OPTION - maintain full width background for grid (=counter max-width)
04. enhanced/new: internal option (advanced) - disable toggle trigger 2
05. enhanced/new: internal option (advanced) - callback on window resize (+enable)
06. enhanced/new: internal option (advanced) - allow scroll focus as an alternate object target
07. enhanced/new: internal option (advanced) - jQuery trigger parameters (triggerState/focusState/returnState)
08. enhanced/new: internal option (advanced) - smart scroll focus/return functions (=smart reset)
09. enhanced/new: internal option (advanced) - callbacks now executes on each hidden grid
10. new: new option: grid starts open on page load
11. additional: updated jor_gridRip_easystart project + pdf manual
12. additional: other minor improvements

see also a new super cool template demo (=arkitek) that demonstrates jor_gridRip3.0 in a template setup at jorextensions.com

for full update history, demo and download see top post

BaconFries · Post by **BaconFries** » Wed Dec 21, 2016 9:34 pm

Great jordan

jordan · Post by **jordan** » Thu Dec 22, 2016 1:43 pm

BaconFries wrote:Great jordan

ho ho hO:) - great to hear from you as always amigO !
holy crapoli it's v3.0 it should be v30.0 that's how many versions I made to get to v3.0
glad it's done finally! - aaaaarghhhhH & yeah .

.

BaconFries · Post by **BaconFries** » Thu Dec 22, 2016 3:05 pm

Great to see you can still take the time to put extensions out. Have a great Christmas jordan.

giula · Post by **giula** » Sun Jan 15, 2017 10:39 am

Hello Jordan, congratulations on all your accomplishments! I am especially fascinated by the mousewheel scroll smoothness that you're able to get many of your pages, for example www.jorextensions.com/extensions.
How can we achieve this effect? Thank you very much

jordan · Post by **jordan** » Mon Jan 16, 2017 1:30 pm

giula wrote:Hello Jordan, congratulations on all your accomplishments! I am especially fascinated by the mousewheel scroll smoothness that you're able to get many of your pages, for example http://www.jorextensions.com/extensions.
How can we achieve this effect? Thank you very much

hi giula,

great to hear you like:)

that is done with my - JMPv3.0
this momentum scroll function however is not documented - you can not find it in my JMPv3.0 online manual -

.
I created the function but never completely finished it - (still needs improved integration with some other JMP modules)
the function itself works fine tho, I use it myself all the time, it just needs tweaking

you can easily enable the function ... steps ...

1. add JMPv3.0 (=jor_aniMateTEMPLATE) to your project
2. open - EASY TOOLS > easy tools | javascript | after
3. inside add - jormomentum();
4. close - done!

additionally you can pass 2 parameters - jormomentum(speed,easing) - exmp: jormomentum(2000,'easeOutBack')
(recommended: use default setting)

crunch crunch crunch [pacman] ding - "congratulations you unlocked a hidden egg" -

.

NOTE: this function is not official released and may be changed/removed/etc in the future !

giula · Post by **giula** » Mon Jan 16, 2017 4:13 pm

Done! Simple and easy! You're a magician! I think one nice scrolling like this much values the parallax effect. Many thanks

jordan · Post by **jordan** » Tue Jan 17, 2017 10:12 pm

giula wrote:Done! Simple and easy! You're a magician! I think one nice scrolling like this much values the parallax effect. Many thanks

goOd it works!:)
yup, exactly why I wrote it, without it you might as well not parallax:/

pajadt · Post by **pajadt** » Sun Jan 22, 2017 2:37 pm

Hi Jordan
I rebuild web site from verion 10 to version 11,
and i used your great extension jor_gridRip 1.0, and work perfect, but where is problem,
when open website first time he show grid which i use, in extesion, which disappears after a half-second, maybe 1 sec, but he visible when open website first time, second time is all OK. Is any way or idea how to solve this. If not, no problem but it be much nicer when open web, specailly if have contrast in color as i have in this web / black - white /.
here is web
http://boutiquedellafotografia.it/chi_sono.html

jordan · Post by **jordan** » Mon Jan 23, 2017 9:14 am

pajadt wrote:Hi Jordan
I rebuild web site from verion 10 to version 11,
and i used your great extension jor_gridRip 1.0, and work perfect, but where is problem,
when open website first time he show grid which i use, in extesion, which disappears after a half-second, maybe 1 sec, but he visible when open website first time, second time is all OK. Is any way or idea how to solve this. If not, no problem but it be much nicer when open web, specailly if have contrast in color as i have in this web / black - white /.
here is web
http://boutiquedellafotografia.it/chi_sono.html

hi pajadt,

I can't see a 0.5-1s delay on your site for jor_gridRip to set in, that would be very long ?

some browsers may display a blink (0.1s?-a millisecond) before the script sets in, yes - (varies by browser)
it also varies on whether you have enabled - Move Javascript to the end of the page - (I see you have enabled)
this function is also the reason I can not create a solid fix for that
if script is placed in the <HEAD> it executes before page render - (fix is possible)
if script is placed in the <BODY/end> it executes after page render - (fix is not possible)

so an all in all fix I can not give, just a - disable - Move Javascript to the end of the page

- would be great if WB would permit script to be placed at the head or bottom manual:)

pajadt · Post by **pajadt** » Thu Jan 26, 2017 12:52 pm

Thank u Friend

crispy68 · Post by **crispy68** » Wed Mar 29, 2017 11:59 pm

Hi Jordan,

I downloaded your extension and loaded the sample provide but when I try to preview, nothing is working. The hidden panels are not hidden. I can't figure out why its not working. I've tried changing settings but nothing seems to work.

This is how it looks:

Any ideas?

crispy68 · Post by **crispy68** » Thu Mar 30, 2017 12:25 am

UPDATE:

I happened to go back thru all the posts and found a small post about having a .js folder set up and to remove it. When I did this, it is now working.

I really like having a .js folder. Is there any workaround for this?

jordan · Post by **jordan** » Fri Mar 31, 2017 3:25 pm

crispy68 wrote: ↑Thu Mar 30, 2017 12:25 am I really like having a .js folder. Is there any workaround for this?

hi crispy68,

not a clean workaround, no
- you can do it manual by copy/paste the jor_gridRip folder into your .js folder - (important: copy don't move)
- or automatic by using WB File Publisher to do that for you - (important: File Publisher must be last to publish - ie. create a last page)
you can try these options to see if that fits your needs, other then that, nope nothing I can do:\

crispy68 · Post by **crispy68** » Sat Apr 01, 2017 11:58 pm

Jordan,

Copying it into the .js folder worked perfect.

The extension is awesome.

I do have one additional question. I'm currently have image links for larger layouts set up to open the layout grids and it works perfect. However, when the site gets to a certain point, I switch to using the panel menu for mobile. What I would like to do is have the text link within the panel menu trigger the grids just like the image links do.

I see there are 2 triggers. I used trigger 1 for the image links (ex: trigger1). I gave a different id for trigger 2 (ex: trigger2) within the extension. Since the panel menu creates links using <ul> I tried manually adding the id to the <li> in the code but nothing is happening. If I assign anything else on the page this unique id seems to work.

For example, if the panel menu code looks like this, I simply added the id:

<ul class="sub-menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li id="trigger2"><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>

Any thoughts on how to get the text link in the panel menu to fire?

crispy68 · Post by **crispy68** » Sun Apr 02, 2017 2:30 am

UPDATE:

In messing with it, I found out you need to add the 'wb_' to the id to make it work.

So the ID would be: wb_trigger2

Hey Jordan, I noticed that Trigger 2 toggle can be disabled. How exactly would I accomplish this? I read the instructions but still a bit confused. Does this make it act just like Trigger1 with toggle set to false?

jordan · Post by **jordan** » Sun Apr 02, 2017 1:12 pm

crispy68 wrote: ↑Sun Apr 02, 2017 2:30 am UPDATE:

In messing with it, I found out you need to add the 'wb_' to the id to make it work.

So the ID would be: wb_trigger2

Hey Jordan, I noticed that Trigger 2 toggle can be disabled. How exactly would I accomplish this? I read the instructions but still a bit confused. Does this make it act just like Trigger1 with toggle set to false?

hi crispy68,

normally you want to use trigger1 to open and trigger2 to close, that's how I designed it
so, each trigger for a specific task ...

what you want to do instead is trigger multiple links by the "same" trigger
you can do that by using the trigger input as a selector input (by design it will auto switch)
- input trigger1 like this ---- #wb_myFirstTrigger, #wb_mySecondTrigger
now trigger1 will execute on both triggers

---
as far as disabling trigger2 toggle goes, yes it can be disabled
but that is more used in an advanced callback kind of situation
they above is more suited for what you want I think

crispy68 · Post by **crispy68** » Sun Apr 02, 2017 4:15 pm

What you said I believe is correct.

- input trigger1 like this ---- #wb_myFirstTrigger, #wb_mySecondTrigger
now trigger1 will execute on both triggers

Sorry for the stupidity, but exactly where do I put this? Am I putting this in the extension somewhere and, if so, where exactly?

I tried this but it didn't work.

EntreeBtn is the id of an image to open the grid. I want EntreeBtn2 to be the id associated with the <li> in the panel menu to open the grid as well. Setting EntreeBtn2 as trigger 2 in your extension does work but it allows for the grid to be closed as well (toggled) which I don't want. By your explanation above, I understand why it works this way. So yes, I want to have 2 different links be able to open the same grid.

UPDATE: after messing with it for a while and re-reading what you said, I have figured it out. Using my example, I would type on trigger1 the following: #wb_EntreesBtn,#wb_EntreeBtn2

and once I added the 2nd id to the <li> lines of the panel menu, it is now working.

Thanks Jordan for your help and an excellent extension!

GrahamW · Post by **GrahamW** » Mon Oct 02, 2017 2:45 am

hI,

I use WWB12 and I have notices with this script google chrome gives a warning saying this. You only see the warning when uploaded not on preview of site.

You are trying to load scripts from unauthenticated sources

Graham

jordan · Post by **jordan** » Mon Oct 02, 2017 1:59 pm

GrahamW wrote: ↑Mon Oct 02, 2017 2:45 am hI,

I use WWB12 and I have notices with this script google chrome gives a warning saying this. You only see the warning when uploaded not on preview of site.

You are trying to load scripts from unauthenticated sources

Graham

hello GrahamW,

I do not see such message when using jor_gridRip
there is nothing unsafe about the script, I wrote it myself and use it myself, it does not load or use any other (external) script
?
- does this happen for you when you try the - jor_gridRip_easystart project - online ?
- can you post a link on which this occurs for you and maybe a screenshot with the message ?

GrahamW · Post by **GrahamW** » Tue Oct 03, 2017 1:36 am

Hi Jordan,

thanks for getting back to me.

open google chrome then view this page

https://www.grahamscomputers.net/testin ... tanks.html

look in the very top right hand corner near the bookmark star you will see it. Your gridrip script is the only one on this page and you can see it when you go to the tank quote section of the page.

If I remove the script from the page the error goes away

Graham

crispy68 · Post by **crispy68** » Tue Oct 03, 2017 2:13 am

This is what I see on my chrome for your site after I load the script:

I've used GridRip on a site here:

http://www.losreyesmarietta.com/menu.html

and I don't have that issue popping up on my chrome like your site.

since your site is using https: have you asked your host as to why this is coming up? I would think if it was the script itself, then I would see it on my site as well.

Per the Google notes it says:

You'll see a warning if the content you're trying to see is dangerous or deceptive. These sites are often called "phishing" or "malware" sites.
Phishing and malware detection is turned on by default. When it's turned on, you might see the following messages. If you see one of these messages, we recommend that you don't visit the site.

----This page is trying to load scripts from unauthenticated sources: The site you're visiting is not secure.

Looks like they give you an option to request a review of your site if it is being marked as dangerous.

jordan · Post by **jordan** » Tue Oct 03, 2017 12:09 pm

GrahamW wrote: ↑Tue Oct 03, 2017 1:36 am Hi Jordan,

thanks for getting back to me.

open google chrome then view this page

https://www.grahamscomputers.net/testin ... tanks.html

look in the very top right hand corner near the bookmark star you will see it. Your gridrip script is the only one on this page and you can see it when you go to the tank quote section of the page.

If I remove the script from the page the error goes away

Graham

hi GrahamW,

jor_gridRip is not the only script on your page
all the mixed content blocking that I can see on your site is from - fonts.googleapis.com
can you post a link with my - jor_gridRip_easystart project (found in my download) - online - to see if this occurs with just jor_gridRip ?

#crispy68 - thanx for your input:)