Get the selected option from localstorage and restart the script

Viewed 58

I have 2 problem that hard to explain let me try it. I have a code for some website it has background image and some image infront of it that can movable and this image can change from options (bottom left) i can save it to localstorage and get it back to tag but the image show script doesn't understands that it should show the new options from selected, i used code from here

My second question is this image can move with this code and i want to save it location to localstorage as well and get it back when you reload it wherever user left

My code is here https://codepen.io/Etka/pen/dypZVvr you can see it has lots of trash codes apart from my question i tried to clean it i hope it clear enough. The image move is already in my code too.

index.html

<img id="uc" class="corn" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fblog.udemy.com%2Fwp-content%2Fuploads%2F2014%2F05%2Fbigstock-test-icon-63758263.jpg&f=1&nofb=1" draggable="false">


<p>Choose image:</p>
            <div id="skin">                    
                <select class="mod" id="un" onchange="Swap(this,'uc');">
                    <option value="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fblog.udemy.com%2Fwp-content%2Fuploads%2F2014%2F05%2Fbigstock-test-icon-63758263.jpg&f=1&nofb=1" selected="selected">Default</option>
                    <option value="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.vimeocdn.com%2Fportrait%2F58832_300x300.jpg&f=1&nofb=1">2</option>
                    <option value="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.pixabay.com%2Fphoto%2F2014%2F06%2F03%2F19%2F38%2Froad-sign-361514_640.png&f=1&nofb=1">3</option>
                </select>   
                

save1.js (the one that we save the selected options and get it back. I want this to change the image to selected one.)

$(function() {
$('#un').change(function() {
    localStorage.setItem('secenek', this.value);
});
if(localStorage.getItem('secenek')){
    $('#un').val(localStorage.getItem('secenek'));
}

move.js (the one we move the image with mouse. I want this code to get saved and get it where it was when it loaded again)

$("#uc").mousedown(function() {
$(this).data("dragging", true);
});

$("#uc").mouseup(function() {
    $(this).data("dragging", false);
});

$("#uc").mousemove(function(e) {
    if (!$(this).data("dragging"))
        return;
    $(this).css("left", e.clientX - $(this).width()/2);
    $(this).css("top", e.clientY - $(this).height()/2);
});
0 Answers
Related