Jump to content

java script and jquery

Drewfus

By Drewfus
in Technical Problems

 Share

Recommended Posts

Drewfus Collaborator

Drewfus

Posted
Posted (edited)

I am trying to make a sidebar widget using java script and jquery is it possible cause I just get a blank block widget I put all the code and other files I have.

Example of what it looks like. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body style="padding:0px; margin:0px; background-color:#fff;font-family:arial,helvetica,sans-serif,verdana,'Open Sans'">

    <!-- #region Jssor Slider Begin -->
    <!-- Generator: Jssor Slider Composer -->
    <script src="js/jssor.slider-28.0.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.jssor_1_slider_init = function() {

            var jssor_1_SlideoTransitions = [
              [{b:-1,d:1,x:-200,y:30,r:-360,p:{y:{d:1,dO:68}}},{b:0,d:1000,x:0,y:0,o:1,r:0,e:{x:16,y:16,o:1,r:16},p:{x:{dl:0.05},y:{dl:0.05,o:4,c:68},o:{dl:0.05},r:{dl:0.05}}}],
              [{b:-1,d:1,x:50,rY:180,sX:0.3,sY:0.3,e:{sX:34,sY:34},p:{x:{d:1,dO:1},sX:{d:1,dO:68},sY:{d:1,dO:68}}},{b:0,d:2000,x:0,o:1,rY:0,sX:1,sY:1,e:{x:7,o:35,rY:34,sX:34,sY:34},p:{x:{dl:0.02},o:{dl:0.1,o:4,rd:4},rY:{dl:0.1,o:4,rd:4},sX:{dl:0.02,o:68},sY:{dl:0.02,o:68}}}],
              [{b:-1,d:1,ls:0.2},{b:0,d:2000,ls:0.1,e:{ls:37}}],
              [{b:-1,d:1,x:50,rY:180,sX:0.3,sY:0.3,e:{sX:34,sY:34},p:{x:{d:1,dO:1},sX:{d:1,dO:68},sY:{d:1,dO:68}}},{b:0,d:2000,x:0,o:1,rY:0,sX:1,sY:1,e:{x:7,o:35,rY:34,sX:34,sY:34},p:{x:{dl:0.02},o:{dl:0.1,o:4,rd:4},rY:{dl:0.1,o:4,rd:4},sX:{dl:0.02,o:68},sY:{dl:0.02,o:68}}}],
              [{b:-1,d:1,ls:0.2},{b:0,d:2000,ls:0.1,e:{ls:37}}],
              [{b:-1,d:1,x:50,rY:180,sX:0.3,sY:0.3,e:{sX:34,sY:34},p:{x:{d:1,dO:1},sX:{d:1,dO:68},sY:{d:1,dO:68}}},{b:0,d:2000,x:0,o:1,rY:0,sX:1,sY:1,e:{x:7,o:35,rY:34,sX:34,sY:34},p:{x:{dl:0.02},o:{dl:0.1,o:4,rd:4},rY:{dl:0.1,o:4,rd:4},sX:{dl:0.02,o:68},sY:{dl:0.02,o:68}}}],
              [{b:-1,d:1,ls:0.2},{b:0,d:2000,ls:0.1,e:{ls:37}}],
              [{b:-1,d:1,x:50,rY:180,sX:0.3,sY:0.3,e:{sX:34,sY:34},p:{x:{d:1,dO:1},sX:{d:1,dO:68},sY:{d:1,dO:68}}},{b:0,d:2000,x:0,o:1,rY:0,sX:1,sY:1,e:{x:7,o:35,rY:34,sX:34,sY:34},p:{x:{dl:0.02},o:{dl:0.1,o:4,rd:4},rY:{dl:0.1,o:4,rd:4},sX:{dl:0.02,o:68},sY:{dl:0.02,o:68}}}],
              [{b:-1,d:1,ls:0.2},{b:0,d:2000,ls:0.1,e:{ls:37}}],
              [{b:-1,d:1,x:-200,y:30,r:-360,p:{y:{d:1,dO:68}}},{b:0,d:1000,x:0,y:0,o:1,r:0,e:{x:16,y:16,o:1,r:16},p:{x:{dl:0.05},y:{dl:0.05,o:4,c:68},o:{dl:0.05},r:{dl:0.05}}}]
            ];

            var jssor_1_options = {
              $AutoPlay: 1,
              $CaptionSliderOptions: {
                $Class: $JssorCaptionSlideo$,
                $Transitions: jssor_1_SlideoTransitions
              },
              $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$
              },
              $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$,
                $SpacingX: 16,
                $SpacingY: 16
              }
            };

            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

            /*#region responsive code begin*/

            var MAX_WIDTH = 350;

            function ScaleSlider() {
                var containerElement = jssor_1_slider.$Elmt.parentNode;
                var containerWidth = containerElement.clientWidth;

                if (containerWidth) {

                    var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);

                    jssor_1_slider.$ScaleWidth(expectedWidth);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }

            ScaleSlider();

            $Jssor$.$AddEvent(window, "load", ScaleSlider);
            $Jssor$.$AddEvent(window, "resize", ScaleSlider);
            $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
            /*#endregion responsive code end*/
        };
    </script>
    <style>
        /*jssor slider loading skin double-tail-spin css*/
        .jssorl-004-double-tail-spin img {
            animation-name: jssorl-004-double-tail-spin;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes jssorl-004-double-tail-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /*jssor slider bullet skin 034 css*/
        .jssorb034 {position:absolute;}
        .jssorb034 .i {position:absolute;cursor:pointer;}
        .jssorb034 .i .b {fill:#fff;fill-opacity:0.7;stroke:#000;stroke-width:1000;stroke-miterlimit:10;stroke-opacity:0.8;}
        .jssorb034 .i:hover .b {fill:#000;fill-opacity:1;stroke:#fff;stroke-opacity:1;}
        .jssorb034 .iav .b {fill:#000;fill-opacity:1;stroke:#fff;stroke-width:1600;stroke-opacity:.6;}
        .jssorb034 .i.idn {opacity:.3;}

        /*jssor slider arrow skin 051 css*/
        .jssora051 {display:block;position:absolute;cursor:pointer;}
        .jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
        .jssora051:hover {opacity:.8;}
        .jssora051.jssora051dn {opacity:.5;}
        .jssora051.jssora051ds {opacity:.3;pointer-events:none;}
    </style>
    <div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:350px;height:222px;overflow:hidden;visibility:hidden;">
        <!-- Loading Screen -->
        <div data-u="loading" class="jssorl-004-double-tail-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
            <img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="img/double-tail-spin.svg" />
        </div>
        <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:350px;height:222px;overflow:hidden;">
            <div>
                <img data-u="image" src="img/4.jpg" />
                <div data-ts="flat" data-p="206" style="left:-76px;top:-163px;width:425px;height:400px;position:absolute;">
                    <div data-to="30px -20px" data-ts="preserve-3d" data-arr="0" style="left:50px;top:193px;width:400px;height:14px;position:absolute;opacity:0;color:#ffffff;font-size:22px;line-height:1.2;letter-spacing:0.2em;text-align:center;">Bull or Bear Market.<br /></div>
                </div>
            </div>
            <div>
                <img data-u="image" src="img/4.jpg" />
                <div data-ts="flat" data-p="225" style="left:-71px;top:-144px;width:500px;height:400px;position:absolute;">
                    <div data-to="50% 50%" data-ts="preserve-3d" data-t="2" data-arr="1" style="left:100px;top:160px;width:300px;height:20px;position:absolute;opacity:0;color:#ffffff;font-size:12px;font-weight:900;line-height:1.2;letter-spacing:0.2em;text-align:center;">Welcome to<br /></div>
                    <div data-to="50% 50%" data-ts="preserve-3d" data-t="4" data-arr="3" style="left:100px;top:170px;width:300px;height:30px;position:absolute;opacity:0;color:#ebb400;font-size:24px;font-weight:900;line-height:1.2;letter-spacing:0.2em;text-align:center;">Kalyteran.co</div>
                    <div data-to="50% 50%" data-ts="preserve-3d" data-t="6" data-arr="5" style="left:100px;top:200px;width:300px;height:20px;position:absolute;opacity:0;color:#ffffff;font-size:12px;font-weight:900;line-height:1.2;letter-spacing:0.2em;text-align:center;">Your place<br /></div>
                    <div data-to="50% 50%" data-ts="preserve-3d" data-t="8" data-arr="7" style="left:100px;top:210px;width:300px;height:30px;position:absolute;opacity:0;color:#ebb400;font-size:24px;font-weight:900;line-height:1.2;letter-spacing:0.2em;text-align:center;">For all information.<br /></div>
                </div>
            </div>
            <div>
                <img data-u="image" src="img/4.jpg" />
                <div data-ts="flat" data-p="225" style="left:-88px;top:-143px;width:500px;height:400px;position:absolute;">
                    <div data-to="30px -20px" data-ts="preserve-3d" data-arr="9" style="left:73px;top:193px;width:400px;height:14px;position:absolute;opacity:0;color:#ffffff;font-size:12px;line-height:1.2;letter-spacing:0.2em;text-align:center;"><div>The forum with all the</div><div> information on Kalytera</div></div>
                </div>
            </div>
        </div>
        <!-- Bullet Navigator -->
        <div data-u="navigator" class="jssorb034" style="position:absolute;bottom:16px;right:16px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="i" style="width:13px;height:13px;">
                <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                    <path class="b" d="M11400,13800H4600c-1320,0-2400-1080-2400-2400V4600c0-1320,1080-2400,2400-2400h6800 c1320,0,2400,1080,2400,2400v6800C13800,12720,12720,13800,11400,13800z"></path>
                </svg>
            </div>
        </div>
        <!-- Arrow Navigator -->
        <div data-u="arrowleft" class="jssora051" style="width:55px;height:55px;top:0px;left:25px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
            <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                <polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
            </svg>
        </div>
        <div data-u="arrowright" class="jssora051" style="width:55px;height:55px;top:0px;right:25px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
            <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
                <polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline>
            </svg>
        </div>
    </div>
    <script type="text/javascript">jssor_1_slider_init();
    </script>
    <!-- #endregion Jssor Slider End -->
</body>
</html>

 

jssor.slider-28.0.0.min.js double-tail-spin.svg

4.jpg

Edited by Drewfus
Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
Invision Community © 2024 IPS, Inc.
×
×
  • Create New...