Page 3 of 4
Re: Is there a Javascript function to fade into various cont
Posted: Mon Apr 11, 2016 11:34 am
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();
Re: Is there a Javascript function to fade into various cont
Posted: Mon Apr 11, 2016 11:43 am
by Celauran
Re: Is there a Javascript function to fade into various cont
Posted: Mon Apr 11, 2016 11:49 am
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?
Re: Is there a Javascript function to fade into various cont
Posted: Mon Apr 11, 2016 11:51 am
by Celauran
That last fadeToggle call seems redundant
Re: Is there a Javascript function to fade into various cont
Posted: Mon Apr 11, 2016 12:14 pm
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.
Re: Is there a Javascript function to fade into various cont
Posted: Mon Apr 11, 2016 1:02 pm
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?
Re: Is there a Javascript function to fade into various cont
Posted: Tue Apr 12, 2016 4:01 am
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?
Re: Is there a Javascript function to fade into various cont
Posted: Tue Apr 12, 2016 4:09 am
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?
Re: Is there a Javascript function to fade into various cont
Posted: Tue Apr 12, 2016 8:57 am
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>
Re: Is there a Javascript function to fade into various cont
Posted: Tue Apr 12, 2016 9:14 am
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>
Re: Is there a Javascript function to fade into various cont
Posted: Thu Apr 14, 2016 4:45 am
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?
Re: Is there a Javascript function to fade into various cont
Posted: Thu Apr 14, 2016 6:42 am
by Celauran
Re: Is there a Javascript function to fade into various cont
Posted: Thu Apr 14, 2016 6:53 am
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>";
}
Re: Is there a Javascript function to fade into various cont
Posted: Thu Apr 14, 2016 7:02 am
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>
Re: Is there a Javascript function to fade into various cont
Posted: Thu Apr 14, 2016 7:14 am
by Celauran