homepage Welcome to WebmasterWorld Guest from 54.161.228.29
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Keeping Images 'inline'
icon_kid




msg:4606518
 4:25 am on Sep 1, 2013 (gmt 0)

Keeping Images 'inline'

I'm doing a project that uses a 'Show/Hide' Javascript. A problem is that images behave as inline elements (as they typically should) when they are toggled to 'hide,' but when an image is toggled to 'display' it takes on the characteristic of a block element -- moving to the beginning of a new line alone -- with whatever coming after it also starting a new line. There must be the right CSS or HTML code to force images to always stay inline.

I tried adding "display:inline" to a line in my CSS like this:

p {margin-left: 0px; margin-right: 0px; display:inline;}
...but that didn't work.

A simplified example of what's in the BODY is this:

<div class="row"><nobr>
<img src="1.png"
/><img src="2.png"
/><img src="3.png id="sussman"
/><img src="4.png"
/><img src="5.png"/>
</nobr>
</div>


The layout of these five images looks like this (with all images hidden):

[1] [2] [3] [4] [5]

...but if I toggle image no. 3 (let's say) to 'display,' the layout changes to this:

[1] [2]
[3]
[4] [5]


The third image has an 'id' for the Javascript to link it to the correct toggle input for that particular image -- the inputs are checkboxes.

The [div class="row"] is there because it was the only thing I could find that would make images fit end-to-end with no space around them, which the type of project I'm working on requires. Lately, I came across this:

<div class="nospace">

...which was another answer to the question of how to illiminate empty space around images. Even though "row" did the job, I tried "nospace" out of curiosity -- and "nospace" didn't work -- go figure.

I don't see a need, at this point, to show the Javascript for the 'show/hide' function -- the solution to the problem should be found within HTML or CSS, or so I believe.

 

rainborick




msg:4606522
 5:24 am on Sep 1, 2013 (gmt 0)

If your JavaScript toggles the value of the 'display' property on the <img> elements, then no variation in your stylesheet will help. I suspect that the JavaScript you found toggles between 'none' and 'block', and it's the latter that's giving you trouble. If you replace 'block' with 'inline', that may well solve the problem, but without seeing the JavaScript and the actual HTML involved it's impossible to say for sure.

lucy24




msg:4606534
 7:24 am on Sep 1, 2013 (gmt 0)

the question of how to [e]liminate empty space around images

img {margin: 0; padding: 0;}

The opposite of {display: none;} isn't {display: yes;}. It's {display: some-word-here;}. If you're using generic out-of-the-box javascript it may use {display: block;} because that's what you would want for an ordinary element such as a paragraph or div. But you have to change it to match the item you're hiding and displaying, whether it's "block" or "inline" or "list-item" or "table-cell" or ...

Terms like "div class = 'row'" and "div class = 'nospace'" don't mean anything if we can't see the CSS they belong to :(

drhowarddrfine




msg:4606589
 3:01 pm on Sep 1, 2013 (gmt 0)

Don't be using non-standard elements like <nobr>.
There is no closing slash on <img> for html.

icon_kid




msg:4606609
 8:51 pm on Sep 1, 2013 (gmt 0)

OK -- I'll have to show the scripts to get more focused help.
My CSS was this:

<style type="text/css">
<!--
HTML{
scrollbar-3dlight-color:#C6C6C6;
scrollbar-arrow-color:#FFFFFF;
scrollbar-face-color:#5A5A5A;
scrollbar-track-color:#1F1F1F;
scrollbar-highlight-color:#808080;
scrollbar-shadow-color:#484848;
scrollbar-darkshadow-Color:202020;
}
.row {
line-height:0;
}
p {margin-left: 0px; margin-right: 0px; display:inline;}
-->
</style>


The Show/Hide script is this:

<script type="text/javascript">
window.onload=function() { attachBehaviors(); }
function attachBehaviors() {
// only doing one here, but you can add others
if (
document.getElementById('toggle_chk') &&
document.getElementById('sussman')
) {
document.getElementById('sussman').style.display='none';
document.getElementById('toggle_chk').onclick=function() {
toggle_image(this);
};
}
}
function toggle_image(chk) {
document.getElementById('sussman').style.display=(chk.checked)?'block':'none'; }
</script>


Don't be using non-standard elements like <nobr>.

I didn't know that <nobr> isn't good to use anymore.
My project is a strange one -- let's say I have 2,500 images in one document (the real count is over 4,000). The images are arranged in fifty rows -- each row contains fifty images. All the images are 17x17px and there must be no empty spaces around them. Of the 2,500 images only around one hundred will be used -- the rest being mere place holders in a grid work that covers a background street map image of Brooklyn, NY -- those unused images are actually the same image repeated. I'm using <nobr> so that all the images in each row will stick together regardless of window resizing -- they must not wrap to the size of the browser window. What else should I use besides <nobr> to accomplish this?

There is no closing slash on <img> for html.

Yes, that is true, and that's why I thought it was odd to see closing slashes in a code I found for eliminating empty space around images -- using <DIV>. I tried other things with no success before finding that this worked:

<div class="row"><nobr>
<img src="blank-1.png">
<img src="blank-2.png">
<img src="blank-3.png">
</nobr>
</div>

<div class="row"><nobr>
<img src="blank-4.png">
<img src="blank-5.png">
<img src="blank-6.png">
</nobr>
</div>


Also, nothing changed after I removed the closing slashes so I'll leave it that way.

The <DIV> code above renders six images to the document -- two rows of three each with no vertical space between rows. Removing the DIV tags like this:

<nobr>
<img src="blank-1.png">
<img src="blank-2.png">
<img src="blank-3.png">
</nobr>

<nobr>
<img src="blank-4.png">
<img src="blank-5.png">
<img src="blank-6.png">
</nobr>


... renders two rows but with five pixels of empty vertical space separating one row from the one above it or below it.
I don't know how or why the presence of DIV tags eliminates the space between rows but when something works for you, you are usually not interested in knowing exactly why -- it's when something is not working that you strongly focus on it.

img {margin: 0; padding: 0;}

Before trying this in my CSS I removed all the DIV tags and checked the result -- each row was now back to being separated from the one above it (or below it) by exactly five pixels though the images remained shoulder-to-shoulder in their rows. Why is it five pixels anyway?

Then I added the 'margin and padding' atributes for 'img' like this:

<style type="text/css">
<!--
HTML{
scrollbar-3dlight-color:#C6C6C6;
scrollbar-arrow-color:#FFFFFF;
scrollbar-face-color:#5A5A5A;
scrollbar-track-color:#1F1F1F;
scrollbar-highlight-color:#808080;
scrollbar-shadow-color:#484848;
scrollbar-darkshadow-Color:202020;
}
.row {
line-height:0;
}
p {margin-left: 0px; margin-right: 0px; display:inline;}
img {margin: 0; padding: 0;}
-->
</style>


When I refreshed the page with the new code nothing changed -- rows were still separated by five pixels, and images still transformed into block elements just by calling for them to be rendered to the browser screen.

lucy24




msg:4606624
 9:59 pm on Sep 1, 2013 (gmt 0)

<nobr> is an ancient tag that browsers have to recognize because it still shows up. It's equivalent to
{white-space: nowrap;}
in CSS. Frankly here I don't think it's even appropriate. (Places I've personally used it: table cells that need to stay on one line; leading hyphens that need to stay with the following text; uh... That's about it.) What if the viewport dimensions call for narrower wrapping?

It sounds as if you're cutting and pasting a lot of code from different places. The sources may not know what they're doing, but that doesn't mean you have to sink to their level.

In XHTML everything has to be "closed", so <br /> <img /> and so on. In HTML this rule doesn't exist. Use the form that matches your overall DTD.

I don't know how or why the presence of DIV tags eliminates the space between rows but when something works for you, you are usually not interested in knowing exactly why

Eventually you need to find out, because it may turn out that the reason it works is different from what you thought, and then if you change something seemingly unrelated it stops working.

Why is it five pixels anyway?

Line height is determined by the current font size-- more exactly, by the size of the biggest font in a given physical line-- with added tweaks for sub- and superscripts. Set your browser to a much bigger text size and you'll probably count more pixels. An image is technically an inline element, so it's up to the browser to decide how much "leading" (whitespace between lines) it gets.

What happens if your 3x2 layout is displayed on a device that doesn't have room for three images in a row? Or, alternately, does have room for all six at once?

p {margin-left: 0px; margin-right: 0px; display:inline;}

Why is this here? Please answer something other than "Because it was in my source." 0 is the default value for paragraph margins*; display:inline is emphatically not the default for paragraphs. And this isn't p.some-class-name, it's p in general.


* Also for everything else that has a margin. I just re-checked.

drhowarddrfine




msg:4606647
 12:26 am on Sep 2, 2013 (gmt 0)

Remove the 'type="text/css" ' which hasn't been needed in years. Also remove the comment tag for the same reason.

Be aware that scrollbar CSS properties are also non-standard and only work in IE and, possibly Opera, but nowhere else.

Also, nothing changed after I removed the closing slashes so I'll leave it that way.
Because browsers will make wasted effort to correct your error instead of doing their job. It's part of what's called "tag soup".

I don't know how or why the presence of DIV tags eliminates the space between rows but when something works for you, you are usually not interested in knowing exactly why -- it's when something is not working that you strongly focus on it.
Speak for yourself.

The reason is div elements are block level and images are inline and have baseline height to allow for font drop downs (the name of which I can't think of cause I've been drinking wine and why I'm in no shape to correct or test your markup). Try adding 'vertical-align:bottom' to your CSS for the images and see what happens in your markup without the divs.

icon_kid




msg:4606818
 7:42 pm on Sep 2, 2013 (gmt 0)

{white-space: nowrap;}

It would seem that putting this in my CSS would place all 50 rows end-to-end -- one line of 2,500 images. They need to be 50 to a row and then break off to start the next row of 50. Before I started using <div class="row"> I used <br> for line breaks but since each DIV starts a new line anyway, I dropped the <br> tags.

Line height is determined by the current font size...

I changed the font size from 3 to 1 (which renders a character smaller than a 17-pixel image) and I also removed all the DIV tags from the document and tested that -- the result was still 5 pixels of empty vertical space between rows.

What if the viewport dimensions call for narrower wrapping?

That has not been a problem. The background image is 1367 X 1465 -- larger than most screen resolutions. When the page loads, scrollbars appear automatically. The page is meant to be scrollable, and, since it's doing that, there is no issue with it.

Why is this here?
p {margin-left: 0px; margin-right: 0px; display:inline;}

It's there because I had used this line in another document where some amounts of margin were needed. In documents where I don't need margins I put it at '0' so that I don't have to look for the syntax again when I do need margins again. The syntax of HTML comes to me by rote because I've been writing it for twelve years but that of CSS and Javascript don't because my projects rarely use them. I have removed the entire line from the document for neatness.

The reason is div elements are block level...

Well that's what I've been waiting to hear someone say unequivically -- so I'll go with that.
While I drank my beer, I
1) - removed all the DIVs from the document body.
2) - added to my CSS line-height:0
3) - added to my CSS margin: 0
4) - added to my CSS padding: 0
5) - added to my CSS vertical-align:bottom

So it now looks like this:

<style type="text/css">
.row {
line-height:0;
}
img {margin: 0; padding: 0; vertical-align:bottom; }
</style>

...and my font size is 1

lucy24's comment has come into play now:

...it may turn out that the reason it works is different from what you thought, and then if you change something seemingly unrelated it stops working.

My images were set as block elements all along because they were in DIVs -- they appear as inline elements only while they are not being displayed. So, as I thought of the problem being inline elements turning into blocks, the elements were born as blocks (being within DIVS) and then reduced to inline elements when not displayed. I need to start out with inline elements to get inline elements. Still, I've made six suggested changes so far which have not corrected two problems -- displayed images still behave as block elements even though they are no longer within DIVs, and the 5-pixel space remains between rows even though the font size (which determines the line height and is smaller than 17 pixels) is '1.' Is there anything else in our collective bag of tricks we have for solving these two problems.

icon_kid




msg:4606893
 10:52 pm on Sep 2, 2013 (gmt 0)

{white-space: nowrap;}

It would seem that putting this in my CSS would place all 50 rows end-to-end -- one line of 2,500 images. They need to be 50 to a row and then break off to start the next row of 50. Before I started using <div class="row"> I used <br> for line breaks but since each DIV starts a new line anyway, I dropped the <br> tags.

