I'm not fluent in javascript and I'm trying to edit this example at w3schools to make a simple headline within a div slide to the right smoothly (from out of view) upon page load. I just KNOW it has something to do with the code that is already here, but I'm having two problems.
When I turn the box they are moving into a text headline and change the "div" selector into '.headline' (or whatever I've named it), clicking the button won't move it.
If I figure that out, I still don't know how to make it work without the button.
Right now that code is invoked with a click handler, just remove the wrapper for that and execute it on page load:
$(document).ready(function() {
$(".header").animate({ //be sure to change the class of your element to "header"
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
Demo: http://jsfiddle.net/tymeJV/ZWtQw/1/
if you want to make it when body loads just try these
100% working
The html content and coding are as follows:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var function1 = function(){
$(document).ready(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
};
</script>
</head>
<body onload="function1();">
<p> in the body tag i have added onload event which tells that when body is fully loaded then do this function which has a name of function1 or you can name something else but remember <b>in script tag the name after var should be same as the name in onload event </b></p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
Related
I've a pop-up that can be called trough a link. The problem is that i need to call it onload, an I can't find a way to do this.
This is the code of the pop-up
<a href="https://sloways.leadpages.co/leadbox/14169a873f72a2%3A14f192411746dc/5636318331666432/"
target="_blank">Click Here to Subscribe</a>
<script data-leadbox="14169a873f72a2:14f192411746dc"
data-url="https://sloways.leadpages.co/leadbox/14169a873f72a2%3A14f192411746dc/5636318331666432/"
data-config="%7B%7D" type="text/javascript"
src="https://sloways.leadpages.co/leadbox-1483020619.js">
</script>
I've tried to trigger the "Click Here to Subcribe" in different ways, like the following, without success:
Jquery how to trigger click event on href element
jQuery(document).ready(function(){
jQuery("#add_redirect").trigger('click');
});
Window.location.href (this open the link but in another page, not as a pop-up)
UPDATE N.1
I've bypassed the problem loading the pop-up URL through the <object> tag.
I've put the <object> inside a Bootstrap modal so it still works like some kind of pop-up.
<html>
<head>
<script data-leadbox="14169a873f72a2:14f192411746dc"
data-url="https://sloways.leadpages.co/leadbox/14169a873f72a2%3A14f192411746dc/5636318331666432/"
data-config="%7B%7D" type="text/javascript"
src="https://sloways.leadpages.co/leadbox-1483020619.js"></script>
<script>
var displayPopup = function(){
var element = document.getElementById('popUp');
element.click();
}
</script>
</head>
<body onload="displayPopup();">
<a href="https://sloways.leadpages.co/leadbox/14169a873f72a2%3A14f192411746dc/5636318331666432/" id="popUp"
target="_blank">Click Here to Subscribe</a>
</body>
</html>
I am using plan JS. When body JS object is completely formed or in other words when body's content is completely loaded then onLoad event is fired . I wired a displayPopup function to this event.
In displayPopup function i retrieve the anchor tag and manually click it .
Use this following code
jQuery=jQuery.noConflict();
jQuery(document).ready(function(e){
e.preventDefault();
jQuery("#add_redirect").click();
});
The solution by #Prashanth Reddy should work if you have jQuery loaded on your page.
For a simple implementation using plain javascript, you'll need to change the target attribute on your tag to '_self' from '_blank'. This will open the popup in your existing page instead of a new page.
then add the following at the end of the body section of your html:
<script>
(function() {
document.getElementById('add_redirect').click();
})();
</script>
see here for a working example: jsfiddle
If you want to avoid inline script tags, you'll need to add an event listener to your javascript code. Here is a good starting point for how to do that:
plain js equivalent to jquery $.ready
I'm trying to build an FAQ page and wish to have the user click a question and only then an answer will side down under the question.
I have code that will work this when I put it all on one page. However I wish to use a div to load various files (the FAQ div is only one of a few files I wish to add into the div). So when I use the div and an 'window onload event' the div loads but all questions and answers are fully opened and exposed.
The script to dropdown answers, placed in the HEAD section of the MainPage.html also a call to jQuery.
<script type="text/javascript">
$(document).ready(function() {
$('#faqs h1').each(function() {
var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();
tis.click(function() {
state = !state;
answer.slideToggle(state);
tis.toggleClass('active',state);
});
});
});
</script>
The FAQ.html
<div id="faqs">
<h1>+ Question</h1>
<div>
<p><br>Answer Here</p>
</div><br>
<h1>+ Question</h1>
<div>
<p><br>Answer Here</p>
</div><br>
</div>
The script to load the div, placed in the HEAD section of the MainPage.html
<script>
window.onload = function(){
$('#target').load('FAQ.html');
}
</script>
The div, placed in the BODY section of the MainPage
<div id="target"></div>
I have tried placing the javascript in various place on the page but still the same result. Repeat: If I place the code of FAQ.html directly in the BODY section of the MainPage it all works properly.
I have researched this also under 'conflicting jQuery' but with no success. Suggestions appreciated please.
It looks a lot like $(document).ready is run before $('#target').load finishes.
To avoid that, take the entire function you pass to $(document).ready and pass it as a last argument to $('#target').load instead, so that it gets called when loading of FAQ.html has completed:
window.onload = function(){
$('#target').load('FAQ.html', function() {
$('#faqs h1').each(function() {
var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();
tis.click(function() {
state = !state;
answer.slideToggle(state);
tis.toggleClass('active',state);
});
});
});
}
I assume it's because of the
$(document).ready()
callback. You're specifying a function to happen when the DOM is loaded, but by the time you've loaded in the faq.hmtl file, that's already happened. See what happens if you remove the first and last lines inside your script tags.
Also, unrelated, you're using <h1> tags incorrectly. You should only have one <h1> tag per page, as a rule. The <dl> tag is probably the most semantically meaningful in this situation.
I want to load an HTML page as a div inside my webpage by removing its HTML and body tags. But the HTML page has a <body onload=" ... " > , I need this function to continue working. Seems <div onload=" ... " > is not working. How can I insert this onload function into my website's body (on this page only) without directly editing my original website code (php)?
Have you used jQuery before? If so, just get the id of your div (let's say "SomeDiv") and then use the "ready" method like this:
$("#SomeDiv").ready(
function(){
//do stuff
});
you can use jQuery.load to load the contents of the page into your div
$(document).ready(function() {
$("#containing-div").load("[url of page with onload function]");
});
the code above goes in the page that contains the div. the page with the onload function doesn't get changed.
You can add an additional Javascript tag at the end of the loaded page (once inserted inside the div) which will executing as soon as it's loaded. Like this:
<div>
Insert the inner html content of that pages here and add this script at the bottom and add the onload function of the original html to this script.
<script type="javascript">
alert("hello world");
</script>
</div>
Just remember to have the javascript available to your page. What I mean is that if the javascript function called which is called inside onload="..." is defined in the <head> of the loading html document and you're throwing the <head> out then this won't work.
Not the best but one way is to check the div periodically if it's loaded:
var myInterval = setInterval(function () {
if ($('.mydiv') && $('.mydiv').width() > 0) {
// write your logic here
clearInterval(myInterval);
}
}, 3000);
If you want to add the onload event on a div, you cannot, but you can add onkeydown and trigger the onkeydown event on document load.
<div onkeydown="setCss();"></div>
$(function () {
$(".ccsdvCotentPS").trigger("onkeydown");
});
I am using the following script to scroll to the top of a scrolling DIV when a link is clicked:
<script type="text/javascript" src="jquery.js"></script>
<script>
function goToByScroll(id){
$('#disqus_thread').animate({scrollTop: $("#"+id).position().top},3000,'easeOutQuint');
}
</script>
Here's the html for the link:
<div id="commenttext"><img src="files/comment.png" class="imgHoverable"></div>
I would like the textarea that is underneath the DIV that is scrolled to to have the focus added to it after the scroll. I presume this would mean adding code something like this:
$("textarea.placeholder").focus();
But I am not sure how to include this in the above script. I tried adding it as a line at the end of the script, but it didn't work.
Could someone help me out with this?
Thanks,
Nick
function goToByScroll(id){
$('#disqus_thread')
.animate({scrollTop: $("#"+id).position().top},
3000,
'easeOutQuint',
function() { $("textarea.placeholder").focus(); }
);
}
The last argument when passed this way is the complete callback.
Documentation.
I have an element which shows important text to the user, as such I'd like to animate it in to the pane (motion draws the eye) rather than just have it somewhere where the user may miss it.
How can I have it showing by default (for the 1% or so of users who surf with javascript off), but animated in for the rest?
Using
$(document).ready(function(){
$('#messagecenter').hide();
$('#messagecenter').show('fade', 'slow');
})
Causes the element to load visible, then disapear, then fade.
display:hidden;
$(document).ready(function(){
$('#messagecenter').show('fade', 'slow');
})
Will of course hide it for users with no Javascript.
Is there any good way to do this?
Simple way: have the content hide for JS-enabled users immediately after
including it in the page, rather than waiting for the entire document to load:
<div id="messagecenter">Albatross!</div>
<script type="text/javascript">
$('#messagecenter').hide();
$(document).ready(function() {
$('#messagecenter').show('fade', 'slow');
});
</script>
This is usually enough to stop a flash of the content rendering as the page loads. But maybe not if the content is complicated/large. In that case:
Watertight way: add a class to an ancestor element (eg body) when JS is enabled, using CSS to ensure that the content being loaded is hidden-by-default only when JS is on:
<head>
<style type="text/css">
body.withjs #messagecenter { visibility: hidden; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#messagecenter').show('fade', 'slow');
});
</script>
</head>
<body>
<script type="text/javascript">
$(document.body).addClass('withjs');
</script>
...
<div id="messagecenter">Albatross!</div>
You can go with your second option of using display: none;, and include your text again inside a noscript tag.
Not exactly the cleanest thing though, since you'll be duplicating your element/text.
Easiest answer: Don't wait for document.ready to show it. Just put that code at the bottom of your <body> and it should hardly be noticeable.
Be sure to chain your queries too.
$('#messagecenter').hide().fadeIn('slow');
Always use the <noscript>...</nosript> tag for those 1% users.
And keep the code for the normal users untouched.