I am trying to use this tutorial (http://coolcarousels.frebsite.nl/c/23/) to create a carousel with products from my company. However, each product has a website that I would like to lead it to.
When I add a tag to any of the parts of this code, it works fine until only a few are links. But with all of it, it breaks and does not load sometimes for a few mins, or sometimes not at all. It sometimes requires to be refreshed before a user can see it.
<div>
<a href="http://minhasbrewery.com/lazymutt">
<img src="images/lazymutt/lazymutt_albertawheatale_02.png" alt="Lazy Mutt Alberta Wheat Ale" />
<span>Lazy Mutt Alberta Wheat Ale</span>
</a>
</div>
This is all I am changing and it seems to slow down the plugin.
/*=========================
CAROUSEL
==========================*/
.ourproducts{width:100%;
margin:0 auto;
overflow:hidden;
position:relative;
background:url(../images/pattern_bg.jpg);
}
#wrapper {
border-top: 1px solid #ccc;
width: 100% !important;
height: 50%;
margin-top: -1px;
position: static;
left: 0;
top: 50%;
}
.caroufredsel_wrapper{position:relative; z-index:400 !important; width:100% !important;}
#carousel {
margin-top: -100px;
background:inherit;
}
#carousel div {
text-align: center;
width: 2%;
max-width:200px;
height:auto;
float: left;
position: relative;
margin:0 0.5%;
margin-top:5%;
}
#carousel div img {
border: none;
width:100%;
display:block;
margin:0 auto;
margin-bottom:0;
}
#carousel div span {
display: none;
}
#carousel div:hover span {
background-color: #333;
color: #fff;
font-family:'hattori_hanzolight', sans-serif;
letter-spacing:1px;
font-size: 90%;
line-height: 110%;
display: inline-block;
width:auto;
min-width:200px;
padding: 5%;
margin: 0 0 0 -50px;
position: absolute;
top: -30px;
left: 50%;
border-radius: 2px;
}
and the Js is
<script src="js/jquery.carouFredSel-6.2.1.js"></script>
<script>
$(function() {
var $c = $('#carousel'),
$w = $(window);
$c.carouFredSel({
align: false,
items: 21,
scroll: {
items: 1,
duration: 2000,
timeoutDuration: 0,
easing: 'linear',
pauseOnHover: 'immediate'
}
});
$w.bind('resize.example', function() {
var nw = $w.width();
if (nw < 990) {
nw = 990;
}
$c.width(nw * 3);
$c.parent().width(nw);
}).trigger('resize.example');
});
</script>
I am not able to understand why this is breaking or disrupting the plugin, its simply a link so how does it after the load of this plugin and what would fix it?
So I used percentage(%) to make the width of each item resize with the window size and that was breaking it. The moment I changed it to and exact pixel amount it worked fine.
#carousel div {width:17px;}
Related
I have a masonry grid with some hover effects. The hover effects work fine in Chrome but they don't work in Safari. See code here:
http://codepen.io/ameliarae/pen/MbKjWv
When you hover over an image in Safari this is what happens:
The purple overlay doesn't slide out, doesn't go the full width of its container, and appears to be cropped both horizontally and vertically. In Chrome it is working as it should (sliding out & the purple overlay is the full width and height of the container).
Here's the relevant code:
HTML:
<article>
<section class="portfolio-item">
<div class="overlay">
<div class="text-bloq">
<p>How Truthful are Food Labels? Interactive Quiz</p><br>
<span class="type">Design & Dev</span>
</div>
</div>
</section>
</article>
SCSS:
article {
-moz-column-width: 16em;
-webkit-column-width: 16em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
section {
display: inline-block;
margin: 0.25rem;
padding: 1rem;
width: 100%;
background: $purple;
}
}
.overlay{
position:absolute;
width: 100%;
display: block;
top:0;
left: 0;
text-align: left;
font-size: 1.55em;
font-family: $light;
color: $white;
opacity: 0.8;
height: 100%;
background: $purple;
.text-bloq{
display: block;
position: absolute;
margin: 50% auto;
left: 0;
right: 0;
padding:1em;
.description{
font-family: $light;
font-size: 0.75em;
}
.type{
font-family: $light;
font-size: 0.75em;
padding: 0.5em 0.65em;
border: 2px solid $white;
margin-top: 1em;
}
}
}
.portfolio-item{
position:relative;
overflow:hidden;
background-size:cover;
background-position:100%;
&:hover{
cursor: pointer;
}
}
.portfolio-item:nth-child(1){
background-image:url('http://placehold.it/600x600');
min-height: 600px;
&:hover{
#include animation('animatedBackgroundWork 10s linear infinite');
}
}
jQuery:
$(document).ready(function(){
$(".portfolio-item").hover(function(){
$(this).find(".overlay").toggle("slide", { direction: "right" }, 1000);
});
});
Full code here: http://codepen.io/ameliarae/pen/MbKjWv
I just figured it out. I had to replace overflow:hidden with overflow:visible; to the .portfolio-item class to get it to work in Chrome & Safari.
So it looks like this now:
.portfolio-item{
position:relative;
overflow:visible;
background-size:cover;
background-position:100%;
&:hover{
cursor: pointer;
}
}
I have an iframe on my website that is populated when you click the Make an Appointment button. The iframe contains a contact form with several input fields.
Everything works fine, but for some reason on iOS (iPad and iPhone 5/6 - I tested Safari and Chrome) the form is draggable beyond its container's width and height. It should only be scrollable in the y-axis; like it is on Android devices. See screenshot below.
I've looked at numerous posts on S/O, but have yet to find any Q/A that pertains to this particular nuance of iOS devices/browsers.
Here is the code:
HTML:
<div id='button'><button id='contact'>MAKE AN APPOINTMENT</button></div>
<div id="block"></div>
<div id="iframecontainer">
<a id='close' href='#'>X</a>
<div id="loader"></div>
<iframe></iframe>
</div>
JQuery:
$('document').ready(function() {
$('#contact').click(function () {
$('#block').fadeIn();
$('#iframecontainer').fadeIn();
$('#header-wrapper').css("visibility", "hidden");
var width = $(window).width();
$('#iframecontainer iframe').attr('src', 'http://a-link-to-my-iframe.html');
if (width > 850) {
$('#iframecontainer').css('width', '790px');
$('#iframecontainer').css('margin-left', '-395px');
}
else {
$('#iframecontainer').css('width', '310px');
$('#iframecontainer').css('margin-left', '-155px');
}
$('#iframecontainer iframe').load(function() {
$('#loader').fadeOut(function() {
$('iframe').fadeIn();
});
});
});
And, the CSS:
#contact {
color: #c2c2c2;
background: #151515;
border: 1px solid #c2c2c2;
padding: 13px 26px;
text-decoration: underline;
font-family: inherit;
letter-spacing: 2px;
font-size: 18px;
margin: 0 auto;
}
#iframecontainer {
width:75%;
height: auto;
display: none;
position: fixed;
-webkit-overflow-scrolling:touch;
overflow-y: auto;
height:600px;
top: 10%;
background:#FFF;
border: 1px solid #666;
border: 1px solid #555;
box-shadow: 2px 2px 40px #222;
z-index: 999999;
left: 50%;
margin-left: -395px;
}
#iframecontainer iframe {
width: 100%;
height: 600px;
position: absolute;
border: none;
}
#loader {
width: 250px;
height: 250px;
margin:auto;
}
#block {
background: #000;
opacity:0.6;
position: fixed;
width: 100%;
height: 100%;
top:0;
left:0;
display:none;
}
And here is a screen shot of what I am referring to:
Is there a specific way to disable this on iOS devices?
Try to add scrolling="no" on the iframe and change some iframe CSS like,
#iframecontainer iframe {
width: 1px;/* Make it a very small for your viewport */
min-width:100%;/* Overwrite width. Let it decides the actual width of iframe */
height: 600px;
position: absolute;
border: none;
}
I am using bxslider, using a responsive design, multiple sliders and a popup window. The problem. I have the multiple sliders working and rescaling with browser size. The problem is with the popup. The popup cuts off the images.
Note: My javascript skills are very limited, so please explain as much as possible. Examples are always best for non-coders like me.
This post: Bxslider in a pop up div ... makes reference to the bx-viewport having a height of 0px (due to the fact that the initial image was hidden). So, the javascript tries to get the initial image size, but fails because no image was shown (no image = no image height). Once the second image is shown (due to the bxslider autoplay), the problem fixes itself.
I tried to use the solution on Bxslider in a pop up div but it didn't work with my code (it makes reference to monbxslider.js, which I do not use).
So, I see what is causing the problem ... but have no idea how to fix it. I've tried playing with the styles, but that doesn't work. Fixed height doesn't work, because each slider is different, and may have a different image. Below are snippets of my code....
Header Javascript info...
<link href="/js/jquery.bxslider.css" rel="stylesheet"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.bxslider.min.js"></script>
<!-- Popup Toggle -->
<script type="text/javascript">
function toggle_menu(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'block';
}
</script>
Styles for Popup
[id^="popup-"], div[id*=" popup-"] {
display:none;
}
.window {
display:block;
background:white;
position:fixed;
top:0; left:0;
margin:50px 5% 0 5%;
width:90%;
z-index: 1001;
}
.window .close {
width: 22px; height: 22px; background: #000; border-radius: 50%; border: 3px solid #fff; display: block; text-align: center; color: #fff; text-decoration: none; position: absolute; top: -10px; right: -10px; z-index: 1002;}
.window .bx-viewport { min-height:200px !important; }
.window .bx-viewport ul li img { width:100% !important; padding:10px; }
.window .bx-viewport ul li { width:100% !important; }
.windowoverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:rgba(0,0,0,0.8);
opacity:0.8;
filter:alpha(opacity=80);
z-index: 1000;
}
BxSlider CSS
/**
* BxSlider v4.1.2 - Fully loaded, responsive content slider
* http://bxslider.com
*
* Written by: Steven Wanderski, 2014
* http://stevenwanderski.com
* (while drinking Belgian ales and listening to jazz)
*
* CEO and founder of bxCreative, LTD
* http://bxcreative.com
*/
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
position: relative;
margin: 0 auto;
padding: 0;
/* *zoom: 1; */
}
.bx-wrapper img {
max-width: 100%;
display: block;
}
/** THEME
===================================*/
.bx-wrapper .bx-viewport {
background: #fff;
/*fix other elements on the page moving (on Chrome)*/
-webkit-transform: translatez(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
transform: translatez(0);
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
width: 100%;
}
/* LOADER */
.bx-wrapper .bx-loading {
min-height: 50px;
background: url(../images/bx_loader.gif) center center no-repeat #fff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color:#999;
padding-top: 20px;
}
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
*zoom: 1;
*display: inline;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #999;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
background: #FFF;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
left: 10px;
background: url(../images/controls.png) no-repeat 0 -32px;
}
.bx-wrapper .bx-next {
right: 20px;
background: url(../images/controls.png) no-repeat -43px -32px;
}
.bx-wrapper .bx-prev:hover {
background-position: 0 0;
}
.bx-wrapper .bx-next:hover {
background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 33px;
height: 31px;
text-indent: -9999px;
z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
text-align: center;
display:none; /*Hide Stop Button*/
}
.bx-wrapper .bx-controls-auto .bx-start {
display: block;
text-indent: -9999px;
width: 10px;
height: 11px;
outline: 0;
background: url(../images/controls.png) -86px -11px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
display: inline-block;
text-indent: -9999px;
width: 9px;
height: 11px;
outline: 0;
background: url(../images/controls.png) -86px -44px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
position:absolute;
bottom:10px;
text-align: center;
margin:0 auto;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 0;
width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666\9;
background: rgba(80, 80, 80, 0.75);
width: 100%;
}
.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}
HTML
<a href="javascript:void(0)" onclick="toggle_menu('popup-1">
<img src="/images/Feature1_300x300.jpg" alt="" />
</a>
<!-- Popup -->
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').bxSlider({
mode: 'fade',
auto: true,
autoControls: true,
pause: 90000,
adaptiveHeight: true
});
});
</script>
<div class="popup" id="popup-1">
<div class="window">
<a href="#" onclick="toggle_menu('popup-1');">
<div class="close">X</div>
</a>
<!-- Slider -->
<ul id="slider1">
<li><img src="/images/Feature1.jpg" /></li>
<li><img src="/images/Feature2.jpg" /></li>
<li><img src="/images/Feature3.jpg" /></li>
</ul>
</div>
<div class="windowoverlay"></div>
</div>
<!-- Popup END -->
Here is the site. Scroll down and click the van image for the popup:
http://www.amazingdg.com/clients/testsite/
Right now the popup starts as display:none. I tried making the display visible, and positioned "off screen", and then "move" the popup onto the visible screen when it is clicked. However, the height was still not recognized. Anyone out there with some ideas?
Figure it out...
When I call the popup, I activate the slider when the popup is displayed (changing display:none to display:block). I was doing it before the popup was called, and that was where the problem was. So the image "height" is activated when the popup is activated, and then the slider is run.
<script type="text/javascript">
function popupwin(Id) {
var winname = document.getElementById(Id);
if (winname.style.display == 'block') {
winname.style.display = 'none';
} else {
winname.style.display = 'block';
$('#slider<?php echo $slidr; ?>').bxSlider({
mode: 'fade',
auto: true,
autoControls: true,
pause: 90000,
adaptiveHeight: true
});
}
}
</script>
I'm running into a problem, and I'm not quite sure how to solve it.
Currently, when one hovers over this particular picture, the opacity drops down (revealing a background color) and type appears. The problem, is that I want it to continue to act as if it is hovered over, even when they hover over the type.
Should I try changing the z-index? For some reason that didn't work...
JSFIDDLE http://jsfiddle.net/4jrUp/
HTML
<a class="bg" href="">
<h1 class="first_title">FrameMonkey</h1>
<img class="portfolio-item" src="http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg">
<h3 class="first_description">A project that I've been working on since June - check back soon to see it in my portfolio!</h3>
</a>
CSS
.portfolio-item:hover {
overflow: hidden;
z-index: 1;
opacity:0.1;
}
.portfolio-item, .bg {
height: 200px;
width: 200px;
left: 0px;
border-radius:25px;
position:absolute;
}
.bg {
background-color: rgba(48, 48, 48, 0.9);
top: 100px;
display:inline-block;
}
.first_title {
position: absolute;
z-index: 100;
color:white;
left: 10px;
font-size: 15pt;
opacity: 0;
}
.first_description {
top: 50px;
position: absolute;
z-index: 100;
color:white;
left: 10px;
font-size: 12pt;
opacity: 0;
}
Javascript
$(".portfolio-item").hover(function () {
$(".first_description").css("opacity", "1");
$(".first_title").css("opacity", "1");
}, function () {
$(".first_description").css("opacity", "0");
$(".first_title").css("opacity", "0");
});
Thanks!
You actually don't need jQuery for this.
UPDATED EXAMPLE HERE - ( I added an optional transition in there too.. )
Make the parent element, .bg, block level, and set the border-radius and dimensions on it. The important part is that it's relatively positioned so that the children elements are absolutely positioned, relative to the parent.
.bg {
background-color: rgba(48, 48, 48, 0.9);
position:relative;
height:200px;
width:200px;
display:block;
border-radius:25px;
overflow:hidden;
}
The :hover part is quite simple actually, all you do is change the opacity.
.bg:hover .first_title, .bg:hover .first_description {
opacity:1;
}
.bg:hover .portfolio-item {
opacity:.1;
}
And the rest of the CSS:
.portfolio-item {
height: 200px;
width: 200px;
position: absolute;
}
.first_title, .first_description {
position: absolute;
color: white;
padding: 10px;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
z-index: 1;
opacity: 0;
}
.first_title {
font-size: 15pt;
}
.first_description {
top: 50px;
font-size: 12pt;
}
Try adding the hover event to the .bg instead of .portfolio item, that way you can remove the z-index.
The jQuery change
$(".bg").hover(function () {
$(this).children(".first_description").css("opacity", "1");
$(this).children(".first_title").css("opacity", "1");
}, function () {
$(this).children(".first_description").css("opacity", "0");
$(this).children(".first_title").css("opacity", "0");
});
And the CSS change
.first_title {
position: absolute;
//z-index: 100;
color:white;
left: 10px;
font-size: 15pt;
opacity: 0;
}
.first_description {
top: 50px;
position: absolute;
//z-index: 100;
color:white;
left: 10px;
font-size: 12pt;
opacity: 0;
}
See this fiddle
I am making a pop up on one of my project.
CSS Code
<style type="text/css">
#modalPage
{
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, 0.95);
z-index: 999;
}
.modalContainer
{
position: absolute;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
z-index: 999;
}
</style>
Content CSS
.modal
{
background-color: #6f9255;
position: relative;
top: -300px;
left: -305px;
z-index: 1000;
width: 600px;
overflow:auto;
}
JAVASCRIPT Code
<script type="text/javascript">
function myFunction() {
document.getElementById('modalPage').style.display = "block";
}
function hideModal()
{
document.getElementById('modalPage').style.display = "none";
}
</script>
HTML Code
<div id="modalPage">
<div class="modalContainer">
<div class="modal"> </div>
</div>
</div>
But the problem is that, it is fine but the opacity or page background which I putting on it, it is displaying on half page, not on full page.
Displaying by this code. background-color: rgba(0, 0, 0, 0.95);
Please tell me, where is the problem.
I can't keep the position fixed, because my pop up is longer then original page size and it is coming with scroll and cross the footer link too.
Any help will be appreciated.
Thanks
I think the problem is not related with an opacity issue. You say that your .modalContainer is 100% width and height but you start it at 50% top left. So the whole thing is 150% width and height, while #modalPage is only 100% width and height.
If you know the exact width and height of your container I suggest you to simply modify your css to center propertly the container. For example:
.modalContainer
{
position: absolute;
width: 50%;
height: 50%;
left: 25%;
top: 25%;
z-index: 999;
background-color: red; /*added to see where the container is*/
}
Working example:
http://jsfiddle.net/L2cXP/
If you want a modal longer than the page itself, i suggest a new approach.
We can ignore vertical centering because the modal is longer than the page. We just want that #modalPage has a overflow: auto property so it will show a scrollbar when its contents are longer than it.
Probably you would like to add an overflow: hidden property to the body when the modal shows to block the standard scrollbar of your page.
Check this working example:
http://jsfiddle.net/L2cXP/1/
try:
#modalPage {
position: fixed;
}
http://jsfiddle.net/68Sty/
.modalContainer has a "left" of 50%, so starting at halfway is expected. Try something like:
.modalContainer {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
right:0;
bottom:0;
z-index: 999;
}
try this
<div id="modalPage">
<div class='relative'>
<div class="modalContainer">
<div class="modal"> </div>
</div>
</div>
</div>
your css
.relative{
position:relative;
zoom:1;
height:100%;
width:100%;
}
A little CSS magic - and we have simple and nice CSS popups with no javascript positioning! consider this demo:
HTML:
<div id="modalPage" class="csspopup-overlay">
<div class="modalContainer csspopup-popup">
<div class="csspopup-close" onclick="hideModal()">×</div>
<div class="modal">Some modal content</div>
</div>
</div>
I define .csspopup-overlay and .csspopup-popup in CSS as follows:
.csspopup-overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
text-align: center;
}
.csspopup-overlay:after, .csspopup-valignfix {
display: inline-block;
*display: inline;
*zoom: 1;
height: 100%;
width: 0;
vertical-align: middle;
content: '';
}
.csspopup-popup {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
max-width: 80%;
padding: 15px;
box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
background: #FFF;
vertical-align: middle;
border-radius: 6px;
}
.csspopup-popup > .csspopup-close {
display: block;
position: absolute;
top: -15px;
right: -12px;
width: 12px;
height: 12px;
padding: 4px;
border: 4px solid #fff;
border-radius: 50%;
box-shadow: inset 0 2px 2px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, .4);
cursor: pointer;
background: #555;
color: #FFF;
text-align: center;
font-size: 12px;
line-height: 12px;
text-decoration: none;
font-weight: bold
}
Demo: http://jsfiddle.net/acA73/
Note: I extracted these CSS for you from https://github.com/dfsq/cssPopup jQuery plugin.