I have this markup:
<div class="news-listItem">
<p class="date">Date: 06.03.2012</p>
<h2>test aaaaa</h2>
<div class="news-content">Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum</div>
Read more
</div>
I want to get the read more button based on the div class="news-content". My jQuery code looks like this:
$('.news-content').closest('a.read-more').on('click', function(){
// code here
});
But this is not working. I have multiple posts on a page so I can not do $('a.read-more').
.closest() traverses up the DOM tree. What you need is .next():
$('.news-content').next('a.read-more')
The closest[API] method gets an ancestor. You need the siblings[API] method.
$('.news-content').siblings('a.read-more').on('click', function(){
// code here
});
You can use CSS selectors:
$('.news-content+a.read-more').on('click', function(){
// code here
});
I think it's better, because modern browsers support the native search for the selector.
Related
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.
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.
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
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
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.