I want to change the width and height of skitter jquery slider. I tried to override the default jquery.css by the width 100% with "important!
It is supposed to override the inline rules but i can't control the width and the height. What is the solution for this issue ?
$(function() {
$('#slider').skitter({
theme : 'square',
navigation : true,
label : false,
dots : false,
});
});
height: 600px;
position: relative;
color: #FFF;
overflow: hidden;
}
.skitter,.skitter-square{
width:1300px !important;
margin: 0
}
.container_skitter {
width:1300px !important;
}
.box_skitter {
width:1300px !important;
}
.box_skitter img {
width:1300px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/Normalize.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Poor+Story|Raleway" rel="stylesheet">
<!--
font-family: 'Montserrat', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'Poor Story', cursive;
-->
<link href="css/skitter.css" type="text/css" media="all" rel="stylesheet" />
<link rel="stylesheet" href="css/app.css">
<title>Santa</title>
</head>
<body>
<header id="main-header">
<div class="skitter" id="slider">
<ul>
<li>
<a href="#cut">
<img src="images/slide_1.jpg" class="cut" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
<li>
<a href="#swapBlocks">
<img src="images/slide_2.jpg" class="swapBlocks" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
<li>
<a href="#swapBarsBack">
<img src="images/slide_3.jpg" class="swapBarsBack" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
</ul>
</div>
</header>
<!--Scripts-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.skitter.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
As you can see, I can't override the inline style.
You may just override the width of slider as well as corresponding image width.
Fiddle : http://jsfiddle.net/sumeshnu/5n9yz8tg/3/
.skitter,.skitter-square{
width:1300px !important;
margin: 0
}
.container_skitter {
width:1300px !important;
}
.box_skitter {
width:1300px !important;
}
.box_skitter img {
width:1300px !important;
}
#slider{
max-width: 400px !important;
height: 800px;
}
div#slider img {
max-width: 400px!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/skitter-slider#5.1.4/dist/jquery.skitter.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/Normalize.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Poor+Story|Raleway" rel="stylesheet">
<!--
font-family: 'Montserrat', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'Poor Story', cursive;
-->
<link href="https://cdn.jsdelivr.net/npm/skitter-slider#5.1.4/dist/skitter.css" type="text/css" media="all" rel="stylesheet" />
<link rel="stylesheet" href="css/app.css">
<title>Santa</title>
<script>
$(document).ready(function(){
$('#slider').skitter({
theme : 'square',
navigation : true,
label : false,
dots : false,
});
});
</script>
</head>
<body>
<header id="main-header">
<div class="skitter" id="slider">
<ul>
<li>
<a href="#cut">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="cut" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
<li>
<a href="#swapBlocks">
<img src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png" class="swapBlocks" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
<li>
<a href="#swapBarsBack">
<img src="https://homepages.cae.wisc.edu/~ece533/images/girl.png" class="swapBarsBack" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
</ul>
</div>
</header>
</body>
</html>
The use of !important is considered as bad practice. You can simply adjust the Sliders size by setting the desired width to its container.
Here is a working example, where the container element <header> has a size of 50%:
$(function() {
$('#slider').skitter({
theme: 'square',
navigation: true,
label: false,
dots: false,
});
});
header {
width: 50%;
}
<link href="https://cdn.jsdelivr.net/npm/skitter-slider#5.1.4/dist/skitter.css" rel="stylesheet" />
<header id="main-header">
<div class="skitter" id="slider">
<ul>
<li>
<a href="#cut">
<img src="https://www.placehold.it/300x200/023" class="cut" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
<li>
<a href="#swapBlocks">
<img src="https://www.placehold.it/300x200/a04" class="swapBlocks" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
<li>
<a href="#swapBarsBack">
<img src="https://www.placehold.it/300x200/4a0" class="swapBarsBack" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
</ul>
</div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/thiagosf/SkitterSlideshow#5.1.4/dist/jquery.skitter.min.js"></script>
As suggested in the comments, you can also adjust the sliders width by setting a new max-width. Try to avoid the use of !important and overwrite existing rules with a higher specificity.
Here is a working example using #main-header > .skitter as selector:
$(function() {
$('#slider').skitter({
theme: 'square',
navigation: true,
label: false,
dots: false,
});
});
#main-header > .skitter {
max-width: 50%;
}
<link href="https://cdn.jsdelivr.net/npm/skitter-slider#5.1.4/dist/skitter.css" rel="stylesheet" />
<header id="main-header">
<div class="skitter" id="slider">
<ul>
<li>
<a href="#cut">
<img src="https://www.placehold.it/300x200/023" class="cut" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
<li>
<a href="#swapBlocks">
<img src="https://www.placehold.it/300x200/a04" class="swapBlocks" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
<li>
<a href="#swapBarsBack">
<img src="https://www.placehold.it/300x200/4a0" class="swapBarsBack" />
</a>
<div class="label_text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
See more
</p>
</div>
</li>
</ul>
</div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/thiagosf/SkitterSlideshow#5.1.4/dist/jquery.skitter.min.js"></script>
Related
I'm trying to create a page without scroll and I don't have much content to show on the page while I'm designing a web page I face an issue I try to search and try to follow the step to solve the issue but my issue does not solve so if anyone can help me
the issue I'm facing white space at the bottom of my page after the footer I'm sharing example code with my issue
screenshot of the issue
you can see white space right after the footer
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Document</title>
<style>
.img-thumbnail{
height: 150px;
width: 100%;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row d-flex flex-row flex-nowrap">
<div class="col-12 p-0">
<div class="card">
<h4 class="font-weight-light text-center">Bootstrap 4 Horizontal Scrolling Cards with Flexbox</h4>
<div class="card-body">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-lg-3 col-md-12 col-sm-12">
<img src="AboutUs.jpeg" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-lg-9 col-md-12 col-sm-12">
<h4>Lorem ipsum dolor sit, amet consectetur</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum, architecto magni? Rem, ipsam ipsa sit, maxime deserunt officiis consequatur cumque libero illum consectetur illo maiores iusto pariatur sapiente necessitatibus magni?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum,
Read More
</p>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-lg-3 col-md-12 col-sm-12">
<img src="AboutUs.jpeg" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-lg-9 col-md-12 col-sm-12">
<h4>Lorem ipsum dolor sit, amet consectetur</h4>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum, architecto magni? Rem, ipsam ipsa sit, maxime deserunt officiis consequatur cumque libero illum consectetur illo maiores iusto pariatur sapiente necessitatibus magni?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum,
Read More
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="bg-dark-08">
<div class="container-fluid p-0 m-0 bg-dark">
<div class="row no-gutters text-center d-flex justify-content-center">
<div class="p-2">
<p class="text-light text-center">Example Address</p>
<p class="text-light text-center">example#example.com</p>
</div>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</body>
</html>
Thank you
You should make use of the #media query. If the screen is smaller than your content, make the footer relative. If the screen is bigger than your content, use position absolute.
footer{
position:relative;
}
#media screen and (min-height:800px){
footer{
position: absolute; // or fixed
bottom:0;
width:100%;
}
}
Because, you dont have much content to fill entire page. You can use something like this.
if($(window).height() > $("body").height()){
$("footer").css({"position" : "fixed", "bottom" : "0" , "width" : "100%"});
} else {
$("footer").css("position", "relative");
}
This looks like bootstrap. Try having a look at the sample code they provide for this kind of thing. Specifically, there is a sticky footer example https://getbootstrap.com/docs/4.0/examples/sticky-footer/
What about:
footer {
position: fixed;
width: 100%;
bottom: 0px;
}
.container-fluid{
margin-bottom: 100px; //Height of your footer
}
Fiddle
html, body {
margin: 0;
padding: 0;
}
.mainContainer {
display: flex;
min-height: 100vh;
flex-direction: column;
}
header {
width: 100%;
height: 100px;
background: blue;
}
.mainContent {
flex: 1;
text-align: center;
font-size: 40px;
padding: 40px;
}
footer {
width: 100%;
height: 100px;
background: red;
}
<html>
<head></head>
<body>
<div class='mainContainer'>
<header></header>
<div class='mainContent'>
All your content goes here
</div>
<footer></footer>
</div>
</body>
</html>
This should work for you. Basically make the page a vertical flexbox with min-height: 100vh and flex the middle element. Then the footer is always anchored to the bottom of the page.
Description
Responsive table is only able to show 10 columns with sidebar open, if more than that, the table exceeds 100% width on my screen (1366x768). However, responsive table works fine when the sidebar is closed. Please help me, I literally have no idea what's wrong :(
Problem Figure
Fig. 1 (https://drive.google.com/file/d/1dNzjktJ4SmhvnTbltdCbTj8_Mo-f5LFb/view?usp=sharing)
Fig. 2 (https://drive.google.com/file/d/1XHb8ijRPIgXzw0zbmO14QroApR98qPuI/view?usp=sharing)
Fig. 3 (https://drive.google.com/file/d/13UwzEBP5oYfh8laPykcbI80MDhXc8Brm/view?usp=sharing)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Project</title>
</head>
<body>
<div class="d-flex" id="wrapper">
<div id="sidebar-wrapper"></div>
<div id="page-content-wrapper">
<nav class="navbar navbar-expand bg-darkblue">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<button class="btn" id="menu-toggle">Open Sidebar</button>
</li>
<li class="nav-item ml-2 mt-1">
<span class="title">Index</span>
</li>
</ul>
</nav>
<div class="container-fluid mt-4 center">
<form>
<div class="row form-group">
<div class="col-md-3 col-12">
<label for="name">Name</label>
</div>
<div class="col-md-9 col-12">
<input type="text" class="form-control" id="name" name="name">
</div>
</div>
</form>
<div class="table-wrapper">
<table class="table table-striped table-bordered table-responsive">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
</tr>
</thead>
<tbody>
<tr>
<td>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>5. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>6. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>7. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>8. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>9. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>10. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>11. Lorem ipsum dolor sit amet, consectetur adipisicing elit</td>
<td>12. Last Field</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
style.css
:root {
--black: #000000;
--white: #ffffff;
--dark-blue: #1565c0;
--dark-gray: #757575;
--light-gray: #e5e5e5;
--lighter-gray: #f6f6f6;
}
body {
overflow-x: hidden;
}
.bg-darkblue {
background-color: var(--dark-blue);
}
.title {
font-size: 1.25rem;
color: var(--white);
}
#wrapper {
overflow-x: hidden;
background: --var(color-white);
}
#sidebar-wrapper {
background-color: var(--light-gray);
width: 250px;
height: 200vh;
padding: 30vh 0;
position: fixed;
z-index: 7;
top: 0;
left: 0;
transition: width .25s cubic-bezier(0.4, 0, 0.2, 1);
overflow-x: hidden;
overflow-y: auto;
}
#page-content-wrapper {
margin-left: 250px;
width: 100%;
min-height: 100vh;
transition: margin-left .25s cubic-bezier(0.4, 0, 0.2, 1);
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#wrapper.toggled #page-content-wrapper {
margin-left: 0;
}
.table-wrapper {
width: 100%;
}
you have padding just override it by adding
this to your css .table td, .table th {padding:0!important;}
I added overflow-x: hidden; on #page-content-wrapper and now it works
I want to display a jQuery dialog box for a specific period of time before the clicked link begins loading the page but I'm having an issue with the duration. It doesn't seem to last as I expected. How can I fix? Thanks!
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
});
$(".images").find("a").eq(1).on('click', function(e) {
setTimeout(() => {
e.preventDefault();
}, 10000);
$( "#dialog" ).dialog( "open" );
});
});
#dialog {
display: none;
}
img {
width: 300px;
height: 250px;
object-fit: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src=""></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<div class="images">
<a href="https://www.site1.com">
<img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1">
</a>
<br>
<a href="https://www.site2.com">
<img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</a>
</div>
<div id="dialog" title="Lorem ipsum">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>
</div>
You can not put e.preventDefault() inside timeout, you need it right after click so that browser does not navigate away. And inside your timeout set the redirection click:
$("#dialog").dialog({
autoOpen: false,
});
$(".images").find("a").eq(1).on('click', function(e) {
e.preventDefault();
setTimeout(() => {
window.location.href = $(this).prop("href")
}, 3000);
$("#dialog").dialog("open");
});
#dialog {
display: none;
}
img {
width: 300px;
height: 250px;
object-fit: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src=""></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<div class="images">
<a href="https://www.site1.com">
<img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1">
</a>
<br>
<a href="https://www.site2.com">
<img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</a>
</div>
<div id="dialog" title="Lorem ipsum">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>
</div>
I have a list of content which is all viewable on desktop. On mobile, I have hidden some of the content and want to add a button, which on click, would show the hidden content.
I'm aware of how to hide and show div's on click, ie.
function showClass(id) {
var elem = document.getElementById(id);
var visible = getComputedStyle(elem).display == "block";
if (!visible) {
elem.style.display = "block"
} else {
elem.style.display = "none"
}
}
But unsure on how to approach this for items that are in the same class that are hidden via nth-child?
Markup:
#media(max-width: 576px){
.wrapper:nth-of-type(n+4) {
display: none;
}
}
.showmore{
display: none;
}
#media(max-width: 576px){
.showmore{
display: block;
}
}
<div class="container">
<div class="wrapper">
<p>test 1</p>
</div>
<div class="wrapper">
<p>test 2</p>
</div>
<div class="wrapper">
<p>test 3</p>
</div>
<div class="wrapper">
<p>test 4</p>
</div>
<div class="wrapper">
<p>test 5</p>
</div>
<div class="wrapper">
<p>test 6</p>
</div>
<a class="showmore" onclick="show">Show more</a>
</div>
Use the :not() pseudo-class to only hide the items when the .show-all class is not present on the container:
const container = document.querySelector('.container')
const showmore = document.querySelector('.showmore')
showmore.addEventListener('click', () =>
container.classList.toggle('show-all')
)
.showmore{
display: none;
}
#media(max-width: 576px){
.container:not(.show-all) .wrapper:nth-of-type(n+4) {
display: none;
}
.showmore{
display: block;
}
}
<div class="container">
<div class="wrapper">
<p>test 1</p>
</div>
<div class="wrapper">
<p>test 2</p>
</div>
<div class="wrapper">
<p>test 3</p>
</div>
<div class="wrapper">
<p>test 4</p>
</div>
<div class="wrapper">
<p>test 5</p>
</div>
<div class="wrapper">
<p>test 6</p>
</div>
<a class="showmore">Show more</a>
</div>
I'd first change the placement of the "show more" link in the markup, in order to keep a more consistent order of reading.
With this approach you need to hide all the sibling elements of the link and the click event just removes the link itself, showing all the remaining content.
In this example the link is visible under 640px (open the demo in a full page) and I've also inserted a small fade effect over the text before the link (just remove the linear gradient if you are not interested)
document.querySelector('.showmore').addEventListener('click', function(ev) {
ev.preventDefault();
this.remove();
})
.showmore {
display: none;
margin-top: -5em;
}
.showmore::before {
content: "";
display: block;
height: 5em;
background: linear-gradient(to bottom, transparent, #fff);
}
#media all and (max-width:640px) {
.showmore {
display: block;
position: relative;
}
.showmore ~ * { display: none; }
}
<div class="container">
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<a class="showmore" href="#">Show more</a>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
<div class="wrapper">
<p>Lorem ipsum sit dolor amet consectetur dolor adisciplit elit sed diam nonummy pellentesque.</p>
</div>
</div>
I'm trying to replicate this behaviour: https://jqueryui.com/sortable/#portlets
I have included the required fields in my HTML site and it works well. However, it doesn't look as good because the portlet box has a fix width. Therefore, if I have a big form in one portlet and there are elements on the side, they are overlapped. I attach an screenshot (I cover some parts that can't be public):
With black arrows what should be on the side and not on top of my form. With red arrows, the surrounding border around the portlet which should be around the form (or whatever, or not exist at all).
What do I have to do to achieve what I want? I attach relevant code (I've simplify the form a little bit)
$(function() {
$( ".column" ).sortable({
connectWith: ".column",
handle: ".portlet-header",
cancel: ".portlet-toggle",
placeholder: "portlet-placeholder ui-corner-all"
});
$( ".portlet" )
.addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
.find( ".portlet-header" )
.addClass( "ui-widget-header ui-corner-all" )
.prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
$( ".portlet-toggle" ).click(function() {
var icon = $( this );
icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
});
});
body {
min-width: 520px;
}
.column {
width: 170px;
float: left;
padding-bottom: 100px;
}
.portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
.portlet-header {
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
}
.portlet-toggle {
position: absolute;
top: 50%;
right: 0;
margin-top: -8px;
}
.portlet-content {
padding: 0.4em;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 50px;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="./JS/js.js"></script>
<title> </title>
<!-- TESTING -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="./CSS/dragtest.css">
<script src="./JS/dragtest.js"></script>
</head>
<body>
<h2> cambiar </h2>
<div class="column">
<div class="portlet">
<div class="portlet-header">New pick</div>
<div class="portlet-content">
<form>
<fieldset>
<legend>Upload</legend>
<label for="usuari">User: </label>
<select name="usuari" id="usuari">
<option value='1'>Samy</option><option value='2'>Boji</option><option value='3'>Ferrer</option><option value='4'>Pajaru</option> </select>
<div>
<label for="fet"> Fet: </label>
<select name="fet" id="fet">
<option value='1'>Si</option><option value='2'>No - Quota caiguda</option><option value='3'>No - Desaparegut del mercat</option><option value='4'>No - Línea moguda</option> </select>
</div>
<div>
<label for="data"> Data: </label>
<input id="data" name="data" type="date" value="2016-06-28">
</div>
<div>
<label for="horaRebut"> Hora rebut: </label>
<input type="time" value="10:24" name="horaRebut" id="horaRebut">
</div>
<div>
<label for="horaFet"> Hora posat: </label>
<input type="time" value="10:24" name="horaFet" id="horaFet">
</div>
<div>
<label for="comment"> Comentaris extra </label>
<textarea rows="4" cols="80" maxlength="349" name="comment" id="comment"> </textarea>
</div>
<div>
<button name="uploadp" type="submit">Donar pick d'alta</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Feeds</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">News</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Shopping</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Links</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">Images</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
Looks like the issue is solved if you add width:auto to the thingy having form (View the demo full screen)
$(function() {
$(".column").sortable({
connectWith: ".column",
handle: ".portlet-header",
cancel: ".portlet-toggle",
placeholder: "portlet-placeholder ui-corner-all"
});
$(".portlet")
.addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
$(".portlet-toggle").click(function() {
var icon = $(this);
icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
icon.closest(".portlet").find(".portlet-content").toggle();
});
});
body {
min-width: 520px;
}
.column {
width: 170px;
float: left;
padding-bottom: 100px;
}
.column.column-form {
width: auto;
}
.portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
.portlet-header {
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
}
.portlet-toggle {
position: absolute;
top: 50%;
right: 0;
margin-top: -8px;
}
.portlet-content {
padding: 0.4em;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 50px;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="./JS/js.js"></script>
<title></title>
<!-- TESTING -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="./CSS/dragtest.css">
<script src="./JS/dragtest.js"></script>
</head>
<body>
<h2> cambiar </h2>
<div class="column column-form">
<div class="portlet">
<div class="portlet-header">New pick</div>
<div class="portlet-content">
<form>
<fieldset>
<legend>Upload</legend>
<label for="usuari">User:</label>
<select name="usuari" id="usuari">
<option value='1'>Samy</option>
<option value='2'>Boji</option>
<option value='3'>Ferrer</option>
<option value='4'>Pajaru</option>
</select>
<div>
<label for="fet">Fet:</label>
<select name="fet" id="fet">
<option value='1'>Si</option>
<option value='2'>No - Quota caiguda</option>
<option value='3'>No - Desaparegut del mercat</option>
<option value='4'>No - Línea moguda</option>
</select>
</div>
<div>
<label for="data">Data:</label>
<input id="data" name="data" type="date" value="2016-06-28">
</div>
<div>
<label for="horaRebut">Hora rebut:</label>
<input type="time" value="10:24" name="horaRebut" id="horaRebut">
</div>
<div>
<label for="horaFet">Hora posat:</label>
<input type="time" value="10:24" name="horaFet" id="horaFet">
</div>
<div>
<label for="comment">Comentaris extra</label>
<textarea rows="4" cols="80" maxlength="349" name="comment" id="comment"></textarea>
</div>
<div>
<button name="uploadp" type="submit">Donar pick d'alta</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Feeds</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">News</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Shopping</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Links</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">Images</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>