HTML

59K

Solutions

105

Content

i
The collection of articles, videos, and posts on this topic.

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

Hello,

I have a rating system which uses css and jquey. I have 5 stars, the stars are radio buttons and I used CSS to change them into stars,

I have been asked to modify if so that if someone clicks the 5 star, then the other 4 also change to selected star, or if you click the 3 star, then 2 and 1 also change.

I just want to css display to change, I don't want to change the stars to a selected value for when the form is submitted

I made an initial jquery attempt wth no luck, I am not even sure I am applying the right class
https://fasdinfotsaf.ca/en/fee-for-service/

FYI, the rating is based on 1 per IP, so if you submit it, you wont see stars anymore


My jquery attempt
jQuery('#star5').change(function() {

                  if( ($(this).is(':checked')))  {
						  $("#star4, #star3, #star2, #star1 ").addClass(".star:checked:before");
					}   else   {
						 $("#star4, #star3, #star2, #star1 ").addClass(".star");
					}
	
		 });

Open in new window


My HTML
<input type="radio" name="ratings" value="1" class="star" id="star1"> 
<input type="radio" name="ratings" value="2" class="star" id="star2">
 <input type="radio" name="ratings" value="3" class="star" id="star3">
<input type="radio" name="ratings" value="4" class="star" id="star4">
<input type="radio" name="ratings" value="5" class="star" id="star5">

Open in new window


My CSS
.star {
    visibility:hidden;
    font-size:30px;
    cursor:pointer;
	display:block;
   float:left;
   margin-right:15px;
}
.star:before {
   content: "\2606";
   position: absolute;
   visibility:visible;
   color:#1ac0da;
   
   
}
.star:checked:before {
   content: "\2605";
   position: absolute;
   color:#1ac0da;
}

Open in new window
1
2 Comments
Price Your IT Services for Profit
Price Your IT Services for Profit

Managed service contracts are great - when they're making you money. Yes, you’re getting paid monthly, but is it actually profitable? Learn to calculate your hourly overhead burden so you can master your IT services pricing strategy.

Download eBook
I have created a SQL Server Job that runs a query which I then will email in HTML format. The issue I am experiencing is that when the SQL statement returns a NULL value the resulting table in HTML does not render the cell and the data shifts. Table-Exampes-of-Now-versus-Intende.docx

My goal is to have display a "Blank" in the cell of the table I am emailing when the corresponding value in SQL is NULL. In the embed Word .doc the third employee (Smith) just joined the company and Termination date is NULL in SQL. This is causing the shift of data to the left.

Open in new window

DECLARE @Body NVARCHAR(MAX),
    @TableHead VARCHAR(1000),
    @TableTail VARCHAR(1000)


SET @TableTail = '</table></body></html>' ;
SET @TableHead = '<html><head>' + '<style>'
    + 'td {border: solid black;border-width: 1px;padding-left:1px;padding-right:1px;padding-top:1px;padding-bottom:1px;font: 9px arial} '
    + '</style>' + '</head>' + '<body>' + 'Date and Time: '
    + CONVERT(VARCHAR(50), GETDATE(), 120)
    + ' <br> <table cellpadding=0 cellspacing=0 border=0;>'
       + '<td bgcolor=#669900><b><font size="1" color="white">Employee</font></b></td>'
       + '<td bgcolor=#669900><b><font size="1" color="white">Hire Date</font></b></td>'
         + '<td bgcolor=#669900><b><font size="1" color="white">Termination Date</font></b></td>'
       + '<td bgcolor=#669900><b><font size="1" color="white">Job Title</font></b></td>'
       + '<td bgcolor=#669900><b><font size="1" …
0
5 Comments
Hello Experts,

I would like to position an html table wrapped in a <div> in the $mail->Body = ' of a php mailer. In html I can place a html table anywhere on a web page using the following code:

<div id="Layer1" style="position:fixed; left:250px; top:159px; width:218px; height:55px; z-index:7">
  <table width="250" border="1" cellpadding="1">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>

Using the above code in the php $mail->Body the table aligns to the left margin. I've tried various CSS <style> methods as well but I am unable to place the html table where i want in the ->Body. Is there a way to place the table where I want?  Other than the html table placement the php mailer performs as expected. Attached is a graphic of how I would like to place the html table in the ->Body of the php mailer, any help would be greatly appreciated.

Thank you,
Visionet
html_table.png
0
6 Comments
I am using  a top margin to align my navigation items with the logo. Is this actually okay or is there a better way to do it? I am not using flexbox or css grid, just html and css for this.

