w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
  Home » HTML » Page 5
Overlapping containers with use of rows?
What you're looking for is called Parallax Scrolling. There are several tutorials out there, and a full implementation would be difficult to include in one answer here. Here's a good resource from David Walsh on this Basically, this is a combination of background-attachment: fixed and overlapping div elements, and some javascript to flop the selected image when it's hidden. I hope that helps.

Categories : HTML

Highcharts legend paging position
To position legend at the bottom, I added maxHeight and changed layout to horizontal (as this suits my needs best), etc: legend: { layout: 'horizontal',//change to horizontal //align: 'right',//removed alignment verticalAlign: 'bottom', maxHeight: 50,//this was the key property to make my legend paginated //y: 40,//remove position navigation: {

Categories : HTML

clearRect behaving strangely/not working
The problem is here: ctx.clearRect(0, 0, canvas.height, canvas.width); Change it to: ctx.clearRect(0, 0, canvas.width, canvas.height); Correct Syntax is: context.clearRect(x, y, width, height)

Categories : HTML

Regex pattern for matching ampersands between quotes in href attributes
I don't know what Language you will use, but in almost every language there is a function for replacing letters or substring in strings. For example in JavaScript: var str = "hello world!"; var res = str.replace("world", "stackoverflow"); >> "hello stackoverflow!"

Categories : HTML

Style sibling selector with a:visited
There are limits to what the :visited selector can style: https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector It might seem that you've run up against one.

Categories : HTML

Making sidebar and content extend to sticky footer
If you support IE9 and up, you can use calc. #wrapper { position: relative; height: calc(100% - {yourFooterHeight}px); } #wrapper > * { height: 100%; } Example body, html { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; } #wrapper { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 100px); } #wrapper > * { heig

Categories : HTML

Refresh browser without "Confirm Form Resubmission" in perl
The usual technique for preventing this is the Post/Get Redirect pattern. This doesn't stop browsers from behaving as they do, but it redirects users to a new page after a successful POST, so that if they refresh they are not repeating the POST, but repeating the GET instead, which doesn't cause a warning. Here is an example of the flow: GET "Products/Create" User types in some information POS

Categories : HTML

How to play/pause html5 video with spacebar
Here's the changes to your javascript: $(window).keypress(function(e) { var video = document.getElementById("vid"); if (e.which == 32) { if (video.paused == true) video.play(); else video.pause(); } });

Categories : HTML

Print Preview in Chrome gives changes div positions with CSS style "overflow:hidden"
It does exactly what it's saying it does. Because you have a defined height and width on #outsideDiv, your CSS is hiding everything that falls outside of that. Keep in mind that pixels do not convert at the same ratio from screen to page. A page is 72 PPI (pixel-per-inch) in general, while a printed page is 300 DPI (dot-per-inch) in general. There's even a conversion of units there (pixel to

Categories : HTML

Detect whether canvas already has a context
There isn't any public documented method to detect what context has been requested from the canvas element. The element itself is just the final bitmap and unaware of how the pixels got into it. The only way that I am aware of is to hack the getContext() call to record what context was requested (or just make a plain wrapper function you call instead of the native call): // store old call HTML

Categories : HTML

Positioning next/prev buttons along side of owl carousel in Bootstrap
If you know height of the slider you can set it as line-height for button or button's container. To hide buttons on smaller screens you can use .hidden-sm .hidden-xs classes and add .col-xs-12 .col-md-8 for slider to fit full width of screen. Try this: http://jsfiddle.net/matcygan/q70wbuwv/9/

Categories : HTML

Dynamic Options For Dropdown Menu in Shiny R With HTML UI
While this isn't the best answer, it may get you started. In Shiny, I upload .csv files, which will dynamically update the dropdown menu with the header names of the uploaded files. In server.R, I include observe({ infile <- input$datfile print(infile) if(is.null(infile)) return(NULL) d <- read.csv(infile$datapath, header = T) updateSelectInput(session, 'dropdown_1', choices = names(

Categories : HTML

How do I animate my CSS progress bar?
HTML: <section class="container"> <div class="progress"> <div class="progress-point"> <p id="progress_0" class="progressPoint displayNone" style="width: 0%;"> </p> <p id="progress_20" class="progressPoint " style="width: 20%;"> <input type="radio" class="progressStatus" name="progress_status" i

Categories : HTML

Advantages of using attributes over classes
Attributes have a couple of advantages over classes. Firstly, being able to simply put down an attribute is more readable: <nav center fullbleed> vs. <nav class="fullbleed center"> Attributes are also easier to avoid conflicts when it comes to css selectors: It's easier to make a mistake when using css selectors such as nav .center > #fullbleed . Classes do offer more options,

Categories : HTML

CSS: Placing two side by side divs on the same height
Here's how you can solve this: Fiddle for side-by-sides at the same height CSS .jumbotron { width: 100%; overflow: hidden; background-color: white; padding: 30px; font-size: 0; } .jumbotron > div { display:inline-block; vertical-align: top; font-size: 1rem; } .text { width: 20%; } Explanation So we got rid of all your floats. You potentially could have

Categories : HTML

How to change shapes while hovering over one
Here is what you are asking for changing a rectangle into a circle: you want to use your apDiv16 id.... here it is: #apDiv16 { border-radius: 0px; width: 200px; height: 200px; background-color:black; /* width and height can be anything, as long as they're equal */ } #apDiv16:hover { border-radius:50%; } Working JSFiddle: http://jsfiddle.net/aotLuscb/2/ Could also add

Categories : HTML

Creating a comment box html form with perl processing script
Your code is a bizarre mixture of old- and new-style Perl. You're using the cgi-lib compatibility layer in CGI.pm and calling its ReadParse() function using the (unnecessary since 1994) leading ampersand. On the other hand, you're using three-arg open() and lexical filehandles. I'd be interested to hear how you developed that style. Your problem comes from your (mis-)handling of the %in hash. You

Categories : HTML

Space after html5's video tag
Just add display: block to the video element. video elements default to display: inline, causing the whitespace. Updated fiddle: http://jsfiddle.net/g9t71mg6/1/

Categories : HTML

Overflow-X Hidden on html tag, iOS Safari Lags
EDIT: sorry I didnt read your question correctly but try changing the block's position to this instead: position:fixed; it does what you want but that block will stay in that spot when you scroll up and down. try that and see if it is what you wanted.

Categories : HTML

CSS: Detecting IE in different standard modes?
In HTML: <!--[if IE]> Place content here to target all Internet Explorer users. <![endif]--> In CSS

Categories : HTML

CSS clip not working with absolute positioning
It was because you had not given the topoffset value. Demo img { position: absolute; clip: rect(20px,60px,200px,0px); } Values: clip: rect(top offset, visible width, visible height, left offset) The first number indicates the top offset - the top edge of the clipping window. The last number indicates the left offset - the left edge of the clipping window. The second number is t

Categories : HTML

Angular input type text onfocus date picker > value
This might be overkill but ui-bootstrap has a datetime picker that is easy to use - http://angular-ui.github.io/bootstrap/#/datepicker

Categories : HTML

AWStats Unknown File Type
It seems you cannot set a Default File Type, but you can change the name from "Unknown" to something else. Modified the AWStats core code to show "Drupal Node" instead of "Unknown" for Drupal File Types. Line 10563 of awstats.pl Original code: <td class="aws" colspan="2"><span style="color: #$color_other">$Message[1]</span></td>"; New code: <td class="aws" colspan

Categories : HTML

Two divs next to eachother - Expand the left to full width
You could use display:table-cell and display:table to get what you're after: .wrap { width:100%; display:table; } .left { display:table-cell; border: 2px solid; } .right { display:table-cell; width:100px; border: 2px solid red; } <div class="wrap"> <div class="left">Hi hi</div> <div class="right">right</div> </div>

Categories : HTML

File Input in IE 11 makes sibling DIV disappear on click or right click
I was able to reproduce the issue with your fiddle, and I proceeded to reduce it even further. The issue here is with the top and bottom borders of the input control itself. These cause an invalidation error immediately upon giving focus to the element, thus pushing the sibling DIV up along the y-axis. You can confirm this by using the element highlighter in the F12 Developer tools. In the below

Categories : HTML

Using web page address to create src for image on page
Here is my solution for your example (SW1A2AA.htm). Empty src attribute is not valid, so we use //:00 - you can read more about this solution here. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Page Title</title> </head> <body> <img id="map" src="//:0"> <script> // grab the URL. I'm working locally so in my case it is /C

Categories : HTML

Forcing
All you need in your case is some positioning. Position the .nav relatively, then you can absolutely position the .nav-childs accordingly. I inserted a minimal example for you - I'm sure you can figure out the hide/show stuff on hover by yourself. .nav.menu{ position:relative; /* positioning the base element*/ } li{ float:left; /* aligning the list node */ /* the rest is presentati

Categories : HTML

How to get html tag text using XMLSlurper in Groovy
.text() evaluate children and appends. Hence it will always include merged line. Could you consinder localText()? Not exactly what you expect, it returns an array of strings. import org.testng.Assert ul='''<ul> <li>Text to modify<span>more text</span> </li> </ul> ''' def ulDOM = new XmlSlurper().parseText(ul); def elements = ul

Categories : HTML

Responsive positioning elements
You have the piljer positioned absolutely, so no matter what you do they will always be the exact distance from the left (900px) of the container they are in or in fact the closest container not statically positioned. In order for them to respond, you should either use percentage positioning or if they are supposed to hug the right hand side, position them from the right instead, depending on wha

Categories : HTML

Textarea inside an image
You could place the image as background of a wrapper div and simply position the textarea inside that wrapper with margins : DEMO .wrap{ background: url('http://i.imgur.com/S66oEHW.png') no-repeat; background-size: contain; height:500px; min-width:300px; } .wrap textarea{ margin:75px 0 0 53px; width:183px; height:350px; } <div class="wrap"> <textarea>

Categories : HTML

trying to get a 3rd div to "float over" 2 divs which are "float left" and "float right"
You really should separate your CSS and HTML, but this is what I did... Add width:inherit to your div3 and position:absolute: <div id="container" style="background-color:lightgrey;width: 480px;margin-left: auto;margin-right: auto; height:130px"> <div id="div1" style="float:left">Div1</div> <div id="div2" style="float:right">Div1</div> <div id="div3" style="

Categories : HTML

HTML disable submit button if drop down option not selected
You can use jQuery to: On page load test value and enable/disable the submit button $(document).ready(function () { var selectedVal = $('#myselect').val(); if(selectedVal == 4) { //disable submit button } else { //enable submit button } });' Track the changed of the select as $('#myselect').change(function() { //Check the change and use above logic to disable/enable submit b

Categories : HTML

Arrow right hidden at the back of main div
I didn't completely get your question but when the min-width is removed the li with class arrow seem to appear http://jsfiddle.net/u2Lbx4kc/1/

Categories : HTML

Using xidel to extract a key-value pair
Using XPath or XQuery 3.0: //table/tbody/(tr[1]/td[2] || ' ' || tr[2]/td[2]). I think you need to request that version explicitly, at least I needed to do so on http://videlibri.sourceforge.net/cgi-bin/xidelcgi. And I parsed as HTML where the parser adds a tbody element and the path needs that too.

Categories : HTML

jQuery Mobile horizontal button group is displayed incorrectly
It is because you have a FORM element within the controlgroup. The best solution would be to remove the FORM element and just handle the logout button click without it. If you really want to keep the FORM, you can override some CSS to make it look right: [data-role="controlgroup"] form { display: inline; float: left; } [data-role="controlgroup"] form .ui-last-child { border-top-right

Categories : HTML

How to use overflow-x hidden on container and prevent fixed child div overlapping scrollbars?
How about putting all your content in a container (Besides header per comments): <div id="header"> <img src="https://dl.dropboxusercontent.com/s/wypn5e7n5bgeoic/landscape.png?dl=0" alt="Image Not Available"></img> </div> <div id="container"> <div id="wrapper"> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur

Categories : HTML

Struggling with XSLT processing of nested elements
How about this way: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/> <xsl:template match="/*"> <root> <xsl:apply-templates select="proceduralStep"/> </root> </xsl:template> <xsl:template match="proceduralStep"> <div id="{@i

Categories : HTML

Table columns in range 3...4 established by element th have no cells beginning in them
To solve this error I used colspan="1" instead of colspan="3" and changed the table head colspan="5" to colspan="3". This eliminated the W3C HTML5 Validator errors. I have also included the css I used to style for my own needs. See below for the code: <table> <thead> <tr> <th colspan="3"><a id="button01" href="#" title="Learn More">Learn More</a>

Categories : HTML

Problems getting SCORM 2004 to do what it's supposed to
You're calling Terminate() immediately after SetValue(). You must invoke Commit() after SetValue() to persist (save) the data in the database. Otherwise you're exiting the SCO without having saved anything. Also, have you checked to ensure the value of scoPage[i] is accurate?

Categories : HTML




© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.