I have a social network with wowonder, I made a modification on the timeline page, I took the top cover image in banner format, and put it on the side, with 280x500 dimension, it happens that Draggable does not want to work correctly on this new dimension. 1 st. Draggable does not want to move the image; 2º. Draggable does not crop the image in the correct dimension;
I would like to resolve this issue. I really need to solve this problem!
Follow the Draggable code snippet:
scroll: false,
axis: "y",
cursor: "-webkit-grab",
drag: function (event, ui) {
y1 = $('.user-cover-reposition-container').height();
y2 = $('.user-reposition-container').find('img').height();
if (ui.position.top >= 0) {
ui.position.top = 0;
}else
if (ui.position.top <= (y1-y2)) {
ui.position.top = y1-y2;
}
},
stop: function(event, ui) {
$('input.cover-position').val(ui.position.top);
}
});
Now an excerpt from the HTML:
<div class="card hovercard" style="margin-bottom: 0px;">
<div class="cardheader user-cover">
<?php if ($IsOwner === true) { ?>
<form action="#" method="post" class="profile-cover-changer">
<div class="input-group when-notedit">
<span class="input-group-btn">
<span class="btn btn-upload-image btn-file">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-camera"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
<input type="file" name="cover" accept="image/*" onchange="Wo_UpdateProfileCover();">
</span>
</span>
</div>
<div class="input-group">
<span class="input-group-btn when-notedit">
<span class="btn btn-upload-image btn-file" onclick="Wo_StartRepositioner();">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-crop"><path d="M6.13 1L6 16a2 2 0 0 0 2 2h15"></path><path d="M1 6.13L16 6a2 2 0 0 1 2 2v15"></path></svg>
</span>
</span>
</div>
<div class="input-group when-edit" style="display: none;">
<span class="input-group-btn">
<span class="btn btn-upload-image btn-file" onclick="Wo_SubmitRepositioner();">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
</span>
</span>
</div>
<div class="input-group when-edit" style="display: none;">
<span class="input-group-btn">
<span class="btn btn-upload-image btn-file" onclick="Wo_StopRepositioner();">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</span>
</span>
</div>
<input type="hidden" name="user_id" value="<?php echo $wo['user_profile']['user_id']; ?>">
</form>
<form class="cover-position-form hidden" method="post">
<input class="cover-position" name="pos" value="0" type="hidden">
<input class="image_type" name="image_type" value="0" type="hidden">
<input name="cover_image" id="cover-input-image" value="<?php echo $wo['user_profile']['cover_org'] ?>" type="hidden">
<input name="real_image" id="full-input-image" value="<?php echo Wo_GetMedia($wo['user_profile']['cover_full']); ?>" type="hidden">
</form>
<?php } ?>
<div class="user-cover-uploading-container"></div>
<div class="user-cover-uploading-progress">
<div class="pace-activity-parent"><div class="pace-activity"></div></div>
</div>
<div class="user-cover-reposition-container">
<div class="user-cover-reposition-w">
<img id="cover-image" src="<?php echo $wo['user_profile']['cover'] ?>" alt="<?php echo $wo['user_profile']['name'] ?> Cover Image" onclick="Wo_OpenProfileCover('<?php echo $wo['user_profile']['cover_org'] ?>');" class="pointer" style="height:500px;"/>
</div>
<div class="user-reposition-container">
<img style="height:500px;" id="full-image" src="<?php echo Wo_GetMedia($wo['user_profile']['cover_full']) ?>" alt="User Image"/>
<div class="user-reposition-dragable-container" align="center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-move"><polyline points="5 9 2 12 5 15"></polyline><polyline points="9 5 12 2 15 5"></polyline><polyline points="15 19 12 22 9 19"></polyline><polyline points="19 9 22 12 19 15"></polyline><line x1="2" y1="12" x2="22" y2="12"></line><line x1="12" y1="2" x2="12" y2="22"></line></svg>
<?php echo $wo['lang']['drag_to_re']; ?>
</div>
<div class="user-cover-uploading-container user-repositioning-icons-container1"></div>
<div class="user-cover-uploading-progress user-repositioning-icons-container"></div>
</div>
</div>
</div>
<div class="problackback"></div>
<div class="pic-info-cont">
<div class="user-avatar flip">
<div class="user-avatar-uploading-container">
<div class="user-avatar-uploading-progress">
<div class="ball-pulse"><div></div><div></div><div></div></div>
</div>
</div>
<img id="updateImage-<?php echo $wo['user_profile']['user_id'] ?>" class="pointer" alt="<?php echo $wo['user_profile']['name'] ?> Profile Picture" src="<?php echo $wo['user_profile']['avatar'] ?>" onclick="Wo_OpenProfilePicture('<?php echo $wo['user_profile']['avatar_org'] ?>');"/>
<?php if ($IsOwner === true) { ?>
<form action="#" method="post" class="profile-avatar-changer">
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-upload-image btn-file">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-camera"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
<input type="file" name="avatar" accept="image/x-png, image/jpeg" onchange="Wo_UpdateProfileAvatar();">
</span>
<?php if ($wo['user_profile']['avatar_org'] != $wo['userDefaultAvatar']) { ?>
<span class="btn btn-upload-image btn-file" onclick="OpenCropModal()">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-crop"><path d="M6.13 1L6 16a2 2 0 0 0 2 2h15"></path><path d="M1 6.13L16 6a2 2 0 0 1 2 2v15"></path></svg>
</span>
<?php } ?>
</span>
</div>
<input type="hidden" name="user_id" id="user-id" value="<?php echo $wo['user_profile']['user_id']; ?>">
</form>
<?php } ?>
</div>
<div class="info">
<div class="title">
<a href="<?php echo Wo_SeoLink('index.php?link1=timeline&u=' . $wo['user_profile']['username'] . ''); ?>" data-ajax="?link1=timeline&u=<?php echo $wo['user_profile']['username']; ?>">
<?php echo $wo['user_profile']['name']; ?>
</a>
<?php if ($wo['user_profile']['verified'] == 1) { ?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="verified-color feather feather-check-circle" title="<?php echo $wo['lang']['verified_user']; ?>" data-toggle="tooltip"><path d="M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z"></path></svg>
<?php } ?>
<?php
if (Wo_IsUserPro($wo['user_profile']['is_pro']) === true) {
$user_pro_type = Wo_GetUserProType($wo['user_profile']['pro_type']);
?>
<span class="badge-pro" style="background-color:<?php echo $user_pro_type['color_name']; ?>">
<a class="badge-link" href="<?php echo Wo_SeoLink('index.php?link1=go-pro'); ?>" title="<?php echo $user_pro_type['type_name']; ?>" data-toggle="tooltip">PRO</a>
</span>
<?php } ?>
</div>
<div class="options-buttons">
<span class="user-follow-button btn-glossy">
<?php echo Wo_GetFollowButton($wo['user_profile']['user_id']); ?>
</span>
<span class="profile-message-btn btn-glossy">
<?php echo Wo_GetMessageButton($wo['user_profile']['user_id']); ?>
</span>
<?php if ($IsOwnerUser === true) { ?>
<span class="btn-glossy">
<a class="btn btn-default" href="<?php echo Wo_SeoLink('index.php?link1=setting&user=' . $wo['user_profile']['username'] . '&page=general-setting') ?>" data-ajax="?link1=setting&user=<?php echo $wo['user_profile']['username'] . '&page=general-setting'; ?>">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><polygon points="16 3 21 8 8 21 3 21 3 16 16 3"></polygon></svg>
<?php echo $wo['lang']['edit']; ?>
</a>
</span>
<?php } else { ?>
<?php if ($wo['loggedin'] == true) { ?>
<div class="dropup btn-glossy">
<button class="btn btn-default dropdown-toggle" type="button" id="user-dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="user-dropdownMenu">
<?php if ($IsOwnerUser === false && $wo['loggedin'] == true) { ?>
<li>
<span class="menu-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-slash"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line></svg>
<a href="<?php echo $wo['marker'] . 'block_user=block' ?>"><?php echo $wo['lang']['block_user']; ?></a>
</span>
</li>
<?php } ?>
<?php if ($IsOwnerUser === false && $wo['loggedin'] == true && !Wo_IsFamilyMemberExists($wo['user']['id'], $wo['user_profile']['id'], false)) { ?>
<li id="open_add_to_family_modal">
<span class="menu-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus" style="margin: -4px 11px auto 2px;"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>
<span onclick="$('#add_to_family').modal('show');"><span class="pointer"><?php echo $wo['lang']['add_to_family']; ?></span></span>
</span>
</li>
<?php } ?>
<?php if ($wo['loggedin'] == true && $IsOwner) { ?>
<li id="open_add_to_family_modal">
<span class="menu-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-3"><polygon points="14 2 18 6 7 17 3 17 3 13 14 2"></polygon><line x1="3" y1="22" x2="21" y2="22"></line></svg>
<a href="<?php echo Wo_SeoLink('index.php?link1=setting&user=' . $wo['user_profile']['username'] . '&page=general-setting') ?>"><?php echo $wo['lang']['edit']; ?></a>
</span>
</li>
<?php } ?>
<?php if ($wo['loggedin'] && !Wo_IsAdmin() && $wo['user']['id'] != $wo['user_profile']['id'] && !Wo_IsAdmin($wo['user_profile']['id'])): ?>
<?php if (!Wo_IsReportExists($wo['user_profile']['id'], 'user')): ?>
<li id="report_status" onclick="$('#report_profile').modal('show');">
<span class="menu-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12" y2="17"></line></svg>
<span><?php echo $wo['lang']['report_user']; ?></span>
</span>
</li>
<?php else: ?>
<li id="report_status" onclick="Wo_ReportProfile(<?php echo $wo['user_profile']['id']; ?>, false);">
<span class="menu-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12" y2="17"></line></svg>
<span><?php echo $wo['lang']['unreport']; ?></span>
</span>
</li>
<?php endif; ?>
<?php endif; ?>
</ul>
</div>
<?php } ?>
<?php } ?>
</div>
</div>
</div>
</div>