Results 1 to 10 of 10

Thread: Scrolling Banner Code?

  1. #1
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Scrolling Banner Code?

    Hi,
    If you look at the website www.tesco.com there is a large central area where images auto scroll or can be chosen (1 2 or 3). If you then click one of the large displayed images (example Groceries) it navigates you to a relevant sub page. is there some code that would allow me to create this similar effect for my homepage?. Not sure of its javascript or css or whatever?.
    Thankyou

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The script used there, it is javascript, isn't well documented, which leads me to believe it's either proprietary or stolen. In either case we don't want to get involved with that. This script is pretty close:

    http://www.dynamicdrive.com/dynamici...tentslider.htm

    You can also browse through the library:

    http://www.dynamicdrive.com/

    to see if anything else in it might be better for your purposes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for this information John.
    I took a look at the link that you gave and subsequently downloaded and tested out the code. The only issue is that I will be wanting to href a html page to a specific frame in the web page via clicking an image (which works fine). The only issue is that clicking one of the images does do the href link but the cycling of images stops. Dont know how images can effectively be told to continue cycling in parallel?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    My first idea would be to disable that in the script. Using a text only editor like NotePad, open up contentslider.js and find around line #110:

    Code:
    		/* sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on
    			featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
    		} */
    and add the multiline comment delimiters (highlighted and red) as shown. Hit save and use that version.

    You can easily find it by searching for:

    ["onclick"]

    It appears only once in the script.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks so much John ;-)
    Your'e my new hero!

  6. #6
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi again John,
    With the images inside the main graphic window, the code lets you mouse click.. and I have made it so that it sends a url to a target frame with a name (example targets frame called newframe etc) BUT I WAS wondering if the frame could be targetted if the mouse is OVER the image as opposed to having to mouse CLICK?. Is there somewhere in the code that I could set or change this value to mouseover?. I dont mean mouseover for the lower little images but the currently visible main/large graphic being shown.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If I understand you correctly, since the content in each of the slider panels is ordinary HTML, you should be able to take a link like:

    Code:
    <a href="somepage.htm" target="someframename"><img . . . /></a>
    and do:

    Code:
    <a href="somepage.htm" target="someframename" onmouseover="open(this.href, this.target);"><img . . . /></a>
    Or instead you could just add this script to the page:

    Code:
    <script type="text/javascript">
    (function(id){
    	var add = (function(){return window.addEventListener? function(el, ev, f){
    			el.addEventListener(ev, f, false);
    		}:window.attachEvent? function(el, ev, f){
    			el.attachEvent('on' + ev, f);
    		}:function(){return;};
    	})();
    	function overthem(){
    		var links = document.getElementById(id).getElementsByTagName('a');
    		for(var i = 0; i < links.length; ++i){
    			(function(link){
    				var href = link.href, targ = link.target;
    				add(link, 'mouseover', function(){open(href, targ);});
    			})(links[i]);
    		}
    	}
    	add(window, 'load', overthem);
    })('slider1');
    </script>
    See the highlighted slider1? That's the id of the sliderwrapper division.

    For faster execution (readiness), put it as the last thing before the closing </body> tag and change:

    Code:
    	add(window, 'load', overthem);
    to:

    Code:
    	overthem();
    Last edited by jscheuer1; 04-20-2011 at 05:23 AM. Reason: For faster execution . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Apologies

    John,
    Apologies; I dont think i explained it too clearly.
    If you go to http://www.dynamicdrive.com/dynamici...tentslider.htm
    THEN look at top right slider. Yes it has text you can click (horses, scenery etc) which is ok.. BUT what I would like is to have the images I have defined (like the large image of horse etc) to be able to send a url to another html frame when the mouse is over rather than the image requiring a click. Dont know if this can be set somewhere in the slider js files etc (like you can alter the cycle speed etc) as its currently set for click.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I still don't get what you mean. Do you want mouseover of the large horse image to launch something in a targeted iframe?

    The code in my previous post will do that.

    Or do you want something else?
    Last edited by jscheuer1; 04-21-2011 at 06:56 PM. Reason: English Usage
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok.. got it working.. my apologies
    THANKS ;-)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •