I am looking at the code for a gallery page. It is able to filter the type of media displayed (video, image, etc) and as far as I can see, it does this with the data-option-value attribute.
I cannot find any documentation explaining the functionality, application or anything else really about the data-option-value attribute.
Any help in explaining what this attribute is, what it does or how it assists in filtering the displayed media would be helpful.
Here is the code:
<ul class="nav nav-pills sort-source" data-sort-id="gallery" data-option-key="filter">
<li data-option-value="*" class="active"><i class="fa fa-th"></i> <span>Show All</span></li>
<li data-option-value=".images"><span><i class="fa fa-image"></i> Images</span></li>
<li data-option-value=".videos"><span><i class="fa fa-video-camera"></i> Videos</span></li>
<li data-option-value=".links"><span><i class="fa fa-link"></i> Links</span></li>
<li data-option-value=".sliders"><span><i class="fa fa-desktop"></i> Sliders</span></li>
</ul>
Here is one of the code for one of the images in the gallery:
<li class="col-md-3 col-sm-6 col-xs-6 grid-item gallery-grid-item links format-link">
<img src="http://placehold.it/600x400&text=IMAGE+PLACEHOLDER" alt="">
</li>
Anything starting with data-* is a custom HTML attribute that the author added to the HTML element to do something with it in JS.
Example:
<div id="mydiv" data-width="500" data-content="Hello World" data-favoritecolor="green"></div>
In short, you'll have to take a look at the JS, search for getAttribute("data-option-value")
Related
So, I got my Dopdown for Languages, I want to make a href if I press on "English", how can I do that?
<div class="nav-wrapper">
<div class="sl-nav">
Sprache:
<ul>
<li><b>Deutsch</b> <i class="fa fa-angle-down" aria-hidden="true"></i>
<div class="triangle"></div>
<ul>
<li><i class="sl-flag flag-de"><div id="germany"></div></i> <span class="active">Deutsch</span></li>
<li><i class="sl-flag flag-usa"><div id="germany"></div></i> <span>English</span></li>
<li><i class="sl-flag flag-cz"><div id="germany"></div></i> <span>Česky</span></li>
</ul>
</li>
</ul>
</div>
</div>
Im pretty new, to HTML and don't know where to put my href
You could put the a anchor in the whole li element, so it works by clicking on the text and also the flag:
<li><i class="sl-flag flag-usa"><div id="germany"></div></i> <span>English</span></li>
also, remember to change your ids, they're all germany now
You can add an anchor tag <a> on the elements:
<li><i class="sl-flag flag-usa"><div id="germany"></div></i>English</li>
I'm trying to change the color of all elements inside of an anchor tag. These elements are i and span. However, I can't get my solution to work. Should I change the color one by one in CSS?
HTML and CSS
.active-link {
color: #2268ff;
}
<li class="nav__item">
<a href="#home" class="nav__link active-link">
<i class="bx bx-home nav__icon"></i>
<span class="nav__name">Home</span>
</a>
</li>
You can directly add the class name to the "li" tag
.active-link {
color: #2268ff;
}
<li class="nav__item active-link">
<a href="#home" class="nav__link ">
<i class="bx bx-home nav__icon"></i>
<span class="nav__name">Home</span>
</a>
</li>
What you have shared should work. If this isn't working, I suspect some other CSS rules are overriding your CSS.
By default there shouldn't be a style attached to the <span> or <i> elements. They might get one from the browser (user agent stylesheet) or (like in your case) it should come from its parent (inherited from).
Screenshot from browser developer tools
.active-link > * {
color: #2268ff;
}
<li class="nav__item active-link">
<a href="#home" class="nav__link ">
<i class="bx bx-home nav__icon"></i>
<span class="nav__name">Home</span>
</a>
</li>
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!
Im trying to change the nav item in my ASP.Net MVC 4 project. I have found some examples but they dont work with the way the menu in need( See code):
<nav>
<ul>
<li>
<a href="/StartMenu/Index" class="current" title="Dashboard">
<i class="icon-map-marker"></i>
Dashboard
</a>
</li>
<li>
<a href="/StartMenu/Forms" title="Forms Stuff">
<i class="icon-edit"></i>
Forms Stuff
</a>
</li>
If all you're trying to do is make sure the last link that was clicked has class="current" you can do this
$("a").click(function() {
$("a").removeClass("current");
$(this).addClass("current");
})
I'm trying to create a simple thumbnail list, the code is pretty much copied off jqm docs pages. However, when I use the code below the button element of the list isn't anchored to the left of the list item and instead appears centered...Can anyone help me? It's driving me crazy!
I haven't got any styles in other than what is in the jquerymobile default page template
<div id="listDiv" class="ui-content" data-role="main">
<div id="listInformation" data-role="content-primary">
<ul id="swipeMeChildrenList" data-role="listview" class="ui-listview">
<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="index.html" class="ui-link-inherit">
<img src="images/album-p.jpg" class="ui-li-thumb">
<p>Ha</p>
</a>
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>
</div>
</li>
</ul>
</div>
</div>
What code do you use to generate your list from? A simple list will be specified like this:
<ul data-role="listview">
<li>
<a href="index.html">
<img src="images/album-p.jpg" />Ha
</a>
</li>
</ul>
jQuery Mobile will take care of adding all the necessary classes depending on the platform.
I suggest opening a new document and using the defaults from that page, ie
<ul data-role="listview">
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a></li>
</ul>
Then if that works, piece by piece replace the code with yours until it breaks, that should isolate the issue.