Line height is determined by the current font size...

I changed the font size from 3 to 1 (which renders a character smaller than a 17-pixel image) and I also removed all the DIV tags from the document and tested that -- the result was still 5 pixels of empty vertical space between rows.

What if the viewport dimensions call for narrower wrapping?

That has not been a problem. The background image is 1367 X 1465 -- larger than most screen resolutions. When the page loads, scrollbars appear automatically. The page is meant to be scrollable, and, since it's doing that, there is no issue with it.

Why is this here?
p {margin-left: 0px; margin-right: 0px; display:inline;}

It's there because I had used this line in another document where some amounts of margin were needed. In documents where I don't need margins I put it at '0' so that I don't have to look for the syntax again when I do need margins again. The syntax of HTML comes to me by rote because I've been writing it for twelve years but that of CSS and Javascript don't because my projects rarely use them. I have removed the entire line from the document for neatness.

The reason is div elements are block level...

Well that's what I've been waiting to hear someone say unequivically -- so I'll go with that.
While I drank my beer, I
1) - removed all the DIVs from the document body.
2) - added to my CSS line-height:0
3) - added to my CSS margin: 0
4) - added to my CSS padding: 0
5) - added to my CSS vertical-align:bottom

So it now looks like this:

<style type="text/css">
.row {
line-height:0;
}
img {margin: 0; padding: 0; vertical-align:bottom; }
</style>

...and my font size is 1

lucy24's comment has come into play now:

...it may turn out that the reason it works is different from what you thought, and then if you change something seemingly unrelated it stops working.

My images were set as block elements all along because they were in DIVs -- they appear as inline elements only while they are not being displayed. So, as I thought of the problem being inline elements turning into blocks, the elements were born as blocks (being within DIVS) and then reduced to inline elements when not displayed. I need to start out with inline elements to get inline elements. Still, I've made six suggested changes so far which have not corrected two problems -- displayed images still behave as block elements even though they are no longer within DIVs, and the 5-pixel space remains between rows even though the font size (which determines the line height and is smaller than 17 pixels) is '1.' Is there anything else in our collective bag of tricks we have for solving these two problems.

lucy24




msg:4606900
 11:11 pm on Sep 2, 2013 (gmt 0)

They need to be 50 to a row and then break off to start the next row of 50.
<snip>
The background image is 1367 X 1465 -- larger than most screen resolutions. When the page loads, scrollbars appear automatically. The page is meant to be scrollable

Well, all of that sounds absolutely atrocious from the usability angle, but I guess we're now into "Just show him how to aim the ### gun" territory :(

I changed the font size from 3 to 1

Now, I know you don't mean 3 ems or 3 points, so this must be a reference to the <font size> tag.

:: sigh ::

icon_kid




msg:4606916
 12:09 am on Sep 3, 2013 (gmt 0)

...sounds absolutely atrocious from the usability angle...

It's atrocious to compose and edit such a document but it's as easy to view and use as any other Web page, and yes, 3 is the size in the <font> tag.

Well, the 'block' behavior has been corrected by changing one word in the following line:

from this:
document.getElementById('sussman').style.display=(chk.checked)?'block':'none'; }

to this:
document.getElementById('sussman').style.display=(chk.checked)?'inline':'none'; }

...but something else came up that I wasn't expecting. Going back to my diagram, if the position of five images is like this:

[1] [2] [3] [4] [5]

... then if image no. 3 is hidden I'd expect the layout to look like this:

[1] [2] [ ] [4] [5]

and that's not what's happening. Instead, it looks like this when image no. 3 is hidden...

[1] [2] [4] [5]

...and turns into this when the image is dispayed.

[1] [2] [3] [4] [5]

I can't have the appearance of an image cause a shift in the position of other images.

In that respect it seems that a 'swap' code would be more suitable than a 'hide' code because image positions didn't change this way but there were other big problems with that too. I'm just about ready to give up on this project. The person who I was doing this for doesn't even know I've embarked on such a project so there would be no embarrassment on quitting, just a lament at failing.

JD_Toims




