Wrapping a table or DIVs columns to multiple rows - javascript

I'm working with a CMS that parses variables into content using placeholders, e.g.
<td>
[[TITLE]]
<br />
[[DESCRIPTION]]
</td>
The problem is that this will make one long table row. Because of the way the code is written, I can't get it to insert a <tr> after every few columns. Is there any way to wrap the rows (even using DIVs to emulate tables)?
Even any jquery/mootools/prototype features that could be adapted to do this?

Found the solution: Use <ul> and <li> styled with CSS and put a <div> around it.
Short example:
<style>
#nav-menu li
{
height: 20px;
float: left;
width: 100px;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu {
/* You can change this width and the list will wrap */
width: 400px;
border: 1px solid red;
}
</style>
<div id="nav-menu">
<ul>
<li>Services</li>
<li>About us</li>
<li>Contact us</li>
<li>Services</li>
<li>About us</li>
<li>Contact us</li>
<li>Services</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</div>

As for JQuery and tables there are plenty of options on the 'table'.
http://webdesignledger.com/resources/12-useful-jquery-plugins-for-working-with-tables
http://plugins.jquery.com/project/Plugins/category/54

Related

using css and javascript onclick, link color change when they are clicked and being activated untill I click other link [duplicate]

This question already has an answer here:
keeping a: active until another link is clicked
(1 answer)
Closed 7 years ago.
I'm trying to do this: user clicks link, then the clicked link turns yellow and stay yellow until I click a link that's next to the clicked link. so they need to toggle. (not :active) this should be done with onclick I think. I personally want to do with css tho.
<div id="Space">
<ul>
<li role="presentation" class="sort">
hot
</li>
<li role="presentation" class="date">
update
</li>
</ul>
</div>
currently in css, I have
#Space li {
display: inline;
margin-left: 10px;
padding-bottom: 11px;
}
#Space li:hover {
border-bottom: 5px solid #6495ED;
}
and nothing for js. Javascript goes in html with <script></script> right? Any help would be appreciated, thank you :)
You can use :active along with :hover:
#Space li:active,
#Space li:hover {
border-bottom: 5px solid #6495ED;
}
Now, this kinda stays till you click another link. But there are better methods using <input type="radio" /> that persists.
#Space li {
display: inline;
margin-left: 10px;
padding-bottom: 11px;
}
#Space li:focus,
#Space li:hover {
border-bottom: 5px solid #6495ED;
outline: 0;
}
<div id="Space">
<ul>
<li role="presentation" class="sort" tabindex="1">
hot
</li>
<li role="presentation" class="date" tabindex="1">
update
</li>
</ul>
</div>
I used :focus in the above example, because the :hover is tied to the <li> and not in <a>.
JavaScript version could be as simple as adding and removing an .active class.
Use color in hover: selecor
#Space li {
display: inline;
margin-left: 10px;
padding-bottom: 11px;
}
#Space li:hover {
border-bottom: 5px solid #6495ED;
color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="Space">
<ul>
<li role="presentation" class="sort">
hot
</li>
<li role="presentation" class="date">
update
</li>
</ul>
</div>

Custom CSS Navigation dropdown

Currently on my site when I have too many links, the link falls down below the navigation. See my example: https://jsfiddle.net/cn6z13n1/
Is it possible instead to have a More Links list item at the far right which will have a dropdown populated with links?
.toolkit_nav {
background:#dfdfdf;
width:100%;
height:40px;
padding:0;
}
.toolkit_nav ul {
margin:0;
}
.toolkit_nav ul .page_item {
display:inline-block;
line-height:40px;
list-style-type:none;
margin:0px;
padding:0 20px;
}
.toolkit_nav ul .page_item:first-child {
margin-left:0;
padding-left:0;
}
.page_item:hover, .current_page_item {
background:grey;
}
.page_item a {
color:black;
font-size: 0.9em;
font-weight: 400;
text-decoration:none;
}
<nav class="toolkit_nav">
<div class="row">
<div class="medium-12 columns">
<ul>
<li class="page_item page-item-1035 current_page_item">Introduction</li>
<li class="page_item page-item-1039">Digital Landscapes</li>
<li class="page_item page-item-1039">Link 4</li>
<li class="page_item page-item-1039">Link 3</li>
<li class="page_item page-item-1039">Link 2</li>
<li class="page_item page-item-1039">Link 1</li>
<li class="page_item page-item-1039">Link 5</li>
</ul>
</div>
</div>
</nav>
You would need to do this in js i suggest something like this
get the width of the row (max width for nav)
loop through the li elements and sum up there width (+ remember to add the width of a "more" element here
when sum of width > width of nav element hide the elements
add js to your "more" button which shows the hidden elements
Following code is not tested but should give you an idea:
var maxWidth = $('#nav').width();
var moreWidth = $('#more').width(); // li "more" element
var sumWidth = moreWidth;
$('#nav li').each(function() {
sumWidth += $(this).width();
if(sumWidth > maxWidth) {
$(this).addClass('hide'); // add css for hide class
}
});
$('#more').on('click', function() {
$('#nav .hide').fadeIn(100);
// You will need more code here to place it correctly, maybe append the elements in an container
});
Here an example with your fiddle:
https://jsfiddle.net/cn6z13n1/3/
Note: this is just a rough draft, you might to calc paddings etc. to make this work rly good
Edit: updated example with $(window).resize() function
https://jsfiddle.net/cn6z13n1/6/
You'll need to change you HTML slightly but this will work.
.toolkit_nav {
background: #dfdfdf;
width: 100%;
height: 40px;
padding: 0;
}
.toolkit_nav ul {
margin: 0;
}
.toolkit_nav ul .page_item {
display: inline-block;
line-height: 40px;
list-style-type: none;
margin: 0px;
padding: 0 20px;
}
.toolkit_nav ul .page_item:first-child {
margin-left: 0;
padding-left: 0;
}
.page_item:hover,
.current_page_item {
background: grey;
}
.page_item a {
color: black;
font-size: 0.9em;
font-weight: 400;
text-decoration: none;
}
/* NEW STUFF */
.sub-nav,
.sub-nav li {
box-sizing: border-box;
}
.more {
position: relative;
}
.more>ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0
}
.more:hover>ul {
display: block;
}
.more>ul>li {
display: block;
width: 100%;
clear: both;
text-align: center;
}
.toolkit_nav ul.sub-nav .page_item:first-child {
padding: 0 20px;
}
<nav class="toolkit_nav">
<div class="row">
<div class="medium-12 columns">
<ul>
<li class="page_item page-item-1035 current_page_item">Introduction
</li>
<li class="page_item page-item-1039">Digital Landscapes
</li>
<li class="page_item page-item-1039">Link 4
</li>
<li class="page_item page-item-1039">Link 3
</li>
<li class="page_item page-item-1039">Link 2
</li>
<li class="page_item page-item-1039 more">More...
<ul class="sub-nav">
<li class="page_item page-item-1039">Link 1
</li>
<li class="page_item page-item-1039">Link 5
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

jQuery using tab to go through dropdown menu links (keyboard accessibility)

I have a css menu I would like to make accessible through keyboard interaction. I want to be able to tab through each link including sub menu links.
If the dropdown focus moves on to the next parent link dropdown then the previous dropdown should hide.
Updated Fiddle
HTML
<ul>
<li class="custom-MainMenu-TopNav-li">
<div>
<span>Parent link 1</span>
<div>
<ul class="custom-MainMenu-SubNav-dropdown">
<li>Sub Link</li>
<li>Sub Link</li>
</ul>
</div>
</div>
</li>
<li class="custom-MainMenu-TopNav-li">
<div>
<span>Parent link 2</span>
<div>
<ul class="custom-MainMenu-SubNav-dropdown">
<li>Sub Link</li>
<li>Sub Link</li>
</ul>
</div>
</div>
</li>
</ul>
JavaScript
accessibleDropdown();
function accessibleDropdown(){
jQuery('.custom-MainMenu-TopNav-li a').each(function(){
jQuery(this).focus(function(){
jQuery(this).addClass('focused');
var menuParent = jQuery(this).parent().next().find('ul');
jQuery(menuParent).css('display','block');
});
jQuery(this).blur(function(){
jQuery(this).removeClass('focused');
});
});
}
I am not sure what is your desired outcome and need for this result, but hopefully this will help you out.
I had to redo your example due to naming convention and approach, but I assume this is what you wanted...
Here's a demo, just in case...
JSFiddle
HTML
<ul class="navbar">
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
</ul>
CSS
body {
margin: 10px;
}
.navbar,
.navbar .navbar-sub {
list-style: none;
margin: 0;
padding: 0;
}
.navbar > .navbar-item {
float: left;
}
.navbar > .navbar-item:last-child {
margin-right: 0;
}
.navbar > .navbar-item.active > .navbar-sub {
display: block;
}
.navbar > .navbar-item a {
text-decoration: none;
}
.navbar > .navbar-item > a {
background-color: #999;
padding: 10px 20px;
color: #696969;
display: block;
}
.navbar > .navbar-item > a:hover,
.navbar > .navbar-item > a:focus,
.navbar > .navbar-item.active > a {
background-color: #ccc;
}
.navbar .navbar-sub {
display: none;
}
.navbar .navbar-sub > .navbar-sub-item > a {
color: #ccc;
display: block;
padding: 5px 10px;
text-align: center;
background-color: #696969;
}
.navbar .navbar-item.active .navbar-sub-item > a:hover,
.navbar .navbar-item.active .navbar-sub-item > a:focus {
background-color: #999;
}
jQuery
$('.navbar').on('mouseenter focusin', '.navbar-item > a', function () {
$(this)
.parent('.navbar-item')
.addClass('active')
.siblings('.navbar-item')
.removeClass('active')
});
here you go, simple jquery :)
// display drop down box when mouse is over
$(".custom-MainMenu-TopNav-li a").mouseover(function(){
$(this).find(".custom-MainMenu-SubNav-dropdown").css("display", "block");
});
// hide drop down box when mouse leaves
$(".custom-MainMenu-TopNav-li a").mouseleave(function(){
$(this).find(".custom-MainMenu-SubNav-dropdown").css("display", "none");
});
This basically displays/hide each the dropdown when the mouse is over/leaves the parent div.
I don't think it would be a good idea to display the dropbown menu on focus, cause i believe you can only focus on certain elements like inputs.
Hope this helps!

