I wanted to load a html template inside foundation popover, but i could not found any good documentation or similar solution on internet. I just wanted to know weather this is possible to have a html template along with its controller inside popover or not.
i saw we just load content in popover using properties like below:
<button popover="{{dynamicPopover}}"
popover-title="{{dynamicPopoverTitle}}" class="button">Dynamic Popover</button>
or
<button popover="I appeared on mouse enter!" popover-trigger="mouseenter" class="button">Mouseenter</button>
i can somehow inject the html using scope but difficult to have controller for that.
I want to load a popover for my website (which is getting build using angularJS) when user mouse over on video thumbnail i want to load the preview image of the video and on mouse over on popover i want to have some buttons which perform some action when click on them.
Try This http://codepen.io/Blu-Jay/pen/wMRBLx
$(document).foundation();
.callout{
text-align:center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.0.5/foundation.min.js"></script>
<link href="https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css" rel="stylesheet">
<div class="row">
<div class="large-8 large-centered columns">
<div class="callout">
<h3>Password Verification</h3>
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="text-right">Username</label>
</div>
<div class="small-9 columns">
<input type="text" id="right-label" placeholder="Username">
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="text-right">Password</label>
</div>
<div class="small-9 columns">
<input type="password" id="right-label" placeholder="Password Please" data-toggle="example-dropdown-1">
</div>
</div>
</div>
</div>
</div>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true">
<strong>Password Must meet to following criteria:</strong>
<ul class="no-bullet">
<li style="color:red;">Must be between 4 and 8 characters</li>
<li style="color:red;">Must contain capital letters</li>
</ul>
</div>
Related
I'm currently learning website design, I have started creating my own Basecamp like website (project management tool). I am in need of a plugin or a tutorial on autocomplete input javascript like Basecamp... however i'm unsure on how to set this up as i'm super new to javascript and still trying to get my head around it all.
Use the multiple search selection feature from Semantic UI's dropdown module:
https://semantic-ui.com/modules/dropdown.html#multiple-search-selection
Here's a sample jsfiddle: https://jsfiddle.net/9wnjra1z/
<form class="ui form">
<div class="field">
<label>Assigned to</label>
<div class="ui fluid multiple search selection dropdown">
<input type="hidden" name="users" />
<i class="dropdown icon"></i>
<div class="default text">Select Users</div>
<div class="menu">
<div class="item" data-value="kristin_aardsma">
<img class="ui avatar image" src="https://semantic-ui.com/images/avatar/small/jenny.jpg">
<span>Kristin Aardsma</span>
</div>
<div class="item" data-value="jonny_cyrus">
<img class="ui avatar image" src="https://semantic-ui.com/images/avatar/small/elliot.jpg">
<span>Jonny Cyrus</span>
</div>
<div class="item" data-value="stevie">
<img class="ui avatar image" src="https://semantic-ui.com/images/avatar/small/stevie.jpg">
<span>Stevie</span>
</div>
<div class="item" data-value="matt">
<img class="ui avatar image" src="https://semantic-ui.com/images/avatar/small/matt.jpg">
<span>Matt</span>
</div>
</div>
</div>
</div>
</form>
You will need the following references in your code to use this library:
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css
https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js
I'm a beginner with framework 7. I'm developing a little app and I split the html code in different files because i have a lot of pages with div in common. My problem is: I have a page.html, inside my page.html I'd like to include different div in the same windows from different html files.
for example in php we can do it with a
include("");
but in framework7 I can include only one with
<div class="view view-main view-init" data-url="/page/" data-name="page"></div>
I'd like to include more one view like this
<div class="view view-main view-init" data-url="/page1/" data-name="page1"></div>
<div class="view view-main view-init" data-url="/page2/" data-name="page2"></div>
i put an image here to explain me better.
what i'd like to do
Thank you for your help.
pages.html
<div data-name="pages" class="page">
<div class="page-content pg-no-padding">
<div class="row justify-content-center">
<div class="col-100 tablet-100 desktop-80">
<div class="block">
<form class="list" id="pages1">
<div class="row justify-content-center">
<div class="block-title">
<h1> Pages</h1>
</div> <!--block-title-->
</div><!--row-->
<div class="row">
<div class="col">
<div class="block-title">
<h2> Card 1</h2>
</div>
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Input1</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Input2</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
</div><!--col-->
</div><!--row-->
</div><!--card-content-->
</div><!--card-->
</div><!--col-->
</div><!--row-->
Here I'd like to include the code inside pages1.html
Here I'd like to include the code inside pages2.html
</form>
</div><!--block-->
<div class="block">
<a class="col button button-fill" href="#">Salva</a>
</div>
</div><!--col-100-->
</div><!--row-->
</div> <!-- ./ page-content-->
pages1.html
<div class="row">
<div class="col">
<div class="block-title">
<h2> Card2</h2>
</div>
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Input1</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Input2</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
</div><!--col-->
</div><!--row-->
</div><!--card-content-->
</div><!--card-->
</div><!--col-->
</div><!--row-->
To include Multiple Views Layout you need to do this:
You need to create wrapper with class views like this: <div class="views tabs">
You need to create div view like this: <div class="view view-main tab tab-active" id="view-1">.related page..</div><div class="view tab" id="view-2">.related page..</div>
You need to make sure thats only one views class wrapper.
In Js: You can control multiple views by this:
var view1 = app.views.create('#view-1', {...});
var view2 = app.views.create('#view-2', {...});
For more details: F7 View
For Embedded Multi view not like tab:
Example
Note: for each view in F7 is got 100% height...you need to make sure thats height is equal 100% finally
EDIT: After a long investigation, I found from the documentation that you can do it like this:
<!-- in your views page, just add these parameter to your view you want to inherit -->
<div class="view view-init" data-url="/your-page/" data-name="home" data-push-state="true">
...
</div>
And in your routers, will need to define your route as well:
var app = new Framework7({
root: '#app',
// Create routes for all pages
routes: [
{
path: '/',
url: 'index.html',
},{
// Add your contents page route
path: '/your-page/',
url: 'pages/your-page.html',
},
.....
});
Hope this help.
I use angular and angular-animate to animate enter of ng-repeats.
Thats my html
<div class="container" ng-controller="chatController">
<ul ng-repeat="module in CurrentModules" class="timeline">
<li ng-repeat="message in module.ServerMessages" class="timeline-inverted" animate-on-load>
<div class="timeline-panel">
<div class="timeline-body">
<p>{{message}}</p>
</div>
</div>
</li>
</ul>
<div align="center" ng-repeat="answer in module.Answers" animate-on-load>
<div ng-switch on="answer.IsButton">
<div ng-switch-when="true" align="center">
<button ng-click="Answer($event, answer.Value)" class="send-btn">{{answer.Text}}</button>
</div>
<div ng-switch-when="false">
<form>
<input ng-model="answer.Text">
</form>
</div>
</div>
</ul>
</div>
</div>
Note that animate-on-load it's only a directive which allow to stagger animate ng-repeate on page load.
My question - Is it possible to run second ng-repeat after first ng-repeat(and also animations for it) are ended?
I have a jsfiddle here: https://jsfiddle.net/gemcodedigitalmarketing/zn5yLwh3/
What I want is the text in the customText input to be appended to the canvas. Though I am unsure as to why this is not working.
It works when I tried yesterday to append td and tr to a table. But maybe because its a canvas it needs a different way of adding text?
not sure... either way i would apprecaite help.
$('#addText').click(function() {
var value = $('#customText').val();
$('canvas').append('<p>' + value + '</p>');
});
This is my jquery at the bottom of the page
<div class="assets">
<h3>Assets</h3>
<div class="text">
<h4>Text</h4>
<input id="customText" type="text">
<button id="addText" class="btn btn-default">Add Text</button>
<p></p>
</div>
<div class="image">
<h4>Images</h4>
<ul class="list-unstyled">
<!-- List of images here -->
<!-- <li><img src="images/sample.jpeg" class="img-rounded" /></li> -->
</ul>
</div>
<!-- canvas -->
<div class="canvas col-sm-8 col-md-8 col-lg-8">
<div class="block">
<!-- Add images and texts to here -->
</div>
</div>
This is the relevant html.
Hope that gives you guys enough to go on...
In your case canvas is not an element but a class.
This is from your fiddle:
<!-- canvas -->
<div class="canvas col-sm-8 col-md-8 col-lg-8">
<div class="block">
<!-- Add images and texts to here -->
</div>
</div>
So you have to use it in the selector as:
$('.canvas')
Don't forget the dot.
I'm trying to build a gallery page use Flexslider in a site built with Foundation. If I build the Flexslider on its own, it works fine, but when I incorporate it into a page with Foundation it stops working. I can only get any of the images to load by adding in some extra CSS to force the initial image to load, but the thumbnails do not control which slide is shown (nor do they even show as a clickable element) and none of the navigation controls appear. Everything related to both Foundation and Flexslider has been copied from a working example to avoid typing errors.
As a work around, I did the following...
I created thumbs with the code below:
<div class="flexslider-controls">
<ol class="new-nav">
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-1.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-1.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-2.jpg" />
</div>
</div>
</div>
</li>
<li>
<div class="medium-3 columns">
<div class="row">
<div class="columns">
<img src="images/slider-thumb-3.jpg" />
</div>
</div>
</div>
</li>
</ol>
</div>
Then using some jquery, as you click on each thumb, it will change the slider to the corresponding slide:
$(document).ready(function () {
$(document).on('click','.new-nav li a',function(){
var index = $('.new-nav li a').index(this) + 1;
$('.videos-slider').flexslider(index);
return false;
});
});