msg:4606928
 1:52 am on Sep 3, 2013 (gmt 0)

font drop downs

Descenders ;)

rainborick




msg:4606933
 2:08 am on Sep 3, 2013 (gmt 0)

Try:

document.getElementById('sussman').style.visibility=(chk.checked)?'visible':'hidden'; }

icon_kid




msg:4606948
 3:31 am on Sep 3, 2013 (gmt 0)

Thanks, JD_Toims and rainborick,

but instead of trying those things, and instead of quitting now, I'm going back to the last 'swap' code I tried. This is, of course, Javascript even though we're in the HTML section -- I thought I'd keep the thread going here since I'm getting good help here, lest a mod thinks this is inappropriate. Below is the swap code and it actually works. Even with DIV tags still in place, all the images stay inline, they do not shift positions and all the images stay ajacent to each other all of the time -- terrific! There's just one thing I need to know -- how do I correctly add more checkboxes with more pairs of images and have each checkbox associated with the sole pair of images it has control of?

I'm not a dummy -- I know that each checkbox needs to be uniquely identified (as with a NAME or ID) with the corresponding pair of images labeled somehow with the same identifyer so that each checkbox knows which pair of images it will swap, but I don't know how to do that.

Here is the swap code for one image pair (which I need to adapt for around a hundred pairs:


<head>
<script type="text/javascript">
function processCheckbox(checkbox) {
if (checkbox.checked) {
image.src = "ICONS/C-red-empty.png";
image.onclick = enabledClick;
} else {
image.src = "ICONS/sussman.png";
image.onclick = null;
}
}
function enabledClick() {
alert("enabled!");
}
</script>
</head>

<body>
<form style='display:inline;' name="form-001" method="post" action="">
<input type="checkbox" onclick="processCheckbox(this);">
</form>

<img src="ICONS/C-red-empty.png">
</body>

JD_Toims




msg:4606950
 4:45 am on Sep 3, 2013 (gmt 0)

In HTML5+

<form style='display:inline;' name="form-001" id="my_form_1" method="post" action="JavaScript:void(0);">
<input type="checkbox" id="C-red-empty" onChange="processCheckbox(this);">
</form>

<label for="C-red-empty" form="my_form_1"><img src="ICONS/C-red-empty.png"></label>

Note: I added a JavaScript:void(0) to the action of the form to "officially" stop any action a browser might try to take other than processing the onClick. I also changed to onChange rather than onClick, you might need to use onFocus though -- I didn't test, sorry. [And, technically, the C in onClick and onChange, etc. should be capitalized, but browsers don't seem to care too much ;)]

You could also:

<body>
<form style='display:inline;' name="form-001" method="post" action="JavaScript:void(0);">
<input type="checkbox" onClick="processCheckbox('C-red-empty');">
</form>

<img onClick="processCheckbox('C-red-empty');" src="ICONS/C-red-empty.png" style="cursor:pointer;">

lucy24




msg:4606967
 7:32 am on Sep 3, 2013 (gmt 0)

I can't have the appearance of an image cause a shift in the position of other images.

Well, now you say so. You mean you never wanted
{display: none;}
at all? Why didn't you say so in the first place?

You want the entirely different property
{visibility: hidden;}
This becomes a heck of a lot easier to code, because it really is a toggle: "hidden" or "visible" and that's all. OK, technically there's also "collapse", but that applies strictly to tables.

Fotiman




msg:4607087
 3:35 pm on Sep 3, 2013 (gmt 0)

Here's how I would approach this.
First, I'd identify a basic template for the content and markup I was trying to achieve. I would use HTML5, and it would look something like this:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="container">
<div>
<img src="blank-1.png">
<img src="blank-2.png">
<img src="blank-3.png">
<img src="blank-4.png">
<img src="blank-5.png">
</div>
<div>
<img src="blank-6.png">
<img src="blank-7.png">
<img src="blank-8.png">
<img src="blank-9.png">
<img src="blank-10.png">
</div>
</div>
</body>
</html>

In that example, I've got a single "container" that will hold all of the "rows". If needed, I can target that container for styling or scripting purposes. Since the "div" element is (by default) a block level element, each div within the container will appear as a row. And since the "img" element is (by default) an inline level element, each row will contain the images inline.

