Making the DIV close icon drag along with the DIV - javascript

Here is the Fiddle
Can't figure out how to make the DIV close icon to follow the rest of the DIV when the DIV is dragged.
I seem to think there is something in this part of the code that I am not doing right.
$self = $(this);
$(opts.parent).append($self);
$('span.' + opts.classPrefix + '_oClose').remove();
$('body').append($overlayClose);
$('div.' + opts.classPrefix + '_overlay').remove();
$('body').append($overlay);
$self.draggable();
Appears to be something to do with how elements are appended to HTML body. I tried appending a blank div to body and then adding overlay and overlayClose to that blank div. But that did not even render the dialog. Any ideas?

As per Harrys demo http://jsfiddle.net/hari_shanx/8njzxhvx/3/
Line 24 has the magic :) Appending the close to the overlay then enabling the drag
$self.append($overlayClose);
$self.draggable();

I don't know about your code but I think you need a parent div that would be relatively positioned and a child that is absolutely positioned.
HTML
<div id="test">Hello! Trying to figure how to make the close div icon drag along with the div.
<img class="close" src="https://cdn3.iconfinder.com/data/icons/status/100/close_4-512.png" alt="">
</div>
CSS
#test {
background: lightgrey;
padding: 5px;
position: relative;
top: 100px;
}
img.close {
position: absolute;
right: 0px;
top: 0px;
height: 15px;
width: 15px;
cursor: pointer;
}
For dragging I've used jQuery UI:
$( "#test" ).draggable();
$("img.close").click( function(e){
$("#test").fadeOut();
});
I've made a fiddle that explains this:
FIDDLE

Try something like this:
<div id="test">
Close
Hello! Trying to figure how to make the close div icon drag along with the div.</div>
CSS:
.close{
float: right;
top: -31px;
position: relative;
left: 23px;
background:url()// your close icon
}
This will make your anchor tag draggable along with div and you can fire event on anchor tag for closing purpose

Related

How to keep element in viewport?

I have a html element which is displayed when a button is clicked. It‘s kinda like a popup. I want to check if it’s in the ViewPort of the browser and then place it inside the ViewPort . Is there a right way to achieve that?
At the moment I’m checking the height of the ViewPort and compare it to the point where the element will be attached to. So I do something like this:
If(window.innerHeight > yPointWhereElementIsAttachedTo + heightOfElement) //attach element;
But what is the right way to do it?
This can be achieved by using position: fixed; on an element with positioning.
For example:
.fixed {
position: fixed;
width: 300px;
height: 100px;
background: red;
left: 10px;
top: 40px;
}
.wrapper {
min-height: 4000px;
}
<div class="wrapper">
<div class="fixed">
I am fixed in the viewport
</div>
</div>
You could use scrollIntoView() if a more dynamic approach is required.
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
https://www.w3schools.com/jsref/met_element_scrollintoview.asp

How to display the postition absolute div as the position relative div?

I have a parent div "total" in which, there are two children divs namely, "some" and "box". When I click on the link in the div "some" (child-1), the "box"(child-2) must be displayed with width: 100%; and if I click on other parent link, the current "box" (child-2) must be hidden. Also, the paragraph tag must not be hidden when the click button is clicked(as in position: relative).
Here is the fiddle to work this out.
The following lines are the code I tried.
$('.box').hide();
$(".click-btn").on('click', function() {
$('.box').hide();
$(this).parent().parent().children(".box").toggle(1000);
});
check this if it solve your problem jsfiddle
i added this
$('.box').hide();
$(".click-btn").on('click', function() {
$('.box').hide();
$(this).parent().parent().children(".box").toggle(1000);
});
add the css
.box {
width: 100%;
float: left;
position: absolute;
height: 200px;
background: orange;
top: 70px;
left: 0px;
clear: both;
}
My solution would be putting each .box outside of the floating .single and reference them with an data attribute.
<div class="total">
<div class="single">
<div class="some"><a class="click-btn" href="#" data-box="box1">click</a></div>
</div>
<div class="clearfix"></div>
<div class="box" data-id="box1">Box 1</div>
</div>
And the box css
.box {
width: 100%;
height: 200px;
background: orange;
display:none;
}
If you set the display none in css you don't have to use $('.box').hide(); on dom ready.
Since you hide all .box elements on click, the toggle function won't work. To toggle the box if you click the active link again you can use the .not() function of jQuery which will take out an element of the collection.
Alltogether the JS would look like:
$(".click-btn").on('click', function(e) {
e.preventDefault();
var boxId = $(this).data('box');
var activeBox = $('[data-id="'+boxId+'"]');
$('.box').not(activeBox).hide();
activeBox.toggle(1000);
});
I'm using e.preventDefault(); what will prevent the default browser action for clicking a link.
Here is a fiddle: http://jsfiddle.net/mrvtwpjp/40/

Hide <span> until <div> is hovered over

