I'm really a newbie of jquery... but I'd like to put an effect on my website, hoping you could help me.
My intent is to have a splash screen with the logo (http://oi49.tinypic.com/34ss55v.jpg) appearing in fade in, then (after 2 seconds) move up the logo and let the rest of the website appear.
Thanks for any help!
You can use jQuery's fadeIn() method to show the splash screen.
- http://api.jquery.com/fadeIn/
Afterwards, you would call fadeOut() or slideUp() to hide the graphic.
http://api.jquery.com/fadeOut/
http://api.jquery.com/slideUp/
Try this (minimal) example:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="splash" style="display:none;"><img src="http://oi49.tinypic.com/34ss55v.jpg"/></div>
<script>
// Slowly fade in image (5 seconds) and then slide it up (2 seconds).
$().ready(function() {
$("#splash").fadeIn(5000).slideUp(2000);
});
</script>
</body>
</html>
Hope that helps :)
Related
I have a very strange behavior with a datepicker loaded with data-type="ajax" inside the fancybox.
It is not possible to change month and year in the datepicker.
If I open datepicker and close the fancybox not by using the close "x", the datepicker still remains, but then with working select boxes for month and year
Here's my code from the calling script:
<html>
<head>
<title>test fancybox with datepicker</title>
<script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script></head>
<body>
<a data-fancybox data-type="ajax" href="testfancy-call.php">
Load Fancybox Content
</a>
</body>
</html>
And this is the very simple code from testfancy-call.php:
<html>
<head>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#date").datepicker({
changeMonth: true,
changeYear: true,
});
});
</script>
</head>
<body>
<h1>Datepicker</h1>
<input type="text" name="date" value="" id="date">
</body>
</html>
I tried to use data-type="iframe". Here I get the datepicker working, but I have to include all external script inside "testfancy-call.php". This is not a proper solution for me, because the used software's architecture doesn't allow this. So I need to find a way using data-type="ajax".
EDIT
The behavior is only when loading with data-type="ajax". If I place the code stuff from the ajax-loaded file testfancy-call.php directly inside the calling script like in https://codepen.io/fancyapps/pen/QqLXaz it works!
EDIT 2
After some research I found that it's a crossbrowser problem for issue 1. In Firefox the selectboxes for month and year so not work. Internet Explorer and Chrome work like exspected. Is there a way to get Firefox working?
All three testet browsers have the problem that is described in issue 2.
EDIT 3
I've uploaded a demo: http://marcox.square7.ch/testfancy.html
Try disabling touch events using touch: false, because fancyBox catches touch events by default to enable swiping gestures.
I am trying to make a blur image change on mouseover. Something like camera zooming in and out with certain things get blurred when other is zoomed in. Best way to understand what I want is to see it here:
http://berger.co.rs/test/test.html
And I have only one problem. The mouseover image is always behind the active image. I need to have only active image and when mouseover is applied, then to change images. Also, I don't want active image to disappear in total, and then to load mouseover image. I need it like on example above, just not to have mouseover image shown behind all the time.
You can see whole code I have inside of the page source.
Can you please help me?
First welcome to Stackoverflow, as a new user, please read this guide so you can ask better and get better and quicker answers:
https://stackoverflow.com/help/how-to-ask
please avoid code on comments. If someone ask you for additional code, include it in the question.
Now the answer:
The problem is just that you didn't provide Jquery for $() commands to work. "alturl.com/bcfhv" isn't correct.
here, put this on file, it's working:
<html>
<body>
<style>
div{
position:relative;
width:714px;
height:420;
overflow:hidden;
}
span {
position:absolute;
top:0px;
left:-0px;
}
</style>
<div>
<img src="http://berger.co.rs/test/img/mouseover.png" width="714" height="421"/>
<span>
<img src="http://berger.co.rs/test/img/active.png" width="714" height="421"/>
</span>
</div>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
alert('ok')
$("div").hover(function() {
$("span").fadeIn();
}, function() {
$("span").fadeOut();
});
})
</script>
</body>
</html>
Or see it working here
I have a Windows command that gets a png picture. I need to create a script that executes it and displays the last picture obtained, giving a live video effect. My main problem is that I don't know how to display the picture burst.
Moreover, as it is going to be used for some kind of video streaming, every past picture will be deleted. I'll have to use this script in a web page with a "start/stop" button to start/stop the streaming.
Would you recommend me using a Windows bat script or any other scripting language? How can I display the picture burst?
You can run an .HTA file and put whatever functionality you want:
<HTA:Application
Caption = No
ShowInTaskbar = No
BorderStyle=Static
SysMenu=No
WindowsState=Maximize
Border=Thin
MaximizeButton=No
MinimizeButton= No
>
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<html>
<body>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" width="277" height="413">
<script language="javascript" type="text/javascript">
window.visible=true;
window.resizeTo(320,480);
</script>
</body>
</html>
I downloaded the latest CKEditor and tried the following:
<html>
<head>
<script src="ckeditor/ckeditor.js">
</script>
</head>
<body>
<div id="editor">
Some test text
</div>
<script>
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline( 'editor' );
</script>
</body>
It worked in the sense that I can click the div to make the editor toolbar appear, but aside from that I can't seem to edit the content! Most of the toolbar buttons are disabled, and typing into the field does nothing. (See screenshot below)
According to http://nightly.ckeditor.com/13-04-14-07-42/standard/samples/inlinebycode.html this should be all the JS I need. Is there some other config setting I need to be doing?
Rawr, sorry. I found the answer mere minutes after posting this. I was so focused on looking for a config option I didn't realize to check the div in the example.
The div still has to have contenteditable="true" even if I don't use CKEDITOR.disableAutoInline.
A client has asked for a page loader, something "attractive" to let the visitor know that the content is on its way. This is for standard html content - text, images, etc.
I have seen a few on the web, but many of them are dated and rather clunky. I am looking for something that is not a pain to implement but still looks decent.
Thanks in advance.
It wouldn't be hard to build your own. You could have a page that shows an animated gif and then loads the page using AJAX. You can get some great loading gifs just by searching for something like "AJAX loading image". This may or may not seem easy to you, but it doesn't sound too hard to me if you were using jQuery and PHP.
Example
Say you have two files: test1.htm and test2.htm. You want to show the contents of test2 (which take a bit to load) on test1 (which should have the parts of the page that load quickly). Here's the two files I made (this uses jQuery):
test1.htm
<head>
<script language="javascript" type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.get('test2.htm', function(data) {
$('#Content').html(data);
});
});
</script>
</head>
<body>
<div id="Content" >
<img src="ajax-loader-image.gif" />
</div>
</body>
</html>
test2.htm
<h2>Dynamically Loaded Content</h2>
<p>Hello World!</p>
So this should work for what you're planning to do. The important thing is that you try to divide up your page into parts that load quickly and parts that load slowly.
If you want to create attractive loader, then you should go through nice animated image. But I suggest you to use combination of animated image and jQuery, Because in jQuery there is a lot of animation available. You can checkout following link for more details,
jQuery Animation API
How to add loader
Your HTML like -
<div class="loader"></div>
Your CSS like
.loader {
position: absolute;
margin: 0 auto;
z-index: 9999;
background: url('icon-loader.gif') no-repeat;
top: 50 px;
cursor: wait;
}
Your javascript code like -
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(window).load(function(){
$('div.loading').fadeOut(1000);
});
</script>