This is how the page will look with JavaScript disabled. I've chosen the most accessible view, meaning all of the images will be visible.

Next, if I want to add some "behavior", I'm going to put that in a separate JavaScript file, and then I'll include that at the bottom of my HTML page just before the closing </body> tag. It's best to put scripts at the end of the document for performance reasons. For this example, I'll just put the file in the same directory (though normally I'd probably put this in a separate folder to keep things tidy). So now my HTML markup becomes this:


<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="container">
<div>
<img src="blank-1.png">
<img src="blank-2.png">
<img src="blank-3.png">
<img src="blank-4.png">
<img src="blank-5.png">
</div>
<div>
<img src="blank-6.png">
<img src="blank-7.png">
<img src="blank-8.png">
<img src="blank-9.png">
<img src="blank-10.png">
</div>
</div>
<script src="main.js"></script>
</body>
</html>

In my script file, I would want to achieve the following:

1. Generate a bunch of input type="checkbox" elements, 1 for each img element in my container, and append them to my container (I'm not sure exactly how you have yours placed). I'll assign the numeric index of each image to the value of a corresponding checkbox.

2. Attach a single onclick event handler to container element that will act as a delegate event handler for the elements contained within it. Alternatively, you could attach an onclick event handler to each checkbox, but that's much less efficient and (depending on how many you have) your performance may suffer.

3. Since I'll be putting this at the bottom of my document, I don't need to worry about "onload" events. I'll wrap the entire thing in an anonymous immediately invoked function (to prevent dirtying up the global namespace).

Here's what my main.js file would contain:

(function () {
var container = document.getElementById('container'),
imgList = container.getElementsByTagName('img'),
i,
n;

function createCheckbox(index) {
var checkbox = document.createElement('input');

checkbox.type = 'checkbox';
checkbox.value = index;
container.appendChild(checkbox);
}

function checkboxClickHandler(e) {
var target = e ? e.target: window.event.srcElement;

if (target.nodeName.toUpperCase() != 'INPUT' &&
target.type.toUpperCase() != 'CHECKBOX') {
return;
}

// toggle visibility of the image
// When checkbox is checked, image becomes hidden, and vice versa
imgList[target.value].style.visibility = (target.checked ? 'hidden': 'visible');
}

// Generate checkboxes
for (i = 0, n = imgList.length; i < n; i++) {
createCheckbox(i);
}

// Attach event handlers
container.onclick = checkboxClickHandler;
})();


Lastly, if I want to add some "presentation" (styling), I'm going to put that in a separate CSS file, and then I'll include that in the head of my document. For this example, I'll just put the file in the same directory (though normally I'd probably put this in a separate folder to keep things tidy). So now my HTML markup becomes this:


<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="container">
<div>
<img src="blank-1.png">
<img src="blank-2.png">
<img src="blank-3.png">
<img src="blank-4.png">
<img src="blank-5.png">
</div>
<div>
<img src="blank-6.png">
<img src="blank-7.png">
<img src="blank-8.png">
<img src="blank-9.png">
<img src="blank-10.png">
</div>
</div>
<script src="main.js"></script>
</body>
</html>


Now suppose I want to prevent the contents of each div within my container element from wrapping. I would add this to main.css:


#container div {
white-space: nowrap;
}


Finally, avoid using <font> tags. The <font> tag defines "presentation", which is best defined in your CSS instead.

Note, my example hides (makes it not visible) an image element when the checkbox is checked. You could easily reverse this behavior (hide the image when the checkbox is not checked), but you'll need to also make an initial pass to hide all of the images when the page loads, since none of the checkboxes would be checked at that point.

Hope this helps.

Fotiman




msg:4607094
 3:59 pm on Sep 3, 2013 (gmt 0)

@JD_Toims

<form style='display:inline;'

1. It's best to avoid inline style attributes, as it makes maintenance more difficult, adds to your page weight that won't be cached, and prevents a clean separation of layers (content/presentation/behavior).

2. I've found it's usually not a good idea to style the form element itself, but rather style some container element within the form. I don't remember the specifics, but I had some problems a few years back with browser inconsistencies (so it may not be an issue still). In any case, I try to avoid directly applying presentation to a form.


