I'm using Choosen and Twitter Bootstrap in my project. What I want to get is, to get choosen's dropdown over collapsible divs but it goes under other content. Here is jsfiddle
http://jsfiddle.net/tt13/CFbpt/5/
What am I missing? how to fix this problem?
This should take care of everything:
.collapse.in { overflow: visible; }
.chzn-drop { display: none; }
.chzn-container-active .chzn-drop { display: block; }
http://jsfiddle.net/Wexcode/7HLyZ/3/
Related
I am trying to make a navbar where brand image can be relocated when scrolling down like the example shown on http://www.agilent.com/home
I know how to addclass using jquery, but I don't know how to add an image when scrolling down or is there any other method to make this effect happen.
How can I achieve this effect? Thanks in advance!
You need to use two images. One on the heading and one on the nav.
This snippet will detect if the navbar is on top and add sticky class to a nav element.
$(window).scroll(function() {
if ($(window).scrollTop() > $("nav").offset().top) {
$("nav").addClass("sticky");
} else {
$("nav").removeClass("sticky");
}
});
When the nav element uses sticky class, it should display the nav logo.
nav .logo {
display: none;
}
nav.sticky {
position: fixed;
top: 0;
}
nav.sticky .logo {
display: inline;
}
jsfiddle demo
I want to add scrolling to the second part, it is "chat-messages" div in "chat-bar" div. I want JUST this "chat-messages" to make scrollable, leaving rest of the site with no any scrool. At this moment I have to scroll the whole site to see "input-row" div. It's quite working when i set overflow: auto to the "chat-bar" but then whole input-row is also included in scrolling. Please give me best css/html option how to resolve this problem, or give me simple javascript library.
jsfiddle link:
jsfiddle.net/o9vmfgpx/3
edit:
I made it working, but in some hacky way.
.chat-messages {
overflow-y: scroll;
-ms-overflow-style: none;
}
.chat-messages::-webkit-scrollbar {
display: none;
}
#-moz-document url-prefix() {
.chat-messages {
right: -5%;
padding-right: 3%;
}
}
Works on latest version of IE, EDGE, Chrome, Firefox and Opera (as 10.14.2016)
This should work.
body {
overflow:hidden;
}
.chat-messages {
overflow:scroll !important;
}
Try adding the below css?
.chat-messages {
height:200px;
overflow:scroll;
}
Try this.
.input-row {
position: fixed;
bottom: 10px;
left: 10px;
}
I have a dropdown menu.
I want to move my icons to the far right. I've tried
if (item.logo) {
result.find("a")
.addClass("ui-menu-item-icon")
.css("background-image", "url(" + item.logo + ")")
.css('background-repeat', 'no-repeat')
.css('background-position', 'top right')
.css('background-size', '28px 19px');
}
I couldn't seem to make it work.
Here is my
JSfiddle
Any hints ?
Add this to your CSS
.ui-menu-item-icon {
display: block;
}
Two things you can try
Add padding at right side so your image moves a little further.
Make your link display: block; not sure if it will work. Wont if image is not in flow.
Add this to your CSS, to make the icons appear right after the text.
a.ui-menu-item-icon {
padding-right: 30px;
}
https://jsfiddle.net/4sv3cpeu/2/
Other option:
Add this to make the Icons appear on the far right end of the option
a.ui-menu-item-icon {
display: block;
}
https://jsfiddle.net/4sv3cpeu/4/
If your a elements are in a list, try adding a width to both of them. In this case I assume your dropdown element (list item's parent) has a fixed width, so adding a width: 100%; should do the trick. For example:
li {
width: 100%;
}
li a {
display: block;
width: 100;
}
The a element needs to be displayed as a block to be given a size.
Add this to your css
li a {
display: block;
}
Demo : https://jsfiddle.net/s75o5xo6/
I have web app for making music from javascript. But I have problem with display: none of my .musicBox class.
Here are the index.html code with all important styles & scripts.
My index.html file on CodePen
#media screen and (max-width: 520px) {
.rotateDevice {
display: block;
}
.toneBox {
display: none;
}
}
When I resize the window to under 520px width it will 'display: none' my color Boxes. But why it didn't?
There is something missing above this media query.
Remove the .a above it.
try
.toneBox {
visibility: hidden;
}
Try out this may be it would help you:
Visibility: none;
I'm currently working on my new website and I need help.
When you open the site you get a landing page with icons (sort of menu bar) and you can't scroll.
When you click, tadaaaa it is a one page design. I am thinking about a javascript/jquery kind of script.
Current css:
body {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
overflow: hidden;
}
Example jquery:
$("nav").on("click", function(e) {
$('html, body').css('overflowY', 'visible');
}
I am quite a noob about this so don't blame me for a weird kind of script. I am trying to learn javascript and jquery.
You should do this by adding a class to your page to indicate its state, and then change the styling in your stylesheet.
HTML:
Show whole page
Congratulations. You are viewing the page
JS:
$(document).ready(function () {
$("#loadpage").click(function () {
$("html").addClass("loaded");
});
});
CSS:
#page { display: none; }
html.loaded #page { display: block; }
html.loaded #loadpage { display: none; }
Demo:
http://jsfiddle.net/FHPzb/