How to Link External jQuery and CSS Resources

I need to include two external CSS files and one jQuery file in my website. This is how I am adding them:

<link rel="stylesheet" href="http://www.externalsite.com/css/style.css" type="text/css" />

and

<script src="http://www.externalsite.com/js/jquery.easing.1.3.js"></script>
<script src="http://www.externalsite.com/js/default.js"></script>

In the default.js file, there is some jQuery code that should control the drop down menu on my site. However, the drop downs are not appearing even though the HTML code seems correct.

Am I linking to the files properly? Any suggestions as to why the drop downs are not working?

EDIT:

I am linking from an HTTP site to an HTTPS site, could this be causing the issue?

EDIT 2:

Here is the JSFiddle link: http://jsfiddle.net/tvZUG/

jquerycss

Answer №1

When linking from a HTTPS site to a HTTP site, it is important to consider the security implications.

It does matter. A secure page should have secure resources.

If the external site supports HTTPS, you can link to it without specifying the protocol:

<script type="text/javascript" src="//www.externalsite.com/js/default.js"></script>

For more information on this topic, you can check out a similar question on Stack Overflow.

Answer №2

Consider including a type declaration in your script, for example.

<script type="text/javascript" src="http://www.example.com/js/custom.js"></script>

Do you encounter any challenges with your stylesheet?

Answer №3

It seems like jQuery may not have been imported properly. The code for the plugin is visible, but maybe you overlooked importing jQuery?

Answer №4

In my opinion, the issue could potentially be related to HTTPS restrictions that might be blocking the execution of JavaScript files from external sources. A possible solution would be to host the files on your own server and reference them internally.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Javascript to Open a New Tab from Drupal

I'm attempting to trigger the opening of a new tab when a specific menu link is clicked within a Drupal website. My initial approach was to incorporate JavaScript directly into the content of the page, but unfortunately this method has not been succes ...

javascriptjqueryhtmldrupaldrupal-7

Establishing communication between AJAX and PHP through the use of POST requests

I am currently working on integrating my Ajax code with my PHP file in order to achieve seamless communication and interaction between them before providing a response back to the user on the same page. My goal is to have the form filled out, then upon hi ...

phpjqueryajaxforms

Utilizing jQuery variables to manage various events simultaneously

Is it possible to set a variable that can be accessed and utilized in various events like mouseout, mouseenter, click, etc.? The code snippet looks something like this: $('a div') // Get the width and height of the image //var $img_ ...

jquery

Overflow: Truncating text with an ellipsis in the center

Seeking a CSS-only solution for adding an ellipsis in the middle of a string when it exceeds its container. I have tried splitting the container in half, trimming the first half with a wrapper on a whole letter and adding an ellipsis to the front of the s ...

htmlcssoverflowtrimellipsis

Data input via $_POST method during the submission of a web application is failing to

Having trouble with the login functionality in an EllisLab application framework. The data from the $_POST method is not being stored upon form submission, resulting in an error message. When using var_dump($POST), it shows array(0){}. View Error Screensh ...

javascriptphpjqueryhtmlforms

Text in various styles is layered on top of an image, ensuring that text in one style does not overlap text in another style

Struggling with placing text over an image? Trying to achieve different text styles but ending up with overlapping lines? Here's a snippet of HTML that works with only one text style: <li style="" class="portfolio-content-CV"> <div class ...

htmlcss

Understanding the values of the jQuery "Each" function

Initially, I crafted the original AJAX function: dataType: 'json', data : { action: something , id: id}, success: function(data) { var my_title= data.title; // values: "post1,post2,post3" var my_name = data.name; // values: "stev ...

jqueryajax

Enhancing a bootstrap gallery with a zoom in effect

I need help creating a gallery using Bootstrap that resembles the style shown in this example: While everything is functional, I am facing an issue with aligning the pictures properly after adding a hover effect. I tried placing each picture in individual ...

csstwitter-bootstrapflexboxhoverbootstrap-5

Passing parameters between pages using jQuery Mobile

I'm currently utilizing a form to navigate and transfer form parameters from one page to another through a query string. FirstPage form code <form name="input" action="new_page.html" method="get"> Username: <input type="text" name="user" / ...

jqueryjquery-mobile

Can a nested key be assigned within another key in a JSON document?

I am wondering if it is possible to nest a key within another key in JSON. If so, how would I go about accessing this nested key using jQuery? Below is an example of my code: { "product": [{ "category": "Clothing", "items": [{ ...

jqueryjsonlistkeykey-value

Tips for leveraging a button to trigger server-side actions

Being a novice in web development, I'm currently working on a straightforward website that enables users to download files from the server side. These files are not pre-created; instead, there will be a button on the HTML page. When a user clicks this ...

javascriptjqueryhtml

Inline-block display causing divs to act unpredictably

I am working with a main div that contains three smaller divs inside. Each of these divs has been assigned a width of 30%, and they are all perfectly centered within the main div. To ensure that the three divs appear side by side, I used the display: inli ...

csshtml

Implementing row reordering in DataTables once server-side processing is finished

I have set up a DataTables in my web page to load content from the server using Server-side processing. Now, I am looking to incorporate row reordering functionality with the help of jquery-datatables-row-reordering. Here is how I attempted it previously. ...

jquerydatatables-1.10

Is it possible to make an element float or stay fixed on a web page based on the visible section of the page?

This question may be a bit confusing, but I couldn't phrase it any other way. Check out this link: Configure - Apple Store (U.S.) On the webpage, the 'Summary' box is positioned below the sub-header and aligns with the content block. When ...

javascriptjquerycssxhtml

Chronological Overview (Highcharts)

Can you customize a timeline in Highcharts to resemble the image? https://i.sstatic.net/5Lipu.png I have a functional example of the timeline I desire, but the color coding and filtering aspects are challenging for me. I am attempting to apply a filter th ...

javascripthtmlcsshighcharts

What's causing jQuery to make the entire page malfunction?

I am experiencing an issue where a function is not recognized as being in scope when I have a reference to jQuery defined. Oddly enough, if I comment out that reference, the function call works just fine. I have other pages set up the same way with jQuer ...

javascriptjqueryhtml

Issues with focusing on an input box using JQuery

Looking to check a condition when an input box loses focus in jQuery. After the input box loses focus, it seems impossible to regain focus on that specific box. Code Snippet: if ($("#Amount").val() < 10000) { alert('The minimum amount is $10 ...

jqueryfocusinputbox

At what point will the browser display changes made to css using jQuery?

When I run my JavaScript code in Firebug, it looks like this: tr=$(this).parent('tr'); tr.find('.img-delete').css('display','block'); However, I am unable to see the change reflected on the browser. Is there a wa ...

jquerycss

Eliminating the GWT Window Padding in LibGDX

Explanation: I am currently in the process of deploying a LibGDX GWT application to the browser. Challenge: In the image below, you can see the top left portion of my GWT application showcased by the large black rectangle. The issue here is the unwanted ...

javahtmlcssgwtlibgdx

What is the solution to fixing a flashing div?

I've been using a jQuery method to make my div blink. Check it out: JSFIDDLE <div class="blink">blinking text</div>non-blinking <div class="blink">more blinking text</div> function blink(selector){ $(selector).fadeOut(& ...

javascriptjquerycsshtml