Is there a Javascript function to fade into various content?

JavaScript and client side scripting.

Moderator: General Moderators

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

No idea how, but looking it up on line you mean something like this.
This isnt' right and not sure where to place it.

Code: Select all

$('#home-blogrowinner').delay(1000).fadeToggle();
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

Code: Select all

$(document).ready(function() {
    var elements = $('#home-blogrowinner').children();
    var currentIndex = 0;

    function fadeToggle() {
        var nextIndex = currentIndex + 1;
        if (nextIndex >= elements.length) { nextIndex = 0; }
        $(elements[currentIndex]).fadeOut(400);
        setTimeout(function() {
            $(elements[nextIndex]).fadeIn();
        }, 400);
        currentIndex = nextIndex;
        setTimeout(fadeToggle, 6000);
    }
    setTimeout(fadeToggle, 6000);
    fadeToggle();
});
Is this wrong then?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Is there a Javascript function to fade into various cont

Post by Celauran »

That last fadeToggle call seems redundant
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

Bingo. Minus that, it works!
Also, I had to host the query file too.
<script type="text/javascript" src="/js/jquery-1.js"></script>

Without this (which fiddle uses too), it wouldnt' work.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

Below these divs is a footer div. Can you think of any reason why that footer div should flicker a little bit when it fades?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

The issue is, very randomly, it flicks the entire page, not just the footer.
Why would the javascript cause the browser to do that? Would it be wise to stop the "scrolling" of it, after it's run through them all? Tho not sure even that would solve it.

Perhaps you could add to the fiddle, another div below it that doesn't fade, and see if the iframe flickers?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

I've saved the page locally, and when i run it, the first slide is fine, then the second one seems to load on top of the first, pushing the first one down. Then it fades and the third one replaces both. This happens occasionally, and would explain why the page is flickering.

It can only be the javascript, because if I take out other javascripts on the page, the same effect happens.

I am using a local version of:
<script type="text/javascript" src="/js/jquery-1.js"></script>
Which is what was used on fiddle. Is possible a cause?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

This seems to do the same thing, but for some reason it strips out the image.
If I view source and click the image, it shows. So why would it do that?

Code: Select all

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.js"></script>
 
 <style>
div.textContent { display:none; }
</style>

<script>
$(window).load(function(){
var cnt=0, texts=[];

// save the texts in an array for re-use
$(".textContent").each(function() {
  texts[cnt++]=$(this).text();
});
function slide() {
  if (cnt>=texts.length) cnt=0;
  $('#textMessage').html(texts[cnt++]);
  $('#textMessage')
    .fadeIn('slow').animate({opacity: 1.0}, 5000).fadeOut('slow', 
     function() {
       return slide()
     }
  );      
}      
slide()                    
});      
</script>

<div id="textMessage"></div>
<div class="textContent">
<img src='48143917air-fright.jpg' width='50px'/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet risus vitae ligula lobortis feugiat. Aenean a lorem vitae nisi vehicula tempor. Donec suscipit ornare dui, sit amet tincidunt lorem aliquet id. Donec egestas sollicitudin consectetur. Donec ante dolor, bibendum a ultrices scelerisque, sagittis imperdiet sapien. Maecenas sagittis, sem et pharetra sollicitudin, orci nisi commodo augue, id molestie velit ipsum eget est. </div>
<div class="textContent">In sit amet diam et arcu aliquam tincidunt. Vestibulum quis mi id lacus fringilla pulvinar in nec lorem. Duis sed est at nunc euismod scelerisque. Nulla venenatis augue non urna sollicitudin et molestie neque aliquet. Proin odio ligula, sodales a auctor ac, iaculis ut urna. Nam tellus felis, ultrices sed ornare a, pretium eget odio. Suspendisse potenti. </div>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

Think I have nearly found a fix.

This doesn't flicker, but it doesn't loop either. IT does each row, and then shows a blank.
How do I put this in a loop, so after it's gone thru them all, does it again, like the one you wrote?

Code: Select all

