I have been trying to develop a website as a front end for a Audio Stream. I am working with a responsive template that uses jQuery and CSS. I am having trouble incorporating two jplayer widgets (Player & Now Playing bar) into my page. I can build a page in the same dir as my site and they will work. but when I try to use them in my index.html they do not display or function. My question is could the jquery already in my index.html be interfering with the scripts for jplayer? Or can it be an ordering issue, where some script refs have priority?
/example.com/sample.html <---works
/example.com/index.html <--does not work
These are the jQuery references in my template
bootstrap.js
bootstrap.min.js
grayscale.js
jquery.easing.min.js
jquery.js
Related
We have recently switched to a React SPA site. From the old site, we have some documents (invoices, quotes) that we generate as HTML files that we then print as PDFs. These templates are designed by a third party and have their own separate CSS files that have nothing to do with our React SPA's CSS. After the shift to React, I added some of the templates as React-friendly modules and converted their CSS to JSS. It worked but only partially as a lot of styles are overridden by the React SPA's CSS so the results are not consistent. We don't have the resources to redo all templates from scratch and this isn't something that we should be doing anyway - ideally, we want to be able to just load in the CSS that we get from the designer and only play around with the HTML/JSX (happy to use a tool to convert CSS to JSS but no custom editing). Is there a way to somehow ignore/unload all app CSS when loading a specific page, and only use a specific CSS/JSS file (in our case makeStyles), then bring it back to normal when another page is viewed?
I built a custom calculator using HTML5, CSS3, and jQuery.
I have a basic hosting account and loaded all the files through cPanel to my root directory. The files include calc.html with a CSS folder holding my stylesheet and a JS folder holding my custom jQuery.
Now someone would like to put my calculator on their Wordpress site and we can not figure out how to do it. For now I just used iframe to show my site on their Wordpress page but we want the calculator to be hosted from his site.
I tried copying and pasting my HTML code from my calc.html file into a Wordpress page which works but I do not have the styling of my CSS and the JS dose not function. So I used FileZilla and created a folder called CALC with the follwing path (public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/) and added the JS sand CSS contents in there.
I linked my CSS in the header of my calc.html code
<link rel="stylesheet" href="public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/css/mainCalc.css">
I linked my JS towards the end of the body in calc.html
<script src="public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/js/main.js"></script>
I view the page and still have my ugly HTML code with no styling and no JS functionality.
Im new to Wordpress/coding and this is the first thing that popped in my mind so I tried it and failed.
I also thought I could put calc.html, mainCalc.css, and main.js inside of the calc directory i created(public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/)
and then use iframe to display calc.html on the wordpress page. I also failed at this.
I used
<iframe src="public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/calc.html"></iframe>
You could do with creating a custom page template.
Basically you will follow the docs https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/ and create a page with the HTML + CSS + JS in the content part.
When you done, you just create a new page in the admin part, select the template from the list under the publish button. Save it, and that's it.
Its simpler from writing a plugin.
I'm a beginner coder and am trying to integrate my css into my app. Using Rails 4 + Bootstrap 3.
I wrote out the html + css for the front-end of my app prior and it all worked fabulously. I moved everything to my folder and edited my V + C accordingly.
I have installed the bootstrap-sass gem successfully. Have updated my assets application and js. I have a .scss file importing bootstrap and my Google fonts.
Bootstrap, Bootstrap js, and Google fonts are working selectively/randomly on certain pages, but not fully on a page or they just don't work at all or they are there but all messed up now. (ex. modal not working on one page, but js element on another page works) I am trying to call the css files from where they are locally stored.
My questions:
1. Is there something I would need to edit to integrate the two in addition to the above?
2. Do I have to transition my css into another file?
3. If there is no easy way to fix this, should I just start over with my css?
Would appreciate any tips. Thanks!
A good starting point would be to check your sources under the inspector, to make the that the css and javascript are both being required. Also check the console for whether there are any javascript errors.
Assuming you are on google chrome, and on a mac, that would be cmd+alt+i, and ctrl+alt+i on windows.
You can also check which files are being included through checking page source by right clicking most parts of the page.
If they are being required and styles are not being applied then something else is probably getting in the way( i.e. bootstrap javascript files are being required twice, css is being overwritten because of load order, etc)
I am still relatively new to Grails. I am trying to use Bootstrap for the CSS. I have added the bootstrap files to the CSS folder. I have added the plugin. I have added links to the head of the main.gsp as links and the pathing looks correct. But still no joy. I do not want to have a <style></style> in my gsp's. Any advice on how to get the gsp to call the proper CSS?
i installed phonegap on xcode and i create a new project. I included jquery mobile in my project but when i start it on the simulator it's not load the css files. When i open the same code in a Browser then it loads the css files of jquery mobile.
Thank you in advance!
The only way I've found to counter this is to include the styles as a <style> tag in the header of all of your HTML pages for the app.
There must be a better way, but I've never gotten linked CSS files to work properly.