Pass a value to an HTML element? -...

User 3006919 Photo


Registered User
18 posts

I have an HTML element that calls a simple JavaScript (to display reviews from a third party).
The HTML includes width and height information, setting the size of the displayed element.
I want to be able to resize based on my breakpoints.
Is it possible to pass an attribute that I can use? I'm thinking being able to pass a variable at each breakpoint that can be used as the width value within the HTML code? Not sure on the syntax to 'read' the passed value (or even if this is possible...)

Any suggestions appreciated. Thanks in advance.
User 2699991 Photo


Registered User
3,656 posts
Online Now

not sure I understand what you are wanting
but I would say make the width & height of the HTML element what you desire at each breakpoint
or width =100% height= auto using the settings in SD not in the HTML element

or place the HTML element in a container set that container to the width/height/(maximum)you want at the breakpoints and have the HTML element set to width = auto/height = auto

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 3006919 Photo


Registered User
18 posts

Sorry - I didn't explain it very clearly.
I'm displaying a third party piece of code that shows reviews.
The code is:
<div id="fullwidth" align="center">
<script type="text/javascript" src="//www.xxx.co.uk/widgets.js?name=businesses.reviews2&featureId=xxx&width=550&height=450&showRankAward=1&showWriteReviewButton=1&noReviewsShown=5&reviewTextSize=medium&theme=grey&linkTo=feature_page" async></script>
</div>

This displays a review window - see here: www.kingsstationers.co.uk/review (the Best Of bit at the bottom)

The width (the primary thing I want to vary) is managed with the width 'attribute' in the HTML code.
Removing the width attribute just gives me a narrow (100px?) display.
Putting this in a container and managing the container size isn't working either. I think I need to specify the width in the code, but the HTML can't be changed editing at different breakpoints.

I'm trying to get the reviews narrower on mobiles, but wider on desktops.

Thanks for your input!
User 379556 Photo


Registered User
1,230 posts

Just musing -

1. Is tying to breakpoints absolutely necessary for what is wanted? Couldn't one just use vw units for the width, which automatically alters the width according to the width of the browser window?

2. If the matter must be tied to breakpoints, would it perhaps help to add to the code in the HTML element an event listener regarding the window width? I have in mind something like:
window.addEventListener('resize', newSize);
combined with a function newSize() which contains conditionals, e.g.
var w = window.innerWidth;
if(w > xxx && w < yyy) set the element width at zzzpx.

An example of item 2 above is in the .js file of https://www.coffeecup.com/forums/site-d … ents/5944/

Others will probably have neater ideas.

Frank
User 3006919 Photo


Registered User
18 posts

Thanks for your input Frank. Think I need to read that slowly a couple of times to digest!!
My issue is that the HTML code (as provided by a third party) directly controls the size of the element being placed.
Trying to control size using CSS on the container or HTML element is simply overridden by the 'hard code' values.
What I was hoping for was to be able to pass a variable to the HTML content - I just don't know how/if this is possible...

Your contribution is much appreciated though - thanks.
User 379556 Photo


Registered User
1,230 posts

My musings related to the script in the HTML element, i.e. changing the 550 and 450 to suitable numbers of vw units (musing 1), or to variables created in accordance with musing 2 and used in the script.

If, however, those script figures cannot be varied (i.e. replaced by vw units or variables), it's not clear to me how those pixel sizes could be changed.

Frank
User 2699991 Photo


Registered User
3,656 posts
Online Now

Try This

(replace the src xxxx with the real link of course)

A container set to (LOWEST BREAKPOINT FIRST)

width=auto min=10px (default) max=550px
height =auto min=0 (default) max=450px

the html element pace inside the container

the code

<iframe width="100%" height="100%" frameborder="0" style="border: medium none; overflow: hidden;" src="https://www.xxxxxxx/widgets/businesses.reviews2?featureId=5604db6227a7ad8413001738&amp;width=550&amp;height=450&amp;showRankAward=1&amp;showWriteReviewButton=1&amp;noReviewsShown=5&amp;reviewTextSize=medium&amp;theme=grey&amp;linkTo=feature_page" __idm_frm__="30"></iframe>

(replace the scrc XXXXXXX with the src from the third party)

I that doesn't work then you will best talk to the third party people & tell them they need to provide a responsive embed code especially nowadays in the world of MOBILE FIRST designs

I have done one as a test using the iframe code as above and as far as I can tell, looks ok at all widths, but obviously, doesn't display the reviews because the third party is blocking the link.

I can show a video demo showing at mobile/tablet/desktop (but obviously not with the reviews

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 3006919 Photo


Registered User
18 posts

Hi Wayan,

Many thanks for your suggestion. Looking very promising! Have literally copy/pasted your suggestion and width is fine. I don't have time right now to tweak things (height & spacing), but I think you might have this resolved!
Will look at it properly a little later, but feeling very confident!

Thanks again.
User 2699991 Photo


Registered User
3,656 posts
Online Now

Roger Cuthbert wrote:
Hi Wayan,

Many thanks for your suggestion. Looking very promising! Have literally copy/pasted your suggestion and width is fine. I don't have time right now to tweak things (height & spacing), but I think you might have this resolved!
Will look at it properly a little later, but feeling very confident!

Thanks again.

Fingers, toes legs, arms and eyes crossed

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 3006919 Photo


Registered User
18 posts

Working!
Thanks for your help Wayan - very much appreciated.
Off to find the next issue now...!!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.