Web Development

Re: Re-code to get rid of Absolute Positioning?

19-Apr-18 2:20

Something like this: Edit fiddle - JSFiddle[^]

HTML Responsive Web Design[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

W∴ Balboos, GHB4-May-18 7:05

W∴ Balboos, GHB

4-May-18 7:05

I am a heavy user of absolute positioning. It is used, in particular, to build what could be referred to as consoles. One could use relative positioning for this, too, but with a good deal more work (or just different adaptive habits). I use relative, too, in a situation where I produce additional input areas on demand. Content is absolute, out block is relative.

These, in turn, as a block can also be positioned absolutely. Less of a problem now, but it was the only way to make a page design consistent across platforms only a few years ago (IE, for example, was was a horror story).

Real lesson:
Don't listen too hard to others' opinions on the latest fashion in HTML development. Tables are/were frowned upon. Snobbery! Sure - you can do more with div's, but if you don't need that "more", life with tables is easier to design and easier to modify.

So - you need to meet your design needs - but only make changes that are either essential or that you perceive will come back and bite your backside sometime in the future.

Above all, you need predictability!

Ravings en masse^
"The difference between genius and stupidity is that genius has its limits." - Albert Einstein
"If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010

Saving data submitted online as pdf

Deekkris13-Apr-18 9:23

Deekkris

13-Apr-18 9:23

Hi,
I am new to front end development I have a requirement to create a online registration form which has attachments and more comments i.e text field.
So I want to start my online form with HTML as it is an open source.

Can anyone guide me how to create a form and upon submission by user it must be either saved as pdf in their local drive and send an email to me or else directly upon submission it should sent to my email directly as pdf.I want to use open source/Excel for front end

Re: Saving data submitted online as pdf

David Mujica17-Apr-18 3:20

David Mujica

17-Apr-18 3:20

Since you posted this question in the Web Development Forum, I'm assuming you are considering developing a Web Application to solve your problem.

That being said, I would check out the following library to handle your PDF requirements.

iTextSharp, a .NET PDF library download | SourceForge.net[^]
(I have never used it, but it looks interesting)

Need to Link to an Image on another Page already containing multiple images

Member 1208020110-Apr-18 8:03

Member 12080201

10-Apr-18 8:03

hello again...

I need to create a link on one page (my home page) that links directly to a image on another page already containing multiple images. Thought I knew how to do it...by creating an anchor; & my code looks like this:

a href="theOtherPage.html#PHOTO.png">IMAGE SUBJECT

but it doesn't work. Even tried the forward slash after the page id:

a href="theOtherPage.html/#PHOTO.png">IMAGE SUBJECT

(of course both snippets are encased w/ ...just couldn't get that to work here)

when the user clicks the link, I want them to be directed right to a specific image on a 2nd page...here's the page:

http://www.moonjams.net/events.html

there's 2 images there now, but there will eventually be more. Thought it was just a simple anchor, but does anyone have any idea what I'm doing wrong?

thanx,

mark4man

modified 10-Apr-18 20:40pm.

Re: Need to Link to an Image on another Page already containing multiple images

Richard Deeming19-Apr-18 2:07

Re: Need to Link to an Image on another Page already containing multiple images

19-Apr-18 2:07

The part of the link after the # character needs to be defined as a "bookmark" within the target page. You do that by setting the id attribute on an element.

Eg:

target.html:

HTML

<img id="image1" src="..." />

Link:

HTML

<a href="target.html#image1">Image 1</a>

You can set the id on any visible element on the page, but it needs to be unique - no other element on the page can have the same id.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Sarcastic CA20-Apr-18 7:56

Sarcastic CA

20-Apr-18 7:56

I am facing some difficulties in designing of this <a href="http://www.sarcasticca.com/ca-cpt-registration-form-june-2018/">CA CPT / CA Foundation Registration </a>[<a href="http://www.sarcasticca.com/ca-cpt-registration-form-june-2018/" target="_blank" title="New Window">^</a>]. I don't know what is happening what it doesn't showing the main image.

Please help!
Thanks in advance

Using DOM with Selector Values, Assignment

Member 137687478-Apr-18 9:10

Member 13768747

8-Apr-18 9:10

Hey everyone,

My class assignment is to develop a functional analog clock using HTML, CSS, and JS. I'm having trouble with a one of the requirements which is using a drop-down menu to change the time according to a selected time-zone. My understanding is that I need to use the DOM to set the selector values, followed by some simple math for time conversions. Maybe I understand what to do, just not how to do it.

Here's a link to the code Clock Assignment - JSFiddle[^]

I'm very new to web development and any help would be greatly appreciated. Let me know if you need any more information.

How to perform addition from LineTotal to subtotal using HTML JavaScript

Nikhil Dange21-Mar-18 3:24

Nikhil Dange

21-Mar-18 3:24

How to perform addition using JavaScript outputed linetotal1,2,3,4,5 to subtotal

<td><input type="text" name="linetotal1" id="linetotal1" onKeyUp="calc1(this.form)" class="linetotal1" style="border:none;width: 100%;"><hr style="border:transparent;">eg.Output 200
<input type="text" name="linetotal2" id="linetotal2" onKeyUp="calc2(this.form)" class="linetotal2" style="border:none;width: 100%;"><hr style="border:transparent;">eg.Output 300
<input type="text" name="linetotal3" id="linetotal3" onKeyUp="calc3(this.form)" class="linetotal3" style="border:none;width: 100%;"><hr style="border:transparent;">eg.Output 400
<input type="text" name="linetotal4" id="linetotal4" onKeyUp="calc4(this.form)" class="linetotal4" style="border:none;width: 100%;"><hr style="border:transparent;">eg.Output 200
<input type="text" name="linetotal5" id="linetotal5" onKeyUp="calc5(this.form)" class="linetotal5" style="border:none;width: 100%;">eg.Output 200
</td>

<tr align="right">
<td colspan="3" class="noBorder">
<b><font size="4px;">Subtotal<br>Tax (%)</font></b></td>
<td valign="middle" align="center" width="100%">
<input type="text" id="subtotal" name="subtotal" class="subtotal" value="0.00" onchange="result(this.Form)" style="border:none;width: 100%;">eg Subtotal Output 13000
<input type="text" name="tax" value="0.00" readonly="readonly" style="border:none;width: 100%;">
</td>
</tr>

Question about crud operations

Maniteja Attili20-Mar-18 10:25

Maniteja Attili

20-Mar-18 10:25

Hi Every one can you explain in real time why they write CRUD operations in Database Store proc
and same way in code behind

Re: Question about crud operations

Richard MacCutchan20-Mar-18 12:25

Richard MacCutchan

20-Mar-18 12:25

Maniteja Attili wrote:
why they write

Who is "they"?

Re: Question about crud operations

Maniteja Attili21-Mar-18 3:34

Maniteja Attili

21-Mar-18 3:34

the DB Developers and COde

Re: Question about crud operations

Richard MacCutchan21-Mar-18 4:08

Richard MacCutchan

21-Mar-18 4:08

Which ones? There is really no point in posting such vague details. If you want help with a proper question then please provide proper details.

Templates with just HTML/CSS (without a back-end)

Ritwesh6-Mar-18 19:55

Ritwesh

6-Mar-18 19:55

Hi,

I have been developing a web application which is now a just a basic website coded in html/css/js. I will be shifting it to Rails platform (so I won't really need to implement this answer I am looking for in the long term). Like in Rails (or any other back-end coding platform), we can just define the layout (or template as some may prefer calling it) in one view file and write the other views separately. I was wondering if the same is possible without a working back-end.

Thanks for any help in advance.

Cheers,
Ritwesh

HTML Tables and CSS control

OzWaz5-Mar-18 11:30

5-Mar-18 11:30

The Situation
I am displaying data from MYSQL database into a HTML table on a web page.
I am using CSS to display alternative rows in different text size and background colours.

I am using the 'hover' function to change background colours and text size

The Problem
The 'hover' function works perfectly for the 'odd; rows however for the 'even' rows it will change the text size but not the background colour

My CSS code

table tbody tr:nth-child(odd) td {
			background-color: lightblue;
		}

.table tbody tr:nth-child(even) td {
			background-color: lightgreen;
		}
table tbody tr:hover  td {
	background-color: white;
	transition: all .5s;
	font-weight:normal;
	font-size: 2.5em;
	color: black;
	border-right: 1px solid grey;
}

Solution:
Can anyone spot the problem?

Richard Deeming5-Mar-18 12:46

5-Mar-18 12:46

Works fine for me in Firefox, Chrome, Edge, and IE11: Demo[^]

The only slight issue is that the changing text size makes it very difficult to hover the next row accurately; as soon as the mouse leaves one row, its text size decreases, and the other rows shift up. It's easier to move in and out of the cells from the side.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

OzWaz5-Mar-18 21:55

5-Mar-18 21:55

Thanks for giving me some assistance.

I have no idea why I had the problem but when I closed the browser cleared the cache and open it, it worked fine for me also.

Clearing the Cache while open made no difference.

Padding around the cells removes the issues you correctly identified on mouse over

Thanks again

W∴ Balboos, GHB4-May-18 7:10

W∴ Balboos, GHB

4-May-18 7:10

If you don't, already, when refreshing a page under development, use Ctl=F5 (at least in firefox) to force reload without the cache. There are also methods to add a header that forces uncached reloads for all - which at times can be handy.

Ravings en masse^
"The difference between genius and stupidity is that genius has its limits." - Albert Einstein
"If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010

Peter_in_27805-Mar-18 14:03

Peter_in_2780

5-Mar-18 14:03

OzWaz wrote:

.table tbody tr:nth-child(even) td {

Do you really want that leading "." ?

Software rusts. Simon Stephenson, ca 1994. So does this signature. me, 2012

OzWaz5-Mar-18 21:48

5-Mar-18 21:48

Yes. I think so?

I have a number of tables on the one page and I only want the styling to apply to only one table.

If i dont use the "class" option I found that it applies the styles to 'ALL' the tables

Thanks you for taking the time to respond

Peter_in_27805-Mar-18 22:46

Peter_in_2780

5-Mar-18 22:46

OzWaz wrote:
If i dont use the "class" option I found that it applies the styles to 'ALL' the tables

In which case, you might be missing the "." in the other two rules. It was the inconsistency I picked up on.

Software rusts. Simon Stephenson, ca 1994. So does this signature. me, 2012

OzWaz6-Mar-18 20:31

javascript object.function().function() not working

6-Mar-18 20:31

Thanks -Sharp eyes

But the missing "." in both cases was a poor C&P effort by me.

and interestingly noting should have worked - if the code was so flawed - I am increasingly amazed how browser development is progress in holding on to code when it ought to relinquish it - But that the future.

As you will see the problem is solved but the mystery remains!

Nice that you engaged in assessing my problem

Thanks

easyj5-Mar-18 9:40

easyj

5-Mar-18 9:40

how can I call a function on a function from an object like this:

object.function().function();

it does not work ... that’s my code:

var doc = null;
 
 
var j = {
 
 
 
 
get : function (id){
 
 
doc = document.getElementById(id);
 
console.log(doc);
 
 
 
},
 
text : function (text){
 
 
doc.value = text;
 
 
}
 
 
 
 
 
 
}

and I want to call the functions like this then:

j.get(‘input-field’).text(‘hello’);

but it does not work

pls help

Re: javascript object.function().function() not working

Richard Deeming5-Mar-18 12:39