I am creating a tournmanet bracket with vue, and I am using this code as start point: https://codepen.io/aronduby/pen/qliuj but I am using a v-for for generating the brackets
<ul v-for="j in jTotal>
<div v-for="i in iTotal"
v-if="!loading && matriz[j-1][i-1]"
class="test"
>
<li class="spacer"> </li>
<li class="game game-top winner">person 1 <span>79</span></li>
<li class="game game-spacer" > </li>
<li class="game game-bottom ">person 2 <span>48</span></li>
<li class="spacer"> </li>
</div>
</ul>
But as I have this div wrapping the li, I lost the flex-grow property that is being used in the example because I generate the structure
<ul>
<div>
<li>
So I would like to know if there is how I keep the property grow wrapping the 5 li that make up a game.
Thanks
Related
I'm making a WordPress website and I created everything outside of it. Now i'm getting it all together but I'm pretty new to this. I would like to create a Wordpress loop to get images from a gallery, replacing the img tag.
------- Edited -------
So there was a small change in the design but same problem. I need to get the images from a gallery in Wordpress to fill two slideshows with the same images.
<div id="slider1">
<ul>
<li class="mySlides1">
<img src="images_1.jpg">
</li>
<li class="mySlides1">
<img src="images_3.jpg">
</li>
<li class="mySlides1">
<img src="images_2.jpg">
</li>
<li class="mySlides1">
<img src="images_4.jpg">
</li>
</ul>
</div>
<div id="slider2">
<ul>
<li class="mySlides2">
<img src="images_1.jpg">
</li>
<li class="mySlides2">
<img src="images_3.jpg">
</li>
<li class="mySlides2">
<img src="images_2.jpg">
</li>
<li class="mySlides2">
<img src="images_4.jpg">
</li>
</ul>
</div>
I edited the question
As the question has been updated, I'm updating my answer to fit the new requirements. Basically, I've just added a parameter to the _GetSSImages() function. This allows you to pull the images from a specific slideshow, assuming that the class="" is unique for each slideshow. If not, then I would need to adjust the structure of the function.
----Original answer with updated code:
There are few things I don't know, such as how you intend to display the list of images from the slideshow, or how the client will edit this list.
However, you can use the javascript function below to grab all of the image src attributes from the slideshow HTML based on what you've shown here. The function returns an array of all src attributes so you can call it wherever you need to in your code to get the list.
function _GetSSImages(slide) {
var slideEls = document.querySelectorAll(slide),
slideImgs = [];
for(var i = 0; i < slideEls.length; i++) {
if(slideEls[i].querySelector("img").src != null) slideImgs.push(slideEls[i].querySelector("img").src);
}
return slideImgs;
}
var slideShow1 = _GetSSImages("mySlides1"),
slideShow2 = _GetSSImages("mySlides2");
<div id="slider1">
<ul>
<li class="mySlides1">
<img src="images_1.jpg">
</li>
<li class="mySlides1">
<img src="images_3.jpg">
</li>
<li class="mySlides1">
<img src="images_2.jpg">
</li>
<li class="mySlides1">
<img src="images_4.jpg">
</li>
</ul>
</div>
<div id="slider2">
<ul>
<li class="mySlides2">
<img src="images_1.jpg">
</li>
<li class="mySlides2">
<img src="images_3.jpg">
</li>
<li class="mySlides2">
<img src="images_2.jpg">
</li>
<li class="mySlides2">
<img src="images_4.jpg">
</li>
</ul>
</div>
I am trying to align a button properly as a secondary content within a collection. However, no matter what I try, I cannot get the button centered. See image below:
Current Layout
Code snippet:
<div class="section">
<ul class="collection with-header">
<li class="collection-header">
<h5>Drawing basics</h5>
</li>
<li class="collection-item">
<div>Public Policy and the Community<i class="material-icons">delete</i><a href="#!" class="secondary-content"><i class="material-icons">edit</i><a href="#!" class="secondary-content"><i class="material-icons">remove_red_eye</i></div>
</li>
<li class="collection-item">
<div> Introduction to Geology Studies
<button class="btn waves-effect waves-light right"> Create
</button>
</div>
</li>
<li class="collection-item">
<div> Global Perspective<i class="material-icons">delete</i><a href="#!" class="secondary-content"><i class="material-icons">edit</i><a href="#!" class="secondary-content"><i class="material-icons">remove_red_eye</i></div>
</li>
</ul>
</div>
What can I do to solve this? I've tried almost everything.
Well I couldn't get it to work as I'd like to but it works with this hardcode....
.fix{
float: right;
margin-top: -8px;
}
https://jsfiddle.net/ggcewqaL/2/
Maybe this answer is a bit late but here is the fix without the need for an additional CSS class.
<ul class="collection with-header">
<li class="collection-header"><h4>Drawing basics</h4></li>
<li class="collection-item"><div>Public Policy and the Community<i class="">remove_red_eye</i></div></li>
<li class="collection-item">
<div>Introduction to Geology Studies
Create
</a>
</div>
</li>
<li class="collection-item"><div>Global Perspective<i class="material-icons">remove_red_eye</i></div></li>
</ul>
I just added an anchor tag inside the second div and styled it with .btn class
Create
I hope this would be helpful for someone at least!
I am very new to this and my code is probably very sloppy, excessive and redundant, so I apologize for that.
I am trying to add one final piece to my nav bar. Here is the HTML, a fiddle will be attached at the bottom.
<body>
<div id="container">
<header class="main-header">
<ul class="main-nav">
<li> <a id="h" href=".html">_______ _______ __________</a> </li>
</ul>
<ul class="second-nav">
<li> <a id="a" href=".html">_____ __</a> </li>
<li class="dropdown"> <a id="p" href=".html">_________</a>
<ul class="drop-nav">
<div class="flyout">
<li> <a id="r" href=".html">___________</a> </li>
<ul class="flyout-nav">
<li> ___ </li>
<li> ______ _ _____ </li>
<li> ______ ________ </li>
</ul>
</div>
<div class="flyout">
<li> <a id="c" href=".html">__________</a> </li>
<ul class="flyout-nav">
<li> ______ ________ </li>
<li> ___________ </li>
<li> ______ _____ </li>
</ul>
</div>
<li> ______ _______ </li>
</ul>
</li>
<li> _______ __ </li>
</ul>
</header>
I am attempting to select the two different "flyout-nav"s individually, however I cannot seem to find the correct specificity to select each individually.
All I need to do is round the top left corner on the second "flyout-nav" while keeping the first "flyout-nav"s top left corner square.
I believe my problem is that when I try to select the first child of the "flyout" is selects both "flyout-nav"s as they are both the first children and I have been looking into nth-children and other child selectors but to no avail. At this point after combing through the code for a few days now attempting to make it more efficient and find an order that will make it work I need some new eyes on the code to see what my eyes have been blinded to.
Here is the Jsfiddle with my css (note css is probably more sloppy than my code, still attempting to figure out the whole organization thing).
Thank you for the assistance and please don't hesitate to ask me to clarify anything.
Fix:
I changed the second "flyout-nav" to "flyout-nav1" and then updated all of the css that was associated with "flyout-nav" to also incorporate "flyout-nav1"
new Jsfiddle here
Your HTML structure is invalid. This is a valid HTML structure.
<!DOCTYPE html>
<head>
<title>Test</title>
</head>
<body>
<div id="container">
<header class="main-header">
<ul class="main-nav">
<li>
<a id="h" href=".html">_______ _______ __________</a>
</li>
</ul>
<ul class="second-nav">
<li>
<a id="a" href=".html">_____ __</a>
</li>
<li class="dropdown"> <a id="p" href=".html">_________</a>
<ul class="drop-nav">
<li class="flyout">
<a id="r" href=".html">___________</a>
<ul class="flyout-nav">
<li>___
</li>
<li>______ _ _____
</li>
<li>______ ________
</li>
</ul>
</li>
<li class="flyout">
<a id="c" href=".html">__________</a>
<ul class="flyout-nav">
<li>______ ________
</li>
<li>___________
</li>
<li>______ _____
</li>
</ul>
</li>
<li>
______ _______
</li>
</ul>
</li>
<li>
_______ __
</li>
</ul>
</header>
</div>
</body>
Then use :nth-child() selector, or add a custom class.
Try out nth-child here:
https://css-tricks.com/examples/nth-child-tester/
Try using the 'adjacent sibling selector' (+):
ul.drop-nav div.flyout + div.flyout ul.flyout-nav {
/* css for the second flyout */
}
JSFiddle Demo
I believe Mr__Goat wants to select the two elements individually so he can apply different styling to each. The following CSS selectors will refer to each element individually.
/* First .flyout-nav */
.drop-nav .flyout-nav:nth-of-type(1) {
}
/* Second .flyout-nav */
.drop-nav .flyout-nav:nth-of-type(2) {
}
This is the a litle piece from a menu:
<li>Some Text
Now I want that after SOME TEXT to be 1 2 3 and when I click 1 2 3 to link me to another link, it has to be inside the >Some Text </a>.
Some ideas?
I'm not sure if that's what you are searching for:
<ul id="mega-menu-1" class="mega-menu">
<li>Products
<ul>
<li>Vehicles
<ul>
<li><a id="in_a_row" href="#">Coupe
<div class="cars">
<a class="car" href="#">1</a>
<a class="car" href="#">2</a>
<a class="car" href="#">3</a>
</div>
</a></li>
</ul>
</li>
</ul>
</li>
</ul>
For styling of the elements you can use this CSS code:
.cars,
.car,
#in_a_row
{
display: inline !important;
}
Use !important to overwrite styles which have been defined by the plugins CSS file.
Here you can grab the source code. Just replace the index.html of the plugin with that code.
I need to know how to create a navigation bar with Unsemantic framework (or 960gs).
My menu structure is
<div>
<ul>
<li></li>
</ul>
</div>.
I have tried so much, but still can't find out the problem.
EDIT
I use wordpress.So it creates navigation menu. the eventual code rendered in the browser is as follows:
<nav role="navigation" class="clearfix black grid-100 grid-parent mobile-grid-100 mar-top10 mar-bottom10" id="wp_nav_menu_wrapper">
<div class="grid-container">
<div class="menu">
<ul>
<li class="page_item page-item-2">
ُSample Page
</li>
<li class="page_item page-item-5">ُSample Page 2
</li>
</ul>
</div>
</div>
</nav>
While my Wordpress markup is as follows:
<div class='grid-100 height-auto black-gray-bg font-tahoma'>
<nav role='navigation' class='clearfix black grid-100 grid-parent mobile-grid-100 mar-top10 mar-bottom10' id='wp_nav_menu_wrapper'>
<div class='grid-container'>
<?php
wp_nav_menu();
?>
</div>
</nav>
</div>
The grid-container class is for the outer container and the grid-parent class for inner or nested containers. In your code you have this backwards.
The grid-parent class lets you align self-contained grids with normal grid items. The container holds all of the grid items. So the grid-parent is just an indicator that the or whatever will contain further items related to its scale and ordering on the page.
You can use this structure, or similar:
<nav class="grid-container">
<ul class="grid-100 grid-parent">
<li class="grid-25">...</li>
<li class="grid-25">...</li>
<li class="grid-25">...</li>
<li class="grid-25">...</li>
</ul>
</nav>