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

CSS issue, might not be possible.

I have a radial gradient and a transparent image.  I want to blend them.

.page-title{
	background: radial-gradient(ellipse farthest-corner at 50% 30%, #f39b41 20%, #f26344 90%)!important;
	background-image: url(/wp-content/uploads/2019/01/main-bckg.png);
	background-size: cover;
}

Open in new window


File attached.  Its large, the title area is 1300px, went double pixel to get best resolution.

I feel like the image, its transparent, should layer on top of the radial gradient. I just cant get it to work.

Suggestions?  MAybe a CSS3 option thats better?
0
Big Business Goals? Which KPIs Will Help You
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Hi

In  my ASP.net web app I am using the following Javascript code to redirect users on mobile devices to another page.
On a different page I want to hide a Menu bar called "Menu1" and show a hyperlink called "Link1"

How would I do that?

<head runat="server">

    <script type="text/javascript">
    <!--
    if (screen.width <= 699) {
    document.location = "http://steel1.azurewebsites.net/Mobile_OffersByMe";
    }
    //-->
    </script> 

</head>

Open in new window

1
I am trying to get a raw file from a bitbucket repository using curl with the following commands:

curl  -L -O  https://user:password@bitbucket.org/username/repository/branch/HEAD/filename.txt
curl  -L -O  https://user:password@bitbucket.org/username/repository/branch/raw/filename.txt

I have a file committed to the master branch called filename.txt

I want to get the raw version of the above file. What code do i need to get that? All I get from these commands is the HTML code that the page contains
0
Need a web Page to Check which Server the Web Site is currently on.

I am running 2 Windows 2012 R2 Data Center Web Farm using  2 Windows 2012 R2 Data Center NLB with URL Rewrite all works great.

I would like to setup a test page to preset the server from which the page came from is on.

Server1 Node1
Server2 Node2


#################################################
#
#    Your are running on Server1
#
#    Date: Current Day  Time: Current Time
#
#################################################

Something like that

How can I check this in HTML ?
0
Dear Experts,
I have found a code on web that rotate an images, which is perfect.
However, this code works perfectly fine with only one image, but when I want to use it with more than one image it only works for the first image,
I want to rotate an image when I click it.

How can I do that to work with all images on my page?
Thank you

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#image {
    transform-origin: top left; /* IE 10+, Firefox, etc. */
    -webkit-transform-origin: top left; /* Chrome */
    -ms-transform-origin: top left; /* IE 9 */
}
#image.rotate90 {
    transform: rotate(90deg) translateY(-100%);
    -webkit-transform: rotate(90deg) translateY(-100%);
    -ms-transform: rotate(90deg) translateY(-100%);
}
#image.rotate180 {
    transform: rotate(180deg) translate(-100%,-100%);
    -webkit-transform: rotate(180deg) translate(-100%,-100%);
    -ms-transform: rotate(180deg) translateX(-100%,-100%);
}
#image.rotate270 {
    transform: rotate(270deg) translateX(-100%);
    -webkit-transform: rotate(270deg) translateX(-100%);
    -ms-transform: rotate(270deg) translateX(-100%);
}
</style>

</head>

<body>

<a href=# id="button"><img src="..../img/logo-tr7.fw.png" id="image" />
</a>
<br>

<a href=# id="button">
<img src="https://..../img/logo-tr6.fw.png" id="image" />
</a>

