I am having several issues getting bxslider to work the way I am wanting. First and most importantly, it does not load unless I bring up the developers tools. I have no idea why this is the case.
I have all three of the js files on my page
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.easing.1.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.fitvids.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
As well as the css page for bxslider.
My second issue is I can't figure out the DOM to get this style the way I am wanting. All I want to be able to do is controls the margins/padding between images and the top and bottom margins for this slider, to enable me to control the space around it.
I'm not sure what I am doing wrong:
.slider4 {
padding: 100px auto;
border: none;
}
.bx-wrapper {
width: 100%;
border: none;
}
.bx-viewport {
width: 85%;
border: none;
}
.slide {
margin: 0 100px;
}
Related
I am trying to make my website responsive with mobile phones but for some reason when the screen gets small enough there is whitespace on the right side of the phone in which the html page is not the full width, ive tried adding css which include :
html
{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-width: fit-content;
position: absolute;
}
but currently the page looks like this:
https://i.stack.imgur.com/Axz5O.png
any idea how to fix this?
It's hard to tell without knowing all child elements.
You can try adding an outline to all tags like
* {
outline: 1px solid green;
}
and check which element is overflowing
I'm working on a project in school where I want some sort of slideshow on the webpage. I've gotten to a place where I'm not sure how to proceed. Here is what I got so far:
body {
background-color: #252525;
}
#wrapper {
width: 90%;
margin: 0 auto;
padding: 2%;
}
#images {
width: 100%;
height: 300px;
text-align: center;
overflow: auto;
}
#container-1 {
display: inline-block;
background-color: #fff;
width: 100px;
height: 300px;
transition: .5s ease-in-out;
}
#container-1:hover {
background-color: #189fff;
width: 80%;
height: 300px;
}
.container {
width: 100px;
height: 300px;
background-color: #fff;
display: inline-block;
transition: .5s ease-in-out;
}
.container:hover {
background-color: #189fff;
width: 80%;
height: 300px;
}
<div id="wrapper">
<div id="images">
<div id="container-1"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>
</div>
What I want this to do is for whenever I hover one of these images (or divs if you will), it will expand and show the whole image. There are two images, one clipped, and one that is the whole image. (Maybe thats a bad thing?)
The class container is just temporary to get an image of how it will look and give the other divs a background color. In #container-1:hover, the width is not the exact one I'm going to use. It might differ from the images I'm using.
Also if I don't use overflow: auto; the other divs will be pushed below the others, which is something I don't want.
The code in a way works as I want it. The only problem I got really is that when I hover one of the divs, it will push the other ones to the side, creating a conflict. Is there a way to make that not happen? Maybe a way to reduce the width of the other divs when the current div is being hovered on?
I just recently started with JavaScript so I'm nowhere close experienced with it, but I'm open for suggestions, but we are not allowed to use jQuery or anything like that sadly.
Here is a fiddle of it: jsfiddle
Your problem is that when one of the elements is hovered and expands, the sum of all elements exceeds the width of the container, and the one or two last elements are pushed below the others (into the next line).
To avoid that using only CSS, you have to choose width values where three default elements and one expanded (hovered) elements together don't exceed 100% of the container, like in this fiddle:
https://jsfiddle.net/kju94h1n/
To make non-hovered elements narrower when another element is hovered would require Javascript.
I get big areas of gray that never fill in - even if I zoom. You can view a sample here - http://birdbrain.vernerwebstudio.com/professional-development/. This was working fine before, but all of a sudden one day, it just started doing this. I've removed any custom functionality that was added thinking that was the problem. Any ideas?
You've set some styling in the style-custom.css file which affects the map's images (<img> elements):
#pln-map .gm-style-iw img, #pln-map .gm-style img {
height: 145px;
width: 145px;
border-radius: 50%;
display: block !important;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
Most important is: border-radius: 50%;
I'm trying to figure out how to decrease the size of the buttons on the kendoSlider (for that matter, the slider is also too large).
Their documentation doesn't really make any mention of it.
Why do I want to do this? I've recently added it to my footer and the buttons are so big that it's bumped up the size of my footer entirely. I'd rather decrease the button size instead of completely changing the size of my footer.
I would assume it's something with the CSS for the slider, but I haven't had any luck with that so far.
Here's an image to demonstrate what I mean:
if the Buttons to big, why just hide them?
With
showButtons: false
in the configuration.
The size of the Buttons you can change via css. For example:
.k-slider .k-button, .k-grid .k-slider .k-button {
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
/* new */
border: 1px solid red;
width: 20px;
height: 20px;
}
.k-slider .k-button .k-icon {
margin-top: 1px;
vertical-align: top;
}
Inspect the HTML element with chrome devtools or firefox.
I think the "size" of the slider you can adjust with this class:
.k-slider-wrap {
width: 100%;
height: 100%;
}
For the sprite-size eventually this helps out.
Or just creatte your own one.
look this:
When the pointer is on the image I want a small dark rect at the bottom of this image with some text. How can I do this? Maybe with jquery?
Thanks guys.
You can achieve this many ways. Depending on the structure of your page, you could accomplish this with a couple of CSS classes.
HTML:
<div class="image_hover"><span>Text</span></div>
CSS:
.image_hover { background-image: url("path/to/image"); height: 95px; width: 270px; }
.image_hover span { display: none; }
.image_hover:hover span { display: block; position: relative; top: 80px; width: 270px; text-align: center; background-color: white; border: 1px solid black; height: 15px; line-height: 15px; }
You would need to make some updates based on your particular situation. Here is a working example on jsbin. This solution hides the text by default, and when the user hovers over the div, the :hover class will cause the text to be displayed.
You could also use jQuery to either add or show the div onmouseover.
Yeah, you can easily use jquery to achieve that.
If you want to learn the whole process and do it yourself, take a look at this - Sliding Boxes and Captions with jQuery
Or take a look at a few plugins for achieving the same effect - 10 Stylish jQuery caption plugins