[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

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

Hi Experts,

      I am not able to create Green checkbox.  Please the below image you can see the html code and css and gui(how it looks).  I am not able create Green checkbox
 
Capture.JPG

the html code I have is

input.green-check:checked {
  background-color:#5cb85c;
  border-color:#5cb85c;
}

Open in new window


react js code

           (<div className="checkbox checkbox-success">
                              <input type="checkbox" className="green-check" value={j.value} checked={j.selected} key={j.value}  onClick=
                            {(e) => this.props.actions.updateFacet(i.key,j.value,true,false)}
                          />
                           <label>{` ${label}${count}`} </label>
                          </div>)

Open in new window


the check box I need is
 
 test.jpgPlease help me in finding a solution.

With many thanks,

Bharath AK
0
Learn SQL Server Core 2016
LVL 12
Learn SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

I would like to switch an image on the index.html of my website.  I want one image for the computer and another for the mobile devices.  How can this be accomplished?
http://mediascrubber.com/
<div class="banner parallax-window" data-parallax="scroll" data-image-src="images/slide-1.jpg"></div>

Open in new window

0
Trying to demonstrate a web worker API to my Web Development students and I wanted to make the process of changing a color image to grayscale in the worker. I know it doesn't take much processing but I'm just using it as an example. I have the grayscale working fine when it's not separated out into a websworker ( jvalencia.ceiwd.com/contoso/badge1.html ) but when I put the code into a webworker the progress bar works but the grayscale image doesn't work--the color image is loaded. ( jvalencia.ceiwd.com/contoso/badge.html )  What am I missing?

WORKING (With no Web Worker):

function showImage(file) {
      reader = new FileReader();
      reader.onload = function (event) {
            console.log(event.target)


            
            if (holder.getContext !== undefined) {
                  var context = holder.getContext('2d');
                  var destX = 0;
                  var destY = 0;
                  var imageObj = new Image();
                  
                  imageObj.onload = function() {
                        context.drawImage(imageObj, destX, destY, holder.width, holder.height);


                        var imgData = context.getImageData(0, 0, holder.width, holder.height); //get image from badge
                        var pixels = imgData.data
                        console.log(pixels);

                        for (var i = 0, n = pixels.length; i < n; i += 4) {
                            var grayscale = pixels[i] * .3 + pixels[i+1] * .59 + pixels[i+2] * .11;
                            pixels[i  ] = grayscale;        // red
                                 pixels[i+1] = grayscale;        // green
                            pixels[i+2] = grayscale;        // blue
                            //pixels[i+3]              is alpha

                            var…
0
Best way to display form results to user in timeline

Screen-Shot-2018-11-12-at-10.36.27.png
above is a snap of the timeline i am making

the engagement section is data that is entered into a form to a table and i want to show this information on a timeline but im stuck on how to show this to the user. for best ui or ux


any tips ?
0
Hello all,

I have a line in my code which checks to see if the email value entered in a submitted form already exists in the database. If so,  a value of 0 or 1 is assigned to a string and the string value is displayed.

$select = mysqli_query($db_connection, "SELECT `email` FROM `teachers_table` WHERE `email` = '".$_POST['email']."'") or exit(mysqli_error($db_connection));
	if(mysqli_num_rows($select)) {
    $email_exists = '1';
	}  
	else{
		$email_exists = '0';
	}
		echo $email_exists;

Open in new window


This part seems to work as intended - at least the value of 0 or 1 is displayed correctly depending on whether the email exists in the database or not. The next part of my code calls another function, (which in turn calls another validation function) which displays errors.

The validation worked but I added to it:
	if($email_exists == '1') {
      $errors[] = "EMAIL Exists IN OUR DATABASE";
    }

Open in new window


However, when I do this, I get an  Undefined variable: email_exists in... notice / error.

I don't understand why this is coming up as not defined if the function is being called after I have defined this value.  The error message is displayed even though I can see the value of $email_exists (i.e. the 1 or 0) output in the screen.

I've tried removing the quotes, changing to single quotes and using TRUE and FALSE but this didn't appear to change anything.

 When I use '=' instead of '==' i.e:
if($email_exists = '1') {
      $errors[] = "EMAIL Exists IN OUR DATABASE";
    }

Open in new window


...the not defined error goes away but the logic doesn't work, in that $email_exists seems to be always 1 and the error EMAIL Exists IN OUR DATABASE is always displayed.

Any help, as always, much appreciated.

Many thanks,

Adam,
0
Need a good asp.net PDF converter.

I store HTML in a database table field which we want to export to PDF. We've doing it with Telerik, but we'd like to get away from using that.

Any suggestions what we can use?

thanks!
0
Hello,

I have this code:
<div class="fodmap_section">
<center>
<p class="annimate_text">
So, what exactly is LOW FODMAP?
</p>

<p class="subtext">(and why does it matter) </p>

<div class="textNew">
<span class="FirstLetters">F</span>ermentable &nbsp;
<span class="FirstLetters">O</span>ligosaccharides &nbsp;
<span class="FirstLetters">D</span>isaccharides &nbsp;
<span class="FirstLetters">M</span>onosaccharides &nbsp;
<span class="FirstLetters">A</span>nd &nbsp;
<span class="FirstLetters">P</span>olyols&nbsp;

</div>

<p class="fodmap_info">
<b>
FODMAPs are natural sugars found in all foods that can be difficult for many<br>
people to digest. If you have Irritable Bowel Syndrome (IBS). Crohn's or Ulcerative Colitis (IBD),<br>
FODMAPS may be contributing to your symptoms. 
<span class="fodmap_info_semi">Following a low FODMAP diet can help!</span></b>
</p>
<button class="fodmapBtn">Click here to end show!</button>
</center>
</div>

Open in new window


I want that when the user scrolls down that line by line to be animated to rise up onto the screen when scrolled over.
Is that possible?

 
0
<div style="margin-top:20px;" id="property-2563" class="form-check form-check-inline">
<label style="float:left; margin-top:0px; margin-right:5px;" class="control-label" for="property-2563">chk1</label>
<input class="form-check-inline" type="checkbox" name="property25630" id="property25630" value="test1">
<label style="margin-top:0px; margin-left:5px" class="form-check-label" for="property25630" '="">test1</label>

<input class="form-check-inline" type="checkbox" name="property25631" id="property25631" value="test2">
<label style="margin-top:0px; margin-left:5px" class="form-check-label" for="property25631" '="">test2</label>

<input class="form-check-inline" type="checkbox" name="property25632" id="property25632" value="test3">
<label style="margin-top:0px; margin-left:5px" class="form-check-label" for="property25632" '="">test3</label>
</div>

Open in new window


any one see why i cannot check any of these check boxes ?

maybe newbie question but head is fried lol
0
I have this code:
  <div class="adddiv">
				     <p class="deliveryText OldStandard">Delivery </p>
						<form>
						<p class="delivery_days">Monday
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
						 </p>
						<select class='mondaySelect'  MondayOption= "<?php echo $new_counter;?>">
						<?php
						for($i=0;$i <= $qty_value; $i++)
						{
						echo '<option value="'. $i.'">'. $i .'</option>';
						}
						?>
						</select>
						
						<p class="delivery_days">Wednesday &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>	
						<select class='wednesdaySelect' WednesdayOption= "<?php echo $new_counter;?>">
						<?php
						for($i=0;$i <= $qty_value; $i++)
						{
						echo '<option value="'. $i.'">'. $i .'</option>';
						}
						?>
						</select>
						
						<p class="delivery_days">Friday &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;</p>	
						<select class='fridaySelect' FridayOption= "<?php echo $new_counter;?>">
						<?php
						for($i=0;$i <= $qty_value; $i++)
						{
						echo '<option value="'. 

Open in new window

0
what is the easiest way to click on the first check box using a script on the attached web page
see attached
Slide1.JPG
0
JavaScript Best Practices
LVL 12
JavaScript Best Practices

Save hours in development time and avoid common mistakes by learning the best practices to use for JavaScript.

Hi all,

Trying to change the properties of Js_CardColmns_On but only the text changes. I want the background-color and border to change too.

Any help, much appreciated.

/* unvisited link */
.Js_CardColmns_On a:link {
    color: #FF0000;
      background-color: #FF0000 !important;
      border: 6px solid #FF0000;
}

/* visited link */
.Js_CardColmns_On a:visited {
    color: #00FF00;
      background-color: #605858 !important;
      border: 6px solid #605858;
}

/* mouse over link */
.Js_CardColmns_On a:hover {
    color: #FF00FF;
      background-color: #D0BA26 !important;
      border: 6px solid #D0BA26;
}

/* selected link */
.Js_CardColmns_On a:active {
    color: #0000FF;
      background-color: #0089CC !important;
      border: 6px solid #0089CC;
}

----------------------------------------------------------------------------------------------

                  <div class="Js_CardColmns_On">
                  <a href="../REG_IMG_MGT/Tr_Update_Profile_Pic.asp?123">
                               <div>
                                    <i class="fas fa-id-card fa-4x"></i>
                               </div>
                               <div>
                                    Some Text
                               </div>
                  </a>
                  </div>
0
Do you know any free software HTML editor like this one which is online https://htmlpen.com/?

I need to make visual editing, as i do not know the HTML language.

long time ago, i used frontpage.  

I would appreciate if someone could help me here with guiding me to a html visual editor software.

thanks
0
Hi Everyone,

I'm using TCPDF and using a html string to create a table. Everything works fine, but how can I have a border on each cell?

I've tried TD style="border: 1px solid black" but no border.

Thanks.
0
I have a folder which has multiple other sub folders inside it and in each of those sub folders there are different files and only one htm file.

the htm file contains table and text.

Currently, i am manually opening these hundreds of htm files and searching the words and then i put them manually in an excel file

Please see attached example file of Excel .



Product231
Product575
Product7867
Plastic
Rubber
Iron
PVC
Pipe
Liquid
Shell
Stone
Brick
Book2.xlsm
0
Hallo, how can I set an HTML signature on Gmail App in my Android mobile device? I tried to copy from an other email; but it appear in new mail as plain text and not as the original.

Thanks!
0
Hi Experts,

Hover style is not working normally, where as on developer tools on chrome browser with force element state hover I am able to see the results not on normal mouse over or hover

the style I am using is

 
.cardoverlay{
  display:none;
}

.cardoverlay:hover {
    opacity:0.5!important;
    position:absolute!important;
    display:block!important;
}

Open in new window


the html I am using is

 <img src={thumbnail} alt={i.title} className="card-img card-img-top"
            style={{width:"300px",position:"relative",height:"260px",top:"0",left:"0",
             "object-fit":"cover"}}/>
             <img src={getOverlayImage(LOCAL_URL_PREFIX,i.type)} className="cardoverlay" style={{width:"300px",height:"260px",top:"0",left:"0",
                    position:"relative",opacity:"0.5",}}/>

Open in new window


Please see the below image as reference
with force element style hover
image1.png

without hover forced hover on dev tools and with normal hovering

image2.png
Please help me in resolving this issue.

With Many thanks,

Bharath AK
0
Hello,

oninput is not being recognized. creating this page within VS2008.
I am seeing the following error.
Attribute 'oninput' is not a valid attribute of element 'input'
What should be done to get it to recognize this?

Here is my code:

<!DOCTYPE html>
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >-->
<html>

<head>
    <!--<meta charset="utf-8" />-->
    <title>Services</title>
   <link href="jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="jquery-ui.js" type="text/javascript"></script>
    <link href="Stylesheet1.css" rel="stylesheet" type="text/css" />
    <script src="jquery-ui.min.js" type="text/javascript"></script>
    
<script type="text/javascript">

    $(function() {
        $("#svcStartdatepicker").datepicker();
        $("#svcEndDatePicker").datepicker();
    });
    
</script>
   
</head>
<body>

<div>
    <table>
    <tr>
    <td>
    <span > Select Client :</span>
    </td>
    <td>
         <input id="hHoldAutoFill" oninput="GetClientAutoFill(this.value);" class="ui-autocomplete" />
   
    </td>
    </tr>
    <tr>

Open in new window

0
I want to build a website that has the capability of both Spanish and English.  Is there a module that I can use or.....not sure how it's done so I am barking up a tree.  Any help is appreciated.  Thank you.
0
Hi Guys,
I have implemented progress bar with js and html progress tag.

Here is my sample implementation

<progress id="progressBar" value="0" max="100" style="width:300px; height: 40px;"></progress>
    <span id='status'></span>

  function Progressbarsx(perc) {
      var bar = document.getElementById('progressBar');
      var status = document.getElementById('status');
      status.innerHTML = perc + "%";
      bar.value = perc;
      perc++;
      var sim = setTimeout("Progressbarsx("+ perc +")", 100);
      if(perc == 100){
          status.innerHTML = 100;
          clearTimeout(sim);
      }
    }
    var amountrun = 0
    Progressbarsx(amountrun)

Open in new window

:

That is working fine.
Now I have a scenario in my production environment when I run a lot of ajax call for returning data from server.

I used to using spinning bar that spin until ajax function finish, but now I want to show progress bar and calculate the time until the return come back. exactly like I show in my example.
Now I want to do something like that:

 $(document).ajaxStart(function (val) {
        //call to my progress bar in a real time 
    }).ajaxStop(function (val) {
        //end the call after ajax stop.
    });

Open in new window


Please, let me know what is the idea of doing something like that.

Thank you.
0
CompTIA Security+
LVL 12
CompTIA Security+

Learn the essential functions of CompTIA Security+, which establishes the core knowledge required of any cybersecurity role and leads professionals into intermediate-level cybersecurity jobs.

I have the following lines of code which 'works' on my development server, but when I try it on my hosted live server - doesn't work.  They are placed within a form which links to corresponding tables on both the development and live server.

<div class="form-check">
  <input class="form-check-input" type="radio" name="active" id="active1" value="1" <?php if($teacher['active'] == "1"){echo 'checked';}?>>
  <label class="form-check-label" for="active1">
    Active
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="active" id="active2" value="0" <?php if($teacher['active'] == "0"){echo 'checked';}?>>
  <label class="form-check-label" for="active2">
    Inactive
  </label>
</div>

Open in new window


Sorry - this has been currently being edited as I have discovered I was describing what wasn't actually happening. I'll post more information once I've rechecked what's going on.

Many thanks,

Adam
0
Hi, Experts, I want to clear the red border line in every time I click the table. how to do it base on the code below?

<script>
$(function() {
  $(document ).on("click","#myPersonnelView89 input.i86s",function(){
    let tr = $(this).closest('tr');
    let a = tr.find('input')[0].value; 
    let b = tr.find('input')[2].value;
    let c = tr.find('input')[3].value;
 
    tr.find('input')[1].style.borderColor = "red"

    document.getElementById('P1').value = a;
    document.getElementById('P2').value = b;
    document.getElementById('P3').value = c;

  });
});
</script>

Open in new window

0
I have two div in my page. div one and div two have their minimum height set, but both grow based on the content, which is expected.
when they both expand based on their content, I want to make it such that height of both are same.
so when div one expands based on the it's content, I want the height of div two exactly same as the div one.
In other words , I want to control the height of div two , based on the height of div one.
any thoughts on this?

<div class="container">
    <div class="one">....</div>
    <div class="two>....</div>
</div>
0
I have found a great mobile responsive menu that i need some help to implement on my website.

The menu can be seen at

https://smart-websites.co.uk/test/menu/menu.php

The code is html:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/menu.js"></script>
</head>
<header>
<nav id='cssmenu'>
<div class="logo"><a href="index.html"><img  style="height:20px" src="https://smartloyalty.co.uk/app/images/logos/smart/smart-websites-ro.png"/> </a></div>
<div id="head-mobile"></div>
<div class="button"></div>
<ul>
<li class='active'><a href='#'>HOME</a></li>
<li><a href='#'>ABOUT</a></li>
<li><a href='#'>PRODUCTS</a>
   <ul>
      <li><a href='#'>Product 1</a>
         <ul>
            <li><a href='#'>Sub Product</a></li>
            <li><a href='#'>Sub Product</a></li>
         </ul>
      </li>
      <li><a href='#'>Product 2</a>
         <ul>
            <li><a href='#'>Sub Product</a></li>
            <li><a href='#'>Sub Product</a></li>
            <li><a href='#'>BIO</a></li>
<li><a href='#'>VIDEO</a></li>
<li><a href='#'>GALLERY</a></li>
<li><a href='#'>CONTACT</a></li>
<li><a href='#'>HOME</a></li>
<li><a href='#'>ABOUT</a></li>
<li><a href='#'>BIO</a></li>
<li><a href='#'>VIDEO</a></li>
<li><a href='#'>GALLERY</a></li>
<li><a href='#'>CONTACT</a></li>
<li><a 

Open in new window

0
I am running into a situation where it looks like I have too many check boxes on a form. This is php, the php code is attached.

The number $nr is quite high in some cases, maybe over 1,000.

In a specific situation, I run this, a small portion of the output looks like the attached file called output.jpg.

Using view source (in Firefox) the same area looks like the file source.jpg.

This only happens in Firefox, NOT in Chrome.

Any ideas what is causing this?

Thanks
print_mults.php
output.JPG
source.JPG
0
So i have chart js on my page .
It displays number of users over time. Time interval is 2 hours so over a month i get lots of data.
All works fine but i would like to hide x Axis labels only - with ticks remaining intact.
Where and what  options would go in this file for no labels below x axis?

<!DOCTYPE html>
<html>
<head>
<title>/Prototype.</title>
<style type="text/css">
BODY {
    width: 750PX;
}

#chart-container {
    width: 100%;
    height: auto;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>


</head>
<body>
    <div id="chart-container">
        <canvas id="graphCanvas"></canvas>
    </div>

    <script>
        $(document).ready(function () {
            showGraph();
        });


        function showGraph()
        {
            {
                var id = location.search.match(/[?&]id=([^&]*)/)[1];
                
                $.post("xxx.php", {"id": id}, 
                function (data)
                {
                    console.log(data);
                     var date = [];
                    var users = [];

                    for (var i in data) {
                        date.push(data[i].date);
                        users.push(data[i].users);
                    }

                    var chartdata = {
                       labels:date ,
                        datasets: [
                            {
                                label: 

Open in new window

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.