<script>
var angle = 0, img = document.getElementById('image');
document.getElementById('button').onclick = function() {
    angle = (angle+90)%360;
    img.className

Open in new window

1
Hi, please see https://www.magickitchen.com/weight-loss-meal-delivery/.  On scroll in desktop view, there's a white space that appears between the photo and the header, and I can't figure out where it comes from or how to fix it. Can anyone help? Thanks!! (I see it on two browsers, my desktop resolution is 1600x900)

Untitled-1.jpg
0
Hi Web Layout Experts,

I'm trying to change a roster webpage from being an HTML table to something responsive so site visitors can easily read it on different devices, without having to zoom a lot (as they currently do with the table).

Attached is a spreadsheet (which I've used as a convenient way to mock up the design) and PDF of the same, which has a single sheet with 3 sections showing:
1.  The current (non-responsive) layout using the HTML table.  Each record/date/event is a row.
2.  A possible responsive alternative layout of the same data in a wide browser.  Each record/date/event is a column.
3.  The same data in the same responsive design in a narrow browser.  Each record/date/event is a column.

(Note that the people's names will be in dropdowns, if that makes any difference.)

I've used the CSS @media tag (but I'm a newbie to it) once before, to automatically force data into less columns on narrow browsers, e.g.:
    @media screen and (max-width: 600px)
    {
        .column
        {
            width: 100%;
            padding: 0;
        }
    }

However, in this case I'm thinking I might have to have row headings (e.g. "Date/Time") at the left of every row of data, as can be seen in cases 2 & 3 of the attachments, but I don't see how a @media tag is going to repeat those row headings so that I get one at the beginning of each row regardless of the number of columns of data to the right.
(I guess I could put row headings to …
0
Hi experts,

I want to iterate reactjs function for object (metadata) for 5 times

The javascript object values are in the below console.log image

console.png
Please see the code I have

 console.log(metaKeyValues, '-  metadata ');

    var listMetadata = Object.entries(metaKeyValues).map(([key,value])=>{
         return (
           <div style={{display:"block",width:800}}>
                <div className="row">
                     <span style={{display:'inline-block',minWidth:100,padding:5}}> {key} </span>
                     <span style={{display:'inline-block',minWidth:400,padding:10}}> {value} </span>
                </div>
           </div>
         )});

Open in new window


I want to iterate this, for 5 times.  Something like this,  but it is not working.

 var index = 0;
 var testListMetadata = Object.entries(metaKeyValues).map((([key,value]),index)=>{
         return(
             if(index < 5) {
             <div style={{display:"block",width:800}}>
                  <div className="row">
                       <span style={{display:'inline-block',minWidth:100,padding:5}}> {key} </span>
                       <span style={{display:'inline-block',minWidth:400,padding:10}}> {value} </span>
                  </div>
             </div>
             index ++;
          })
    });

Open in new window


Please help me in resolving this issue.

with Many thanks,

Bharath AK
0
Need interactive website for web GUI design

I hope there are a few drag and drop types of easy GUI configuration test sites, where I can download the HTML, CSS and even the Javascript.

If I need to limit myself to just the HTML and CSS, that is fine.

Can you give me some samples of this type of website?

Thanks
0
Hello,

I am tying  to do a simple mouse over image within php output, but i get errors

this is the plain html which works fine

<img src="wp-content/themes/darkStarMediaTheme/images/button-banner.jpg" onMouseOver="this.src='wp-content/themes/darkStarMediaTheme/images/button-banner-over.jpg'" onMouseOut="this.src='wp-content/themes/darkStarMediaTheme/images/button-banner.jpg'" class="img-responsive myButtonLinkBanner">

But I do not know how to handle the single quote when I use it in php echo

e.g.

echo '<img src="wp-content/themes/darkStarMediaTheme/images/button-banner.jpg" onMouseOver="this.src='wp-content/themes/darkStarMediaTheme/images/button-banner-over.jpg'" onMouseOut="this.src='wp-content/themes/darkStarMediaTheme/images/button-banner.jpg'" class="img-responsive myButtonLinkBanner">';
      
is an error

echo '<img src="wp-content/themes/darkStarMediaTheme/images/button-banner.jpg" onMouseOver="this.src="wp-content/themes/darkStarMediaTheme/images/button-banner-over.jpg"" onMouseOut="this.src="wp-content/themes/darkStarMediaTheme/images/button-banner.jpg"" class="img-responsive myButtonLinkBanner">';
      
as is this above
0
Determine the Perfect Price for Your IT Services
Determine the Perfect Price for Your IT Services

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

I'm running in to some difficulty loading an HTML file into a DIV using JQuery 3.x's load() method:

http://api.jquery.com/load/

Although I am successfully able to load and display the HTML file, .. I am getting JavaScript errors, which I'd like to eliminate/suppress.

I have this very simple JS function to trigger the loading of the HTML file:

function loadGoogleMapView(pageurl) {
	$("#myMap").load(pageurl);
}

Open in new window


.. and then I am calling the method by passing the HTML filename to it:

<a href="#" onclick="loadGoogleMapView('map-view.html');">View Map</a>

Open in new window


The contents of the HTML file that I'm trying to load is as follows (note that I have deliberately stripped out my Google Maps API key).

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style>
	#mapView { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
</style>	

</head>

<body>

<div id="mapView"></div>

<script>
function initMap() {
	var broadway = {
		info: '<strong>Chipotle on Broadway</strong><br>\
					5224 N Broadway St<br> Chicago, IL 60640<br>\
					<a href="https://goo.gl/maps/jKNEDz4SyyH2">Get Directions</a>',
		lat: 41.976816,
		long: -87.659916
	};
	var belmont = {
		info: '<strong>Chipotle on Belmont</strong><br>\
					1025 W Belmont Ave<br> Chicago, IL 60657<br>\
					<a href="https://goo.gl/maps/PHfsWTvgKa92">Get Directions</a>',
		lat: 41.939670,
		long: -87.655167
	};

Open in new window

0
Seems like jQuery is way easier to do simple tasks like this but I want to do it with pure javascript instead which seems significantly harder. Anyway, I just want to fade out an element when a button is clicked. I want to use css for the fade but I believe that you cannot transition display: none;

I have tried to first fade out and then totally remove the element but the display:none seems to fire instantly as I don't see the fade out at all.

The css:

.fade-out {
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: 1s, 0s;
    transition-delay: 0s, 1s;
}
.remove-vis {
    display: none;
}

Open in new window


My .then() block:

        .then(response => {
            const pendingLi = deleteBtn.closest('li');
            pendingLi.classList.add('fade-out');
            pendingLi.classList.add('remove-vis');
            btnSet.forEach(query => {
                query.style.visibility = 'visible';
            });
        })

Open in new window

1
I have a checkbox that enables and disables the validation of a textbox when checked. I am doing this on client side and want everything to be on client side.

I am attempting to use jquery to accomplish what I need to do. I have written most of the code already and it works mostly how I want it to, except for when I first activate the textbox it throws up the validation error. I only want it to validate on submission.
textboxval.PNG
Here is my code:
    var idEmail = {
        txtEmailNotification: "<%= txtEmailNotification.ClientID %>"
    }
    var idEmailVal = {
        valRegExpEmailNotification: "<%= valRegExpEmailNotification.ClientID %>"
    }
    var idEmailReqVal = {
        valEmailNotification: "<%= valEmailNotification.ClientID %>"
    }
$(document).ready(function functionCheckEmail() {
    //check if checkbox is checked on page load
    if ($('#chkIsEmailNotices').is(':checked')) {

        $("#" + idEmail.txtEmailNotification).show(); //shows if checked
        ValidatorEnable($("#" + idEmailVal.valRegExpEmailNotification)[0], true); //shows validators
        ValidatorEnable($("#" + idEmailReqVal.valEmailNotification)[0], true); //shows validators

    } else {

        $("#" + idEmail.txtEmailNotification).hide(); //hides if not checked
        ValidatorEnable($("#" + idEmailVal.valRegExpEmailNotification)[0], false); //hides validators
        ValidatorEnable($("#" + idEmailReqVal.valEmailNotification)[0], false); //hides validators
    }

Open in new window

0
My client has reported a website header display issue occurring only on iPad, but I don't have an iPad and can't replicate the issue using the iPad responsive mode in Chrome dev tools. I think the main navigation menu may be wrapping down below the logo and title.

Would someone with an iPad please try to view the site (landscape and portrait) at https://www.u3ahastingsnz.org.nz and see if you can replicate the issue?

Please share the model of your iPad, and if you can replicate the issue please provide a screenshot. Thanks very much!

The navigation menu should look like this (and the menu should collapse to a mobile menu on smaller screens):
Screenshot of how the header should look
0
Hi

I have the following header in my ASP.net project.
How do I center align it on the page

 <h1 style="color:#468499";">The Yard Mobile</h1>

Open in new window


for some reason the following didn't work. Error said that it was not a valid attribute
  <h1 align="center" style="color:#468499";">Steel Yard Mobile</h1> 

Open in new window

1
Experts,
  I have one js file for dynamic pagination. We did not use any plug in for this code. I would like to implement functionality with css.

  1. Highlight the Active page
  2. Disable the Previous page if we  are one first page.
  3.  Disable the Next Page if we are on last page
 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
   (function () {
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.Footer = pagingControl;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

 function pagingControl(ctx) 
 {
    var firstRow = ctx.ListData.FirstRow;
    var lastRow = ctx.ListData.LastRow;
    var prev = ctx.ListData.PrevHref;
    var next = ctx.ListData.NextHref;
    var view = ctx.view;
    var filter = ctx.ListData.FilterLink;
    view =  view.replace(/[{}]/g, "");
console.log(view);
    var totalItems = $('tr#aggWPQ2 td.ms-vb2 b').html();
        totalItems = Number(totalItems.replace('Count=&nbsp;', '') );
    var totalPages = (totalItems / 5) +1;  // Mod function 
	
	
	// "?Paged=TRUE&p_ID=10&PageFirstRow=11&View=f0e50c0f-5f49-46f0-890d-fb6039528edd"

  var html = "";
		 
          html +="<div class='Paging'>";
          html += prev ? "<a href='" + prev + "'><span><&nbsp;Previous Page</span></a>" : "<a href='" + prev + "'>Previous Page</a>";
	
          var pageID =  0;
          var pageFirstRow = pageID + 1;
        

Open in new window

1
I have a web page that has a date input field. This is in html 5. I need a jquery or javascript option to check if a data has been supplied, else add the default date "01/02/1901". This would be an event triggered by the submit button. I just need to update the field before the post.

<input type="date" name="Date Worked" id="add_Date_Worked" />
<input type="submit" value="Save Changes" />

Open in new window

1
Hi

I have the following ASP.net GridView in a panel that I want to load to fit the width of the screen size of any mobile device/
I have set the width of the panel and gridview to 100% along with other controls on the screen but the GridView seems to dominate and
expand past these controls in width. What am I doing wrong? I am looking for a little guidance on how to set panels, gridviews (with template fields) and dropdownlists
to all fit to the width of a screen together

    <asp:Panel ID="Panel_Data" runat="server" Visible="false" Width="100%">
        
             <asp:GridView ID="GridView1" Width="100%" runat="server" CssClass="roundedCorner2" BackColor="White" CellPadding="4" AllowSorting="True" Font-Names="Verdana" Font-Size="Small" AutoGenerateColumns="False" >   
            <Columns>

                       <asp:TemplateField HeaderText="Chat To Seller" ControlStyle-Forecolor ="Gray">
                            <ItemTemplate>
                                <asp:Button ID="ButtonQuestion" runat="server"  
                              CommandName="btnQuestion" 
                              CommandArgument="<%# CType(Container, GridViewRow).RowIndex %>"
                              Text="Message"  />
                            </ItemTemplate>
                            <ControlStyle ForeColor="#468499" />
                       </asp:TemplateField> 
               
                    <asp:TemplateField HeaderText="Order Qty" 

Open in new window

0
Hi there!

I want to reproduce EXACTLY this fiddler : https://jsfiddle.net/0Lng89tq/5/ 
(Please don´t ask my reasons to do it, nor tell me that modals were not created to be used like that, etc.)

To do so (that is, to reproduce that fiddler), I have created two files:

(A) JS file named modal_background.js with exactly the following content:

------------------------------------------------------
$(document).ready(function(){
$('#myModal').modal();

$('#myModal').on('shown.bs.modal', function() {
    $(document).off('focusin.modal');
});

$('.swal').click(function() {
      swal({title:'Test', input: 'text'});
});
});
------------------------------------------------------


(B) HTML file named fiddler_modal.html with exactly the following content:

------------------------------------------------------
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/modal_background.js"></script>

<meta charset="utf-8">
    <!-- Stylesheets-->
    <link rel="stylesheet" href="css/bootstrap.min.css">

<title>Untitled Document</title>
</head>
<body>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<button type="button" class="swal">
swal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" …
0
Become a Certified Penetration Testing Engineer
LVL 12
Become a Certified Penetration Testing Engineer

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

I have a web application that is using html 5. I need to check a date input field to see if it has a value, if not, then add then add the date: (1901-01-01) yyyy-MM-dd. I would like to use javascript. The input date field is below.

html code ----------------------------------------------------------------------
<input type="date" name="Date_First_Use" id="add_Date_First_Use" class="form-control" disabled />

Open in new window

1
I have an MVC C# web application and having issues capturing a date input field value. For some reason, even though the user selects a date from the date picker, the value passed to the control is always the same not sure why. Maybe I have an issue with my code. See code and screen shot of the values below.

cshtmel ------------------------------------------------------
<input type="date" name="Date Worked" id="add_Date_Worked" class="form-control" disabled required />

Open in new window



Controller ---------------------------------------------------
 [HttpPost]
        [ActionName("AddTimeInfo")]
        public ActionResult AddTimeInfoPost(TimeInfo timeinfo, string birthdate)
        {
            if (ModelState.IsValid)
            {
                timeinfo.Date_Worked = DateTime.Parse(string.Format("{0:yyyy-MM-dd}", timeinfo.Date_Worked));                
                try
                {
                    timeinfoDao.InsertTimeInfo(timeinfo);
                    TempData["Success"] = "true";
                }
                catch (Exception e)
                {
                    TempData["Success"] = "false";
                }
            }
            else
            {
                var errors2 = ModelState
                    .Where(x => x.Value.Errors.Count > 0)
                    .Select(x => new { x.Key, x.Value.Errors })
                    .ToArray();
                TempData["Success"] = "false";
            }
            return RedirectToAction("TimeInfo", "Home");
        }

Open in new window

1
I use HTML5 and JS.
I use Bootstrap modal for pop-up.
The modal works on clicks,

How can I show it when page loads. ( without clicking )
this is the script that I use
<script>
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})
</script>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Open in new window

1
Hi,

I'm trying to design portlets that can have the same height if they are beside each other but have different content length. I've done a try in the below code pen where I succeded in getting them in the same height, but it messes up the body and footer elements in the portlet.

If someone has an idea in how to fix this I would be grateful.

Here's the link to the codepen:
Portlet code

Thanks for help!
Peter
1
I have an MVC C# Web Application and need to enable a second input selector when another selector has a value. I have included my Javascript & input selectors. I keep getting the error: Cannot set property 'onchange' of null. When user makes a selection and it is not the "Select a Client" option, then enable the input selector "add_Product_ID"

JavaScript ------------------------------------
    <script type="text/javascript">
        document.getElementById("add_Client_ID").onchange = function() {
            document.getElementById("add_Product_ID").setAttribute("disabled", "disabled");
            if (this.selectedIndex !== 0)
                document.getElementById("add_Product_ID").removeAttribute("disabled");
        };
    </script>

Open in new window


HTML -----------------------------------------
            <div class="row mg-t-20">
                <label class="col-sm-5 form-control-label">Client:</label>
                <div class="col-sm-6 mg-t-10 mg-sm-t-0">
                    <select name="Client_ID" id="add_Client_ID" class="form-control" required>
                        <option value="0">Select a Client</option>
                        @{
                            foreach (Client client in Model.Clients)
                            {
                                <option value="@client.Client_ID">@client.Client_Name</option>
                            }
                        }
                    </select>
                </div>
               

Open in new window

1
I have an input field that requires a user to enter time in a decimal form of hours + minutes. I need an html validation regex that will force a user to only enter the decimal 0 or 5. For example, user can enter the following valid numbers: (10.0; 10.5; 11.0; 3.5; 2.0) and so on. Invalid numbers:( 10.1; 10.2; 10.4; 3.2; 4.4;7.7). I just need to ensure user enters .0 or .5 decimal  no greater than 99.5, and great than 0.
1

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.