Hi so when someone visits my site i would like to appear the facebox with the message "Click [like-button] to enter or wait 20 seconds" and when the visitor clicks the like button or the 20s are gone,the facebox disappear.Also the close button and click outside the box closing should be removed. This is what i tried.
<script type="text/javascript">
var sec = 10
var timer = setInterval(function() {
$('#hideMsg span').text(sec--);
if (sec == -1) {
$('#hideMsg').fadeOut('fast');
clearInterval(timer);
}
}, 1000);
</script>
</head>
<body>
<div id="hideMsg" style="display:none;">
Click <iframe src="http://www.facebook.com/plugins/like.php?href=link&layout=standard&show_faces=false&width=450&action=like&font=trebuchet+ms&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe><br />
to enter or wait <span>10</span> Seconds!
</div>
<script type="text/javascript">
jQuery.facebox({ div: '#hideMsg' })
</script>
Download the facebox files from this repository:
https://github.com/thinknirmal/facebox
I have done significant changes to the script and so you can optionally specify not to have the regular closing options.
When initiating facebox through jQuery, do it the following way:
$.facebox({
div : '#content-div',
easyClose : false
});
When you set easyClose to false, all the usual closing options are disabled (close button, escape key and clicking on the background). The default value of easyClose is true.
Related
I want to disable register button and change text to "Please wait..." after user click register button. I tried using javascript like,
HTML,
<button id="disable-submit" type="submit" class="g-recaptcha btn btn-light rounded-pill" data-sitekey="{{ config('services.recaptcha.sitekey') }}" data-callback='onSubmit' data-action='submit'>
{{ __('Register') }}
</button>
js,
<script type="text/javascript">
// $(document).ready(function()
(function(){
$('#disable-submit').on('submit', function(){
var btnd = $('#disable-submit');
btnd.prop('disabled', true);
setTimeout(function(){
btnd.prop('disabled', false);
}, 5000);
})
})();
</script>
Now it disables for a second and gets re-enable. I think it re-enables because of validation checks. I need to disable the button for 4-5 seconds, my registration process needs that much time.
On my website i have a button which when clicked takes you to one of two random youtube videos. However i would like to change this to a image in stead of a button.I have tried to change it to a INPUT type="image" but this doesn't work. Here is the code i am using.
<SCRIPT language="JavaScript">
<!--
function get_random()
{
var ranNum= Math.floor(Math.random()*2);
return ranNum;
}
function getaGame()
{
var whichGame=get_random();
var game=new Array(2)
game[0]= "https://www.youtube.com/watch?feature=player_detailpage&v=NcFQF3PZFRk#t=722s";
game[1]= "https://www.youtube.com/watch?v=klBAW4MQffU";
location.href = game[whichGame];
}
//-->
</SCRIPT>
<FORM name="form1">
<center>
<INPUT type="button" onClick="getaGame()" >
</center>
</FORM>
Thanks for any help
An onclick event can be fired from any element. Here are some examples!
I am having a button which point to a actionlink that I render with jqueryui button, all I want is the rendering visual of the button, and keeping its normal behavior, on Chrome fine, the button points to the actionlink, but on Firefox 11, when I click the button, nothing happens.
This is the code on the view:
<button id="btnNewOffer" style="float: left; margin-left: 30px"> #Html.ActionLink("Offre", "Index", "Service") </button>
This is the script:
<script type="text/javascript">
$(function () {
$("#btnNewOffer").button();
})
</script>
This is working on Chrome but non Firefox 11
Thanks
I don't think you need to use the <button /> element. You can simply use the ActionLink by itself.
Try this:
#Html.ActionLink("Offre", "Index", "Service", htmlAttributes: new { id = "btnNewOffer", style = "float: left; margin-left: 30px" })
:D
I am currently having much trouble with a jQuery animation. Basically, a button click will quickly start a short animation and collapse a sidebar, widening the main content box to full width (and back again if wanted). The issue is that with quick consecutive clicks, the layout goes all crazy. I have tried this condition:
if (!$(this).is(":animated"))
{
// Code
}
But it doesn't work. So I have tried .off(), and it shuts off, but I cannot find out how to turn it back .on(). Can someone help me please? Here is what I have:
<script type="text/javascript">
$(document).ready(function(){
var $button = $("a#toggle");
var $content = $("div#index_main-content");
var $sidebar = $("div#sidebar");
// Disable quicky clicky
$button.click(function() {
$button.off().delay(1000).on();
});
// Hide sidebar
$button.toggle(function sidebarToggle() {
$sidebar.fadeOut(500, function() {
$content.animate({width: '100%'}, 500, function() {
$button.attr("title", "Click to show the sidebar!").addClass("hiding").removeClass("showing");
});
});
},
// Show sidebar
function sidebarToggle() {
$content.animate({width: '69.5%'}, 500, function() {
$sidebar.fadeIn(500, function() {
$button.attr("title", "Click to hide the sidebar!").addClass("showing").removeClass("hiding");
});
});
});
});
</script>
<div id="index_content">
<a title="Click to hide the sidebar" class="showing" id="toggle"></a>
<div id="sidebar">
<!-- Sidebar: float-right/width-28.5% -->
</div>
<div id="index_main-content">
<!-- Content: float-left/width-69.5% -->
</div>
</div>
Also, there is a live demo here. Like I said before, for some reason, the .on() does not happen. :(
Thank you. :)
$content.stop(true,true).animate({ //code });
Try using stop before issuing the animation the second time, for example:
$content.stop().animate(
This will stop and previous animations before starting the new one.
Also use true in the stop statement to cancel other animation and complete the animations.
$content.stop(true,true).animate(
See:
http://api.jquery.com/stop/
stop() to stop the current animation,
clear the animation queue and go to the end of the animation .stop(true,true)
or
turn the button to OFF before you start the animation
turn the button to ON within the animation callback function, so that
is turned on again after the animation finished
OR more easy
<div id="index_content">
<a title="Click to hide the sidebar" class="showing" id="toggle">Click me</a>
<div id="sidebar">sidebar
<!-- Sidebar: float-right/width-28.5% -->
</div>
<div id="index_main-content">content
<!-- Content: float-left/width-69.5% -->
</div>
</div>
$(document).ready(function(){
$('#toggle').click(function(){
$('#sidebar:visible').fadeOut('slow')
$('#sidebar:hidden').fadeIn('slow')
})
})
take a look#
http://jsfiddle.net/jdFrR/
I have a link on my ShowData.aspx page that I'm calling fancybox on.
Edit Data
My JQuery code is:
$("#editLink").fancybox({
'opacity': true,
'overlayShow': true,
'transitionIn': 'elastic',
'transitionOut': 'none'
});
The form EditData.aspx contains a save button. My problem is that after I click the save button the dialog does not close. Furthermore, after the save is performed on the server the client page redirects to EditData.aspx.
The expected outcome is that the dialog closes and I am returned to the parent page (ShowData.aspx).
Thanks!
I removed fancybox and found that this issue also occurs with regular JQuery dialogs. If you load a page that has a submit button (or posts back in any way) then your dialog will disappear and your main page will redirect to the dialog page. Here's a simple test:
HTML:
<div id="divClick"></div>
JQuery:
$(function () {
$("#divClick").dialog({
modal: true,
open: function () {
$(this).load('Postback.aspx');
},
title: 'Ajax Page'
});
});
Postback.aspx:
<body>
<form id="form1" runat="server">
<div>
</div>
Enter Name:
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</form>
</body>
Is there a way to attach an event to the postback from the dialog?
Furthermore, I modified Postback.aspx to include jscolor.js (a JQuery plugin) to see if it would work, it did not work. Any JQuery functionality doesn't seem to work in a dialog.
I ended up using an iFrame. This seems to do the job.
MainPage.aspx
<div id="divClick"><iframe src="Postback.aspx"></iframe></div>
JQuery:
$(function () {
$("#divClick").dialog({
modal: true,
title: 'iFrame Page',
width: 500,
height: 500
});
});
JQuery plugins in Postback.aspx work well and posting back doesn't close the dialog and redirect the main page.