Cracking effect on a page (non-flash) [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have a landing page in a website, where there is just a single image of the earth.
Now to enter the main site, I want some effect in the landing page that the earth cracks open and then the user enters the main site.
What I am currently doing: I currently divide the whole landing page image into 4 divs with a separate image in each of them (which jointly form the earth). Now when the user has to enter the site, I simple animate each of the 4 divs to each corner of the screen. But I need cracking effects & some other visually attractive effects.
Any ideas how to achieve this? Javascript (or jQuery) solution preferable.

overlay a crack image and make it slideDown() (jQuery) over the Earth img.
see http://jsfiddle.net/NKqNh/
$(function() {
$('#crack').slideDown(800);
});​
<div id="earth" class="common"> </div>
<div id="crack" class="common"> </div>​
Edit:
In your answer here is an updated js using a callback to an anonymous function for the explosion after the cracking.
http://jsfiddle.net/eC9HM/2/
$(function() {
$('#crack').slideDown(800, function() {
$('#earth, #crack').hide('explode', {pieces: 16}, 2000);
});
});
​

You can use explode effect of jQuery UI . It will break the image into many pieces(you can choose how many pieces you want) and The image will disappear
Uptdated-
Try this code-
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("img").click(function () {
$(this).hide("explode", { pieces: 24 }, 2000);
});
});
</script>
</head>
<body style="font-size:62.5%;">
<img src="http://2.bp.blogspot.com/-No5MB366RTY/T3WYGRicqUI/AAAAAAAAALQ/mDgaBLVocZE/s1600/260px-The_Earth_seen_from_Apollo_17.jpg">
</body>
</html>

Thanks for the answers, but I found my answer combining the other two answers present here.
So am just sharking the fiddle here, so that may be useful in future:
Updated fiddle:
http://jsfiddle.net/gopi1410/eC9HM/1/

Related

i tried loading html page to div using jQuery ajax [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
trying to load html page to div using jQuery ajax im pretty sure it's right but i don't know why exactly it's not working.
that's my code:
<div class="second">
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").on("click",function(){
$('#second').load($(this).data("page"));
});
});
</script>
Consider the following code.
$(function() {
$("button").click(function() {
$(".second").load($(this).data("page"));
});
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<button data-page="page-2.html">Get Page 2</button>
<div class="second"></div>
This will work properly as it uses a Class selector to target he proper <div> element.
Change:
$('#second')
To:
$('.second')
As second is a class, not an id.

What has the best cross-browser support, JQuery dialogs or HTML5 modal dialogs? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am trying to create an online app that needs to have multiple items of content open at one time. I have looked at JQuery dialogs and also HTML5 modal dialogs. Which of these should I choose to get the best cross-browser support? Is there a different implementation that would work better?
Sounds like maybe jQuery UI's Dialogs are what you're looking for? All you do is set aside some HTML in a container (such as a Div) and then render the dialog box.
Link: https://jqueryui.com/dialog/
To "create" the dialog, you'll just need to create a dialog from the container whenever you need it to be visible. Such as:
<script type="text/javascript">
$('#myPopup').dialog();
</script>
That page has an example of how to get started. For more detail with what you can do with them (such as adding buttons), check out the full API page:
Link: http://api.jqueryui.com/dialog/
Even better - you can also use custom themes or a variety of premade themes for jQuery UI. Check out Themeroller (http://jqueryui.com/themeroller/) to get yourself started.
Finally, you'll need to have both jQuery (https://jquery.com) and jQuery UI (https://jqueryui.com/) included in both of your projects for this to work. I'd recommend reading over the basic jQuery/jQuery UI tutorials if you are new to them.
Edit:
Here is an example on jsFiddle as well as an example of what a page would look like.
Fiddle: http://jsfiddle.net/uLGRA/
Code:
<html lang="en">
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/humanity/jquery-ui.css">
<script type="text/javascript">
// when the document has loaded..
$(document).ready(function() {
// turn this ID into a dialog
$('#popupTest').dialog();
// also, turn the input type="button" into a jQuery UI Button
// for consistency
$('#btnRandom').button();
});
</script>
</head>
<body>
<div id="popupTest" title="Stackoverflow Example">
<p>Hello, world.</p>
<p>Care for a cup of tea?</p>
<input type="text" value="" placeholder="sample input form">
<input id="btnRandom" type="button" value="this button does nothing... yet">
</div>
</body>
</html>

How to open new html file using java script [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Suppose I have two html files: 'page1' and 'page2'
Code in page1:
<html>
<body>
page1
click to go to page 2
</body>
</html>
Code in page2:
<html>
<body>
page2
click to go to page 1
</body>
</html>
Using this I can open page2 using hyperlink in page1 in a new tab in the same window and viceversa
Is it possible to the same thing using javascript
lots of way possible ..
1.
<script language="javascript" type="text/javascript">
window.location.href="login.jsp?backurl="+window.location.href;
</script>
2.
<script language="javascript">
alert("back");
window.history.back(-1);
</script>
3.
<script language="javascript">
window.navigate("top.jsp");
</script>
4.
<script language="JavaScript">
self.location="top.htm";
</script>
5.
<script language="javascript">
alert("Access Violation");
top.location="error.jsp";
</script>
6.
<script language="javascript">
window.location = window.location.host;
</script>
check this question here.you can use
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
You can add an click event listener to your link element (or any other) and set the href property in the location object. Let’s use inline onclick for illustration:
Link
By clicking on this element, the onclick handler will be executed, setting the href, i.e. the current address. By returning false, the default action will be prevented (see MouseClick.preventDefault()).
This is kind of a JavaScript surrogate for HTML hypertext behavior. You also can do other cool things with Window.location.

Why does this simple code not work in JSfiddle? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I did this in JSfiddle:
http://jsfiddle.net/jocelynwang205/qSjn6/
It is supposed to turn a paragraph black, but it seems that the function cannot be called. It does not work on a real webpage either.
Later I added my JavaScript to the html in JSfiddle, like this:
<script>
function changeA(){
document.getElementById('para1').style.color ='black';
}
</script>
<p id="para1">
This is a paragraph to be changed.
</p>
Turn black.
And it worked: http://jsfiddle.net/jocelynwang205/qSjn6/1/
So I want to know why. Thanks in advance.
the original doesnt work because you have onlick instead of onclick, and do not have the code running in the head but in a onload function (settings are on the left side) causing the function to be invisible to the onclick attr
JSFiddle defaults to the javascript being run in a onLoad function so basically your code was being run like below:
<script>
window.onload = function(){
function changeA(){
document.getElementById('para1').style.color ='black';
}
};
<script>
which makes the function changeA invisible to the html onclick attribute
changing the setting to "no wrap - in head" makes it run like:
<script>
function changeA(){
document.getElementById('para1').style.color ='black';
}
<script>
which now makes it visible to the html
Below is a screenshot of where the setting is:
in the jsfiddle you specified onlick instead of onClick.
Turn black.
change it to
Turn black.
in the link, and set option No wrap in from left hand side of jsfiddle.
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#para1
{
color: red;
font-weight: bold;
}
</style>
<script type="text/javascript">
function changeA()
{
document.getElementById('para1').style.color ='black';
}
</script>
</head>
<body>
<p id="para1">This is a paragraph to be changed.</p>
Turn black.
</body>
</html>
Try this.

show text file on hyperlink event in HTML [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I have these number of <a href />links in a HTML page:
<a ...>
<a ...>
.....
<a ...>
What I want is on the click of each link I have to show a text file on same html page.
a text file can be shown in a textarea or iframe.
How can I accomplish that?
.........EDIT..............
correct code
<html>
<head>
<title>Ajax Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(e){
e.preventDefault();
$.get( $(this).attr("href") ).done(function(e){
$("textarea").html(e);
});
});
});
</script>
</head>
<body>
foo bar<br>
<textarea></textarea>
</body>
</html>
You can use AJAX to get the text file data from the server, then put it into the text field.
Demo: http://jsfiddle.net/DerekL/63BLB/
$("a").click(function(e){ //select all <a>
e.preventDefault(); //remove default link effect
$.get( $(this).attr("href") ) /*AJAX (using jQuery)..
..and insert the URL of text file*/
.done(function(e){ //When it is downloaded,
$("textarea").html(e); //shows it in <textarea>
});
});
If you are new to jQuery, you may want to check out their documentation, especially $.ajax. :)
Note: You can only fetch text files in the same origin.
Note 2: The code above is written using jQuery. If you do not want to use jQuery, you will have to do the whole native new XMLHttpRequest thing.

Categories

Resources