action="JavaScript:void(0);"

A better alternative might simply be:
action="#"
Technically speaking, there is no official "JavaScript:" protocol. Browsers handle it, but the result is that you're mixing behavior into your markup, so I'd advise against it.

And, technically, the C in onClick and onChange, etc. should be capitalized, but browsers don't seem to care too much

Actually, that's not true. HTML attributes have always been case insensitive, and then XHTML came along and made them case sensitive, with "onclick" being correct and "onClick" being incorrect. In general, it's best to use all lower case and you're safe in either markup language, or better yet, avoid using inline handlers altogether.

JD_Toims




msg:4607099
 4:56 pm on Sep 3, 2013 (gmt 0)

1. It's best to avoid inline style attributes, as it makes maintenance more difficult, adds to your page weight that won't be cached, and prevents a clean separation of layers (content/presentation/behavior).

Always -- I just didn't edit what was there and kept with the same style of coding. [Sometimes I just plain don't have time to point out everything, but can give a "push" in the direction of working and let the poster sort out the details.]

2. I've found it's usually not a good idea to style the form element itself, but rather style some container element within the form. I don't remember the specifics, but I had some problems a few years back with browser inconsistencies (so it may not be an issue still). In any case, I try to avoid directly applying presentation to a form.

That's surprising on a form, but not totally shocking -- I ran into something similar when <section> and <aside> were first introduced though, so I'm a bit hesitant with applying a style to them still, even though they appear to be working fine now.

Technically speaking, there is no official "JavaScript:" protocol. Browsers handle it, but the result is that you're mixing behavior into your markup, so I'd advise against it.

I understand. Interestingly, when I looked into it [years ago] I found it was recommended by someone working on the w3 docs, because of the ability for it to be better interpreted by screen readers at the time [or something along those lines].

