HTML

59K

Solutions

30K

Contributors

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.

Share tech news, updates, or what's on your mind.

Sign up to Post

Trying to get a spinner to show while the page is loading,,,,not working.  I think that it's conflicting with the other preload CSS.  Just a thought.

http://mediascrubber.com/

</head>
<body class="gallery-single-gallery home-demo-2">
<!-- PRELOADER -->
<div class="loader">Loading...</div>
<div id="preloader"></div>
<!-- START HEADER SECTION -->
<section id="header">
    <!-- START MENU SECTION -->
    <div class="nav

Open in new window


$color-background: #eaecfa;
$color-loader: #ce4233;

body {
  background: $color-background;
}

.loader {
  width: 250px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-family: helvetica, arial, sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  color: $color-loader;
  letter-spacing: 0.2em;
  
  &::before, &::after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: $color-loader;
    position: absolute;
    animation: load .7s infinite alternate ease-in-out;
  }
  
  &::before {
    top: 0;
  }
  
  &::after {
    bottom: 0;
  }
}

@keyframes load {
  0% { left: 0; height: 30px; width: 15px }
  50% { height: 8px; width: 40px }
  100% { left: 235px; height: 30px; width: 15px}
}

Open in new window

0
Ensure you’re charging the right price for your IT
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

I have the following basic format:

<ul>
   <li>link1</li>
   <li>link2</li>
   <li>link3</li>
</ul>

All I want is to put a link after the top lis (not the bottom one)

So end result will be

link1

_________


Link 2


__________


Link 3        




(no line here)

I don't know how to get the lines there, or how to avoid the last one from displaying (I'm guessing last-child)
0
The bottom part of the image is getting cut-off.  I tried making the image less high.   That did not work.  Any help is appreciated.

<div class="standard-post-item">
                    <div class="featured-image">
                        <a href="11-Blog-Single-Post.html">
                            <div class="featured-overly"></div>
                            <img src="resources/images/TeamSchure.png" alt="Team Schure">
                        </a>
                    </div>
                    <div class="post-text">
                        <div class="post-heading">

Open in new window


http://www.mediascrubber.com/21-About-Us.html
0
hi

how can i remove a node from html collection xml in javascript
0
http://www.mediascrubber.com/09-Legacy.html

The Legacy section is how it should be.  The event section does not react the same way.  Its doing a vertical stack.  Any solutions to this? Please.

<!-- START SINGLE GALLERY SECTION -->
<section id="single-gallery">
    <div class="section">
        <div class="grid">
            <div class="grid-sizer"></div>
            <div class="grid-item">
                <a href="javascript:void(0)" class="anim_border"></a>
                <a href="" class="img_link"><img src="resources/images/Julio.png" alt="Julio Iglesias"></a>
            </div>
            <div class="grid-item">
                <a href="javascript:void(0)" class="anim_border"></a>
                <a href="" class="img_link"><img src="resources/images/Amel.png" alt="Amel Larrieux"></a>
            </div>
            <div class="grid-item">
                <a href="javascript:void(0)" class="anim_border"></a>
                <a href="" class="img_link"><img src="resources/images/Kelly.png" alt="Kelly Rowland"></a>
            </div>
            <div class="grid-item">
                <a href="javascript:void(0)" class="anim_border"></a>
                <a href="" class="img_link"><img src="resources/images/Bennet.png" alt="Tony Bennet"></a>
            </div>
            <div class="grid-item">
                <a href="javascript:void(0)" class="anim_border"></a>
                <a href="" class="img_link"><img src="resources/images/Adele.png" alt="Adele"></a>

Open in new window

0
Last photo at the bottom on the left is huge.  What code is controlling this?  I want three small across the bottom.
http://mediascrubber.com/09-Legacy.html
<section id="single-gallery">
    <div class="section">
        <div class="grid">
            <div class="grid-sizer"></div>
            <div class="grid-item">
                <a href="javascript:void(0)" class="anim_border"></a>
                <a href="" class="img_link"><img src="resources/images/Julio.png" alt="Julio Iglesias"></a>
            </div>
            <div class="grid-item">
                <a href="javascript:void(0)" class="anim_border"></a>
                <a href="" class="img_link"><img src="resources/images/Amel.png" alt="Amel Larrieux"></a>
            </div>
            <div class="grid-item">
                <a href="javascript:void(0)" class="anim_border"></a>
                <a href="" class="img_link"><img src="resources/images/Kelly.png" alt="Kelly Rowland"></a>
            </div>
            <div class="grid-item">
                <a href="javascript:void(0)" class="anim_border"></a>
                <a href="" class="img_link"><img src="resources/images/Bennet.png" alt="Tony Bennet"></a>
            </div>
            <div class="grid-item">
                <a href="javascript:void(0)" class="anim_border"></a>
                <a href="" class="img_link"><img src="resources/images/Adele.png" alt="Adele"></a>
            </div>
            <div class="grid-item">
                <a 

