Add spacing to Twitter Bootstrap submenu - javascript

I am trying to add some spacing to the left of the Twitter Bootstrap submenu so there is a bit of spacing between the 2nd and 3rd level menus. So, I've used the following added CSS:
.dropdown-submenu > .dropdown-menu {
margin: -1px 0 0 5px;
}
But, when the user moves the mouse over the gap, the submenu disappears (go slow). How can I add the space and keep the menu showing while mousing over to it?
Here's a fiddle:
http://jsfiddle.net/trxk8/5/

This isn't really the prettiest of solutions but you could pad out the .dropdown-submenu elements with a transparent 5px border.
A side effect of this would be that you would also have to trim down the child anchor tag a little bit:
CSS
.dropdown-submenu {
border-right: transparent block 5px;
margin-right: -5px;
}
.dropdown-submenu > a {
position: relative;
right: 5px;
margin-left: 5px;
}
Working example: http://jsfiddle.net/trxk8/8/
Note, you would still be keeping margin-top: -1px in .dropdown-submenu > .dropdown-menu

Related

Sticky nav with parallax banner

I'm working on a mock clothing site. I have a parallax banner and a nav below it. What I'm trying to achieve is having the nav stick to the top of the page once the user actually scrolls past the nav. I am able to get the nav to stick to the top of the page, but it does so while still on the banner image.
Here's the CSS
.banner {
background-image: url('https://images.pexels.com/photos/896291/pexels-photo-896291.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
background-size: cover;
min-height: 100%;
background-attachment: fixed;
}
nav {
border-top: solid #000 1px;
background-color: #fff;
padding: 5px;
margin: 0 0 50px 0;
}
.sticky {
position: fixed;
width: 100%;
top:0;
border-bottom: solid black 1px;
box-shadow: 0 2px 5px dimgray;
}
Here's the jQuery
$(window).on('scroll', function() {
if($(window).scrollTop()) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
})
And here's my fiddle demonstrating the issue.
I've had a few theories on why this is happening.
At first I thought maybe it's happening because my top is set to 0, but when I changed the value it still triggered .sticky, but just floated in the middle of the page.
Then I thought, maybe it was because I attached scrollTop() to window. I tried attaching it to nav like this
if($('nav').scrollTop()) {
//add class
}
and that didn't work either.
Thanks in advance for any insight you guys might have!
First of all you will have to check if you the scroll top is bigger then a the value it should be scrolling to the top. If you did that, you should be able to just add a class to that item or remove it.
Example:
var slide = $('yourIdOrClassName').offset().top;
$(window).on('scroll', function() {
if($(window).scrollTop() > slide) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
});
You will need a class with the property display: none; and a class with the property display: block;
The property of display: none; says that the element will not be shown on the page. display: block is the default display property for the nav / div element.

Android Chrome fixed menu popping in and out with url disappearing

EDIT: Here's a Youtube video that illustrates my problem:
http://youtu.be/OguwjZR_GdU
On my website Black Star Opal I've been trying to implement a sticky menu, much like this one Dansk Kids. I looked at the Dansk Kids website javascript and CSS: there seems to be no javascript involved in their menu (other than the removal of the logo underneath their sticky menu when they scroll). I want my sticky menu to be as smooth as theirs if possible (ie staying flush with the url bar as it pops in and out).
Here's my css for #carttrans, the menu div:
position: fixed;
-webkit-backface-visibility: hidden;
height: 49px;
top: 0px;
left: 0px;
background-color: rgb(255, 255, 255);
width: 100% !important;
z-index: 10000;
text-align: center;
margin-left: 0px;
padding-left: 7px;
border: 1px solid rgb(221, 221, 221);
border-left: none;
border-right: none;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
border-bottom-color: rgb(221,221,221) !important;
-webkit-transform: translateZ(0);
I also use this js code (only because the menu wouldn't display on iOS Safari without it, although I'm unsure why):
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('#carttrans').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
if ($(window).width() < 500)
{
// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$('#carttrans').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#carttrans').css({ 'position': 'fixed' });
}
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
I even removed all the elements in the menu and just left the blank white bar there to see if it would do the same thing. It popped in and out awkardly just like before.
Any help with this would be amazing.
EDIT: As I said below, it's the URL bar popping in and out that seems to be disturbing my sticky menus. It could possibly be a repaint issue or slow down, because on other sites the disappearance of the url bar and the subsequent movement of the menu (for example, on sticky menu demos) is quite smooth and I'm doing/have tested them with the same url bar popping.
Cheers,
Rob
HTML
<header><h1>Sticky Header</h1></header>
<img src="large-image.jpg" width="782" height="2000" alt="Big Image" />
jQuery (remember to include the jquery library)
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
CSS:
header{
position: fixed;
width: 100%;
text-align: center;
font-size: 72px;
line-height: 108px;
height: 108px;
background: #335C7D;
color: #fff;
font-family: 'PT Sans', sans-serif;
}
header.sticky {
font-size: 24px;
line-height: 48px;
height: 48px;
background: #efc47D;
text-align: left;
padding-left: 20px;
transition: all 0.4s ease;
}
REFERENCES:
http://www.webdesignerdepot.com/2014/05/how-to-create-an-animated-sticky-header-with-css3-and-jquery/
PREVIOUS SAME QUESTION ON STACK OVERFLOW:
CSS Sticky header
I used firebug for firefox and just added the following to your #carttrans ID i am assuming you only want this to stick? If so check the css below replace your #carttrans with the below and lemme know if that is what you want?
#carttrans {
background: none repeat scroll 0 0 white;
position: fixed;
text-align: right;
top: 40px;
z-index: 999;
}
Hi i looked at your youtube clip and i see that it could be that the jquery you are using is affecting your main div for the top section #carttrans make sure on this div that your css is marked as important for the top 0px !important so that the jquery won't be able to change it have a try and see if this works?