[Of course I can't find the resource any more and the recommendation could have changed, because I don't bother looking into what works very often -- just don't have time lol -- but the reason I started using it was an explanation / recommendation by someone "in-the-know" at the w3.]

icon_kid




msg:4607159
 4:10 am on Sep 4, 2013 (gmt 0)

JD_Toims, this looks really good -- seems to have all the necessary elements.

<head>
<script type="text/javascript">
function processCheckbox(checkbox) {
if (checkbox.checked) {
image.src = "ICONS/C-red-empty.png";
image.onclick = enabledClick;
} else {
image.src = "ICONS/sussman.png";
image.onclick = null;
}
}
function enabledClick() {
alert("enabled!");
}
</script>
</head>

<body>
<form style='display:inline;' name="form-001" id="my_form_1" method="post" action="JavaScript:void(0);">
<input type="checkbox" id="C-red-empty" onChange="processCheckbox(this);">
</form>

<img onClick="processCheckbox('C-red-empty');" src="ICONS/C-red-empty.png" style="cursor:pointer;">
</body>


I cannot test it tonight, though -- I'll go over a few other points instead.


You haven't changed the main code in anyway so I guess that's good to go. It also looks like the entire code (everthing between the script tags) would need to be repeated, but with two new image names in order to add more swaps -- correct?

Well, now you say so. You mean you never wanted
{display: none;} at all? Why didn't you say so in the first place?

You want the entirely different property {visibility: hidden;}
This becomes a heck of a lot easier to code, because it really is a toggle: "hidden" or "visible" and that's all.

Whatever I said, I certainly didn't say anything in those terms because I simply am not familiarized with those terms yet, but I do know what I want and I well know how to describe it. On a Web page I need to have images appear and dissapear; I need them all to be adjacent to each other (they cover the page like one solid mat with no spaces to be seen) and they must all stay fixed at the position they have when the page loads no matter what else happens. When I first started this project I didn't know that you could do this (to simply not have a given image rendered to the page without having to swap it with another one) using a script -- I'm not kidding, I really didn't know. I didn't let that stop me because I've used image swaps in the past and so I worked around that situation by swapping a visible image with an invisable one (a blank, fully transparent image) -- the visual effect of is the same -- now you see it and now you don't. I don't care which method I end up using -- I just want what works for this particular project.

Fotiman, the <div id="container"> issue is an interesting one -- it may come into play down the line because if I do get to the next step successfuly (adding more swap pairs) the issue of tables will come up. That's because all of the 'map' portion of the page will eventually be placed inside of a table. This will be needed to keep the map data separate from the 'client' data that will appear in another table to the left of it, and, like a Google My Map, the two regions will be independently scrollable. Like a Google My Map, it will have a narrow columb on the left with a list of point locations, with the street map itself using all the remaining width of the browser screen. When I dumped all the map stuff into the large table in a test I did early on in this project, the DIVs lost the ability to keep rows of images sitting directly on top of each other -- once inside a table all the rows became five pixels above each other again -- as if the DIVs weren't there any more -- very strange. Perhaps another way of classifying a DIV other than 'row' will make a difference.

There's a bunch of stuff in your collective responses that is beyond me, but there was one comment that was very curious to me -- when drhowarddrfine said:

Remove the 'type="text/css" ' which hasn't been needed in years.

My question would be: What do I replace that with. Don't I have to announce to the browser in some way that the following lines are CSS? -- or is that dumb of me to ask.

lucy24




msg:4607167
 6:16 am on Sep 4, 2013 (gmt 0)

I certainly didn't say anything in those terms

Er, yes, you did. You explicitly used the attribute "display" -- as in, "inline" vs. "none" -- in several posts. And throughout this thread you've talked about showing and not showing an image. Only later did it turn out that you need the image to be there all along, occupying space, whether blacked-out or not.

What do I replace that with.

Nothing. But it does absolutely no harm to retain the phrase. HTML 4 was open to the possibility that a style could be some type other than "text/css", hence the "type=et cetera" element, though even there CSS (a specific language) would be the default. HTML 5 assumes styles are CSS, so all that's needed is <style>.

Since the code we're talking about is not written in HTML 5 (as witnessed by tags such as <nobr> and <font>) it makes no difference one way or the other.

That's because all of the 'map' portion of the page will eventually be placed inside of a table.

:: wanders off sobbing brokenly ::

drhowarddrfine




msg:4607258
 2:17 pm on Sep 4, 2013 (gmt 0)

:: puts arm around lucy24 ::
:: sends flowers ::
:: chokes back his own tears ::

As she said, the default is now CSS. For script tags, the default is javascript so 'type=text/javascript' is no longer needed either.

Though HTML5 now makes them the default, and it's invalid in HTML4.01, all browsers will use the default no matter the doctype.

swa66




msg:4607298
 4:47 pm on Sep 4, 2013 (gmt 0)

@icon_kid: why use such archaic means to hammer together a website ?

It's like using smashing on iron with rocks in order to make an automobile: it'll never result in something remotely decent.

If you want to see how maps are done: take e.g. a look at google or bing maps. And guess what: they have APIs you can use to not have to recreate it all yourself.

icon_kid




msg:4607745
 3:45 am on Sep 6, 2013 (gmt 0)

Don't think that I like self torture -- like building a sand castle one grain at a time. I had done a cursory look to see if Google Maps had the features I wanted but it didn't. Then I learned of somethig called Google Maps Lite which is supposed to have so many great features over the regular Google Maps. I read through a list of features and did not find any mention about the two I need most -- to have the location list alphabetized and to be able to hide markers. When I looked even further into Google Maps Lite I learned that it's not an app that you just install and start using -- it's a developers tool where you have to code the stuff you want into it. If anyone can tell me that this is not true, and can tell me where to get a plug-in that will do the two things I mentioned I would drop the type of work I'm doing on this project in exactly one second. It wouldn't hurt for a ready-made app to go a step further and have a menu to sort a client list in other ways such as the dates they were added but in reverse order in case you want to highlight the locations of your newest accounts instead of the oldest. Such a plug-in should have a feature to SHOW ALL or HIDE ALL as well as showing or hiding individual locations.

I'm an accomplished 3D modeler and animator who's work has appeared in feature films. I'm used to long, very detailed, tedious projects which can lasts for months. Four thousand image tags is nothing more than a pile of 1s and 0s -- you don't have to look at each one and your computer gobbles them all up and spits them out in a thousandth of a second -- so why the worry?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved