cant position pop up div - javascript

looking for advice from How to position 400 x 400px popup div relative to click, keeping in screen view
I am loading a jquery pop up div. trouble being it is displaying in the middle of the screen I cant get it top display at the top of the screen...
<script>
$(function () {
$("#saveDialogSingleFeature").dialog();
});
</script>
<div style="display: none;">
<div id="saveDialogSingleFeature" title="Save Complete">
<p>
You have successfully saved 1 feature.</p>
</div>
</div>
As I said div opens fine I just need to change the position it is displayed at. I have tried:
<script type="text/javascript">
$('#saveDialogSingleFeature').css({ 'top': 10, 'left': 10 });
</script>
and adding a class .saveFeaturePopUp to the div...
<style type="text/css">
.saveFeaturePopUp
{
position: {my: "top", at: "bottom", of: $("header")};
}
</style>
but to no avail. please advise

You should just need to set Position:absolute in your css.
<script type="text/javascript">
$('#saveDialogSingleFeature').css({position: 'absolute', 'top': 10, 'left': 10 });
</script>

Related

On click scroll to the top with 100px more

I use one page website and when I click menu button about it scrolls down to the top of some div... But Because I am using fixed header scrolling goes to 0px top and I need like 100px top like padding in body tag but I need to say in function I need to scroll to the top of item after 100px from top of the page.
Here is my code:
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
var x = $(this.hash).offset().top;
$('html,body').animate({scrollTop:x},2000);
});
});
Just adding 100px to $(this.hash).offset().top will do it if I understand you correctly.
Since, offset is getting data relative to the document.
Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document. http://api.jquery.com/offset/
Example:
jQuery(document).ready(function($) {
$(".scroll").click(function(event) {
event.preventDefault();
var x = $(this).offset().top;
$('html,body').animate({scrollTop: x - 100 }, 2000);
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body style="height: 1000px; padding-top: 100px">
<div class="scroll">click to scroll to me</div>
</body>
</html>

How to create a popup box where users can copy text?

In my HTML page I generate a link, where users can grab to use for things. I need to somehow give the user the link where they can see the link and then copy the link to clip board.
I don't mean copy to clip board through code, just manually selecting the text and clicking ctrl+c or right click+copy is ok.
Is there a way I can create a popup box where it has text there that you can select and copy?
This needs to work with all browsers (IE8+) (Firefox) (Chrome) (especially IE8). So if I use alert box, I will not be able to copy the text so I can't use alerts.
Is there some really easy way that doesn't involve lots of code and also not using another HTML file for the popup box or something.
I can even use jquery if that makes it easy. Really, just a way to show a popup where the user can copy the text, and this is all done with code.
Thanks.
You could use jQuery ui .dialog()
JS:
$(function() {
$( "#dialog" ).dialog();
});
HTML:
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
You could try and use window.prompt() and do something like this: http://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt where you can copy the text from the input, which can default to the link.
with jquery you can do something like this
$(function() {
$( "<div>Your text here </div>" ).dialog();
});
I'd user a overlaying div, which would appear on a click event. It would contain the text You would like to be able to copy and a close button. (using jQuery!)
First save Your div's content in a string variable. Let us call this variable divCont.
After this we create the overlaying div:
var docHeight = $(document).height();
$("body").append("<div id='overlayDiv'></div>").hide().fadeIn("slow");
$overlayDiv = $("#overlayDiv");
$overlayDiv.height(docHeight).css({
'opacity' : 0.9,
'position': 'absolute',
'top': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000,
'margin-left': 10%,
'margin-right': 10%,
'color': 'white'
});
Then we append the content of the $overlayDiv with our divCont string and we add a close button to it:
$overlayDiv.append(divCont+"<button id='close'>CLOSE</button>'");
After this we add a handler to the close:
$("#close").ready(function(){
$(document).on("click", "#close", function(){
$overlayDiv.fadeOut("slow", function(){
$overlayDiv.remove();
});
});
});
Link to working example -> fiddle
create a fixed div in the middle of the screen (or where ever you want it to be) with a input text box within it. You can trigger this structure whenever you generate a link.
check this fiddle
<div id = "clipboard">
<input type = "text"></input>
</div>
CSS style would be
#clipboard{
position: fixed;
left: 40%;
top: 40%;
width: 100px;
height: 30px;
border: thin solid grey;
}
#clipboard input{
width: 100%;
height: 100%;
}
you could use an iframe
--------opener.html
<html>
<head>
<title>modalopener</title>
<script language="JavaScript" type="text/javascript">
var modalWin = null;
function openModal() {
if (window.showModalDialog) {
modalWin = window.showModalDialog('modalchild.html',null,'dialogWidth=300px; dialogHeight=200px; status=0');
}
}
</script>
</head>
<body>
<b>open modal window</b>
</body>
</html>
--------modalchild.html
<html>
<head>
<title>Modal Child</title>
</head>
<body leftmargin="0" topmargin="0">
<iframe name="modalChild" width="100%" height="100%" src="modaliframe.html" frameborder="0"> </iframe>
</body>
</html>
--------modaliframe.html
<html>
<head>
<title>Modal Iframe</title>
</head>
<body leftmargin=0 topmargin=0 bgcolor="pink">
<div align="center"><br>
yahoo<br>
google<br>
hotbot
</div>
<script language="JavaScript" type="text/javascript">
// call this to reload
function loadIFrm(url) {
location = url;
}
</script>
</body>
</html>

Horizontal sliding jquery

Basically, I currently have a slide down menu that displays links when you click the header.
I want this to change to a horizontal slide but my knowledge is currently only with HTML and CSS, in other words I'm not very good at jquery/javascript.
So yeh, here's an example (Click CATEGORIES) http://newsunken.tumblr.com/
I would like it so that when you click categories the categories slide from the left to the right and display like "CATEGORIES TEES JUMPERS HEADWEAR"
Sorry for the noob question!
$('#box').click(function()
{
$(this).animate({
width: '350px'
}, 300, function() {
// Animation complete.
});
});
and
<div id="box" style="width:70px; height: 20px;overflow:hidden; border:1px solid black;">Categories Tees Jumpers Headwear Gift Vouchers</div>
here's the best thing i could come up with but isnt as sleek as the one on newsunken.tumblr.com
This script slides horizontally fine, just in case I am showing the whole page. Please, pay attention to the document.ready function
<html>
<head>
<title>sliding</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#box').click(function()
{
$(this).animate({width: '350px'}, 300, function() {
// Animation complete.
});
});
});
</script>
</head>
<body>
<div id="box" style="width:70px; height: 20px;overflow:hidden; border:1px solid black;">Categories Tees Jumpers Headwear Gift Vouchers</div>
</body>
</html>
I'm not sure if it is what you are looking for, but try this:
$('#box').click(function()
{
$(this).animate({
height: 'toggle',
width: '350px'
}, 300, function() {
// Animation complete.
});
});

