Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Responsive Navigation</title>
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- <style>
- .content{background:#eef; padding: 5px; border:1px gray dotted; font-size: 1.4em; float:left}
- </style>
- <link rel="stylesheet" href="style.css">
- <script type="text/javascript" src="jquery-2.1.0.min.js"></script>
- <script>
- var category = "";
- var offset = 0;
- var limit = 50;
- $(function() {
- $("#itemDet").hide();
- var pull = $('#pull');
- menu = $('nav ul');
- menuHeight = menu.height();
- $(pull).on('click', function(e) {
- e.preventDefault();
- menu.slideToggle();
- });
- $(window).resize(function(){
- var w = $(window).width();
- if(w > 320 && menu.is(':hidden')) {
- menu.removeAttr('style');
- }
- });
- $('li').click(function(e) {
- category = $(this).find('a').text();
- offset = 0;
- getPhotos(category, offset, limit);
- });
- $(window).scroll(function(){
- if ($(window).scrollTop() >= $(document).height() - $(window).height() - 200){
- offset+=limit;
- getPhotos(category, offset, limit);
- }
- });
- $("body").on("click", "img", function(){
- var im = $(this);
- $('#items').hide();
- $('#itemDet').show();
- $('#title').append("<a href='"+im.attr('buyUrl')+"'>" + im.attr('title') + "</a>");
- $('#from').html(im.attr("date-from"));
- $('#to').html(im.attr("date-to"));
- $('#im').append("<img src='" + im.attr("src") + "'><img>");
- var tmp = im.attr('buyUrl');
- tmp = tmp.substring(tmp.indexOf("http"));
- var full="https://www.facebook.com/sharer/sharer.php?u="+tmp;
- $('#share').append("<a style='color:#ffffff' href = '"+full+"' target='_blank'> Share on Facebook </a>");
- });
- $(".selected").on("click", "img", function(){
- $('img').removeClass('selected');
- $(this).addClass('selected');
- });
- $('#top').click(function(){
- $("#itemDet").hide();
- $("#items").show();
- $('#title a').remove();
- $('#from').html("");
- $('#to').html("");
- $('#im img').remove();
- $('#shlare a').remove();
- });
- });
- function getPhotos(category, offset, limit){
- if (offset == 0) $('#items').html("<img src='animate.gif' style='display:block;width:15px;'/>");
- $.ajax({
- url: "https://partner-api.groupon.com/deals.json?tsToken=US_AFF_0_987654_123456_0&division_id=" + category + "&offset=" + offset + "&limit=" + limit,
- dataType: "jsonp",
- success: function (data) {
- if (offset == 0) $('#items').html("");
- $.each( data.deals, function( i, item ) {
- var img = $("<img/>");
- img.attr('width', '200px');
- img.attr('height', '150px');
- img.attr('title', item.title);
- img.attr("date-from", item.startAt);
- img.attr("date-to", item.endAt);
- img.attr("buyUrl", item.dealUrl);
- img.attr("src", item.largeImageUrl).appendTo("#items");
- });
- },
- error: function (e) {
- alert("Error: " + e.responseText);
- }
- });
- }
- </script>
- </head>
- <body>
- <nav class="clearfix">
- <ul class="clearfix">
- <li><a href="javascript:void(0)">Chicago</a></li>
- <li><a href="javascript:void(0)">Seattle</a></li>
- <li><a href="javascript:void(0)">Orlando</a></li>
- <li><a href="javascript:void(0)">Atlanta</a></li>
- <li><a href="javascript:void(0)">Houston</a></li>
- <li><a href="javascript:void(0)">Miami</a></li>
- </ul>
- <a href="javascript:void(0)" id="pull">Menu</a>
- </nav>
- <br>
- <br>
- <div style="text-align:center" id='items'></div>
- <div style="text-align:center" id='itemDet'>
- <div id="title" class="content"> </div>
- <label class="content" style="clear:both">Date from:</label>
- <div id="from" class="content"></div>
- <label class="content" style="clear:both">Date to:</label>
- <div id="to" class="content"></div>
- <div id="im" style="float:left;clear: both;padding-top: 20px;"></div>
- <div id="share" style="float:left; background:#0000ff;" ></div>
- <input id="top" style="float:left;clear: both; font-size: 1.4em;" value="Back" type="button"/>
- </div>
- </body>
- </html>
- Chat Conversation End
Advertisement
Add Comment
Please, Sign In to add comment
