How to combine FancyBox with an existing div? - popup

I'm trying to combine FancyBox with an existing div. This div includes caption hover effects. I have no idea on how to combine it though, as I don't know that much about JS yet. My HTML contains multiple pictures, this is one of them:
<!-- Image Caption 1 -->
<div id="box-6" class="box">
<img id="image-6" src="beeld/images/grafisch/image09.png"/>
<span class="caption scale-caption">
<h3>Scale Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
All I want is for file:///Data$/marketing/2013/Sophia/Website/HTML/Beeld/images/bgimg.jpg (test image) to pop-up. Right now all it does is reopen the window to show the picture.
So basically I'm trying to merge that HTML with the FancyBox HTML:
<a id="single_3" href="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_b.jpg" title="Ayvalık, Turkey (Nejdet Düzen)">
<img src="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_m.jpg" alt="" />
Would there be any way to accomplish that?
The JS:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
$("#single_1").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
$("#single_2").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
helpers : {
title : {
type : 'inside'
}
}
});
$("#single_3").fancybox({
openEffect : 'elastic',
closeEffect : 'none',
helpers : {
title : {
type : 'outside'
}
}
});
$("#single_4").fancybox({
helpers : {
title : {
type : 'over'
}
}
});
});
</script>
I tried to merge it myself, like this:
<!-- Image Caption 1 -->
<a id="single_3" href="file:///Data$/marketing/2013/Sophia/Website/HTML/Beeld/images/bgimg.jpg" title="Ayvalık, Turkey (Nejdet Düzen)">
<div id="box-6" class="box">
<img id="image-6" src="beeld/images/grafisch/image_09.png"/></a>
<span class="caption scale-caption">
<h3>Scale Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</span>
but FancyBox simply won't popup.
What did I do wrong?

A couple of things:
1) Make sure you first load the jquery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
2) Then you must load the fancybox code
<script src="http://yourdomain.com/your_path_to_js/jquery.fancybox.pack.js"></script>
3) Then write this code in head section
$(document).ready(function() {
$('#single_3').fancybox({
openEffect : 'elastic',
closeEffect : 'none',
helpers : {
title : {
type : 'outside'
}
}
});
});
4) And this in body section
<a id="single_3" href="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_b.jpg" title="Ayvalık, Turkey (Nejdet Düzen)">
<img src="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_m.jpg" alt="" />
</a>
Here is a working demo http://jsfiddle.net/fkeVR/5/
5) make sure the file you are reffering to file:///Data$/marketing/2013/Sophia/Website/HTML/Beeld/images/bgimg.jpg is accessible from your script
6) make sure your javascript has no errors. If you use firefox, the console of Firebug is a great help for debugging

Related

How to use vue2-leaflet in vue3 App, what changes need to be made?

