how to append recently visited each url next by next using javascript <script> function getSelectedIds() { return $('.box_compare .prod-id').map(function () { return $(this).text(); }).toArray(); } function updateLinkAndCounter() { var ids = getSelectedIds().map(function (x, i) { return ['P', ++i, '=', x].join(''); }); $('#container > a').attr('href', 'compare.aspx?' + ids.join('&')); $("p").text(ids.length == 1 ? 'There is 1 box.' : 'There are ' + ids.length + ' boxes.'); } $(".more").click(function checkHistory(targetId) { var compare = getCookie("compare"); var htmlContent = ''; if (compare != "") { var id = $(this).next('.ProdId').text(); var img = '<div><img id="img" src="<%=BASE%>/upload/<%=sThumb%>" alt="<%=sName%>" class="cmp_img" /></div>'; var product_name = '<div class="p_name"> <b><%=sName%> <span ><%=sVarient%></span></b></div>'; var selected = getSelectedIds(); if (selected.length == 5) return; // already 4 items added if (selected.indexOf(id) != -1) return; // item already added $('<div/>', { 'class': 'box_compare' }) .append($('<a/>', { href: '#', text: 'x' })) .append($('<span/>', { class: 'prod-id', text: id })) .append(img) .append(product_name) .appendTo('#container'); updateLinkAndCounter(); $("#container").removeClass("hidden"); } }); $(".box_compare a").live("click", function () { $(this).parent().remove(); updateLinkAndCounter(); }); function createCookie(name, value, days) { if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); var expires = "expires=" + date.toGMTString(); } else { var expires = ""; } document.cookie = name + "=" + value + expires + "; path=/"; } function getCookie(name) { var nameFormatted = name + "="; var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i].trim(); while (cookie.charAt(0) == ' ') cookie = cookie.substring(1, cookie.length); if (cookie.indexOf(nameFormatted) == 0) return cookie.substring(nameFormatted.length, cookie.length); } return null; } my divs <div class="add"> <img src="http://localhost/images/compare.png" /> <a href="#" class="more"> + Add to compare</a> <span class="ProdId"></span> </div> </div> <div id="compare"> <div id="container" class="hidden"> <p>There are 0 boxes</p> <a href="\compare.html?a=123&b=124&c=125" class="compare_link"><asp:Button ID="btn_compare" runat="server" Text="Compare" CssClass="btn" /> </a> <div id="close" class="close"> x </div> </div> </div> CSS code .more { color: green; } .box_compare { display:inline-block; width: 156px; height: 81px; background:#fff; margin-bottom: 6px; cursor:pointer; border: 1px dotted #ccc; } #container a{ margin-top:-5px; margin-left:3px; } .box_compare a { display:inline-block; height: 66px; color:red; margin-left: 142px; } .hidden{ display:none; } #compare{ background-color: #f5f5f5; border: 1px solid #ddd; font-size: 11px; margin-top: 45px; overflow: visible; width: 900px; margin-left: 113px; margin-bottom: 18px; } .close{ height: 20px; width: 25px; cursor: pointer; top: 2px; float:right; } .compare_link { /*padding-left:10px;*/ padding-top:5px; } .img_visible{ visibility:hidden; } .cmp_img{ float: left; height: 54px; margin-left: 11px; margin-top: -48px; width: 26px; } .p_name{ margin-top: -45px; padding-left: 45px; }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)