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.
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>
I have created a navigational menu with some of them having submenus. I want the menuitem with fa-chevron-down(down arrow icon) to change to change to fa-chevron-up (up arrow icon) when user clicks on that menu item and changes back when user clicks anywhere else. Plus i also have two request,
1) Since i am very new to jquery, the jquery code that i wrote seems to
do the trick but is there a better way? (notice when one menu item is clicked twice the sliding takes place twice. ITS ANNOYING)
2) When user resizes the window the html elements doesnot stays in place
and scatters.
Thanks in advance.
jsfiddle demo
UPDATE :
Thanks for solving my problem. I refined my problem further and it is working perfectly. Here is the final** JSFIDDLE**
For changing the icon you can easily do something like this in your click event:
$(this).find($(".fa")).removeClass('fa-chevron-down').addClass('fa-chevron-up');
for More take a look at jsfiddle example:
jsfiddle example
I think there is no need for changing the class.
If you only want to change the fa-chevron-down to fa-chevron-up icon, instead of switching the classes, just use toggleClass for fa-rotate-180. fa-rotate-180 will rotate your icon and it might solve your purpose. No need for adding/removing individual classes.
Let's say:
$('selector').click(function(){
$('menu-selector').toggleClass('fa-rotate-180');
});
It's just a sample. You can work around it.
Font Awesome v5 has changed things quite a bit.
This is the code I used to get a plus/minus collapse button working with Bootstrap, JQuery and FontAwesome.
HTML:
<a class="btn btn-collapse" id="btn-collapse" data-toggle="collapse" data-target="#collapse-section"><i class="fas fa-minus"></i></a>
JQuery script:
$("#btn-collapse").click(function() {
if ($(this).hasClass('collapsed')) {
$(this).find('svg').attr('data-icon', 'minus');
} else {
$(this).find('svg').attr('data-icon', 'plus');
}
});
You should be able to substitute plus/minus for chevron up and down.
I am working on a system where a user can add notes over an image that they submit. Currently I have a note div that when clicked, will open up a text box to edit it. When hovering over this div, I use Bootstrap Tooltip to preview the information within the textbox.
I also have a list of the notes within a separate right panel. Is is possible to hover over the listed note in the right panel, and show the tooltip on the note div? In general, my question is: Is it possible to activate a tooltip from a separate div?
Here is the primary div that when hovered, shows a tooltip
<div originalh="85" originalw="122" originaly="501" originalx="490" h="23.071428571428" w="33.114285714286" y="135.98571428571" x="133" noteid="1153" note="TEST" class="noteBox helpTip" onclick="process.editNote(this)" id="note1153" data-original-title="TEST<br></div><small>Type: Color Correction</small><br/><small>Status: Awaiting Approval</small><br /><small>By: Josh Admin<br />Today 10:54 AM</small>"></div>
Is is possible for me to apply some code to a separate div that would allow me to hover over it, and trigger the tooltip on #note1153 above?
Yes, you can trigger the tooltip on any element via JavaScript. See the tooltip documentation for more information.
You would just do:
$('#whatever').tooltip('show');
Here's an example of it in action: http://jsfiddle.net/sJ88m/
So I have a sprite of buttons that I want to use for my website (https://www.metsales.com/MetropolitanSales/microsite/epson/images/epson_buttons.png),
and I was wondering if it is possible to set a section of each button to open up a drop down menu.
This may get a bit confusing but, for each button, when you hover over the entire button I have a hover image in the sprite, but I want to distinguish between clicking the arrows on each button and the button itself. So the arrows will bring a drop down menu and the button will take you to an overview page.
How can I go about doing this? haven't been able to find anything with nearly enough information to help me out.
Simple approach would be put a child in the link, if child is clicked... open dropdown, if not follow link
Position and size the child accordingly
<a class="buttonClass" href="foo.html"><span class="toggleDropdown"></span></a>
jQUery
$('a.buttonClass').click(function(e){
if( $(e.target).is('.toggleDropdown') ){
/* prevent href being opened*/
e.preventDefault()
/* run dropdown code here */
}
})
User wouldn't see child as it would be transparent
Yes you can all you need to do is tweak the elements inside each button, in my case i use a and div ul please review this demo
http://jsfiddle.net/BFWQa/13/
and ask any question if it's what you expected.
You should use from background-image and background-position rules of CSS. for more details check this link.
Please voteup it or/and mark it as answer if it helped you.
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).