How to have a floating menu in the middle of the screen

Is this possible without the help of javascript?
Typically we have menu bars at the top of the page - we place them as a child of body and then absolutely position them e.g. top: 10px; right: 10px;.
What if we want to achieve the same goal but as a context menu further down the page?
I have started a fiddle to give an idea - here there's no positioning, we just have the default of overflow: visible.
I can't absolutely position it because I don't know the x,y due to the dynamic nature of the content that precedes it.
The only way I can think of is go down the traditional route of the top nav bar, and with javascript find the x,y of it's container and position it there. However I would need to manage that if the content that precedes it changes then it's position needs to change also.
Does anyone know of a "stick-to" jquery method. Or even better achieve it with pure css?
Thanks
here's my crude fiddle - click "one" http://jsfiddle.net/hHR23/1/
I think you want this but I'm not certain from your description:
http://jsfiddle.net/samih/hHR23/2/
Notice this:
.section {
height: 58px;
background-color: yellow;
position: relative;
}
And this:
.menu {
position: absolute;
}
Now your menu will follow with the "dynamic" page because the absolute position is relative to the "position: relative" container.
Another approach - Fiddle.
HTML
<div class='header'>Header</div>
<div class='floatingmenu'>
<ul class="menu">
<li>One
<ul class="sub-menu">
<li>one a</li>
<li>one b</li>
<li>one c</li>
<li>one d</li>
<li>one e</li>
<li>one f</li>
<li>one g</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
CSS
.header {
height: 40px;
background-color: blue;
}
.floatingmenu {
width: 30%;
height: 30%;
background-color: green;
color: white;
border: 10px solid white;
border-radius: 10px;
margin: 20px auto;
}
.footer {
height: 200px;
background-color: yellow;
}

Able to Drag but not Drop: jQuery Plug-in

I am trying to implement the drop and drop feature in my app using a jQuery plugin as described here: http://farhadi.ir/projects/html5sortable/ anyhow, I am only able to drag the list objects and not drop them in my project.
Then, I tried to simply .html file that implements just the drag and drop described without all the complexities of my app.
So, here is the code:
<HTML>
<HEAD>
</HEAD>
<BODY>
<section id="demos">
<h1>Demos</h1>
<style>
#demos section {
overflow: hidden;
}
.sortable {
width: 310px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.sortable.grid {
overflow: hidden;
}
.sortable li {
list-style: none;
border: 1px solid #CCC;
background: #F6F6F6;
color: #1C94C4;
margin: 5px;
padding: 5px;
height: 22px;
}
.sortable.grid li {
line-height: 80px;
float: left;
width: 80px;
height: 80px;
text-align: center;
}
.handle {
cursor: move;
}
.sortable.connected {
width: 200px;
min-height: 100px;
float: left;
}
li.disabled {
opacity: 0.5;
}
li.highlight {
background: #FEE25F;
}
li.sortable-placeholder {
border: 1px dashed #CCC;
background: none;
}
</style>
<section>
<h1>Sortable List</h1>
<ul id="sortable1" class="sortable list">
<li draggable="true" class style="display: list-item;">Item 1
<li draggable="true" class style="display: list-item;">Item 2
<li draggable="true">Item 3
<li draggable="true">Item 4
<li draggable="true">Item 5
<li draggable="true">Item 6
</ul>
</section>
</section>
<script src="/html5sortable/jquery-1.7.1.min.js"></script>
<script src="/html5sortable/jquery.sortable.js"></script>
<script>
$(function() {
$('#sortable1, #sortable2').sortable();
$('#sortable3').sortable({
items: ':not(.disabled)'
});
$('#sortable-with-handles').sortable({
handle: '.handle'
});
$('#sortable4, #sortable5').sortable({
connectWith: '.connected'
});
});
</script>
</BODY>
</HTML>
But even this is not working. The examples given on the site are working properly, so there has to be something wrong.
I have properly downloaded and included all the files that need to be downloaded/included?
There is an additional "/" in the relative address that you have defined. Remove it.
I think you need to close your li tags like this:
<ul id="sortable1" class="sortable list">
<li draggable="true" class style="display: list-item;">Item 1</li>
<li draggable="true" class style="display: list-item;">Item 2</li>
<li draggable="true">Item 3</li>
<li draggable="true">Item 4</li>
<li draggable="true">Item 5</li>
<li draggable="true">Item 6</li>
</ul>
fiddle

Categories