<div class="container">
  <div class="header__logo">
    <h1 class="header__logo--blue">Some Logo</h1>
  </div>
  <nav class="navigation">
    <ul class="navigation__list">
      <li class="navigation__item"><a href="#" class="navigation__link">About us</a></li>
      <li class="navigation__item"><a href="#" class="navigation__link">Services</a></li>
      <li class="navigation__item"><a href="#" class="navigation__link">Portfolio</a></li>
      <li class="navigation__item"><a href="#" class="navigation__link">Contact</a></li>
    </ul>
  </nav>
</div>

Open in new window


.navigation {

    &__list {
        float: right;
        list-style: none;
        margin-top: 8px;
    }

    &__item {
        display: inline-block;

        &:not(:last-child) {
            margin-right: 2rem;
        }
    }

    &__link {
        text-decoration: none;
        color: $color-primary-dark;
        font-size: 1.5rem;
        font-weight: 400;
    }
}

Open in new window


.header {

    &__logo {
        float: left;

        &--blue {
            font-size: 2.5rem;
            color: $color-primary;
        }
    }
}

Open in new window
0
4 Comments
Hi,

I am working on this page:
https://genealogiskforum.dk/Gf_Magasin_content/
It has four panes at the top of the page, and this question is only about pane three and four.

If you go into pane three you see this navigation section at the top of the page.
Sk-rmbillede-2019-03-12-07.42.42.pngIt is in danish, but the translation is like this: Forrige = Previous, Næste = Next, Side = Page (the box shows the actual page number), af xx sider = of xx pages.

When using the Next and Previous buttons the pagenumber in the box changes nicely in both pane three and pane four. The problem is that when entering a pagenumber in the box in pane three and hit Enter nothing happens, and when doing the same in pane four it goes to the page you have entered as expected.

I get no messages in the console, ant no other other errors - just nothing happens.

The code lines in question is for pane three these:
HTML: 
<div class="flex-item"><input type="text" style="width: 45px; text-align:center; color: #f6f6f6; background-color:#808080; border: 1px solid #f6f6f6;margin-left:18px" id="my-page-input" value="1"></div>

Open in new window


Script: 
var input5 = document.getElementById('my-page-input');

    input5.addEventListener('keypress', function(event) {
        if (event.which === 13) { // Return key
            viewer.goToPage(parseInt(input5.value, 10)-1);
        }
    });

    viewer.addHandler("page", function (data) {
        input5.value = ( data.page + 1 );
    });

Open in new window


And the codelines for pane four are these:
HTML: 
<div class="flex-item"><input type="text" style="width: 45px; text-align:center; color: #f6f6f6; background-color:#808080; border: 1px solid #f6f6f6;margin-left:18px"; id="my-page-input2" value="1"></div>

Open in new window


Script: 
var input2 = document.getElementById('my-page-input2');

    input2.addEventListener('keypress', function(event) {
        if (event.which === 13) { // Return key
            viewer.goToPage(parseInt(input2.value, 10)-1);
        }
    });

    viewer.addHandler("page", function (data) {
        input2.value = ( data.page + 1 );
    });

Open in new window


I just can't figure out where I am going wrong here, and I hope that someone can help me out with this.
0
3 Comments
Looking to move audio player from development site.

Hi Guys, i was wondering if i could move the player thats here http://88.202.183.16/~iradiotest/ (when you hit play) to the main site https://iradio.ie (when you hit listen live)

I cant seem to find where the first player lives
0
3 Comments
On my site, there is a section for Contact Us that is not stacking underneath the section above it in the responsive view. I have been at it for hours trying to figure it out. Any help is appreciated. Here is the URL. Thank you.

http://domgarofalo.com/sticksandbones
0
2 Comments
Need a simple Visual Studio jQuery test environment.

I expect to be working in Visual Studio on a project which will involve Angular, Kendo UI and jQuery. So I need to set up a simple Visual Studio test environment where I can play around with some of the more complex jQuery commands.

What is the best way to do this in Visual Studio? I feel like I need a solution with an HTML file and a folder that contains jQuery. But feel free to suggest a few steps that can get me to that point.

And please include the steps to get jQuery installed. I assume that is just a NuGet call. But what about other dependencies?


Thanks.
0
4 Comments
Dear experts,

I have a tracker that detect faces on each picture with a rectangle in javascript. i would like passing the number of rectangles that appear on picture to an input form with the total rectangles number.
here the javascript code:
<script>
    window.onload = function() {
      var img = document.getElementById('img');

      var tracker = new tracking.ObjectTracker('face');

      tracking.track(img, tracker);

      tracker.on('track', function(event) {
        event.data.forEach(function(rect) {
          plotRectangle(rect.x, rect.y, rect.width, rect.height);
        });
      });

      var friends = [];

      var plotRectangle = function(x, y, w, h) {
        var rect = document.createElement('div');
        var arrow = document.createElement('div');
        var input = document.createElement('input');

        input.value = friends.pop();

        rect.onclick = function name() {
          input.select();
        };

       
        rect.classList.add('rect');

       
        document.getElementById('photo').appendChild(rect);

        rect.style.width = w + 'px';
        rect.style.height = h + 'px';
        rect.style.left = (img.offsetLeft + x) + 'px';
        rect.style.top = (img.offsetTop + y) + 'px';
      };
    };
  </script>

Open in new window

does anyone could help me ?
0
9 Comments
Where to place the <script> tag on the HTML page?

I know there are different places you can put this, depending on the behavior you want and also depending on the type of scripts you need to load.

So, what are the different places on theHTML page and what factors govern your decision? And are these script always Javascript?

Thanks
0
5 Comments
Fundamentals of JavaScript
LVL 13
Fundamentals of JavaScript

Learn the fundamentals of the popular programming language JavaScript so that you can explore the realm of web development.

Start Today!
In the nav section I want to put text like "page1", "page2", etc.  When the user clicks on any of the links in nav I want the "article" to display the content based on the click in the "nav".  How do I do this?
<!doctype html>
<title>CSS Grid Template 1</title>
<style>
    body {
        display: grid;
        grid-template-areas:
            "header header header"
            "nav article article"
            "nav footer footer";
        grid-template-rows: 80px 1fr 70px;
        grid-template-columns: 20% 1fr;
        grid-row-gap: 10px;
        grid-column-gap: 10px;
        height: 100vh;
        margin: 0;
    }

    header,
    footer,
    article,
    nav,
    div {
        padding: 1.2em;
        background: gold;
    }

    #pageHeader {
        grid-area: header;
        text-align: center;
    }

    #pageFooter {
        grid-area: footer;
    }

    #mainArticle {
        grid-area: article;
    }

    #mainNav {
        grid-area: nav;
    }

    /* Stack the layout on small devices/viewports. */
    @media all and (max-width: 575px) {
        body {
            grid-template-areas:
                "header"
                "article"
                "nav"
                "footer";
            grid-template-rows: 80px 1fr 70px;
            grid-template-columns: 1fr;
        }
    }
</style>

<body>
    <header id="pageHeader">
        <img src="images/xxxxx.png" alt="Header" />
    </header>
    <article id="mainArticle">Article</article>
    <nav

Open in new window

…
0
1 Comment

Content wider than screen

Clickable elements too close together

That's the mobile usability report for https://magickitchen.com/info/food-for-chronic-diseases.html.

This one, by contrast, is fine: https://www.magickitchen.com/info/protect-blood-vessels-and-kidneys-with-daily-exercise.html

Which leads me to believe the clickable elements issue isn't with the navigation or footer, which are identical.

The divs are the same as well, so I'm equally confused about the content width issue.

I've tried removing various elements (for instance, the testimonials section), but get the same response.
0
4 Comments
I have got two select elements and I would like hide the option values if it is greater than the first select options values.

<select name="upgradeQuoteDetails[0].currentBearer">
            <option value="10">
            10 Mbps</option>
            <option value="100">
            100 Mbps</option>
            <option value="1000">
            1 Gbps</option>
            <option value="10000">
            10 Gbps</option>
            <option value="0">
            Other</option>
    </select>
    
<select name="upgradeQuoteDetails[0].quotedBandwidths">
            <option value="10">
            10 Mbps</option>
            <option value="20">
            20 Mbps</option>
            <option value="30">
            30 Mbps</option>
            <option value="50">
            50 Mbps</option>
            <option value="100">
            100 Mbps</option>
            <option value="1000">
            1 Gbps</option>
            <option value="10000">
            10 Gbps</option>
            <option value="0">
            Other</option>
    </select>

Open in new window





