Why don't it work?

R

richard

http://1littleworld.net/modalbox/

Can't understand why the one link won't open the modal box.
The button works, the "demo" link works, the "example" link works, but "A
fool in love" does not?

Why?

To test, I put the "demo" in text inside a <ul> and the other inside a
<table>.
 
R

richard

http://1littleworld.net/modalbox/

Can't understand why the one link won't open the modal box.
The button works, the "demo" link works, the "example" link works, but "A
fool in love" does not?

Why?

To test, I put the "demo" in text inside a <ul> and the other inside a
<table>.
Click to expand...

BTW, don't go flaming me because I didn't properly close the <br> tags.
This is purely a test to find out why it don't work right.
 
B

BootNic

What is the button suppose to do? It does nothing at all when clicked.

All three links works exactly the same. They all take the page to the top.
BTW, don't go flaming me because I didn't properly close the <br>
tags. This is purely a test to find out why it don't work right.
Click to expand...

Interesting.


--
BootNic http://bootnic.bounceme.net Fri Feb 18, 2011 02:28 am
"So tell me, just how long have you had this feeling that no one is watching
you?"
*Christopher Locke: Entropy Gradient Reversals*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.10 (GNU/Linux)

iEYEARECAAYFAk1eH6cACgkQmo2774GZ7qmGIwCgqtjV/gvflp9MBJSLwGOjBw2a
O4cAoJ+AnZrcloXj6RFeaB9j7ZufxiTX
=9OAk
-----END PGP SIGNATURE-----
 
R

richard

What is the button suppose to do? It does nothing at all when clicked.

All three links works exactly the same. They all take the page to the top.


Interesting.
Click to expand...

What browser are you using? Works in FF3 and IE8.
You should get a popup box and the background changes color.
Try turning your javascript on.
 
P

P E Schoen

"richard" wrote in message
http://1littleworld.net/modalbox/
Click to expand...
Can't understand why the one link won't open the modal box.
The button works, the "demo" link works, the "example" link
works, but "A fool in love" does not?
Click to expand...

I'm not really familiar with modal dialogs and CSS, but I found some
possibly helpful references:

http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/
http://gabrito.com/files/subModal/

and I made a really simple example from the first link above, with
everything in one small file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Basic Modal Dialog </title>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">

<script type="text/javascript">
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" :
"visible";
}
</script>

<style type="text/css">
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
}

#overlay div {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}

body {
height:100%;
margin:0;
padding:0;
}
</style>

</head>
<body>
My Body Text <br />
<a href='#' onclick='overlay()'>Click here to show the overlay</a>

<div id="overlay">
<div>
<p>Content you want the user to see goes here.</p>
Click here to [<a href='#' onclick='overlay()'>close</a>]
</div>
</div>

</body></html>
 
R

richard

"richard" wrote in message
http://1littleworld.net/modalbox/
Click to expand...
Can't understand why the one link won't open the modal box.
The button works, the "demo" link works, the "example" link
works, but "A fool in love" does not?
Click to expand...

I'm not really familiar with modal dialogs and CSS, but I found some
possibly helpful references:

http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/
http://gabrito.com/files/subModal/

and I made a really simple example from the first link above, with
everything in one small file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Basic Modal Dialog </title>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">

<script type="text/javascript">
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" :
"visible";
}
</script>

<style type="text/css">
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
}

#overlay div {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}

body {
height:100%;
margin:0;
padding:0;
}
</style>

</head>
<body>
My Body Text <br />
<a href='#' onclick='overlay()'>Click here to show the overlay</a>

<div id="overlay">
<div>
<p>Content you want the user to see goes here.</p>
Click here to [<a href='#' onclick='overlay()'>close</a>]
</div>
</div>

</body></html>
-----------------------------------------------------------------------

I'd be interested to learn why your last link doesn't work.

Paul
Click to expand...

As a certain person once said, "Very elementary my good dr. watson".
I moved the </div> tag below the table so the table would appear inside
that division and now it works just fine.
IOW, my table was not visible to the code.
 
D

dorayme

... I made a really simple example from the first link above, with
everything in one small file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ....
<body>
My Body Text <br />
<a href='#' onclick='overlay()'>Click here to show the overlay</a>
Click to expand...
</body></html>
Click to expand...
Someone is putting character data (your text), against the rules
for that doctype, in body. Nor is it allowed to have inline
elements like the anchor loose in body. Nor the break element.
Which should not be typed like this for this doctype, it should
be <br>
 
