Hey, I’m brand new and I have been having this problem and it looks so stupid (many a squished picture). Where do I put this javascript code??? I would like to set a single dimension such as width and have any images in the repeater proportional to that one dimension.
Thanks.
openPage in current Window > external Url
The field where the URL can be entered is the place where to place the javascript:void() stuff.
THAT WORKED GREAT!
at first I was like, oh no, ALL the images are now 130px wide! but then I used the other one and used firebug to make sure the data-label was correct. I can’t wait to show my co-workers!
THANK YOU!!
Your welcome.
I’m even more of a newbie than Carolyn. Do I add the script to the OnItemLoad method?
I think if the javascript is being applied to the repeater as a whole, you would be better off adding it to the OnLoad of the repeater rather than the OnItemLoad - the latter could get you caught up in loops that you don’t really want.
I got it to work as explained, here it is javascript:void($(’[data-label=Imgrepeater] img’).css({height:‘auto’,width:‘auto’}))
Since my images are different in sizes, I just need to have them be placed in the middle. None of what I tried worked. Here is what I tried:
javascript:void($(’[data-label=Imgrepeater] img’).css({height:‘auto’,width:‘auto’,vertical-align:‘middle’})) or
javascript:void($(’[data-label=Imgrepeater] img’).css({height:‘auto’,width:‘auto’,vertical-align:‘center’})) or
javascript:void($(’[data-label=Imgrepeater] img’).css({height:‘auto’,width:‘auto’,vertical-align:‘auto’})) or
javascript:void($(’[data-label=Imgrepeater] img’).css({height:‘auto’,width:‘auto’,valign:‘middle’})) or
javascript:void($(’[data-label=Imgrepeater] img’).css({height:‘auto’,width:‘auto’,align:‘middle’})) or
javascript:void($(’[data-label=Imgrepeater] img’).css({height:‘auto’,width:‘auto’,align:‘center’})) or
javascript:void($(’[data-label=Imgrepeater] img’).css({height:‘auto’,width:‘auto’,horizontal-align:‘middle’})) or
javascript:void($(’[data-label=Imgrepeater] img’).css({height:‘auto’,width:‘auto’,horizontal-align:‘center’})) or
javascript:void($(’[data-label=Imgrepeater] img’).css({height:‘auto’,width:‘auto’,horizontal-align:‘auto’})) or
javascript:void($(’[data-label=Imgrepeater] img’).css({height:‘auto’,width:‘auto’,halign:‘middle’})) or
it is a little bit tricky… in the image class the position is defined as “relative, top:0, left:0”
the easiest way is to remove the class:
.removeAttr(‘class’)
to center horizontally you can use the padding of the image:
.css(‘padding-left’:‘auto’,‘padding-right’:‘auto’)
target is the image $(’[data-label=imagename] img’)
to center vertically you can use flexbox:
css({display:‘flex’,‘align-items’:‘center’})
target is the wrapping div $(’[data-label=imagename]’)
if you are using flexbox you can do the horizontal alignment there too:
css({display:‘flex’,‘align-items’:‘center’,‘justify-content’:‘center’})
finally you have the following:
javascript:void($(’[data-label=Imgrepeater]’).css({display:‘flex’,‘align-items’:‘center’,‘justify-content’:‘center’}))
javascript:void($(’[data-label=Imgrepeater] img’).css({height:‘auto’,width:‘auto’}).removeAttr(‘class’))
I tried the following:
1- javascript:void($(’[data-label=Imgrepeater] img’).css({height:‘auto’,width:‘auto’}).removeAttr (‘class’))
Result:Works, Horizontal alignment is recognized
2- javascript:void($(’[data-label=Imgrepeater]’).css({display:‘flex’,‘align-items’:‘center’,‘justify-content’:‘center’}))
Result: Image height and width is lost (all one fized size). Vertical alignemt i snot recognized. Also, it displayed the follwoing text on top of the images:
<!-- Unnamed (Image) --> <div id=“u1” class=“ax_default image u1”> <img id=“u1_img” class=“img u1_img” src=“images/new_page_1/u1.png”/> <!-- Unnamed () --> <div id=“u2” class=“u2 text” style=“display: none; visibility: hidden”> <p><span></span></p> </div> </div>
i can’t reproduce your bug.
if you want me to investigate you should tell me the axure version, operating system and browser.
you can also try this. please ensure there are no unwanted blanks in the code
javascript:
$('[data-label=Imgrepeater] img').css({height:'auto',width:'auto'});$('[data-label=Imgrepeater] img').removeAttr('class');
$('[data-label=Imgrepeater]').css({display:'flex','align-items':'center','justify-content':'center'});
throw new Error();
Axure version 8.0.0.3297
Windows 7 Enterprise
Chrome browser
I just tried:
javascript:$(’[data-label=Imgrepeater] img’).css({height:‘auto’,width:‘auto’});$(’[data-label=Imgrepeater] img’).removeAttr(‘class’);$(’[data-label=Imgrepeater]’).css({display:‘flex’,‘align-items’:‘center’,‘justify-content’:‘center’});throw new Error();
Result It recognized the image height and width, not the alignment (alignment is still at 0,0).
Also, it displayed the following text on the back of the images:
<!-- Unnamed (Image) --> <div id=“u1” class=“ax_default image u1”> <img id=“u1_img” class=“img u1_img” src=“images/new_page_1/u1.png”/> <!-- Unnamed () --> <div id=“u2” class=“u2 text” style=“display: none; visibility: hidden”> <p><span></span></p> </div> </div>
the axure version is similar to mine.
i tested ff, chrome and safari on mac os and
edge, chrome on windows10 and
internet explorer, chrome on windows8.
i tested preview, html-generation and axshare.
all my test succeded.
my last try is to escape the string:
javascript:%24%28%27%5Bdata-label%3DImgrepeater%5D%20img%27%29.css%28%7Bheight%3A%27auto%27%2Cwidth%3A%27auto%27%7D%29%3B%24%28%27%5Bdata-label%3DImgrepeater%5D%20img%27%29.removeAttr%28%27class%27%29%3B%24%28%27%5Bdata-label%3DImgrepeater%5D%27%29.css%28%7Bdisplay%3A%27flex%27%2C%27align-items%27%3A%27center%27%2C%27justify-content%27%3A%27center%27%7D%29%3Bthrow%20new%20Error%28%29%3B
Untitled.rp (73.2 KB)
I tried what you suggested, in ff, Chrome and Canary Chrome and I still get the same results in all browsers as explained in my last post. One thing I haven’t tried is, to restart my computer, but I can’t afford that at the moment. I will do it some time next week and if I get different results then I’ll let you know.
Thank you:)
I just tried everything above with FF, Chrome and Chrome Canary with a fresh system boot. I still get the same results as mentioned above. At this time I have to settle with horizontal alignment and I might run into a solution in the future.
Thank you:)
Ok, I’m back.
As recommended in the thread above, under the repeater onItemLoad , I’m loading the following javascript
javascript:void($(’[data-label=Imgrepeater] img’).css({height:‘auto’,width:‘auto’}).removeAttr (‘class’))
and this works perfect.
The problem occurs when I introduce another repeater in the same page, regardless of its location, whether it is in the same group, same dynamic panel or not. The first repeater’s images lose their original size and get set to their repeater’s item default size.
I loaded the same javascript code for the second repeater (TargetList) under its onItemLoad
javascript:void($(’[data-label=TargetList] img’).css({height:‘auto’,width:‘auto’}).removeAttr (‘class’))
I tried to place the javascript under onPageLoad, but I got the same results.
the css injections scope is the complete axure page.
there is no difference where you inject it. in a panel, in the pageOnLoad, in the repeater on load or in an onClick event.
all html items with the same data-label will be updated. don’t target the repeater name but the image name. if the images in multiple repeater have all the same name the injection will influence all of them.
Ok, I got the part where the css injection scope is the whole page, so I’m injecting it under OnPageLoad
Now, naming all images with the same name so they can all have the same data-label is confusing to me. If I have two repeaters with five unique images in each. Stored inside each repeater is the names of these images. These names are unique, because they point to different image file on the hard drive.
If you mean the repeater’s Item, then I named both Items the same in both repeaters, but I still get one repeater’s images scaled to the correct size, while the other are scaled to the Item’s default setting.
i am not sure what you are talking about.
the repeater is a “template” that is repeatet as many times as the repeater has data.
in this “template” you have a “placeholder” for an image.
in the repeater-data you have an image (data-field > rightclick > reference image).
in the onItemLoad event you set the image (placeholder-image) by value (item.data).
this is the basic proceed to have images in the repater. if you name the image-placeholder similar in different repeaters you should not be confused. the name does not do anything except giving you as the user an orientation. all functional aspects are id driven. in fact inside the repeater repeated widgets share a part of the id (u_0-1, u_0-2… ).
in your case we take advantage of the fact that the widget name is added to the html node as a data-label attribute. in css as well as in jquery you can target one single object (if you have a unique identificator) or all sharing the same selector. a selector might be the data-label or the img tag, but also all html tags, all used ids (#) all used classes (.), other attributes (’[attibute=value]’) and the pseudo classes (:hover, :visited…) and of course something like that: :nth-child(even), :first-of-type.
Never mind what I said earlier. I got what you said and your suggestion works perfect. But once I use “Update Rows”, “Add Rows” or “Delete Rows” (I haven’t tried other repeaters actions to see if I get the same result), then the image’s size gets set to the default size of the repeater’s Item (widget).
Anyways, I solved the problem by including the image’s size in the repeaters dataset, then using the Set Size action.
Thank you