$("select[name='upgradeQuoteDetails[0].currentBearer']").change(function(){
        	var selectedBearer =$(this).children("option:selected").val();
          
          
          var options = 		            $("select[name='upgradeQuoteDetails[0].quotedBandwidths'] option");

    var values = $.map(options ,function(option) {
        return option.value;
    });
    
    for (var i=0; i<values.length; i++){
    console.log(values[i]);
  
    		if (values[i] >= selectedBearer) {
        	        
                      $("select[name='upgradeQuoteDetails[0].quotedBandwidths']").children('option[value='+values[i]+']').hide();

        }
    }

       
});

Open in new window


The bandwidth option value should always be less then the bearer options values.  For example, if the bearer option 100, the bandwidth should show 10, 20, 30, 50 and 100 only.jsfiddle
0
4 Comments
i am using simple bootstrap website. and I want to know if there is any pop calendar to pop two calendar so I can choose start and end date, and drop both into a single html textbox.
0
1 Comment
https://github.com/selectize/selectize.js/fork

above is multi select from the datalist to the single textbox. I want this function working on my mvc/razor/c# web form.
however I do not like above selectize because it has css that make my own css website having some issues.

Do you know how to do select multiple value from html datalist to a single textbox (in javascript)?
0
2 Comments
I am trying to get website visitor geo location. And my research has the following.

1. using html5 geo Javascript but the down side is to request permission (Yes/No) from the website visitor.
2. make a text box and allow the website visitor to enter his/her own address or zip and convert to lat and lng.
3. using IP address and try to convert into lat and lng. but it has issues on the proxy sometime, and using those IP address provider will only return server IP since the codes is resided in the server.

my question is:
1. Do you know any softare vendor that I can pay for subscription fee to get the visitor's geo location? I see some website they can get very accurate information.
2. Or do you know any ways to write code in c#/mvc/javascript to make it working?
0
7 Comments
html table is not keeping borders around null value cells in table

missing table broder
' 2/27/2019 update
strhtml = "<HTML><Body><table border= '1'  width='50%'><tr><th>Sku</th><th>PRODUCT_DESCRIPTION</th><th>QTY</th>" & _
"<th>TARGET_PRICE</th><th>TARGET_PRICE_PROFITABILITY</th><th>CURRENT_PRICE</th><th>HIGH_IMPACT_SKUS</th></tr>"

if "HIGH_IMPACT_SKUS" IS A null value then the borders are disappearing in the html table  ?

Thanks
fordraiders
0
3 Comments
using telnetlib in python to configure a router. i'm using cgi to display the python script to a browser.
i'm having trouble troubleshooting the code because cgi just display's an error screen 'internal server error'
so, i really don't see where i'm making the mistake. i can run the python script through the python interpreter, but that's just a hassle.

any suggestions on how to troubleshoot the output? i've tried using
print "Content-type:text/plain\n" as opposed to "Content-type:text/html\n" so as to just display the unformatted output without html formatting, but i still am not seeing where i'm making mistakes.

i know i can cat /var/log/httpd/error_log

but i guess what i'm asking is if anyone can give me some more specifics about what is actually going on.
i understand this:
telnetlib is a module that'll open a socket to the router or switch.  the physical and data link connection we're not going to see, the network layer is addressed by the ip which i have set to a variable and is here
host = "192.168.1.1"
tn = telnetlib.Telnet(HOST, timeout=TIMEOUT)
any further specifics of communication is held within the actual module telnetlib -- socket or transport layer tcp settings.

the server 'sends' the message, encapsulated at what? layer 7 down through layer 2 as the data communications model/osi specifies.. it goes over the wire and over to the client which decapsulates the packet and sends it back up to the telnet application.

i understand i can't see…
0
3 Comments
I have this code:

<div class="row" style="padding-top:10px;">
			<div class="col-sm-12 col-xs-12 text-left"><input type="checkbox" name="selall" >&nbsp;<span id="selall" onClick="sel_all();">Select All</span></div>
		</div>
		<div class="row" style="padding-top:10px;">
				
			<div class="row" style="padding-top:10px;">
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="summtr" name="summtr" >&nbsp;<span id="strtxt" onClick="setsummtrcheck();">Summary (Trade Pricing)</span></div>
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="spec" name="spec" >&nbsp;<span id="spectxt" onClick="setspeccheck();">Sample Spec</span></div>
			</div>	
			<div class="row" style="padding-top:10px;">
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="summnt" name="summnt" >&nbsp;<span id="snttxt" onClick="setsummntcheck();">Summary (Net Pricing)</span></div>
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="broc" name="broc" >&nbsp;<span id="broctxt" onClick="setbroccheck();">Product Brochure</span></div>
			</div>	
			<div class="row" style="padding-top:10px;">
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="summnp" name="summnp" >&nbsp;<span id="snptxt" onClick="setsummnpcheck();">Summary (No Pricing)</span></div>
				<div class="col-sm-6 col-xs-6"><input type="checkbox" id="draw" name="draw" >&nbsp;<span id="drawtxt" onClick="setdrawcheck();">PDF Drawing File</span></div>
			</div>

