SVG :hover [was: hover]

[Hosun]

Hi,

Upon mouse-over, I want to change the color of Twitter logo.

How would I do?

Global Invisible Hand

Hosun Kang

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

although I'm not a fan of a JS insertion instead of a server-side include, (from a query and referencing point of view) so if going for a JS injection, it might be better to use insertAdjacentHTML rather than innerHTML, don't you think?

element.insertAdjacentHTML - Référence Web API | MDN

Since I've never used it I can't possibly comment.

Most front-end javascript frameworks will insert everything via one js build file these days so it doesnt particulary bother me, although as I use php, I much prefer that method, out of habit I guess. I think if it were 10 years ago when developers where debating how many users had js disabled it would be a different story but its all very different now.

[B i r n o u]

without looking for a polemic, and without wanting to play on words, I pay great attention, and place a very BIG difference, between the initial loading of the page and the injection of data following an interaction of the user, or any event whatsoever (both by the client and/or by the server side pushing some complement).

in our case the OP refers to an initial loading of the page through the use of SSI. so that's why I give a favourable opinion to the SSI... however at the level of insertAdjacentHTML(), and although this is a relatively old article, the approach and details can be interesting https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

without looking for a polemic, and without wanting to play on words, I pay great attention, and place a very BIG difference, between the initial loading of the page and the injection of data following an interaction of the user, or any event whatsoever (both by the client and/or by the server side pushing some complement).

in our case the OP refers to an initial loading of the page through the use of SSI. so that's why I give a favourable opinion to the SSI... however at the level of insertAdjacentHTML(), and although this is a relatively old article, the approach and details can be interesting https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection /

The OP doesn't exactly know what they require.....they are just being guided by whoever responds with something they can understand and deploy. As  for loading, I marginally agree, but its largely regarded as being insignificant to be of a concern. Is it? Ask those developers that are hell bent on pushing an all vue, angualr, react website out these days using a 'package it' up deployment method or those developers who insist 20-30 calls to js files are perfectly ok. I think we all make this stuff up at times to suit our own opinions and workflows. As I've said previously many times, theres is no real right or wrong way anymore.

[B i r n o u]

come on...

let's not go into a hubbub of everything and nothing that leads to nothing else than forgetting the initial point.

I know that this is your trademark and that it is indeed a great loophole not to answer the questions directly...; arf arf...... so funny

so,

the subject, was to have an opinion between innerHTML (that you proposed) and insertAdjacentHTML() (on which I opened the door) ... you didn't say a word...

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

come on...

let's not go into a hubbub of everything and nothing that leads to nothing else than forgetting the initial point.

I know that this is your trademark and that it is indeed a great loophole not to answer the questions directly...; arf arf...... so funny

so,

the subject, was to have an opinion between innerHTML (that you proposed) and insertAdjacentHTML() (on which I opened the door) ... you didn't say a word...

I clearly said I couldnt possibly comment, as I have never deployed it, do you have some kind of trouble understanding that simple answer? Obviously yes. (see post 25, first paragraph of the response, can you actually read?)

I then pointed out if what you are suggesting is even of any real concern given the techniques being used frequently in modern development today.  I see your ignorance and arrogance raises its ugly head again if you're not pleased about an opinion or answer which doesnt correlate exactly with that of your own blinkered views, you are certainly a master of that, for sure.

[B i r n o u]

osgood_  a écrit

I then pointed out if what you are suggesting is even of any real concern given the techniques being used frequently in modern development today.  I see your ignorance and arrogance raises its ugly head again if you're not pleased about an opinion or answer which doesnt correlate exactly with that of your own blinkered views, you are certainly a master of that, for sure.

if you refer to the advantage of not worrying about multiple requests, the prerogative of a modern approach to development, you are referring to the use of HTTP/2, and on this point I don't think the OP has implemented a reverse proxy solution between nginx and Apache. so my previous answer

but being arrogant, maybe I'm wrong...

if you wish we can open a debate on the advantages of using HTTP/2... for a long time I have been using this approach and I already have a lot of feedback and comparative testing on the various applications that run for my customers compare to old devlivery HTTP.

I'm ready if you want to open a new thread....

I think I heard you talk about this type of approaches and be a strong supporter of HTTP2, Angular, React, Babel, TC39... to name a few.

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

osgood_   a écrit