I'm adding an Openstreetmap component. Newbie, straight to Vue3 (do not ask me to start from Vue2),
MapLeaflet.vue : I took the code from here: https://vue2-leaflet.netlify.app/examples/simple.html
And tried to modify to suite vue3, creating setup(), move functions etc. However looks like the return statement and some imports need to be further tweaked. What should I change in this vue2-leaflet to transform it to work in vue3?
<template>
<div style="height: 500px; width: 100%">
<div style="height: 200px overflow: auto;">
<p>First marker is placed at {{ withPopup.lat }}, {{ withPopup.lng }}</p>
<p>Center is at {{ currentCenter }} and the zoom is: {{ currentZoom }}</p>
<button #click="showLongText">
Toggle long popup
</button>
<button #click="showMap = !showMap">
Toggle map
</button>
</div>
<l-map
v-if="showMap"
:zoom="zoom"
:center="center"
:options="mapOptions"
style="height: 80%"
#update:center="centerUpdate()"
#update:zoom="zoomUpdate()"
>
<l-tile-layer
:url="url"
:attribution="attribution"
/>
<l-marker :lat-lng="withPopup">
<l-popup>
<div #click="innerClick()">
I am a popup
<p v-show="showParagraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
sed pretium nisl, ut sagittis sapien. Sed vel sollicitudin nisi.
Donec finibus semper metus id malesuada.
</p>
</div>
</l-popup>
</l-marker>
<l-marker :lat-lng="withTooltip">
<l-tooltip :options="{ permanent: true, interactive: true }">
<div #click="innerClick">
I am a tooltip
<p v-show="showParagraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
sed pretium nisl, ut sagittis sapien. Sed vel sollicitudin nisi.
Donec finibus semper metus id malesuada.
</p>
</div>
</l-tooltip>
</l-marker>
</l-map>
</div>
</template>
<script>
import { latLng } from "leaflet";
import { LMap, LTileLayer, LMarker, LPopup, LTooltip } from "vue2-leaflet";
export default {
name: "Example",
components: {
LMap,
LTileLayer,
LMarker,
LPopup,
LTooltip
},
setup() {
function zoomUpdate(zoom) {
currentZoom = zoom;
}
function centerUpdate(center) {
currentCenter = center;
}
function showLongText() {
showParagraph = !this.showParagraph;
}
function innerClick() {
alert("Click!");
}
return {
zoom: 13,
center: latLng(47.41322, -1.219482),
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution:
'© OpenStreetMap contributors',
withPopup: latLng(47.41322, -1.219482),
withTooltip: latLng(47.41422, -1.250482),
currentZoom: 11.5,
currentCenter: latLng(47.41322, -1.219482),
showParagraph: false,
mapOptions: {
zoomSnap: 0.5
},
showMap: true
};
},
methods: {
}
};
</script>
There is a Vue 3 compatible version here:
https://www.npmjs.com/package/#vue-leaflet/vue-leaflet
But it is still in the beta version, but everything works from what I've seen.

Remove content from HTML with f:format.html

I want my homepage to have a list of articles, with the first bit of text from each as a preview. Something like:
<div class="article">
<h2>Article Title</h2>
<div class="article-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tortor quam, vulputate at pharetra et, molestie vel nisi. Donec quis tellus pretium, sollicitudin neque et, tristique nunc. Proin id nunc augue. Quisque iaculis iaculis dui, et dictum tortor.</p>
<p>Morbi ligula felis, rhoncus at felis a, egestas scelerisque metus. In sit amet urna nec sem tristique fringilla vel nec sem. Nullam at ante</p>
</div>
<p class="read-more">Read More…</p>
</div>
So, in my fluid template, I had:
<div class="article-text">
<f:format.crop maxCharacters="480" respectHtml="true">
<v:content.render column="0" pageUid="{article.uid}" />
</f:format.crop>
</div>
And as long as the article starts with text, this works fine. But then I had an article which started with some images with captions, like:
<div class="img-grid">
<figure>
<img src="/fileadmin/image1.jpg">
<figcaption>Here's a picture of a thing</figcaption>
</figure>
<figure>
<img src="/fileadmin/image2.jpg">
<figcaption>Here's a picture of another thing</figcaption>
</figure>
</div>
<p>Lorem ipsum, etc., etc...</p>
What I want is to somehow strip out that <div class="img-grid">, to instead show starting with the first bit of regular text from the article. I think the correct way to do this would be with <f:format.html>, but for some reason it isn't working for me. In my fluid template, I have:
<f:format.crop maxCharacters="480" respectHtml="true">
<f:format.html parseFuncTSPath="lib.parseFunc_List">
<v:content.render column="0" pageUid="{article.uid}" />
</f:format.html>
</f:format.crop>
And in my TypoScript setup.txt I have:
lib.parseFunc_List {
externalBlocks {
figure.stdWrap.HTMLparser = 1
figure.stdWrap.HTMLparser {
tags.figure = 0
tags.figcaption = 0
tags.img = 0
removeTags = "figure, figcaption, img"
}
}
}
But it doesn't strip anything out.
How can I parse my HTML, and remove the content I don't want?
If you just remove tags you still have the content, here the image captions.
If you only want the text part you might change the rendering of the CEs so you could more easily identify the text part. you might use a html comment before and after the text part and extract that substring before you use the crop VH.
You also have the option to render your content individually ignoring any / most types. this can be done in typoscript (CONTENT with individual renderObj) or in a PHP VH.

