I am building a portfolio to show work I have created. It includes some small projects from FreeCodeCamp that are built according to test specs. I would like to include the tests so that someone looking at the code can see the tests.
When you embed the cdn script in your index.html file in a react app hosted anywhere, they work fine (even though React doesn't want outside forces manipulating the DOM). This will install a hamburger menu that can be exploded and you can choose which tests you would like to run. Note that this hamburger is always displayed.
However, I don't want to always have this hamburger menu because some of what I want to display is how the page is styled. I am trying to wait and insert the script tag until a button is pressed.
I can successfully display and remove the hamburger menu if I hit the add then remove buttons in order, but I know that I am doing this wrong when it comes to React design. This is obvious by the fact that if you hit add to dom button 2 times in a row, then it won't be removed. Also, I can run the test suite the first time. But if remove the hamburger and add it back and try to run the tests, there are errors in the console.
My question is: how can you properly add/remove a cdn script element (which will automatically add a dom element (hamburger), in a proper "React" design? I am thinking that solution lies with useEffect, useRef, or useState, but I am to "green" in React and when I research I still can't design a solution that works.
I put the code in a sandbox. To recreate the problem, just click the show the hamburger button, then hide the hamburger button, then show again and try to run the tests. Or click show several times in a row.
Any tips on how to fix this would be appreciated. This problem way exceeds my little experience.
Link to Code Sandbox
So I figured this out myself. In React, To safely make an element loaded into the DOM via external CDN appear and disappear was as simple as CSS.
I just added the item to the DOM with the CDN script tag. Then I could change either display:none or visibility: hidden.
The trick was loading the CDN script in first, then hiding it.
I was encountering a problem because I was trying the faulty approach of adding the CDN script tag, and removing, and adding again.
Related
I want to move a external script to a section of my page, but i cant access to css attributes of the item.
It display as a iFrame, and as i read it is difficult to change the style if i don't have direct access to the build of the component.
I am using React-Helmet to import the script.
So, i want to ask. Is there a way to wrap this component into a div?, so i can move the div into the position i want.
This is my front (I want the play button to be in the menu above)
This is the code
So, the script display outside the div ("radio-player").
Here is the html structure
I only need to move the play button to the menu, if there is other way that works, happy to recieve.
Thanks
I did set the script on the index.html file on the react project, where you can wrap it into a div and changes its attributes with css from there without problem.
I have a React JS app where, on a specific pages, I show different job offers, one by one, tinder style. My client asked me to put one "widget" from an external website on the job offer. The widget is a "div" with an external script from another website. This script is a bunch of "document.write", not even a selector for the div... Small problem: the script isn't called, so the relevant code isn't added inside the div.
How can I make sure that a tag I dynamically add will execute it's code? It doesn't even seem to get loaded in the "Network" tab of the website. The with the script inside is down a bunch of React components.
Anyone has an idea on how I can make the script load even if it's dynamically added?
I'm developing a theme for an online store from scratch, I used underscores and Bootstrap and now I want insert a slider with the MetaSlider Plugin.
The problem is that I have no controls, and also the slider is not working, get stuck in the first image.
The curious thing is that in the admin page when I click on "save and previsualize" it works perfectly.
I inspected the code and I realized that the <ul> element that contains the controls is not there, so is not a css problem.
Check if there is no any conflict with another plugin. It may cause if there is another version of jQuery library that embedded in the page.
I've done as much as I can to try to figure out what is going on here to no avail.
I installed Algolia, as per the instructions, on my local development instance of a client website. After disabling Elasticsearch, I can inspect element and see that the algolia-searchbox div shows up properly. However, it does not work as it is supposed to. It seems to be using the magento search functionality even though that search is within the algolia searchbox.
I dug a little deeper. I found out that the topsearch was being rendered twice on the page due to the off-canvas menu. When I shrink my window down to the appropriate size for show-for-small-only to render, the search is ALSO in that section, but it actually works as the Algolia search is supposed to work.
<reference name="header">
<remove name="top.search"/>
<block type="algoliasearch/search_form" name="top.algoliasearch" as="topSearch"/>
<action method="setTemplate"><template>algoliasearch/topsearch.phtml</template></action>
</reference>
So the first question is: what is the best way to get this to work with responsive designs utilizing the off-canvas menu functionalities? The off-canvas menu, rendered second, ends up overriding what was done to the normal topsearch area due to it rendering twice and this is a huge problem
The only way I have been able to see the correct search bar on normal header so far is to put this in the algoliasearch.xml:
This completely gets rid of my header, but it actually displays the correct search bar. I know it isn't correct syntaxt, but when troubleshooting...
The second issue I am facing is that, even when I utilize the search bar that actually shows up (via the above header xml piece or by using the smaller browser size to render the off canvas menu search), the results page I end up on is the normal Magento results page. I can see activity in the Network panel when I am typing into the search bar, but as soon as I submit, it all disappears and stays blank.
Thanks for any help you can offer.
All of the changes made in my particular case were made in the app\design\frontend\base\default\template\algoliasearch\topsearch.phtml file
Around line 546, I replaces "search" with [id="search"]. This binds to both inputs instead of only binding to the most recently rendered input.
The following to additions were made (basically, adding $(document).ready(function () { right below the algoliaBundle.$(function($) { on line 536 and wrapping everything in that as well:
https://github.com/algolia/algoliasearch-magento/blob/master/design/frontend/template/topsearch.phtml#L536
https://github.com/algolia/algoliasearch-magento/blob/master/design/frontend/template/topsearch.phtml#L1735
Line 1284:
Changed: if ($(algoliaConfig.instant.selector).length !== 1) to
if ($(algoliaConfig.instant.selector).length < 1)
Changed instant selector from .main to .main-container
So, after many hours of trying to get this working (and being tempted to just give up and light myself on fire) I've decided the best thing to do is ask the mega minds that hang here on stackoverflow.
Now, here's what I've been trying to accomplish. I need to append/inject the rel attribute to the links in the Essential Grid plugin for WordPress. I've opened a ticket with ThemePunch (the plugin author) and their response was to copy (and edit accordingly) the snippet of code below which, if done correctly, would append the tags with the (in my case) rel="m_PageScroll2id". I've tried all sorts or selectors (classes, #'s, etc) and no matter what I do, I never see the rel="m_PageScroll2id" being added to anything anywhere in Firebug or Chrome Inspector. So, anyhoo, I've pasted my lastest jQuery failure below as well as a link to the page containing the Essential Grid.
The instance of Essential Grid is directly below the homepage slider and contains 6 grid items. Also, just so you guys can see what I need to make happen, I also set up an item in the site's main nav called 'TEST'. If you inspect that link, you'll see the rel="m_PageScroll2id" that I need to happen on links in Essential Grid.
I'm adding the code in the Custom JS panel in Ess Grid.
`$(function() {
$('.welcome a').attr('rel', 'm_PageScroll2id');
});`
And here's a link to the page in question: http://wclatlanta.wpengine.com/
I watch on your site, dev-console said $ is not a function. But jQuery - is a function in the same place. Replace
$(function() {
$('.welcome a').attr('rel', 'm_PageScroll2id');
});
with
jQuery(function() {
jQuery('.welcome a').attr('rel', 'm_PageScroll2id');
});