I am having trouble with getting a particular jQuery library (Windy Slider) to auto-size. I have uploaded the code into CodePen which can be found here http://codepen.io/zyoung0206/pen/rLmXbV
The problem I am having is that, when you click the wireframe & mockups blue circle button, a window should popup with a image slider inside it. These container codes are:
.windy-demo {
/*width: 1024px;*/
width: 60%;
margin: 40px auto;
color: #aaa;
}
.windy-demo ul.wi-container {
/* width: 1044px;
height: 788px;*/
width: 60%;
height: 80%;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
which can be found on top of the CSS portion of the CodePen.
What I am accomplish is to make these containers 60% width of the screen, and if the image inside is too big (let's say, the container is 800px width but image is 1024px), then the image to resize to fit inside the container.
I have tried manually setting the width of the containers (which resulted in fixed pixels of window size) and then tried setting it as width: 60%, but it is not working out well for the images that are larger than the container.
I think img { width: 100%; height: auto; } will do it. I have just played around with your fiddle and as far as I can see, this should work.
I have just updated my answer, these are the first lines of CSS that worked for me, rebuilding your example locally:
.windy-demo {
width: 60%;
margin: 40px auto;
color: #aaa;
}
.windy-demo ul.wi-container {
padding: 0;
margin: 0;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.windy-demo ul.wi-container li {
display: block; /* Make list items to block in order to stretch 100% */
overflow-y: hidden; /* Hides the scroll bar y-axis */
}
.windy-demo ul.wi-container li img {
width: 100%; /* makes the image fit 100% of available space */
height: auto;
}
.windy-demo h4 {
padding: 0 10px;
line-height: 26px;
margin: 0;
}
.windy-demo ul.wi-container li {
padding: 0;
border: 10px solid #fff;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#slider ......
Related
index.html
<div name="MainContent" id="MainContent" class="MainContent">
</div>
index.sass
body, html
border: none;
outline: none;
background-color: #FFF;
color: #000;
margin: 0 0 0 0
#MainContent
border: none;
outline: none;
position: relative;
background-color: #000;
color: #FFF;
margin: -250px 0 0 100px;
float: left;
width: 2000px;
min-width: 2000px;
max-width: 2000px;
height: 500px;
min-height: 500px;
max-height: 500px;
top: 50%;
Horizontal scrolling is working, however, only by using the bar at the bottom of the page. If i attempt to use the scroll wheel the page will not scroll. Any ideas as to why that is and how to make that work?
To remove your body scroll property, add overflow:hidden to your html or body styles.
body,html {
overflow:hidden;
}
To make your div scrollable, set its width to 100%, and enable horizontal scrolling by adding overflow-x:auto. Now the width of the div will be 100% to the body , and if the content inside the div has higher width, then the scroll will get enabled.
#MainContent {
width:100%; /* you can even set a static width here, which could be less than the body width*/
overflow-x:auto;
}
NB: Please REMOVE the min-width:2000px and max-width:2000px from the #MainContent style
I want to put the canvas defined by the red border over the div (black border) that is currently under it. It should have the same size as the div. I also want to be able to click on buttons and select text that is under the canvas.
I have been trying to do this for 2 days now and can't figure it out...
<canvas id="canvas">
</canvas>
<div class="jumbotron">
<div class="container-fluid" id="canvas-container">
</div>
</div>
current css (I know it's a mess, but I have been trying a lot of things)
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
margin-top: 50px; /* Required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.container .text-muted {
margin: 20px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
.jumbotron
{
text-align: center;
}
#canvas-container
{
padding: 0;
//position: absolute;
border: 1px solid black;
}
.jumbotron
{
padding: 0;
#position: absolute;
}
canvas {
border: 1px solid red;
}
You need to specify:
canvas {
pointer-events:none;
}
Here is a js fiddle where you can test clicking on the area where the black box is under the red box:
https://jsfiddle.net/1n1bp7m9/1/
I have a page with 2 floating div: one for the page content and another for a widget sidebar. The page content max-width is set to 70% and the width of the sidebar is a fixed value of 275px +padding. When I'm resizing down my page (playing with the browser window size), everything looks right, until the sidebar takes more than 30% of space and goes under the left div.
When resizing the browser window, is it possible to have the right div keep its 275px width and make it squash the left div so it goes from a max-width of 70% down to 5% if necessary?
Here's my testing website if you want to see what I'm talking about exactly: http://mywptestsite.is-great.org/page-height-and-sidebar/
#primary {
float: left;
clear: none;
max-width: 70%;
margin-right: 22px;
}
.sidebar .entry-header,
.sidebar .entry-content,
.sidebar .entry-summary,
.sidebar .entry-meta {
width: 100%;
padding: 0 20px 0 50px;
}
.site-main #tertiary {
float: right;
clear: none;
width: 256px;
position: static;
height: auto;
}
.site-main .widget-area {
padding: 30px 20px 0 0;
float: none;
width: 100%;
}
I would use display: table and table-cell for that.
JSFiddle: http://jsfiddle.net/maximgladkov/M3wP8/
HTML
<div id="container">
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
</div>
CSS
#container {
display: table;
width: 70%;
margin: 0 auto;
}
#content, #sidebar {
display: table-cell;
}
#content {
max-width: 70%;
border: 1px solid blue;
}
#sidebar {
width: 254px;
border: 1px solid red;
}
I need to show image slide show for news which can have one or more than one image displayed.
If it has just one image then Navigation bar should hide, This feature is built in.
But i am facing problem with moving the caption of the image exactly under the Image. I am able to change the bottom margin for css p.bjqs-caption to -30px. which moves the caption but hides under something and is not visible i tried all options like z-index and other stuff but nothing seem to work.
I would appreciate help in this regard.
Slider : http://www.basic-slider.com/
I tried to setup fiddle but demo on fiddle is not working link http://jsfiddle.net/rUXAt/1/
UPDATE : Working fiddle http://jsfiddle.net/rUXAt/2/
Check working fiddle
p.bjqs-caption {
bottom: 0;
color: #000000;
display: block;
margin: 0;
padding: 2%;
position: absolute;
width: 96%;
}
http://jsfiddle.net/rUXAt/2/
try this one,
put height for ul and li height: 355px !important; and color to p.bjqs-caption
p.bjqs-caption {
background: none repeat scroll 0 0 #CCCCCC;
}
p.bjqs-caption {
bottom: 0;
color: #000000;
display: block;
margin: 0;
padding: 2%;
position: absolute;
width: 96%;
}
ul.bjqs {
display: none;
height: 355px !important;
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
li.bjqs-slide {
display: none;
height: 355px !important;
position: absolute;
}
I have a real simple page that has a header, footer, body, and left and right nav's.
All of them together make a nice rectangular page thats 100% of the width.
All made using div's in a css sheet.
I have 20 image thumbnails in the body and when the page is resized they push my footer out of place.
To fix this i would like to add a scrollbar to the body div.
I have already done this with overflow-y: auto;
However,
Adding the scrollbar seems to add some space to the right side of the body, forcing it to be placed underneath the left and right nav's blowing everything up. Please Help.
#headerElement {
width: 100%;
height: 50px;
border: 2px solid #000000;
background-color: #F8AA3C;
}
#bodyElement {
margin-left: 10%;
width: 80%;
color: blue;
height: 400px;
background-color: #F8883C;
border: 2px dashed #F8AA3C;
overflow-y: auto;
}
#leftNavigationElement {
float: left;
width: 10%;
height: 400px;
border: 2px dashed #FF0000;
background-color: #8F883C;
}
#rightNavigationElement {
float: right;
width: 10%;
height: 400px;
border: 2px dashed #0000FF;
background-color: #F888FC;
}
#footerElement {
clear: both;
border: 2px dashed #00FFFF;
height: 50px;
width: 100%;
}
Because the scroll bar is not inside the width of the div but still takes up space, you need to give it some space or negative margins. I would guess a width of 18 pixels for IE, and since you cannot set that in IE, that will have to be your default.
::-webkit-scrollbar { width: 18px; margin-right:-18px; }
::-moz-scrollbar { width: 18px; margin-right:-18px;}
::-o-scrollbar { width: 18px; margin-right:-18px;}
You'll need to either restructure the page so it flows better or force the scrollbar with {overflow-y: scroll} and adjust widths accordingly so the layout doesn't break.