I want a jQuery modal box that appears near or next to the button that triggers it. The box should appear in shape as well as in the following:
It should be height resizeable, so if the content is long, the box will refit.
How can I do this?
The qTip jQuery plugin is pretty good.
http://craigsworks.com/projects/qtip/
I'm not sure if there is one exactly how you want but here is a list of a few that you may be able to modify slightly.
http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/
This one in particular seems good
http://flowplayer.org/tools/tooltip.html
I don't think there's anything quite like what you're looking for out of the box. However, with a little customization and tweaking, you might be able to get pretty close to your goal.
To use a jQuery modal, simply design your modal div somewhere on your page (I usually do it at the very bottom) and give it an initial sytle of "display: none":
<div id="promotion_dialog" title="Choose a piece for promotion:" style="display: none;">
<table id="my_table"> .... </table>
</div>
If you design the div correctly, you might be able to create the shape you're looking for.
Then when the button is clicked, call a Javascript function that displays and positions the div:
function openPromotionDialog() {
$("#promotion_dialog").dialog({width: 350, height: 100, modal: true, zIndex: 10000});
$("#promotion_dialog").dialog('open');
}
See the jQuery UI Dialog docs for more information. Providing a position parameter to the dialog() method should allow you to place it where you want (you'd need to examine the clicked button to get the positions).
Related
I made an onclick popup redmore button for my sidebar text widget in wordpress just copied and pasted this code I found here. I did some little changes and everything worked fine.
The problem occurred when I had to make more onclick popups like that one for the rest of the sidebar widgets, exactly the same popup with same values but with different img and content text.
The problem is both "redmore" buttons in the first widget and in the second one link to the same thing - so it will open the same one no matter which redmore button you click -
this is the website check out the first two items in the right sidebar.
Since I don't know much about Javascript, I'm asking you if you can help me changing the javascript tag link in the code in order to link to another different popup and not the same one - and let me understand how to change it since I have to make a few popups.
You should change the Id attribute of the Contents for eg
<div id="light2" class="white_content">
<div id="fade2" class="black_overlay">
for the second pop up and change the javascript of the second read more text to
here
Same should be applied to all other pop ups.
Here i have changed the fiddle
You need to change the id for every popup Like
getElementById('fade')
getElementById('light')
[the first]
getElementById('fadesec')
getElementById('lightsec')
[the second]
And so on.. same thing on html content, don't just copy, change ids
Example two:
<p>This is the main content. To display a lightbox click here</p>
<div id="lightsec" class="white_content">This is the lightbox content. Close</div>
<div id="fadesec" class="black_overlay"></div>
Everytime I click a div or I focus on a contenteditable div it highlights the text I've clicked. This is not the case for other sites I have tried so I know it's not my mouse, I have a fair amount of jquery and css so I don't think it's useful to post all the code. Could people provide suggestions/speculation to why it's doing this and how it could be fixed because at the moment I have no idea.. I have no specific code to highlight any text so I'm very confused.
Relevant Code:
//This is loaded on body load
$("body").click(function(el) {
if($("#menu").is(":visible")){
//The click handler function puts new textboxes in if clicked correctly.
clickHandler($(event.target));
}
<div class="container image">
<img src="https://placeimg.com/240/180/any" />
</div>
You can try
window.getSelection().removeAllRanges();
document.getSelection().removeAllRanges();
To make sure all your text is not selected.
Please take a look at these two entries:
How can I deselect text using Javascript or jQuery?
Select/Unselect Text on click Using jQuery
So I think this is actually a bug in chrome. After leaving it a few hours and then refreshing the page, it randomly started working with normal functionality. Thank you to everyone who attempted to help - guergana presents a possible solution if you have stumbled across this page looking for answers.
Im using a jQuery calander plugin called datepick on my site. I connect the datepicker to my input field like this:
$('.dobOnly').datepick();
Here's a working example: jsFiddle
By default the calendar pops up when the user clicks on the input. Instead, Id like for it to only pop up if the user clicks an icon next to the input.
Its propbly important to mention that there are several of these inputs on the page Im working on. As such it seems likely that a solution would have to include modifying datepick() to take the id of the related text field as an argument so that the pop up affects the intended input.
What would be the best way to edit waht I have to accomplish this?
According to the documentation you need to wrap the image in a hidden div. Then in the options for datepick specify the showOnFocus and showTrigger properties.
HTML
<input type="text" name="gd2" id="gd2"/>
<div style="display:none">
<img id="calImg" src='https://pnrbuilder.com/_images/cal.png' alt=""/>
</div>
JS
$(function() {
$('#gd2').datepick({showOnFocus: false, showTrigger: '#calImg'});
});
JSFIDDLE: http://jsfiddle.net/xzzCf/7/
There is an example of this on the invocation tab of the documentation
I am using jQuery and Twitter Bootstrap, and want to have a tooltip appear when hovering over a link. However, the tooltip doesn't appear the first time I hover over a link, but if I move the mouse away and back on, it works every time for that link.
I have several of these on the page:
Full Name
I've created a jsFiddle to demonstrate: jsFiddle. Any help would be appreciated - thanks in advance!
What's happening is that you're instantiating the plug-in on the element when you mouseover it the first time, and then the plug-in works as expected on subsequent mouseovers on that element.
Using the configuration suggested in the docs works (see fiddle):
JavaScript:
// tooltip demo
$('div').tooltip({
selector: "a[data-toggle=tooltip]"
})
HTML:
<div style="text-align: center; width: 100%; margin-top: 50px;">
Full Name <p/><p/>
Full Name<p/>
Full Name<p/>
Full Name<p/>
Full Name
</div>
.tooltip() functions initiates the tooltip effect on the link, not show the tooltip
Explanation:
When the $(this).tooltip() is triggered on the first hover, it instantiate the plugin first. Then finally on the second hover you get the tooltip.
Solution:
Add this on your code:
$(function() {
$("a").tooltip();
});
Solution (JSFiddle)
I had the same issue with a tooltip on a button. It turned out that the tooltip didn't show because the button was disabled the first time. There was code FOLLOWING the attempted to show the tooltip that checked some other values and enabled the button. After the first "run" the button was enabled so on the second and subsequent events the tooltip did/does show. I simply moved the "enable" code before the code that attempts to show the tooltip and my problem was solved.
I think it would be cleaner if you let JQuery handle the mouseover event, and put all your codes inside $(document).ready
Similar issues and solution can be found here:
Jquery onmouseover triggers on second event
I am using JQuery Overlay from FlowPlayer.
I have this that opens my overlay:
<a rel="#overlay1" class="miniOpenBtn">Open</a>
$("a[rel]").overlay({mask: '#EFEFEF'});
I am bored of the standard close button and would like to add my own button, that's positioned anywhere inside my overlay:
<a id="closeOverlay" class="miniCloseBtn">x</a>
How can I get this link to close the overlay?
I looked at the documentation and they only give an example of replacing the original close button in the corner of the overlay, using class "close". I want to get rid of that original close button altogether and place additional ones inside the overlay.
I have looked at some old answers here on StackOverflow but having only started to learn JQuery last week, it's a little confusing to say the least.
Any help gratefully received.
You could just remove the div that the overlay is:
$('.miniCloseBtn').click(function(){
$('.overlay_div').remove();
});
If you can get a handle on the overlay to select against (say, it has an ID of 'overlay'), you can do this:
$('#overlay').find('.close').replaceWith('x');
In general, I think anything you create with a class of 'close' will close the overlay.
I tried this and got it working, after a long hard search in their forums. By applying (close:"a.closeOverlayBtn"), it allows me to use a different button for closing the overlay.
The JQuery
$("a[rel]").overlay({
mask: '#EFEFEF',
close: "a.closeOverlayBtn"
});
The Overlay Close Button
<a class="closeOverlayBtn" onclick="flashElement(<%=rsPhotoData.Fields("photoID")%>)">
x
</a>
Which as you can see allows me to call JS functions using my close button, the original one didn't easily allow this.