I want to save these lists after reordering the lists and reloading the page. I can move the list through srtable jquery but I can't save these to the database in codeigniter. Below is the code for the View part.
View:
$(function() {
$( "#sortable" ).sortable({
revert: true
});
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$( "ul, li" ).disableSelection();
});
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable + Sortable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
Use the update option to add a callback that then calls whatever ajax you need to update the database.
$(function() {
$( "#sortable" ).sortable({
revert: true,
update: function( event, ui ) {
alert('make your call to whatever controller via ajax here')
}
});
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$( "ul, li" ).disableSelection();
});
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable + Sortable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
Related
New to Javascript and have spent hours on this problem :/
I want to implement a smooth scrolling effect to move to different sections of a webpage. I am using this piece of javascript.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('a').on('click', function(e) {
if (this.hash !== '') {
e.preventDefault();
const hash = this.hash;
$('html, body, .main')
.animate({
scrollTop: $(hash).offset().top
}, 800);
}
});
This is the basic structure
<!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">
<title>Document</title>
</head>
<body style="margin-left: 30%; margin-right: 30%">
<main>
<div class="contactme-button">Contact me</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: grey; display: block;"> </div>
<div class="contactme-button-2">Contact me</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: blue; display: block;"> </div>
<div class="contactme-section" id="contactme" style="width: 100%; height: 100px; background-color: grey;">CONTACT ME</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: black; display: block;"> </div>
</main>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('a').on('click', function(e) {
if (this.hash !== '') {
e.preventDefault();
const hash = this.hash;
$('html, body, .main').animate({
scrollTop: $(hash).offset().top
}, 800);
}
});
</script>
</html>
(there is more content in there but that is the basic structure that is giving me grief)
I discovered that in
.main{
overflow-x: hidden;
}
is stopping the normal operation of the scrolling and cause the second link to scroll to a random spot
There's a CSS declaration that may help here:
.your-anchor-element-class {
scroll-margin-top: 36px; // <-- your value here
}
Browser support: Works natively in Chrome, FF, Edge, Opera. Supported in Safari with scroll-snap-margin-top.
MDN docs.
Credit to Josh Comeau for pointing this out.
I made container with attribute flex. Put inside 3 images with same height 830px but different width:
img 602x830 px
img 613x830 px
img 599x830 px
made for images attribute: width 100%
All seems to look correct until screen size is more then 630px. After the screen became 630 px and less the height of one image (2-img) became less then others two images.
How to made all images the same height no matter what the screen size becomes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Document</title>
<style type="text/css">
.category-block {
max-width: 768px;
margin:0 auto;
overflow:hidden;
}
.flex-block {
display:flex;
flex-direction: row;
align-items: stretch;
}
.flex-block img {
width: 100%;
}
</style>
</head>
<body>
<div class="category-block">
<div class="flex-block">
<div class="flex-block__area">
<img src="1-img.jpg"></img>
</div>
<div class="flex-block__area">
<img src="2-img.jpg"></img>
</div>
<div class="flex-block__area">
<img src="3-img.jpg"></img>
</div>
</div>
</div>
</body>
</html>
This is an issue I found on Firefox and I haven't found why it fail.
Here is one workaround, using a Firefox CSS hack, making also the flex-block__area a flex container.
The CSS hack is needed to target only on Firefox, or else it will mess up the other browsers instead
Fiddle demo
Stack snippet
.category-block {
max-width: 768px;
margin: 0 auto;
overflow: hidden;
}
.flex-block {
display: flex;
}
.flex-block img {
width: 100%;
}
/* Firefox bug fix */
#supports (-moz-appearance:meterbar) and (display:flex) {
.flex-block__area {
display: flex;
}
}
<div class="category-block">
<div class="flex-block">
<div class="flex-block__area">
<img src="http://placehold.it/602x830/f00">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/613x830/0f0">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/599x830/00f">
</div>
</div>
</div>
I have a problem with my menu button.
It flows up and down while I change the size of my window. I didn't find the problem. But I know that it has something to do with my script file from the masonry. I have no clue where I could find this problem.
On this page you will see the problem. Also it has a strange animation which I don't like (bounce down in the beginning)
Thanks for help.
I hope this will help....
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Immo17 | Primos</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="primos" />
<meta name="keywords" content="francisco nobrega, immo17, madeira, haus in madeira, houses madeira, madeira projects, arquitectura, architekten, architecture, immobilien" />
<meta name="author" content="Immo 17" />
<!--
//////////////////////////////////////////////////////
FREE HTML5 TEMPLATE
DESIGNED & DEVELOPED by FREEHTML5.CO
Website: http://freehtml5.co/
Email: info#freehtml5.co
Twitter: http://twitter.com/fh5co
Facebook: https://www.facebook.com/fh5co
//////////////////////////////////////////////////////
-->
<!-- Facebook and Twitter integration -->
<meta property="og:title" content="" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:site_name" content="" />
<meta property="og:description" content="" />
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />
<link href="http://www.immo17.com/css/style.css" rel="stylesheet"/>
<link href="http://www.immo17.com/css/animate.css" rel="stylesheet"/>
<link href="http://www.immo17.com/css/bootstrap.css" rel="stylesheet"/>
<link href="http://www.immo17.com/css/fresco.css" rel="stylesheet"/>
<link href="http://www.immo17.com/css/masonry.css" rel="stylesheet"/>
<link href="http://www.immo17.com/css/bootstrap.css.map" rel="stylesheet"/>
<link href="http://www.immo17.com/css/style.css.map" rel="stylesheet"/>
<link href="http://www.immo17.com/css/flexslider.css" rel="stylesheet"/>
<link href="http://www.immo17.com/css/projects.css" rel="stylesheet"/>
<link href="http://www.immo17.com/css/icomoon.css" rel="stylesheet"/>
<link rel="shortcut icon" href="fav.ico">
<link href="https://fonts.googleapis.com/css?family=Karla:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:100|Raleway:100" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Flexslider -->
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/style.css">
<script src="http://www.immo17.com/js/fresco.js"></script>
<script src="http://www.immo17.com/js/main.js"></script>
<script src="http://www.immo17.com/js/jquery.flexslider-min.js"></script>
<script src="http://www.immo17.com/js/bootstrap.min.js"></script>
<script src="http://www.immo17.com/js/jquery.countTo.js"></script>
<script src="http://www.immo17.com/js/jquery.min.js"></script>
<script src="http://www.immo17.com/js/jquery_masonry_final.js"></script>
<script src="http://www.immo17.com/js/modernizr-2.6.2.min.js"></script>
<script src="http://www.immo17.com/js/jquery.easing.1.3.js"></script>
<script src="http://www.immo17.com/js/jquery.waypoints.min.js"></script>
<script src="http://www.immo17.com/js/respond.min.js"></script>
<script src="http://www.immo17.com/js/main_masonry.js"></script>
<!-- Modernizr JS -->
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
<!-- Lightbox -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/fresco.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<meta name="robots" content="noindex,nofollow" />
<script type="text/javascript">
function loadUrl(newLocation) {
window.location = newLocation;
}
</script>
<style type="text/css">
img {
max-width: 100%;
}
.container,
.container2,
.container3,
.container24 {
margin-right: auto;
margin-left: auto;
padding: 55px;
/* padding-left: 40px; */
/* padding-right: 40px; */
/* padding-bottom: 40px; */
background-color: white;
}
/*
.container:before, .container:after, .container24:before, .container24:after, .container2:before, .container2:after, .container3:before, .container3:after {
content: " ";
display: table;
}
.container:after, .container24:after, .container2:after, .container3:after, .container3:after {
clear: both;
}
*/
.container3 {
display: flex;
}
/*
#media (min-width: 1080px) {
.container3 {
float: left;
width: 50%;
width: calc(0% + 450px);
margin-left: 0px;
margin-top: 10px;
padding: 0px;
max-width: 100%;
}
.container4 {
float: right;
width: 50%;
width: calc(100% - 2px);
margin-left: 32px;
margin-top: 10px;
padding: 0;
max-width: 100%;
}
}
*/
#media (min-width: 1035px) {
.demonstrations-media,
.demonstrations-media_content {
overflow: hidden;
}
.demonstrations-media_image {
float: left;
margin-right: 2em;
width: 450px;
}
.textcontainer {
float: right;
max-width: 520px;
padding: 0px;
/* border: 3px solid blue; */
}
}
#media (min-width: 1500px) {
.demonstrations-media,
.demonstrations-media_content {
overflow: hidden;
}
.demonstrations-media_image {
float: left;
margin-right: 2em;
width: 600px;
}
.textcontainer {
float: right;
max-width: 620px;
padding: 0px;
/* border: 3px solid blue; */
}
}
#media (min-width: 1700px) {
.demonstrations-media,
.demonstrations-media_content {
overflow: hidden;
}
.demonstrations-media_image {
float: left;
margin-right: 2em;
width: 500px;
}
.textcontainer {
float: right;
max-width: 820px;
padding: 0px;
/* border: 3px solid blue; */
}
}
#media (min-width: 1900px) {
.demonstrations-media,
.demonstrations-media_content {
overflow: hidden;
}
.demonstrations-media_image {
float: left;
margin-right: 2em;
width: 600px;
}
.textcontainer {
float: right;
max-width: 820px;
padding: 0px;
/* border: 3px solid blue; */
}
}
h2 {
font-size: 32px;
font-weight: 600;
color: #000;
}
p {
font-size: 20px;
color: #000;
}
/*
#media (min-width: 800px) {
.demonstrations-media_image_d {
width:400px;
margin: 0;
}
}
#media (min-width: 1500px) {
.demonstrations-media_image_d {
width:600px;
margin: 0;
}
}
*/
/*
#media (min-width: 1360px) {
.demonstrations-media,
.demonstrations-media_content {
overflow: hidden;
}
.demonstrations-media_image {
float: left;
margin-right: 2em;
}
.textcontainer {
float: right;
max-width: 420px;
padding: 10px;
border: 3px solid blue;
}
}
*/
img.fr-content-element {
max-width: 100%;
}
.fr-stroke-color {
background: none;
}
.fr-window-skin-fresco .fr-content-background {
box-shadow: none;
}
.arrow {
position: fixed;
bottom: 30px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 40px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjguMzVweCIgaGVpZ2h0PSIzNi45MjRweCIgdmlld0JveD0iMCAtOC41NzQgMjguMzUgMzYuOTI0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgLTguNTc0IDI4LjM1IDM2LjkyNCINCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8Zz4NCgkJDQoJCQk8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiM5QjlEOUYiIHN0cm9rZS13aWR0aD0iMC42MTQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjE4LjI5MyIgeTE9IjI4LjM1IiB4Mj0iOS41NzkiIHkyPSIxOS42MzYiLz4NCgk8L2c+DQoJPGc+DQoJCQ0KCQkJPGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOUI5RDlGIiBzdHJva2Utd2lkdGg9IjAuNjE0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIxOC4yOTMiIHkxPSIyOC4zNSIgeDI9IjI3LjAwOCIgeTI9IjE5LjYzNiIvPg0KCTwvZz4NCgk8Zz4NCgkJPHBvbHlsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzlCOUQ5RiIgc3Ryb2tlLXdpZHRoPSIwLjYxNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9Ig0KCQkJOS41NzksMTkuNjM2IDE4LjI5MywyOC4zNSAxOC4yOTMsNi41NDYgCQkiLz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzlCOUQ5RiIgc3Ryb2tlLXdpZHRoPSIwLjYxNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMjcuMDA4LDE5LjYzNg0KCQkJYy0yLjkwNCwyLjkwNS01LjgxMSw1LjgxLTguNzE1LDguNzE0YzAtNC4zMTMsMC04LjYyOSwwLTEyLjk0MiIvPg0KCTwvZz4NCjwvZz4NCjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzlCOUQ5RiIgc3Ryb2tlLXdpZHRoPSIwLjYxNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMTguMjkzIiB5MT0iMjguMDUiIHgyPSIxOC4yOTMiIHkyPSItOS4zMDUiLz4NCjwvc3ZnPg0K);
background-size: contain;
}
/*
.fr-side-button-icon{
cursor: url(images/arrow_l.svg), pointer;
}
*/
.fr-side-previous {
cursor: url(images/Arrow/arrow-right-samplesL.svg), pointer;
}
.fr-side-next {
cursor: url(images/Arrow/arrow-right-samplesR.svg), pointer;
}
.fr-position-outside .fr-position-text {
text-shadow: none !important;
}
p.bold {
font: bold !important;
}
u {
text-decoration: none !important;
border-bottom: 0.5px solid grey !important;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav id="fh5co-main-nav" role="navigation">
<i></i>
<div class="js-fullheight fh5co-table">
<div class="fh5co-table-cell js-fullheight">
<ul>
<li><a id="menu" href="home.html">Home</a></li>
<li><a id="menu" href="verkauf.html">Verkauf</a></li>
<li><a id="menu" href="about.html">Team</a></li>
<li><a id="menu" href="contact.html">Kontakt</a></li>
</ul>
<p>
DE |
EN
</p>
</div>
</div>
</nav>
<!-- menubar -->
<div id="fh5co-page">
<header>
<div class="container2" style="padding-top: 40px;">
<div class="fh5co-navbar-brand">
<h1 class="text-left"><a class="fh5co-logo" href="home.html">Immo 17</a></h1>
<i></i>
</div>
<hr class="linesina">
</div>
</header>
</div>
<!-- Img Lightbox and Text floating solved-->
</div>
<div class="arrow">
</div>
<!-- Img Lightbox and Text -->
<div class="container2">
<div class="textcontainer " style="margin-bottom: 40px;">
<h2 class="small-caps" style="background-color: #fff;">Fajã da Ovelha - Primos</h2>
<p class="small-caps" style="background-color: #fff;">Wir verkaufen Land, bestehend aus zwei vereinigten Grundstücken mit wunderschöner Aussicht auf das Atlantische Meer. <br>Haben Sie hunger, jedoch keine Lust zum Kochen? <br>Dann haben Sie nur fünf Minuten weiter das schöne Restaurante o Principicio
und keine zwei Minuten entfernt ein wunderschönes Café.<br> Die Grundstücke sind in Fajã da Ovelha, Madeira, Caminho das Irinhas.<br> Hier finden Sie das schöne Gelände. <span style="font-size: 18px;">32°46'49.2"N 17°14'05.2"W</span>.<br> Die zwei Grundstücke können optional auch einzeln gekauft werden.</p>
<p>Grundstücksfläche: 703m<sup>2</sup> <span> (380m<sup>2</sup> | 323m<sup>2 </sup>)</span></p>
<p><b>Preis: 71'500 CHF</b><span style="font-size: 12px; padding-left: 7px;">65'000 Euro</span></p>
<p><b><u>Kontaktpersonen </u></b><br>Christina Lüscher <span style="font-size: 12px; padding-left: 13px;"> DE | EN | IT </span>
<br>Xavier Nóbrega <span style="font-size: 12px; padding-left: 30px;"> PT | EN </span></p>
</div>
<div class='demonstrations demonstrations-media animate-box'>
<a href='images/Primos/primos1_1.jpg' class='fresco zoom' data-fresco-group='example'>
<img src='images/Primos/primos1.jpg' alt='' class="demonstrations-media_image" style="margin-bottom: 55px; margin-top: 6px;}" />
</a>
</div>
<div class="demonstrations demonstrations-media animate-box">
<a href='images/Primos/primos2_1.jpg' class='fresco demonstrations-media_image' data-fresco-group='example'>
<img src='images/Primos/primos2.jpg' alt='' style="margin-bottom: 55px;" />
</a>
</div>
<div class="demonstrations demonstrations-media animate-box">
<a href='images/Primos/primos3_1.jpg' class='fresco demonstrations-media_image' data-fresco-group='example'>
<img src='images/Primos/primos3.jpg' alt='' style="margin-bottom: 55px;" />
</a>
</div>
<div class="demonstrations demonstrations-media animate-box">
<a href='images/Primos/primos4_1.jpg' class='fresco demonstrations-media_image' data-fresco-group='example'>
<img src='images/Primos/primos4.jpg' alt='' style="margin-bottom: 55px;" />
</a>
</div>
<div class="demonstrations demonstrations-media animate-box">
<a href='images/Primos/primos6_1.jpg' class='fresco demonstrations-media_image' data-fresco-group='example'>
<img src='images/Primos/primos6.jpg' alt='' style="margin-bottom: 55px;" />
</a>
</div>
<div class="demonstrations demonstrations-media animate-box">
<a href='images/Primos/primos7_1.jpg' class='fresco demonstrations-media_image' data-fresco-group='example'>
<img src='images/Primos/primos7.jpg' alt='' style="margin-bottom: 55px;" />
</a>
</div>
</div>
<!-- load -->
<script src='js/jquery_masonry_final.js'></script>
<script type='text/javascript' src='js/main_masonry.js'></script>
<!-- lightbox -->
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/fresco.js"></script>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Counters -->
<script src="js/jquery.countTo.js"></script>
<!-- Flexslider -->
<script src="js/jquery.flexslider-min.js"></script>
<!-- Main JS -->
<script src="js/main.js"></script>
</body>
</html>
I have seven divs with id 1 to 7 in my html when I resize my window diagonally then the fittextjs plugin resizes the text within the 7 divs thats fine.
When I resize the window horizontally then the font-size decreases/increases fine...
What is not working as expected is: When I resize the window only vertically then the font-size does not decrease/shrink.
How can I make it work for the last non-working case?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>FitText</title>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
font-family: arial;
/*overflow: hidden;*/
}
* { /* Every element which has a border or padding value puts this value inside the div */
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 0;
margin: 0;
}
._Z {
width: 12.50%;
}
.Stack {
display: table;
height: 100%;
float: left;
}
.Stack li {
list-style: none;
display: table-row;
}
.Stack li div {
display: table-cell;
}
.horizontal-right {
text-align: right;
}
.horizontal-center {
text-align: center;
}
.vertical-center {
vertical-align: middle;
}
#responseView {
height: 100%;
}
</style>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="responseView" data-bind="swipeLeftRightContentViews: $root.showMapView">
<div style="height: 100%;">
<ul class="Stack _Z" data-bind="foreach: replyTimeStack.segments">
<li style="height:14.2%;background: green; color: black;">
<div id="div1" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">1</div>
</li>
<li style="height:14.2%;background: green; color: black;">
<div id="div2" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">2</div>
</li>
<li style="height:14.2%;background: green; color: black;">
<div id="div3" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">3</div>
</li>
<li style="height:14.2%;background: green; color: black;">
<div id="div4" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">4</div>
</li>
<li style="height:14.2%;background: yellow; color: black;">
<div id="div5" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">5</div>
</li>
<li style="height:14.2%;background: orange; color: black;">
<div id="div6" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">6</div>
</li>
<li style="height:14.2%;background: green; color: black;">
<div id="div7" style="border-bottom:white solid 1px;" class="horizontal-center vertical-center">7</div>
</li>
</ul>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script type="text/javascript">
$("#div1").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div2").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div3").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div4").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div5").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div6").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
$("#div7").fitText(1.0, { minFontSize: '7px', maxFontSize: '16px' });
</script>
</body>
</html>
In order to make it work like that, you should tweak their resizer function in the script... setting up to measure the font size based on height rather than width.
$this.css('font-size', Math.max(Math.min($this.height() / (compressor*2), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
that should make it work based on the height..
Cheers!
I'm really really new to HTML/CSS, but somehow decided to plunge head on to using 960 Grid System, which I found helpful. I know some says it's unsemantic, but I've been involved and at the end, tangled in the problem stated above. I've tried a few codes like overflow: hidden, overflow: auto, display: block, etc that I found on other pages and pages on stack overflow, but the error still there.
I would really appreciate anyone's help at this site.
These are the html of the site:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content=
"text/html; charset=us-ascii">
<meta http-equiv="content-type" content=
"text/html; charset=us-ascii">
<base>
<title>
najibahabakar.com
</title>
<link rel="stylesheet" href="style.css" type="text/css"
media="screen">
<link rel="stylesheet" href="960.css" type="text/css" media=
"screen">
<link rel="stylesheet" href="text.css" type="text/css" media=
"screen">
</head>
<body>
<div class="container_12">
<div id="topgrafik">
<div class="prefix_6">
<ul id="nav" class="nav">
<li>Laman Depan
</li>
<li>Mengenai
</li>
<li>Mimpi
</li>
<li>Hubungi
</li>
</ul>
</div>
<div class="clear"></div>
<div class="grid_3 prefix_1" id="tgfocus">
<img class="frame" src="images/mengkuang.jpg" alt=
"tikar mengkuang!">
</div>
<div class="clear"></div>
<div class="center">
<div class="grid_4">
<h5>
Buku, Sastera, Diri
</h5>
</div>
<div class="grid_4">
<h5>
Galeri
</h5>
</div>
<div class="grid_4">
<h5>
Web Design
</h5>
</div>
</div>
</div>
<div class="clear"></div>
<div id="middlebody">
<div class="left">
<div class="grid_2 prefix_1">
<p id="date">
31 DISEMBER 2009
</p>
<p>
Buku, kemuncak peradaban
</p>
<hr>
<p id="date">
31 DISEMBER 2009
</p>
<p>
Cemas bila buku bertambah!
</p>
<hr>
<p id="date">
31 DISEMBER 2009
</p>
<p>
Janji tak terpenuh
</p>
</div>
<div class="grid_4 prefix_1">
<p>
Di sini galeri imej, mungkin juga hasil-hasil kerja
Photoshop & Inkscape
</p>
<hr>
</div>
<div class="grid_2 prefix_1">
<p id="date">
31 DISEMBER 2009
</p>
<p>
Hasil pertama
</p>
<hr>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
And the css:
html {
background: url('images/bground.jpg') repeat;
color: #333333;
}
body,h1,h2,h3,h4,h5,h6 {
padding: 0;
margin: 0;
}
/*----------NAVIGATION--------------------*/
#nav li {
list-style-type: none;
display: inline;
}
ul.nav {
margin-top: 2px;
}
/*----------------GENERAL CLASSES------------*/
.center {
text-align: center;
align: center;
padding-left: 10px;
}
.left {
text-align: left;
font-size: 95%;
padding-left: 15px;
}
#date {
font-size: 85%;
}
/*-----------------BACKGROUND-----------------*/
#topgrafik {
background: url('images/topgrafik.jpg') center top;
height: 426px;
width: 993px;
float: left;
position: relative;
}
#middlebody {
background: url('images/kandungan2.jpg') center bottom repeat-y;
height: 408px;
width: 993px;
float: left;
position: relative;
}
#footer {
background: url('images/footer.jpg') center bottom;
background-repeat: no-repeat;
height: 228px;
width: 993px;
float: left;
position: relative;
}
/*---------------CONTENT LAYOUT---------------------*/
#tgfocus {
margin-top: 80px;
margin-bottom: 40px;
position: relative;
min-height: 205px;
}
/*------------------IMAGES AND THUMBNAIL GALLERY-----------*/
.frame {
padding: 10px;
border: 1px solid #333300;
height: 190px;
width: 150px;
background-color: #eaede0;
position: absolute;
}
.align-right {
float:right;
margin: 0 0 15px 15px;
}
.align-left {
float:left; margin: 0 15px 15px 0;
}
Plus the 960 Grid System CSS (for easy reference):
.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;position:relative;margin-left:10px;margin-right:10px}.container_12 .grid_3,.container_16 .grid_4{width:220px}.container_12 .grid_6,.container_16 .grid_8{width:460px}.container_12 .grid_9,.container_16 .grid_12{width:700px}.container_12 .grid_12,.container_16 .grid_16{width:940px}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_16 .grid_1{width:40px}.container_16 .grid_2{width:100px}.container_16 .grid_3{width:160px}.container_16 .grid_5{width:280px}.container_16 .grid_6{width:340px}.container_16 .grid_7{width:400px}.container_16 .grid_9{width:520px}.container_16 .grid_10{width:580px}.container_16 .grid_11{width:640px}.container_16 .grid_13{width:760px}.container_16 .grid_14{width:820px}.container_16 .grid_15{width:880px}.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_16 .prefix_1{padding-left:60px}.container_16 .prefix_2{padding-left:120px}.container_16 .prefix_3{padding-left:180px}.container_16 .prefix_5{padding-left:300px}.container_16 .prefix_6{padding-left:360px}.container_16 .prefix_7{padding-left:420px}.container_16 .prefix_9{padding-left:540px}.container_16 .prefix_10{padding-left:600px}.container_16 .prefix_11{padding-left:660px}.container_16 .prefix_13{padding-left:780px}.container_16 .prefix_14{padding-left:840px}.container_16 .prefix_15{padding-left:900px}.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_16 .suffix_1{padding-right:60px}.container_16 .suffix_2{padding-right:120px}.container_16 .suffix_3{padding-right:180px}.container_16 .suffix_5{padding-right:300px}.container_16 .suffix_6{padding-right:360px}.container_16 .suffix_7{padding-right:420px}.container_16 .suffix_9{padding-right:540px}.container_16 .suffix_10{padding-right:600px}.container_16 .suffix_11{padding-right:660px}.container_16 .suffix_13{padding-right:780px}.container_16 .suffix_14{padding-right:840px}.container_16 .suffix_15{padding-right:900px}.container_12 .push_3,.container_16 .push_4{left:240px}.container_12 .push_6,.container_16 .push_8{left:480px}.container_12 .push_9,.container_16 .push_12{left:720px}.container_12 .push_1{left:80px}.container_12 .push_2{left:160px}.container_12 .push_4{left:320px}.container_12 .push_5{left:400px}.container_12 .push_7{left:560px}.container_12 .push_8{left:640px}.container_12 .push_10{left:800px}.container_12 .push_11{left:880px}.container_16 .push_1{left:60px}.container_16 .push_2{left:120px}.container_16 .push_3{left:180px}.container_16 .push_5{left:300px}.container_16 .push_6{left:360px}.container_16 .push_7{left:420px}.container_16 .push_9{left:540px}.container_16 .push_10{left:600px}.container_16 .push_11{left:660px}.container_16 .push_13{left:780px}.container_16 .push_14{left:840px}.container_16 .push_15{left:900px}.container_12 .pull_3,.container_16 .pull_4{left:-240px}.container_12 .pull_6,.container_16 .pull_8{left:-480px}.container_12 .pull_9,.container_16 .pull_12{left:-720px}.container_12 .pull_1{left:-80px}.container_12 .pull_2{left:-160px}.container_12 .pull_4{left:-320px}.container_12 .pull_5{left:-400px}.container_12 .pull_7{left:-560px}.container_12 .pull_8{left:-640px}.container_12 .pull_10{left:-800px}.container_12 .pull_11{left:-880px}.container_16 .pull_1{left:-60px}.container_16 .pull_2{left:-120px}.container_16 .pull_3{left:-180px}.container_16 .pull_5{left:-300px}.container_16 .pull_6{left:-360px}.container_16 .pull_7{left:-420px}.container_16 .pull_9{left:-540px}.container_16 .pull_10{left:-600px}.container_16 .pull_11{left:-660px}.container_16 .pull_13{left:-780px}.container_16 .pull_14{left:-840px}.container_16 .pull_15{left:-900px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
All the background images in three divs #topgrafik, #middlebody and #footer disappear in IE.
Please help and thank you in advance.
I think the problem is the last slash in the image paths:
./images/footer.jpg/
I am not sure, but maybe, the dot may cause problems, too. You could describe a relative path just like this
images/footer.jpg
Have you tried removing the trailing slash in the image url?
Like this:
background: url('images/topgrafik.jpg') center top;