Open in new window

0
Can't seem to find the code to change the color of the play button when you hover over the video.

http://www.mediascrubber.com/06-Videos.html

<section id="videos">
    <div class="section">
        <div class="row">
            <div class="w-100 col-md-4 video-block" >
                <div class="w-100">
                    <div class="video-img-banner">
                        <a href="07-JackBe-Video.html">
                            <img src="resources/images/JackBeVideo.png" alt="Jack Be">
                            <div class="play"></div>
                        </a>
                    </div>
                    <a href="07-JackBe-Video.html">
                        <div class="video-banner-name">
                            <h2>Jack Be</h2>
                            <p>Slow Dancing In The Rain At The End Of The World</p>
                        </div>
                    </a>
                </div>
            </div>

Open in new window

0
Hi
I found a very promising looking javascript youtube for beginning a javascript game done in the window.requestAnimtionFrame method system , which appears to be best.

My transcribing it from video to Atom IDE loads the mutalisk I substituted for their GIF in the animation,
but it doesn't move after the requestAnimation x,y individual incrementation in my helper method movement statements.
 
I'm confident it will be obvious to a JS master on sight where my code is lacking

The Youtube that moves a GIF is here

I was pleased my code appeared to be promising, but the moving of said mutalisk doesn't happen

MY CODE ATTEMPT IS HERE:

<!DOCTYPE html>
<html>

<head>
  <title> Title something something</title>
  <style type = "text/css">
    body {
      background-color: #FFF;
      margin: 30px;
      margin-top: 10px;

    }

    #contentContainer {

      width: 550px;
      height: 350px;
      border: 5px black solid;
      overflow: hidden;
      background-color: FFFF00
    }

    #thing {
      position: relative;
      left: :25px
      top: 50px
    }
    </style>
  </head>

  <body>
    <div id = "contentContainer">
      <img id = "mutalisk" src = "http://jamescomp.com/pics/mutalisk.gif"
      height="75" width="75">
    </div>

  <script>
      var theMutalisk = document.querySelector("#mutalisk");
      var currentPosition = 0;

      var requestAnimationFrame = window.requestAnimationFrame 

Open in new window

0
When I click on the photo with the YouTube icon a second image (video) appears and I have to click again to play the video.  I want it to go directly to the second Image (video) so that I can click on it and the video plays.

<!-- START MUSIC SINGLE SECTION -->
<section id="video-post">
    <div class="section">
        <div class="embed-responsive embed-responsive-16by9">
            <div class="youtube" id="Hy9g8hn2TfQ" data-src="resources/images/CXHVideo.png"></div>
        </div>
    </div>
</section>
<!-- END MUSIC SINGLE SECTION -->

http://www.mediascrubber.com/07-CXH-Video.html

Thank you.

Open in new window

0
In front end development I came across a page where there was a side bar, with a page that could scroll.

Is there a name for this effect and how could I create it? (Screenshot attached)
Screenshot-from-2019-10-10-17-34-24.png
1
Exploring SharePoint 2016
LVL 13
Exploring SharePoint 2016

Explore SharePoint 2016, the web-based, collaborative platform that integrates with Microsoft Office to provide intranets, secure document management, and collaboration so you can develop your online and offline capabilities.

Hi
How does Javascript code find external html objects to modify? Javascript written inside HTML <script> tags is a simple connection to the HTML objects id'd in the HTML

In my index.htm below, I print out the result of (11+5) inside a named paragraph object id

If I change that print line to "innerHTML.js" which contains that exact line of code, getElementByID can't find the "demo" paragraph

My index.htm is:
<p>
<!DOCTYPE html>
<html>
<body>

<h1>Outer HTML object demo</h1>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 11+5
</script>

</body>
</html>

Open in new window

</p>
Then, if I change the line that prints 11+5 on the "demo" paragraph object to a<script src=...> .js file with that line of code in it,

it doesn't connect.
How does the javascript file called from the HTML link back to a paragraph object in the HTML?

Thanks
0
I am trying to create a popup when a user clicks the save button & that should have 2 options (Yes or No button). Popup should look similar to below screenshot.

I am using html & angularJS in my web application. How do i achieve this?

popup.jpg
0
Hi, in the Xcode IDE for javascript,

