auto click link in javascript

Question

aizel 0 Newbie Poster

16 Years Ago

i am new in js and i have a problem on auto click a link..after the slide show of the images i want to auto click the last image, is it possible?

this code below that i have search it redirect the link without showing the image slide show..

<script type="text/javascript">

function init(){

var linkPage = document.getElementById('dynLink').href;
window.location.href = linkPage;
}

onload=init;

</script>



<li class="sliderImage">
                <a href="http://damario-coburg.de/restaurant.htm"><img src="dama_images/img_intro2.jpg" alt="2" /></a>
                <span><!-- IMPORTANT: do not remove the <span></span> tag --></span></li>
                
            <li class="sliderImage">
               <a href="http://damario-coburg.de/restaurant.htm"><img src="dama_images/img_intro3.jpg" alt="3" /></a>
                <span><!-- IMPORTANT: do not remove the <span></span> tag --></span></li>
                
            <li class="sliderImage">
                <a href="http://damario-coburg.de/restaurant.htm" id="dynLink"><img src="dama_images/img_intro4.jpg" alt="4" /></a>
                <span><!-- IMPORTANT: do not remove the <span></span> tag --></span></li>

javascript

2 Contributors
2 Replies
3K Views
19 Hours Discussion Span
Latest Post 16 Years Ago Latest Post by aizel

Dani AI

Generated 11 Months Ago

You can let the slideshow run and only navigate when the last slide actually becomes visible by emitting a small custom event from s3Slider, then listening for that event. This avoids redirecting on page load (your first attempt) and avoids guessing a fixed timeout (your second attempt). As hinted, the hook needs to be inside your slider code, not outside it.

Minimal patch inside the plugin:
Add this line at the start of the fadeIn callback where a new slide becomes visible.

// inside: $(items[currNo]).fadeIn((timeOut/6), function() {
$(element).trigger('s3slider:shown', [currNo, items[currNo]]);

Then, in your page script, listen for that event and redirect only when the last slide shows. Use .bind() for older jQuery.

$(function () {
  $('#slider').bind('s3slider:shown', function (e, idx, el) {
    var lastIdx = $('#sliderContent .sliderImage').length - 1;
    if (idx === lastIdx) {
      // small delay so the user actually sees the final image
      setTimeout(function () {
        var href = $(el).find('a:first').attr('href');
        if (href) { window.location.href = href; }
      }, 800);
    }
  });
});

Tips:

Remove your body onLoad setTimeout redirect so it does not compete with this logic.
If your anchors can be missing, keep the null-check on href as shown.
If you need to open in a new tab instead, replace window.location.href = href; with window.open(href, '_blank'); (note: some browsers may block non-user-initiated popups).

All 2 Replies

Airshow 416 WiFi Lounge Lizard

16 Years Ago

Aizel,

Yes it's possible but the solution is highly depenedent on what you have already coded.

Can you post the code are you using to animate the slide show please?

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

aizel 0 Newbie Poster · Answer 1 · 2010-09-13T12:17:01+00:00

ok sir Airshow this is the html file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Slider s3Slider</title>
<!-- CSS -->
<style type="text/css" media="screen">
#slider {
    width: 813px; /* important to be same as image width */
    height: 317px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
}

#sliderContent {
    width: 813px; /* important to be same as image width or wider */
    position: absolute;
    top: 0;
    margin-left: 0;
}
.sliderImage {
    float: left;
    position: relative;
    display: none;
}

.sliderImage a, .sliderImage img{
border: 0;
}

.sliderImage span {
    position: absolute;
    font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 750px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}

.sliderImage span p{
text-align:justify;
}

.clear {
    clear: both;
}
.sliderImage span strong {
    font-size: 14px;
}
.top {
    top: 0;
    left: 0;
}
.bottom {
    bottom: 0;
    left: 0;
}
.left {
    top: 0;
    left: 0;
    width: 110px !important;
    height: 280px;
}
.right {
    right: 0;
    bottom: 0;
    width: 150px !important;
    height: 300px;
}

.right p{
    width: 110px !important;
}

.bottom p{
    padding-bottom: 10px;
}

ul { list-style-type: none;}
</style>
<!-- JavaScripts-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
      
        $('#slider').s3Slider({
            timeOut: 4000 <!-- 1000 = 1 seconds --> 
        });
    });
