Ok this may be a bit of a confusing question. I have the below javascript in my messages.php page which controls which div will show. Each div has a seperate function.
There's message-content-p1 which contains a while loop that gets all the messages and limits it to 20 messages to show, the second is message-content-p2 and so on each one containing the next while loop only ever showing 20 messages in each.
The idea of this javascript is to create the illusion that there are more messages to be shown on page 2, page 3 and so on.
So far the javascript shows each div on the click of 'm_p1' or m_p2' and fades out the current page and fades in the next page. This works fine for that function. the problem i get is if a user wants to skip a page and go to page 3 or page 5 without going to page 2 or 4 then the script won't work and nothing is faded in or out.
Like wise if the user goes back to page 1 from page 5 the script doesnt work and does not fade out page 5 and fade in page 1.
Is there a way of doing what i have described and if so could someone please show me how.
Thank you.
<script>
$(".message-content-p2").hide();
$('.m_p2').click(function () {
if ($('.message-content-p2').is(":hidden")) {
$('.message-content-p1').fadeOut(500);
$('.message-content-p2').delay(700).fadeIn(500);
}
});
</script>
<script>
$(".message-content-p3").hide();
$('.m_p3').click(function () {
if ($('.message-content-p3').is(":hidden")) {
$('.message-content-p2').fadeOut(500);
$('.message-content-p3').delay(700).fadeIn(500);
}
});
</script>
<script>
$(".message-content-p4").hide();
$('.m_p4').click(function () {
if ($('.message-content-p4').is(":hidden")) {
$('.message-content-p3').fadeOut(500);
$('.message-content-p4').delay(700).fadeIn(500);
}
});
</script>
<script>
$(".message-content-p5").hide();
$('.m_p5').click(function () {
if ($('.message-content-p5').is(":hidden")) {
$('.message-content-p4').fadeOut(500);
$('.message-content-p5').delay(700).fadeIn(500);
}
});
</script>
<script>
$(".message-content-p6").hide();
$('.m_p6').click(function () {
if ($('.message-content-p6').is(":hidden")) {
$('.message-content-p5').fadeOut(500);
$('.message-content-p6').delay(700).fadeIn(500);
}
});
</script>
This looks all very manual and not very scalable for any number of pages.
Why would you not just have the same class for each "page", and on the click of whatever control determines which pages to skip to, just fade out all pages and then fade in only the page corresponding to the index value of the control that was clicked? For example say all you message "pages" have the class .message-content and let's say you have a set of buttons all with class .m. Your jQuery could simply look like this:
$('.m').click(function() {
$('.message-content').fadeOut(500);
var index = $(this).index();
$('.message-content').get(index).delay(700).fadeIn(500);
}
Related
I have a jQuery mobile page that has a jQuery chat feature. Essentially I type something into the chat and then a few seconds later the bot responds.
Behind the chat feature and filling up the whole page is a class that has a background image, and I wish to have it so when I type into the text field and hit SEND the background image class toggles to another class which has a different background image. I also wish it to have like a 2-3 second delay.
I have tried
$(function () {
$("#chatSend").click(function () {
$(this).parent(".tasteTheRainbow").toggleClass("orNot");
});
});
Here is my JSfiddle...the background image does not show up but its there. https://jsfiddle.net/mattmega4/d9yodhtm/
One solution could be this:
$(this).closest(".tasteTheRainbow").fadeTo('fast', 0, function () {
$(this).toggleClass("orNot").fadeTo('fast', 1);
});
See the DEMO: https://jsfiddle.net/d9yodhtm/3/
I found a partial answer to my question. I can get the image to change, but not the delay, but I can keep looking into that. Here is the code:
$(document).ready(function(){
$("button#chatSend").click(function(){
$(".tasteTheRainbow").addClass("orNot");
});
});
I have the following script which fades in multiple divs called 'noti_box'. If a user closes these divs then another div 'advert' fades in in its place.
<script>
$(document).ready(function(){
var animations = [];
$('.noti_box').each(function(i) {
animations.push(
$(this).hide().delay(i * 1000).fadeIn(1500).promise()
);
});
$.when.apply($, animations).done(function () {
time=setInterval(function(){
if ( $('.noti_box:visible').length === 0 ) {
$(".advert").fadeIn("slow");
} },200);
});
});
</script>
this works fine, basically what happens here is my last function is stuck on a loop, where the 'advert' div fades in when 'noti_box' is not visible on the page.
However, now I want a user to click a div called 'icons' and if they do, then this should re-fade in the 'noti_box' divs and fade out the 'advert' div using this code:
<script>
$('.icons').click(function(){
$('.advert').fadeOut('fast');
$('.noti_box).fadeIn('fast');
});
</script>
The problem I have here is the 'advert' div fades in and out again in the blink of an eye, without fading in my 'noti_box' div. This is because my first javascript function is still on a loop and preventing my second script from executing.
So what I need to do, I think is set a time out interval for my first script when a user clicks my div 'icon' and then clear the time out interval once the script has executed and the 'noti_box' divs are once again showing.
Can someone please show me how I would be able to do this as I am brand new to jquery. Thanks
function notiBox(ele){
this.ele=ele;
this.ele.hide().fadeIn('slow');
console.log("I have been born! "+ele);
}
notiBox.prototype={
constructor:notiBox,
advert:function(){
var ele=this.ele;
this.ele.fadeOut('fast',function(){ele.next('.advert').fadeIn('slow');});
},
fadeBack:function(){
var ele=this.ele;
this.ele.next('.advert').fadeOut('slow',function(){ele.fadeIn('slow');});
},
}
$(document).ready(function(){
var timeIn=1;
$('.noti-box').each(function(){
var self=this;
this.timer=setInterval(function(){self.notiBox=new notiBox($(self));clearInterval(self.timer);},1000*timeIn);
timeIn++;
});
$('.icon').click(function(){
$('.noti-box').notiBox.fadeBack();
});
});
Right the above is a 'OOP' based approach to your problem. The only problem you might have with this is that your advert divs are not next to the box div. Sorry I guess your DOM elements and layout. Also my methods my not be correct because it's been so long since I've written something like that. I'll do some tests. In the mean time, could you put up some HTML? So that I can adjust my code :d
I have a little jQuery function in my Asp.Net MasterPage that fades an image out after 3 seconds. It works fine, but I'm having difficulty getting it to fade back in. I've tried several things as I'm new using jQuery, and I know there's something I'm doing or not doing. I can't put my finger on it. Here's what I have:
<script src="/Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (){
setTimeout(function (){
$('#Image1').fadeOut('slow', function(){
$('#Image1').remove();
});
}, 3000);
});
var fadeBack = function () {
$('#Image1').fadeIn();
};
fadeBack();
</script>
Like I said, it fades out with no problem, but I cannot find the right code structure to bring it back in. I'm thinking maybe an If statement block about the opacity is needed?
The real trick is that I want alternate images in 3 boxes I have as seen here:
I have about 12 images total, and just want them to fade one image out, and bring another in. Being more specific, I mean the following:
Column (1): Image1.FadeOut(); Image2.FadeIn(); Image2.FadeOut(); Image3.FadeIn(), and etc.
So for now, I just need help with how to do this in Column One, and I'll see if can string something together to make the other Columns 2 and 3 follow up. The timing would be 3 second for each.
Lastly, could I use an array to store other images which aren't in the Column One box already and call them into the slideshow fade sequence? I appreciate you help for this knowledge, so I can lock this in mind. Thanks.
Use this code, it will hide the image after 3 seconds and after that 1 sec, it will show image back.
$(document).ready(function (){
setTimeout(function (){
$('#Image1').fadeOut('slow');
}, 3000);
setTimeout(function (){
$('#Image1').fadeIn('slow');
}, 4000);
});
if you want like a slideshow use this code
<div class="yourimg_container">
<img src="http://localhost/app/img/off.png" id="Image1"/>
</div>
/* make an array containing your images path (you can fetch images from database using asp.net/php query)*/
var ss= ["http://localhost/app/img/off.png",
"http://localhost/app/img/on.png",
"http://localhost/app/img/slider.png"];
window.setInterval(function(){
slideshow();
}, 3000);
function slideshow(){
var im=$("#Image1").attr("src");
for(i=0;i<ss.length;i++){
if(ss[i]==im){
if(i==ss.length-1) $('#Image1').attr("src",ss[0]);
else $('#Image1').attr("src",ss[i+1]);
}
}
}
additionally you can use other effects like this
function slideshow(){
var im=$("#Image1").attr("src");
for(i=0;i<ss.length;i++){
if(ss[i]==im){
if(i==ss.length-1) {
$('#Image1').fadeOut(500);
$('#Image1').attr("src",ss[0]);
$('#Image1').fadeIn(700);
}
else {
$('#Image1').fadeOut(500);
$('#Image1').attr("src",ss[i+1]);
$('#Image1').fadeIn(700);
}
}
}
}
Your fadeBack() is launched immediately whereas the fadeOut has 3 sec delay. Set a timer for your fadeBack grater than 3 sec and the img will appear.
There is a function $('#Image1').remove(); Applied. It mean once fade over, the html block will be removed. Then you can't access the object. Because fade in and fade out accessing same id #Image1. So comment the line. It may work.
So I'm trying to get this going on a bootstrap build, where on one page there are clickable states, however, these will go to a specific slide on another page.
I'm still having a tough time understanding this. My buddy, who's a Javascript developer wrote out some code, but I can't make sense of it.
<script>
function goToSlide(x) {
console.log('going to slide '+x)
$("#myCarousel").carousel(x);
}
</script>
so from page 1, click, goes to specific slide on page 2
If it's only one link going to another slide on the other page I would try something like this:
function goToSlide() {
document.location.href = page2.html;
var div = document.getElementById("slide2");
div.className = "item active";
var otherDiv = document.getElementById("slide1");
otherDiv.className = "item";
}
Take a peek at the carousel methods:
http://getbootstrap.com/javascript/#carousel-usage
You would probably want to use .carousel(number), in conjunction with URL parameters or hash tags as #Lukas mentioned above. Just watch for the hash/parameter in the URL, and have the carousel load with that slide active.
I have 30 links in my HTML document, all of which, when clicked, trigger one specific div to change it's id using a js function.
Here are three of the 30 links followed by the single div with the id that changes.
Link 1
Link 2
Link 3
<div id="contain"></div>
Here is the div id change function (working, but not to my liking):
function changediv_1()
{
if (document.getElementById("contain")) {
document.getElementById("contain").setAttribute("id", "contain_1");
}
}
HERE IS THE PROBLEM: When I click Link 1 it changes the div id from "contain" to "contain_1", no problem there. Now the div name is "contain_1", so if I try to click Link 2 after clicking link 1 it won't work, because the div id is now "contain_1" and each function can only call for 1 id.
I need the above function to check for multiple divs (ie: #contain, #contain_1, #contain_2).
ideally like this:
function changediv_2()
{
if (document.getElementById("**contain, contain_1, contain_2, ...**")) {
document.getElementById("**contain, contain_1, contain_2, ...**").setAttribute("id", "contain_x");
}
}
I researched and tried applying .getElementByClass and it did not work - function seemed to only work with an id. There has to be a way around me posting the function 900 (no exaggeration) times to support each situation. Thank you so much for patience and reading my freaking novel of a post.
Try this use data and use on.click instead of inline javascript function
HTML
Link 1
Link 2
Link 3
<div id="contain" class="containDiv"></div>
jQuery
$(function () {
$('a').on('click', function () {
var contain = "contain_" + $(this).data('contain');
$('.containDiv').attr('id', contain);
//contain == contain_(1,2,3)
/*
Rest of your code to read from php and put into contain?
*/
});
});