How do I setup this example code correctly?
This example will get me going full speed ahead..
ie, what do I name the html section and the javascript section? (labeled "the code used is:")
and do I copy the entire code section into its own file? Separate would be better.
Also, there is no <script...> code to link the code into the HTML
Should I add that anywhere before?
where it says, "the HTML markup is:"

Also..What else must be done to get this working? What are some exploitable mistakes I can make? How do coders make it simple to code swipe games w/o using a phone for test?
Link the mouse in to the swiping? How?
Can you see the PNG's for the arrow pics?
The code first example page is here

Maybe this page is better? here

Thanks
0
Hi,

I struggle with css! There's a bit of my website layout that does not line up, and its not the end of the world, (its a minor annoyance). Ive looked a few time but never been able to work out where it's being set, this is the problem...

oops
Ref: https://www.petenetlive.com/KB/Article/0001604

where in the css is that width being set! And what do I need to change to make it line up!
0
Hi,

I have two datatables in one html page.
One sorts dates fine, the other just don't.

See below for example.
01/03/2019 14:13:36      
01/03/2019 17:16:20      
01/04/2019 10:32:06      
01/10/2019 16:55:28      
12/06/2018 10:43:06

Please advise.
J.

HTML  I use

 '<div class="container">'
'<table id="example" class="display" style="width:100%">'
</table>

$HTMLEnd = @'
<script>
$(document).ready(function() {
    $('table.display').DataTable();
} );
</script>
'@
0
I have some html code using  JavaScript for multiple countdown timers on one page.
I am trying to figure out how to insert some code to play a sound when any of the timers hit zero.  My attempts to add any code at all breaks the timers, I'm just not sure what or where to put code for audio.
Can anyone point me in the right direction?

This is the working code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
	margin-top: 0px;
	margin-bottom: 0px;
}
</style>
</head>
<body>
<table width="358" border="0" align="center" cellpadding="2" cellspacing="2">
  <tr>
    <td width="100" align="center" valign="bottom"><input id="timer1" type="button" value="40 sec" style="width:100px" /></td>
    <td width="50" align="center" valign="bottom"><div id='countdown1'></div></td>
    <td width="26" align="left" valign="bottom">&nbsp;</td>
    <td width="100" align="center" valign="bottom"><input id="timer3" type="button" value="90 sec" style="width:100px" /></td>
    <td width="50" align="center" valign="bottom"><div id='countdown3'></div></td>
  </tr>
  <tr>
    <td align="center" valign="bottom"><input id="timer2" type="button" value="60 sec" style="width:100px" /></td>
    <td align="center" valign="bottom"><div id='countdown2'></div></td>
    <td align="left" valign="bottom">&nbsp;</td>
    <td align="center" valign="bottom"><input id="timer4" type="button" value="120 sec" style="width:100px" /></td>
    <td 

Open in new window

0
Hi, I'm trying to give an HTML table the striped effect by using a sample I found online; however, I'm not getting it to work. I'm trying to add
tr:nth-child(even) {
  background-color: #f2f2f2
}

Open in new window

to the table below but I'm not being able to get it to work. Could you please help me?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>Reservation Status Update</title>
	<style type="text/css">
		#outlook a {padding:0;} 
		body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
		
		.ExternalClass {width:100%;} 
		.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} 
		#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}

		img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
		a img {border:none;}
		.image_fix {display:block;}

		p {margin: 1em 0;}

		h1, h2, h3, h4, h5, h6 {color: black !important;}
		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: blue !important;}
		h1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {
			color: red !important; 
		 }
		h1 a:visited, h2 a:visited,  h3

Open in new window

0
Hi, Please see here: https://www.magickitchen.com/menu/thanksgiving.html. One of the items says Build your own Package or Add to your Order.

On that one, I'd like to hide the dropdown and the add to cart button.

The dropdown has a title of Nothing Selected. <button type="button" class="btn dropdown-toggle bs-placeholder btn-default" data-toggle="dropdown" role="button" title="Nothing selected"><span class="filter-option pull-left">Nothing selected</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button>

Can I use Jquery to say, if this title says nothing selected, display none?

Ideally, I'd like to add a display:none to this div: <div class="order-form">, but just on that item.

The page is generated from a template, so I have to use an if query somehow, I don't want all order forms to disappear.

Thanks, I hope that made some sense.
0
Email form is hanging and stopped sending....
I have a jquey script that handles the form hiding it after the email is sent.  This is not working, it just keeps saying sending....the emails did send at one point and that stopped as well.16-Contact-Us.htmlcontact.php
0
OWASP: Avoiding Hacker Tricks
LVL 13
OWASP: Avoiding Hacker Tricks

