I'm using the Foundation framework and Orbit. I've built the slider here: http://www.abricot-production-dev.co.uk/group-two/gallery.html#
but the thumbs are not changing the main pics at the moment.
My code:
<div id="slider">
<img src="images/slider/image-01.jpg" data-thumb="image-01.jpg" data-caption="#captionOne"/>
<img src="images/slider/image-02.jpg" data-thumb="image-02.jpg" data-caption="#captionTwo"/>
<img src="images/slider/image-03.jpg" data-thumb="image-03.jpg" data-caption="#captionThree"/>
</div>
<span class="orbit-caption" id="captionOne">Here is another caption...</span>
<span class="orbit-caption" id="captionTwo">Here is a caption 2...</span>
<span class="orbit-caption" id="captionThree">And here is a caption 3...</span>
<ul class="orbit-bullets">
<li class="has-thumb" style="background-image: url(images/slider/thumbs/image-01.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; ">1</li>
<li class="has-thumb" style="background-image: url(images/slider/thumbs/image-02.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; ">2</li>
<li class="has-thumb" style="background-image: url(images/slider/thumbs/image-03.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; ">3</li>
</ul>
</div>
Initialised:
<script>
$(window).load(function() {
$("#slider").orbit();
});
</script>
And in foundation.min.js:
bullets:!1, bulletThumbs:!0, bulletThumbLocation:"../images/slider/thumbs/"
What am I missing?
Andy
I found this solution:
http://foundation.zurb.com/docs/components/orbit.html
Implementation:
<ul class="disc">
<li class="has-thumb" style="background-image: url(images/slider/thumbs/image-01.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; "data-orbit-link="headline-1">1</li>
<li class="has-thumb" style="background-image: url(images/slider/thumbs/image-02.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; " data-orbit-link="headline-2">2</li>
<li class="has-thumb" style="background-image: url(images/slider/thumbs/image-03.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat; " data-orbit-link="headline-3">3</li>
</ul>
Hope it works.
Cheers.
Related
Here is my html template of my image and header I want to align t text in side that image
<ion-slides *ngIf="getData.length>0" autoplay="2700" speed="300" class="slideroption" pager="true" loop="true">
<ion-slide *ngFor="let item of getData" (click)="openItem(item)">
<img src="{{item.jetpack_featured_media_url}}" class="new-collection"/>
<h4 [innerHTML]="item.title.rendered"></h4>
</ion-slide>
</ion-slides>
You can use ion-card
html
<ion-slides *ngIf="getData.length>0" autoplay="2700" speed="300" class="slideroption" pager="true" loop="true">
<ion-slide *ngFor="let item of getData" (click)="openItem(item)">
<ion-card class="myCard">
<img src="{{item.jetpack_featured_media_url}}" class="new-collection"/>
<div class="myOverlay">
<div class="card-title">{{ item.title.rendered }}</div>
<div class="card-subtitle">{{ some subtitle you like }}</div>
</div>
</ion-card>
</ion-slide>
</ion-slides>
And some styling
css
img{
width:100%;
height:100%;
}
.myCard{
position:relative;
}
.myOverlay{
width: 100%;
height: 40%;
padding-top:5%;
text-align: center;
position: absolute;
z-index: 99;
bottom: 20%;
opacity: 0.5;
color: white;
font-weight: bold;
background-color: black;
}
Working-demo
Refer to the below Measurement of limbs image.
where you can see rectangles and circles where measurement values should be entered. like left side rectangle shows height of leg etc. I want this rectangle as html form field. What I did is i know pathetic one like.
I put image in background of a div and in div put this
#txtDiv1 {
position: absolute;
left: 36px;
top: 10px;
width: 50px;
height: 32px;
z-index: 100;
}
<div id="txtDiv1"><input name="leglength" type="text" style="width:30px; height:20px; border:none" /></div>
So for all input fields I did the same. Can some body tell me how to make it more professional as i m not satisfy with this approach.
Expanding on my comment, you can use a similar layout discussed in this article: https://alistapart.com/article/prettyaccessibleforms
Most of it is simple HTML and CSS, the advantage is now you have more control than just assigning boxes to specific locations on the image. You will also notice more containers, this helps in identifying specific entries. Remember that all this data has to be captured later and stored somehow.
#form-1 .form-background {
background-image: url('https://i.stack.imgur.com/P2W8v.png');
background-repeat: no-repeat;
height: 400px;
}
#form-1 .form-background label {
display: block;
background: white;
text-align: center;
height: 30px;
}
#form-1 .right-leg {
background-position: 0 -10px;
display: inline-block;
width: 175px;
}
#form-1 .left-leg {
background-position: -200px -11px;
width: 180px;
float: right;
}
#form-1 ul {
padding: 0;
margin: 0;
list-style: none;
}
#form-1 ul .box {
background: white;
border: 1px solid black;
border-radius: 3px;
height: 25px;
width: 52px;
}
#form-1 ul .circle {
background: white;
border: 1px solid black;
border-radius: 50%;
height: 37px;
width: 37px;
}
#form-1 ul li.box.right {
margin-left: 120px;
}
#form-1 ul li.box.left {
margin-left: 2px;
}
#form-1 ul li.circle.right {
margin-left: 129px;
margin-bottom: 12px;
}
#form-1 ul li.circle.left {
margin-left: 10px;
margin-bottom: 12px;
}
#form-1 ul li input {
background: transparent;
border: 0;
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form-1" class="form-wrapper">
<div class="form-background right-leg">
<label>Right Leg</label>
<ul>
<li class="box right" style="margin-top: 33px;"><input type="number" /></li>
<li class="circle right"><input type="text" /></li>
<li class="circle right" style="margin-bottom: -14px;"><input type="text" /></li>
<li class="box left"><input type="number" /></li>
<li class="box right" style="margin-top: 30px; margin-left: 116px;"><input type="number" /></li>
<li class="circle right" style="margin-left: 124px;"><input type="text" /></li>
<li class="box left" style="margin-top: -19px;"><input type="number" /></li>
</ul>
</div>
<div class="form-background left-leg">
<label>Left Leg</label>
<ul>
<li class="box left" style="margin-top: 32px; margin-left: 5px;"><input type="number" /></li>
<li class="circle left"><input type="text" /></li>
<li class="circle left" style="margin-bottom: -14px;"><input type="text" /></li>
<li class="box right"><input type="number" /></li>
<li class="box left" style="margin-top: 30px; margin-left: 5px;"><input type="number" /></li>
<li class="circle left"><input type="text" /></li>
<li class="box right" style="margin-top: -19px;"><input type="number" /></li>
</ul>
</div>
</div>
Since the image is not exact, there is lots of adjustments to be made. I used margins to push things around. Also, I am not familiar with each notation or possible value. You may consider that additional notes may want to be added for each measurement. You can use number type for each if you want.
This may seem like a lot of extra work upfront, yet can be very helpful if you add in additional functionality via JavaScript or jQuery. For example, the section of the leg could be highlighted when that measurement is being entered.
Some ideas:
1) Work with percentage instead of pixel. This could help you if you have a responsive view plan in future.
2) Better to add outline:none on each input and add border if you need to have more control with different browsers.
3) Better to have just the picture and draw the lines, arrows and circles(if you need them) with CSS. Again more control on responsive view and more maintainable app.
I have combed through compatibility issues on this site looking for fixes for this problem and I cannot seem to find any posts with quite the same issue as me.
Basically, when I load the app in chrome browser and inspect through all phone sizes, it is responsive and it works. However when I actually open the app web address in my personal iphone, the toggle menu does not work. It drops down behind the main content and is hardly clickable. Can anyone help?
Here is a link to the app:
https://evening-stream-86674.herokuapp.com/index.html
Here is the portion of the CSS file:
* {
box-sizing: border-box !important;
}
html {
height: 100%;
}
body {
background: url("../images/tree.png") no-repeat center center fixed;
background-size: cover;
width: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
/*my favorite lime green color #47dd1b*/
li {
background-color: black;
}
.navbar {
margin-bottom: 0;
border-radius: 0 !important;
height: 8%;
}
#media only screen and (max-width: 640px) {
/* For mobile phones: */
li {
width: 100%;
}
.navbar {
width: 100%;
}
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">John Wolfe</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>
About
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div id="wrap">
Edited to show less code.
The task is to insert a simple modal popover as an alert for clients to be notified of a temporary relocation. On page load, a transparent background appears but the image nor the close button appears.
DATA
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<script src="../js/bootstrap-modal.js"></script>
<script src="../js/popover.js"></script>
<script src="../js/jquery-1.12.4.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalContent {
width: 750px;
z-index: 10000;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: none;
background: -moz-linear-gradient;
background: -webkit-linear-gradient;
background: -o-linear-gradient;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
</style>
CODE
<div id="myModal" class="modal fade in">
<div class="modalDialog">
<div class="modalContent">
X
<img src="image.jpg" width="750px"/>
</div>
</div>
</div>
This seems like a fairly straightforward task but I cannot seem to resolve this issue by multiple attempts. Your help is greatly appreciated.
I have no idea about popover plugin, but i have created fiddle for this using bootstrap plugin, when the page gets opened modal will be appear with some content (You can replace it by your content).
Sample HTML:
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
And JS
$(document).ready(function(){
$("#myModal").modal('show');
});
JSFIDDLE
Note: I did not included popover.js.
Is it possible to update the Facebook iframe height?
Here's the scenario. I have a Facebook app with PHP pages inside, but when I click the menu, it gets the previous iframe height and it doesn't automatically adjust the iframe height of the current content.
<link rel="stylesheet" href="" type="text/css" >
<style>
.nav li {
background-color: #fff;
font-family: Century Gothic;
list-style: none outside none;
margin-bottom: 1px;
padding-bottom: 5px;
padding-left: 10px;
padding-top: 5px;
font-size:9pt;
border-left:6px solid #7b7b7b;
color:#7c7c7c;
}
li a {
text-decoration: none;
color: inherit;
}
.title {
margin:0px;
}
.navigation ul {
padding:0px;
margin:0px;
}
.logo {
margin-bottom: 10px;
padding-left: 10px;
}
.sidebar {
width:177px;
float:left;
margin-right:10px;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background-color: #515151;
font-family: Century Gothic;
list-style: none outside none;
margin-bottom: 1px;
padding-bottom: 5px;
padding-left: 10px;
padding-top: 5px;
font-size:9pt;
border-left:6px solid #FAB101;
color:#fff;
}
.titlewrapper {
background-color: #FEFEFE;
border: 1px solid #B6CADC;
color: #BFBFBF;
font-size: 28pt;
margin-bottom: 5px;
padding: 5px 10px;
width: 768px;
}
</style>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function(){
FB.init({appId: 'APPID', status: true, cookie: true, xfbml: true});
FB.Canvas.setSize();
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; // all.js
document.getElementById('fb-root').appendChild(e);
setTimeout(sizeChangeCallback,5000);
}());
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
</head>
<body style="background-color:#e4e4e4;">
<div class="clearfix" style="width:1007px;margin:auto;">
<div id="tabs">
<div class="sidebar">
<div class="logo">
<img src="../images/gotodo_direct_logo.png">
</div>
<div class="navigation">
<ul class="nav">
<li id="tabs"><h3 class="title">Hotel Demo</h3><i>Indvidual hotel booking</i></li>
<li id="tabs"><h3 class="title">All Hotel List Demo</h3><i>all occupancy plus hotel partner</i></li>
<li id="tabs"><h3 class="title">Instruction</h3><i>how to install this app?</i></li>
<li id="tabs"><h3 class="title">Faq</h3> <i>frequently ask question</i></li>
</ul>
</div>
</div>
<div class="main-content" style="float:left;width:790px;height:1000px;">
<div id="tabs-1">
<div class="titlewrapper" style="float:left;"><div style="float:left"><img src="images/hotel.png" style="margin-right: 10px; vertical-align: middle;"></div><div style="float:left;width:700px;">Hotel Demo<br /><i style="font-size:10pt;">let's take a look a quick demo at how hotel app look like when you install it on your facebook fan page</i></div></div>
<div class="rooms" style="float:left;">
<?php include'../hotel.php';?>
</div>
</div>
</div>
</div>
</div>
</body>
and heres the link of my app.