CSS add a fat "frame" around an IMG without changing IMG positioning

I have rows of thumbnails in a <div> with only a small margin/border/padding set. I'd like to add a 'focus' class to highlight one thumbnail on the page during a CSS transition, i.e. 'div.thumb.focus'
Is there any easy CSS Trick to wrap a frame around the 'div.thumb' WITHOUT re-positioning the div.thumb in the page?
The div.thumbs are all absolutely positioned within a container. And I want the frame to be THICKER than the margin/padding between div.thumb. It can live on a higher z-index, and partially cover neighboring thumbs, as long as the click events read the div.thumb.focus. An easy JQuery solution is acceptable.
// using LESS syntax
.container {
position: relative;
.thumb {
&.focus {
<need help here>
}
top: #top;
left: #left;
position: absolute;
margin: #margin;
padding: #padding;
img {
width: #width;
height: #height;
}
}
}
A few solutions come to mind (not Bootstrap specific):
Using a better box model, but it may affect your padding:
box-sizing: border-box
border: 10px solid red
Or using an hard inset shadow that'll look like a border:
box-shadow: inset 0 0 0 10px red
You could use an outline but it would overflow outside the box without affecting its dimensions:
outline: 10px solid red
Now, I'm not too familiar with LESS, so I've just done this in regular CSS.
There are a few options you could choose.
Add a Negative Margin
.thumb.focus{
margin-top: -4px;
margin-left: -4px;
border: 4px solid blue;
}
This may not be suitable for your case, however, as you already have a margin set. It may be useful for others though.
Add a Shadow
.thumb.focus{
box-shadow: 0 0 0 4px blue; //use inset if you want it inside the thumb
}
This could work well, but not if you want multiple colours/thicknesses on some sides.
Use box-sizing
.thumb.focus{
box-sizing: border-box;
border: 4px solid blue;
}
The main problem with this would be browser support.
Use Outline
.thumb.focus{
outline: 4px solid blue;
}
This has a similar issue to the box shadow I believe.

How to remove jQuery-ui dialog title bar?

