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>
Related
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 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 working on tabs here multiple/nested tabs on the same page my code is working fine current class also added data-target attribute also working fine. The problem is on Click function might be I'm not targetting element properly. this children() I used because I have multiple/nested tabs on same page Can anyone suggest me what might be the issue here tabs are not changing click function not working properly
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var tab_item = $(this).find('.at-tab__item');
var tab_item_title = $(this).find('.at-title__text');
var tab_content = $(this).find('.at-content__item');
tab_content.hide();
//adding data attribute
tab_item_title.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$(tab_item[0], tab_item_title[0]).addClass('current');
$(tab_content[0]).show();
console.log('test');
//Display current tab content
$(this).children('.at-tab-wrapper').children('.at-tab__item').click(function(ele) {
//debugger;
$(this).closest('.at-tabs').children('.at-tab-wrapper').children('.current').removeClass('current').children('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-title__text').addClass('current');
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.at-tab__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tab-wrapper {
display: flex;
padding: 28px 0px;
}
.at-title__text {
text-decoration: none;
font-size: 18px;
color: black;
}
.current .at-title__text {
color: #fff;
}
.at-tab__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-content-wrapper {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
<div>
<div class="at-tab-wrapper">
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #1</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #2</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #3</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-content-wrapper">
<div class="at-content__item">
<p>Tab Content dfdfd</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
</div>
</div>
hi i fixed your click issue
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var tab_item = $(this).find('.at-tab__item');
var tab_item_title = $(this).find('.at-title__text');
var tab_content = $(this).find('.at-content__item');
tab_content.hide();
//adding data attribute
tab_item_title.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$(tab_item[0], tab_item_title[0]).addClass('current');
$(tab_content[0]).show();
console.log('test');
//Display current tab content
$('.at-tab__item').click(function(ele) {
//debugger;
$('.at-tab__item').removeClass('current');
$(this).addClass('current');
$(this).find('.at-title__text').addClass('current');
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.at-tab__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tab-wrapper {
display: flex;
padding: 28px 0px;
}
.at-title__text {
text-decoration: none;
font-size: 18px;
color: black;
}
.current .at-title__text {
color: #fff;
}
.at-tab__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-content-wrapper {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
<div>
<div class="at-tab-wrapper">
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #1</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #2</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #3</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-content-wrapper">
<div class="at-content__item">
<p>Tab Content dfdfd</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
</div>
</div>
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>
So, how the code was supposed to run: if you just load the example, and click on "menu" on the bottom left, a new div cover the entire page, with another menu, sliding from the top. If you click the button again, same animation in reverse. Works fine!
But if you scroll the main page to the bottom, and then click on the menu again, it works, but when you click the menu button again, there is no animation. The menu div simply disappears. How can I fix that?
menu();
function menu(nm_pagina) {
var scroll;
$("#menu01").click(function() {
if ($(".menu_aberto").css("display") == 'none') {
$(".menu_aberto").slideDown(300);
scroll = $(window).scrollTop();
$(".miolo_relacionamentos").hide();
} else {
$(".menu_aberto").slideUp(300);
$('.' + nm_pagina).height('auto');
$(".miolo_relacionamentos").fadeIn(100);
$("html").scrollTop(scroll);
};
});
};
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
max-width: 800px;
margin: 0 auto;
}
#ft_menu_botoes {
max-width: 800px;
position: fixed;
bottom: 0px;
width: 100%;
display: block;
background-color: #162F67;
height: 60px;
z-index: 10;
}
#ft_menu_botoes #menu01 {
float: left;
width: 25%;
font-size: 13px;
text-align: center;
padding: 10px 0 0 0;
color: white;
height: 100%;
transition: background-color 0.3s;
}
#ft_menu_botoes #menu01 .ico_menu {
color: white;
font-size: 30px;
}
#ft_menu_botoes #menu01:active {
background-color: #2855bb;
}
.menu_aberto {
z-index: 9;
max-width: 800px;
position: absolute;
margin: auto;
left: 0;
bottom: 0;
right: 0;
top: 0;
display: none;
background: #162F67;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(#2855bb, #162F67);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#2855bb, #162F67);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#2855bb, #162F67);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#2855bb, #162F67);
/* Standard syntax */
width: 100%;
height: 100%;
overflow: auto;
display: none;
}
.menu_aberto #fecha_menu {
float: left;
border: 0;
background-color: transparent;
margin-top: 17px;
color: white;
width: 22%;
height: 100%;
}
.lista_rel {
margin: 10px auto 0 auto;
width: 100%;
border: 1px solid #162F67;
position: relative;
overflow: auto;
transition: opacity 0.3s;
}
.lista_rel:first {
margin-left: 20px;
}
.lista_rel .nome_empresa {
width: 100%;
background-color: #162F67;
margin: 0;
font-size: 14px;
font-weight: normal;
color: white;
padding: 5px 20px;
}
.lista_rel .nome_mae {
width: 100%;
background-color: #e3e5e7;
margin: 0;
font-size: 13px;
font-weight: normal;
padding: 5px 20px;
color: #525860;
}
.lista_rel .posicao_empresa {
width: 40px;
height: 44px;
float: left;
display: block;
position: relative;
}
.lista_rel .textos {
float: left;
width: calc(100% - 100px);
}
.lista_rel .textos .cnpj {
color: #162F67;
margin: 5px 5px 0 0;
font-size: 11px;
}
.lista_rel .textos .cnpj span {
font-size: 13px;
}
.lista_rel .textos .num_documentos {
color: #525860;
margin: 5px 10px 5px 20px;
text-align: right;
font-size: 12px;
}
.lista_rel .box_numero {
width: 60px;
height: 44px;
background-color: #1f4291;
float: right;
display: block;
}
.lista_rel .box_numero p {
color: white;
font-weight: bold;
font-size: 22px;
text-align: center;
margin-top: 10px;
margin-bottom: 0;
}
.header_mob_01 {
margin: 0;
background-color: #162F67;
display: block;
height: 50px;
position: fixed;
top: 0;
width: 100%;
max-width: 800px;
z-index: 5;
}
.rlc {
background-color: white;
height: auto;
padding: 0;
}
.miolo_relacionamentos {
width: 90%;
margin: 0 auto;
padding-top: 60px;
padding-bottom: 100px;
overflow: hidden;
}
/*# sourceMappingURL=fake_code.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <link rel="stylesheet" href="./css/relacionamentos.css"> -->
<link rel="stylesheet" href="./css/fake_code.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="vertical"></div>
<div class="rlc">
<div class="header_mob_01"></div>
<div class="menu_aberto"></div>
<div class="miolo_relacionamentos">
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
<div class="lista_rel">
<h3 class="nome_empresa"> Lorem ipsum dolor </h3>
<p class="nome_mae"> Duis ut nisi </p>
<div class="posicao_empresa"></div>
<div class="textos">
<p class="cnpj"> Nullam vitae: <span> 123-456-789 </span> </p>
<p class="num_documentos"> Integer massa </p>
</div>
<div class="box_numero">
<p>999</p>
</div>
<p class="rl_tudo zerado"></p>
</div>
</div>
<div id="ft_menu_botoes">
<div id="menu01"> <span class="icon-menu ico_menu"></span> <br> Menu </div>
</div>
</div>
<script>
</script>
</body>
</html>
PS: sorry for the clumsy job in the html/css. Just copied the original and started deleting things which do not matter here.