Open in new window


It produces the output as in the attached image. Why does the "Select All" not align vertically with the checkbox elements underneath? I tried everything I could think of, like text-left, which is superfluous .

Thanks
Misalign.PNG
0
2 Comments
Expert Spotlight: Joe Anderson (DatabaseMX)
LVL 13
Expert Spotlight: Joe Anderson (DatabaseMX)

We’ve posted a new Expert Spotlight!  Joe Anderson (DatabaseMX) has been on Experts Exchange since 2006. Learn more about this database architect, guitar aficionado, and Microsoft MVP.

Read Article
I have this fiddle
https://jsfiddle.net/by69pLr0/

I have an iframe inside a Div. The div has a blue border and the iframe has a red border.

I set the height of the div to 100% percent and the height of the iframe to 100%.

When i run it, the div isn't taking up the full 100% height of the browser window.

How do i fix my fiddle so that the height of the div and iframe inside stretch the full height of the window?

As pointing by this arrow in this image:

DivHeight.PNG
0
4 Comments
Any idea what the following CSS selector mean ? Why the vertical and horizontal menu bar can't be displayed properly without this CSS ?



.row::after{
      clear:both;
      content: "";
      display: table;
}
sp_home.html
sp_layout.css
0
10 Comments
I have a site (it's an intranet, so I can't give a link) which uses jQuery.ui dialogs to show messages.
It uses only jQuery and jQuery.UI plus some of our own JS and CSS.
When the page content is much bigger than the view port (the browser window) (so there is vertical scroll bar appears) the dialog is shown at the bottom of the browser's window. Also the opposite is true, when the page content is much less to the browser's window, the dialog is aligned to the top edge.
I've found out that on this site the following expression is always equals true (in Chrome and Mozilla, but not in IE) and I believe that is the reason for the dialog misplacing.
$(document).height()===$(window).height()

Open in new window

On other sites these two methods return different sizes of the page content and the viewport accordingly.
What could be a cause for that?
0
3 Comments
https://www.stadriemblems.com/gallery/

I'm having a discrepancy between desktop and mobile views. When I view the page full size, it looks perfect. If I shrink the browser window down to col-xs mobile size, everything on the page is overlapping. I'm going mad trying to figure this one out. I'm hoping this has a simple solution that I am overlooking because I've been starting at it for too long.

I've tried removing entire sections and containers to try to see what is causing the problem, but it seems to be happening no matter what! I am not using any css that's unique to this page. It's all bootstrap and classes that apply to the entire site and this does not seem to be happening anywhere else on the site.

Let me know if you need any more info.
1
4 Comments
My agency is having problems with adobe product licensing.  My dreamweaver license expires after today.  Is there any freeware page editors I can download that are any good?
0
2 Comments
MySQL Insert Query on dynamically generated forms.  I'm not 100% sure how to ask this question.  I have a form that has a field group of Name, Address, email and phone.
These are under a specific contact organization.  I can dynamically add a new field and add a new name, Address, email and phone.  On and on.  I need to insert each one of these contacts into my DB on a new line.  They will of course have a unique ID but the same record_id of the name before them.  I'm not sure how to write this.  Also, in my form, do I write the name like below so as to create the array?

Help?

 $arr = array();
            for ($index = 0; $index < count($name); $index++) {
                $arr[$index] = $name[$index] . " " . $email[$index] . " " . $phone[$index] .;
            }


<html>
    <div class="col-12 col-print-7">
                                        <div class="">
                                            <label for="">Name:</label>
                                            <textarea data-gramm_editor="false"  data-gramm_editor="false" name="name[]" value="<?= $ii_firstname ?>" ></textarea>
                                        </div>
                                    </div>
 

                                    <!--  START Email  -->
                                    <div class="col-12 col-print-7">
                                        <label for="">Email:</label>
                                        <textarea data-gramm_editor="false"

Open in new window

…
0
17 Comments

HTML

59K

Solutions

105

Content

i
The collection of articles, videos, and posts on this topic.

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.