This site uses cookies and similar technologies.

If you don't change browser settings, you agree to it.

I understand
133 Posts
pretobrazza
6 years ago
Topic
Hi all,

After successfully updating to Seblod 3.3.0, I had to re-adapt my change to: templates > seb_table > index.php where I committed a 'little sin' by adding something to the original script. I did this to be able to callout a modal window WITH content out of a Seblod list with jquery-colorbox ;) Thus I completely avoided having to use external modal plugins (from Yoo, nonumbermodals, etc ...) that needlessly interfere and clash with jquery in the site.

Here's an example where I call a modal popup window WITH content out of a Seblod list (blue links in the list)

This is how I did it:

1) In admin > list&Search > List

There I set the field I want lo link in option #2 to:
VIEW +: ... 'Content' = Field .... 'Field name' = art_id ..... 'Template' = component
HTML +:
{source 0}
<a class='test' href='$cck->getLink('tl_datum');'>$cck->getValue('tl_auteur') </a>
{/source}
(!! your MUST have Nonumber Sourcerer running !! )

2) In templates > seb_table > index.php (via filezilla) just after line 29 and before '// -- Render' I added:
// een speciaaltje voor de tijdslijn
$doc->addStyleSheet( 'media/cck/scripts/jquery-colorbox/styles/style0/colorbox.css' );
$doc->addScript("media/cck/scripts/jquery-colorbox/js/jquery.colorbox-min.js");
$doc->addCustomTag( '      
	<script type="text/javascript">
		      jQuery(document).ready(function(){
		      jQuery("a.test").colorbox({iframe:false, initialWidth:"75%", innerWidth:"75%", innerHeight:365, scrolling:true });
		});
	</script>	
' );

In other words, whenever the class='test' then I force the content to open (href) in a colorbox via the ("a.test").colorbox statement.

As my knowledge of programming is dangerously low, God knows how I got it right and therefore I wish to thank my many friends on this forum for their advice which pointed me in the right direction to 'read between the lines' and be oh so adventurous .... ;)

Now I throw the glove to the programmers to pick up the challenge and find a better formula than I did because I'd love to implement their solution as a permanent feature!

Kind regards,
Bernard

Get a VIP membership
179 Posts
Codigo Aberto
6 years ago
14
Level 1
Why don´t use bootstrap or uikit markup ?
133 Posts
pretobrazza
6 years ago
13
Level 2
Hi Marcio,

That's exactly where I lack knowledge.
If I understand well what you're pointing at, I got around the fixed size with statements like eg. --initialWidth:"75%"-- etc. In this manner the modal window follows the responsive template. Obviously, when working this way, I carry around some extra code in all seb_table's around the site ..

I am rather wondering if on could have a kind of field 42 or so in which one could call the settings as I did in seb_table >index.php and also predetermine width, scrollbar, style etc. You see the picture?

Bernard
179 Posts
Codigo Aberto
6 years ago
12
Level 3
just add a class "modal" to the link in markup option.

Next in template js file use:

jQuery('a.modal').modal();
The functions: http://getbootstrap.com/javascript/#modals
133 Posts
pretobrazza
6 years ago
11
Level 4
Hi Marcio,

I just did the test (step by step) in my Wamp server but as soon as I just add a class "modal" to the link in markup option then, when I refresh the site, the first element (field with markup) in the list gets thrown into a modal window.
This means that the class must be a unique name as 'modal' as a class is already being used elsewhere.

After that I went on testing a bit with the second part (using modal or test as a class) in jQuery('a.modal').modal(); but I got nowhere (endless scripts or blank screens); maybe for sure this is caused by the fact that I don't know how to code properly.

Did you try it yourself already? What is the full snippet? Where did you put it?

Kind regards,
Bernard
179 Posts
Codigo Aberto
6 years ago
10
Level 5
in your Joomla template before the </body add:

<div id="example" style="display: none; "> <div> <a data-dismiss="modal">Close</a> </div> <div> </div></div>



