This question already has answers here:
Difference between "> or " /> in HTML
(8 answers)
Closed 8 years ago.
let's look at bootstrap resources:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
sometimes I see <input type="file"> and many more other tags.
What's the reason of not closing HTML tags with /> ?
They are called self-closing tag or singleton tag. Here is the list of tags you can use it as self-closing.
<area />
<base />
<br />
<col />
<command />
<embed />
<hr />
<img />
<input />
<keygen />
<link />
<meta />
<param />
<source />
<track />
<wbr />
Related
When my page loads, after about 5 seconds, the window scrolls to an html video which is a significant ways down the page (which is on autoplay). This has been an issue following the Safari 10 release. Anyone know why this may be the case?
I'm having the same issue - if I remove the autoplay attribute it doesn't happen.
Initiating autoplay via JS (ou even starting the video from the console) makes the page jump as well.
it's the "controls" attribute on the HTML, i've found that the new update on Safari is giving few issues, have a look at this: https://stackoverflow.com/questions/42692679/video-tag-on-safari-10-goes-up-after-few-seconds
i did reproduce your issue (mixing it with mine on that question) on Jsfiddle:
https://jsfiddle.net/antonino_R/d9tf0va3/15/
(scroll down and run again to reproduce the issue, you may need to run and scroll quickly down again)
and removing "controls" does fix the issue https://jsfiddle.net/antonino_R/d9tf0va3/16/
<div class="wrapper">
<div class="wrapper-inner">
<div class="wrapper-video">
<video autoplay loop muted >
<source src="http://techslides.com/demos/sample-videos/small.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
</video>
</div>
<div class="site-centered clearfix">
<header class="entry-header">
<h1 class="entry-title">this is a title</h1>
<h2 class="entry-subtitle">this is some text</h2>
</header>
</div>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h4>this is to scroll down the page and test that it goes up after few seconds</h4>
obviously if the controls are needed this fix isn't good enough
At first, you have to add this piece of code in footer:
<script>
var myVideo = document.getElementsByTagName("video")[0];
myVideo.controls = "";
</script>
This worked for me. Before i had problem that after 5 sec when website loaded, just jumped to section with video background. I had there overlay image and without value min-height: ___px; overlay was shorter than video height.
I can`t get this rounded cornes work for image buttons in IE.
It's working in other browsers, like Mozilla, Chrome and Opera, but not IE11.
I have tried to get the rounded corners, with both CSS and ajaxcontroltoolkit:
<style>
body {
background-color: green;
}
.RoundedElement {
border-radius: 15px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
CSS<br />
<asp:ImageButton ID="imgbtnCSS" CssClass="RoundedElement" runat="server" ImageUrl="~/Bilder/1034.jpg" />
<br />
AjaxControlToolKit:<br />
<asp:ImageButton ID="imgbtnAjax" runat="server" ImageUrl="~/Bilder/1034.jpg" />
<ajaxToolkit:RoundedCornersExtender ID="imgbtnAjax_RoundedCornersExtender" runat="server" BehaviorID="imgbtnAjax_RoundedCornersExtender" Radius="15" TargetControlID="imgbtnAjax" />
<br />
CSS<br />
<asp:Button ID="btnCSS" CssClass="RoundedElement" runat="server" Text="Button" />
<br />
AjaxControlToolKit:<br />
<asp:Button ID="btnAjax" CssClass="RoundedElement" runat="server" Text="Button" />
<ajaxToolkit:RoundedCornersExtender ID="btnAjax_RoundedCornersExtender" runat="server" BehaviorID="btnAjax_RoundedCornersExtender" Radius="15" TargetControlID="btnAjax" />
</div>
</form>
The regular buttons work in IE11. Both CSS and Ajax.
I'd hazard a guess that you are running IE11 in one of the compatibility modes for it to break something as simple as a border-radius.
Hi I'm trying to align vertically two elements
The code is
<h:panelGrid columns="2">
<a4j:outputPanel layout="block">
<h:form>
<h:inputText id="text1" label="text1" value="#{opBean1.text}">
<f:validateLength maximum="10" />
<a4j:ajax event="keyup" execute="#this" render="out1" onerror="return false;" />
</h:inputText><br/>
<h:outputText id="out1" rendered="#{not empty opBean1.text}" value="Approved Text: #{opBean1.text}" />
</h:form>
</a4j:outputPanel>
<a4j:outputPanel layout="block">
<h:form>
<h:inputText id="text2" label="text2" value="#{opBean1.text2}">
<f:validateLength maximum="10" />
<a4j:ajax event="keyup" execute="#this" render="out2" onerror="return false;" />
</h:inputText><br/>
<h:outputText id="out2" rendered="#{not empty opBean1.text2}" value="Approved Text: #{opBean1.text2}" />
</h:form>
</a4j:outputPanel>
</h:panelGrid>
As you can see,
the <h:panelGrid> contains two columns.
Each column has a <a4j:outputPanel> element.
The problem is that the vertical size of the <a4j:outputPanel> can change.
(The <h:outputText id="xxx" rendered="#{not empty opBean1.xxx}" value="Approved Text: #{opBean1.xxx}" /> element is only rendered if the xxx value is not empty in the managed bean opBean1)
So if I enter some text in the first a4j panel, it will contain two lines vertically, whereas the other a4j panel will contain only one.
Therefore, the second panel's inputText field will not be aligne anymore with the first panel's text field.
I know this might be hard to understand without any graphical representation, so I'll show you what I mean :
Before entering text:
inputText1 inputText2
After entering text:
inputText1
inputText2
outputText1
I would like it to be:
inputText1 inputText2
outputText1
EDIT (sorry for the identation ... I don´t know how to make it better)
<!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"><head>
<title>Mission Page</title><link type="text/css" rel="stylesheet" href="/FlightFAQ/rfRes/skinning.ecss.jsf?db=eAHjW!XqPQAE!QKS" /><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/jsf.js.jsf?ln=javax.faces&stage=Development"></script><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/jquery.js.jsf"></script><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/richfaces.js.jsf"></script><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/richfaces-base-component.js.jsf"></script><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/richfaces-event.js.jsf"></script><script type="text/javascript" src="/FlightFAQ/javax.faces.resource/message.js.jsf?ln=org.richfaces"></script><link type="text/css" rel="stylesheet" href="/FlightFAQ/rfRes/msg.ecss.jsf?db=eAHjW!XqPQAE!QKS&ln=org.richfaces" /></head><body><table>
<tbody>
<tr>
<td><div id="j_idt6">
<form id="j_idt7" name="j_idt7" method="post" action="/FlightFAQ/debug.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt7" value="j_idt7" />
<span style="font-weight: bold;">Name: </span><input id="j_idt7:clientName" type="text" name="j_idt7:clientName" onblur="av_aea6d620643bb708da4bf66b58ae27d6(event,"j_idt7:clientName",this)" />
<br /><span class="rf-msg " id="j_idt7:j_idt10"></span><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-6739208697542802203:-2950524051097537124" autocomplete="off" />
</form></div></td>
<td><div id="j_idt11">
<form id="j_idt12" name="j_idt12" method="post" action="/FlightFAQ/debug.jsf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt12" value="j_idt12" />
<span style="font-weight: bold;">Contact: </span><input id="j_idt12:contact" type="text" name="j_idt12:contact" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-6739208697542802203:-2950524051097537124" autocomplete="off" />
</form></div></td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="/FlightFAQ/javax.faces.resource/richfaces-csv.js.jsf?ln=org.richfaces"></script><script type="text/javascript">
//<![CDATA[
window.av_aea6d620643bb708da4bf66b58ae27d6=function(event,id,e,da){var p={da:da,v:[{f:RichFaces.csv.validateRequired,p:{} ,m:{"detail":"name cannot be null","severity":0,"summary":"name cannot be null"} }]};
RichFaces.csv.validate(event,id,e,p);
}
$(document).ready(function() {
new RichFaces.ui.Message("j_idt7:j_idt10",{"forComponentId":"j_idt7:clientName","showSummary":false,"showDetail":true} )
});
//]]>
</script></body>
</html>
In design page,i am loading HtmlEditorExtender in ajax popup. There i want to load an image. but the image is not loading completely.
i guess: OnImageUploadComplete is not firing.
what could be the problem? and please suggest me the solution??
<ajax:HtmlEditorExtender ID="htmEdtior" DisplaySourceTab="true" OnImageUploadComplete="htmEdtior_OnUploadComplete"
TargetControlID="txtWelcomenotes" runat="server">
<Toolbar>
<ajax:Undo />
<ajax:Redo />
<ajax:Bold />
<ajax:Italic />
<ajax:Underline />
<ajax:StrikeThrough />
<ajax:Subscript />
<ajax:Superscript />
<ajax:JustifyLeft />
<ajax:JustifyCenter />
<ajax:JustifyRight />
<ajax:JustifyFull />
<ajax:InsertOrderedList />
<ajax:InsertUnorderedList />
<ajax:CreateLink />
<ajax:UnLink />
<ajax:RemoveFormat />
<ajax:SelectAll />
<ajax:UnSelect />
<ajax:Delete />
<ajax:Cut />
<ajax:Copy />
<ajax:Paste />
<ajax:BackgroundColorSelector />
<ajax:ForeColorSelector />
<ajax:FontNameSelector />
<ajax:FontSizeSelector />
<ajax:Indent />
<ajax:Outdent />
<ajax:InsertHorizontalRule />
<ajax:HorizontalSeparator />
<ajax:InsertImage />
</Toolbar>
</ajax:HtmlEditorExtender>
Have changed every query string which comes from another page to session..... then it worked..... Problemo solved...
I was writing a html code and I wanted to close all the code it into a single div. When I placed it into a single div, it gave me an error that my markup is invalid (showing that the closing div tag is invalid.) Now I am amazed how can it be invalid. Please help me out. Thanks
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<div>
<iframe width="350" height="350" src="http://www.youtube.com/embed/P3weDRMemD8" frameborder="0" allowfullscreen></iframe>
<form style="border:3px;text align.center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit= "window.open('http://feedburner.google.com/fb/a/mailverify?uri=financeyoga/UPqT', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" style="width:140px;padding:10px;" name="email"/>
<input type="hidden" value="financeyoga/UPqT" name="uri"/>
<input type="hidden" name="loc" value="en_US"/><br>
<input style="padding:10px;" type="submit" value="Submit Email Address" />
<img style="position:relative;top:325px; left:10px;" src="http://financeyoga.com/wp-content/uploads/2012/05/follow.png" width="143" height="64" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="5,18,33,44" href="www.twitter.com" target="_blank" alt="twitter">
<area shape="rect" coords="57,16,87,46" href="www.facebook.com" target="_blank" alt="facebook">
<area shape="rect" coords="107,16,137,46" href="plus.google.com" target="_blank" alt="google plus">
</map>
</div>
</body>
</html>
You haven't closed your form tag.
It seems like it is missing </form> tag.