I want to highlight a div which is part of a form using fancybox.
<form>
...
...
<div id='sub-form'>
...
...
</div>
...
...
<form>
I want to show the div with id = sub-form in a popup window and also in the main page. When value of an element in the popup is changed then value of that element in the parent window should change accordingly.
Mean while i want to highlight that div.
I tried it using fancybox but fancybox is removing it from the form and also hiding from the parent window.
Is it possible to do with fancybox? OR any plugin is available to do this task? Thanks!
Related
I have an app where i use MatDialogRef to open a component as a dialog.
The dialog shows a long text, but for some reason, the textarea scrolls to the bottom.
This does not happen when it's not a dynamically created component.
Heres an example: https://stackblitz.com/edit/matdialogref-textarea-scroll-issue
I hope someone can explain whats happening and how to fix it, so the textarea stays in the top of the scroll.
Thanks in advance!
From #angular/material dialog docs:
Once a dialog opens, the dialog will automatically focus the first tabbable element.
You can control which elements are tab stops with the tabindex attribute
Just add a tabindex=0 on the modal div:
<div class="dialog" tabindex="0">
<textarea class="texta" [(ngModel)]="data"></textarea>
</div>
Here's a Working Demo for your ref.
Here's another thread for your ref:
angular 6 mat-dialog scroll down to bottom automatically
I have a page which loads dynamic content inside a modal popup box called TINY box. The content is generated only when the respective links are clicked. I then have a variable called var innerhtml = "<div id ='"+d.name+"'> which generates divs inside the modal box.
where d.name is a variable that dynamically produces a value based on my data. This div is inside the main modal box div which is generated and destroyed whenever the user opens the link and closes the box.
Infact even the box is generated on-the-fly:
var innerhtml2 = "<div id ='box'>
But WHILE the box is open, I want the box to autoscroll to a particular div (based on the ids I've mentioned above).
I tried ScrollTop, ScrollTo and Scrollintoview - but I haven't had any luck because the modal box is created and destroyed on the fly and I've read around that those functions work only once the page is fully loaded. Is it possible to write a program that can automatically scroll a dynamically generated modal box to dynamically generated divs inside it?
So how can I do this? Do you need code snippets?
Thanks in advance!
Kaushik
Assuming I'm understanding you right, you might be able to use the following jquery code within the function that opens the created box and after the div has been added to DOM:
$('html, body').animate({
scrollTop: $("#"+d.name).offset().top
}, 1000);
This will scroll to the top of the element with the id stored in the variable d.name,
The modal box loads with a time delay and so when the DOM element is finally generated, the code to scroll is already executed and hence the program couldn't recognize the DOM element Using Jquery's triggerHandler and a longer time delay for scroll, my issue go resolved! Also, I think these sort of bugs are what are known Heisenbugs -Why would jquery return 0 for an offsetHeight when firebug says it's 34?
I have Four DIVs and I call accordion function to it. It works fine initially. But it fails after I clear all the content and again append the FOUR DIVs.
Kindly take a look at the link
http://jsfiddle.net/p7vUk/2/
You will see that on clicking divA , divAA will slide toggle.
on clicking divB, divBB will slide toggle.
After you click the 'clear all' Button, the div=content is cleared and same four DIVS are appended, but the jquery accordion fails to work.
The accordion styling and behaviour is defined upon creation. Looks like the accordion does not update when the content changes. Nor does there appear to be a method you can call to trigger an update.
Have you tried 'turning it off and on again'?
//change content, then:
$("#content").accordion("destroy");
$("#content").accordion({ ... your options ... }); //create it again
This may require more related work, such as setting the originally selected tab, etc.
I have some divs which are structured like this:
<div>
<div><a>more Info</a></div>
<div><a>more segments</a></div>
</div>
<div>
<div><a>more Info</a></div>
</div>
<div>
<div><a>more Info</a></div>
<div><a>more segments</a></div>
</div>
.......
These divs are being generated dynamically. Some divs contain 2 hyperlinks (like the 1st div), some contain only one hyperlink (like the 2nd div).
When I click on moreInfo link, it has to display one div which contains some information. When I click on another link, the previously displayed div should be hidden and open appropriate div associated with that link.
When I click on moresegments link, it has to display number of segments and all moreInfo links should be disabled. Each segment consists of moreInfo link(segment consists the code just like 2nd div). After click on moreInfo link in each segment. It has to behave like in point1.This is my sample code http://jsfiddle.net/H5R53/16/In the above code, when I click on moreInfo link it displays one div which contains some information .Upto this it's working fine. Now my problem is, when I click on the same link again it doesn't show the Information again. And also when I click on moresegments link the moreInfo links( which are not child of moresegments link) should be disable and all opened div's( which are opened when click on moreInfo link) should be close. Anyone please help me.
If I understand your issue correctly, you want to hide the div #moreInfo if the user wants to open another one.
If so,
JQUERY
if ($('#moreInfo').size()==1) {
$('#moreInfo').remove();
}
YOUR JQUERY WITH THAT CONTROL ADDED
$('.moreInfLink').live('click',function(){
if ($('#moreInfo').size()==1) {
$('#moreInfo').remove();
}
$(this).after("<div id='moreInfo'>sdasdad<br/>sdasdad<br/>sdasdad<br/><div id='close'>close</div></div>");
});
And your Fiddle Updated!
can I cache an empty form template as a second page in browser cache
so that when you click "create event" button on first page it immediately
opens empty form template without having a need to download the template
from the server as it's cached.
Just like CREATE EVENT button in Google calendar; which let's you to switch between calendar and new event form template.
Well, you can either use Javascript for building the new page from scratch when the respective action is invoked (probably quite tedious) or you can use an invisible section (e.g., a separate <div>) of the HTML page (style = display: none) and make it visible by changing its class to a visible style and making the original page invisible (change its style to display: none).
One way to accomplish this would be to load your second view into a hidden container. You can hide it with a simple CSS display property toggle, like this:
<div id="mySecondView" style="display: none;">
<!-- content of second view here -->
</div>
And on button click you can do this to unhide it:
With jQuery:
$('#mySecondView').show();
or
$('#mySecondView').fadeIn();
Without jQuery:
document.getElementById('mySecondView').style.display = '';
Of course you'll have to position the second view via CSS as you want it, otherwise it'll just pop up in some weird place that won't make sense.