Learn to build secure applications from the mindset of the hacker and avoid being exploited.

Hi,

How do I format a certain table in css (like this: https://www.w3schools.com/css/tryit.asp?filename=trycss_table_border_divider), while leaving alone other tables in my html?

J.
0
Setting up an email form.  It is not sending.

<?php
if(!isset($_POST['submit']))
{
	//This page should not be accessed directly. Need to submit the form.
	echo "error; you need to submit the form!";
}
$name = $_POST['name'];
$visitor_email = $_POST['email'];
$website = $_POST['website'];
$message = $_POST['message'];

//Validate first
if(empty($name)||empty($visitor_email)) 
{
    echo "Name and email are mandatory!";
    exit;
}

if(IsInjected($visitor_email))
{
    echo "Bad email value!";
    exit;
}

$email_from = 'smg@schuremediagroup.com';//<== update the email address
$email_subject = "New Form submission";
$email_body = "You have received a new message from the user $name.\n".
    "Here is the message:\n $message".
    
$to = "smg@schuremediagroup.com";//<== update the email address
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
//Send the email!
mail($to,$email_subject,$email_body,$headers);
//done. redirect to thank-you page.
header('Location: thank-you.html');


// Function to validate against any email injection attempts
function IsInjected($str)
{
  $injections = array('(\n+)',
              '(\r+)',
              '(\t+)',
              '(%0A+)',
              '(%0D+)',
              '(%08+)',
              '(%09+)'
              );
  $inject = join('|', $injections);
  $inject = "/$inject/i";
  if(preg_match($inject,$str))
    {
    return true;
  }
  else
    {
    return false;
  }
}
   
?> 

Open in new window


<form method="post" name="myemailform" action="form-to-email.php">
                <div class="row fild_1">
                    <div class="col-sm-6">
                        <input type="text" class="form-control" name="name" placeholder="Full Name">
                    </div>
                    <div class="col-sm-6">
                        <input type="email" class="form-control" name="email" placeholder="Email">
                    </div>
                </div>
                <div class="row fild_2">
                    <div class="col-sm">
                        <input type="text" class="form-control" name="website"placeholder="Website">
                    </div>
                </div>
                <div class="form-group">
                    <textarea class="form-control" name="message" rows="3" placeholder="Message"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">SEND MESSAGE</button>
            </form>

Open in new window

0
Hello, Experts,

I am learning Javascript, HTML, and CSS. I have a decent understanding of how it works and starting to practice building my own web application to get hands-on experience.

PROBLEM:

I have created two buttons on my HTML page one submit and one reset. What is supposed to happen is when someone passes a value into the text field and hits submit it sends it to the JS side to compute and innerHTML the output on the screen with a <div></div>. This works no problem. What does not work is when I click the reset button it does not clear the innerHTML.

CODE:

HTML -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <title>Title</title>
</head>
<body>
    <!--nav bar-->
    <nav class="navbar navbar-light bg-light">
        <a class="navbar-brand" href="#">
            <img class="cba" src="/assets/CBA.png" alt="">
        </a>
    </nav>

    <!--form-group-->
    <form id="searchform">
        <div class="form-group">
            <label class="form-group-label">Enter Store UIN Here:</label>
            <input class="form-control" id="usrInput" placeholder="Ex: TX001" type="text">
            <button class="btn btn-primary" type="button" id="buttonSubmit" onclick="clicked();">Submit</button>
            <button 

Open in new window

0
Using AngularJS i need to do a server side validation for a button click event & based upon the result from server call i need to display a particular section of html page using
data-ng-show="resultdataset.length". If resultdataset has records user need to correct the errors & then click submit button. what attribute should i use to make the server call.

 <button type="submit" id="btnSubmitForm"  ng-click='Validate()' ng-disabled="Config.$invalid || !Config.$dirty"> Save </button>

does ng-click work??

I am submitting form using ng-submit & submitForm() should only be called if there are no records from resultdataset

 <form class="form" name="Config" role="form" ng-submit="submitForm()">

Sorry i am new to AngularJS & trying to figure out stuff.
0
Trying to change the red circle for the menu to another color.  I cannot find the code for it. Looked in the css.

http://www.mediascrubber.com/index.html
0
The image is not showing...

<img class="logotype logotype__front" src="../assets/images/logo_white.svg" alt="ARTEM.">

Open in new window


The images are in C:/SMG2020/assets

Any help is appreciated. Thank you.
0

HTML

59K

Solutions

30K

Contributors

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.