I then pointed out if what you are suggesting is even of any real concern given the techniques being used frequently in modern development today.  I see your ignorance and arrogance raises its ugly head again if you're not pleased about an opinion or answer which doesnt correlate exactly with that of your own blinkered views, you are certainly a master of that, for sure.

if you refer to the advantage of not worrying about multiple requests, the prerogative of a modern approach to development, you are referring to the use of HTTP/2, and on this point I don't think the OP has implemented a reverse proxy solution between nginx and Apache. so my previous answer

but being arrogant, maybe I'm wrong...

if you wish we can open a debate on the advantages of using HTTP/2... for a long time I have been using this approach and I already have a lot of feedback and comparative testing on the various applications that run for my customers compare to old devlivery HTTP.

I'm ready if you want to open a new thread....

I think I heard you talk about this type of approaches and be a strong supporter of HTTP2, Angular, React, TC39... to name a few.

I've never mentioned HTTP/2 so once again you're incorrect in every respect, refer to Ben, I think he has strong views on that workflow. Why do you always confuse a thread. Do you actually think the OP knows anything about HTTP 2 or nginx/apache, talkng about 'hubbub' and spewing out a lot of diatribe, when its not required.

I only comment on workflows I understand and am very familiar with using but when I do you dismiss that as I don't know what I'm talking about and when I inform you I dont know anything about a method/workflow you are equally as dimissive and abusive, funny that, it doesnt paint you in a good light.

[osgood_]

Talking of diatribe, as this thread has decended into, maybe this is why I'm so concerned at the state and complexity of web-development at times, another example of complete sh*te and it just gets worse:

Taken directly from a website just recently viewed: (its 100% real, I didn't make it up only the 'Blah Blah') I just had to post it.

<li class="menu-item wpml-ls-slot-3 wpml-ls-item wpml-ls-item-en wpml-ls-current-language wpml-ls-menu-item wpm..."><a title="English"  class="elementor-item">Blah Blah</a></li>

Edited.

This website also had 20 links to css files and over 20 links to js files!!!

[Nancy OShea]

osgood_  wrote

<li class="menu-item wpml-ls-slot-3 wpml-ls-item wpml-ls-item-en wpml-ls-current-language wpml-ls-menu-item wpm..."><a title="English"  class="elementor-item">Blah Blah</a></li>

That code is generated by Word Press + 2 or more plugins: 

WPML - The WordPress Multilingual Plugin

Elementor Page Builder for WordPress

[osgood_]

https://forums.adobe.com/people/Nancy+OShea  wrote

osgood_   wrote

<li class="menu-item wpml-ls-slot-3 wpml-ls-item wpml-ls-item-en wpml-ls-current-language wpml-ls-menu-item wpm..."><a title="English"  class="elementor-item">Blah Blah</a></li>

That code is generated by Word Press + 2 or more plugins: 

WPML - The WordPress Multilingual Plugin

Elementor Page Builder for WordPress

I don't care what it was generated with - its just plain not right in my opinion but hey what do I know. You can asked someone else and they will try and convince you its perfect, especially if they are deploying similar abortions

[B i r n o u]

osgood_  a écrit

https://forums.adobe.com/people/B+i+r+n+o+u   wrote

I've never mentioned HTTP/2 so once again you're incorrect in every respect,

well you didn't in an explicit way, but you did in an implicit way, when you said

osgood_  a écrit

Ask those developers that are hell bent on pushing an all vue, angualr, react website out these days using a 'package it' up deployment method or those developers who insist 20-30 calls to js files are perfectly ok.

why do you think 20-30 calls are insignificant... just because these developers deployed their application using HTTP/2. Simply because HTTP/2 is made for this, and fills the gaps in HTTP that forces us to minimize the number of client / server requests that a page can invoke

didn't you realise that ? I'm sure that you are joking us , isn't it ?

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

osgood_   a écrit

https://forums.adobe.com/people/B+i+r+n+o+u    wrote

I've never mentioned HTTP/2 so once again you're incorrect in every respect,

well you didn't in an explicit way, but you did in an implicit way, when you said

osgood_   a écrit

Ask those developers that are hell bent on pushing an all vue, angualr, react website out these days using a 'package it' up deployment method or those developers who insist 20-30 calls to js files are perfectly ok.

why do you think 20-30 calls are insignificant... just because these developers deployed their application using HTTP/2. Simply because HTTP/2 is made for this, and fills the gaps in HTTP that forces us to minimize the number of client / server requests that a page can invoke

didn't you realise that ? I'm sure that you are joking us , isn't it ?

Some may be using http2 of course and some may not be. You assume they all are doing so. Some, its just bad practice, which has been going on for years.

But of course no-one is going to convince you of any bad practices going on out there:

<li class="menu-item wpml-ls-slot-3 wpml-ls-item wpml-ls-item-en wpml-ls-current-language wpml-ls-menu-item wpm..."><a title="English"  class="elementor-item">Blah Blah</a></li>

[B i r n o u]

osgood_  a écrit

Some may be using http2 of course and some may not be. You assume they all are doing so. Some, its just bad practice, which has been going on for years.

once again your answer bypasses the point.

I refer to the use of HTTP/2 when libraries such as Angular, React, Babel are used

moreover, did I claim that there were no bad practices out there , that you wanted to convince me of this?

so should I deduce that what makes you so aggressive and irrelevant is the fact that you can't admit that insertAdjacentHTML exists... and that HTTP/2 is required with a modern approach to development

tell me I'm wrong and I will confess that I'm arogant

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

osgood_   a écrit

Some may be using http2 of course and some may not be. You assume they all are doing so. Some, its just bad practice, which has been going on for years.

once again your answer bypasses the point.

I refer to the use of HTTP/2 when libraries such as Angular, React, Babel are used

I really must start refering to you as 'mystic meg' if you're trying to convince me you know that all websites using the workflows you mention are using HTTP2. Maybe you would like to inform me of the winner in the 14.50 race at Pontefract tommorow?

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

so should I deduce that what makes you so aggressive and irrelevant is the fact that you can't admit that insertAdjacentHTML exists... and that HTTP/2 is required with a modern approach to development

You can deduce what you want or believe what you want, you usually do. Point out to me please in this thread where I said InsertAdjacentHTML doesnt exist? I'll say, for the third time:

'I couldnt possibly comment as a result of never using it'

that's slightly different than you trying to put words in my mouth to the effect of saying 'it doesnt exist' but I'll except your apology, thanks.

Maybe the threat of with-holding the 39billion divorce settlement have ruffled a few French peoples feathers, seems that way.

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

tell me I'm wrong and I will confess that I'm arogant

You're wrong, quite clearly, as you're implying I've said things which you cannot substantiate, game, set and match.

[B i r n o u]

osgood_  a écrit

I clearly said I couldnt possibly comment, as I have never deployed it, do you have some kind of trouble understanding that simple answer? Obviously yes. (see post 25, first paragraph of the response, can you actually read?)

I have never rejected your idea, and I have never imposed mine, it is you who feel it in this way... read my sentence again, I ask you what you think about it.

it's true that you've got us so used to having opinions on everything, including reviews of libraries that you've never used in production... outside the hello world example it presents.

I thought that on such an important addition of HTML5 would not have escaped you, at least to say... I didn't know about this function... I'll see if I could take a look at it if the opportunity arises.

it is easier to call the other person ignorant and arogant... it is called the debate. Long live the forums....

and since I answer you, I never said that you was ignorant...or conservative... re read all my post since years...

[osgood_]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

osgood_   a écrit

I clearly said I couldnt possibly comment, as I have never deployed it, do you have some kind of trouble understanding that simple answer? Obviously yes. (see post 25, first paragraph of the response, can you actually read?)

I have never rejected your idea, and I have never imposed mine, it is you who feel it in this way... read my sentence again, I ask you what you think about it.

it's true that you've got us so used to having opinions on everything, including reviews of libraries that you've never used in production... outside the hello world example it presents.

What are you talking about - reviews of libraries that I've never use outside of the 'hello world' examples, you really are showing your true insulting colors now arent you. You've  implied in a lot of your responses/threads that I'm not as civil as you would like, almost certainly true. I can't see much difference in your tone of response once someone disagrees with you're one dimensional approach.

I dont have time to review everything you suggest. If I don't respond with an answer that you like please don't take it as a personal insult. Its possibly just because I dont think it is of interest to me at this particular junction. Even more so if its something I'm currently unfamilair with.

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

I thought that on such an important addition of HTML5 would not have escaped you, at least to say... I didn't know about this function... I'll see if I could take a look at it if the opportunity arises.

I dont know every new addition in html5, javascript, php7+, etc, every day I learn something new, being as though learning never stops. I try my best to observe what I can and make an assessment as to if its useful/how it works. I can share that opinion with others, its then up to them to judge for themsleves. What do you know about Vue, possibly not much, I dont expect you to know everything, so how can you possibly comment if I asked you about some new implementaion in Vue. Youre probably not remotely interested, I accept that.  As I said if Im short of knowledge on a subject/method I wont answer it. Just because I havent immediately reviewed your request doesnt mean I deny it exists, as you want to imply, and I never did that if you read my responses carefully.

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

it is easier to call the other person ignorant and arogant... it is called the debate. Long live the forums....

and since I answer you, I never said that you was ignorant...or conservative... re read all my post since years...

It should be about debate but it always ends up as 'I'm right, you're wrong' - my ways the only way. This is because there are now too many workflows to consider, so agreeing which is better has become very opinionated, mostly as a result of maybe confusion, ignorance, being badly taught, etc, access to many youtube channels dont help as most are just there to make money. I think they are the ones that are reviewing libraries and don't really show much beyond the 'hello world', here's how to create a 'todo' app scenario. Not really much help in the real world......you soon find a lot is missing, a hell of a lot.

[osgood_]

And yes, after some investigation, I agree 'insertAdjacentHTML' is a good option to consider.

'insertAdjacentHTML method parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It does not reparse the element it is being used on, and thus it does not corrupt the existing elements inside that element. This avoids the extra step of serialization, making it much faster than direct innerHTMLmanipulation'

Other pages, where you want the header content to appear - create a link to header.js file:

<!DOCTYPE html>

<html>

<body>

<header></header>

<script src="header.js"></script>

</body>

</html>

header.js file:

const headerContent = `

<div class="logo">

<img src="images/logo.svg" alt="logo">

</div>

<div class="title">

<h3>The Global Invisible Hand</h3>

<h3>2nd edition of Volume One</h3>

<h3>HOSUN KANG</h3>

</div>

<div class="twitter">

<a href="https//twitter.com/Kanqueror" title="Twitter@Kanqueror" target="_blank"><i class="fab fa-twitter"></i></a>

<a href="contact-ver2.php" title="Contact Me" target="_blank"><i class="fas fa-comment-dots"></i></a>

</div>

`

const header = document.querySelector('header');

header.insertAdjacentHTML("afterbegin", headerContent);

Hope that goes someway to appeasing you that I wasnt denying the method existed, I had just never come across it previously, like  a lot of other methods, so wasnt  able to comment until I had time to sit down, revue, experiment with some physical examples myself, only then can I endorse a workflow, after testing, not before.

[Hosun]

Hi,

Thank you very much for your help.

I tried your solution, it is working.

The remaining issue is styles.

I just think "styles in index.html" don't work in header.js.

Global Invisible Hand

Hosun Kang

[osgood_]

Is your css stylesheet attached to both your index.html and contact-ver2.php pages?

There is no need for any styling in the header.js file. All styles are applied when the code from header.js is called into the page/s that it should be viewed in. You will see no styling in header.js file when you open it, just basic layout.

That's the way all include files work, only the code that gets injected into the required page/s should be in the include file - in this case header.js

I know it might be difficult to make styling changes. In that case just paste the code in one of the pages that has the css file attached to it, make the changes and paste it back into the js file. Once you become more experienced you wont need to do that.

[Hosun]

Hi,

I added <style></style> in <head> and added lines to <style> (yellow lines).

This is the best I can get now.

Am I on the line?

Global Invisible Hand

Hosun Kang

[osgood_]

So what you are saying is the php code is not working corrrectly?

Can you post the whole pages code here in the forum please, you probably have the php set up incorrectly.

[Hosun]

Hi,

Here is php :

contact-ver2.php - Google Drive

I took a reference from :

Alt-Web Design & Publishing: Responsive Contact Form with Bootstrap 3.2 and PHP (Part 3)

Hosun Kang

[osgood_]

Lets take this section by section. Create a new clean contact.php page.

Insert the below code in the page where you want the form to appear:

<div class="form-container">

<h2>Responsive Contact Form</h2>

<form method="post" class="feedback-form" action="<?php echo $_SERVER['PHP_SELF']; ?>">

<p>

<label for="name">Name</label>

<input type="text" name="name" id="name" value="<?php echo isset($_POST['name']) ? $name : ''; ?>">

</p>

<p>

<label for="email">Email</label>

<input type="text" name="email" id="email" value="<?php echo isset($_POST['email']) ? $email : ''; ?>">

</p>

<p>

<label for="phone">Phone</label>

<input type="text" name="phone" id="phone" value="<?php echo isset($_POST['phone']) ? $phone : ''; ?>">

</p>

<p>

<label for="message">Message</label>

<textarea name="message" id="message"><?php echo isset($_POST['message']) ? $message : ''; ?></textarea>

</p>

<p>

<label for="alien">6 + 6 = ?</label>

<input type="text" name="alien" id="alien" value="<?php echo isset($_POST['alien']) ? $alien : ''; ?>">

</p>

<?php if($msg != ''): ?>

<div class="alert-message"><?php echo $msg; ?></div>

<?php endif; ?>

<button type="submit" name="submit" class="btn-green">Submit</button>

</form>

</div>

<!--- END FORM CODE -->

Add the php code below at the very start of your contact page before the <!DOCTYPE html> tag. Insert the recipients email address where you see $toEmail = 'xxxxxxx@xxxxxx.xxx'; in the php code:

<?php

// Message Vars

$msg = '';

// Check For Submit

if(isset($_POST['submit'])){

// Get Form Data

$name = htmlspecialchars($_POST['name']);

$email = htmlspecialchars($_POST['email']);

$phone = htmlspecialchars($_POST['phone']);

$message = htmlspecialchars($_POST['message']);

$alien = htmlspecialchars($_POST['alien']);

// Check Required Fields Are Not Empty

if(!empty($email) && !empty($name) && !empty($phone) && !empty($message) && !empty($alien)){

// Check For Valid Email

if(filter_var($email, FILTER_VALIDATE_EMAIL) === false){

$msg = 'Please use a valid email';

}

// Check Calculation Is Correct

elseif($alien !== '12') {

$msg = 'Incorrect Answer';

}

else {

// Build Email To Send

$toEmail = 'xxxxxxx@xxxxxx.xxx';

$subject = 'Contact Request From '.$name;

$body = '<h2>Contact Request</h2>

<h4>Name</h4><p>'.$name.'</p>

<h4>Email</h4><p>'.$email.'</p>

<h4>Message</h4><p>'.$message.'</p>

';

// Email Headers

$headers = "MIME-Version: 1.0" ."\r\n";

$headers .="Content-Type:text/html;charset=UTF-8" . "\r\n";

// Additional Headers

$headers .= "From: " .$name. "<".$email.">". "\r\n";

if(mail($toEmail, $subject, $body, $headers)){

// Email Sent Succesfully

$msg = 'Your email has been sent';

} else {

// Email Failed

$msg = 'Your email was not sent';

}

}

} else {

// Email Failed

$msg = 'Please fill in all fields';

}

}

?>

<!-- END PHP CODE -->

Give the form some styling:

* {

box-sizing: border-box;

}

.form-container {

margin: 0 auto;

background-color: #7ec352;

padding: 30px;

font-family: helvetica, sans-serif;

}

.form-container h2 {

margin: 0;

padding: 0;

font-weight: 400;

}

.feedback-form input, .feedback-form textarea  {

width: 100%;

padding: 8px;

font-family: helvetica, sans-serif;

font-size: 14px;

border: none;

border-radius: 4px;

}

.feedback-form label  {

display: block;

margin: 0 0 5px 0;

}

.btn-green {

background-color: #42a240;

border: none;

color: #fff;

padding: 10px 20px;

font-size: 14px;

border-radius: 4px;

}

.alert-message {

background-color: #42a240;

color: #fff;

padding: 15px;

border-radius: 4px;

text-align: center;

margin: 0 0 15px 0;

}

You should now have a working form assuming your server supports the php mail funstion

[BenPleysier]

I don't think that the server supports PHP. It does however serve HTTP/2

[osgood_]

BenPleysier  wrote

I don't think that the server supports PHP. It does however serve HTTP/2

Im hoping this is just a test server and being as though the pages dont look like they will be verbosely populated with 20-30 unnecessary calls to bloated js plugins and redundant css files http2 will be irrelevant.