I was wondering how I would go about changing the background color of the selected tab (not the contents of the tab, the tab heading itself, when I hover over it it turns grey but then goes back to normal once I click the tab, I want it to stay grey). I was also wondering how to change the font and font color of the tab heading once selected.
Please let me know if you need any other information, I'm not really sure how much more specific I can get without taking screenshots but I will if needed.
You can set css class for selected tab header. For example, if you have html like this,
<div class="menu">
<ul>
<li><a class="menuLink active" href="#">Home</a></li>
<li> <a class="menuLink" href="#">Page1</a></li>
<li><a class="menuLink" href="#">Page2</a></li>
<li><a class="menuLink" href="#">Page3</a></li>
</ul>
</div>
then using jQuery,
$('.menuLink').click(function(){
$('a').removeClass('active');
$(this).addClass('active');
});
Demo: http://jsfiddle.net/PYW35/
P.S.: this question should be tagged for jQuery, css.
Related
I am creating a user interface that is to be responsive.
I have three buttons that I would like to move into a drop down when the users screen size dictates.
My issue is that the "show-on-med-and-down" helper I am using to display the drop down menu is always showing regardless of the screen size.
The materialize helper "hide-on-med-and-down" is working and the content is being hidden correctly, but I cannot get the drop down to display only when the screen is medium and down.
<div class="entry">
<div class="icon> icon for user </div>
<div class="name"> user name </div>
<ul class="hide-on-med-and-down">
<div class="button>yes</div>
<div class="button>no</div>
<div class="button>maybe</div>
</ul>
<ul class="show-on-med-and-down">
<div class="dropdown"> dropdown menu</div>
</ul>
</div>
I expect this code to show exclusivity the drop down button or the three buttons in any case. But as you can see from my attached screenshot the dropdown menu place holder always is shown.
large view
small view
Thank you for your time in advance.
"show-on-med-and-down" css class just set the display property when the screen width is > 600px.
You need to set the style of the item to be style="display: none;"
OR change the class to "hide-on-large-only" (suggested).
I have an issue with using a linked template with JSViews and Materialize Dropdown Button.
The first time, the view is rendered, it works fine, however as soon as I observably update the status of the button, the ul tag which is linked to the button is deleted from the DOM.
I have created a test case on JSFiddle: here
<script id="test_template" type="text/x-jsrender">
{^{for tasks}}
<div class="dropdown change-state" style="display: block">
{^{if Status == 0}}
<a href="#" class="completed-state-box dropdown-button btn btn-flat red" data-constrainwidth="false" data-activates='review_status_dropdown-{{:Id}}'>NOT COMPLETE</a>
{{/if}}
{^{if Status == 1}}
<a href="#" class="completed-state-box dropdown-button btn btn-flat green" data-constrainwidth="false" data-activates='review_status_dropdown-{{:Id}}'>COMPLETE</a>
{{/if}}
<ul id="review_status_dropdown-{{:Id}}" class="dropdown-content">
<li><a class="state-change-button" href="#" data-value="0">NOT COMPLETE</a></li>
<li><a class="state-change-button" href="#" data-value="1">COMPLETE</a></li>
</ul>
</div>
{{/for}}
If you click on a button after running, it opens the drop down just fine. If you select an option that is not set (ie set the COMPLETED button to NOT COMPLETE), it updates the UI, but as the ul is removed from the DOM, clicking on it again does not reveal the drop down. Only the button that is updated is affected.
Can anyone see where I am going wrong?
It looks like Materialize clones the ul and inserts a copy after each activator. Initially there is only one activator (since the other {^{if}} expression is false so its content is empty) - and the cloned ul is placed next to it inside the {^{if}} block.
When you click to toggle the status, the contents of that {^{if}} get removed, and the other {^{if}} contents get rendered. But the second activator (<a> tag) has not been 'activated' and so does not have an associated <ul>.
If you are going to use Materialize alongside JsViews, then you have to deal with Materialize potentially doing DOM manipulation, which can break the JsViews data linking. Having two frameworks which both manipulate the same DOM can lead to collisions or conflicts.
In this case you can resolve the problem by using the visible binding, rather than {^{if}}:
<div class="dropdown change-state" style="display: block">
<a href="#" data-link="visible{:Status==0}" class="completed-state-box dropdown-button btn btn-flat red" data-constrainwidth="false" data-activates='review_status_dropdown-{{:Id}}'>NOT COMPLETE</a>
<a href="#" data-link="visible{:Status==1}" class="completed-state-box dropdown-button btn btn-flat green" data-constrainwidth="false" data-activates='review_status_dropdown-{{:Id}}'>COMPLETE</a>
<ul id="review_status_dropdown-{{:Id}}" class="dropdown-content">
<li><a class="state-change-button" href="#" data-value="0">NOT COMPLETE</a></li>
<li><a class="state-change-button" href="#" data-value="1">COMPLETE</a></li>
</ul>
</div>
Update:
In response to grayson's Materialize-related issues of 'inline-block' vs 'block',
here are a couple of alternatives:
You can data-link directly to the CSS display attribute, and specify the values you want to toggle:
<a data-link="css-display{:Status==1?'inline-block':'none'}" ...>
Or you can create a custom tag that does what you want:
$.views.tags("show", {
render: function(val) {
return val ? "inline-block" : "none"
},
attr: "css-display"
});
and then write:
<a data-link="{show Status==0}" ...>
You can even do:
$.views.tags("show", {
render: function(val, type) {
return val ? type||"inline-block" : "none"
},
attr: "css-display"
});
and write
<a data-link="{show Status==0}" ...>
or
<foo data-link="{show Status==0 'block'}" ...>
Boris' Answer is the correct answer to this question as you would obviously expect, however, I wanted to add a little something which may help anyone in the situation.
JSViews is very clever and using the visible binding, it appears to try and identify the type of element, so in the case of an anchor tag it uses display:inline, whereas for a div it uses display:block
In the case of materialize (and bootstrap), the btn class sets the display to inline-block, so using visible binding doesn't work as intended in all cases.
In my case, because this truly was a button rather than a link, I changed the anchor tag to a button tag and as this is a block element it worked just fine.
It is not an ideal solution, as in my case, I might have 30 buttons, with 5 options which means flooding the DOM with lots of extra hidden tags, but until I can come up with a better solution, using the {^{if..., it works.
I'm using colorbox on a site but haven't been able to figure out how turn off the title text when hovering over a thumbnail. I want to retain the text to use as a photo caption when you see the full size image, just hide it on the thumbnail hover state.
I've seen some js solutions to completely turn them off, which isn't what I want. I also messed around the with the colorbox js itself and was able to turn off the text for the full size image but that is the reverse of what I want. My skills are HTML and CSS... I have experimented with qtip but that is a little beyond me right now.
My HTML is basically this:
<li class="imgTitle"><a class="group1" href="images/bigPhoto.png" title="This tooltip is showing all the formatting tags like <br /> that I need to style my big photo caption <br />No one wants to see this HTML code while hovering over a thumbnail<br />Can I turn it off until you actually click the image<img src="images/thumbnailPhoto.png" /></a> </li>
Any help would be appreciated--thanks!
Try using some (hidden) element other than the title attribute, then as a setting in your colorbox, set the title option to a displayed copy of that element, for example:
HTML:
<li class="imgTitle">
<a class="group1" href="images/bigPhoto.png">
<span class="caption" style="display: none;">
I'm a caption that's not in a title attribute anymore
</span>
<img src="images/thumbnailPhoto.png" />
</a>
</li>
JS could be something like this:
$(".group1").colorbox({
title: function() {
return $(this).find("span.caption").clone().show();
},
// other settings/options here
});
Here is a fiddle similar to the above. I added the .clone() part because, when I was implementing something similar in a gallery, they disappeared after clicking once through all the images.
I am trying to understand how the show/hide logic of a dropdown in twitter bootstrap works.
I can declare a dropdown menu in a navbar purely with HTML, and yet it seems that Javascript is involved with showing/hiding the dropdown. Also the dropdown disappears if I focus out by clicking on an unrelated area on the page.
Question part 1: Where can I find the Javascript code that is involved with Dropdowns in bootstrap?
Question part 2: Is it somehow possible to tap into the event logic and execute some custom Javascript code when a certain dropdown receives a focus out event? For example so that I can hide another (unrelated) element on the page when the dropdown looses focus?
To be more precise:
Lets say I declare a bootstrap dropdown purely in HTML (this would be inside a ul.nav.navbar-nav):
<li role="presentation" class="dropdown">
<a id="mainmenu" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">
Lectures <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
</ul>
</li>
Now somewhere else on the page I have the following HTML:
<div id="#background" style="display: none">
<img src="...">
</div>
When I click on the dropdown button bootstrap will show the dropdown, but want two additional things to happen:
The div#background should be shown
Assuming I click somewhere outside the dropdown (which will cause bootstrap to close it), I want the div#background to be hidden again.
I think it should somehow be possible to register my own callback function on some bootstrap event and show/hide my div from that callback, like so:
/* just to illustrate my idea */
hide = function(element) {
element.style.display = "none"
}
show = function(element) {
element.style.display = "block"
}
}
So how and where could I register the hide and show functions such that they get called when I open/close the dropdown and also when I click on an unrelated area on the screen, which will cause the dropdown to close.
If this is possible to achieve purely in HTML by attaching some data-* elements to my div#background then I would like to know about that too.
First:
Do you think about something like this?
$('.dropdown-toggle').dropdown();
Got it from w3schools.com
Second:
You can do call the dropdown link
$('#element').click( function(){
$('#dropdownElement').dropdown();
});
Is that what you are looking for?
I am trying to have a menu bar to get stick to top when user scrolls up. It sticks fine at the top. But, it floats to left.
code: http://www.bootply.com/y801SV4HAu
How to fix menu so that if sticks to top and center (margin-left is currently set to auto to make it center)?
<div class="container" style="padding:0">
<div id="menu-header" class="affix">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<span style="color:white">Menu bar here<i class="glyphicon glyphicon-menu-right"></i></span>
</div>
</div>
</div>
</div>
The above does what you want it to do. Cassie was correct in suggesting a container div, but with the added style padding:0 for the way you want it to look. so that it aligns with page title.
When position: fixed is applied to the header upon scrolling down, the margin: auto no longer affects it, so it moves back over to the side. You'll have to find another way to center that div. There are probably a ton of ways to do this; the simplest offhand might be to put it inside a .container div.