I'm new to JavaScript. I need a CSS text animation to setup a part of my website. Here I found an attractive animation link is in the 3rd comment because stackoverflow doesn't allow me to put the link here (keep showing an error)
When I copy these HTML code, CSS code and JS code and create a webpage including them, It doesn't work properly. Actually no any animation.
How can I solve this to work?
For javascript
Make script tag and copy all the JavaScript between it.
<script>...</script>
For css
Make a style tag and copy all the CSS between it.
<style>...</style>
And to fix your problems double check your code and see whether you are missing some library or not.
The codepen project us using jquery, font-awesome and other things. This will help you import some of them.
<script src="https://use.fontawesome.com/230e98b440.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
This is an Option :
Signup in the codepen.io
Goto your link
Click on the Export button at the right bottom corner
Select Export.zip
After download the zip file, unzip it
Open index.html and you'll see the result.
Check the code of index.html for the missing codes
Related
I have an amateur sports website to maintain and I am not an expert in web development. The pages I can put on the website can only be in the form of predefined templates, something similar to wordpress.
The main website loads it's own CSS files and JS files which we do not want as it interferes with our customisations. These files change as and when the main administrators/developers deploy new ones to the main/parent website.
I want to dynamically block loading of all CSS files and JS files that are not ours and instead use our own custom CSS and JS files.
Currently I am doing something like this below, but as you can see I will have to update the file names whenever they change to something else and I would not know when they change unless I notice the difference on the webpages.
<script type="text/javascript">
$('link[rel=stylesheet][href="/assets/application-b51e2731e0d53e4d422.css"]').remove();
$('link[rel=stylesheet][href="/assets/print-a622ffc90d1232b126e42c.css"]').remove();
jQuery('head script[src*="application-7fd426f9bca208.js"]').remove();
</script>
Is there a better way to block all unwanted css / js files dynamically without me having to hardcode it like I have done above?
Instead of worrying about tracking file names, why not just target anything that's not yours?
$('link').not('.myLink').remove();
And just make sure you drop that class on your link:
<link rel="stylesheet" href="path.css" class="myLink" />
i am using wordpress and i would like to create a drop down menu with select options and i found this thread which i think is exactly what i need Deactivate the 'Submit' button for the selected value in dropdown menu to be honest i don't know how to set up these elements html,js,css in order to achieve the result.I am a begginer and i would appreciate any kind of instructions.
Thank you for you time!
For instructions in HTML, CSS and JS go to the W3Schools website. I learned almost all that I know from there. If you need specific help THEN come asking here.
Let me assume that you are going to implement this in your WordPress themes index.php file. So, copy and paste the HTML code in to the html tag wherever you want to display the drop down box. Also copy and paste the javascript in to the script tag inside the head tag of the page. You can also paste the javascript code to a new file created inside the js folder inside the themes folder and call it from the head tag in index.php file. If you have any CSS you can either place it directly in the style tag inside head tag of index.php file or create a file in the css folder,copy the css code to it and call the CSS file from the head tag of index.php file.
I have a code generated by "highslide" software and what it does is to create an image gallery.
This code consists of .css html and javascript.
If I place the htmal code in the Joomla's "index.php" file and then the rest of the file in the root directory then the image gallery is working and is placed in every page in Joomla.
I do not want this. Is there a way of assigning that image gallery to only pages I choose?
Or is there a way to find out what is the index.php main file for that specific page I need to have the gallery and paste the code in there?
I have tried to insert the code in a custom module via the Joomla's editor but when I click on save then it compiles the code and remove certain parts of it and cannot work.
It removes the link to javascript and to css file.
Is there a way without any other third party extension to have that code into the custom module without then Joomla eliminate the half of the code?
Thank you,
Best Regards,
Andreas Achilleos
I would not add things like this to your index.php file. This is Joomla, not a static html website ;)
You have 3 options:
Option 1 would be to develop your own module and install it on your Joomla site. This option would take the longest amount of time and would require you to get your handy in a bit of coding.
Option 2 would be to firstly download, install and enable a plugin called Sourcerer. Once done, in the Joomla backend, create a new "Custom Module" and manually add your html code. After, below the big textbox, you will see a button below saying "Insert code". O modal will popup allowing you to add your custom code. Simply add your CSS and JS using the <style> and <script> tags.
Option 3 would be to use a pre-built Image Gallery extensions from the Joomla Extensions Directory. There are loads to choose from.
Hope this helps
Sorry for the basic question, I'm a beginner with some basic knowledge of html, css and beginning with javascript that I'm learning for developing my own web project. I'm trying to create a project with a separate page for functions to keep the page cleaner and see all the functions in one place. I'm watching videos as part of an online course. However, the lectures use Visual Studio in which you can drag and drop the files so that the source link is already coded. If there's an equivalent feature, let me know please.
I know that you are supposed to link the <script type = "text/javascript" script src = XXXX.js> However, whenever I copy the file path, it still doesn't come up. What am I missing?
This should be the text that links your JS file:
<script type="text/javascript" src="path/to/file.js"></script>
Even though with HTML5 you might not need quotes around your attribute content, it's safe to put them in for older browsers. Don't put a space between the attribute name and the equals sign, or between the attribute content and the equals sign. There shouldn't be a script in the middle of your tag (you put one before src). Make sure the file path is relative to your HTML file as well.
Right, i've looked around and can't seem to find an answer to this problem.
I'm running Expression Engine Core (the latest version), and I am building a template. I have built the template using Bootstrap and some other bits of code. I'm having a problem with using prettyPhoto within my template. I have a button which is calling a prettyPhoto modal window. My static HTML site works fine with this but there seems to be some sort of conflict somewhere. All my js files and css files link fine, but for some reason or another the js doesn't work for my prettyPhoto. The code i'm using is:
Need Help? <i class="icon-help-circle"></i><div id="maphelp" class="hide">text goes in here</div>
But I can't for the life of me work out why this isn't working. I've tried making the class= into a rel= but that still doesn't do anything. I've used the code from the http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ with the section on inline content.
I have also done the fix within the help pages to make sure that its is active. Still nothing happens...
Can anyone help me?
Have you tried moving your prettyPhoto.js to the bottom of your code perhaps inside the footer or better yet, below the footer.
I usually create an embeds template where I place all of my js, xml, css files and call out the embeds like so
<script src="{path="embeds/jsfile"}"></script>
this way it allows me to move the files all over the place in my visual template.
another is to use the no conflict
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
I hope this helps.