I'm in bit of a pickle here.. So I have rows of divs, think of them as mini boxes. I'm able to scroll through them within a specified width/height area. using : http://manos.malihu.gr/jquery-custom-content-scroller
Now, within one of those Div, I have more content that I'd like to scroll within that Div. And that is where the problem arises. No matter what I do, I just can't achieve it.
Here is an example skeleton:
<style type="text/css">
.rows{
margin:50px auto; width:400px; height:405px; overflow:auto;
}
.row{
background: lightblue; height: 370px; width: 320px; margin: auto;
padding: 10px 10px 10px 10px; margin: 10px 10px 10px 10px;
}
.column{
float:left;
}
.columns{
margin:50px auto; width:800px; height:405px;
}
</style>
<DIV id="container">
<DIV class="columns">
<DIV class="column">
<DIV class="rows"> <div class="row"></div><div class="row"></div><div class="row"></div> </DIV>
</DIV>
<DIV class="column">
<DIV class="rows"> <div class="row"></div><div class="row"></div><div class="row"></div> </DIV>
</DIV>
<DIV class="column">
<DIV class="rows"> <div class="row"></div><div class="row"></div><div class="row"></div> </DIV>
</DIV>
</DIV>
</DIV>
<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery-ui-1.8.21.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/jquery.mCustomScrollbar.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$(".rows").mCustomScrollbar({
scrollButtons:{ enable:false }
});
});
</script>
====================
To clarify further, within the div class "row", I'll have lets say a long paragraph that needs to be scrolled within that box.
Thanks
======================
JS/CSS links:
http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js
http://manos.malihu.gr/tuts/custom-scrollbar-plugin/jquery.mousewheel.min.js
http://manos.malihu.gr/tuts/custom-scrollbar-plugin/jquery.mCustomScrollbar.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js
http://manos.malihu.gr/tuts/custom-scrollbar-plugin/jquery.mCustomScrollbar.css
Related
I am currently coding a pipeline WebApp in JS/JQuery.
To move my block I use JQuery.draggable. But I would like to be able to select my block with one click and to move it to an other point just by an other click.
Has anyone already done this?
Have a great day! :)
Consider the following example.
$(function() {
function moveItemTo(t) {
$(".selected").detach().removeClass("selected ui-state-highlight").appendTo(t);
}
$(".item").click(function() {
$(this).toggleClass("selected ui-state-highlight");
});
$(".target").click(function(e) {
e.stopPropagation()
moveItemTo(this);
});
})
.item {
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
.target {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
}
.selected {
opacity: 0.65;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="ui-helper-clearfix">
<div class="item ui-widget-content">
<p>1. Click Me</p>
</div>
<div class="item ui-widget-content">
<p>2. Click Me</p>
</div>
<div class="item ui-widget-content">
<p>3. Click Me</p>
</div>
<div class="item ui-widget-content">
<p>4. Click Me</p>
</div>
<div class="item ui-widget-content">
<p>5. Click Me</p>
</div>
</div>
<div>
<div class="target ui-widget-header">
<p>Target 1</p>
</div>
<div class="target ui-widget-header">
<p>Target 2</p>
</div>
<div class="target ui-widget-header">
<p>Target 3</p>
</div>
</div>
This does not use any of the jQuery UI, except for CSS. Clicking an Item selects it. Clicking a Target Moves it to that target.
<div class="row">
<div class="col-lg-8">
//Content
</div>
<div class="col-lg-4">
//Content
</div>
</div>
My design is the first column is longer than the second one.
I want while scrolling if the second column data is over, I want the second column to be fixed at that time.
Look like position: sticky is what you need:
#first {
background-color: red;
height: 500px;
}
#second {
background-color: green;
height: 50px;
position: -webkit-sticky;
position: sticky;
top: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-8" id="first">
First col
</div>
<div class="col-4" id="second">
Second col
</div>
</div>
On clicking or hovering over a div,it should display the another div next to it,like option it must not be vertical like drop down,it must go on horizontally
There are multiple ways to do it, but aligning div horizontally is done using css, it has nothing to do with hover events. Try to understand the below code.
I am showing in 2 ways here
(div1,div2) using css
(div3,div4) using javascript
Link: https://github.com/helloritesh000/how-to-display-another-div-element-next-to-the-first-div-element-horizontally-by
<!doctype html>
<html>
<head>
<style type="text/css">
.div{
width: 200px;
height: 30px;
float: left;
}
.parent1 .div1{
background-color: red;
}
.div2{
background-color: cyan;
display: none;
}
.parent1 .div:hover + div{
display: block;
}
</style>
</head>
<body>
<div class="parent1">
<div class="div div1">
</div>
<div class="div div2">
</div>
</div>
<div style="clear: both;"></div>
<div class="parent2">
<div class="div div3" id="div3" onmouseover="div4.style.visibility='visible'" onmouseout="div4.style.visibility='hidden'" style="background-color: blue;">
</div>
<div class="div div4" id="div4" style="background-color: #ccc;">
</div>
</div>
<script>
div4.style.visibility='hidden'
</script>
</body>
</html>
This is PSD(what i wanna do):
This is HTML:
.bg{
background:red;
height:60px;
}
.container{
max-width:360px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-5 bg">
</div>
</div>
Bg class is the logo section. Help
You need to adjust your structure. You have to use container-fluid (to go full width) and use row inside container like this:
.bg {
background: red;
height: 60px;
border-radius:0 50px 50px 0;
}
.content {
border:1px solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-5 bg">
</div>
<div class="col-6 content">
the remaining content goes here
</div>
</div>
</div>
You can try :before pseudo selector like below
.bg {
background: red;
height: 60px;
border-radius: 0 30px 30px 0;
}
.container {
max-width: 360px;
}
.bg:before {
content: "";
position: absolute;
background: red;
top: 0;
bottom: 0;
left: -1000px;
right: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="col-5 bg">
</div>
</div>
Remove container class to get end to end result and better you use row class
.bg{
background:red;
height:60px;
}
.container{
max-width:360px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-5 bg">
</div>
</div>
I am trying to use CSS to center the ASlider Jquery plugin (http://varunnaik.github.io/A-Slider/) which I have embedded into the HTML code for my website. For the life of me I can't figure out how to do it!
It seems adamant that it wants to stay on the left side of my page. I have tried using the float and display CSS elements; neither of them did anything. I even tried using margin and padding, and still nothing happened. Hell, I was desperate enough to see if text-align: center; would work but that didn't do anything either.
Here is the script in CSS and HTML to include the ASlider:
.aslider {
margin: auto;
float: center;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="a-slider/aslider.js"></script>
<!--<div id="moveslider">-->
<div class="aslider" data-hide-controls>
<div class="aslide" data-duration="5">
<img src="images/pic1.jpg" width="550px" height="300px">
</div>
<div class="aslide" data-duration="5">
<img src="images/pic2.jpg" width="550px" height="300px">
</div>
</div>
<!--</div>-->
float: center; is not valid so you can remove it from .aslider. All you need to do is add a width to .aslider so that margin: auto; takes effect.
.aslider {
margin: auto;
width: 550px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="a-slider/aslider.js"></script>
<!--<div id="moveslider">-->
<div class="aslider" data-hide-controls>
<div class="aslide" data-duration="5">
<img src="http://placehold.it/550x300" width="550px" height="300px">
</div>
<div class="aslide" data-duration="5">
<img src="http://placehold.it/550x300" width="550px" height="300px">
</div>
</div>
<!--</div>-->
Normally you can do it like this:
.wrapper{
width: 100%;
border: solid;
}
.center{
border: solid red;
width: 100px;
margin-left: auto;
margin-right: auto;
}
<div class="wrapper">
<div class="center">
This needs to be centered
</div>
</div>
Add your image width to your .aslide class
.aslider{
margin:0 auto;
}
.aslide{
width:550px;
margin:0 auto;
}
<---------------------------EDIT--------------------------->
Better yet use this:
.aslider{
width:100%;
text-align:center;
margin:0 auto;
}