How auto active Getuikit accordion

I want solve my problem with Getuikit.
Accordion plugin is working. But I want make active (clicked) specific accordion on page load.
How can I do this ?
edit: getuikit v2
<div class="uk-accordion" data-uk-accordion="{collapse: false}">
<h3 class="uk-accordion-title">Accordion 1</h3>
<div class="uk-accordion-content">
<!-- Content -->
</div>
<h3 class="uk-accordion-title">Accordion 2</h3>
<div class="uk-accordion-content">
<!-- Content -->
</div>
<h3 class="uk-accordion-title">Accordion 3</h3>
<div class="uk-accordion-content">
<!-- Content -->
</div>
<h3 class="uk-accordion-title">Accordion 4</h3>
<div class="uk-accordion-content">
<!-- Content -->
</div>
</div>
Example: How make "Accordion 3 & Accordion 4" active ?
I've found the answer on SO. Here someone opens all accordions on page, so I've tweaked the code little bit for you. You can choose, which accordion you want to open on init.
UIkit.on('afterready.uk.dom', function() {
var accordion = UIkit.accordion(UIkit.$('#myAccordion'), {collapse:false, showfirst: false});
//choose which number of accordion interest you, here we choose 1 and 3, index starts from 0
accordion.find('[data-wrapper]').each(function (index) {
if (index==0 || index==2)
accordion.toggleItem(UIkit.$(this), true, false); // animated true and collapse false
});
});
Here's working pen for you.
If I am not wrong, You are looking to keep by default first accordion. right? If yes you don't need to do any extra code for this. As Uikit as the solution itself.
You just have to put uk-open with first , take a look at below code and codepen.
<ul uk-accordion>
<li class="uk-open">
<a class="uk-accordion-title" href="#">Item 1</a>
<div class="uk-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">Item 2</a>
<div class="uk-accordion-content">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">Item 3</a>
<div class="uk-accordion-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
</div>
</li>
Look at CodePen too : Codepen

How can I create an Accordion List within ionic 2?

I want to integrate an accordion in my project using expandable groups but for a recent project, I was needing a rendition of an accordion that expanded text or more precisely overflowed content.
Can you tell me how it will done within ionic 2 ?
Check the demo of accordion list within ionic 2 on Github :
https://github.com/mahmoudissmail/ionic2Accordion
.html
<ion-content padding>
<ion-list>
<ion-list-header>
Ionic 2 Accordion Example.
</ion-list-header>
<ion-item padding *ngFor="let d of data" (click)="toggleDetails(d)"><ion-icon color="primary" item-right [name]="d.icon"></ion-icon>
{{d.title}}
<div *ngIf="d.showDetails">{{d.details}}</div>
</ion-item>
</ion-list>
</ion-content>
.ts
export class HomePage {
data: Array<{title: string, details: string, icon: string, showDetails: boolean}> = [];
constructor(public navCtrl: NavController) {
for(let i = 0; i < 10; i++ ){
this.data.push({
title: 'Title '+i,
details: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
icon: 'ios-add-circle-outline',
showDetails: false
});
}
}
toggleDetails(data) {
if (data.showDetails) {
data.showDetails = false;
data.icon = 'ios-add-circle-outline';
} else {
data.showDetails = true;
data.icon = 'ios-remove-circle-outline';
}
}
thanks for #LPeteR90.
EDIT:
Ok, I think I've figured it out. This tutorial helped me a lot, so I would recommend reading it also.
I've split my code up into components, where
#Component({
directives: [DataCards],
templateUrl: 'build/pages/data-list/data-list.html'
})
export class DataList {
public dataList: Data[];
constructor() {
this.dataList = [
new Data('Test title', 'Test Details 1, 2, 3, 4, 5', false),
new Data('Second title', 'These are the details for my second title :)', false)
];
}
}
and the corresponding HTML
<ion-content class="cards-bg">
<data-cards [data]="dataList"></data-cards>
</ion-content>
contain my custom component data-cards. data-cards has an input parameter data, through which the list of data is passed. To be able to use the data-cards component, you need to set the directives attribute. Data is a class containing everything you need in an item of your list.
export class Data {
constructor(public title: string, public details: string, public showDetails: boolean) {}
}
The component data-cards itself has the selector and inputs attributes set, so the component can be used from the data-list HTML. The function toggleDetails is used to toggle whether the detail part of a list entry is shown.
#Component({
selector: 'data-cards',
inputs: ['data'],
templateUrl: 'build/pages/data-cards/data-cards.html'
})
export class DataCards {
public data: Data[];
constructor() {}
toggleDetails(data: Data) {
if (data.showDetails) {
data.showDetails = false;
} else {
data.showDetails = true;
}
}
}
Finally, in the data-cards template file, I build up the list of data using *ngFor and make the details <div> element's visibility dependent on the data showDetails attribute with *ngIf.
<ion-card *ngFor="let d of data">
<h1>{{d.title}}</h1>
<button (click)="toggleDetails(d)">+</button>
<div *ngIf="d.showDetails">{{d.details}}</div>
</ion-card>
To get everything to work you will need to add some imports to my code, since e.g. the DataList class depends on DataCards and Data.
I also recommend changing the style of the data-cards template... Without being styled, it doesn't look beautiful exactly :)
UNEDITED ORIGINAL ANSWER:
I'm working on something similar right now. I think this can be implemented by using cards and *ngIf.
So I think I will do something like
<ion-card>
<h2>Card Title</h2>
<button (click)="toggleDetails()">+</button>
<div *ngIf="showDetails">
Here are some details for the title.
</div>
</ion-card>
In the toggleDetails() i would set the showDetails variable to true...
This is just my approach (and untested), I'm going to edit my answer when I'm done implementing it.

