on this page there is a button with a jQuery effect. I want to speed up the animation and see how it will look like. So I opened up the inspector and notices there is a fade effect with 500 speed. I want to chagne this to 100 and see what it'll look like. How can I do this using the consoles script window? Thanks
You can run the following code in your console window, the script just remove the element and add it again you can change the speed in fadeTo()
$(".hover").remove();
$('.otherbutton,.homebutton,.downloadbutton,.donatebutton')
.append('<span class="hover"></span>').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(200, 1);
}, function () {
$span.stop().fadeTo(500, 0);
});
});
If you open the elements tab and expand the section of code you are interested in you can double click the code to edit it.
Related
function myFunction() {
alert("Lol");
}
<button onclick="myFunction()">Click Here</button>
That's my code and I am wanting this to run automatically when opened up. It should run the function and a pop up box will open in 0.5 seconds. When the pop up box is closed, another one is opened in 0.5 seconds.Just to clarify, this is mainly used for pranking my friend and I had the working code but my system crashed and the file got corrupted/other, either way it no longer works and I can't seem to remember the code exactly. Please can someone help me get this code up and working again. I only want it to open a pop up box and nothing else as I know this could be used as a method to spam others however this will be used fro nothing but me and my friends work. Thank you again.P.S. I have had to add a space between my and my as other wise it would not let me post this question.
Use this to launch the code when a page with this script load :
window.onload = function() {
setInterval('alert("Lol")', 500); //Actualisation 0.5s
};
Or this to use the button :
function myFunction() {
setInterval('alert("Lol")', 500);
}
If u want to stop this interval, not useful here but good to know
var intervalID = setInterval('alert("Lol")', 500);
//Later in the process
clearInterval(intervalID);
eventlisteners usually work:
document.addEventListener("DOMContentLoaded", function(event) {
//show popup
});
I know there are more efficient ways at doing this but I have my reasons for doing it this way. I have a modal popup window. I would like for this window to pop up as soon as the visitor loads the page. As of right now the window is reached and opened by clicking a link that takes them to index.php#login_form.
"#login_form" being what I would like to add the URL on page load. Then they can chose to exit it once it has initially loaded with the popup.
Now is there a way to do this more efficiently with out having to change my css or code very much?
Thanks!
The hash in url can be accessed through window.location.hash in javascript. You can judge this in body onload event.
To answer your question I have created a fiddle, that takes your example and solves what you are looking for. http://jsfiddle.net/sgaurav/xA4vG/
Basically what this code is doing is, selects the id of click you want to simulate and then creates a mouse event for click as per answer given here How do I simulate user clicking a link in JQuery?
$.fn.simulateClick = function() {
return this.each(function() {
if('createEvent' in document) {
var doc = this.ownerDocument,
evt = doc.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
} else {
this.click(); // IE
}
});
}
Now this code is used onload event of body to fake a click on the link that you are doing manually till now using
jQuery(document).load(
jQuery('#join_pop').simulateClick()
);
This in turn loads popup as soon as page opens up. You can change id in last code to the login form if you want and that will start showing up on page load instead of sign up.
One easy way is to load the page directly with the hashtag login_form:
http://www.script-tutorials.com/demos/222/index.html#login_form
Or if you want to be more "precise" you can use jquery like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<!--Place this at the end of the body tag.-->
<script>
$(function(){
window.location.hash = "login_form"; //this will add with js the #login_form hash at the end of th url
})
</script>
You can use jquery to show the modal when the window is loaded:
Try this code and you'll understand:
$(function(){
alert("Done loading");
})
You'll add the code to show the modal instead of the alert function. If the modal is shown or hidden with css, you can easily add a css class to an element with:
$(".element").addClass("showModal);
Or remove a class with:
$(".element").removeClass("hideModal");
Be sure to have the jquery library imported. I hope this answers your question.
I made this fiddle
http://jsfiddle.net/nAb6N/10/
As you can see I have 2 animators , a element and body class,
I am adding class to body after the first click on a element but once I click on body is not closing it. If I define animators as
var animators = $$('#opendiv,body');
it works ok except that I do not want the div to open on body click. I need it to close on body click.
Any help is appreciated.
Thank you!
Right. Seems as if you really require an outerClick pattern to close. Here's the one that is most notably used within mootools devs, allowing you to create a custom event, based on click:
Element.Events.outerClick = {
base : 'click',
condition : function(event){
event.stopPropagation();
return false;
},
onAdd : function(fn){
this.getDocument().addEvent('click', fn);
},
onRemove : function(fn){
this.getDocument().removeEvent('click', fn);
}
};
The way it works is: it is based on a normal click. upon adding, it adds the callback as a click event on the document. when a click happens within the element itself,it stops bubbling via event.stopPropagation();, else, it will bubble and the callback will run.
here's how it ties together after the above:
http://jsfiddle.net/dimitar/nAb6N/13/
(function() {
var opener = $('opendiv');
var boxtoopen = $('box');
boxtoopen.set('morph', {
duration: 700,
transition: 'bounce:out'
});
boxtoopen.addEvent('outerClick', function(event) {
boxtoopen.morph(".openOff");
opener.removeClass("hide");
});
opener.addEvent('click', function(e) {
e.stop();
boxtoopen.morph(".openOn");
this.addClass("hide");
});
})();
I have also 'outsourced' the morph properties to the CSS as it makes more sense, semantically.
P.S. note that you need mootools 1.4.3 or 1.4.5, but not 1.4.4 as there's a morph bug to do with units in that release. the jsfiddle above uses 1.4.6 (mootools edge).
I know that onload event waits for page resources to load before firing - images, stylesheets, etc.
But does this include IFrames inside the page? In other words, is it guaranteed that all the child Frames' onloads will always fire before the parent's does?
Also, please let me know if behavior varies between browsers.
No, it doesn't. If you want to do something like that, you'll need to add an onload handler for the iframe. You can do this nicely with jQuery:
<iframe src="http://digg.com"></iframe>
<script>
var count = $('iframe').length;
$(function() {
// alert('loaded'); // will show you when the regular body loads
$('iframe').load(function() {
count--;
if (count == 0)
alert('all frames loaded');
});
});
</script>
This would alert when all the frames are loaded.
See the example:
http://jsbin.com/azilo
Or plain javascript should work..
function checkIframes() {
if(!i) { i = 0; }
if(document.getElementsByTagName('iframe')[i]) {
document.getElementsByTagName('iframe')[i].onload = function () { i++; checkIframes(); }
}
else { yourFunctionInHere(); }
}
haven't really tested this, but should work... than refer to it with document.onload = function() { checkIframes(); }
I don't really like libraries like jQuery, because so far I found I can achieve more with less code, with regular javascript.
As I see on my pages, each iframe got independent onload, and top-frame onload doesn't wait for iframes to fire.
I got gif/png banners on my site that sometimes loads very slowly, so I put them into iframe and that made whole site and onload event to work faster.
I have a html page A and a link in the page which opens up page B in a new window. How to reload the page A on clicking and opening this link ?
EDIT:
I should have been more clear. Page B opens in a new window and not as a popup. The hyperlink in question has its target attribute set to _blank. Taking a clue from the answers that I got (Thanks guys !), I tried setting onclick = "window.location.reload()" and it works perfectly fine.
However I have a problem. In fact another question altogether. How to make sure that the reload of page A waits until the page opened in the new window (page B) loads ?
Something like this:
open page b
The simplest way would be to do
link
If I remember correctly that should open the window and then since the return has not been suppresed will reload load the page.
I am not exactly sure if this is what you want based on your wording, but if you want to reload the opening window from a link in the popup try
self.opener.location.href = self.opener.location.href;
Edit, based on your new comments just use the code above in the body onload of the new window
<body onload="self.opener.location.href = self.opener.location.href;">
You can use setTimeout() to delay the reload.
Try this:
<script type="text/javascript">
function openPage(elem) {
function reloadCurrentPage() {
location.reload();
}
var page = window.open(elem.href, '_blank');
page.onload = function() {
reloadCurrentPage();
}
if (/MSIE/.test(navigator.userAgent)) { // fix for IE
var timer = setInterval(function() {
if (page.document.readyState == 'complete') {
clearInterval(timer);
reloadCurrentPage();
}
}, 100);
}
}
</script>
<p>second.html</p>