CODEWITHSUNDEEP
javascriptjqueryaspdotnetstorefront
user3508892
user3508892

Reputation: 11

aspdotnetstorefront Javascript not working

I have been having issues with my Javascript and jQuery codes working within the storefront. I have tried to use two different methods to create a slider, neither will function in the storefront but work outside the store without issue. I've tired changing file locations and created new directories for my custom files and nothing seems to work. Thinking the issue was my work I tried a out of the box free download again work off site but once in the ASPDOTNETSTOREFRONT program everything shows up but script stops working. Any idea or help?

Upvotes: -1

Views: 253

Answers (1)

Dean
Dean

Reputation: 159

You could look at something like this if its easier than using JavaScript.

Within your admin create a new topic and call it something like newhomebanner

Example of the code

<div id="slides">
  <div class="slides_container">
    <div class="slide"><a href="/c-1-example.aspx"><img alt="text" src="App_Themes/Skin_1/images/image.jpg" /></a></div>
    <div class="slide"><a href="/c-2-example.aspx"><img alt="text" src="App_Themes/Skin_1/images/image2.jpg" /></a></div>
    <div class="slide"><a href="/c-3-example.aspx"><img alt="text" src="App_Themes/Skin_1/images/image3.jpg" /></a></div>
    <div class="slide"><a href="/c-4-example.aspx"><img alt="text" src="App_Themes/Skin_1/images/image4.jpg" /></a></div>
  </div>
</div>

in your homepage template add this just after the closing header tag

<!-- Main Banner Start -->
<div class="main_banner clearfix">
  <asp:Literal runat="server" Text="<%$ Tokens: Topic, newhomebanner%>" />
</div><!-- Main Banner End -->

within your style.css in App_Themes/Skin1 add

/* Homepage Slides */
#slides {height:340px;}
.slides_container{width:930px; overflow:hidden; position:relative; display:none; border:4px solid #e1e1e1; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius:5px;}
.slides_container .slide{width:930px; height:320px;}
.slides_container .slide img{display:block;}

.pagination{margin:-20px 11px 0 0;  float:right; z-index:48; position:relative;}
.pagination li{float:left; margin:0 1px; list-style:none;}
.pagination li a{display:block; width:12px; height:0; padding-top:12px; background-image:url(images/pagination.png); background-position:0 0; float:left; overflow:hidden; outline:none;}
.pagination li.current a{background-position:0 -12px;}

Then add these two jscripts to your scripts library and add this code to your master template

<!--JQUERY BANNER START -->

<script src="jscripts/jquery.easing.1.3.js"></script>
<script src="jscripts/slides.min.jquery.js"></script>
<script>
  $(function(){
    $('#slides').slides({
      preload: true,
      preloadImage: 'images/loading.gif',
      play: 5000,
      pause: 2500,
      hoverPause: true
    });
  });
</script>    

<!--JQUERY BANNER END -->

Obviously this is just an example of getting rotating banners that link to a category but if you get this to work you can change the speed, number of banners etc.

Upvotes: 0

Related Questions