<script>
$(document).ready(function () {
    var allBoxes = $("div.home-blogrowinner").children();
    transitionBox(null, allBoxes.first());
});

function transitionBox(from, to) {
    function next() {
        var nextTo;
        if (to.is(":last-child")) {
            nextTo = to.closest("home-blogrowinner").children("div").first();
        } else {
            nextTo = to.next();
        }
        to.fadeIn(500, function () {
            setTimeout(function () {
                transitionBox(to, nextTo);
            }, 5000);
        });
    }
    
    if (from) {
        from.fadeOut(500, next);
    } else {
        next();
    }
}    
</script>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

http://jsfiddle.net/PauWy/1/
I'm using this. But is there a clever little trick that underlines or basically "highlights" which of the options are selected?

ie. you have them as three buttons, and you want the 'selected' button to be highlighted, while the DIV is being show. How can that be done please?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Is there a Javascript function to fade into various cont

Post by Celauran »

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

This is my code at the moment.
What I want is for the buttons to all look normal, except when they are selected.
I can do it with an underline, but it's not as nice as if they were highlighed the way the "hover" highlights them.

I did get it to do it, but for some reason the text on an item that is now not selected, goes white, but the background stays light grey.

Code: Select all

style>
.product-image-buttons
{
display: inline-block;
background-color: #cccccc;
color: #333333;
padding: 10px;
transition: background-color 0.2s;
border-bottom: 2px solid #cccccc;
cursor: pointer;
}

.product-image-buttons:hover
{
background-color: #555555;
color: #ffffff;
} 

</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.5.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$('#product-image-toggle > span').click(function() {
    var ix = $(this).index();
    $(this).css('border-bottom', '2px solid #555555');
    $(this).siblings().css('border', 'none');
    
    $('#product-image').toggle( ix === 0 );
    $('#product-image-slab').toggle( ix === 1 );
    $('#product-image-backlit').toggle( ix === 2 );
});
});
</script>

echo "<div id='product-image'><img src='/images/productphotos/$row->photo' alt='$row->photo' /></div>
      <div id='product-image-slab'><img src='/images/bg-slab.jpg' alt='slab background' />
      <div class='product-image-slab-fore'><img src='/images/slab/$row->photoslab' alt='$row->photoslab' /></div></div>
      <div id='product-image-backlit'><img src='/images/backlit/$row->photobacklit' alt='$row->photobacklit' /></div>";      

      // only show toggle buttons if there is something to show
      if (isset($row->photoslab) || isset($row->photobacklit))
      {
      echo "<div id='product-image-toggle'>
      <span class='product-image-buttons'><i class='fa fa-camera' aria-hidden='true'></i> Main Photo</span> ";
      }
      if (isset($row->photoslab))
      {
      echo "<span class='product-image-buttons'><i class='fa fa-square-o' aria-hidden='true'></i> Slab</span> ";
      }
      if (isset($row->photobacklit))
      {
      echo "<span class='product-image-buttons'><i class='fa fa-lightbulb-o' aria-hidden='true'></i> Backlit</span>";
      }
      // only show closing toggle button container if there is something to show
      if (isset($row->photoslab) || isset($row->photobacklit))
      {
      echo "<div style='clear: both'></div>
      </div>";
      }
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Is there a Javascript function to fade into various cont

Post by simonmlewis »

Scratch that... done it:

Code: Select all

<script type="text/javascript" src="https://code.jquery.com/jquery-1.5.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$('#product-image-toggle > span').click(function() {
    var ix = $(this).index();
    $(this).css('background-color', '#555555');
    $(this).css('color', '#ffffff');
    
    $(this).siblings().css('background-color', '#cccccc');
    $(this).siblings().css('color', '#333333');
    
    $('#product-image').toggle( ix === 0 );
    $('#product-image-slab').toggle( ix === 1 );
    $('#product-image-backlit').toggle( ix === 2 );
});
});
</script>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Is there a Javascript function to fade into various cont

Post by Celauran »

Post Reply