I am trying to hide jQuery-ui dialog's title bar but keep the close button in the title bar visible. I have searched lots of post on stackoverflow like this one. In each post the title bar is hidden but the space taken by the bar is still there. I want to remove that space also but without removing the close button.
How can i do this?
Based on this answer:
Use .dialog("widget") option to locate the div wrapper for the dialog. The wrapper contains all the markup used for the dialog including header, title bar and close button; and the dialog content itself. Here is one way to invoke the method and hide the title bar:
$("#id").dialog({
autoOpen: false
}).dialog("widget").find(".ui-dialog-title").hide();​
You can then use CSS to eliminate unnecessary margin, border and padding. For example:
.ui-dialog-titlebar {
float: right;
border: 0;
padding: 0;
}
.ui-dialog-titlebar-close {
top: 0;
right: 0;
margin: 0;
z-index: 999;
}
Here is a demo based on above code plus it adds the necessary styles using jQuery.
If you want to remove the titelbar and keep the close icon using styles only, use the styles below. It shrinks the title bar to the size of the close icon and hides it behind. ui-icons_6e6e6e_256x240.png i created by lightening the ui-icons_222222_256x240.png image that jqueryui comes with.
.ui-dialog .ui-dialog-titlebar.ui-widget-header{background: none; border: none; height: 20px; width: 20px; padding: 0px; position: static; float: right; margin: 0px 2px 0px 0px;}
.ui-dialog-titlebar.ui-widget-header .ui-dialog-title{display: none;}
.ui-dialog-titlebar.ui-widget-header .ui-button{background: none; border: 1px solid #CCCCCC;}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close{margin: 0px; position: static;}
.ui-dialog .dialog.ui-dialog-content{padding: 0px 10px 10px 10px;}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon{position: relative; margin-top: 0px; margin-left: 0px; top: 0px; left: 0px;}
.ui-dialog .ui-dialog-titlebar .ui-state-default .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_6e6e6e_256x240.png");}
.ui-dialog .ui-dialog-titlebar .ui-state-hover .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_222222_256x240.png");}
The way I see it, you have 3 options.
Yes, eliminate the titlebar completely and add a custom one that you can style to match the default one, using absolute positioning should be the key.
If you have the time, extend (not overwrite) the _create method of the dialog https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L74 to do what you need
Work with CSS hackery to keep the titlebar there with a height of 0 for all elements but the close button.
Either one has their cons and pros, I would recommend #2 the best if you can, here's some info on how to work with widgets http://api.jqueryui.com/jQuery.widget/
This is How it can be done.
Go to themes folder--> base--> open jquery.ui.dialog.css
Find
Followings
if you don't want to display titleBar then simply set display:none as i did in the following.
.ui dialog.ui-dialog .ui-dialog-titlebar
{
padding: .4em 1em;
position: relative;
display:none;
}
Samilarly for title as well.
.ui-dialog .ui-dialog-title {
float: left;
margin: .1em 0;
white-space: nowrap;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
display:none;
}
Now comes close button you can also set it none or you can set its
.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: .3em;
top: 50%;
width: 21px;
margin: -10px 0 0 0;
padding: 1px;
height: 20px;
display:none;
}
I did lots of search but nothing then i got this idea in my mind. However this will effect entire application to don't have close button,title bar for dialog but you can overcome this as well by using jquery and adding and setting css via jquery
here is syntax for this
$(".specificclass").css({display:normal})

Adding a CSS Border on Hover and Removing It in jQuery

I'm attempting to add a class to a group of floated list items on hover using jQuery.
I add the class and then remove the added space from the newly-inserted border using margin:-4px so that the list items do not shift around.
That's my intention at least. it's not working. Here is a fiddle:
http://jsfiddle.net/NgXSc/1/
Note how the sibling list items shift on hover. The intended result is the very last list item where upon hovering, nothing moves.
Your margin problem is being caused because although you initially define the margin to be margin-right: 19px, you overwrite it with margin: -4px !important.
Also, there's no need to use jQuery for this - just use the :hover CSS pseudoclass.
I modified your code to produce your desired results:
HTML:
<nav id="cs-client-list">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</nav><!--end cs-client-list-->
CSS:
#cs-client-list { padding: 25px; }
#cs-client-list li {
background: yellow;
float:left;
margin: 0 19px 0 0;}
#cs-client-list li a {
text-indent: -99999px;
width: 111px;
height: 80px;
border: 4px solid transparent; /* use page's background color (ie #fff) if you want the border to display outside the box */
display: block; }
#cs-client-list li a:hover { border-color: #000; }
Preview: http://jsfiddle.net/Wexcode/NgXSc/26/
margin: -4px is not a relative change to 19px. It completely replaces it.
Figuring out that padding adds 4px to both the left and right, you want to subract 8 pixels from the margin and use margin-right: 11px for the .over class. This keeps the list items in their original positions.
See the change in code here: http://jsfiddle.net/NgXSc/21/
Set a transparent border (or set the border-color to the background-color of the element) on the non-hovered element equal to the width of the visible border on the hovered-over element. And remove the !important; it's not necessary, just use specificity:
#cs-client-list li a{float:left;display:block;text-indent:-99999px;height:80px;background-color:yellow;width:111px; border: 4px solid transparent;}
#cs-client-list li a.over{border:4px solid #000;cursor:pointer;}
Updated JS Fiddle
This does not need jQuery, not even in IE6...
Dont mess about with negative margins. Change your .over class to
#cs-client-list li a.over{ border: 4px solid #000; width: 103px; }
This is the quickest way to get your desired effect without applying a transparent border to the non-hover state li a elements.

Categories