www.wysiwygwebbuilder.com

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

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)

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

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.

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:)

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

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 !:)

haha!

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

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!:)

THANKS JORDAN!!!!!

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

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

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

- potter, - jordan potter . . - enjoy aml02873!:)

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

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

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

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

Thanks for this again Jordan. Light be with you.

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.

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

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.

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:)

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.

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 ?

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.

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

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)

Thanks!

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

Great jordan

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 . .

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

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

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 !

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

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:/

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

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:)

Thank u Friend

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?

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?

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:\

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?

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?

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

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!

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

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 ?

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

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.

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:)