What is better:
<h1>Navigation</h1>
<nav>
<ul>
<li>...</li>
</ul>
</nav>
Or:
<nav>
<h1>Navigation</h1>
<ul>
<li>...</li>
</ul>
</nav>
Is there any significant difference?
What is better:
<h1>Navigation</h1>
<nav>
<ul>
<li>...</li>
</ul>
</nav>
Or:
<nav>
<h1>Navigation</h1>
<ul>
<li>...</li>
</ul>
</nav>
Is there any significant difference?
nav
is a sectioning element and as such, if you have a heading that describes the navigation it should be inside:
<nav>
<h1>Navigation</h1>
<ul>
<li>...</li>
</ul>
</nav>
Otherwise, the heading will be incorrectly associated with a different section altogether, rather than the nav
element.
The W3C HTML5 spec provides a near-identical example:
Code Example:
In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.
<body itemscope itemtype="http://schema.org/Blog"> <header> <h1>Wake up sheeple!</h1> <p><a href="news.html">News</a> - <a href="blog.html">Blog</a> - <a href="forums.html">Forums</a></p> <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p> <nav> <h1>Navigation</h1> <ul> <li><a href="articles.html">Index of all articles</a></li> <li><a href="today.html">Things sheeple need to wake up for today</a></li> <li><a href="successes.html">Sheeple we have managed to wake</a></li> </ul> </nav> </header> ... </body>
Posting some more code would be nice. This should work. Use some jQuery or AngularJs or any other framework to make the .overlay initially hidden, then to make it visible when needed. If you need help, comment. If it helps, +1. EDIT $(function() { $('[data-toggle="popover"]').popover({ placement: 'bottom' }); $("#buttonright").click(function() {...
I've just updated your jsfiddle: http://jsfiddle.net/0sq2rfcx/8/ This should work on all browsers included IE7 $('#b1').click(function () { $('#result').show(); $("#result").animate({ scrollTop:$('#a1').parent().scrollTop() + $('#a1').offset().top - $('#a1').parent().offset().top}, "slow"); }); $('#b2').click(function () { $('#result').show(); $("#result").animate({ scrollTop:$('#a2').parent().scrollTop() + $('#a2').offset().top - $('#a2').parent().offset().top}, "slow"); }); $('#b3').click(function () { $('#result').show();...
html5,css3,twitter-bootstrap-3
Your tabs breakdown after the width is within 767px, so you can use the below CSS hack. @media (max-width: 767px) { .nav-tabs.nav-justified > li { float: left; width: 50%; } } Bootply...
I modified your code based on your requirement.please check it once. rowCount = $('#table3 tr:last').index() + 1; table4rowCount = $('#table3 tr:last').index() + 1; row = rowCount + 1; var pivot_1 = 1001; var loop = 0 $("#table4 tr:eq(0)").find("th:last").after("<th>Total_col</th>"); for(i=1;i<row; i++) { var d = $('#table3 tr:eq(' + i + ')').find("td:eq(1)").text();...
Note: You can just make a single file out of it to achieve your wanted output Use mysql_real_escape_string() to sanitize the passed-on value to prevent SQL injections You should use mysqli_* instead of the deprecated mysql_* API Form them in a single file like this (display.php): <html> <form method="post" name="display"...
Try this solution: var notrem = []; $('#Table1 tr').each(function(){ var currentRowHTML = $(this).find("td:first").html(); $('#Table2 tr').each(function(i){ var c= $(this).find("td:first").html(); if(c == currentRowHTML ){ notrem.push(i); } }); }); $('#Table2 tr').each(function(i){ if(notrem.indexOf(i) < 0){ $(this).remove(); } }); Explanation: First gather all indexes of Table2 that are equal and are not to be removed....
If the height or width of the canvas is 0, the string "data:," is returned. This is most likely the cause for some images to fail to receive a proper dataUrl. Check your img elements and/or scripts to obtain and set the width and height of the canvas. The...
Something like this? But adding it into the addUser function as Super Hirnet says, will be more performant. var divs = document.querySelector('#utilizadores').childNodes, users = []; Array.slice.call(divs).forEach(function (node, index) { users.push({ "name" : divs[index].getElementById('nomeUtilizador' + (index + 1)).value }); }); ...
javascript,jquery,html,seo,cross-platform
Well the problem is that at first, the section you're about to insert data in is blank, which means that sharing this page on Facebook for example will result in just a blank box. So, what you want to achieve is a way to run that javascript before crawling the...
Put your header inside the body. And don't apply styles to the body but use a container. + You should have one single header in your page. <body> <header> <nav><ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">Solutions & Services</a> <ul> <li><a href="#">Internet</a></li> <li><a href="#">Networking</a></li> <li><a href="#">Website</a></li> <li><a href="#">Home...
Okay so I have got a probable solution, the catch is, you won't be able to use img tags. You can use images as background-image and animate background on :hover NOTE: Fade in effect can be removed by playing with animation. HTML <div class="image-box"></div> CSS .image-box { height: 200px; width:...
You could use ng-show, it will show the paragraph if employee.firstname is null. <tr ng-repeat="employee in employees"> <td>{{employee.firstname }}<p ng-show="!employee.firstname" style="color:red">No name</p></td> <td>{{employee.job}}</td> </tr> ...
Use the immediate sibling selector (+) .item:hover + .item, .item:hover + .item + .item { background-color: green; } Example: http://codepen.io/anon/pen/jPGoYw...
javascript,html,event-handling
Call the validate function on change of the checkbox state. <input type="checkbox" name="LetterNeed" id="LetterNeed" onchange="return validate()">Not important</span> // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ OR document.getElementById('LetterNeed').addEventListener('change', validate); DEMO...
table{border-collapse:collapse;width:100%} table tr td{padding:5px;border:1px solid #000; background:#FFF } table tr:hover td{padding:5px;border:1px solid #000; background:transparent } table{ background:...
jquery,html,css,drop-down-menu
I have created a working example for you. You can find the jsfiddle in here This piece of code uses JQuery. (Remember, for these type of tasks, JQuery is your friend =] ). HTML <select id="dropDownMenu"> <option value="option1" selected="selected">yes</option> <option value="option2">no</option> </select> <br> <img id="picture" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/House_Sparrow_mar08.jpg/220px-House_Sparrow_mar08.jpg"> Javascript function changeStyle(){...
Here is an example : http://jsfiddle.net/xhhLja7m/ $(".choice-option").click(function() { $(this).find('input[type=radio]').prop("checked", "true"); }) ...
Use CSS instead of Javascript. Anyway, you're adding a class to all buttons. Use following code: .submitButton { margin: 0 10px; } ...
You need some css for that #printOnly { display : none; } @media print { #printOnly { display : block; } } ...
php,html,select,drop-down-menu
It is because you aren't ending the value attribute, so your selected option becomes <option value="optionvalueselected" -- 'optionvalue' being the value of your selected option, and 'selected' being the attribute you want to set, but won't be set because you never ended value The following should work: <select name="course_id" id="course_id">...
javascript,jquery,css,html5,twitter-bootstrap
Updated. Yes - the first pure CSS solution was not satisfactory. If you dare to add some javascript, you can do this : $('.accordion-group').on('show', function() { $(this).find('.accordion-toggle').removeClass('arrow-down').addClass('arrow-up'); }); $('.accordion-group').on('hide', function() { $(this).find('.accordion-toggle').removeClass('arrow-up').addClass('arrow-down'); }); It is using the bootstrap collapse hide / show events directly on the collapse sections. Still without...
javascript,jquery,html,json,html5
the first "A" in AJAX stands for "Asynchronous" that means, it is not executed right after it has been called. So you never get the value. Maybe you could first, get the os list and then output what you need, like this: function createCheckBoxPlatform(myDatas) { $.ajax({ url: "/QRCNew/GetOS", type: "post",...
nextAll and first: $(this).nextAll('.hidden').first().slideToggle(...); This question has more about this: Efficient, concise way to find next matching sibling?...
The background colour changes when the browser width is less than 1200px wide. You have specified the background-color for the selector .td-grid-wrap within a media query: What you need to do is move the background-color property to the non-media-queried selector .td-grid-wrap or perhaps .td-page-wrap. ...
This is normal behaviour: Bold text is wider, thus repositioning the centered text around it. You could go for a fixed width on all links to prevent this: .main-navigation a { text-decoration: none; min-width: 6em; display: inline-block; } ...
javascript,jquery,html,internet-explorer
Your call of setTimeout fails in any browser, but in IE9 with an exception(what stops the further script-execution). It's a matter of time. At the moment when you call var timer = setTimeout(slideshow, 8000); slideshow is undefined , and undefined is not a valid argument for setTimeout. Wrap the call...
javascript,jquery,html,arrays,contains
You can use :contains selector. I think you meant either one of those values, in that case var arr = ['bat', 'ball']; var selectors = arr.map(function(val) { return ':contains(' + val + ')' }); var $lis = $('ul li').filter(selectors.join()); $lis.css('color', 'red') <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li>cricket bat</li> <li>tennis ball</li> <li>golf ball</li>...
One possible solution is that you move all your clearRect()'s out from the else-statements to the top and clear it from the start. Then you add text in a second step. That way you can also group the if-statements together to form a if-else if relationship (crappy explanation, just look...
Height of #StayOpen is 0px. Also you have to check CSS rule priorities. Your code might look like this: #StayOpen { height: 100%; } #StayOpen:hover #AccomodationPanel { height:300px !important; } Look at this fiddle. Transition In your question you've mentioned about transition. You can add it in #AccomodationPanel (updated example):...
Okay so I have made a few assumptions to create this solution. Firstly, I'm guessing that as you are setting the headers of the tables as width:200px; that the width of the two columns are 100px. (This can be changed if need be). Secondly, these tables are not floated. This...
HAML equivalent is %i{class:"fa fa-search"} You can look at http://codepen.io/anon/pen/BNwbEP and see the compiled view ...
Trigger the click event like this: $('._repLikeMore').trigger('click'); ...
Try a class: var image1 = new Image(); image1.src = "bilder/tfb_g/slide1.jpg"; var image2 = new Image(); image2.src = "bilder/tfb_g/slide2.jpg"; var image3 = new Image(); image3.src = "bilder/tfb_g/slide3.jpg"; SlideShow = function (ele) { this.step = 1; this.element = ele; this.Move = function () { this.element.src = eval('image' + this.step + '.src');...
Having a Line series: To modify the line thickness, change the series format.stroke.size property. Ie: Chart1.series.items[0].format.stroke.size=2; To modify the series color, change the series format.stroke.fill property. Ie: Chart1.series.items[0].format.stroke.fill="red"; ...
This should work: @media only screen and (max-width: 600px) { (...) } Note that IE8 and below don't support media queries....
You need to keep the plus before the menu: <a href="#" class="menu-trigger">+</a> <ul class="menu"> <!-- Menu --> </ul> <a href="#" class="menu-trigger">+</a> <ul class="menu"> <!-- Menu --> </ul> And in the jQuery, you need to give only for the plus, you can also make the plus as minus: $(".menu-trigger").click(function () {...
This will give you the nearest row ID of a selected element. var row_id = $(this).closest('tr').index() In reply to your comment (again): http://jsfiddle.net/vcLvxycv/4/ This is independent of the row ID, will return the index as requested! OK! Final edit I think I know what you mean. In the input box...
jquery,html,css,drop-down-menu
Firefox has some problems with select-background. You can try this code - it'll remove the arrow, and then you can add a background image with your arrow (I took an icon from google search, just put you icon instead) I get this on FireFox (You can use any arrow icon...
html,css,twitter-bootstrap,flexbox
Set display: flex for the <ul class="nav">, not for items. Also use align-items: center for vertical aligment: .nav { height: 70px; display: flex; justify-content: center; align-items: center; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li...
javascript,jquery,html,css,bootstrap
You have some syntax errors otherwise everything is good!! keep url inside quotes as below: $('.jumbotron').css('background-image','url(/path/to/new/image)'); ...
You can use 3-Events: - Start (Start-Sliding) -> Stop Player - End (End-Sliding) -> Start Player - Slide (Sliding) -> Move Player-Position $("#range").slider({ range: "min", start: function(event, ui) { player.pauseVideo(); }, stop: function(event, ui) { player.playVideo(); }, slide: function(event, ui) { player.seekTo(ui.value,true); return false; } }); Demo: http://codepen.io/anon/pen/EjwMGV...
Let suppose on button click you are calling ajax method <button onclick="LoadData();"/> before ajax call show image and onComplete ajax method hide this image function LoadData(){ $("#loading-image").show(); $.ajax({ url: yourURL, cache: false, success: function(html){ $("Your div id").append(html); }, complete: function(){ $("#loading-image").hide(); } }); } ...
javascript,html,sqlite,cordova
You made a mistake: you used result instead of res: tx.executeSql("SELECT (date) FROM time", [], function (tx, res) { var len = result.rows.length; // <- should be res if (len > 0) { for (var i = 0; i < len; i++) { var a = results.rows.item(i)['date']; // <- should...
if you don't set a width for btn: parent - text-align: center use for button - display-inline: block; instead display: block .wrap { text-align: center; } .center-block { display: inline-block; } <div class="wrap"> <input value="Button" class="center-block" type="submit" /> </div> ...
If it's responsive, use percentage heights and widths: html { height: 100%; width: 100%; } body { height: 100%; width: 100%; margin: 0; padding: 0; } div.container { width: 100%; height: 100%; white-space: nowrap; } div.container img { max-height: 100%; } <div class="container"> <img src="http://i.imgur.com/g0XwGQp.jpg" /> <img src="http://i.imgur.com/sFNj4bs.jpg" /> </div>...
javascript,php,jquery,html,css3
Ok, so i tried to decypher what you meant with your Question. To Clarify: He has this one page setup. inside the div Our Project, there are two Buttons or links Visit more. When clicked, he wants the About Section to be shown. All in all it is impossible for...
If I understand this correctly,all you need to do is change your CSS to the following: .sintesi-offerta > .block:nth-child(3n+1) { width: 40%; } .sintesi-offerta > .block:nth-child(3n+2) { width: 20%; } .sintesi-offerta > .block:nth-child(3n+3) { width: 40%; } Side note: your br tags should be <br/> for jsfiddle to interpret them...
.pencil{ width: 200px; height: 40px; border: 1px solid #000; position: relative; } .pencil:before{ content: ''; display: block; margin: 10px 0; width: 100%; height: 10px; border: 6px solid #000; border-width: 6px 0; } .pencil:after{ content: ''; display: block; height: 10px; border: 1px solid #000; border-width: 1px 1px 0 0; width:...