Forgive me if this is a newbie question - but sadly that's what I am.
I have an index.html containing two divs (id's #A and #B). From the main page I can click a link to be opened in div #A using the following:
link in index
function load_A(page)
{
parsedhtml='<object type=text/html data="'+page.href+'"><\/object>';
document.getElementById("A").innerHTML=parsedhtml;
}
So far so good. But now I want to click a link inside div #A to open in div #B. I tried the following:
link in A
function load_B(page)
{
parsedhtml='<object type=text/html data="'+page.href+'"><\/object>';
document.getElementById("B").innerHTML=parsedhtml;
}
All this does is open the second link inside div #A.
I suspect there is something wrong with the scoping of the div id's, but I can't figure out how to remedy it.
Thanks in advance for taking pity on me!
EDIT: minimal html example using the above functions
Here is the index.html:
<html>
<head>
<script src="funs.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
link_to_A
<div id=A>one</div>
<div id=B>two</div>
</body>
</html>
where funs.js contains the functions load_A() and load_B() above. The divs are described in style.css:
#A { position: absolute; top: 10%; left: 10%; width: 20%; }
#B { position: absolute; top: 10%; right: 10%; width: 20%; }
and the files one.html:
<html>
<head>
<script src="funs.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Contents of one.
link_to_B
</body>
</html>
and two.html:
<html>
<head>
<script src="funs.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Contents of two
</body>
</html>
Thanks again for your help!
If you aren't getting a javascript error then it probably means that your script is grabbing some other element. Check your entire html page and make sure that you do not have any other elements (not just divs) on the page with the id of 'B'.
Also, make sure that you don't have any malformed html. A missing or mismatched closing tag and div #B does not exist in the DOM.
It would also help if you could post the full html related to the divs.
After much trial-and-error and some judicious Googling I realised that my load_B() function should get look for the element id in the parent of the current div:
function load_B(page)
{
parsedhtml='<object type=text/html data="'+page.href+'"><\/object>';
parent.document.getElementById("B").innerHTML=parsedhtml;
}
Related
This might be a bug but I have no idea what I'm doing wrong.
I went to the trouble of making a JS Fiddle and sadly it's behaving fine there, but if you take the exact code and run it locally in chrome, the jqUI handles are all sitting at the top of the element instead of the outer edges? Here's the fiddle:
https://jsfiddle.net/ceL1j3kL
For sanity sake, I'm including a screen image of this behavior when I run it locally.
Does anyone know how to keep the handles in place when dynamically creating elements that are going to utilize the handles?
Heres the full source I'm working with:
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/style/chat.css" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="/scripts/test.js"></script>
</head>
<body>
</body>
</html>
css
html,
body {
height: 100%;
overflow: hidden;
margin:0;
padding:0;
}
js
$(document).ready(function(){
let c = $('<div id="container" style="width: 75%; height: 75%; background-color: black;">');
c.appendTo($('body'));
c.draggable({
containment: 'body'
});
c.resizable({
handles: 'all'
});
});
image of the behavior i'm seeing when running locally. you can see i'm hovering in the image over the south handle, which is at the north of the element and is not clickable....
You have to add jquery-ui.css reference in your project, for example:
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
I'm new to CoffeeScript and JS. I'm trying to create an alert when a div is clicked, but I'm not sure why my code isn't working. All of these files are in the same directory.
first.coffee
$('#button').on 'click', -> alert 'Hello World!'
I've tried this with and without the hash before button.
And after compiling this:
first.js
// Generated by CoffeeScript 1.12.4
(function() {
$('#button').on('click', function() {
return alert('Hello World!');
});
}).call(this);
And the HTML looks like this. I've tried moving the script to the header too but I don't think that makes a difference.
first.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CoffeeScript</title>
<link rel="stylesheet" type="text/css" href="first.css">
</head>
<body>
<div id='button'></div>
<script src='first.js'></script>
</body>
</html>
And the styling for the div:
first.css
#button {
width: 100px;
height: 100px;
background-color: black;
}
You need to add a reference to the jQuery javascript libraries before your script
<body>
<div id='button'></div>
<script src='/path/to/jquery-3.1.1.min.js'></script>
<script src='first.js'></script>
</body>
You will need to download jQuery to your system and provide the correct path.
I am new to this site and to jQuery and I have a problem that is probably very simple but I cannot for the life of me solve it. I am running "index.html" from my computer and jquery.js (downloaded from jquery's website) is absolutely in the same folder and it seems to be referenced correctly in my code.
It was only meant to be a simple thing of clicking on a div and it would fade out. I really don't understand why it doesn't work.
Sorry if this is a really basic question, I have looked around the site and searched a lot.
index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="/jquery.js" type="text/javascript"></script>
<script src="/script.js" type="text/javascript"></script>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
</body>
</html>
style.css
div {
height: 300px;
width: 300px;
border: 2px solid black;
border-radius: 100%;
display: inline-block;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
script.js
$(document).ready(function() {
$('div').click(function() {
$('div').fadeOut('slow');
});
});
http://jsfiddle.net/ou43epos/
Try changing
<script src="/jquery.js" type="text/javascript"></script>
<script src="/script.js" type="text/javascript"></script>
to
<script src="jquery.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
The leading slash makes your browser look in the file system root. Without the slash, it'll load from the current (index.html) directory.
I just solved it! It was simple.. I put "/" before script and jquery. I didn't realise I could use the network tab to see what files were loaded.
Such a basic error but it drove me crazy for a long time! Such is life :).
Thanks all (especially #Juhana)
Using src="/jquery.js" to load your scripts results in your browser trying to load file:///C:/jquery.js. Change it to src="jquery.js".
As Mark Byers said in this answer:
If your browser is currently pointing at http://foo/bar/baz.html then:
• <a href="reset/index.html"> would link to http://foo/bar/reset/index.html.
• <a href="/reset/index.html"> would link to http://foo/reset/index.html.
The link of 'A' tag doesn't work correctly. Does anyone explain this behavior?
Here is the NG sample -> http://hovertest.dyndns.org/ng/main.html
Visit from iPhone(or iPad) safari and scroll the iframe and click 'NIGHT' link at the bottom of the iframe page.
It will not go to 'night.html'. (You may get the top of the same page. This is wrong behavior.)
But, It will work correctly after removing the 'background' of 'a:hover' from CSS.
I can't understand at all.
Here is the good sample -> http://hovertest.dyndns.org/ok/main.html
main.html
<html>
<head>
<title>NG LINK </title>
<script type="text/javascript"></script>
</head>
<body>
Main
<div style="height: 50%; overflow: scroll; -webkit-overflow-scrolling: touch;">
<iframe src="./content.html" />
</div>
content.html
<html>
<head>
<LINK href="hover.css" rel="stylesheet" type="text/css">
<body>
MORNING
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
NIGHT
</body>
</html>
hover.css
a:hover {
color: yellow;
background: red;
}
At first, I tried to remove 'a:hover' of CSS from 'main.html' by jQuery.
But, I couldn't get rid of this problem.
I can't change 'content.html' and 'hover.css' for other reasons.
Do you have any ideas for avoiding this issue? or explain this behavior?
Thanks,
Y.Sato
Hi all I'm trying to use dijit from the dojo library and trying to use the Calendar component. I followed the code as it is in the online documentation but it just doesn't seem to work. Below is the code that I'm using:
<html>
<head>
<link rel="stylesheet" type="text/css" href="dijit/themes/claro/claro.css"
/>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<style type="text/css">
.claro table.dijitCalendarContainer { margin: 25px auto; } #formatted
{ text-align: center; }
</style>
</head>
<body class=" claro ">
<div dojoType="dijit._Calendar" onChange="dojo.byId('formatted').innerHTML=dojo.date.locale.format(arguments[0], {formatLength: 'full', selector:'date'})">
</div>
<p id="formatted">
</p>
</body>
<script type="text/javascript" src="js/dojo.js" djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // loads the optimized dijit layer
dojo.require("dijit._Calendar");
</script>
</html>
Using firebug it shows the following error:
Could not load 'dijit._Calendar'; last
tried '../dijit/_Calendar.js'
Please can anyone help me on this. I really want to make this work.
Thanks in advance.
Your tree appears to have been changed, or at least you relocated the copy of dojo.js from the standard distribution. You should include dojo as "dojo/dojo.js" It will then use that reference to find relative urls in the tree, like ../dijit/_Calendar.js