i had this simple code
$('.ui.popup').popup({
title : 'Popup Title',
content : 'Hello I am a popup'
});
How can i get attributes of the current hover element. I had tried:
$('.ui.popup').popup({
title : this.getAttribute("class"),
content : 'Hello I am a popup'
});
$('.ui.popup').popup({
title : $(this).attr("class"),
content : 'Hello I am a popup'
});
But none of them work.
The hovered element is passed as the first argument in a popup's event callbacks. If you want to change the content of the popup, you'll probably want to use the onShow event which is triggered before the popup shows.
$('.ui.popup').popup({
title : 'Popup Title',
content : 'Hello I am a popup',
onShow: function(hovered) {
$(this).find('.header').html($(hovered).attr('class'));
}
});
Notice that, to change the title, I'm changing the element with the class header inside a popup. This is because the popup in your example looks something like this once it's created:
<div class="header">Popup Title</div>
<div class="content">Hello I am a popup</div>
Try this with JQuery.
$('.ui.popup').each(function(index){
$(this).popup({
title : $(this).attr("class"),
content : 'Hello I am a popup'
});
});
Related
Here is my problem :
- i have an fancybox 3 gallery intro an iframe
- when i click to one of the link, i would like the image showing on top of the parent of my iframe
I have made many researches and tried several solutions
I found this : call Fancybox in parent from iframe
but it only provide a solution for fancybox 2
Here is my code on the iframe :
$(document).ready(function() {
parent.$(".fancybox").fancybox({
href: this.href
});
});
Please note
i have included jquery and fancybox 3 both in the iframe and the parent
fancybox works like a charm independently in the iframe and the parent, but cannot be called from the iframe to be displayed in the parent (my problem)
i have also tried :
$(".fancybox", top.document).fancybox
$(".fancybox", window.opener.document).fancybox
$(".fancybox", window.parent.document).fancybox
None of these worked
Thank you very much for your attention
I hope you red the docs while doing "many researches". From the docs:
To access and control fancybox in parent window from inside an
iframe:
// Adjust iframe height according to the contents
parent.jQuery.fancybox.getInstance().update();
This should give you a clue that you can use parent.jQuery.fancybox to use API from the parent page.
Then, API section should give you a clue how to open image gallery programmatically:
$.fancybox.open([
{
src : '1_b.jpg',
opts : {
caption : 'First caption',
thumb : '1_s.jpg'
}
},
{
src : '2_b.jpg',
opts : {
caption : 'Second caption',
thumb : '2_s.jpg'
}
}
], {
loop : false
});
So, combining these two snippets should give you the answer.
I'm using the following markup to mark the clicked component as active.
<div *ngFor="let menu of menus;"
(click)="onClick($event,menu.link)"
[ngClass]="{'active':menu.active}">
{{menu.title}}
</div>
The method handling the click is as follows.
onClick(target, link) {
target.active = !target.active;
this.router.navigate([{ outlets: { primary: [""], menus: [link] } }]);
}
It seems that the value of target.active goes from undefined to true to false to true etc. but the style doesn't get set. (I'm printing out the whole component to the console and can't see the addition of the class' name.)
Question: What am I missing in this approach?
NB, I know how to resolve it by approaching it from a different angle. I set up a local variable keeping the index and setting it like shown here. The aim of my question is to learn to achieve the requested behavior in a more like-a-bossy way.
target here:
onClick(target, link) {
target.active = !target.active; <------------
this.router.navigate([{ outlets: { primary: [""], menus: [link] } }]);
}
doesn't refer to menu, it refers to the event. But based on your ngClass directive:
[ngClass]="{'active':menu.active}">
You need to set active to menu variable and so it can be done like this:
<div *ngFor="let menu of menus;"
(click)="onClick(menu,menu.link)"
[ngClass]="{'active':menu.active}">
{{menu.title}}
</div>
Instead of passing in the $event, send it the actual menu object. Like this:
<div *ngFor="let menu of menus;"
(click)="onClick(menu)"
[ngClass]="{'active':menu.active}">
{{menu.title}}
</div>
And in the component:
onClick(menu) {
menu.active = !menu.active;
this.router.navigate([{ outlets: { primary: [""], menus: [menu.link] } }]);
}
I have a Ractive component that includes within its template html a Bootstrap .collapse element. Calling show() and hide() on this will trigger Bootstrap show and hide transitions.
# the component template:
<div id='my_component>
<div class='collapse'>
some stuff to show or hide in here
</div>
</div>
# the component code:
Ractive.extend({
template : "#component_template",
show : function(){
// call show() on the .collapse element within the rendered template
// but how to get a reference on that element?
},
hide : function(){
// call hide() on the .collapse element within the rendered template
// but how to get a reference on that element?
}
})
How can I get a reference in the javascript to the collapse element? this.el seems to refer to the root (component's parent) and not the component's view fragment.
thanks in advance
ractive.find(querySelector) is what you're looking for:
Ractive.extend({
template : "#component_template",
show : function(){
this.find('.collapse').show();
},
hide : function(){
this.find('.collapse').hide();
}
})
I would like to develop a website that has a div element which is content editable, and where the div element is able to be dragged around. I found the solution here, but after I coded it, it seems like I am missing some plugin, and I failed to find the plugin or framework that needed to be added into my code. Can anyone please help?
<div contenteditable="true" id="d">
<span>Text to edit</span>
</div>
$("#d").draggable()
.click(function () {
$(this).draggable({
disabled: false
});
}).dblclick(function () {
$(this).draggable({
disabled: true
});
});
I am having a strange issue with jQuery (1.4.2) and Colorbox (1.3.6). I have an hyperlink inside an Obout grid created via a GridTemplate. The issue is with a dynamic href that I am executing with JQuery as follows:
The grid hyperlink passes the Primary Key of a record to this function where I change the href of a link than opens an iframe inside a ColorBox lightbox. This works well on the first record pressed. However, every subsequent click executes the hyperlink with the first parameter passed.
Why is the href not refreshing or changing to the new parameter passed? Is there a better way to accomplish this?
function PopupLink(vReqItrID) {
var lnkPopup = $("a[id=lnkPopup]");
lnkPopup.attr("href", "VendorInfo.aspx?ReqItr=" + vReqItrID.toString());
lnkPopup.trigger("click");
}
<script type="text/javascript">
$(document).ready(function() {
// Assign the ColorBox - Popup iframe event to element
$("#lnkPopup").colorbox({ width: "90%", height: "85%", iframe: true, overlayClose: false });
});
</script><a id="lnkPopup" href="#" style="visibility: hidden;"></a>
<obout:gridtemplate runat="server" id="tplOpenRequest">
<Template>
<a id="lnkReqItr" href="javascript:PopupLink('<%# Container.DataItem("ReqItrID") %>')">Open Request</a>
</Template>
</obout:gridtemplate>
Any Help is greatly appreciated.
Thanks,
Diego.
Silly me,
I guess reading the Colorbox documentation would have helped. I could have just done...
function PopupLink(vReqItrID) {
$.fn.colorbox({ href: "VendorInfo.aspx?ReqItr=" + vReqItrID.toString(),
width: "90%", height: "85%", iframe: true,
overlayClose: false, open: true });
}
and forget about the trigger which was the part that was failing.
Thanks.