+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / HTML page as a custom widget

HTML page as a custom widget

3 posts, 0 answered
  1. Nivy
    Nivy avatar
    14 posts
    Registered:
    03 Dec 2014
    16 Jan 2015
    Link to this post

    Hi

    I want to implement a working HTML page(with js and css) as a custom widget in Sitefinity. Can you suggest a way to do so?

    I had created a user control and implemented the HTML code but the images do not display in the front end .I had mentioned a physical location i.e ../images/planner.png for the src in <img> .Don't know if this is the correct approach. The HTML code I used in the user control is shown below:-

    <body>
      
    <ul id="flexiselDemo3">
        <li><a href="#"><img src="images/1.png" /></a></li>
        <li><a href="#"><img src="images/2.png" /></a></li>
        <li><a href="#"><img src="images/3.png" /></a></li>
        <li><a href="#"><img src="images/4.png" /></a></li> 
        <li><a href="#"><img src="images/5.png" /></a></li> 
        <li><a href="#"><img src="images/6.png" /></a></li> 
        <li><a href="#"><img src="images/7.png" /></a></li> 
        <li><a href="#"><img src="images/8.png" /></a></li> 
        <li><a href="#"><img src="images/9.png" /></a></li> 
        <li><a href="#"><img src="images/10.png" /></a></li> 
    </ul>    <div class="clearout"></div><div id="box_left">
    <a href="#"><img src="images/planner.jpg"> <span><strong>Training 2014 Planner</strong><br>Bahrain</span></a>
    </div><div id="box_left">
    <a href="#"><img src="images/EANDT.jpg"><span><strong>Employment and Training Programme</strong></span></a>
    </div><div id="box_left">
    <a href="#"><img src="images/planner_1.jpg"><span><strong>New Training 2014 Planner</strong><br>for business professionals</span></a>
    </div><script type="text/javascript">
     
    $(window).load(function() {
           $("#flexiselDemo3").flexisel({
            visibleItems: 6,
            animationSpeed: 1000,
            autoPlay: true,
            autoPlaySpeed: 3000,           
            pauseOnHover: true,
            enableResponsiveBreakpoints: true,
            responsiveBreakpoints: {
                portrait: {
                    changePoint:480,
                    visibleItems: 1
                },
                landscape: {
                    changePoint:640,
                    visibleItems: 2
                },
                tablet: {
                    changePoint:768, 
                    visibleItems: 3
                }
            }
        });});
    </script>
       
       
    </body> 

    Please advice

     

    Regards

    Nivy

  2. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    16 Jan 2015
    Link to this post

    Image src needs to be relative to the site root...so /images/file.jpg tells fhe browser to get it from http://site.com/images/file.jpg regardless of where the widget lives.

    Whereas your method would tell the browser ro load the images folder from an images child folder of wherever you are in the sitemap.  So if you were on page http://site.com/news then it'd try to load it from http://site.com/news/images/file.jpg.

     ...not sure about the widget as an html page thing though, thats another story

  3. Sabrie Nedzhip
    Sabrie Nedzhip avatar
    534 posts
    Registered:
    05 Dec 2016
    20 Jan 2015
    Link to this post
    Hello Nivy,

    Can you please try to rename the physical folder where you store the images to be different from images - for example fsimages and test the behavior again.

    You may also refer to the following forum thread where the same has been discussed.

    Regards,
    Sabrie Nedzhip
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
3 posts, 0 answered