I am learning jquery/ajax and I got this problem... I want to make content slowly slide up for 1 second while erasing that content... I know that I can erase container content with a command like $(".page1" ).empty(); but I want to erase it slowly... In the mean time, I want server to work on something...
Here is what I have:
index.html:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="jquery.js"></script>
<script src="mainScript.js"></script>
<title>ZZZZ</title>
</head>
<body class="main">
<div class="pageMain1" id="page">
<div class="page1">
<p>Text...text.......Text...text.......vText...text.......Text...text.......Text...text.......
Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......</p>
<p>random image</p>
<img src="1.jpg"/>
<p>Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......
Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......</p>
<img src="2.jpg"/>
<p>Text...text.......Text...text.......Text...text.......Text...text.......</p>
</div>
<div class="page2">
<button onclick="ButtonClick(0)">Button1</button>
<button onclick="ButtonClick(1)">Button2</button>
</div>
</div>
</body>
</html>
mainScript.js:
var SiteName="/test";
function ButtonClick(id){
$(".page1" ).empty();
if(id==0){
$.ajax({
type:"GET",
url:SiteName+"/A1.php",
dataType:"json",
success:success,
error:error
});
}
else{
$.ajax({
type:"GET",
url:SiteName+"/A2.php",
dataType:"json",
success:success,
error:error
});
}
}
function error(){
alert("Something went wrong.");
}
function success(arr){
var text=arr['text'];
$(".page1").append(text);
}
A1.php:
<?php
echo json_encode(array("text"=>"
<div class=\"page1\">
<p>Text...text.......Text...text.......vText...text.......Text...text.......Text...text.......
Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......</p>
<p>random image</p>
<img src=\"1.jpg\"/>
<p>Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......
Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......</p>
<img src=\"2.jpg\"/>
<p>Text...text.......Text...text.......Text...text.......Text...text.......</p>
</div>
"));
?>
A2.php:
<?php
echo json_encode(array("text"=>"
<div class=\"page1\">
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....
123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
<p>random image</p>
<img src=\"3.jpg\"/>
<p>Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......
Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......Text...text.......</p>
<img src=\"4.jpg\"/>
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
<img src=\"5.jpg\"/>
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
<p>123124124123123....123124124123123....123124124123123....123124124123123....123124124123123....</p>
</div>
"));
?>
styles.css:
.pageMain1{
width:50%;
margin-left:auto;
margin-right:auto;
text-align:center;
}
So here is how I imagine what I want... You press Button1 or Button2 and it will call ButtonClick() function... Which will send ajax request to the server and then will slowly start moving 2 buttons up, erasing the content of the div page1.
When the content of the div has been fully erased and client got data from the server it should start slowly writing new content, while moving buttons down.
I hope its easy to follow...
How do I make it slide like that?
i can not understand your code but for doing this things you can use fadeOut() and fadeIn() jquery functions or directly change the css opacity of your element with javascript or jquery animate() function.
Use callbacks on the slideX functions to append to and empty the div.
Example:
$(".page1").slideUp(400, function()
{
$(".page1").empty();
$(".page1").append(text);
$(".page1").slideDown();
});
Thanks to everyone I came up with a solution...
I made 2 more global variables and made callbacks like this:
var lock1=0;
var text="";
function ButtonClick(id){
...
$(".page1").slideUp(function(){
if(lock1==1){
lock1=0;
$(".page1").empty();
$(".page1").append(text);
$(".page1").slideDown();
}
else{
lock1=2;
}
});
...
}
function success(arr){
text=arr['text'];
if(lock1==2){
lock1=0;
$(".page1").empty();
$(".page1").append(text);
$(".page1").slideDown();
}
else{
lock1=1;
}
}
If you want sliding effects. Use jQuery:
$('selector').slideUp();
$('selector').slideDown();
If you want fading in/ out effects:
$('selector').fadeIn();
$('selector').fadeOut();
Related
the problem i have here is very annoying.What i wanna have is there is an empty box,i press a button and it places an image in that box,the code for that is:
HTML
<button id="rockb">choose rock!</button>
<div id="main">
<img id='pr' style="width: 500px;height: 600px;" src="">
</div>
As you can see the source of the image is nothing because i have to choose it
Jquery for choosing the source and placing it in the box:
<script type="text/javascript">
$('#rockb').click(function()
{
$('#mty').attr("src", "https://i.redd.it/2u0y0z5i12py.png");
}); </script>
just so you know there are multiple buttons so you can chose multiple images basiccaly the same as i show only other name and image link.
i want a script that says IF i press rockb it alerts 'paper' if i select paperb it says 'paper'
but i cant seem to make it work.here is my code:
<script type="text/javascript">
if (getElementById('#pr').attr('src') === 'https://i.redd.it/2u0y0z5i12py.png')
{
alert('euirhzeurhzu')
}
</script>
Thank you for helping me and hopefully i explained it good!
$(document).ready(function(){
$('button').click(function(){
$('#pr').attr("src", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZtjprGwxPE5FVcY72h1MWxvVVSiW7RFHmJ6DZ9G1lf0YOr-vV");
if(true){
alert('euirhzeurhzu')
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="rockb">choose rock!</button>
<div id="main">
<img id='pr' style="width: 500px;height: 600px;" src="">
</div>
Completely new to coding over here. Learning the basics.
How can I get to "the picture only", when clicking on a current picture of a slideshow?
Normally in html I would just put this around it:
Current picture
But in this version I just don't seem to get it.
Clicking on the small pictures makes them appear as the big centred one.
Clicking on the big picture currently only pauses/continues the slideshow.
$(".crop-img").click(function(){
$("#bigImage").attr("src",
$(this).attr("src"));
});
var counter=1;
$("#image"+counter).click();
$("#forward").click(function(){
counter = counter + 1;
if (counter>4){
counter=1;
}
$("#image"+counter).click();
})
$("#backward").click(function(){
counter=counter-1;
if (counter<1){
counter=4;
}
$("#image"+counter).click();
})
$("#bigImage").click(function(){
paused=!paused;
})
Picture of how it looks is on my post about it.
Thank you!
Full code
<html>
<head>
<title> FWP - Gallery </title>
<script src="jquery-3.1.1.min.js"></script>
<link rel="stylesheet"
type="text/css"
href="bootstrap.css">
<link rel="stylesheet"
type="text/css"
href="mystyles.css">
<link rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Gruppo">
<link rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Syncopate">
</head>
<body>
<div class="container">
<h1>Image Gallery</h1>
<div class="row">
<div class="col-md-3 thin_border">
<img id="image1"
class="crop-img"
src="before.jpg"
alt="before prisma">
</div>
<div class="col-md-3 thin_border">
<img id="image2"
class="crop-img"
src="after.jpg"
alt="after prisma">
</div>
<div class="col-md-3 thin_border">
<img id="image3"
class="crop-img"
src="sleepy.jpg"
alt="Sleepy cat">
</div>
<div class="col-md-3 thin_border">
<img id="image4"
class="crop-img"
src="Cute.jpg"
alt="Cute cat">
</div>
</div>
<div class="row">
<div class="col-md-1 thin_border">
<button id="backward"><</button>
</div>
<div class="col-md-10 thin_border">
<img id="bigImage"
class="big-img"
src="before.jpg"
alt="before prisma">
</div>
<div class="col-md-1 thin_border">
<button id="forward">></button>
</div>
</div>
</div>
<script>
var paused=false;
setInterval(function(){
if(!paused){
$("#forward").click();
}
}, 3000);
$("#bigImage").click(function(){
paused=!paused;
});
$(".crop-img").click(function(){
$("#bigImage").attr("src",
$(this).attr("src"));
});
var counter=1;
$("#image"+counter).click();
$("#forward").click(function(){
counter = counter + 1;
if (counter>4) {
counter=1;
}
$("#image"+counter).click();
})
$("#backward").click(function(){
counter=counter-1;
if (counter<1) {
counter=4;
}
$("#image"+counter).click();
})
</script>
</body>
</html>
The section of javascript isn't vanilla javascript, it is a sample of this 'jquery' that you may have heard of in your quest to learn a bit of coding.
Jquery is syntactic sugar for javascript. $ is your cue to key in that this might be jquery (there are other js libraries that use $ syntax but I think jquery is the most prevalent).
$(".crop-img")
$("#bigImage")
$("#image"+counter)
This is jquery code to select an element from the page, the '.' is for selecting class, the '#' is for selecting id, there are tons of others you can look up as well. This gets you a jquery object that you can then save to a variable, call a method on, etc.
$(".crop-img").click(someFunctionNameHere);
$("#image"+counter).click();
These are examples of functions being called on the jquery objects, which happen to be event functions. The first is assigning a function to the click event of the selected element(s) (all elements with class 'crop-img'), the second is firing the click event of the selected element (the element with id='imageX' with 'X' being the current value of counter).
Also instead of a function name, you can just inline the function instead:
$("#bigImage").click(function(){
paused=!paused;
})
This assigns the unnamed inline function for the click event of the element with id='bigImage', which is where you want to pull up the image. Put your code in there that will bring up the image, it will run when the big image is clicked.
Such as if you want to actually go to the image, as in your html example, put this line in there:
window.location.href = "someHrefHere";
If you want to know the the src of the current bigImage, you can grab it with jquery:
var myhref = $("#bigImage").attr("src");
You can put it together from there.
Happy Coding!
You can retrieve the src of the current image when you click on the big image like this:
$( ".row div:nth-child("+counter+") img" ).attr('src')
counter was setted as index of your current image and this should be inside of your $("#bigImage") click function.
I wrote an HTML page that supposed to switch fast between two pictures.
In the result I can see that the first picture is freezed for about a minute and JUST then they start to flip over fast and nicely. It is as if the first picture is loaded quickly and the second takes more time (they have quite the same size)
What can explain this behavior?
What should I do to make them flip from the very beginning?
Code:
<head>
<title>Visualize</title>
<script src="jquery-3.1.0.min.js"></script>
<script>
$(document).ready(function()
{
var file = "a";
setInterval(function()
{
$('.canvas').attr("src","images/"+ file +".png");
file = flipFile(file);
}, 290);
});
function flipFile(file)
{
if(file=="a")
{
file="b";
}
else if(file=="b")
{
file = "a";
}
return file;
}
</script>
</head>
<body>
<div class="container">
<img class="canvas" src="/images/file.png">
</div>
</body>
Two things I did
Placed <img> tag for each picture I want to deal with (with Display:None, for having them not visible)
Added "onload" attribute to the body that triggers the funciton that changes visibility between pictures.
This way the page waits for them to get loaded and just then starts the functionality.
`function visualize()
{
$('.loading').fadeOut(1000);
$('.blanket').fadeIn(1000);
setInterval(function()
{
$('.i'+fileIdx).show();
$('.i'+filePrevIdx).hide();
filePrevIdx = fileIdx;
fileIdx = addCyclic(fileIdx);
}, 290);
}`
`<body style="background-color: black;" onload="visualize()">
<div class="container">
<div class = "blanket" style="display: none;"></div>
<div class="loading">
Loading...
</div>
<img class="i1" src="./images/1.png" style="display: none;">
<img class="i2" src="./images/2.png" style="display: none;">
<img class="i3" src="./images/3.png" style="display: none;">
<img class="i4" src="./images/4.png" style="display: none;">
</div>
</body>`
I am trying to make a slideshow using the jquery cycle plugin (http://jquery.malsup.com/cycle/) on my wordpress site.
The way it works is, when the page loads, I click a button named ".submit" and then ajax content comes up on the screen and a div named '.modal' changes its visibility from hidden (display:none) to visible and inside, it has a container that shows a slideshow from the div #slideshow.
I tried to make it that when the ajax content changes visibility, the cycle plugin will then load.
When I do this I get no error messages but the slideshow doesn't work.
Here is my code:
jQuery(document).ready(function() {
jQuery('.submit').click(function(e) {
e.preventDefault();
var mod_shadow = jQuery('#modal_shadow');
var container = jQuery('.modal');
mod_shadow.show();
container.show();
var data = {
'action': 'modal_ajax',
'nonce': '<?php echo $ajax_nonce; ?>'
};
jQuery.post('<?php echo admin_url('admin - ajax.php '); ?>', data, function(response) {
container.replaceWith(response);
});
});
});
jQuery('.modal').on('show', function() {
jQuery('#slideshow').cycle({
fx: 'scrollLeft'
});
});
<?php
// ...
add_action( 'wp_footer', 'modal_init');
function modal_init() {
if (!bp_is_user() || !is_user_logged_in()) {
return;
}
$ajax_nonce=w p_create_nonce( "nonce");
}
?>
<div id="modal_shadow" style="display: none;"></div>
<div class="modal" style="display: none;">
<div class="modal-content-wrap">
<div class="modal-title comp-loading-icon">
<div class="bp-loading-icon"></div>
</div>
</div>
</div>
<div class=".modal-content">
<div style="width: 250px">
<div id="slideshow">
<div style="width:250px; height:150px; background:red;"></div>
<div style="width:250px; height:150px; background:blue;"></div>
<div style="width:250px; height:150px; background:green;"></div>
<div style="width:250px; height:150px; background:yellow;"></div>
</div>
<div id="prev" style="float:left;">PREV</div>
<div id="next" style="float:right;">NEXT</div>
</div>
</div>
I'm new to html and this is our first intro homework assignment for javascript; so naturally I am freaking out! Here is an example of what I'm talking about:
<div class="someclassname"> <a href="image.jpg">
<img src= Image/image.jpg height="80">
</a>
<p>some text to he hidden with the image!</p>
</div>
I have looked everywhere and found similar stuff but I am way to incompetent to translate it into what I am doing
I'm thinking the code should look something like this maybe?
<script>
$(document).ready(function() {
$("Button").click(function() {
$(".someclassname").toggle();
if ($.trim($(this).text()) == 'Hide') {
$(this).text('Show');
} else {
$(this).next('Hide');
}
});
</script>
Am I close? Please help!
You are close enough...
You have a syntax error in your script, missing pair of }) and then place a button in your html
$(document).ready(function() {
$("button").click(function() {
$(".someclassname").toggle();
if ($.trim($(this).text()) == 'Hide') {
$(this).text('Show');
} else {
$(this).next('Hide');
}
});
}); //this is missing
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Hide</button>
<div class="someclassname">
<a href="image.jpg">
<img src="Image/image.jpg" height="80" />
</a>
<p>some text to he hidden with the image!</p>
</div>