appear and disappear effect for div by clicking on it - css

I can't understand how to make something like in this site: __smashingmagazine.com
If u resize the window, the search will be with a button. So... try to click on this search icon... the new div will appear with search input. and pay attention to the behavior of it: no matter what u gonna do next this div won't hide it self, but only if you click on 'x' that appear instead of search icon... and this is pure css, right?! how this possible...
I found this article:
Click here
but the behavior is very, very different... and i don't like it at all.
Any idea how to make it work like in the site above? anything would may help!
Thanks!

The example from Smashing Magazine uses the :target psuedo class to change the CSS of the elements when an anchor is clicked. Here's a simplified breakdown of how they've achieved that behaviour.
The anchor is configured to set a fragment identifier in the URL, in the case of Smashing Magazine this is #ms. The have an anchor like this:
Search
When clicked the fragment identifier is set to #ms, they then use this to make the search appear using the :target psuedo class.
#ms {
display: none;
}
#ms:target {
display: block;
}
When the fragment identifier is set to #ms, the :target styles are activated, displaying the search.
Here's a simple example: http://jsfiddle.net/we76L66h/
They are using :target with children (#ms:target + div.example) to also change the styling of children within the targeted element. This is how they make the button change to a "close" button when the #ms fragment identifier is set.

Related

Angular 5 - Bootstrap datepicker in bootstrap modal

I'm using ngx-bootstrap for datepicker. But when I use this datepicker inside modal, It opens under modal.
My issue is similar to this . But css changes are not working for me. Any help whould be appreciated.
I think You need to change the parent class style .
this will work for ngx-bootstrap calendar
follow this code
bs-datepicker-container, bs-daterangepicker-container { z-index: 2000; }
You are probaly using the wrong class if you follow that answer.
I took a look at the github code and saw that the class name used there is bs-calendar-container.
You might want to verify that this is the case for your wrongly z-indexed elements by inspecting them in your developer tools(F12) and verifying the class name on them.
Then you might want to change the z-index to have them appear above the modal.
The problem is caused by the modal being a direct child of the body element, and the datepicker date chooser also being a direct child of the body element, so they are competing for the same z-index space.
The bootstrap modals usually have an z-index of 1000. So setting the z-index of your datepicker item to 1200 should help, to make sure they also appear above elements that are present within the modal.
In case your datepicker has the class bs-calendar-container your CSS would look like this:
.bs-calendar-container {
z-index: 1001;
}

Custom link open to anchor tab in page

I am wanting to create Custom Links within my menu to open to (open) tabs on a page. I have tried to use anchors but this is not working.
Please see example for URL: https://adventurethon.savvylittlefreelancer.com/
Main menu > Events (dropdown) > Clarence Valley > Results
Under main menu settings, I have created a Custom Link for "Results" and want this to redirect straight to the Results Tab under Event > Clarence Valley when clicked on.
I have given a section within the tab an ID or clarence-results and linked this to Menu Custom Link > Anchor = #clarence-results with no luck.
Anchor ID on Results
Anchor ID in Menu
I have also added in the direct URL: https://adventurethon.savvylittlefreelancer.com/event/clarence-valley-nsw/#clarence-results & adventurethon.savvylittlefreelancer.com/event/clarence-valley-nsw/#clarence-results (with no https://)
And no luck.
The custom links direct to page successfully but does not take me to the "results" part of the page.
Any pointers?
Thanks!
I am not sure what the parent element is that is displaying as none, but I tried to
#clarence-results {
display: inline;
}
Not quite sure how to display the parent element.
Thanks!
It is because a parent element of the tag with the "clarence-results" ID is being hidden with CSS display: none. Make sure the element is showing, and the jump link should work.
I have checked and there is not reliable way to select this particular element with CSS. I suspect it is being hidden by some sort of setting in the backend, so your options are:
Find the setting that makes this element visible
Add a visible element above it with an ID, and use that as the anchor. If you don't want it to be visible, you could use visibility: hidden and/or height: 0; overflow: hidden;
Add an ID to the wrapping column or row, then use that as the anchor.
Without being able to see your site's admin, it's difficult to find the best way to fix it. But the root of the problem is that the ID you are linking to is not visible on the page, so you need to either make it visible (I strongly suspect there is a setting somewhere that is hiding it), or you need to link to a different (visible) ID.

CSS Hover Removal on Tap

I have a CSS menu that when you hover over a li it shows a sub menu, example ui: http://www.screencast.com/t/JIa2NvbreF8V
I added code that on a model device is would 'focus' the element when you click/tap it, like: $($event.target).focus();
problem is, when I tap a <a href="\blah"> link inside my page navigates fine but my menu stays open. I tried retriggering the body to be the focus but no luck. Anyone got a good idea on how to accomplish this?
What I would do is add a class to control the "focused" state, so that when you click on a link you can easily remove it.
Shouldn't be complicated but i would need to look at the code :O
Try the below code
$("a").focusout(function(){
$(this).css("display","none");
});
Regards
maha
inside that jquery selector have it so when you click the target it also changes the style for the parent li:hover

Down Arrow On Lists Within Lists

I'm trying to place a down-arrow in my navigation menu, if there is a li within an li.
Hover over the Shop link to see where I'm having difficulty - http://codepen.io/anon/pen/ABucF
The arrow (or V for my demonstration purposes) should be just after the Shop tab, Check Out and My Account, not inside it.
How would I be able to achieve this in the CSS?
Thank you.
You're trying to look at an element to check for a specific condition and style its parent based on that.
CSS can't yet be used to style parent elements unfortunately.
Your best bet is to simply add a class onto each element you want styled and do it that way or to physically place an icon/img in each anchor tag that requires it.
Alternatively use JavaScript to make it happen.
give a class to the parent who has sub child in it i.e Shop
.parent:after{
content:"V";
//or
background:url(image.png) no-repeat position;
}
updated pen

:focus selector in CSS

JSFiddle (The *:focus rule is to illustrate which element is marked as having focus.)
What I'm wondering is why, when I click a menu item, it gets the focus... but clicking a menu item does not give it focus.
What's wrong with the CSS to make it behave this way?
focus is generally only for elements that can receive keyboard or other input, so by this heuristic lis don't qualify. This question has more about it..
In the specs, CSS doesn't explicitly define what elements can be in those states, so it's hard to come up with a set rule for what can and can't be set to focus.
What might work for your purposes is active, which you can view here.
There is a small trick - if you want an item which not have focus anabled by default you should make it tabbable by seting its tabindex="N" - N is a number. As simple as that. if you add tabindex to your clickable items they will get focus when you click. If a tag can be tabbed it have to be able to get focus. Adding tabindex attribute to all nodes of the menu is very simple if you have jQuery loaded:
$(function() {
$('#navbar *').attr('tabindex', '1');
});
end everithing comes in place. You can do it using pure JavaScript of course.

Resources