I want to use a Loader in my Website in the checkout button.
So, Once the user click on the Checkout Button, The Loader will display for 5 seconds to according to the below given code.
As my checkout page executes too much of scripts on the onclick of the checkout button, the loader is not working. How can i over come it.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#checkout_btn").click(function(){
$("#div1").fadeToggle();
$("#div1").fadeOut(2000);
});
});
</script>
<div id="div1" style="width:80px;height:80px;background-color:red;display:none;background: url(http://s13.postimg.org/sdxi3qlkj/preload.gif) no-repeat center center;"></div>
Here is the click_checkout() function which validates lot of scripts takes place.
<div class="fw fl"><a class="gren s-shp" id="checkout_btn" onclick="click_checkout();">Check Out</a>
What is the mistake i am doing, and How can i fix this ?
In this kind of event you need to set or use jQuery timecountdown.js . you can find full documentation this here http://harshen.github.io/jquery-countdownTimer/
And Here is your solution:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://harshen.github.io/jquery-countdownTimer/jquery.countdownTimer.js"></script>
<script>
$(document).ready(function() {
$("#checkout_btn").click(function() {
$("#div1").fadeToggle();
$('#hs_timer').countdowntimer({
hours: 00,
minutes: 00,
seconds: 05,
size: 'lg',
timeUp: timeisUp
});
function timeisUp() {
$("#div1").fadeOut();
}
});
});
</script>
<div id="hs_timer" style="display: none"></div>
<div id="div1" style="width:80px;height:80px;background-color:red;display:none;background: url(http://s13.postimg.org/sdxi3qlkj/preload.gif) no-repeat center center;"></div>
Related
I'm using a calendar app to connect multiple different calendars. The way they show the calendar is not really suitable for me so I've been trying to change the JavaScript but as soon as I try to call another version, even if it is exactly the same the calendar don't show, so is there some way to use my own JavaScript? I've tried contacting the creator of the app but no luck.
Working code
<script type='text/javascript' src='https://panel.bed-booking.com/widget/jquery-1.10.2.min.js'></script>
<script type='text/javascript' src='https://panel.bed-booking.com/widget/main_full.js?ver=20180768'></script>
<div id='bb-calendar-0'>
<center>
<img style='width:50px !important; height:50px !important;' src='https://panel.bed-booking.com/widget/gfx/loader.gif' alt='' /><br/>
<a href='http://bed-booking.com' style='color:#73b819 !important' rel='nofollow'>BedBooking</a>
</center>
</div>
<script type='text/javascript'>
jQuery(document).ready(function() {
new CalendarFull(
'0097661bc090e1ca78b844285df5a9c1',
'0',
'bb-calendar-0',
{
normal: '7dbb2c',
reserved: 'fb1643',
nextMonth: 'ecf5e1',
font:'81817f',
width: 450,
lang: 'en',
showBBLink: 'none'
}
);
});
</script>
Test code with javascript at http://yourjavascript.com/31631229421/main-full.js
<script type='text/javascript' src='https://panel.bed-booking.com/widget/jquery-1.10.2.min.js'></script>
<script type='text/javascript' src='http://yourjavascript.com/31631229421/main-full.js'></script>
<div id='bb-calendar-0'>
<center>
<img style='width:50px !important; height:50px !important;' src='https://panel.bed-booking.com/widget/gfx/loader.gif' alt='' /><br/>
<a href='http://bed-booking.com' style='color:#73b819 !important' rel='nofollow'>BedBooking</a>
</center>
</div>
<script type='text/javascript'>
jQuery(document).ready(function() {
new CalendarFull(
'0097661bc090e1ca78b844285df5a9c1',
'0',
'bb-calendar-0',
{
normal: '7dbb2c',
reserved: 'fb1643',
nextMonth: 'ecf5e1',
font:'81817f',
width: 450,
lang: 'en',
showBBLink: 'none'
}
);
});
</script>
working fiddle
https://jsfiddle.net/0gk6L9pr/
test fiddle
https://jsfiddle.net/xq1t6ujv/
Next time, please make your code more readable, one giant blob of code doesn't help anyone (especially yourself, because you are the one that has to work with it).
The error is in the link you provided, because it doesn't contain anything? Just compare these two:
http://yourjavascript.com/64351117249/main-full.js
https://panel.bed-booking.com/widget/main_full.js?ver=20180768
One is completely empty and the other actually has something you can use.
I'm a newbie with jquery and I'm trying to code a very simple animation. I've already coded the div movement but I would like the animation to start automatically when entering the page without clicking or hovering anything.
So this is the code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").hover(function(){
$("#div02").animate({left:'150px'});
});
$("p").hover(function(){
$("#div01").animate({left:'180px'});
});
});
</script>
<style>
#div02{background:url(norahalf.png) no-repeat; background- size:contain;height:100px;width:100px;position:absolute;}
#div01{background:url(rinohalf.png) no-repeat; background-size:contain;height:100px;width:100px;position:absolute; left:500px}
</style>
</head>
<body>
<p>something something dark side</p>
<div id="div02"><img src="pixeltransp.gif" width="100%" height="100%" alt="rino" title="rino"></div>
<div id="div01"><img src="pixeltransp.gif" width="100%" height="100%" alt="nora" title="nora"></div>
Any help would be greatly appreciated!
Nora
Try not having the animate function executed after hovering the paragraph, then:
$(document).ready(function(){
$("#div02").animate({left:'150px'});
$("#div01").animate({left:'180px'});
}
To start automatically you just need to trigger mouseover event on page load:
$(function() {
$("p").hover(function() {
$("#div02").animate({ left: '150px' });
$("#div01").animate({ left: '180px' });
})
.trigger('mouseover');
});
I'm not sure if you still need this p hover event at all though.
Demo: http://jsfiddle.net/rDMGC/
I have found a tutorial for lazy loading Facebook's like box, but it's appropriate only if you use one FB widget on a page.
How would it look like if you want to load "like button" normally, but would like to lazy load "like box", i. e. load it only if the user scrolls and like box is in the viewport?
Also, is it possible to do it without any plugins nad possibly without jquery, i. e. using only pure javascript?
Here is the mentioned code:
/**
* check if facebookHolder is in viewport, and then load Like Box widget
*/
$(document).ready(function() {
function checkScrollingForWidget(event) {
$('#facebookHolder:in-viewport').each(function() {
$('#facebookHolder').append('<div id="fb-root"></div>');
$('#facebookHolder').append('<fb:like-box href="http://www.facebook.com/forexagone" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
FB.init({status: true, cookie: true, xfbml: true});
});
$(window).unbind('scroll', checkScrollingForWidget);
}
$(window).bind('scroll', checkScrollingForWidget);
});
Since Facebook's like box is so widely used and can slow down page loading a bit (even if it's async.), I was quite surprised to see that there are no newer tutorials how to do this. Is it possible at all?
Thank you in advance for your ideas.
This is Markus' code in a simple HTML document:
<html><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Lazy Load</title>
<script src="http://code.jquery.com/jquery-git.js" type="text/javascript"></script>
<script src="http://www.appelsiini.net/download/jquery.viewport.js" type="text/javascript"></script>
<style type="text/css">
.facebookHolder {
height: 50px;
background: #ccc;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
// initiate like boxed already in viewport as soon as fb sdk loaded.
checkScrollingForWidget();
});
function checkScrollingForWidget(event) {
$('.facebookHolder:in-viewport').each(function(index, item) {
if (!$(item).hasClass('fb_loaded')) {
$(item).append('<fb:like-box href="' + $(item).attr('data-url') + '" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
$(item).addClass('fb_loaded');
FB.XFBML.parse();
}
});
}
$(window).bind('scroll', checkScrollingForWidget);
});
</script>
</head>
<body>
<div id="fb-root"></div>
<div class="facebookHolder" data-url="https://www.facebook.com/Google"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/yahoo"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/stackoverflowpage"></div>
</body></html>
You can add a Facebook widget any time dynamically, but you need call FB.XFBML.parse after adding it to the DOM.
This could be inteteresting for me too so I just fixed the tutorial script:
JSFiddle
Of course you need to import jquery and the viewport plugin (if you want to use it).
<script src="jquery.js"></script>
<script src="jquery.viewport.js"></script>
Then include fbroot tag only once and give the holders an specific data-url attribute because loading one url multiple times doesn't seem to be possible. Late we will read out this data-attribute.
<div id="fb-root"></div>
<div class="facebookHolder" data-url="https://www.facebook.com/Google"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/yahoo"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/stackoverflowpage"></div>
Then use the following jQuery code:
$(document).ready(function() {
jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
// initiate like boxed already in viewport as soon as fb sdk loaded.
checkScrollingForWidget();
});
function checkScrollingForWidget(event) {
$('.facebookHolder:in-viewport').each(function(index, item) {
if (!$(item).hasClass('fb_loaded')) {
$(item).append('<fb:like-box href="' + $(item).attr('data-url') + '" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
$(item).addClass('fb_loaded');
FB.XFBML.parse();
}
});
}
$(window).bind('scroll', checkScrollingForWidget);
});
In my HTML page I generate a link, where users can grab to use for things. I need to somehow give the user the link where they can see the link and then copy the link to clip board.
I don't mean copy to clip board through code, just manually selecting the text and clicking ctrl+c or right click+copy is ok.
Is there a way I can create a popup box where it has text there that you can select and copy?
This needs to work with all browsers (IE8+) (Firefox) (Chrome) (especially IE8). So if I use alert box, I will not be able to copy the text so I can't use alerts.
Is there some really easy way that doesn't involve lots of code and also not using another HTML file for the popup box or something.
I can even use jquery if that makes it easy. Really, just a way to show a popup where the user can copy the text, and this is all done with code.
Thanks.
You could use jQuery ui .dialog()
JS:
$(function() {
$( "#dialog" ).dialog();
});
HTML:
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
You could try and use window.prompt() and do something like this: http://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt where you can copy the text from the input, which can default to the link.
with jquery you can do something like this
$(function() {
$( "<div>Your text here </div>" ).dialog();
});
I'd user a overlaying div, which would appear on a click event. It would contain the text You would like to be able to copy and a close button. (using jQuery!)
First save Your div's content in a string variable. Let us call this variable divCont.
After this we create the overlaying div:
var docHeight = $(document).height();
$("body").append("<div id='overlayDiv'></div>").hide().fadeIn("slow");
$overlayDiv = $("#overlayDiv");
$overlayDiv.height(docHeight).css({
'opacity' : 0.9,
'position': 'absolute',
'top': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000,
'margin-left': 10%,
'margin-right': 10%,
'color': 'white'
});
Then we append the content of the $overlayDiv with our divCont string and we add a close button to it:
$overlayDiv.append(divCont+"<button id='close'>CLOSE</button>'");
After this we add a handler to the close:
$("#close").ready(function(){
$(document).on("click", "#close", function(){
$overlayDiv.fadeOut("slow", function(){
$overlayDiv.remove();
});
});
});
Link to working example -> fiddle
create a fixed div in the middle of the screen (or where ever you want it to be) with a input text box within it. You can trigger this structure whenever you generate a link.
check this fiddle
<div id = "clipboard">
<input type = "text"></input>
</div>
CSS style would be
#clipboard{
position: fixed;
left: 40%;
top: 40%;
width: 100px;
height: 30px;
border: thin solid grey;
}
#clipboard input{
width: 100%;
height: 100%;
}
you could use an iframe
--------opener.html
<html>
<head>
<title>modalopener</title>
<script language="JavaScript" type="text/javascript">
var modalWin = null;
function openModal() {
if (window.showModalDialog) {
modalWin = window.showModalDialog('modalchild.html',null,'dialogWidth=300px; dialogHeight=200px; status=0');
}
}
</script>
</head>
<body>
<b>open modal window</b>
</body>
</html>
--------modalchild.html
<html>
<head>
<title>Modal Child</title>
</head>
<body leftmargin="0" topmargin="0">
<iframe name="modalChild" width="100%" height="100%" src="modaliframe.html" frameborder="0"> </iframe>
</body>
</html>
--------modaliframe.html
<html>
<head>
<title>Modal Iframe</title>
</head>
<body leftmargin=0 topmargin=0 bgcolor="pink">
<div align="center"><br>
yahoo<br>
google<br>
hotbot
</div>
<script language="JavaScript" type="text/javascript">
// call this to reload
function loadIFrm(url) {
location = url;
}
</script>
</body>
</html>
<html lang="en">
<head>
<style>
#thisdiv {padding:10px; margin:-15px 0 0 40px; background-color:#333; position:absolute; display:none;}
div.block {margin-top:10px; width:200px;}
div#thisdiv a {color:#fff;}
</style>
</head>
<body>
<div id ="one" class="block">one</div>
<div id="thisdiv">hello</div>
<div id ="two"class="block">two</div>
<div id ="three"class="block">three/div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('#one').hover(function() {
$('#thisdiv').fadeIn(400);
});
$('div:not(#thisdiv)').mouseleave(function() {
$('#thisdiv').fadeOut(400)
});
});
</script>
</body>
</html>
#thisdiv doesn't fadeOut. I could have used the following, but it only fades out if the cursor mouse outs of #thisdiv. Is there any way i can solve this so when the cursor navigates away from anyway, the div still fade out.
$('#thisdiv').mouseleave(function() {
$('#thisdiv').fadeOut(400)
});
I couldn't figure out what's why jquery's :not selector is not doing what I wanted to.
Am i using it wrongly?
1 - You need to use mouseover, not hover for the first binding:
$('#one').mouseover(function() {
$('#thisdiv').fadeIn(400);
});
hover accepts two function parameters (mouseover/mouseout).
2 - Your closing div tag at the end of your markup is broken (missing a <):
<div id ="three"class="block">three/div> <-- here
I tested your code having made the above modifications, and it seems to work as you want it to (if I've understood correctly). Test it here.
if you are going to explicitly set the time, you will need to pass it in as a hash parameter. Otherwise you can use 'slow', 'fast' or the default which is 400.
$('#my_button').mouseleave(function(){ $(this).fadeOut({duration:1000}) })