In link rel options (link + markup config) add:
" data-toggle="modal" data-toggle="modal" data-target="#example


The additional " and missing " is to break rel tag :)
Don´t need any class or javascript, bootstrap will get href.

You can control modal width/height by css #example
133 Posts
pretobrazza
6 years ago
9
Level 6
I guess I'm getting tired - in the morning I'll try again - What do you mean by #example, Marcio? By the way, when posting to get some decent code into the post, I press the </> and put the code in between a <pre> and a </pre> tag. Othewise it's nightmarich to get the code accross.
Till just now,
Bernard
133 Posts
pretobrazza
6 years ago
8
Level 7
No, I tried this morning again and I'm not succeeding with a different method - unfortunately ..
179 Posts
Codigo Aberto
6 years ago
7
Level 8
Where i can see it ? I have tested here locally width sucess.
133 Posts
pretobrazza
6 years ago
6
Level 9
I'm testing it on the Wamp server first - Would it be too much asked to echo in a 1° 2° .. exactly what you put where as I cannot see the trees from the wood anymore. Maybe, if it is clear enough it might help many others too .. :)
Thank you!
Bernard
179 Posts
Codigo Aberto
6 years ago
5
Level 10
In your template yoo_master add before the tag </body>:

<div id="mymodal" class="modal hide fade in" style="display: none; ">
            <div class="modal-header">
                <a class="close btn" data-dismiss="modal">Close</a>
            </div>
            <div class="modal-body">            
            </div>
</div>

Remove link class´s In link rel options field (link + markup config) add:
" data-toggle="modal" data-toggle="modal" data-target="#mymodal

In list the link will look like:
-300000 - ca  -8000


133 Posts
pretobrazza
6 years ago
4
Level 11

Hello Marcio,

This works very well and much faster than my solution!! This shows one of the many hidden possibilities of Seblod! Thank you for opening this door of knowledge for us!
Here again is the temporary link again to the site under construction. (Don't worry about the title not appearing in the modal window as I set the 'show_title' to '0')

Here I have 3 remaining remarks/questions:
1) When clicking on the overlay to close the modal window after viewing more than one link in the page, the overlays keep on layering themselves (they go darker and darker), and one has to click several times on the page to eliminate the overlays. Is there a statement missing?
2) Where and how do I write the css for #mymodal? Say that I want to set the width to 80% ..
3) ... is there a way not to let page disappear just in that window?

Kind regards,
Bernard

179 Posts
Codigo Aberto
6 years ago
3
Level 12
1 - disable other modals plugins like colorbox
2 - in yoo_master custom css file
3 - override this content type item position to not set pagination if tmpl = component
133 Posts
pretobrazza
6 years ago
2
Level 13
Hi Marcio,

Here are my findings on the different points:

1) In my original post, I mentioned that I want to avoid clashes with other modal plugins and that's why I decided to stick with colorbox as Seblod seems to use colorbox for images (unless I'm mistaken).
2) I manage to set the css (#mymodal) and control the width by % - (proof: that's why the characters are red ;) right now). The bad news is that on a galaxy mini the modal window shows up on the top left beyond the screen.
3) The plugin does not give me this option in Joomla and I don't master php to override this content type item position to not set pagination if tmpl = component

Q/ Can one use the same technique in 'Link' and use colorbox instead of 'modal'?

Bernard
179 Posts
Codigo Aberto
6 years ago
1
Level 14
Plugin that solve this type of bugs / conflicts:
A non conflit modal plugin: http://www.codigoaberto.pt/extensions/plg_system_modaljscodigoaberto.zip
Just add a class "imodal" to any link and it open in lightbox, it work anywhere in Joomla plataform.
133 Posts
pretobrazza
6 years ago
0
Level 15
Hi all,

Marcio (www.codigoaberto.pt) did a fantastic job developing this plugin as described above. For 2 nights I was his "live rat" continually testing the development of his plugin on a live (testing) site while communicating through Skype. - Till he got it 100% right -

