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" />
Related
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!
Here is a link to my site, http://johnathonpowers.bigcartel.com
Trying to play around with images on my product pages...well actually created a test page.
Unable to figure out a few things:
Where does one host a jquery file?
Do I need to have the jquery src for both jquery.min.js (many use the one hosted by google, if I am understanding any of this correctly) and jquery.elevatezoom.js?
If I end up not liking the zoom is this still an appropriate way to have a large image with small thumbnails beneath (perhaps I will explore how to click on the big image to open a full-screen version).
Should all my pictures be the same size? Right now I have square format photos and rectangle...it might end up looking horrible.
Do I put any code into CSS or just the layout and the specific page I want the images to take place?
Will these images replace the ones I upload through bigcartel's system?
There is already a jquery entry in the layout...do I just add to the end of this same section the additional src?
This is what I added to layout:
<script src="http://s000.tinyupload.com/index.php?file_id=24823496361920795072" type="text/javascript"></script>
This is my test page:
<img id="zoom_01" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg"/>
$("#img_01").elevateZoom();
<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script></head>
<img id="product_zoom" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg" class="fade_in">
Thanks again for all the help and honestly probably biting off more than I can chew. I just wanted to play around with it and see if it would work/was something I liked, but seems like I have gone down a rabbit hole into a whole other world, way above my rudimentary html skillset.
Here is where I first saw the jquery stuff:
Can I integrate an Internal zoom on my products in my big cartel store?
The best place to host your javascript files is on a server that you have control over -but if you don't have any webspace, you can easily host files with a service like Dropbox or Google Drive.
The Luna theme you're using already loads jQuery in the <head> portion of your Layout, so you don't need to include that script again (and you'll get errors in your browser's javascript console if you try).
Since you're using a separate image zooming library that has a bunch of custom CSS, you'll probably want to have your CSS file hosted on a separate server as well. It's a good idea to put any files you're including in the Layout section, following the same format as the existing theme files.
It looks like the javascript file you're hosting on tinyupload.com is just bringing up a download page instead of actually loading the javascript content into the page, so you'll definitely need to change how that's loaded. Otherwise the HTML code you're using looks like it should work.
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
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.
I'm creating a simple website and now I'm using the Ajaxify library to make page transitions look great.
The problem is: my pages have both a global CSS file (used in the whole site) and specific CSS files (one file for each page, with specific content).
When I change page with Ajaxify, it pushes the content, however doesn't push the specific CSS links in the head, so the site gets buggy. Any ideas on how to modify Ajaxify to also look for link tags and push them?
Thanks in advance.
If you are using jQuery (which I think is a requirement for Ajaxify), then you can easily manually append new style sheets to the head after the page transition has completed:
$('head').append('<link rel="stylesheet" href="page-specific-style.css" type="text/css" />');