Ok, so I've got a pop up window from Javascript. However, this window has dynamically generated content - a person could add dozens of entries, which would fill the box, but because the box is frequently generated with little content in it, it does not naturally have a scrollbar.
How would I add a test in Javascript to make sure that everytime this script runs, a test to see if a scrollbar should be implemented is run, and then how would I implement the scrollbar?
window.open ("http://www.javascript-coder.com", "mywindow","scrollbars=1");
Or, you may be able to take this into the hands of CSS:
In the popup:
body {overflow-y:auto !important};
Related
It shows me a simple Alert Box when I use this
<button onclick="alert('AlertBox')">Click Me</button>
But is their any way to have an alert box, with extra bg color and some extra effect look?
use Sweet Alert
Or Make div with fixed position display none, and in javascript when you click on botton change div display to block
Here is the detailed example of Designed Alert Box with help of Sweet Alerts
http://javainfinite.com/html/custom-designed-alerts/
The javascript alert() is a system message box that will will block your page whilst it displays and will look different on different operating systems.
What you are looking for is usually referred to as a dialog box or modal popup, these are constructed using html and javascript to look like the page behind is blocked or greyed out.
If you are starting out, you could look at some examples like:
https://www.w3schools.com/howto/howto_css_modals.asp
These are build from scratch.
Or you could look at using a css librarly like BootStrap which will have these components and other components to help style your website or application.
eg: https://getbootstrap.com/docs/4.3/components/modal/
I have an angular/bootstrap app and the modal window of an app contains small textarea which can contain a lot of text that does not fit the size of textarea (and modal).
I would like to add some kind of button to the small modal window which would open new bigger popup/modal containing nicely formatted content of text area, like 90% of the screen.
I am not asking here for the code, but more like for the way how to approach the problem. I have already tried several approaches but I got stuck always.
Thanks a lot!
I would just use JavaScript to handle the click of your button to expand the modal size, by adding a class to your modal.
e.g. jQuery example:
$('.expand-modal').click(function() {
$('.modal').addClass('expanded');
});
And then just write some CSS for .modal.expanded where you ensure it's 90% of the screen size or whatever you want.
You would probably want another button to minimise the modal again, in which case you just do something like $('.modal').removeClass('expanded');
I'm using a poshytip, it is working fine, until I want to display my tip on the element that is under the current page (I mean that page where I have to scroll down to see it, don't really know how to name it properly). Unfortunately, poshytip has some bugs related to that - if I want to display a tip on the element that is currently lower than the current page position, then tip is showing at the bottom of my page. Havent seen any better tip plugin than this, so I decided to fix it on my own.
The question is - is there a way in jQuery/javascript to check if the element (for example the input with ID) is on the current page that user is viewing? By saying current page I mean the top of the page - my element is placed much lower, so user have to scroll down the page to see it, so is there a way to do something like: if user is scrolling down the page, and the element will be finally visible then send alert to the user?
I know this may be kinda complicated, but couldn't find any better words to describe my problem, I'd answer additional questions, if you have one.
If you want to test for an element's visibility in the viewport, you should reference this post here as it's outlined quite clearly.
On another note, I prefer using the jQuery tools suite for my Tooltip plugin of choice. You can see it here
I am having some trouble with getting jquery to recognize classes/ids of content that has been loaded into a dialogue box. All the jquery code (including the code that deals with the as yet unloaded classes) is loaded before the dialogue box is created, however the html that eventually goes into the dialogue box is created on the fly. I know it is going to get certain classes but don't know the rest of the code/content hence the reason I am loading it from the database. If I put the html on the page with the clickable class rather than the dialogue box it works, but I obviously don't want to do that. I was thinking this is a DOM problem since the class that jquery is going to be listening for is not on the page until AFTER the dialogue box is created (the dialogue box itself is also created by a click on another item - this has to happen this way as people may or may not want to get the dialogue box with the info from the database in it up). Any help in explaining and possibly finding a solution for this is much appreciated.
Have a look at jQuery.live().
,
HI,
I need some ones help with this, thank you in advance.
In my site i have that when the user clicks on a input box then a new div opens up on top of the input box in that exact place.
Now i need to add that when that div opens i need the background of the hole screen to become black with some opacity, i think it is called overlay.
some thing like i want you can find here:
http://www.omnipotent.net/jquery.sparkline/
if you hover with the mouse over the div on the side that says "come work at splunk".
How can i do something like that with jquery or any thing else.
Thank you very much
You want to use the jQuery UI Dialog Modal.
Edit: jQuery's Dialog method will give you a similar effect but is usually used for onclick events rather than mouseover/mouseout. Have a look at the javascript code on the page you linked (around line 356) and you'll see:
$('#splunkjobs').mouseenter(function() {
// make element absolute, positioned over the top of the float and resize
$('<div id="shade"></div>').
appendTo('body').
css('height', $(document).height()).
animate({opacity: 0.6});
This essentially creates a that covers the page and then fades it in.
I still think using a Dialog for your button is preferred (and much simpler).
this is caled 'modal', you can use jquery:
http://jqueryui.com/demos/dialog/#modal
http://www.queness.com/resources/html/modal/jquery-modal-window.html
http://dev.iceburg.net/jquery/jqModal/#examples
or if you still need more:
http://coderplus.com/2009/11/jquery-modal-boxes-to-improve-your-ui/