Detecting select slider change event in jQuery Mobile

What is a reliable way to detect change of a select slider in jQuery Mobile? I try to bind a handler to change event of the select control itself, but it fires on initial page display, and then fires multiple times on clicks, and sometimes even on hover (in desktop browser).
The minimal working example of this behaviour is posted here: http://jsfiddle.net/NPC42/mTjtt/3/
This is probably caused by jQuery Mobile adding more elements to style the select as the flip-toggle, but I can't find the recommended way to do it.
Any help is much appreciated.
May not be the slickest solution but it works
http://jsfiddle.net/mTjtt/4/
Live Example:
http://jsfiddle.net/KCQ4Z/14/
http://jsfiddle.net/phillpafford/KCQ4Z/70/ (using stopPropagation() )
JS:
$('#my-slider').change(function(event) {
event.stopPropagation();
var myswitch = $(this);
var show = myswitch[0].selectedIndex == 1 ? true:false;
if(show) {
$('#show-me').fadeIn('slow');
$('#first-me').fadeOut();
} else {
$('#first-me').fadeIn('slow');
$('#show-me').fadeOut();
}
});
HTML:
<div data-role="page" id="home" class="type-home">
<div data-role="content">
<div class="content-primary">
<p>The flip toggle switch is displayed like this:</p>
<div data-role="fieldcontain">
<label for="slider">Flip switch:</label>
<select name="slider" id="my-slider" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div id="first-me">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div id="show-me" class="hidden">
<p>
Bacon ipsum dolor sit amet bresaola velit laboris bacon eiusmod. Id ex short ribs, dolor dolore rump pork belly beef ad ullamco salami labore aute ut. Jowl et in do, fatback jerky salami reprehenderit irure laboris pork loin commodo qui eu. Chuck tri-tip cupidatat, turkey sunt in anim jerky pork belly exercitation bacon. Eu corned beef qui adipisicing, ground round veniam turkey chicken incididunt deserunt. Proident t-bone chuck, non excepteur biltong elit in anim minim swine short loin magna do. Sint enim nisi, minim nulla tongue ut incididunt ground round.
</p>
</div>
</div>
</div>
</div>
UPDATE:
I have raised an issue/bug with jQM here:
https://github.com/jquery/jquery-mobile/issues/2188
Use this code,
$( ".mySliders" ).slider({
create: function (event, ui) {
$(this).bind('change', function () {
...
...
});
}
});
!Do not put type="range" to your input tags , put type="text" instead.
Since you are calling slider function manually.