0
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 I put it on the side, with the size of 280x500, it turns out that Draggable does not want to function properly in this new dimension. 1º. Draggable does not want to move the image; 2º. Draggable does not cut the image in the correct dimension;
I would like to resolve this issue. I really need to solve this problem!
Follows excerpt from the code Draggable:
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 a snippet of 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>
You have the image as a <img> or background?
– Pbras
just the background image, which is the cover, redelive.com create a quick account
– Alisson Maciel
In the code so you have no img in bacckground.
– Pbras
<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;"/>
– Alisson Maciel
<img style="height:500px;" id="full-image" src="<? php echo Wo_getmedia($Wo['user_profile']['cover_full']) ? >" alt="User Image"/>
– Alisson Maciel
This is not background img is an <img> element... and try meter "width: 280px;"
– Pbras