Php include method and Jquery load method? - javascript

I have 3 folders:
Admin
Home
Profile
Each folders have different css, js, and php files in it with more than 1000 lines, so that's why I kept them in separate folders.
But now I want to manage the whole indexes is one, so I made another php file with name All.php and I made a radio button in it to show and hide these three files (admin, home and profile).
I have tried to include these files by ?php include(filename.php) ? method, but the css wasn't working with it.
Then I copied the css and js link files from the Admin.php to All.php and it was working fine.
But the problem is when I copied more files(css and js links) with different names to All.php, some conflicts appear, and the style of Admin.php got shattered.
I don't know whats wrong with it, and it's same with jquery.load() method. The css doesn't work in All.php when I load a file from three of these, and when here too I copied the links and sources then, many of the functionalities were not working.

Look up cascade, inheritance and specificity. You possibly have conflicting selectors in css files. What kind of functionalities are not working? Need code for that!

Related

Where to put which files when adding Javascript to Wordpress

I'm trying to figure out how to get ANY Javascript to work and where to place the files.
I tried several ways but what is the most logical way? I've been trying for a week, but since I can't find a tutorial on it, I'm going to assume it's embarrassingly easy.
I'm just trying to understand where to put which files before I venture further into this coding journey.
Any help is much much appreciated!
What I've done so far:
I created a Childtheme and added the hook-code to the functions.php file (see image)
There seem to be double code here but I'm not sure
I acquired the files for a .js slider (tried several) but I'm not sure where to put the code/files
The HTML I put in a HTML widget top of page, the CSS I put in Wordpress' 'Additional CSS' and the Javascript I put in the functions.php between the brackets.
I also tried to add the code files in the ChildTheme folder but also didn't work
In wordpress you have no real place for javascript files, that means that you are quite free to place them where u feel beeter.
That said, it is common to have inside your child theme a "js" folder, which could be in the root of the child theme like:
mychildtheme/js or
mychildtheme/assets/js or
mychildtheme/public/js
Once u've picked one of those, all you have to do is this:
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );
function my_custom_scripts(){
wp_enqueue_script('my_custom_script',get_stylesheet_directory_uri()."/[yourpath]/yourfile.js",['jquery','anyotherdeps'],false,true);
}
Which is documented here: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

How to dynamically remove all unwanted CSS and JS from page

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" />

Adding HTML, JQuery and CSS to drupal7

I am a very new user of Drupal and want to add this menu to my website. It has the HTML code with a CSS file, two .js files and a few images.
I want to embed this code in a block into my Responsinve blog themed Drupal7 site
I don't even know where to start or end.I tried drupal_add_js but I think I missed something somewhere and reading the forums has got me all the more confused.
In short I need to understand every small point of how and where to make changes to my site folders.
Any help would be highly appreciated.
You dont need to add your js & css in the template file.
When you go into sites/all/themes/your_theme_name
Look for a file that ends with .info
Best practice is to add all of your custom .js & css files there.
All HTML changes will be done in the .tpl template files.
Hope this helps.
The easiest way to do add js is:
Locate your theme folder, usually /themes/your_theme_name or /sites/all/themes/your_theme_name
Look for template.php in it
Look for your_theme_preprocess_html() function - 'your_theme' might be, 'bartik' or 'garland' or your theme name, if not - change it (usually, it's the name of the folder)
add `drupal_add_js('path_to_js') to function
That's it, clear your cache in Admin > Config > Perfomance and check your code
oh, and to add menu block,
Structure > Menu and create new menu or use existant, add menu items
go to Structure > Blocks, find your menu in list and select region for it
p.s.
and, yep, it's not the only way to add js, here you can find at least 7 ways to do it

javascript in Joomla custom module

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

Editing Source Code in Wordpress

The company I am working with hosts their webpage on Wordpress. They want me to edit some of the code in order to do various things, such as enable a photo container to be a moving slideshow.
Figuring out the javascript and html to achieve the results they desire is not problematic for me. However, I am unsure how to get full access to the Source Code of the site. I have privileged access to the backend of the site but in wordpress when you go to edit it only shows some of the basic html tags while hiding the <div> and <script> tags and code. Is there any way edit the page in its source code format? I don't want to have to go through the simplified and less expressive/less control Wordpress interface, and I don't even know if I can achieve the desired results with it.
If you try and edit individual pages you're approaching the problem in the wrong way. You probably want to be using a plugin or modifying a plug-in to create the slideshow you need. There are many plugins for wordpress that do what you seem to need.
slider-widget is one such pluging
In Wordpress, there are two main parts to the website's front and backend: the core WP files and the theme that is used. (And other important aspect to a WP site is the database, where all content is stored, including text/images entered in the admin backend.)
Core WP files are not to be changed because they get overwritten with each update. What you want to work with is the theme. Look in Appearance>>Themes and see what the active theme is for the site. It will also tell you the name of the folder the theme files are in.
With FTP, go to root/wp-content/themes/your-theme-name. That's the php, html and css source of the displayed part of the site. Uploaded images are in /uploads/, and plugins in /plugins/.
See http://codex.wordpress.org/Theme_Development to get an idea of how themes are built and how to modify them.
See the rest of the docs at WP to see how to work with plugins, add other javascript correctly so it doesn't conflict with WP's included javascripts, etc. All the docs you really need are at wordpress.org

Categories