Hi Ignacio.
Just wanted to let you know (and anyone else looking for this functionality) that your code works like a dream! It was my initial implementation of it that was wrong! Many many thanks for it!
Hi Ignacio.
Just wanted to let you know (and anyone else looking for this functionality) that your code works like a dream! It was my initial implementation of it that was wrong! Many many thanks for it!
I am using Adapt-blinds component and the Instruction does not convert to Mobile Instruction. I was wondering if you were able to get the mobile instruction within the component or is it on the article? I would like the instruction to be under my title and body text where it normally goes.
Hi all,
Just resurrecting this question. Ignacio's solution worked great, but Adapt has moved on and there's no longer a vanilla.js file! Please could someone suggest a new way I could achieve the same effect?
I need "mobileInstruction"
for articles, whereby you have the option for the article instruction text to change at medium & small device sizes (similar to how it works in a hotgraphic).
Many thanks
Hi Chris, could you please test the adapt-mobileInstruction extension?
You can see it here
Hi Ignacio. This looks great. Having difficulty implementing it though. Where do I place the JSON?! I put it within the article, and it replaced the whole article with the instruction only!
Install the mobile instruction extension in your project.
In articles.json{
"_id": "a-05",
"_parentId": "co-05",
"_type": "article",
"_classes": "",
"title": "a-05",
"displayTitle": "",
"body": "",
"instruction": "Article instruction text.",
"_mobileInstruction": {
"_isEnabled": true,
"instruction": "Mobile article instruction text",
"_selector": ".article__instruction-inner"
}
}
Still not working for me Ignacio. Framework 5.18.6. I'll try it in a new course when I get a minute (!).
Great work Ignacio! Works perfectly.
This is probably on your list, but one thing I would suggest is to have the screen size where the swap occurs (currently 'small') configurable in the articles.json part. I opened the JS and changed const sizedInstruction = (device.screenSize === 'small'... etc
to 'medium'
(which I needed because my tabbed abs collapses @device-width-medium, so the 'Click the tabs...' instruction needs to change) but for someone petrified of code (even more than me!) it might help!
Works great though! Many thanks.