Hi all I want to know if the following is possible. I am using bootstrap frame work to build a simple webpage. In the CSS I have borders on certain div elements showing as gray however when I view from the mobile a few of these divs are hidden and the border property looks very out of place. I would like to know if there is a way to target CSS elements with bootstrap so if a page is re sized to mobile the border color changes to black or doesn't show at all.
Here is a sample of my code.
HTML
<div class="container">
<!--Strt of row-->
<div class="row">
<!--leftdiv1-->
<div class="col-sm-6" id="left1">
<h3 class="text-center" id="main">XXXXXXX</h3>
<p class="text-center">XXXX & XXXXX</p>
</div>
<!--rightdiv1-->
<div class="col-sm-6 hidden-xs contacts" id="right1">
<ul>
<li><a id ="print" href="#"><span class="glyphicon glyphicon-print"></span> Print</a></li>
<li><span class="glyphicon glyphicon-save-file"></span> Download</li>
<li><a id="contact" href="#"><span class="glyphicon glyphicon-earphone"></span> Contact</a></li>
</ul>
</div>
</div>
CSS
#left1 {
border-right: dashed grey 3px;
border-bottom: dashed grey 3px;
height: 100px;
overflow: auto;
}
#right1 {
border-bottom: dashed grey 3px;
height: 100px;
overflow: auto;
}
Yes, as I see you are trying to hide the col-xs so the size is <768px See Bootstrap CSS So you would add a #media in your css. This will work:
#media (max-width: 768px) {
#left1 {
border-right: 0px;
border-bottom: 0px;
}
#right1 {
border-bottom: 0px;
}
}
You can put an extra class on the element for example: hidden-xs. It is build in bootstrap.
http://getbootstrap.com/css/#responsive-utilities
Related
I'm using a collapsible bootstrap navigation. I made a few changes to a .css so that navigation links look like tabs. Positioning links at the bottom of header using a margin property did not work, because when zooming in and out navigation was sometimes pushed up or down by a pixel. Instead I set a position property to absolute to place navigation at the bottom of the hader. Now when I click on the navbar button. Navigation is pushed upwards instead of downwards and header is not expanding.
Here's my HTML:
<div class="header-inner clearfix">
<nav class="navigation pull-right" role="navigation">
<div class="navbar pull-right">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
</a>
</div>
<div class="nav-collapse in collapse" style="height: auto;">
<ul class="nav menu nav-pills">
<li>
<a>link1</a>
</li>
<li>
<a>link2</a>
</li>
<li>
<a>link3</a>
</li>
</ul>
</div>
</nav>
</div>
And here is my CSS:
.nav-pills > li > a {
border-width: 2px 2px 0 2px;
border-radius: 5px 5px 0 0;
border-color: #cc0000;
border-style: solid;
padding: 8px 12px 8px 12px;
}
.header-inner {
border-bottom: 2px solid #cc0000;
position: relative
}
.navigation {
position: absolute;
bottom: 0;
}
Im hoping this can be solved setting a margin of navigation using different units than pixels if not, how can I change the .js file.
Thanks I already solved a problem. When a screen width is smaller than 900 px, when instead of navigation bar a navigation button apears I just set a position property to static and now everithing works fine.
Thanks anyway
I have a html page like this and when I hover the volume button which located on the right, the div box which contains the Upload and Delete function should be displayed beside with the volume icon. What I expect is when I hover the volume icon, the Upload, Delete and volume icon should be displayed in the same line, like picture below
and grey panel will not be overflowed out of the box.
Does anyone have an idea how to set again the stylesheet to show this situation ?
make .prompt-audio-control display inline-block when they view on hover and not inline in order to fit next to each other:
.prompt-audio:hover .prompt-audio-control {
display: inline-block;
}
Updated Fiddle: https://jsfiddle.net/y2ee6fsc/2/
Your elements that appear after hover had different value for display property. You can make them inline-block.
In order to make them on one line without changing html structure, you could remove overflow: hidden from .btn-file.
https://jsfiddle.net/wca36rqu/3/
i did some changes on your html and css maybe it will be help for you.
https://jsfiddle.net/hamzanisar/j8p44she/
.btn-file {
position: relative;
overflow:hidden;
margin:0 0 -2px 0;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: alpha(opacity=0);
opacity: 0;
cursor:pointer;
display: block;
}
.PlayPromptIcon, PlayPromptIcon:visited {
color: grey;
}
.PlayPromptIcon:hover {
text-shadow: 1px 1px 10px black;
}
.prompt-audio-control {
display: none;
padding: 0;
margin: 0;
}
.prompt-audio:hover .prompt-audio-control, .prompt-audio:hover .nm li:nth-child(1), .prompt-audio:hover .nm li:nth-child(2) {
display:inline-block;
}
.nm{
margin:0px;
}
.nm li:nth-child(1), .nm li:nth-child(2){
display:none;
}
HTML
<div class="container-fluid">
<div class="input-group prompt" col-xs-2> <span class="input-group-addon">Prompt</span>
<input type="text" class="form-control tts-prompt" placeholder="Text to Speech Prompt!!" />
<span class="input-group-addon prompt-audio">
<ul class="list-unstyled list-inline nm">
<li>
<a href="javascript:;" class="prompt-audio-control" >
<div class="btn-file">
<input type="file" accept="audio/wav|audio/pcm|audio|vox" />
<span> Upload </span>
</div>
</a>
</li>
<li>
<a class="btn-link prompt-audio-control" type="file"> <span> Delete </span> </a>
</li>
<li> <a class="PlayPromptIcon" target="_blank"> <span class="glyphicon glyphicon-volume-up"></span></a> </li>
</ul>
</span> </div>
</div>
I'm creating a responsive website using bootstrap.
When the browser window narrows, the columns should collapse.
The issue is, I want dropdowns to appear when I click on heading.
I've positioned the menu absolute so I can put the z-index above.
In full width, it looks fine:
When columns stack, the menu is pushed to the left
How can I position the menu beneath the centered menu heading text? One way I can think of is to set the position of the dropdown menu to the x y position of the heading text. Is that the only way?
<div class="col-md-1">
<div id="heading_practice">
<a href="#">
<h4>Practice Areas</h4>
</a>
<div class="menu_practice">
<p>test</p>
<p>test2</p>
</div>
</div>
</div>
<div class="col-md-1">
<div id="heading_about">
<a href="#">
<h4>About Us</h4>
</a>
<div class="menu_about">
<p>test</p>
<p>test2</p>
<p>test3</p>
</div>
</div>
</div>
CSS
/*Menu*/
#home, #heading_practice, #heading_about, #heading_contact {
position: relative;
text-align:center;
}
.menu_practice, .menu_about, .menu_contact {
position: absolute;
padding: 10px;
border: thin solid Silver;
background: rgba(0, 0, 0, 0.9);
color: white;
z-index: 1;
margin-left:20px;
text-align:left;
}
If you're using Bootstrap, then why not use Bootstrap-Dropdowns?
http://getbootstrap.com/components/#dropdowns
It also seems like you're building a navbar there, Bootstrap has that integrated aswell with well-working support for Dropdowns:
http://getbootstrap.com/components/#navbar
I am making a demo of pop up screen as show in image. I have some issue my triangle is look "v"..how to come pop up above the option button? can we make same as in show in above. My pop up come below the button. it should come above the button ?
.triangle {
position: absolute;
top: -15px;
left: 50%;
margin-left: -15px;
border-bottom: 15px solid #002952;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
}
.menu{
height:200px;
overflow:auto;
}
}
http://jsfiddle.net/jHjDL/1/
So I looked at your fiddle and this is the best edit I can come up with:
<div style='position:relative;'>
<div style='position:fixed; bottom:0px;'> Options
<div data-role="popup" id="menuPopUp">
<ul data-role="listview" class="menu">
<li data-icon="false">Edit
</li>
<li data-icon="false">Call
</li>
<li data-icon="false">SMS
</li>
<li data-icon="false">Edit
</li>
<li data-icon="false">Call
</li>
<li data-icon="false">SMS
</li>
</ul>
<div class="triangle"></div>
</div>
</div>
</div>
I took the liberty of adding some wrappers and pushing the options link to the bottom of the page so that the menu can pop overtop of it. JQuery UI handles this by itself, nothing special needs to be done to make it show up above the link, the link just has to be in the page somewhere that the menu can pop over.
After that I made a small change to the css to invert the arrow:
.triangle {
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -15px;
border-top: 15px solid #002952; /*<-- make it border top to make a down arrow */
border-right: 15px solid transparent;
border-left: 15px solid transparent;
}
Now it seems to do what you want it to do. One thing I have noticed is that when you re-size the window the position of the menu gets all funny. I think this is a quirk of the UI popup and can only be fixed if you use custom CSS to display it.
I'm trying to add a carousel to my site. I have looked around at the plugins available and come across TinyCarousel which is quite simple and light - what i'm after.
I have plugged in their code and followed their setup instructions and can successfully compile and run a carousel with some images.
A couple of issues im facing:
1) How can i modify their JS or CSS so that the size of the image is not so small? I have tried chaging the height and width in the #slider1 .viewport class, but no luck.
2) Once i can enlarge my images, i would like to add some kind of DIV that lays over the image, that contains a couple 'more info' hyperlinks to other pages on my site. The images in the carousel should still rotate, but the 'more info' DIV to stay put.
3) Is there any way i can place the NEXT and PREV buttons on top of the image? Like this - http://wowslider.com/slider-jquery-elegant-linear-demo.html When the user hovers over the carousel, the NEXT and PREV buttons fade in.
I have attempted it here, please see my jsFiddle below
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<body>
<section id="welcome">
<form method="post">
<div>
<section>
<fieldset>
<ul>
<div id="slider1">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<li>
<img src="http://www.freestanding-kitchens.com/data/usr_001_collections/tables___chairs.jpg" />
</li>
<li>
<img src="http://www.pagazzi.com/wp/wp-content/uploads/2012/06/tables-and-chairs1.jpg" />
</li>
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>
</ul>
</fieldset>
</section>
</div>
</form>
</section>
</body>
JS:
$(document).ready(function () {
$('#slider1').tinycarousel({
pager: true,
interval: true
});
});
Thanks
Update Following resolution of issues 1
New jsFiddle - http://jsfiddle.net/ginarann/JtfDd/15/
ok these are the changes you need to do if you are setting up 640 x 640 sizes images.
#slider1 .overview li {
float: left;
margin: 0 20px 0 0;
padding: 1px;
height:640px;
border: 1px solid #dcdcdc;
width: 640px
}
#slider1 .viewport {
float: left;
width:640px;
height: 640px;
overflow: hidden;
position: relative;
}
2 .
go like this.
for CSS.
#slider1 .overview li span{
position: absolute;
background-color: rgba(0, 0, 0, 0.22);
left: 0px;
bottom: 0px;
right: 0px;
height: 50px;
}
#slider1 .overview li {
float: left;
margin: 0 20px 0 0;
padding: 1px;
height: 400px;
border: 1px solid #dcdcdc;
width: 400px;
position :relative;
}
for HTML
<ul class="overview">
<li>
<img src="http://www.freestanding-kitchens.com/data/usr_001_collections/taes___chairs.jpg" />
<span>Image description here 12345</span>
</li>
<li>
<img src="http://www.pagazzi.com/wp/wp-content/uploads/2012/06/tables-d-chairs1.jpg" />
<span>Image description here 2</span>
</li>
</ul>
the html for buttons is already set up
you only need the css
#slider1 .buttons.prev{
background-color:#333;
}
#slider1 .buttons.next{
background-color:#333;
}
customize these styles accordingly..