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.
Related
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.
I am using a python library to convert HTML page into PDF.
It does it correctly, except it only handles inline styling. It does not reflect the styling applied to DOM elements using external style sheets.
So, as a solution I am thinking of adding those CSS styling from all the external CSS stylesheets into the head tag of the html file and then send it to get converted into pdf.
But, I am not sure how? Can anyone give me any ideas or atleast suggestion on how to go around fixing that? Or, if they know a better solution.
Much appreciate
Is the python running outside or client-side? You can examine the solution here # http://www.xportability.com/XEPOnline/FOTestSuite.html. While this does a lot more, you can reach through that page to the included Javascript. Look for flattenstyle.js for inspiration.
Because our handling is different, we actually copy a selected div element to another hidden div and "flatten" the style by extracting styles we want. What you could do is run such a javascript on page load and save out the div and not destroy it, then you have most all the print styling in the HTML.
Working on creating a dynamic breadcrumb plugin using either jQuery or Javascript, and I do not have the knowledge to make it change dynamically while you scroll the page.
So we have a fixed header element, that will house the navigation and breadcrumbs.
While scrolling down the page, I would like the breadcrumb navigation element to change based on what section I am scrolling past.
Is this possible?
I appreciate any help or suggestions.
I believe this is possible. You can use <name> or <id> tags similar to the way you want to direct someone to a certain part of a page.
I would use those to determine whether an element is in the viewport or outside of it.
If you are okay with using a plugin you should go with the JQuery isInViewport plugin :
https://plugins.jquery.com/isInViewport/
You can also take a look at the raw code and change it to your liking.
I have a simple <a> tag that is getting hidden from some JS. (display:none)
I have looked into the page source and I can see it is not hidden, however the inspector shows it as display:none ( inline style )
No result finding out the class/id in JS code in order to isolate the part of the code that is hiding the <a>.
Is there a tool or fixed procedure that can help me to debug this?
Chrome lets you break code when an attribute on an element is changed.
Open the developer tools using F12, and select the "Elements" tab. Find the element that gets hidden. Right click on it, "Break on", "Attributes Modification".
Refresh the page, keeping Developer Tools open.
If the element is being hidden using JavaScript, you'll break at that point.
Otherwise, it's done via CSS. If this is the case, using the "Elements" tab again, select the element you're interested in and look at the "Styles" applied to it in the right hand column. Chrome will show which styles are applied by which definition in which stylesheet. It should then be trivial to find the one hiding the element.
First of all, look if it is hidden from inline style or by a css class.
Then, if is by a css class, search in all your project for that class (you should find a javascript function that adds this class to the element).
If is hidden by inline style property, look inside your project for any .style.display = property.
If you are using jquery try like this:
// Search by class
.addClass(".hiddenClass
// Search by css
.hide(), or $(".elementSelector").hide()
Firstly make sure that it is indeed javascript that hides your element, as it could easily be css. The easiest first step is to check the element and see if by any chance its default css is hiding it.
Second. Is your js code in one file or do you import multiple js files in your page?
If you have multiple js files you could try.
Import 1 file
then use javascript to Show your element
then import the rest of the files.
If the code that hides your element is located in the first file then your element will be visible (because you made it visible after hiding it first)
if the element is not visible it means that the hiding takes place in a subsequent file.
Move your javascript code showing the element after the second import and so on...
Last but not least make sure your code does not import external css files as well.
I recommend using Chrome Dev Tools for any javascript debugging you do.
In my web application, I have written a cross-domain ajax call which is fetching an HTML page from a different domain. This newly fetched page is being rendered in a jQuery dialog using the following code $('#previewDialog').html(response).dialog('open');
This renders the response properly in the dialog. However, the response (HTML page) also has some CSS styles in it. These styles (generally BODY, INPUT etc) are getting applied to my main window (parent page) and distorting the complete view of the page.
When the dialog with the HTML page opens, the view of the parent page is completely distorted because of the CSS used in the HTML page (response of AJAX call) which gets applied to all the components. And when I close the Dialog, the parent page gets back into shape.
Is there anyway, by which I can prevent the CSS of the HTML page which is being displayed in dialog, not get applied to my parent page?
Trivial answer: have everything from the page that you pull in be wrapped in a div with a class not used elsewhere. modify the .css for that page so that it only applies to elements within a div of that class.
Edit: If you cannot control the css of the origin page, things become somewhat more complicated. your problem, though, is that you're injecting the HTML (including the css link) directly into your page. Instead, try the following:
Grab the HTML for the other page. Place it into a div off to the side that you're not using for anything else using the html() command.
Go into that div using the jquery DOM commands. Grab the portion of the page inside of the troublesome links, and pull it over to the $('#previewDialog') location. Destroy the contents of the working space div. If there is javascript or css that you need to preserve, have it entered (modified, if necessary - like with div wrappers) elsewhere in the page.
Now, this only works if the pages that you're being fed don't have their css or javascript changing with any frequency.
An alternate version of the same thing - while you have it as a response (a string format) use string manipulation tools to excise the css reference, rather than using DOM commands to pull what you need out of it.
More complicated/difficult version of the same thing (though somewhat more robust): Use string commands to slice out the css references (as with the alternate version) and then make another call using that css reference to acquire the .css file. Use string commands on the .css file to add in the div-wrapper limits as initially described, then insert it elsewhere on the page as an internal style sheet.