www.webdeveloper.com
Results 1 to 5 of 5

Thread: Problem with porting code from Fiddle link

  1. #1
    Join Date
    Mar 2012
    Posts
    9

    Problem with porting code from Fiddle link

    I found some working code on a Fiddle link, but it does not work when I make test html, css, js files on my harddrive.

    The original code:
    http://jsfiddle.net/92HXT/530/

    In my html I added:
    Code:
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="slider.js" type="text/javascript"></script>
    I noticed that the jQuery UI 1.10.3 is required for the Fiddle code to work. I have never needed to implement ui to make anything work beyond the initial jQuery version.

    Is this really necessary?

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,265
    This user interface (see this page) seems necessary for Draggable, Sortable, Accordion, Autocomplete, Button, Datepicker, Menu, and Progressbar... If it works with and not without then its really necessary !

    But in any case, loading jQuery for such effects does not seem advisable...
    Last edited by 007Julien; 08-10-2013 at 06:37 AM.

  3. #3
    Join Date
    Mar 2012
    Posts
    9
    Then what is needed to be changed, for the javascript code to work?

    Code:
    $(document).ready(function(){
        var active = "europa-view";
        $('a.view-list-item').click(function () {
            var divname= this.name;
            $("#"+active ).hide("slide", { direction: "left" }, 600);
            $("#"+divname).delay(650).show("slide", { direction: "left" }, 600);
            active = divname;
        });
    });

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,265
    Here is a script without jQuery (5 ko at all !)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title></title>
    <style type="text/css">
    h3#primoPiano-title{padding:2px 0 2px 10px;margin:0 0 10px;letter-spacing:.001em;text-transform:uppercase;border-top:1px dotted #AAAAAA;border-bottom:1px dotted #AAAAAA;font-family:Georgia,"Times New Roman",Times,serif;}
    div#primoPiano-view{padding:0px 10px 10px 10px;clear:both;overflow:auto;margin-bottom:10px;}
    div#view-navigator{float:right;clear:both;}
    ul#view-list li{padding:2px 10px 2px 10px;list-style:none;display:inline;}
    ul#view-list li a{color:#003399;font-weight:bold;text-decoration:none;}
    ul#view-list li a:hover{border-bottom:3px solid #003399;}
    div#europa-view{}
    ul#europa-list{list-style-position:inside;}
    ul#europa-list li{padding:3px 0 3px 15px;margin:3px 0 0;display:list-item;text-align:-webkit-match-parent;list-style:none;background:url('/images/aster/arrow_right.gif') 0 4px no-repeat;}
    div#italia-view{display:none;}
    ul#italia-list{list-style-position:inside;}
    ul#italia-list li{padding:3px 0 3px 15px;margin:3px 0 0;display:list-item;text-align:-webkit-match-parent;list-style:none;background:url('/images/aster/arrow_right.gif') 0 4px no-repeat;}
    div#emilia-view{display:none;}
    ul#emilia-list{list-style-position:inside;}
    ul#emilia-list li{padding:3px 0 3px 15px;margin:3px 0 0;display:list-item;text-align:-webkit-match-parent;list-style:none;background:url('/images/aster/arrow_right.gif') 0 4px no-repeat;}
    .news-list{display:block;width:220px;position:relative;left:0;top:0;}
    </style>
    </head>
    <body>
    <div id="view-navigator">
            <ul id="view-list">
                <li class="europa"><a href="#" class="view-list-item" name="europa-view">europa</a>
                </li>
                <li class="italia"><a href="#" class="view-list-item" name="italia-view">italia</a>
                </li>
                <li class="emilia"><a href="#" class="view-list-item" name="emilia-view">emilia-romagna</a>
                </li>
            </ul>
        </div>
        <div id="primoPiano-view">
            <div id="europa-view" class="news-list">
                <ul id="europa-list">
                    <li>Elemento lista 1a</li>
                    <li>Elemento lista 2a</li>
                    <li>Elemento lista 3a</li>
                </ul>
            </div>
            <div id="italia-view" class="news-list">
                <ul id="italia-list">
                    <li>Elemento lista 1b</li>
                    <li>Elemento lista 2b</li>
                    <li>Elemento lista 3b</li>
                </ul>
            </div>
            <div id="emilia-view" class="news-list">
                <ul id="emilia-list">
                    <li>Elemento lista 1c</li>
                    <li>Elemento lista 2c</li>
                    <li>Elemento lista 3c</li>
                </ul>
            </div>
        </div>
    <script type="text/javascript">
    // Only a short cut
    function $(i){return document.getElementById(i)}
    function getStyle(elm,styleProp){var val;    
        if (elm.currentStyle) return elm.currentStyle[styleProp];
        else if (window.getComputedStyle)
            return val=document.defaultView.getComputedStyle(elm,null).getPropertyValue(styleProp);
        else return false;
    }
    var active;
    function hide(elm){var dlt=parseInt(getStyle(elm,'left'))-1; 
        elm.style.left=dlt+'px';
        if (Math.abs(dlt)<220) {setTimeout(function(){hide(elm)},3);return}
        elm.style.display='none';
        elm=$(active);elm.style.left='-220px';elm.style.display='block';
        show(elm);
    }
    function show(elm){var dlt=parseInt(getStyle(elm,'left'))+1; 
         elm.style.left=dlt+'px';
         if (Math.abs(dlt)) {setTimeout(function(){show(elm)},3);return}
    }
    
    (function(){// initialisation with an anonymous function
        active='europa-view'; 
        var linksBlocks=$('view-list').children;
        for (l=linksBlocks.length,i=0;i<l;i++) linksBlocks[i].onclick=function(e){
            var t=e?e.target:window.srcElement,divname=t.name;
            while (t.nodeType!=1) t=t.parentNode;
           var current=$(active);
           active=divname;
            hide(current);
            return false};
    }());
    </script>
    </body>
    </html>
    Last edited by 007Julien; 08-11-2013 at 12:14 PM.

  5. #5
    Join Date
    Mar 2012
    Posts
    9
    Thank you for the script. Is the only difference between jQuery and ordinary javascript that jQuery has been simplified?

    If so, wouldn't it have been easier for you to recreate the script using jQuery? Because while this does work (and thank you again), it does not have the same fluid motion as the jQuery script

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles