It's a work project. I have a bookmark page with our internal links as below. These bookmarks are standard for all users however I want users to be able to add custom bookmarks using their own URL dynamically and storing it via local storage. (Maybe image if it's not too difficult, or a standard image for all custom ones)
How can I do so in Jquery. End result: Have a user input where they choose URL > Name > IconLink(Or default image) + submit button. Once submitted their button get's added to the main div for those bookmarks.
Something I found elsewhere but cannot get it to work with
$(document).ready(function(){
$(".add-row").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
$("table tbody").append(markup);
});
// Find and remove selected table rows
$(".delete-row").click(function(){
$("table tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});
}); a.btn {
display: inline-block;
color: #666;
background-color: #eee;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
padding: 10px 30px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.3);
border-bottom-width: 3px;
position: right;
}
a.btn:hover {
background-color: #e3e3e3;
border-color: rgba(0, 0, 0, 0.5);
}
a.btn:active {
background-color: #CCC;
border-color: rgba(0, 0, 0, 0.9);
}
/* blue button */
a.btn.btn-blue {
background-color: #fff;
background-size: 100%;
background-image: -moz-radial-gradient(#33a7ff 0%, #33a7ff 85%);
background-image: -webkit-radial-gradient(#33a7ff 0%, #33a7ff 85%);
background-image: radial-gradient(#33a7ff 0%, #283991 85%);
border-color: rgba(0, 0, 0, 0.3);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
color: #FFF;
}
a.btn.btn-blue:hover {
background-color: #4F87A2;
border-color: rgba(0, 0, 0, 0.5);
}
a.btn.btn-blue:active {
background-color: #3C677B;
border-color: rgba(0, 0, 0, 0.9);
}
/* red button */
a.btn.btn-red {
background-color: #E48681;
border-color: rgba(0, 0, 0, 0.3);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
color: #FFF;
}
a.btn.btn-red:hover {
background-color: #DA4F49;
border-color: rgba(0, 0, 0, 0.5);
}
a.btn.btn-red:active {
background-color: #B32C24;
border-color: rgba(0, 0, 0, 0.9);
}
.a-btn {
background: #fff;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f', GradientType=0);
padding-left: 90px;
padding-right: 20px;
height: 70px;
width: 180px;
display: inline-block;
position: relative;
border: 1px solid #0099cc;
-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
float: center;
clear: both;
margin: 3px 3px;
overflow: hidden;
-webkit-transition: box-shadow 0.3s ease-in-out;
-moz-transition: box-shadow 0.3s ease-in-out;
-o-transition: box-shadow 0.3s ease-in-out;
transition: box-shadow 0.3s ease-in-out;
}
.a-btn img {
position: absolute;
left: 15px;
top: 13px;
border: none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text {
position: absolute;
font-size: 16px;
top: 18px;
left: 18px;
color: #6d954e;
opacity: 0;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.a-btn-text {
padding-top: 13px;
display: block;
font-size: 16px;
text-shadow: 0px -1px 1px #80ab5d;
}
.a-btn-text small {
display: block;
font-size: 11px;
letter-spacing: 1px;
}
.a-btn:hover {
-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 5px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 5px rgba(0, 0, 0, 0.4);
}
.a-btn:hover img {
-webkit-transform: scale(10);
-moz-transform: scale(10);
-ms-transform: scale(10);
-o-transform: scale(10);
transform: scale(10);
opacity: 0;
}
.a-btn:hover .a-btn-slide-text,
.a-btn:hover .a-btn-icon-right span {
opacity: 1;
}
.a-btn:active {
position: relative;
top: 1px;
background: #80ab5d;
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
border-color: #a9db80;
}
.a-btn:active .a-btn-icon-right span {
-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
}<a href="somelinkhere" class="a-btn" target="_blank">
<span class="a-btn-slide-text"></span>
<img src="http://icons.iconarchive.com/icons/sicons/basic-round-social/256/jquery-icon.png" alt="link" width=48 height=48" />
<span class="a-btn-text "><small></small>NAME OF LINK</span>
<span class="a-btn-icon-right"><span></span></span>
</a>I am assuming that you are using jStorage as your local storage (but you could also use JS cookies; note that jQuery cookies are no longer maintained).
$(document).ready(function () {
links = new array();
$('.store').on('click', function() {
var linkToStore = $(this).attr('href');
links.push(linkToStore);
$.jStorage.set('linksList', links, { TTL: 28800000 });
}
myUrls = $.jStorage.get('linksList', '');
});