Assume that I have following HTML file:
**
main.html
**
<html>
<body>
<ul>
<li>Element to drag</li>
</ul>
<iframe src="demo.html">
</iframe>
</body>
</html>
demo.html (iframe code)
<body class="iframe">
</body>
I'm using jquery UI for drag and drop (Link)
And assume that all javascript files are included in main.html and demo.html
Any help would be great helpful !!!
Thanks
I had the same problem and manage to do it this way.
Consider the draggable element in your main file normally and refer to the iframe droppable elements with
$( 'your-iframe' ).contents().find( 'elments-you-want-droppable' ).droppable({
// droppable settings here as normal
});
Related
[EDIT: I have possibly found another solution. Kooilnc's solution looks good. Is the solution at the bottom of this question better or worse than Kooilnc's?]
I have a div with associated javascript code. I would like to have the html for just this div and the associated javascript code all in one file, a kind of self contained 'module', eg
mydiv.html
<html>
<div id="Wibble" style="display: none;">
... loads of structure for just this div
</div>
<script type="text/javascript">
... loads of js functions just associated with this div
</script>
</html>
Then in my main page index.html I would like to include this 'module' in some way.
The only thing I have found is a Server Side Include:
index.html
<!DOCTYPE html>
<html>
<head>
... loads of stuff
</head>
<body>
... loads of other html structure
<!--#include FILE="mydiv.html" -->
... loads of other html structure and script tags
</body>
</html>
Question 1: Is there a better way of doing this?
Question 2: Should I have the html tag in mydiv.html as that will obviously put an html tag in index.html which is out of place?
Question 3: If that html tag in Q2 should not be there, how do I write the mydiv.html file so it has all the formatting and nice coloured structure in Visual Studio Code?
Edit:
Kooilnc's solution (below in the answers) looks good. Here is another solution I have found. It is working in my development environment Visual Studio Code. I need the javascript in my included html file in body's onload. Does anyone know if this solution will work on a server with my body onload requirement? Is it better or worse than Kooilnc's solution?
Jquery must be included with the normal <script> tag prior to this.
I insert this code within index.html
<!DOCTYPE html>
<html>
<head>
... loads of stuff
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</head>
<body>
... loads of other html structure
<div id="include_mydiv"></div>
<script>
$(function(){
$("#include_mydiv").load("mydiv.html");
});
</script>
... loads of other html structure and script tags
</body>
</html>
And mydiv.html did not have any <html> tags:
<div id="Wibble" style="display: none;">
... loads of structure for just this div
</div>
<script type="text/javascript">
... loads of js functions just associated with this div
</script>
You can try importing from template elements. Here is a simplified templating example that may be useful.
If you need to import from an external file, check this example I cooked up for you.
document.querySelectorAll(`[data-import]`).forEach( el => {
if (!el.dataset.imported) {
el.appendChild(document.querySelector(`#${el.dataset.import}`)
.content.cloneNode(true));
el.dataset.imported = `ok`;
}
});
<template id="someForm">
<script>
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.nodeName === `BUTTON`) {
alert(`Yes. I am handled`);
}
}
</script>
<button id="sub">Handle me!</button>
</template>
<template id="somethingElse">
<style type="text/css">
.red {color: red;}
</style>
<p class="red">I am appended too</p>
</template>
<div data-import="someForm"></div>
<div data-import="somethingElse"></div>
Use an Iframe
<iframe id="inlineFrameExample"
width="300"
height="200"
src="mydiv.html">
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
I'm struck in a project, I need to develop a project as agenty chrome extension, where it uses point and click css selector. First I have used iframe to display a site but I faced cross origin and security issues. Now I'm using object tag to display a site and I want to make like point and click css selector on a button click.
Here is my sample code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
$('#dragit').click(function(){
// make $("#dvSource") to point and click css selector
});
});
</script>
</head>
<body>
<input type="submit" id="dragit" value="DragValues" />
<div id="dvSource">
<object type="text/html" data="http://validator.w3.org/" width="100%" height="600px" id="test">
</object>
</div>
</body>
</html>
I have placed in div (dvSource) and I have a button with id dragit, once I click that button I want to make point and click css selector for dvSource content
I have problem with jquery.
I want change link to src when is only "document.write".
My code:
myscript.js
document.write("TEST ABCD");
test.html
<html>
<body>
<button id="example">click me</button>
<div>my site example text</div>
<div id="my_div_important">
Old test
</div>
<script>
$(function(){
$('#example').on('click',function(){
$('<script>').attr('src', 'http://example.com/script.js').appendTo('#my_div_important');
});
});
</script>
</body>
</html>
If click "#example" than in page write: TEST ABCD but all the rest is HIDDEN... URL is to same (no redirect).
When is problem?
--- UPDATE
I want to do a widget where users will use on their sites.
The panel of users want to do a preview of different sizes and therefore need to update the script SRC tag script (example.com/widget/normal/250|300 itp.)
document.write deletes all the content if your page is already fully loaded (as you do a write on the document object).
Also you should use jQuery.getScript() for dynamic loading of scripts.
I am making an application where a header with some Menus and a footer will stay in all the pages.
Now one way to this is write the code for header and footer in every page, which is a bad option.
The other option is using iframe,which I am using. here is my code-
<div style="height:75%;width:98%;">
<iframe name="someFrame" id="someFrame" frameborder="0" scrolling="yes" width="98%" height="100%"></iframe>
</div>
In this iframe I am calling the the contents of the other pages. I have one home page with a header and footer, and the middle portion will change using iframe.
To achieve the overlapping of iframes perfectly I use a jquery function which is below.
<script>
$("a").click(function(e) {
e.preventDefault();
$("#someFrame").attr("src", $(this).attr("href"));
$("a").removeClass("active");
$(this).addClass("active");
})
</script>
Now what I need is - is there any other way to do it?? That I can make 2 different pages for header and footer, and get the contents in every page? using java?? or ajax or whatever.. Any help will be appreciable...
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.html",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("External content loaded successfully!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
demo_test.html
<h1>I am not part of this page</h1>
There is another way to solve your difficulty.create a html file for menu named navbar_menu.html
navbar_menu.html
<ul>
<li>Home</li>
<li>About Us</li>
<li>Ticket Sales</li>
<li>Merchandise
<ul>
<li>Products</li>
<li>Shopping Cart</li>
</ul>
</li>
<li>Past Shows
<ul>
<li>Photo Gallery</li>
<li>Video Clips</li>
</ul>
</li>
</ul>
In another html page say index.html. In index.html page code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$.get("navbar_menu.html", function(data) {
$("#header").html(data);
});
});
</script>
</head>
<body>
<div id="header"></div>
</body>
</html>
The standard way to achieve this would be to use PHP. In the page where you want the header html included add in: <?php include 'header.html';?> Then change the extension of the pages you put this code into to .PHP instead of .HTML .
You can use jquery load function to load the content into a container div.This way we can have separate fragments for header and footer and be reused across pages
For example
$('#headercontainer').load('ajax/header.html #header')
Please see
[http://api.jquery.com/load][1]
Hope this helps
Why not just use Asp.net with master pages. You can have a desktop and a mobile master page where you write the header, menu and footer once, then you just add content pages.
It also gives you a programming language to use. C# will allow you to do way more than just HTML and JavaScript. Plus you can setup web user controls and black box your controls.
If youre interested check out the free microsoft IDE at http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx
Is there a way to target an HTML element that is being pulled in dynamically via an iframe. I have an example below to illustrate what I would like to do:
<html>
<body>
<iframe>
<html>
<body>
<a id="id">I want to target this element</a>
</body>
</html>
</iframe>
</body>
</html>
#id{display:none;}
Note: I am open to use javascript or similar to target this element. Accessing the content from the source is not an option.