Sorry for asking a pretty common question however I couldn't find how to fix that problem anywhere, and I have no idea how this slideshow works.
I want that slideshow to pause on mouseover and continue on mouseleave.
Here is the code below:
$(function() {
$('#carousel').carouFredSel({
width: 800,
items: 4,
scroll: 1,
auto: {
duration: 1250,
timeoutDuration: 2500
},
prev: '#prev',
next: '#next',
pagination: '#pager',
});
});`
And the html code for the block:
<!DOCTYPE html>
<html>
<head>
<!--
This carousel example is created with jQuery and the carouFredSel-plugin.
http://jquery.com
http://caroufredsel.dev7studios.com
-->
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="description" value="This beautifull carousel centeres 3 images inside a wrapper with rounded corners. Note that this will not work in Chrome, due to it not being able to overflow content wrapped in rounded corners." />
<meta name="keywords" value="carousel, rounded, corners, jquery, example, pagination" />
<title>Carousel with 3 images centered in rounded corners</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel-6.1.0-packed.js" type="text/javascript"></script>
<script type="text/javascript" src="try.js"></script>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #f0f0f0;
min-height: 700px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 100px;
width: 800px;
height: 127px;
padding: 10px;
margin: -75px 0 0 -410px;
position: absolute;
left: 50%;
top: 50%;
}
.caroufredsel_wrapper {
border-radius: 90px;
}
#carousel img {
width: 201px;
height: 127px;
margin: 0 5px;
float: left;
}
#prev, #next {
background: transparent url( img/carousel_control.png ) no-repeat 0 0;
text-indent: -999px;
display: block;
overflow: hidden;
width: 15px;
height: 21px;
position: absolute;
top: 65px;
}
#prev {
background-position: 0 0;
left: 30px;
}
#prev:hover {
left: 29px;
}
#next {
background-position: -18px 0;
right: 30px;
}
#next:hover {
right: 29px;
}
#pager {
text-align: center;
margin: 0 auto;
padding-top: 20px;
}
#pager a {
background: transparent url(img/carousel_control.png) no-repeat -2px -32px;
text-decoration: none;
text-indent: -999px;
display: inline-block;
overflow: hidden;
width: 8px;
height: 8px;
margin: 0 5px 0 0;
}
#pager a.selected {
background: transparent url(img/carousel_control.png) no-repeat -12px -32px;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="carousel">
<img src="img/up1.jpg" />
<img src="img/up2.jpg" />
<img src="img/up3.jpg" />
<img src="img/up1.jpg" />
<img src="img/up4.jpg" />
<img src="img/up5.jpg" />
<img src="img/up6.jpg" />
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
<div id="pager"></div>
</div>
</body>
</html>
And the other two js file are in those link you can have a look.
jquery file second jquery file
You can see the current version at webmasteroutlet.com in the footer section. It doesn't pause on mouseover.
here is what i did if anyone wnats to use it i changed the scroll element and it works just fine
scroll: {
items: 1,
duration: 1250,
timeoutDuration: 2500,
easing: 'swing',
pauseOnHover: 'immediate'
},
Have you tried this on mouseover ??
$("#carousel").mouseover(function() {
$("#carousel").trigger('pause' ,true);
});
Related
I am very new to web development, but I have a simple card flip animation with javascript. It works fine until I add links to the back of the cards. Once I do this it will flip the correct card but open the links from the card above. I believe it has to do with event bubbling, but I am unable to find a solution that will work.
I want all cards to work like the first one. What I mean is that the card flips when clicked on and shows the information and the links that the user can click on if they want too.
const card = document.querySelectorAll(".card__inner");
function flipCard() {
this.classList.toggle('is-flipped');
}
card.forEach((card) => card.addEventListener("click", flipCard));
:root {
--primary: #FFCE00;
--secondary: #FE4880;
--dark: #212121;
--light: #F3F3F3;
/* bottom back color*/
}
* {
margin: 0;
padding: 0;
}
body {
font-family: montserrat, sans-serif;
width: 100%;
min-height: 100vh;
}
.card {
margin: 100px auto 0;
width: 400px;
height: 600px;
perspective: 1000px;
}
.card__inner {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.card__inner.is-flipped {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
border-radius: 16px;
box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.2);
}
.card__face--front {
background-image: url("iFoxify.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.card__face--front h2 {
color: rgb(0, 0, 0);
font-size: 32px;
}
.card__face--back {
background-color: var(--light);
transform: rotateY(180deg);
}
.card__content {
width: 100%;
height: 100%;
}
.card__header {
position: relative;
padding: 30px 30px 40px;
}
.card__header:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(to bottom left, var(--primary) 10%, var(--secondary) 115%);
z-index: -1;
border-radius: 0px 0px 50% 0px;
}
.pp {
display: block;
width: 128px;
height: 128px;
margin: 0 auto 30px;
border-radius: 50%;
background-color: rgb(0, 0, 0);
border: 5px solid rgb(0, 0, 0);
object-fit: cover;
}
.card__header h2 {
color: rgb(0, 0, 0);
font-size: 32px;
font-weight: 900;
/* text-transform: uppercase; */
text-align: center;
}
.card__body {
padding: 30px;
}
.card__body h3 {
color: var(--dark);
font-size: 24px;
font-weight: 600;
margin-bottom: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Card</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front">
<h2></h2>
</div>
<div class="card__face card__face--back">
<div class="card__content">
<div class="card__header">
<img src="iFoxify.png" alt="" class="pp" />
<h2>Swift and Java
<h2>
</div>
<div class="card__body">
<h3>iFoxify</h3>
<p>A simple app that shows random pictures of foxes.</p><br><br>
<p><a href="https://play.google.com/store/apps/details?id=com.LucasDahl.ifoxify" target="_blank">Google Play</p>
<p><a href="https://apps.apple.com/us/app/ifoxify/id1576016692" target = "_blank" >iOS</p>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front">
<h2></h2>
</div>
<div class="card__face card__face--back">
<div class="card__content">
<div class="card__header">
<img src="babysleep.png" alt="" class="pp" />
<h2>Swift<h2>
</div>
<div class="card__body">
<h3>Baby Sleepytime</h3>
<p>A simple white noise app.</p><br><br>
<p><a href="https://apps.apple.com/us/app/baby-sleepytime/id1480001818" target = "_blank" ><img alt="ApplePlayBadge" src="Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917.svg" width="200" height="70"></p>
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
You need to close out your <a> tags. You've left them open, so everything under the first tag is a link.
Change:
<p><a href = "https://play.google.com/store/apps/details?id=com.LucasDahl.ifoxify" target="_blank">Google Play</p>
To:
<p>Google Play</p>
Do that for all the card links.
I have a function when the "user" click on the button shows an image, but each button shows a different image. So what I'm looking for is when the user clicks on another button the image of the previous one is hidden
And I also need some advice or a guide to do a doubleclick function, keep the id and it is shown in a text
I'm using javascript, but I also believe that there is a way using jquery
Sorry my English is not the best, although I think I understand.
function showimage(id) {
var element = document.getElementById(id);
if (element.classList) {
element.classList.toggle(id);
} else {
var classes = element.className.split(" ");
var i = classes.indexOf(id);
if (i >= 0)
classes.splice(i, 1);
else
classes.push(id);
element.className = classes.join(" ");
}
}
html {
overflow: ;
}
.background {
filter: blur(5px);
-webkit-filter: blur(5px);
width: 100%;
height: 100%
}
#font-face {
font-family: 'avenir';
src: url(../fonts/Avenir Next Heavy.otf)
}
#font-face {
font-family: 'Avenir Next LT Pro Heavy Condensed Italic';
font-style: normal;
font-weight: normal;
src: url(../fonts/AvenirNextLTPro-HeavyCnIt.woff) format('woff');
}
.general {
background-image: url(../img/miSlJSc.png);
position: absolute;
top: 0%;
left: -1%;
width: 1584px;
height: 900px;
}
.contain1 {
background: rgba(0, 0, 0, 0.0);
position: absolute;
left: 100px;
top: 258px;
width: 1048px;
height: 254px
}
.contain2 {
background: rgba(0, 0, 0, 0.0);
position: absolute;
left: 100px;
top: 526px;
width: 1048px;
height: 254px;
}
button {
background: #005F38;
background: rgba(0, 95, 56, 1);
border-style: Solid;
border-color: #112302;
border-color: rgba(17, 35, 2, 1);
border-width: 1px;
position: absolute;
left: 439px;
top: 822px;
width: 359px;
height: 60px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px
}
#comprar {
left: 1185px
}
.styletext {
font-family: Avenir Next LT Pro Heavy Condensed Italic;
font-size: 40px;
color: #FCFCFC;
color: rgb(252, 252, 252);
}
.boxsmall {
background: #000000;
background: rgba(0, 0, 0, 0.3);
position: relative;
top: -14px;
left: 0px;
width: 117px;
height: 120px;
margin-left: 10px;
margin-top: 14px;
border-width: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px
}
.boxbig {
background: rgba(0, 0, 0, 0.3);
position: relative;
left: 0%;
top: -5%;
width: 249px;
height: 120px;
margin-left: 10px;
margin-top: 14px;
border-width: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px
}
.boxsellect {
background: #000000;
background: rgba(0, 0, 0, 1);
opacity: 0.65;
position: absolute;
left: 898px;
top: 526px;
width: 249px;
height: 120px
}
.icon * {
position: relative;
top: 0px;
left: -15px;
width: 135px;
height: 33px;
transform: rotate(315deg)
}
#botella .icon * {
width: 130px;
height: 35px
}
#punoAmericano .icon * {
width: 70px;
height: 35px;
left: 0px
}
.icon-p * {
left: -10px;
width: 92px;
height: 72px;
}
#pistol_mk2 .icon-p {
transform: scale(1.0, 1.0);
left: -20px;
}
.statsPistol {
width: 100%;
padding: 70px 105px;
background-image: url(https://image.flaticon.com/icons/svg/53/53524.svg);
position: absolute;
top: -270px;
left: 1090px
}
.statsPistolmk2 {
width: 100%;
padding: 70px 105px;
background-image: url(https://image.flaticon.com/icons/svg/1034/1034131.svg);
position: absolute;
top: -270px;
left: 1090px
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="style/styles.css" type="text/css">
<style>
/*.general {display: none;}*/
</style>
</head>
<body>
<div class="full-screen">
<div class="general">
<div class="contain2">
<button class="boxsmall" id="pistol" onclick="showimage('statsPistol')">
<div class="icon-p">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
<div id="statsPistol">
</div>
</button>
<button class="boxsmall" id="pistol_mk2" onclick="showimage('statsPistolmk2')">
<div class="icon-p">
<img src="img/pistolas/Pistol-mk2-icon.png">
</div>
<div id="statsPistolmk2">
</div>
</button>
</div>
<button class="styletext" id="comprar">Comprar</button>
<button class="styletext" id="salir">Salir</button>
</div>
</div>
</body>
</html>
This is not at all difficult to do using jQuery. Just hide all the images (including those that aren't showing), and show the one that has been clicked. You don't need to worry about hiding only the previous image, because you don't have enough buttons to improve perceived performance if you do.
The code works like this:
When you click on an element with the class boxsmall:
Hide all images that are inside any element with the class boxsmall.
Show the image that is inside the element that has been clicked.
A couple of other bits of advice:
Don't have any HTML elements with the same id. If you don't need an id, just leave it out.
Don't set duplicate CSS properties, as you have with some of your background and color properties. The lower of the two will override the upper one, so there's no point to it.
$(document).ready(function($) {
$('.boxsmall').on('click', function(e) {
$('.boxsmall img').hide();
$(this).find('img').show();
});
});
.boxsmall {
width: 122px;
height: 122px;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="full-screen">
<div class="general">
<div class="contain1">
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
<button class="boxsmall">
<div class="icon">
<img src="https://image.flaticon.com/icons/svg/42/42829.svg">
</div>
</button>
</div>
</div>
</div>
</body>
I am using the slick slider library. On page load, my slider wrapper is set to display: none. When I click my trigger click button, it then shows the slider, but the first slide doesn't show. Then when the second slide shows, the height isn't correct.
I have read through articles that share my issue, such as this one:
https://github.com/kenwheeler/slick/issues/158
Here is the library:
https://github.com/kenwheeler/slick
I have tried initializing the slider and then adding visibility: visible to it, but that does not seem to work.
Does anyone see or know what I have to add to get the first slide to fully show after being triggered?
Here is a fiddle which shows the issue I am having.
$('#trigger').on('click', function() {
$('#pg-preview-wrap').show();
});
$('#calendar-select').on('init', function() {
$('#calendar-select').css("visibility", "visible");
$('.slick-initialized').css("visibility", "visible");
});
$('#calendar-select').slick({
dots: true,
infinite: true,
autoplay: true,
autoplaySpeed: 7000,
speed: 800,
slidesToShow: 1,
adaptiveHeight: true
});
#pg-preview-wrap {
display: none;
}
#calendar-select {
width: 50%;
margin: 0 auto 70px auto;
background: #CCC;
visibility: hidden;
height: auto;
}
.no-fouc {
display: none;
}
.slick-initialized {
visibility: visible;
}
.slick-slide img.checkmark-img {
display: none;
width: 40%;
height: auto;
z-index: 1;
cursor: pointer;
}
.slick-slide img.pg-preview-img {
display: block;
}
.calendar-option img {
margin: 20px auto;
cursor: pointer;
width: 50%;
height: auto;
display: block;
}
.calendar-option-push {
width: 0;
height: 20px;
border: none;
margin: 20px auto;
}
.calendar-option cite {
text-align: center;
font-size: 1.25rem;
margin: auto;
color: #303030;
font-family: 'Lato', sans-serif;
display: block;
}
.slick-prev,
.slick-next {
background-repeat: no-repeat;
background-size: 120px 120px;
height: 120px;
width: 120px;
}
.slick-prev {
left: -130px;
background-image: url("images/arrow-back.png");
}
.slick-prev:hover,
.slick-prev:active,
.slick-prev:focus {
background-image: url("images/arrow-back.png");
}
.slick-prev:hover,
.slick-prev:active,
.slick-prev:focus,
.slick-next:hover,
.slick-next:active,
.slick-next:focus {
background-repeat: no-repeat;
background-size: 120px 120px;
}
.slick-next {
right: -130px;
background-image: url("images/arrow-forward.png");
}
.slick-next:hover,
.slick-next:active,
.slick-next:focus {
background-image: url("images/arrow-forward.png");
}
.slick-prev:before,
.slick-next:before {
font-size: 0px;
}
.slick-dots {
margin: 15px 0 20px 0;
}
.white-back {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
background: #FFF;
}
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<button id="trigger">Trigger</button>
<div id="pg-preview-wrap">
<div id="calendar-select">
<div class="calendar-option">
<div class="product-wrap">
<label for="flag-option" class="package-check-toggle">
<img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='American Flag' class='pg-preview-img'>
<p class="calendar-option-push"></p>
<cite>A</cite>
</label>
<input type="checkbox" class="option-check" id='flag-option'>
</div>
</div>
<div class="calendar-option">
<div class="product-wrap">
<label for="nickel-option" class="package-check-toggle">
<img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='Brushed Nickel & Black' class='pg-preview-img'>
<p class="calendar-option-push"></p>
<cite>B</cite>
</label>
<input type="checkbox" class="option-check" id='nickel-option'>
</div>
</div>
<div class="calendar-option">
<div class="product-wrap">
<label for="gold-option" class="package-check-toggle">
<img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='Gold & Black' class='pg-preview-img'>
<p class="calendar-option-push"></p>
<cite>C</cite>
</label>
<input type="checkbox" class="option-check" id='gold-option'>
</div>
</div>
</div>
</div>
Probably not a straight forward solution to your problem, you could destroy and reinitialize the slider after it's visible.
var options = {
dots: true,
infinite: true,
autoplay: true,
autoplaySpeed: 7000,
speed: 800,
slidesToShow: 1,
adaptiveHeight: true
}
$('#trigger').on('click', function() {
$('#pg-preview-wrap').show();
$('#calendar-select').slick('unslick');
$('#calendar-select').slick(options);
});
$('#calendar-select').on('init', function() {
//$('#calendar-select').css("visibility", "visible");
//$('.slick-initialized').css("visibility", "visible");
});
$('#calendar-select').slick(options);
#pg-preview-wrap {
display: none;
}
#calendar-select {
width: 50%;
margin: 0 auto 70px auto;
background: #CCC;
height: auto;
}
.no-fouc {
display: none;
}
.slick-initialized {
visibility: visible;
}
.slick-slide img.checkmark-img {
display: none;
width: 40%;
height: auto;
z-index: 1;
cursor: pointer;
}
.slick-slide img.pg-preview-img {
display: block;
}
.calendar-option img {
margin: 20px auto;
cursor: pointer;
width: 50%;
height: auto;
display: block;
}
.calendar-option-push {
width: 0;
height: 20px;
border: none;
margin: 20px auto;
}
.calendar-option cite {
text-align: center;
font-size: 1.25rem;
margin: auto;
color: #303030;
font-family: 'Lato', sans-serif;
display: block;
}
.slick-prev,
.slick-next {
background-repeat: no-repeat;
background-size: 120px 120px;
height: 120px;
width: 120px;
}
.slick-prev {
left: -130px;
background-image: url("images/arrow-back.png");
}
.slick-prev:hover,
.slick-prev:active,
.slick-prev:focus {
background-image: url("images/arrow-back.png");
}
.slick-prev:hover,
.slick-prev:active,
.slick-prev:focus,
.slick-next:hover,
.slick-next:active,
.slick-next:focus {
background-repeat: no-repeat;
background-size: 120px 120px;
}
.slick-next {
right: -130px;
background-image: url("images/arrow-forward.png");
}
.slick-next:hover,
.slick-next:active,
.slick-next:focus {
background-image: url("images/arrow-forward.png");
}
.slick-prev:before,
.slick-next:before {
font-size: 0px;
}
.slick-dots {
margin: 15px 0 20px 0;
}
.white-back {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
background: #FFF;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Slick JS</title>
</head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css">
<body>
<button id="trigger">Trigger</button>
<div id="pg-preview-wrap">
<div id="calendar-select">
<div class="calendar-option">
<div class="product-wrap">
<label for="flag-option" class="package-check-toggle">
<img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='American Flag' class='pg-preview-img'>
<p class="calendar-option-push"></p>
<cite>A</cite>
</label>
<input type="checkbox" class="option-check" id='flag-option'>
</div>
</div>
<div class="calendar-option">
<div class="product-wrap">
<label for="nickel-option" class="package-check-toggle">
<img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='Brushed Nickel & Black' class='pg-preview-img'>
<p class="calendar-option-push"></p>
<cite>B</cite>
</label>
<input type="checkbox" class="option-check" id='nickel-option'>
</div>
</div>
<div class="calendar-option">
<div class="product-wrap">
<label for="gold-option" class="package-check-toggle">
<img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='Gold & Black' class='pg-preview-img'>
<p class="calendar-option-push"></p>
<cite>C</cite>
</label>
<input type="checkbox" class="option-check" id='gold-option'>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
</body>
</html>
I couldn't find any reInit method, otherwise that could have been used. Here is fiddle of the above code.
You need to use .slick("slickRemove") to remove all the slides you want to replace, and then .slick("slickAdd") to add the new ones. Small examples is below,
` slickSlider: function () {
$('#claim_slider').slick({
infinite: true,
slidesToShow: 6,
slidesToScroll: 1,
arrows:true
});
}
$(document).ready(function(){
$('.ticket-claims a').on('click', function() {
$('#claim_slider').slick("slickRemove");
$('#claim_slider').slick("slickAdd");
});
});
`
I am trying to make a website with a sidebar with settings and such, and I want the sidebar to slide out and the content should just resize. I am trying to make it look like a clean animation. Although when I try it, the content just slides down below the sidebar. I have no idea why. Here is my code.
Links
<!-- Latest Bootstrap V4 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<!-- Font Awesome V4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- JQuery V2.1.4 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Bootstrap V4 Javascript -->
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
HTML
<div class="row all">
<div id="infobox" class="col-md-4">
test
</div>
<div id="content" class="col-md-8">
<nav id="bar">
<i class="fa fa-bars" id="info" title="Info"></i><div id="title" class="text-center">test</div>
</nav>
<div id="chat">
t
</div>
<div id="input">
<input type="text" class="form-control" id="text" placeholder="Enter chat here">
<button type="button" class="btn btn-success" id="send">Send</button>
</div>
</div>
</div>
CSS
html, body{
height: 100%;
width: 100%;
}
.ui-effects-wrapper{
float: right;
}
#text, #send{
border-radius: 0px;
float: left;
}
#text{
width: 90%
}
#send{
width: 10%;
}
#bar{
background-color: #F0F0F0;
padding: .5rem 1rem;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #373a3c;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
display: inline;
}
#bar #title{
color: rgba(0,0,0,.8);
font-size: 1.25rem;
padding-top: .25rem;
padding-bottom: .25rem;
text-decoration: none;
text-align: center;
display: inline;
margin-left: 45%;
margin-right: 45%;
}
#chat{
position: absolute;
top: 8%;
bottom: 5%;
left: 0%;
right: 0%;
overflow: auto;
min-height: 87%;
}
#input{
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
// min-height: 5%;
}
#content{
position: relative;
height: 100%;
float: left;
/*width: auto;*/
}
#infobox{
background-color: #D9D9D9;
/*position: relative;*/
height: 100%;
}
.all{
height: 100%;
width: 100%;
margin: 0;
}
Javascript
$(function () {
$("#send").click(function () {
alert("test");
$("#chat").html(document.getElementById("text").value);
document.getElementById("text").value = "";
return false;
});
$("#info").click(function () {
if($("#infobox").is(":visible")){
$("#infobox").hide("slide", { direction: "left" }, 1000);
$("#content").animate({
width: "100%",
float: "left"
}, 1000, "", function () {
// alert("all done");
});
}else{
$("#content").animate({
width: "66.666667%",
float: "left"
}, 1000, "", function () {
// alert("all done");
});
$("#infobox").show("slide", { direction: "left" }, 1000);
}
});
});
Example: http://jsbin.com/zivuzipoju/
Thanks to Rudy Setiady I was able to have an idea of what to do, then I was stumped because for some odd reason there was some sort of padding or something that chrome was not able to find. So I just set the initial width to 150% so that it looked like it was full screen. Then when the sidebar came out, I would set it to 100%. When I did this, of course there would be a scrollbar. So to fix that, I just set overflow: hidden on body.
Recently, my friend helped me fix a background overlay problem. I had an issue where if the dialog height extended beyond the original website background, it would cut off the overlay right in the middle. His fix solved it.
But now I have a minor but annoying problem. Every time I open a very long dialog, then a short one, the stretched scroll bars from the longer remains. Like when I open the short afterwards, I can scroll down way beyond the background like with the longer, but I can only see the overlay. I don’t think the settings are unloading properly once the dialog is closed.
Is there a way around this? Thank you.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/global.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="Meta" -->
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="doctitle" -->
<title>Ricky Tsang | Book | Bonus Features</title>
<!-- InstanceEndEditable -->
<link href="../../css/default.css" type="text/css" rel="stylesheet" />
<link href="../../css/plugins/jquery.jscrollpane.css" type="text/css" rel="stylesheet" />
<link href="../../css/plugins/custom-theme/jquery-ui-1.8.12.custom.css" type="text/css" rel="stylesheet" />
<link rel="shortcut icon" type="image/x-icon" href="http://www.dearricky.com/_rickytsang-ca/favicon.ico">
<!--[if IE 7]>
<link href="../css/ie7.css" type="text/css" rel="stylesheet" />
<![endif]-->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<style>
a img {
border:0
}
</style>
<noscript>
<style>
#header #inner { width: 820px; }
#mainmenu { visibility: visible; }
</style>
</noscript>
</head>
<body class="oneColElsCtrHdr">
<div id="header">
<div id="top">
<img src="../../images/logo.png" border="0" usemap="#Map" class="Logo" />
<map name="Map" id="Map">
<area shape="circle" coords="85,11,3" href="../../bird/" />
</map>
</div>
<div id="inner">
<div id="mainmenu">
<ul>
<li>
HOME
</li>
<li>
RICKY
<div class="sub">
<ul>
<li>About Ricky</li>
<li>Disability</li>
<li>Writing</li>
<li>Questions & Answers</li>
</ul>
<div class="clear"></div>
</div>
</li>
<li>
JOURNAL
</li>
<li>
ADVICE
<div class="sub">
<ul>
<li>4 Steps To Mending A Broken Heart</li>
</ul>
<div class="clear"></div>
</div>
</li>
<li>
BOOK
<div class="sub">
<ul>
<li>Ridiculous</li>
<li>Excerpts</li>
<li>Bonus Features</li>
<li>Where To Buy</li>
</ul>
<div class="clear"></div>
</div>
</li>
<li>
MUSIC
</li>
<li>
FORUM
</li>
<li>
INFORMATION
<div class="sub">
<ul>
<li>News</li>
<li>Contact</li>
<li>Links</li>
<li>Website</li>
</ul>
<div class="clear"></div>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<div id="container">
<!-- InstanceBeginEditable name="AboveContainer" -->
<!-- InstanceEndEditable -->
<div id="topContent"></div>
<div id="mainContent">
<!-- InstanceBeginEditable name="MainContent" -->
<div id="fixedHeightContent">
<h1 align="justify">Bonus Features</h1>
<p><strong><em>Ridiculous: The Mindful Nonsense of Ricky’s Brain</em> is jam-packed with hundreds of pages of writing, but there are always limitations when it comes to books. Below are some extras that readers may find entertaining, kind of like a DVD!</strong></p>
<h2><strong><u>From The Book (with excerpts)</u></strong></h2>
<p><strong>The Girl Who Saved My Life</strong><br />
A true story about an amazing girl who stole my heart. Includes a photo and video of interesting items.</p>
<p><strong>Ricky’s Adventures In Bikini Land</strong><br />
A satirical recount of my “adventures” in Niagara Falls. Includes a window scene photo from the room where my family and I stayed.</p>
<p><strong>The Brain Behind His Words</strong><br />
A brutally honest narrative of the things that go on inside my head. Includes a full-size photo of myself that was an inspiration for the piece.</p>
<p><strong>Ricky’s Moments Of WTF?!</strong><br />
About the stranger happenings in the life of yours truly. Includes a few photos of… embarrassing things.</p>
<p><strong>Appreciating Mothers: The How-To Guide</strong><br />
A comical yet hopefully endearing guide on how to appreciate mothers. Includes a poem I wrote about the uterus.</p>
<h2><strong><u>Pages That Didn’t Make It</u></strong>
</h2>
<p><strong>Ricky’s Romantic Analogies</strong><br />
No matter how much I edited this entry, it continued to remain… corny. Though, it did become a pivotal part of the romantic ideas for my following writings.</p>
<p><strong>Monkey See, Monkey Do</strong><br />
This one seemed a little out of place for the book, despite the title. It also had too many photos that only look good in colour.</p>
</div>
<!-- InstanceEndEditable -->
</div>
<div id="bottomContent"></div>
</div>
<div id="footer">
<div class="social">
<ul>
<li><img src="../../images/icons/facebook.png" /></li>
<li><img src="../../images/icons/twitter.png" /></li>
</ul>
</div>
<div class="copyright">
Copyright © 2011 Ricky Wai Kit Tsang. All rights reserved.
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="../../scripts/global.js"></script>
<script type="text/javascript" src="../../scripts/plugins/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../scripts/plugins/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="../../scripts/plugins/jquery.hoverIntent.js"></script>
<script type="text/javascript" src="../../scripts/plugins/jquery.mousewheel.js"></script>
<script type="text/javascript" src="../../scripts/plugins/jquery.jscrollpane.js"></script>
<script type="text/javascript">
$(function() {
$("#fixedHeightContent").jScrollPane({
showArrows: true
});
});
</script>
<!-- InstanceBeginEditable name="Scripts" -->
<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>
CSS:
body {
background: url("../images/backgrounds/glowing-clouds.jpg") no-repeat scroll center 130px #000;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
color: #000;
margin-bottom: 20px;
margin-top: 0px;
}
h2 {
color: #000;
font-size: 16px;
}
p {
font-size: 14px;
line-height: 18px;
margin-bottom: 10px;
margin-top: 0px;
}
.clear {
clear: both;
}
#container {
width: 880px;
margin: 20px auto 0px auto;
text-align: left;
}
#topContent {
background-image: url("../images/backgrounds/slider-top.png");
background-repeat: no-repeat;
height: 15px;
margin-top: 40px;
width: 880px;
}
#mainContent {
background: transparent url("../images/backgrounds/slider-body.png") repeat-y scroll 0 0;
hasLayout: false;
padding: 1px 15px;
width: 850px;
}
#fixedHeightContent {
height: 440px;
outline: none;
overflow: auto;
padding: 20px;
width: 810px;
}
#bottomContent {
background-image: url("../images/backgrounds/slider-bottom.png");
background-repeat: no-repeat;
height: 15px;
width: 880px;
}
#floatContent {
overflow: hidden} /**clears floats**/
.RightCaptions {/** container **/
float: right;
width: auto;
height:auto;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}
.LeftCaptions {/** container **/
float: left;
width: auto;
height:auto;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}
.RightCaptions p, .LeftCaptions p {/** text captions **/
text-align: center;
font-style: italic;
font-size: small;
text-indent: 0;
}
#header {
margin: 0px 0px 10px;
position: relative;
}
#header #top {
background-color: #000;
margin: 0px auto;
}
#header #inner {
margin: 0px auto;
width: 820px;
}
#header img.Logo {
padding: 25px 0px 20px 0px;
position: relative;
}
#mainmenu {
float: right;
}
#mainmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#mainmenu ul li {
display: block;
float: left;
}
#mainmenu ul li a {
color: #fff;
display: block;
font-size: 14px;
font-weight: bold;
height: 35px;
line-height: 35px;
padding: 0px 15px;
}
#mainmenu ul li a:hover {
color: #999;
text-decoration: none;
}
#mainmenu ul li a.parent {
background: transparent url("../images/menu/menu-down.png") no-repeat center right;
margin-right: 15px;
}
#mainmenu .sub {
border: solid 1px #fff;
display: none;
position: absolute;
z-index: 1000;
}
#mainmenu .sub ul {
margin: 0px;
}
#mainmenu .sub li {
border: none;
display: block;
float: left;
height: auto;
padding: 0px;
width: auto;
}
#mainmenu .sub a {
color: #fff;
display: block;
font-size: 12px;
height: auto;
line-height: 16px;
padding: 5px 8px 7px;
text-align: left;
}
#mainmenu .sub a:hover {
background-image: none;
}
#footer {
margin: 0px auto;
padding-bottom: 60px;
width: 850px;
position: relative;
text-align: center;
}
#footer .social {
position: absolute;
top: 0;
left: 10px;
}
#footer .social ul {
list-style: none;
margin: 10px 0px 0px;
padding: 0px;
}
#footer .social li {
float: left;
margin-right: 5px;
}
#footer .social img {
border: 0px;
}
#footer .copyright {
color: #fff;
line-height: 32px;
margin-top: 10px;
}
/*******************************
* Controls
******************************/
.ImageRotator {
overflow: hidden;
position: relative;
width: 850px;
}
.ImageRotator ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 9999px;
}
.ImageRotator ul li {
display: block;
float: left;
height: 440px;
width: 850px;
overflow: hidden;
}
.ImageRotator ul li img.gallery {
border: 0px;
height: 630px;
width: 850px;
}
.ImageRotator .toolbar {
background: url("../images/backgrounds/slider-toolbar.png") repeat scroll 0 0 transparent;
bottom: 0px;
color: #fff;
height: 36px;
left: 0px;
position: absolute;
width: 850px;
z-index: 100;
}
.ImageRotator .toolbar .desc {
font-weight: bold;
margin: 10px;
text-align: center;
}
.ImageRotator .toolbar .pages {
margin: 5px;
position: absolute;
right: 0px;
}
.ImageRotator .toolbar .pages div {
background: url("../images/backgrounds/page.png") repeat scroll 0 0 transparent;
color: #999;
cursor: pointer;
float: left;
font-weight: bold;
height: 22px;
padding-top: 6px;
text-align: center;
width: 28px;
}
.ImageRotator .toolbar .pages div.Active {
color: #0f75a7;
}
/*******************************
* Pages
******************************/
.popupDialog {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
}
Script:
<script type="text/javascript">
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: false,
closeOnEscape: true,
width: '900',
height: 'auto',
modal: true,
title: 'Bonus Features',
autoResize: true,
beforeClose: function(){ $(this).remove(); }
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] ).bind('dialogopen', function() {
adjustJQueryDialogOverlay();
});
$(this).dialog("open");
});
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});
</script>
Well, you're not supposed to be required to do this, but when I ran into this same sort of problem, the easiest/quickest fix I found was to call the dialog's destroy method before I create a new one. So you'd try something like this:
$(".ui-dialog-content").dialog("destroy");
This goes immediately before the area in your script in which you set up the new dialog.
HTH.
Edit: As requested:
<script>
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>").dialog("destroy");
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: false,
closeOnEscape: true,
width: '900',
height: 'auto',
modal: true,
title: 'Bonus Features',
autoResize: true,
beforeClose: function(){ $(this).remove(); }
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] ).bind('dialogopen', function() {
adjustJQueryDialogOverlay();
});
$(this).dialog("open");
});
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("destroy");
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});
</script>
Should only need to update the script part.
So here is the answer from my friend.
Basically, the overlay is a jQuery bug and I had to search around for a workaround as my resize method which you discovered had a little flaw :P So what you can do is change the openDialog method line to (we won't call adjustJQueryDialogOverlay method):
$(this).dialog("option", "position", ['center', 'center'] );
$(this).dialog("open");
And you also need to update the jquery-ui-1.8.11.custom.css line 41. Change the position from absolute to fixed and hopefully this will solve the background issue!
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: false,
closeOnEscape: true,
width: '900',
height: 'auto',
modal: true,
title: 'Bonus Features',
beforeClose: function(){ $(this).remove(); }
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] );
$(this).dialog("open");
});
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});