This question already has an answer here:
Conflict Bootstrap, Prototype Js and Jquery
(1 answer)
Closed 6 years ago.
I am working on a site that uses javascript for a dropdown search list. The site also has a popover. When I put the source below into the header the dropdown search list does not have a search function working, however the popover works, and vis-versa.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>-->
Popover
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Is there a way to make the scripts relate to specific source?
Thanks in advance.
I figured out the issue; the src had to be higher up in the Header. This page helped me: Can I use multiple versions of jQuery on the same page?
Related
This question already has answers here:
How to really isolate stylesheets in the Google Chrome extension?
(5 answers)
Closed last year.
I am trying to use the Bootstrap 5 library in the chrome extension. So I am adding the bootstrap 5 (CSS and js) files with a manifest to the content script but it conflicts with the main CSS file on some sites.
content_scripts":
[{
"matches": ["*://*.amazon.com/*"],
"js":["bootstrap.bundle.min.js","injection.js"],
"css":["bootstrap.min.css"]
}]
When I try to use bootstrap for example on amazon.com, some CSS elements conflict. I am trying to solve the problem with an artificial solution by commenting on some Bootstrap CSS codes.
I couldn't find any details about it. If there is a better solution or if the way I tried it is wrong, could someone tell me the logic of it or help me with another solution?
How it should be
Css current solution
I don't think there is a way to avoid the CSS conflicts in the content script.
I think you can build a namespace bootstrap version.
Please check this. Separate content script css from site css?
This question already has answers here:
How to use external ".js" files
(6 answers)
Closed 5 years ago.
I have 4 javascripts within <script> tags in all multiple of my content pages. They handle popups and disabling of other buttons on button clicks. So at the moment I have a lot of duplicate script code on every page.
Is it possible to have these scripts in the master page instead and have all my content pages reference them? If so, where in the master page do I put them and how do I reference them on a button click?
I have searched google but haven't found any good answers.
Edit 1: To deal with the duplicate marking.
I am mostly looking to avoid duplicate code here, that is why I want to put this in my master page. If it is possible to put my scripts in a JS file, include that on the master page and have all my content pages access the scripts from there. Then that is absolutely a solution to my question and will gladly accept an answer that describes how I do that. To be clear, it is the accessing part that I haven't found how to do.
But just saying something like, "put the scripts in a JS file and include the file on your page", is not a solution to my question since it just hides the duplicity in files instead.
Edit 2: What I have tried now.
As per M Idrees's answer below I have put my scripts into buttonScripts.js, which is located in my projects Scripts folder. I added it to the head of my master page:
<head runat="server">
<script type="text/javascript" src="~/Scripts/buttonScripts.js"></script>
...
</head>
I kept the click functions on my buttons as is:
<button ... onclick="if (!myFunc(this)) { return false; }"></button>
Then I removed the scripts from my content pages and started my web app. Now I get the error "myFunc is undefined". This is what I mean by "it is the accessing part that I haven't found how to do" above.
Edit 3: I suck.
Tried to use a relative path, as you can see above. With a proper path:
<head runat="server">
<script type="text/javascript" src="Scripts/buttonScripts.js"></script>
...
</head>
It works as intended. Thanks!
Within the head tag of your master page. Add your script reference, like:
<script type="text/javascript" src="path/to/script.js"></script>
Remove all other script references from your content pages. It will automatically get from master page.
Regarding your point: it is the accessing part that I haven't found how to do.
You don't have to change anything about accessing script code. It will work as it might be working now.
Do these steps, and if still have any problem, just update in this post.
This question already has answers here:
How to load local script files as fallback in cases where CDN are blocked/unavailable? [duplicate]
(10 answers)
Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail
(23 answers)
Why do I link my jquery inside a document.write?
(3 answers)
Closed 5 years ago.
I'm trying to learn Bootstrap and I was studying this example. I noticed that they include the Jquery library and other scripts at the bottom of the markup just before the end of the body-- this part I understand. What I don't get is why JQuery is included using two lines of markup, like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
What is the purpose of the second line?
Is it meant to handle the case where the first line fails or is too slow? Does writing the script element using document.write guarantee an immediate load time? Or what is the purpose?
This question already has answers here:
Can an iframe only show a certain part of the page?
(8 answers)
Closed 8 years ago.
I am trying to build a webpage using wix.com, and I want to include part of another website into mine. I can add html code. I am trying to get the featured poet on poetryoutloud.org into mine. This changed everyday and I only want this part of the webpage. I know that if I wanted to include the whole webpage I could use an iframe element, but this is only part of it
You can use an iframe
or alternatively you can use ajax, here an example using jQuery.
$("#yoursite-html").load("yoursite-html.php");
Please note if content is on another domain as described in your answer (CORS issue), you have to use a simple proxy example below:
PHP in file "yoursite-html.php":
echo file_get_contents("http://www.yoursite.com/");
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have built a simple page on my localhost and then I have uploaded it on the net. When the page is viewed from local machine, all jQuery interactions works well without any problem. But when I view the hosted page, nothing happens. It seems a plugin + jQuery are not loaded properly, though I see them loaded (using firefox view source code, I check the scripts address and see their source without 404 error).
I appreciate any help. Here is the address:
http://tarjom.ir/demo/niazer/
The jQuery interaction is that when the user clicks on the search bar, a box slides down which contains many search-categories.
And also the thumbnails at the bottom of the red line moves when mouse hovers it. Now, you probably wouldn't see any of these stories.
The page is written using codeigniter.
EDIT EDIT
the scripts and CSS are loaded automatically using a library written for codeigniter. But the generated HTML markup for browser is as follows:
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/2-prettyCheckable.js"></script>
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/1-jquery.js"></script>
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/mtSlideElement.js"></script>
prettyCheckable is a jQuery plugin, you need to include it after you call jquery, change the order you are including the scripts so it looks like this:
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/1-jquery.js"></script>
<script type="text/javascript" src="http://tarjom.ir/demo/niazer/js/blue/2-prettyCheckable.js"></script>
2-prettyCheckable.js has a semicolon as its first character and there is no method called prettyCheckable in it. Did a few lines get cut out of this script by accident?
Your pages has two 'html', 'head' tags, you might want to remove them. And put all those javascript into a single.js file and call include it just before tag.
There is are definition for prettyCheckable();
You have loaded two jQuery, at first jQuery v1.10.2 and then prettyCheckable.js and then again jQuery v1.10.1, this is the problem because, once prettyCheckable extended the core jQuery and then you loaded again another jQuery and it's completely new. This the order
http://tarjom.ir/demo/niazer/js/blue/1-jquery.js // loaded
http://tarjom.ir/demo/niazer/js/blue/2-prettyCheckable.js // jQuery.fn extended
http://code.jquery.com/jquery-1.10.1.min.js // old jQuery replaced