Posts

Showing posts with the label Html

Auto-click Button Element On Page Load Using JQuery

Answer : You would simply use jQuery like so... <script> jQuery(function(){ jQuery('#modal').click(); }); </script> Use the click function to auto-click the #modal button JavaScript Pure: <script type="text/javascript"> document.getElementById("modal").click(); </script> JQuery: <script type="text/javascript"> $(document).ready(function(){ $("#modal").trigger('click'); }); </script> or <script type="text/javascript"> $(document).ready(function(){ $("#modal").click(); }); </script> Use the following code $("#modal").trigger('click');
Post a Comment
Read more

Can A Figcaption Be Restricted To The Width Of A Responsively Sized Image?

Answer : Old question, but I came across the same issue and was able to come up with a fairly neat solution, inspired by this. HTML: <figure> <img src="http://www.placehold.it/300x150" alt="" /> <figcaption>Make me as long as you like</figcaption> </figure>​ CSS: figure { background-color: #fff; padding: 5px; font-size: .875em; display: table; } figure img { display: block; width: 100%; } figcaption { display: table-caption; caption-side: bottom; background: #fff; padding: 0 5px 5px; }​ This ensures the figcaption does not exceed the width of the figure , whilst allowing you to keep max-width on the image. Works in all good browsers and IE8+. There's a Firefox bug that prevents max-width working within elements that are set to display: table . So, instead of using max-width on the image, setting its width to 100% means this works cross-browser. The figure's width will...
Post a Comment
Read more

Code Folding In Bookdown

Answer : Global Hide/Show button for the entire page To use @Yihui's hint for a button that fold all code in the html output, you need to paste the following code in an external file (I named it header.html here): Edit: I modified function toggle_R so that the button shows Hide Global or Show Global when clicking on it. <script type="text/javascript"> // toggle visibility of R source blocks in R Markdown output function toggle_R() { var x = document.getElementsByClassName('r'); if (x.length == 0) return; function toggle_vis(o) { var d = o.style.display; o.style.display = (d == 'block' || d == '') ? 'none':'block'; } for (i = 0; i < x.length; i++) { var y = x[i]; if (y.tagName.toLowerCase() === 'pre') toggle_vis(y); } var elem = document.getElementById("myButton1"); if (elem.value === "Hide Global") elem.value = "Show Global"; else ...
Post a Comment
Read more

Are Class Names In CSS Selectors Case Sensitive?

Answer : CSS selectors are generally case-insensitive; this includes class and ID selectors. But HTML class names are case-sensitive (see the attribute definition), and that's causing a mismatch in your second example. This has not changed in HTML5. 1 This is because the case-sensitivity of selectors is dependent on what the document language says: All Selectors syntax is case-insensitive within the ASCII range (i.e. [a-z] and [A-Z] are equivalent), except for parts that are not under the control of Selectors. The case sensitivity of document language element names, attribute names, and attribute values in selectors depends on the document language. So, given an HTML element with a Selfcatering class but without a SelfCatering class, the selectors .Selfcatering and [class~="Selfcatering"] will match it, while the selectors .SelfCatering and [class~="SelfCatering"] would not. 2 If the document type defined class names as case-insensitive,...
Post a Comment
Read more

Can I Put Anything Inside DL/DT/DDs?

Answer : Updated answer based on comments: This was originally answered in 2011 for HTML 4, but the answer is different for HTML5: dt Flow content, but with no header, footer, sectioning content, or heading content descendants. dd Flow content. dt element reference on W3C dd element reference on W3C Original answer: DT elements should contain inline content. DD elements should contain block-level content. Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content. Source: W3C This question is also an interesting read: Why use definition lists (DL,DD,DT) tags for HTML forms instead of tables? Inside a DL you can only put DT and DD tags. A DT tag is an inline tag, so you should not put block elements in it. A DD tag can contain basically anyt...
Post a Comment
Read more

Bootstrap Dropdown Not Working

Answer : I had the same problem. After a couple of hours of trouble shooting found that, I had <script type="text/javascript" src="Scripts/bootstrap.min.js"></script> <script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script> instead of, <script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="Scripts/bootstrap.min.js"></script> Hope this helps someone I had the same problem when I included the bootstrap.min.js twice. Removed one of them and it began working. FYI: If you have bootstrap.js, you should not add bootstrap-dropdown.js. I'm unsure of the result with bootstrap.min.js.
Post a Comment
Read more

100% Width Background Image With An 'auto' Height

Answer : Tim S. was much closer to a "correct" answer then the currently accepted one. If you want to have a 100% width, variable height background image done with CSS, instead of using cover (which will allow the image to extend out from the sides) or contain (which does not allow the image to extend out at all), just set the CSS like so: body { background-image: url(img.jpg); background-position: center top; background-size: 100% auto; } This will set your background image to 100% width and allow the height to overflow. Now you can use media queries to swap out that image instead of relying on JavaScript. EDIT: I just realized (3 months later) that you probably don't want the image to overflow; you seem to want the container element to resize based on it's background-image (to preserve it's aspect ratio), which is not possible with CSS as far as I know. Hopefully soon you'll be able to use the new srcset attribute on the img element...
Post a Comment
Read more

Adding Data Attribute To DOM

Answer : Use the .data() method: $('div').data('info', '222'); Note that this doesn't create an actual data-info attribute. If you need to create the attribute, use .attr() : $('div').attr('data-info', '222'); jQuery's .data() does a couple things but it doesn't add the data to the DOM as an attribute. When using it to grab a data attribute, the first thing it does is create a jQuery data object and sets the object's value to the data attribute. After that, it's essentially decoupled from the data attribute. Example: <div data-foo="bar"></div> If you grabbed the value of the attribute using .data('foo') , it would return "bar" as you would expect. If you then change the attribute using .attr('data-foo', 'blah') and then later use .data('foo') to grab the value, it would return "bar" even though the DOM says data-foo="blah...
Post a Comment
Read more

Bootstrap Toast Does Not Show Up

Answer : You need to put the valid option. i:e show, hide or a callback function . See - https://getbootstrap.com/docs/4.2/components/toasts/. $('.toast').toast('show'); <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img height="200px" width="200px" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" class="rounded mr-2" alt="..."> <strong class="mr-auto">Boots...
Post a Comment
Read more

Audio Auto Play Next Song When Previous Is Finished

Answer : here is the trick to trigger next song: music.addEventListener('ended',function(){ //play next song }); How to play another song on same audio tag: music.pause(); music.src = "new url"; music.load(); music.play(); Now here is a cool example of a playlist in html5, you can load each song at the time, case some clients (mobile) will not be happy when you consume the traffic, in next example all audios are loaded at same time to have a smooth transition from song to song, loading the songs: //playing flag var musicTracker = 'noMusic'; //playlist audios var audios = []; $(".song").each(function(){ var load = new Audio($(this).attr("url")); load.load(); load.addEventListener('ended',function(){ forward(); }); audios.push(load); }); //active track var activeTrack = 0; Highlighting witch song is playing, with a bit of jquery, yeah, case yeah I'm lazy, lazy: var ...
Post a Comment
Read more

Check If A File Exists Locally Using JavaScript Only

Answer : Your question is ambiguous, so there are multiple possible answers depending on what you're really trying to achieve. If you're developping as I'm guessing a desktop application using Titanium, then you can use the FileSystem module's getFile to get the file object, then check if it exists using the exists method. Here's an example taken from the Appcelerator website: var homeDir = Titanium.Filesystem.getUserDirectory(); var mySampleFile = Titanium.Filesystem.getFile(homeDir, 'sample.txt'); if (mySampleFile.exists()) { alert('A file called sample.txt already exists in your home directory.'); ... } Check the getFile method reference documentation And the exists method reference documentation For those who thought that he was asking about an usual Web development situation, then thse are the two answers I'd have given: 1) you want to check if a server-side file exists. In this case you can use an ajax request try...
Post a Comment
Read more

Bootstrap 3 Carousel Not Working

Answer : There are just two minor things here. The first is in the following carousel indicator list items: <li data-target="carousel" data-slide-to="0"></li> You need to pass the data-target attribute a selector which means the ID must be prefixed with # . So change them to the following: <li data-target=" # carousel" data-slide-to="0"></li> Secondly, you need to give the carousel a starting point so both the carousel indicator items and the carousel inner items must have one active class. Like this: <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active" ></li> <!-- Other Items --> </ol> <div class="carousel-inner"> <div class="item active "> <img src="https://picsum.photos/1500/600?image=1" alt="Slide 1" /> </d...
Post a Comment
Read more

Bootstrap 4 Sticky-top Margin-top

Answer : Try: .sticky-top { top: 0.5em; }
Post a Comment
Read more

Bootstrap 4: Responsive Sidebar Menu To Top Navbar

Image
Answer : It could be done in Bootstrap 4 using the responsive grid columns. One column for the sidebar and one for the main content. Bootstrap 4 Sidebar switch to Top Navbar on mobile <div class="container-fluid h-100"> <div class="row h-100"> <aside class="col-12 col-md-2 p-0 bg-dark"> <nav class="navbar navbar-expand navbar-dark bg-dark flex-md-column flex-row align-items-start"> <div class="collapse navbar-collapse"> <ul class="flex-md-column flex-row navbar-nav w-100 justify-content-between"> <li class="nav-item"> <a class="nav-link pl-0" href="#">Link</a> </li> .. </ul> </div> </nav> </aside...
Post a Comment
Read more

Append Before Last Child

Answer : You could use .before() to add a sibling before the element: $("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>'); .insertBefore() does the same thing with a different syntax, namely that you select the element to be added, and pass the element you want to add it before. $("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>'); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="wrapper"> <div class="content"> <div class="subcontent"> First </div> </div> <div class="content"> <div class="subcontent"> Second </div> ...
Post a Comment
Read more

Bootstrap Pull-right Not Working As Expected

Answer : For those who are using bootstrap4: classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right. More information from Bootstrap4 migration notes: Here Your form-group is aligned as far to the right as possible – but the content within it is not. You have only 4+4+2 wide columns in there, so you are “two columns short”, in the 12-column grid used by bootstrap. You might want to simply offset the first one of those by 2, by adding col-xs-offset-2 class – then the alignment should be closer to what you want to achieve. Bootstrap column layout will basically split the row into 12 columns. Here you are only defining 10 out of the twelve columns, which is why you have space left on the right. Try <div class="form-group pull-right"> <div class="col-xs-4 col-xs-offset-2"> <input type="text" class="form-contro...
Post a Comment
Read more

Anchor Jumping By Using Javascript

Answer : You can get the coordinate of the target element and set the scroll position to it. But this is so complicated. Here is a lazier way to do that: function jump(h){ var url = location.href; //Save down the URL without hash. location.href = "#"+h; //Go to the target element. history.replaceState(null,null,url); //Don't like hashes. Changing it back. } This uses replaceState to manipulate the url. If you also want support for IE, then you will have to do it the complicated way: function jump(h){ var top = document.getElementById(h).offsetTop; //Getting Y of target element window.scrollTo(0, top); //Go there directly or some transition }​ Demo: http://jsfiddle.net/DerekL/rEpPA/ Another one w/ transition: http://jsfiddle.net/DerekL/x3edvp4t/ You can also use .scrollIntoView : document.getElementById(h).scrollIntoView(); //Even IE6 supports this (Well I lied. It's not ...
Post a Comment
Read more

Can I Embed HTML Into An HTML5 SVG Fragment?

Answer : Yes, with the <foreignObject> element, see this question for some examples. Alternatively, if you have an html5 document you can also use CSS positioning and z-index to make parts of html visible where you want laid out on top of the svg. If you do it like that you don't need to nest the html inside the svg fragment. This will give you the most consistent behaviour across browsers in my experience. Foreign Objects are not supported on Internet explorer. Please check ForeignObject Copied from bl.ocks.org (thank you, Janu Verma) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML inside SVG</title> <style type="text/css"></style></head> <body> <div>I'm a div inside the HTML</div> <svg width="500" height="300" style="border:1px red solid" xmlns="http://www.w3.org/2000/svg"> ...
Post a Comment
Read more

Browsers' Default CSS For HTML Elements

Answer : It's different for each browser, so: Firefox (Gecko): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css. Or, browse to resource://gre-resources/ and look at html.css . Chrome/Safari (WebKit): http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css Chrome (Blink): https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css Internet Explorer (Trident) , older versions: http://web.archive.org/web/20170122223926/http://www.iecss.com/ You can also look at the HTML5 Boilerplate stylesheet, which "normalizes the display of a lot of stuff without being a reset in the traditional sense". It also fixes quite a few bugs/inconsistencies. It's also worth looking at: https://github.com/necolas/normalize.css/blob/master/normalize.css A GitHub repository of all W3C HTML spec and vendor default CSS stylesheets can be found here 1. Default Styles for Firefox 2. Default Styles for Internet Explorer ...
Post a Comment
Read more

Can I Use An HTML Input Type "date" To Collect Only A Year?

Answer : No you can not but you may want to use input type number as a workaround. Look at the following example: <input type="number" min="1900" max="2099" step="1" value="2016" /> No, you can't, it doesn't support only year, so to do that you need a script, like jQuery or the webshim link you have, which shows year only. If jQuery would be an option, here is one, borrowed from Sibu: Javascript $(function() { $( "#datepicker" ).datepicker({dateFormat: 'yy'}); });​ CSS .ui-datepicker-calendar { display: none; } Src: https://stackoverflow.com/a/13528855/2827823 Src fiddle: http://jsfiddle.net/vW8zc/ Here is an updated fiddle, without the month and prev/next buttons If bootstrap is an option, check this link, they have a layout how you want. There is input type month in HTML5 which allows to select month and year. Month selector works with autocomplete. Check the examp...
Post a Comment
Read more