jQuery - Draggable UI - How to detect if element has been dragged to a spot, then call an animation

I have this div that can be dragged vertically off the screen. I want to know if there's a way to detect if that div has reached passed a certain limit, then display an animation where it automatically slides off the page. What I have done so far I thought should work, but alas, my mediocre knowledge of JavaScript has reared it's ugly end. Here's what I have so far:
$(document).ready(function() {
$("div").draggable({
axis: "y", // vertical drag only
drag: function(event, ui) { // THIS NEXT BLOCK JUST MAKES SURE IT WON'T DRAG OFF THE BOTTOM OF SCREEN
if($(this).offset().top + $(this).outerHeight() > $(window).height()) {
$(this).offset({"top": $(window).height() - $(this).outerHeight()});
event.preventDefault();
}
}
});
if($("div").css("top") == "-340px") {
$("div").animate({
top: "-100%"
});
}
});
I know that the jQuery UI "Draggable" uses the property top because I looked in Google Chrome's debugger tool and as I was dragging it dynamically inserts inline styles, and I read top: -(x)px; keep climbing while I was dragging the div. So, logically, I tested to see if it gets dragged pass -340px then just automatically drag it the rest of the way.
And also, if possible, I would like for the div to drop down (using revert?) if it doesn't go past -340px, but that's not a huge issue really.
Your condition is not in the right place; you should make the verification once the Drag even is fired !
See bellow the code here check if position is upper then 100 and fire the animation :
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<div id="draggable" class="ui-widget-content ui-draggable" style="position: relative;">
<p>Drag me around</p>
</div>
<script>
$(document).ready(function() {
$("div").draggable({
axis: "y", // vertical drag only
drag: function(event, ui) { // THIS NEXT BLOCK JUST MAKES SURE IT WON'T DRAG OFF THE BOTTOM OF SCREEN
if($(this).offset().top + $(this).outerHeight() > $(window).height()) {
$(this).offset({"top": $(window).height() - $(this).outerHeight()});
event.preventDefault();
}
if(Number($("div").css("top").replace("px","")) > 100) {
$("div").animate({
top: "-100%"
});
}
}
});
});
</script>
</body>
</html>

Div in wrong position while loading

I have a JavaScript slide-out menu on my page. As the page is loading the menu shows in the wrong place and as opened (it should be closed by default). It then jumps into the correct position and state once the page has loaded.
I would like the menu to either load last or be in the correct position to start with. I have tried making the style for the menu hidden and the display it as a block on page load with JavaScript but the menu just stays hidden.
<link rel="stylesheet" type="text/css" media="all" href="<css/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="</css/reset.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tabSlideOut.v1.3.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle',
pathToTabImage: 'images/closed_menu.png', //class of the element that will become your tab
imageHeight: '230px', //height of tab image //Optionally can be set using css
imageWidth: '62px', //width of tab image //Optionally can be set using css
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 600, //speed of animation
action: 'hover', //options: 'click' or 'hover', action to trigger animation
topPos: '270px', //position from the top/ use if tabLocation is left or right
leftPos: '30px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
$("div.slide-out-div").mouseover(function(){
$('.handle').css("background-image", "url(images/open_menu.png)");
}).mouseout(function(){
$('.handle').css("background-image", "url(images/closed_menu.png)");
});
$('#sliderimages').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
next: '#next',
prev: '#prev'
});
});
</script>
<body onload="javascript:document.getElementByClass('slide-out-div').style.display = 'block';">
and then the CSS
.slide-out-div {
display: none;
padding-left: 0px;
width: 200px;
z-index: 3;
position: relative;
}
A possible solution might be this. In the <head> of your html add:
<script>document.documentElement.className += ' js'</script>
This will add a "js" class onto the <html> element.
Next, in your css file style your menu as you would normally, but immediately after, hide it by adding the .js class. For example:
.menu { /* your normal styling goes here */ }
.js .menu { display: none; }
This makes sure that your menu is shown in clients that do, for whatever reason, not support JavaScript but hidden in clients that do support JavaScript.
Next up, adapt your JavaScript file to show the slide-out menu when needed.
Looked at this with fresh eyes this morning and just realised I was using trying to use a Class in my Javascript and not an ID.
I changed from this
<body onload="javascript:document.getElementByClass('slide-out-div').style.display = 'block';">
to this
<body onload="javascript:document.getElementById('menu').style.display = 'block';">

Categories

Resources