</script>
<script type="text/javascript">
<!--
function delayer(){
    window.location = "http://www.damario-coburg.de/"
}
//-->
</script>

</head>

<body onLoad="setTimeout('delayer()', 40000)">

    <h2>Example</h2>
    <p>This is example how to use the Slider.</p>
    
    <div id="slider">
        <ul id="sliderContent">
        
            <li class="sliderImage">
                <a href="http://damario-coburg.de/restaurant.htm"><img src="dama_images/img_intro1.jpg" alt="1" /></a>
                <span class="bottom">
                <strong><!--add title text here -->Title Text</strong>
                <br />
                <p><!-- add context details -->Some text goes in here...</p>
                </span><!-- IMPORTANT: do not remove the <span></span> tag -->
                </li>
                
            <li class="sliderImage">
                <a href="http://damario-coburg.de/restaurant.htm"><img src="dama_images/img_intro2.jpg" alt="2" /></a>
                <span><!-- IMPORTANT: do not remove the <span></span> tag --></span></li>
                
            <li class="sliderImage">
               <a href="http://damario-coburg.de/restaurant.htm"><img src="dama_images/img_intro3.jpg" alt="3" /></a>
                <span><!-- IMPORTANT: do not remove the <span></span> tag --></span></li>
                
            <li class="sliderImage">
                <a href="http://damario-coburg.de/restaurant.htm"><img src="dama_images/img_intro4.jpg" alt="4" /></a>
                <span><!-- IMPORTANT: do not remove the <span></span> tag --></span></li>
                
            <li class="sliderImage">
                <a href="http://damario-coburg.de/restaurant.htm"><img src="dama_images/img_intro5.jpg" alt="5" /></a>
                 <span><!-- IMPORTANT: do not remove the <span></span> tag --></span></li>
                
            <li class="sliderImage">
                <a href="http://damario-coburg.de/restaurant.htm"><img src="dama_images/img_intro6.jpg" alt="6" /></a>
               <span><!-- IMPORTANT: do not remove the <span></span> tag --></span></li>
                
            <li class="sliderImage">
                <a href="http://damario-coburg.de/restaurant.htm"><img src="dama_images/img_intro7.jpg" alt="7" /></a>
                <span><!-- IMPORTANT: do not remove the <span></span> tag --></span></li>
                
            <div class="clear sliderImage"></div>
        </ul>
    </div>
  <!-- // slider -->

</body>
</html>

this the js script

/* ------------------------------------------------------------------------
    s3Slider
    
    Developped By: Boban Karišik -> [url]
        CSS Help: Mészáros Róbert -> [url]http://www.perspectived.com/[/url]
    Version: 1.0
    
    Copyright: Feel free to redistribute the script/modify it, as
               long as you leave my infos at the top.
------------------------------------------------------------------------- */


(function($){  

    $.fn.s3Slider = function(vars) {       
        
        var element     = this;
        var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
        var current     = null;
        var timeOutFn   = null;
        var faderStat   = true;
        var mOver       = false;
        var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
        var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
            
        items.each(function(i) {
    
            $(items[i]).mouseover(function() {
               mOver = true;
            });
            
            $(items[i]).mouseout(function() {
                mOver   = false;
                fadeElement(true);
            });
            
        });
        
        var fadeElement = function(isMouseOut) {
            var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
            thisTimeOut = (faderStat) ? 10 : thisTimeOut;
            if(items.length > 0) {
                timeOutFn = setTimeout(makeSlider, thisTimeOut);
            } else {
                console.log("Poof..");
            }
        }
        
        var makeSlider = function() {
            current = (current != null) ? current : items[(items.length-1)];
            var currNo      = jQuery.inArray(current, items) + 1
            currNo = (currNo == items.length) ? 0 : (currNo - 1);
            var newMargin   = $(element).width() * currNo;
            if(faderStat == true) {
                if(!mOver) {
                    $(items[currNo]).fadeIn((timeOut/6), function() {
                        if($(itemsSpan[currNo]).css('bottom') == 0) {
                            $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        } else {
                            $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        }
                    });
                }
            } else {
                if(!mOver) {
                    if($(itemsSpan[currNo]).css('bottom') == 0) {
                        $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                            $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    } else {
                        $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                        $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    }
                }
            }
        }
        
        makeSlider();

    };  

})(jQuery);

auto click link in javascript

Dani AI

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers