blog documentation FAQ followers forum marketplace services youtube

Two Questions....

The Jamroom Network » Forum » Using Jamroom » Page » Two Questions....
Dazed
Dazed
@dazed
11 years ago
1,022 posts
1. How do I see the list of available icons that are used for delete (trash can), update (sprocket) in ProJam? I am guessing there are more somewhere.

2. I was using a previous thread - https://www.jamroom.net/the-jamroom-network/forum/using-jamroom/1118/popup-modal and I am not able to get this popup modal working on an audio template. Any suggestions?
updated by @dazed: 03/01/14 11:20:09AM
michael
@michael
11 years ago
7,772 posts
1. right click on one and choose to view background image. eg:
https://www.jamroom.net/data/media/0/0/jrForest_sprite_30.png

Then look for the file name in the css file to find the mapping of .css-class-name to the image location.

2. no idea without looking at it or more information.
Dazed
Dazed
@dazed
11 years ago
1,022 posts
Thanks Michael. Brian mentioned that the js as already in place and we only needed the code. I was trying your modal example (from the thread) with no luck. What is a basic example of a modal that will pop from an icon on a media template?

Thanks
brian
@brian
11 years ago
10,148 posts
The JR Core has a full sprite creation system - all the images that are available for sprites are located at:

jrCore/img/icons_black
jrCore/img/icons_white

Just replace those with what you want (or add more). Then, reset caches and make sure and check the "delete icon cache" - the sprite background will be regenerated a long with the CSS.

Note that right now you'll need to redo this when you upgrade - I do have plans to have a sprite icon "editor" that will save your changes between updates, but it's not here yet.

You can find more about using the modal window here:

http://www.ericmmartin.com/projects/simplemodal/

as that is the modal script JR uses.

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
updated by @brian: 01/24/14 08:32:49AM
SteveX
SteveX
@ultrajam
11 years ago
2,584 posts
See a very simple modal example here:
https://www.jamroom.net/ultrajam/documentation/code/1120/how-to-use-a-modal-in-a-template


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
Dazed
Dazed
@dazed
11 years ago
1,022 posts
Thanks Guys. I am adding this to the item_list.tpl in playlist module. Brian you mentioned in the other post that the js is already added and I see that in the core. With that in mind, I was looking at the demos and found one I like. If I just add the below in, the page goes white and I lose most of the page. I am guessing I need the calls back to the js files? I thought those would already be included? In the demos they are linking back to the modal.js, jquery.js and basic.js. What do I need from a jr5 perspective?

// Change min height and width
$("#sample").modal({
	minHeight:400,
	minWidth: 600
});
michael
@michael
11 years ago
7,772 posts
That works. I just tried it here from firebug and you dont need to add anything to the page to make it work. just that.

Here is a screenshot of it pulling steves post from above into a modal on this page here.
(screenshot)
updated by @michael: 01/24/14 08:58:11PM
Dazed
Dazed
@dazed
11 years ago
1,022 posts
ok what are you guys doing differently?

I added the below to my item_template.tpl
<a onclick="myModule_modal();" title="Open Modal">Open Modal</a>
 
<div id="myModal" class="search_box" style="display:none;">
    <div style="float:right;">
        <input type="button" class="simplemodal-close form_button" value="x">
    </div>
    <span class="title">Modal Title</span><br><br>
 
    HERE IS THE MODAL CONTENT
 
    <div class="clear"></div>
</div>

That put the link in but it does not open. Brian mentioned in another post all of the js code is already in JR. So then I added the below to the item_list.tpl and I copied the ks code into that modules js dir. Still no pop!


<script type='text/javascript' src='../js/modal.js'></script>

updated by @dazed: 01/25/14 08:42:31AM
brian
@brian
11 years ago
10,148 posts
What is the contents of the myModule_modal() JS function?

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Dazed
Dazed
@dazed
11 years ago
1,022 posts
ok it appears it does not like the relative path. An absolute path is working.
Dazed
Dazed
@dazed
11 years ago
1,022 posts
sorry Brian just saw your post. It is working. How do I do relative paths in modules?
updated by @dazed: 01/25/14 08:49:47AM
brian
@brian
11 years ago
10,148 posts
Dazed:
sorry Brian just saw your post. It is working. How do I do relative paths in modules?

I'm not sure what you mean - can you clarify?

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Dazed
Dazed
@dazed
11 years ago
1,022 posts
Right now my path is like jamroom_url/module/module_name_release/js/modal.js

I should be able to do ../js/modal.js ??
brian
@brian
11 years ago
10,148 posts
Are you talking about from a template? From a module view? From a JavaScript file? It depends where you need the path.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Dazed
Dazed
@dazed
11 years ago
1,022 posts
Brian it is on a template item_list.tpl in playlist module. I added the below header to that page because it was the only way I could get the modal to work. When updates happen to the module, if this was a relative path it will be just a cut and paste to the new tpl vs having to do a version change in the path.

<head>
<script type='text/javascript' src='{$jamroom_url}/modules/jrPlaylist-release-1.0.5/js/modal.js'></script>
</head>

updated by @dazed: 01/25/14 06:13:56PM
brian
@brian
11 years ago
10,148 posts
The modal script is part of the Jamroom Core - you will never need to source it like this.

And you never want to to link to the release dir of the module - you should always link directly to the module dir - i.e.

src='{$jamroom_url}/modules/jrPlaylist/js/modal.js'

as that never changes.

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
updated by @brian: 01/26/14 08:44:01AM
Dazed
Dazed
@dazed
11 years ago
1,022 posts
Thanks Brian. I thought it would work without the js call but it does not. If you have any suggestions I am all ears.
brian
@brian
11 years ago
10,148 posts
Dazed:
Thanks Brian. I thought it would work without the js call but it does not. If you have any suggestions I am all ears.

We use the modal window all over the place and never have to add it in a second time - are you trying to call it from a window that is already loaded in a modal window or maybe an iframe?


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Dazed
Dazed
@dazed
11 years ago
1,022 posts
It is being called from the item_list.tpl in the Playlist module. It could just be the example that Steve posted that I used. But even when I went to the simple modal site, I still was not having any luck. You have my login, if you want to take a look at it feel free.
brian
@brian
11 years ago
10,148 posts
Can you shoot me an email or PN with the URL you are looking at?

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net