All my compliments to him and the company he works at Codigo Aberto your commitment goes beyond words!!

Here is the temporary link again the site under construction where you can see a modal window popping out of the links in a list. It work in other environments too (androïd, ipad, ..)

Thank you Marcio!.
107 Posts
terveg
6 years ago
2
Level 1
maestro!

is it suitable for form-in-form in modal windows? i'd like to have an opportunitty using button free (or just button) to open a form in form.
For example, dynamic cascade with country/region/city as seblod's content type . If user can't find a city, he has button free, if he clicks - a modal window popups with another seblod's form, where user can add own option.

At the moment, I don't know how to do it in Seblod.
Basically, should be a way to use form-in form in modals (ajax+jquery, I guess)

Also i'm looking for a solution for kinda module in article view, where user can click and relate other his articles to current article.
Foe example create an event for several (2,3,...) articles like genealogical tree.


179 Posts
Codigo Aberto
6 years ago
1
Level 2
1 - create a form only and unpublish it.
2 - create the button and in output html write: < a href="/ index.php?option=com_cck &view=form &type=you_form_unpublished_name &tmpl=component" class="modal btn btn-primary" rel="{handler: 'iframe', size: {x: 800, y: 500}}" >*value*< /a>

107 Posts
terveg
6 years ago
0
Level 3
that's what i was looking for! really helpful! than you very much for the idea.

I've made this with button free (how's bad taht we don't have proper documentation)
136 Posts
Stef
6 years ago
3
Level 1

Hi Bernard,

I first tried your "Simple Modal Box" topic wich i could make works...

But from there, you send people here in your "March 2014" edit... I'm very intersting in this "without external plugin" solution, but i can't just make it work. I'm lost here, wich topic should I use ? Do you think u could make a "one two three" steps by steps tutorial (sorry my knowldege in coding seems far down from yours :-) I'm working with "Rockettheme" and not "Yootheme" template (seems a discovers warp 7 doesn't support IE8, wich i can't avoid)...

133 Posts
pretobrazza
6 years ago
2
Level 2

Hello Stef,

In all honesty, I think Codigo Aberto is the best person to answer you in a correct manner. Personally I went from Rockettheme to Warp 6 and then Warp 7. Experimenting with Warp 7 unfortunately didn't allow me for Rockettheme to be in the Joomla system (conflict) so I deleted Rockettheme and everything that came with it.

On the other hand, my (strictly) personal vision is that people should upgrade their browsers, be it for their personal safety and comfort. If not,  then change over to another browser.  Companies like Microsoft not installing (or should I type) enabling automatic updates like chrome, FF, or even Adobe (for their applications while trying to trap people into other things) etc goes beyond my common sense in this ever changing virtual world we're living in on  the flick-on of just about any screen.

Kind regards,

Bernard

(while awaiting Codigo Aberto for a reply to fulfill your quest)

136 Posts
Stef
6 years ago
1
Level 3

Hi Bernard, and thanks a lot for your answer... OK will wait for Aberto if he is still listinenig to this topic...

I indeed agree with what peaple (or MS ;) should do with their browser, but in my country (New Caledonia) IE8 is really not avoidable, so....

179 Posts
Codigo Aberto
6 years ago
0
Level 4

Warp7 support IE8 with fossil plugin to convert CSS3 vars.

You can use bootstrap modal markup too.

Link  to see it live ?

11 Posts
cerise
5 years ago
0
Level 1

Hi Marcio,

I've used your plugin "plg_system_modaljscodigoaberto.zip" and it works perfectly. Thanks for it.

For me site I use two different templates assigned throught the menu "template style".

I've notice that when your plugin is activated, only the default template is showing (and SEF is active)

If the Plugin activated and Sef desactivited, then the other template is then showing.

Is there a way to fix this ?

Regards


Get a Book for SEBLOD