I made this a couple of months back, but now I'm going through and re-tuning it. It's an image at the bottom of the page that when clicked it brings you to the top using JavaScript.
I already have the HTML, CSS and JS finished. But I can't get the CSS to work properly. I want a little message ("Scroll To Top") to remain hidden until the is hovered over, where it will appear.
I tried making a presentation here with JSFiddle, but it doesn't seem to want to work. (http://jsfiddle.net/9jvuoxra/1/)
Additionally Today I decided I want the image to become a background-image of the , but I can't get the to work correctly with {display: block;}. I've gotten it to work on other files in the past, but it doesn't want to work.
<!-- Scroll to the top option -->
<script>
function scroll () {
window.scrollTo (0, 0);
};
</script>
<div id="scroll-to-top">
<a onclick="scroll ()">
<span>Scroll To Top</span>
<img src="img/scroll-to-top.png" alt="Scroll To Top" title="Return to top">
</a>
</div>
<style>
div#scroll-to-top {margin-left: auto; width: 42px; height: 42px;}
div#scroll-to-top a {color: #ffffff;}
div#scroll-to-top a span {visibility: hidden;}
div#scroll-to-top a:hover span {visibility: visibile;}
div#scroll-to-top span {position: absolute; margin: 10px 0px 0px 0px; width: 42px; font-size: 10px; text-align: center;}
div#scroll-to-top img {display: block; width: 42px; height: 42px;}
div#scroll-to-top img:hover {cursor: pointer;}
</style>
scroll(X, Y) is already a defined javascript function, which is now replaced by the identical function scrollTo(X, Y), so using scroll() might not work always (as it is not working on jsfiddle). Instead you could write <a onclick="window.scrollTo(0, 0)"> to make it work.
For hiding the span, you may use jQuery.
Make sure to remove the visibility: hidden attribute also.
$(document).ready(function() {
// hide the span
$('#scroll-to-top span').hide();
// bind the hover event (mouseenter) to show the span and
// next hover event (mouseleave) to hide again
$('#scroll-to-top').hover(function(){
$('#scroll-to-top span').show();
}, function() {
$('#scroll-to-top span').hide();
});
});

Map not opening without refreshing page once closed

The website i am currently working on has a pop out div with a map of locations on it, my problem is once the pop up div has been closed i then have to refresh the page to open the div again
It is running jquery - here is the code
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#view_map_of_stocklists_link').click(function() {
//$('#popupdiv').show('slow');
$("#popupdiv").css('visibility', 'visible');
$("#mappy").css('opacity', '1');
});
$('.closepopup').click(function() {
$('#popupdiv').hide('slow');
});
});
</script>
The styling
<style>
#popupdiv
{
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 600px;
margin-top: -200px;
width: 960px;
margin-left: -500px;
padding: 20px;
}
#view_map_of_stocklists_link:hover {
cursor:pointer;
}
.closepopup {
margin-top: 60px;
border: 1px solid #ccc;
background-color: #000;
color: white;
cursor: pointer;
}
</style>
and then the HTML itself
<div id="popupdiv" style="visibility:hidden;">
<center>
<iframe style="opacity:0;" id="mappy" src="http://mapsengine.google.com/map/embed?mid=zNedxWZ7lai0.krRxVqZZmyns" width="900" height="500"></iframe>
<div class="closepopup" style="width:200px">Close</div>
</center>
</div>
<h2 class="bold skin-font-color1">Our Beloved Stockists</h2>
<h5 class="skin-font-color1 p-wrapper"><!-- client txt --> <div id="view_map_of_stocklists_link" class="skin-font-color4">
<h4>View map of stockists</h4>
</div>
The website is http://www.tee-ze.co.uk/sosmoothies/
Cheers
You are setting 'visibility' to 'visible' instead of 'display' to 'block'.
When jQuery .hide() is called it ultimately saves the previous display value and sets it to display:none; So you should be doing something like:
$('#view_map_of_stocklists_link').click(function() {
$('#popupdiv').hide('slow');
});
Which I just realized you have commented out in your code. I wish I could leave a comment but I need more rep.
Edit:
Sorry for complaining in may previous answer.
I just tried uncommenting the existing code and removing the visibilty stuff and that works just fine in your site. Try it.
The way you're showing the popup map doesn't match the way you're hiding it.
You show it with:
$("#popupdiv").css('visibility', 'visible');
But you hide it with:
$('#popupdiv').hide('slow');
That fades it out but ultimately sets the CSS style display: none on the #popupdiv element.
When you try to show it again, it still has display: none on it. Setting the visibility doesn't affect the display style.
You need to make the hide and show match up. Either use the visibility style, or the display style, but use the same one for both hiding and showing (and jQuery's .show() method uses display).
For example, you might create the <div> with display: none instead of visibility: hidden, and then you can use jQuery's .show() and .hide() consistently.

Save Draggable Div Position

i had added a drag and move div to my website, i am using common header for each pages.
my drag and move div code as follows:
Script:
<script type="text/javascript">
$(function() {
$( "#draggable" ).draggable();
});
</script>
Div:
<div class="student_avatar_header" id="draggable" title="Drag and Move...">
Some texts...
</div>
CSS:
.student_avatar_header {
width: 100px;
height: 100px;
position: absolute;
left: 10px;
top: 20px;
border-radius: 250px;
z-index: 9998;
box-shadow: 2px 2px 12px #008abc;
cursor: move;
}
this drag and move function working fine, what my question is i had added this draggable Div to my header so it will appear even visit any pages my website, i just want to set a cookie function or what possible for remember last position where it dragged. for example now i am here home page, i just drag my div to page bottom, but when i go to about page this div appear not previous position, its appear default position. i need it display previous position even i visit any pages my website,
NOTE: my website have above 35 pages.
any idea.?
thanks...
Have a look on the following code :
$("#draggable").draggable({
stop: function(event, ui) {
$.cookie("elementIDCookie", ui.position);
}
});
To re-position the element when the user returns:
$("#draggable").css( { "left" : $.cookie("elementIDCookie").left, "top" : $.cookie("elementIDCookie").top });

Categories