<div id="view"></div>
<div class="bar" style="padding:0px;" id="bar">
<script>
var bar = '<img class="myclass" src="button.png" >  ' ;
$view = jQuery('#view') ;
$view.dialog({
height: 650,
width: 650,
buttons: { "welcome" :
function() { msg() ; }
},
open: function(event, ui)
{ if (full_toggle == 1)
{
$bar.dialog('open') ;
}
}
}) ;
bar = $(".bar", "#view").dialog({
height: 30,
width: '100%',
textAlign : "justify",
marginLeft : "auto",
marginRight:"auto"
})
</script>
</div>
In the above script since bar is a dialog how can i do a hover or mouseover property on bar
How about this:
$('.myclass').mouseover(function(){
// whatever....
});
Or
$('.myclass').hover(function(){
// whatever....
});
You don't need to mix javascript code with HTML. you can put it on the HEAD section inside $(function(){}); like the bellow code.
$(function(){
$('.bar').hover(
function(){ alert('Hover!'); },
function(){ alert('Hover Out!'); }
);
});
after saw your updated the question about the dialog:
jQuery UI dialog render some html. I suggest you hook in into the html that you want to hover.
For example:
$('.ui-dialog').live('hover', function(){ alert('Hover!'); } );
You can also use:
$view.dialog({
open: function(){
$('.ui-dialog').hover( function(){ alert('Hover!'); } });
}
});
Look here for additional resource.
$('#bar').hover(function(){
alert('I was hovered...');
//function code here...
},
function(){
alert('No longer hovered...');
//function code here...
}
});
I would also recommend modifying your code a bit... Its cleaner to read if you put all of the HTML elements in there such as your image and then at the bottom of the page, place your document ready jQuery code that initializes all of the other items like dialogues, etc. Placing JavaScript at the bottom of your page will improve load times.
Related
here i define a function for calling various dialog boxes, but i am not able to close it by clicking outside .please help me.
Thanks
javascript
/*function for dialog box */
function dialogBox(dialoge,opener){
if(dialoge.length>0 && opener.length>0){
dialoge.dialog({
autoOpen: false,
width: 300, //width
height: "auto",
buttons: {
Close: function() {
dialoge.dialog( "close" );
}
}
});
$("body").on("click",".ui-widget-overlay",function() {
dialoge.dialog( "close" ); /*this works for modal */
});
opener.click(function() {
dialoge.dialog("open");
return false;
});
}
}
function calling
var desc_add = $(".dialog");
var desc_open = $(".opener");
if(desc_add && desc_open){
desc_open.change(function(){
dialogBox(desc_add, desc_open);
});
dialogBox(desc_add, desc_open);
}
ruby
<%= image_tag("/assets/help.png", :alt => "info", class: "opener") %>
<div id="dialog" title="HELP">for the addess</div>
There are many examples here that might suit your case:
How do I detect a click outside an element?
don't forget to fix your javascript, it has an extra })
I am new to jQuery and am trying to gracefully submit a form using AJAX rather than the traditional post method. So far I do the following to hide the form and prevent it from submitting:
$(document).ready( function() {
$("#contact_me").submit( function(event) {
event.preventDefault();
});
$('input#submit').click( function() {
$('#contact_me').fadeOut( 1000, function() {
$('#contact_me').hide();
$('#contact_me').after( '<p class="submission_text">Thank you for contacting me. I will contact you shortly.</p>' );
} );
});
});
However, ideally, I would like the p.submission_text to fade in after the form has been hidden. However, if I append the following after the call to .after, the text does not fade in, it just appears:
$('.submission_text').fadeIn( 600 );
How can I get the behaviour I want?
.submission_text needs to be hidden in the first place in order to fade in. Try this:
$(document).ready( function() {
$("#contact_me").submit( function(event) {
event.preventDefault();
});
$('input#submit').click( function() {
$('#contact_me').fadeOut( 1000, function() {
var $p = $('<p class="submission_text" style="display:none">Thank you for contacting me. I will contact you shortly.</p>');
$('#contact_me').hide();
$('#contact_me').after( $p );
$p.fadeIn( 600 );
} );
});
});
Because you are appending p tag with class 'submission_text' dynamically using jquery so,use event delegation as shown :
$(document).on('click','input#submit',function(){
$('.submission_text').fadeIn( 600 );
});
Add the p.submission element as a hidden element initially with .hide() as follows:
$('input#submit').click( function() {
$('#contact_me').fadeOut( 1000, function() {
$('#contact_me').after( '<p class="submission_text">TEXT</p>')
.hide()
.fadeIn(600);
} );
});
This is the jQuery code written on the php file of the plugin. IT is working fine now but i want it to close when some one clicks outside of the panel.
Here is the javascript code :
<script type="text/javascript">
jQuery(document).ready(function($) {
/* SideOffer Sidebar Functionality */
$("#sideoffer").toggle(
function() { $(this).animate({ "right": "<?php echo get_option('hd_sideoffer_out'); ?>px" }, "slow"); },
function() { $(this).animate({ "right": "<?php echo get_option('hd_sideoffer_in'); ?>px" }, "slow"); }
);
/* SideOffer .hd-sideoffer click function */
$(".sideoffer").click(function(){ $("#sideoffer").click(); });
/* SideOffer aLlow clicks on content box */
$("#sideoffer .box").click(function(event){ event.stopPropagation(); });
});</script>
Kindly help.
What you'll want to do is add this into the ready function
What it does is adding a delegated event on the document to trigger when anything that is not #sideoffer is cclicked and then hide #sideoffer.
$(document).on('click', ':not(#sideoffer)', function(){
$('#sideoffer').hide()
});
You'll need to capture the click event for everything other than your original click, which I guess is #sideoffer?
$('body').click(function(event) {
if (!$(event.target).closest('#sideoffer').length) {
$('#sideoffer').animate({ "right": "<?php echo get_option('hd_sideoffer_in'); ?>px" }, "slow");
};
});
try to use javascript
$('body').click(function(event) {
var target = event.target;
/* do something when getting element you are currently click on*/
}
Here is example, http://api.jquery.com/event.target/
I have simple question, the bootstrap tooltip works on particular selector[tag] on hover[mouseover] as default i.e you need to hover on the tag to activate the tooltip or make it appear. I want to make it appear in an input tag when i left the tag or when cursor leaves that input tag automatically, not on hover[mouseover]...
The question at hand is by default the tooltip works on following
('selector').tooltip('show');
Is there anyway to make it according to my specifications above
Something like this
$('input').tooltip({
trigger: 'manual'
}).on({
blur: function() {
$(this).tooltip('show');
},
focus: function() {
$(this).tooltip('hide');
}
});
Example here - http://jsfiddle.net/UPRbm/
Try this:
window.onload = function()
{
if(!window.jQuery)
{
alert('jQuery not loaded');
}
else
{
$(document).ready(function(){
$('#example').tooltip({'placement':'top', 'trigger' : 'manual'});
$('#example').blur(function() {
$('#example').tooltip("show");
setTimeout("$('#example').tooltip('hide');", 1000);
});
});
}
}
I'm using jQuery Tools (http://jquerytools.org/) and cannot get the below function to accept a passed parameter. I'm not proficient in javascript or jquery and cannot find a solution anywhere that will make this work for the below code. Thank you for any help!
Current setup:
<a href='javascript:popup();'>Text Link That Calls Below Function</a>
<script>
function popup() {
if ($("#facebox").hasClass("init")) {
$("#facebox").overlay().load();
}
else {
$("#facebox").addClass("init");
$("#facebox").overlay({
// custom top position
top: 260,
mask: { color: '#838383',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: true,
load: true
});
}
}
</script>
I would like it to do something like this...
<a href='javascript:popup(apples);'>Text Link That Calls Below Function</a>
<script>
function popup(choosebox) {
if ($("#choosebox").hasClass("init")) {
$("#choosebox").overlay().load();
}
else {
$("#choosebox").addClass("init");
$("#choosebox").overlay({
// custom top position
top: 260,
mask: { color: '#838383',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: true,
load: true
});
}
}
</script>
You need to pass a string as an arguement, unless you have a variable named apple defined above (var apples; ). Try changing it like below,
<a href='javascript:popup("apples");'>Text Link That Calls Below Function</a>
Note the quotes surrounding the popup("apples")
Since you are using jQuery, you can do it nicely like below,
HTML:
<a href='javascript:void(0)' class="aLink" >Text Link That Calls Below Function</a>
JS:
$(function () {
$('.aLink').click(function () {
popup("apples");
});
});
Also I think you may need to change your selector like below,
function popup(choosebox) {
var $choosebox = $("#" + choosebox);
if ($choosebox.hasClass("init")) {
$choosebox.overlay().load();
}
else {
$choosebox.addClass("init");
$choosebox.overlay({
//..rest of your code
The unobtrusive javascript approach is generally considered better and the JQuery way.
$('a.someclass').click(function() { popup('orange'); });
Providing you give your <a> element has a class of "someclass" in this example.
This keeps your js seperate from your html. That code could go in document ready event:
$(document).ready(function() {
// code here
});
Write a click event for a class on that anchor, then determine which "box" is related to that link by reading a data- attribute. This will give you a generic, reusable block of jQuery code that can be called by any anchor tag matching this pattern.
HTML:
Text Link That Calls Below Function
JavaScript:
$(document).ready(function(){
$('a.popup').on('click', function(e){
var $_target = $('#' + $(this).data("choosebox"));
if ($_target.hasClass("init"){
$_target.overlay().load();
} else {
$_target.overlay().load({
top: 260,
mask: { color: '#838383',
loadSpeed: 200,
opacity: 0.5 },
closeOnClick: true,
load: true
});
}
e.preventDefault();
});
});