I have a parent jsp file with an inline iframe.
The parent jsp file incorporates a js file <script type="text/javascript" src="jquery-ui-1.8.12.min.js"></script>
However I want the iframe to use jquery-ui-1.8.17.min.js
I incorporated the below in my iframe jsp file <script type="text/javascript" src="jquery-ui-1.8.17.min.js"></script>
But this doesn't seem to work. The iframe still loads with 1.8.12 js file.
How can I force iframe to use 1.8.17 and not 1.8.12?
Changing the version in parent jsp is not an option.
Related
So I made a page that utilizes some javascript and also loads a js file. However, I need to move that code to a template file. When I do so, that script tag and the file are not loaded. And I don't get any error messages during page load in the browser, the file does not exist in browser, and there are no build errors or log messages. Here are snippets of code.
The following works in my "addUser.jsp" file.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<script type="text/javascript" th:src="#{/resources/js/selectListSort.js}"></script>
</head>
<body>
...
<script th:inline="javascript">
// several event listener loaders
</script>
</body>
But when I move it to my officeAccess.jsp file, it fails to load.
In addUser.jsp, I make the call:
<div th:replace="administration/fragments/officeAccess :: officeAccess ( userForm = ${userForm} )"></div>
All the html in officeAccess is loaded as expected, just the javascript and file fail to load.
From everything I've researched, what I'm trying to do isn't possible.
Since I'm loading the template, the new code is loaded in the body and belong outside the body. Or... they're ignored when loaded via the template engine. I'm not sure which.
In any case, I'll just load the scripts in the parent page as needed for the templates (since this does work).
we have index.html in which second.html is included using iframe,
Now, as we see the iframe border in index.html
Requirement here is we need to write inline script in second.html, so that while rendering second.html in index.html, it'll remove iframe border.
we are not allowed to make any changes in that page where iframe included i.e. index.html
<div class="external">
<iframe src="/folder/second.html" width="100%" height="700"></iframe>
</div>
please suggest me the approach to remove iframe border using the file which is included in html using iframe
Sample Image:
Add this to your code
<iframe src="/folder/second.html" style="border:none;"height:700px;width:100%"><iframe>
Iframe is used to show other content in our web page. You can show videos,images and other web pages in Iframes.
You cannot make any changes in renderer for security reasons.
If that happened....then,
scripts, styles and all parts of both web pages will mix and will change design and functioning of both pages
You cannot change border of iframe from second.html. You should make changes in index.html:
<iframe style="border:0;"></iframe>
However you can make changes in some rendering pages of iframe
I am building an chrome extension where I am injecting my script.js file in all the iFrames of the web-page via content script file. Looping through all the iFrames in the web-page and injecting my script.js file in the head section.
My content script file contains following code:
var $iframe = $('#iframe');
$iframe.ready(function() {
$iframe.contents().find("head")
.append("<script src='chrome://ext3241241234/script.js'/>");
});
My script.js file contains following code:
var html = "<div id='cksBox'></div>"
$('body').append(html);
script.js simply insert a div element in the body. Thus I am expecting all iFrames' body will have this div element in the end.
But this is not happening. Instead of that my main/parent body element have this div element rather than inside iFrame body. Say following is web-page where my chrome extension is loaded:
<html>
<body>
<div id='cksBox'></div>
<iframe>
<html>
<head>
<script src='chrome://ext3241241234/script.js'/>
</head>
<body/>
</html>
<iframe>
</body>
I can see that my script.js file is loaded inside the iFrame. I tried debugging this, inside script.js file, when I query document, it returns document of parent/main html rather than of iFrame. I do not understand when my script.js file is executed its context should be of iframe but it is of document of main/parent web page.
Hope I am clear with my problem here.
Can someone help?
Please let me know if any more information is needed.
You should directly use script.js rather than chrome-extension prefix.
I'm new to JavaScript and I'm trying to get a slideshow working in my website. I'm following this tutorial: http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited
Unfortunately it doesn't go into a beginners level of detail as to how to get it installed. I know what I should do with the HTML and the CSS but I'm not sure where I should be putting the JavaScript. Does it go in a separate file or something? How do I get it to work?
Also I'm trying to do this within cakephp so if there's any specific cakey thing I can do that'd be awesome!
Copy all that JavaScript on your referenced page. Save to a new file slide.js or something like that.
Edit your HTML document to include a reference to the jQuery libraby, and that new JavaScript file you've just created:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://mysite.com/slide.js" />
You can put JavaScript in an external file with a .js extension, and include that in an HTML page using the script tag:
<script type="text/javascript" src="yourscript.js"></script>
Alternatively, you can write the script directly in the script element:
<script type="text/javascript">
//Your script here
</script>
Also note that as the tutorial you are following uses jQuery, you will need to download and include the jQuery library in your page.
The script tags can be placed anywhere in the document, but are usually found inside the head tag, or just before the closing body tag.
Welcome on SO Helen.
That script uses the jQuery library so you have to also include that. http://jquery.com/
JavaScript can best be placed in seperate file with the extension .js
Add the javascript files just before the </body> tag on your page like:
<script src="/js/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/js/jquery/jquery-slideshow2.js" type="text/javascript"></script>
I used a image gallery engine called prettyPhoto.js in a WordPress site that I was creating. However, for some strange reason the image gallery seems to have completely stopped working and I can't for the life of me find out how to rectify this problem (without explicitly going through the entire site and stripping out the rel="prettyphoto" tags embedded in all the image anchor links.
I am wondering if the javascript or the CSS is not being output to the browser properly, but taking a look at the "Net" panel in firebug, it seems to be loading these files without a problem. I tried having a look at the <a> link referencing the images to be opened, and they all had the required "prettyPhoto" attribute.
The page in question is
http://instant-wine-cellar.co.uk/products/microcellar and try clicking on any of the microcellar pictures.
Another is the "Watch Microcellar Video" link on the front page.
For those who do not know. This image gallery script, same with a lot of others, works by:
1. putting the prettyPhoto javascript file in your server.
2. putting the prettyPhoto css file in your server.
3. referencing the path to the above files into the head (or footer) of your html file.
4. triggering the process by putting some bespoke script into your HTML file to find the <a> tags in your file with a certain rel attribute and opening the link it references, into the prettyPhoto modal box.
At first include jquery.js then plugin.
Find:
<script src="http://instant-wine-cellar.co.uk/wp-content/themes/Wineconcepts/js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
Replace:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://instant-wine-cellar.co.uk/wp-content/themes/Wineconcepts/js/jquery.prettyPhoto.js" type="text/javascript"></script>