R

richard

Someone is putting character data (your text), against the rules
for that doctype, in body. Nor is it allowed to have inline
elements like the anchor loose in body. Nor the break element.
Which should not be typed like this for this doctype, it should
be <br>
Click to expand...

blame that on old habits. With the editor I use, it automatically includes
the / if the document needs it. As for the anchor, hell, every browser
since day one has had them and should be allowed regardless of document.
 
D

dorayme

richard said:
.

blame that on old habits. With the editor I use, it automatically includes
the / if the document needs it. As for the anchor, hell, every browser
since day one has had them and should be allowed regardless of document.
Click to expand...

Thanks for the information about anchors, did not know that. I
will get my HTML camera onto various browsers, new and old, and
examine the matter more microscopically, the smaller ones are
probably easily missed with the naked eye. Hang on, a loose
anchor, not even in any HTML element, just zipped past my desk.
Oh no, it is hassling the cat... that is going too far... got to
sort this...
 
R

richard

Thanks for the information about anchors, did not know that. I
will get my HTML camera onto various browsers, new and old, and
examine the matter more microscopically, the smaller ones are
probably easily missed with the naked eye. Hang on, a loose
anchor, not even in any HTML element, just zipped past my desk.
Oh no, it is hassling the cat... that is going too far... got to
sort this...
Click to expand...

how about sharin some of that stuff you're drinkin or smokin?
or quit playing with the cat's toy that's embedded with catnip.
 
P

P E Schoen

"richard" wrote in message
As a certain person once said, "Very elementary my good dr.
watson". I moved the </div> tag below the table so the table
would appear inside that division and now it works just fine.
IOW, my table was not visible to the code.
Click to expand...

Heh. Believe it or not, that's what I was going to suggest, but since I'm
not (yet) familiar with this, I figured I'd wait until others had chimed in,
or you fingered it out.

Way to go!

Paul
 
P

P E Schoen

"dorayme" wrote in message
Someone is putting character data (your text), against the
rules for that doctype, in body. Nor is it allowed to have
inline elements like the anchor loose in body. Nor the
break element. Which should not be typed like this for
this doctype, it should be <br>
Click to expand...

OK, thanks. I just very quickly threw that together and posted it as a
simple example. I usually use the validator for "live" HTML. I'm not sure I
have a need for modal dialogs, but I can see they can be useful. Mostly I'm
working on a PHP server side script now, to store event information (for
local Sierra Club) in an SQLite database and display it in a visually
appealing and consistent manner.

I'm also webmaster for another group and they decided to use:
http://sites.google.com/site/baltimoregreenforum/

Paul
 
D

dorayme

"P E Schoen said:
"dorayme" wrote in message


OK, thanks. I just very quickly threw that together and posted it as a
simple example. I usually use the validator for "live" HTML.
Click to expand...

I have found it particularly lively for "dead" HTML. I know, I
know, it's both amazing and disgusting at the same time. <g>

....
I'm also webmaster for another group and they decided to use:
http://sites.google.com/site/baltimoregreenforum/
Click to expand...

Since you mention it, this live site does not validate but that
may be because of the hosting rather than anything the author
(you?) has positively done. Have not examined it at all, the
source is too crowded with js and the css too googlified for me!

Just a stray remark: Text looks bad in various ways when users
use larger text than they you seem to be expecting, this is
surely nothing to do with hosting but I don't know. Looks like an
inappropriate line-height has been set, as well as other
inappropriate restrictions.
 
P

P E Schoen

"dorayme" wrote in message
I have found it particularly lively for "dead" HTML. I know, I
know, it's both amazing and disgusting at the same time. <g>
Click to expand...

It might be a zombie...
Since you mention it, this live site does not validate but
that may be because of the hosting rather than anything
the author (you?) has positively done. Have not examined
it at all, the source is too crowded with js and the css too
googlified for me!
Click to expand...

Everything is rather tightly controlled with their CMS. I did use their HTML
editor to adjust the home page (which is also our monthly flyer). I copied
it originally from an HTML (Rich Text) email, and some of the lines of text
overlapped, so I added an extra line to space them better (but now the lines
are too far apart). It's between these lines:

Environmental Legislation in the
Maryland General Assembly

Yeah, 700+ lines of HTML and JS is a lot to wade through. I like some of the
comments in the CSS around line 114:

/* (midoringo) This fixes bug 1867401, seems like position: static fixes
some */
/* IE RTL problem, but I don't know how exactly this fix the problem. */
#body .modal-dialog-title {
/* position: static; */
zoom: 1;
}

#body .sites-format-menu {
/* IE 6 hack - otherwise it renders the menu at 100% screen width for some
reason */
_width: 20em;
}
Just a stray remark: Text looks bad in various ways when
users use larger text than they you seem to be expecting
this is surely nothing to do with hosting but I don't know.
Looks like an inappropriate line-height has been set, as
well as other inappropriate restrictions.
Click to expand...

Yes, and I don't know if it can be fixed. It probably has something to do
with the CSS and I can only edit the portion of HTML starting around line
491. Even there it seems like it scanned the changes I made and "adjusted"
them. It also complained about "unsafe code", which I think it considers as
anything that has not been uploaded to their server.

Overall, their website builder is probably as good as need be for casual
users, and it's probably easier (and safer) for amateurs to add and change
content. I'm the webmaster, but the login has been given to our planning
committee of a dozen people or so, and the idea was to allow them to have
control of the content.

Paul
 
D

dorayme

"P E Schoen said:
"dorayme" wrote in message
....


Yes, and I don't know if it can be fixed.
Click to expand...

Try adding, at the end of all the css,

* {line-height: 1.3;}

as a test.
 
P

P E Schoen

"dorayme" wrote in message
Try adding, at the end of all the css,
Click to expand...
* {line-height: 1.3;}
Click to expand...
as a test.
Click to expand...

I had to put it inside of a <style type = "text/css"> </style> pair because
the HTML editor only allows editing the main page HTML section. The preview
looked OK, but it didn't seem to change much if I changed it to 1.1 or even
0.9. Then when I tried to save it, I got the message that the "unsafe" tags
would be removed, and I got the ugly overlapped text again. So I used the
following ugly hack:

<FONT size=6>Environmental Legislation in the</FONT> <FONT size=2>&nbsp;
<BR>
</FONT><FONT size=6>Maryland General Assembly</FONT>

Google's net-nanny strikes (out) again!

Paul
 
A

Andy

richard said:
"richard" wrote in message
http://1littleworld.net/modalbox/
Click to expand...
Can't understand why the one link won't open the modal box.
The button works, the "demo" link works, the "example" link
works, but "A fool in love" does not?
Click to expand...

I'm not really familiar with modal dialogs and CSS, but I found some
possibly helpful references:

http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/
http://gabrito.com/files/subModal/

and I made a really simple example from the first link above, with
everything in one small file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Basic Modal Dialog </title>
<meta http-equiv="content-type" content="text/html;
charset=windows-1252">

<script type="text/javascript">
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" :
"visible";
}
</script>

<style type="text/css">
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
}

#overlay div {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}

body {
height:100%;
margin:0;
padding:0;
}
</style>

</head>
<body>
My Body Text <br />
<a href='#' onclick='overlay()'>Click here to show the overlay</a>

<div id="overlay">
<div>
<p>Content you want the user to see goes here.</p>
Click here to [<a href='#' onclick='overlay()'>close</a>]
</div>
</div>

</body></html>
-----------------------------------------------------------------------

I'd be interested to learn why your last link doesn't work.

Paul
Click to expand...

As a certain person once said, "Very elementary my good dr. watson".
I moved the </div> tag below the table so the table would appear inside
that division and now it works just fine.
IOW, my table was not visible to the code.
Click to expand...

Yeah,

It was me, I posted the following in comp.infosystems.www.authoring.html at
9:43 which you read at 9:44 then posted the above at 9:45 :)


Hi,

Cut this <div> near the top...

<table><tr><td><ul><li><a href='#'
class='basic'>example</a></li></ul></td></tr></table>
</div>

.... and paste it just above the opening modal div like so...

</div>

<!-- modal content -->
<div id="basic-modal-content">

Hope this helps

Andy
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

JS querySelector addEventListenerer index getElementsByClassName parent div only 1
Is it possible an iframe can overlapp another? 3
Popup HTML help 5
I need help fixing my website 2
Why is the e.target not working here? 1
Why does my php code work on some websites but not others. 1
Javascript scroll to sections and also scroll to section but open relevant nav-tab 4
Working on mobile css menu with plenty of frustration! 2

Members online

No members online now.
Total: 16 (members: 0, guests: 16)
Robots: 374

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,014
Latest member
BiancaFix3

Latest Threads

Top